Generate a new UI component following the StyleSeed Toss design conventions
Generate a new component: $0 Description: $ARGUMENTS
First, read the design system seed for context:
CLAUDE.md for component conventionscss/theme.css for available design tokenscomponents/ui/button.tsx as a reference patternFollow these conventions strictly:
function declaration (not const)data-slot="component-name" attributecn() from @/components/ui/utils for all className mergingReact.ComponentProps<> for prop typingclassName prop for overridesclass-variance-authority) if the component has variantsbg-cardtext-foregroundDesign token usage:
text-foreground, bg-card, text-brand, text-muted-foreground, border-bordershadow-[var(--shadow-card)], shadow-[var(--shadow-elevated)]rounded-md, rounded-lg, rounded-2xlp-1.5, p-3, p-6)duration-[var(--duration-fast)], ease-[var(--ease-default)]Typography rules:
leading-none tracking-[-0.02em]leading-snug tracking-[-0.01em]leading-normal (default tracking)tracking-[0.05em]size-* shorthand instead of w-* h-*ms-*/me-* instead of ml-*/mr-* (logical properties)Accessibility requirements:
min-h-11 min-w-11)aria-* attributes passthroughfocus-visible:ring-2 focus-visible:ring-ring for keyboard focusprefers-reduced-motion for animationsExport the component as a named export (not default)
Place the file in the appropriate directory:
src/components/ui/src/components/patterns/