component-create-ui

UI Component Creation Request

Please create a new UI component following our design system patterns and accessibility standards:

🎯 UI COMPONENT CREATION OBJECTIVES:

1. INTEGRATE with design system using Catalyst base components and TailwindCSS patterns
2. IMPLEMENT comprehensive accessibility with ARIA attributes and keyboard navigation
3. PROVIDE flexible variants with consistent visual design and interaction patterns
4. ENSURE optimal performance with proper state management and optimization
5. FOLLOW project standards for TypeScript, testing, and component architecture

📋 UI COMPONENT DEVELOPMENT METHODOLOGY:

STEP 1: Component Planning and Design System Integration

Determine Component Type and Location:

• Client Component: src/components/client/ui/ - Interactive UI components
• Base Component Extension: Extend Catalyst components when available
• Component Categories:
  • Input Components: Buttons, inputs, selects, checkboxes (input/)
  • Display Components: Cards, badges, avatars, progress (display/)
  • Navigation Components: Tabs, pagination, breadcrumbs (navigation/)
  • Feedback Components: Alerts, toasts, modals, tooltips (feedback/)
  • Layout Components: Dividers, spacers, containers (layout/)

Design System Assessment:

• Catalyst Integration: Check if base component exists in components/catalyst/
• Design Tokens: Use established color, spacing, and typography scales
• Variant System: Plan consistent size, color, and state variants
• Accessibility Requirements: Plan ARIA attributes and keyboard interactions

STEP 2: Component Variants and States Design

Variant System Pattern:

// Define comprehensive variant types
interface ComponentVariants {
  /** Visual style variant */
  variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
  /** Size variant */
  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  /** Color scheme */
  color?: 'blue' | 'green' | 'red' | 'gray' | 'yellow';
  /** State variants */
  disabled?: boolean;
  loading?: boolean;
}

// Implement with class-variance-authority or similar
const componentVariants = cva(
  "base-component-classes",
  {
    variants: {
      variant: {
        primary: "bg-blue-600 text-white hover:bg-blue-700",
        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
        outline: "border border-gray-300 hover:bg-gray-50",
        ghost: "hover:bg-gray-100",
        destructive: "bg-red-600 text-white hover:bg-red-700"
      },
      size: {
        xs: "px-2 py-1 text-xs",
        sm: "px-3 py-1.5 text-sm",
        md: "px-4 py-2 text-base",
        lg: "px-6 py-3 text-lg",
        xl: "px-8 py-4 text-xl"
      }
    },
    defaultVariants: {
      variant: "primary",
      size: "md"
    }
  }
);