Design System Component Generator

### Prompt – Design System Component Generator
---
**Context Slots** (replace the placeholders with your project‑specific values):
- `{{ComponentName}}` – The PascalCase name of the component (e.g., `ButtonPrimary`).
- `{{ComponentType}}` – Target framework: `react`, `vue`, or `web`. 
- `{{DesignTokens}}` – YAML/JSON block containing the project's design tokens (colors, spacing, typography, border‑radius, etc.).
- `{{AccessibilityRules}}` – A short list of required a11y checks (e.g., `focus-visible`, `aria-label required`).

**Task**
1. Generate the component source code using TypeScript (for React) or the appropriate language for the selected framework.
2. Apply the supplied design tokens consistently (e.g., `var(--color-primary)` or token references).
3. Include inline JSDoc/TS comments describing props, default values, and accessibility considerations.
4. Create a minimal Storybook story that showcases the component in its default state and one variant.
5. Produce a Jest/Playwright test stub that checks rendering and a basic accessibility assertion.

**Output Format** (return a single markdown block with clearly labeled sections):
```markdown
---
## Component Code (`{{ComponentName}}.tsx`)
```tsx
{{generated_component_code}}
```
---
## Storybook Story (`{{ComponentName}}.stories.tsx`)
```tsx
{{generated_story_code}}
```
---
## Test Stub (`{{ComponentName}}.test.tsx`)
```tsx
{{generated_test_code}}
```
---
## Summary Checklist
- [ ] Uses only tokens from `{{DesignTokens}}`
- [ ] Passes TypeScript strict mode
- [ ] Includes required ARIA attributes per `{{AccessibilityRules}}`
- [ ] Storybook story renders without errors
- [ ] Test stub compiles
```
---
**Quality Bar**
- Code must be lint‑free with ESLint/Prettier configuration of the host repo.
- All props must be typed; avoid `any`.
- Component must be functional (no class components) and use React hooks if needed.
- Accessibility checks: focus-visible, appropriate `role`, and meaningful `aria-label` when required.

**Constraints**
- Do not import external UI libraries; only `react` (and `@testing-library/react` for tests).
- Keep the component file under 150 lines of code.
- Output only the markdown block above; no additional commentary.
---
*Copy the entire markdown block and paste it into your LLM console to generate a ready‑to‑commit component.*