Design System Component Creation

Create a design system component specification for [component name].

Component Context:
- Component purpose: [describe]
- Use cases: [list]
- Design system: [name/link]

Provide:

1. Component Overview
   - Component name and purpose
   - When to use vs. when not to use
   - Design principles it follows
   - Accessibility requirements

2. Visual Design
   - Dimensions and spacing
   - Color usage (tokens)
   - Typography (tokens)
   - Iconography requirements
   - Border radius, shadows, effects

3. Variants
   - Size variants (if applicable)
   - Style variants (primary, secondary, etc.)
   - State variants (default, hover, active, disabled)
   - Context variants (if applicable)

4. States
   - Default state
   - Hover state
   - Focus state
   - Active/pressed state
   - Disabled state
   - Loading state
   - Error state

5. Composition
   - Required elements
   - Optional elements
   - Slot/placeholder areas
   - Nested components

6. Interaction Patterns
   - User interactions
   - Animation and transitions
   - Responsive behavior
   - Keyboard navigation

7. Design Tokens
   - Color tokens used
   - Spacing tokens used
   - Typography tokens used
   - Border radius tokens
   - Shadow tokens

8. Usage Guidelines
   - Best practices
   - Common mistakes to avoid
   - Do's and don'ts
   - Examples of good usage

9. Technical Specifications
   - Props/parameters
   - Events/callbacks
   - Dependencies
   - Framework considerations

10. Documentation Requirements
    - Storybook examples
    - Code examples
    - Design examples
    - Accessibility notes

Format as a complete component specification ready for design system integration.