{
  "components": [
    {
      "name": "Button",
      "description": "",
      "props": [
        {
          "name": "variant",
          "type": "\"accent\" | \"accent-subtle\" | \"neutral\" | \"neutral-subtle\" | \"ghost\" | \"danger\" | \"danger-subtle\" | \"outline\"",
          "required": false,
          "default": "neutral",
          "description": "Visual variant."
        },
        {
          "name": "size",
          "type": "24 | 32 | 40 | 48",
          "required": false,
          "default": 32,
          "description": "Height in px (24 | 32 | 40 | 48)."
        },
        {
          "name": "href",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Render as an anchor with this href (D33). disabled → aria-disabled,\nno href attribute, pointer-events: none."
        },
        {
          "name": "target",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Anchor target; only used with href."
        },
        {
          "name": "rel",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Anchor rel; only used with href."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the underlying element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "IconButton",
      "description": "",
      "props": [
        {
          "name": "variant",
          "type": "\"accent\" | \"neutral\" | \"ghost\" | \"danger\"",
          "required": false,
          "default": "neutral",
          "description": "Visual variant."
        },
        {
          "name": "size",
          "type": "24 | 32 | 40 | 48",
          "required": false,
          "default": 32,
          "description": "Square size in px (24 | 32 | 40 | 48)."
        },
        {
          "name": "href",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Render as an anchor with this href (D33). disabled → aria-disabled,\nno href attribute, pointer-events: none."
        },
        {
          "name": "target",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Anchor target; only used with href."
        },
        {
          "name": "rel",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Anchor rel; only used with href."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the underlying element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "Card",
      "description": "",
      "props": [
        {
          "name": "variant",
          "type": "\"stacked\" | \"featured\"",
          "required": false,
          "default": "stacked",
          "description": "stacked = media above body; featured = media beside body (~1.6fr/1fr), stacks under md."
        },
        {
          "name": "media",
          "type": "ReactNode",
          "required": false,
          "default": null,
          "description": "Media slot rendered edge-to-edge (img, AspectRatio, …)."
        },
        {
          "name": "hoverLift",
          "type": "boolean",
          "required": false,
          "default": false,
          "description": "Lift on hover: translateY(-6px) over --ds-duration-350."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLDivElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the root element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "Input",
      "description": "",
      "props": [
        {
          "name": "size",
          "type": "24 | 32 | 40 | 48",
          "required": false,
          "default": 32,
          "description": "Height in px (24 | 32 | 40 | 48)."
        },
        {
          "name": "error",
          "type": "boolean",
          "required": false,
          "default": false,
          "description": "Show error styling."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLInputElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the underlying `<input>` element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "Select",
      "description": "",
      "props": [
        {
          "name": "size",
          "type": "24 | 32 | 40 | 48",
          "required": false,
          "default": 32,
          "description": "Height in px (24 | 32 | 40 | 48). Replaces the native `size` attribute\n(which sets the visible option-row count on a listbox-style `<select>`)\nwith the design system's control height in pixels."
        },
        {
          "name": "error",
          "type": "boolean",
          "required": false,
          "default": false,
          "description": "Show error styling."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLSelectElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the underlying `<select>` element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "Checkbox",
      "description": "",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "required": false,
          "default": null,
          "description": "Label text."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLInputElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the underlying `<input type=\"checkbox\">` element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "Switch",
      "description": "",
      "props": [
        {
          "name": "children",
          "type": "ReactNode",
          "required": false,
          "default": null,
          "description": "Label text."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLInputElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the underlying `<input type=\"checkbox\" role=\"switch\">` element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "Tag",
      "description": "",
      "props": [
        {
          "name": "variant",
          "type": "\"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\"",
          "required": false,
          "default": "neutral",
          "description": "Semantic color variant."
        },
        {
          "name": "subtle",
          "type": "boolean",
          "required": false,
          "default": false,
          "description": "Use tinted background with semantic foreground."
        },
        {
          "name": "onDismiss",
          "type": "(() => void)",
          "required": false,
          "default": null,
          "description": "When provided, renders a dismiss button that calls this handler."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLSpanElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the underlying `<span>` element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "Tooltip",
      "description": "",
      "props": [
        {
          "name": "content",
          "type": "ReactNode",
          "required": true,
          "default": null,
          "description": "Tooltip content."
        },
        {
          "name": "children",
          "type": "ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>",
          "required": true,
          "default": null,
          "description": "The trigger element (must accept ref, onMouseEnter/Leave, onFocus/Blur)."
        },
        {
          "name": "placement",
          "type": "\"top\" | \"bottom\" | \"left\" | \"right\"",
          "required": false,
          "default": "top",
          "description": "Preferred placement."
        }
      ]
    },
    {
      "name": "NavBar",
      "description": "",
      "props": [
        {
          "name": "brand",
          "type": "ReactNode",
          "required": false,
          "default": null,
          "description": "Brand slot (wordmark / logo link), leading edge."
        },
        {
          "name": "actions",
          "type": "ReactNode",
          "required": false,
          "default": null,
          "description": "Trailing actions slot (theme switch, CTA)."
        },
        {
          "name": "children",
          "type": "ReactNode",
          "required": false,
          "default": null,
          "description": "Nav links."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the header element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    },
    {
      "name": "AspectRatio",
      "description": "",
      "props": [
        {
          "name": "ratio",
          "type": "number",
          "required": true,
          "default": null,
          "description": "Width/height ratio, e.g. 16/10 or 4/5."
        },
        {
          "name": "ref",
          "type": "Ref<HTMLDivElement>",
          "required": false,
          "default": null,
          "description": "Forwarded ref to the frame element."
        },
        {
          "name": "className",
          "type": "string",
          "required": false,
          "default": null,
          "description": "Additional CSS class name(s) merged onto the component's root element."
        }
      ]
    }
  ]
}