[
  {
    "name": "Button",
    "description": "Primary interactive control for actions. Five visual variants\n(primary, secondary, ghost, danger, link) and three sizes (sm, md, icon).\nSupports polymorphic rendering via `asChild` (Radix Slot) to apply button\nstyling to a different element, e.g. a router `<Link>`.",
    "props": [
      "variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link' (default 'primary')",
      "size: 'sm' | 'md' | 'icon' (default 'md')",
      "asChild: boolean — render styling onto the single child element instead of a <button>"
    ],
    "tokens": [
      "bg-brand-primaryAction",
      "text-brand-onPrimary",
      "bg-surface",
      "text-text-primary",
      "border-border-interactive",
      "bg-subtle",
      "bg-status-danger",
      "text-status-on-status",
      "text-text-link",
      "rounded-control",
      "duration-interactive",
      "ease-interactive"
    ],
    "usage": "<Button variant=\"primary\" size=\"md\">Save changes</Button>\n<Button variant=\"secondary\" size=\"sm\">Cancel</Button>\n<Button variant=\"danger\">Delete</Button>\n<Button asChild variant=\"link\">\n  <Link to=\"/docs\">Read the docs</Link>\n</Button>",
    "sourceFile": "components/ui/Button.tsx"
  },
  {
    "name": "Card",
    "description": "Layout primitive for grouping content in a bordered, elevated\nsurface. Width is controlled by the parent container, not the Card itself,\nso it works unchanged as a fixed-width rail item or a grid cell. Applies an\ninteractive hover treatment (deeper shadow) unless `staticCard` is set.",
    "props": [
      "staticCard: boolean (default false) — disable the hover elevation change for non-clickable cards"
    ],
    "tokens": [
      "rounded-card",
      "border-border",
      "bg-surface",
      "shadow-1",
      "shadow-2"
    ],
    "usage": "<Card>\n  <h3>Title</h3>\n  <p>Body content</p>\n</Card>\n<Card staticCard>Non-interactive content</Card>",
    "sourceFile": "components/ui/Card.tsx"
  }
]