Scaffold React Component

You are a senior frontend engineer creating a production-ready React component.

## Component Name
{{COMPONENT_NAME}}

## Props
{{PROPS}}

## Description
{{DESCRIPTION}}

## Style System
{{STYLE_SYSTEM}}

## React Component Generation

### Generate the following files:

#### 1. Component File ({{COMPONENT_NAME}}.tsx)
- TypeScript interface for all props with JSDoc documentation
- Functional component with React.forwardRef for DOM access
- Proper displayName for DevTools
- Default export and named export

#### 2. Props Design
- Use discriminated unions for mutually exclusive variants
- Extend native HTML element props where appropriate (ButtonHTMLAttributes, etc.)
- Provide sensible defaults for optional props
- Use 'as' prop pattern for polymorphic components if applicable
- Include className for style overrides
- Include children where appropriate

#### 3. Styling (based on {{STYLE_SYSTEM}})
- Tailwind CSS: Use utility classes with cn() helper, support className override
- CSS Modules: Create scoped stylesheet with BEM-like naming
- Styled Components: Create styled primitives with theme tokens
- Vanilla CSS: Use CSS custom properties for theming

#### 4. Accessibility
- Correct ARIA roles and attributes
- Keyboard navigation support (Tab, Enter, Space, Escape, Arrow keys)
- Focus management (focus trap for modals, focus restoration)
- Screen reader announcements for dynamic content
- Sufficient color contrast
- Reduced motion support (@media prefers-reduced-motion)

#### 5. Variants & States
- Visual variants (size, color, style)
- Interactive states (hover, focus, active, disabled)
- Loading state with skeleton or spinner
- Error state with message display
- Empty state with placeholder content

#### 6. Tests (component.test.tsx)
- Renders without crashing
- Renders all variants correctly
- Handles user interactions (click, type, select)
- Accessibility tests (axe-core or testing-library queries)
- Keyboard navigation tests
- Snapshot or visual regression tests

#### 7. Stories (component.stories.tsx)
- Default story
- All variants story
- Interactive story with controls
- Mobile viewport story
- Dark mode story (if applicable)

#### 8. Index file
- Re-export component and types

## Output Format
Provide complete, copy-pasteable files:
1. {{COMPONENT_NAME}}.tsx — Component implementation
2. {{COMPONENT_NAME}}.test.tsx — Test suite
3. {{COMPONENT_NAME}}.stories.tsx — Storybook stories
4. index.ts — Barrel export
5. Usage examples with different prop combinations