component-update-ui

UI Component Update Request

Please update and enhance an existing UI component following our design system improvement patterns and interaction standards:

🎯 UI COMPONENT UPDATE OBJECTIVES:

1. ENHANCE variant system with improved design tokens, states, and interaction patterns
2. IMPROVE accessibility with better ARIA attributes, keyboard navigation, and focus management
3. OPTIMIZE interactions with smooth animations, micro-interactions, and responsive feedback
4. UPGRADE design system integration with Catalyst compatibility and token consistency
5. MAINTAIN backward compatibility while implementing meaningful design and functionality improvements

📋 UI COMPONENT UPDATE METHODOLOGY:

STEP 1: Current Component Assessment

Analyze Existing Implementation:

• Current variant system: Review existing size, color, and state variants
• Design system integration: Check Catalyst compatibility and token usage
• Accessibility audit: Test ARIA attributes, keyboard navigation, and screen reader support
• Interaction patterns: Evaluate hover, focus, active, and loading states
• Performance analysis: Review rendering optimization and bundle impact

Identify Enhancement Opportunities:

// Assessment checklist for UI component improvements
interface UIComponentAudit {
  designSystem: {
    catalystIntegration: boolean;
    designTokens: boolean;
    variantConsistency: boolean;
    responsiveDesign: boolean;
  };
  accessibility: {
    ariaAttributes: boolean;
    keyboardNavigation: boolean;
    focusManagement: boolean;
    colorContrast: boolean;
  };
  interactions: {
    hoverStates: boolean;
    focusStates: boolean;
    loadingStates: boolean;
    animations: boolean;
  };
  performance: {
    memoOptimization: boolean;
    bundleSize: boolean;
    renderingSpeed: boolean;
    memoryUsage: boolean;
  };
}

STEP 2: Variant System Enhancement

Advanced Variant Improvements:

// Enhanced variant system with comprehensive options
interface EnhancedUIVariants {
  /** Visual style variant */
  variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive';
  /** Size configuration */
  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  /** Color scheme */
  color?: 'blue' | 'green' | 'red' | 'orange' | 'purple' | 'gray';
  /** Corner radius */
  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
  /** Shadow depth */
  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  /** State variants */
  state?: 'default' | 'hover' | 'focus' | 'active' | 'disabled' | 'loading';
}

// Enhanced variant implementation with class-variance-authority
const enhancedUIVariants = cva(
  [
    // Base styles with design tokens
    "inline-flex items-center justify-center",
    "font-medium transition-all duration-200 ease-in-out",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
    "disabled:pointer-events-none disabled:opacity-50"
  ],
  {
    variants: {
      variant: {
        primary: [
          "bg-primary text-primary-foreground",
          "hover:bg-primary/90",
          "focus-visible:ring-primary"
        ],
        secondary: [
          "bg-secondary text-secondary-foreground",
          "hover:bg-secondary/80",
          "focus-visible:ring-secondary"
        ],
        outline: [
          "border border-input bg-background",
          "hover:bg-accent hover:text-accent-foreground",
          "focus-visible:ring-ring"
        ],
        ghost: [
          "hover:bg-accent hover:text-accent-foreground",
          "focus-visible:ring-ring"
        ],
        link: [
          "text-primary underline-offset-4",
          "hover:underline",
          "focus-visible:ring-ring"
        ],
        destructive: [
          "bg-destructive text-destructive-foreground",
          "hover:bg-destructive/90",
          "focus-visible:ring-destructive"
        ]
      },
      size: {
        xs: "h-7 px-2 text-xs",
        sm: "h-8 px-3 text-sm",
        md: "h-9 px-4 text-sm",
        lg: "h-10 px-6 text-base",
        xl: "h-11 px-8 text-base"
      },
      radius: {
        none: "rounded-none",
        sm: "rounded-sm",
        md: "rounded-md",
        lg: "rounded-lg",
        full: "rounded-full"
      },
      shadow: {
        none: "shadow-none",
        sm: "shadow-sm",
        md: "shadow-md",
        lg: "shadow-lg",
        xl: "shadow-xl"
      }
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
      radius: "md",
      shadow: "none"
    }
  }
);