@wizeworks/silicaui-mcp 0.26.0 → 0.28.0

package/dist/data/components.json

@@ -79,7 +79,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Button } from \"@wizeworks/silicaui-react\";\nimport { Section, Row, Stack } from \"../lib/Section\";\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\nimport { PlusIcon } from \"../lib/icons\";\nimport { VARIANTS } from \"../lib/data\";\n\nexport function ButtonDemo() {\n    const [loading, setLoading] = useState(false);\n\n    function fakeSave() {\n        setLoading(true);\n        setTimeout(() => setLoading(false), 1800);\n    }\n\n    return (\n        <>\n            <ColorVariantSizeGrid\n                Component={Button}\n                variants={VARIANTS.filter((v) => v !== \"solid\")}\n            />\n\n            <Section title=\"Icon buttons (square / circle)\">\n                <Row>\n                    <Button color=\"primary\" shape=\"square\" aria-label=\"Add\">\n                        <PlusIcon />\n                    </Button>\n                    <Button color=\"secondary\" shape=\"circle\" aria-label=\"Add\">\n                        <PlusIcon />\n                    </Button>\n                    <Button color=\"accent\" variant=\"outline\" shape=\"circle\" aria-label=\"Add\">\n                        <PlusIcon />\n                    </Button>\n                    <Button color=\"brand\" iconStart={<PlusIcon />}>\n                        with icon\n                    </Button>\n                </Row>\n            </Section>\n\n            <Section title=\"States\">\n                <Row>\n                    <Button color=\"primary\" loading={loading} onClick={fakeSave}>\n                        {loading ? \"Saving…\" : \"Click to load\"}\n                    </Button>\n                    <Button color=\"primary\" disabled>\n                        Disabled\n                    </Button>\n                    <Button color=\"primary\" variant=\"outline\" active>\n                        Active\n                    </Button>\n                </Row>\n            </Section>\n\n            <Section title=\"Polymorphism · render → a real <a href>\">\n                <Row>\n                    <Button\n                        color=\"brand\"\n                        variant=\"link\"\n                        render={<a href=\"https://example.com\" />}\n                    >\n                        Anchor · link style\n                    </Button>\n                    <Button color=\"brand\" render={<a href=\"https://example.com\" />}>\n                        Anchor · button style\n                    </Button>\n                </Row>\n            </Section>\n\n            <Section title=\"Layout\">\n                <Stack className=\"w-full\">\n                    <Button color=\"primary\" block>\n                        Block\n                    </Button>\n                    <Button color=\"neutral\" variant=\"outline\" wide>\n                        Wide\n                    </Button>\n                </Stack>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "DropdownMenu",
@@ -181,7 +181,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Swap } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nfunction MenuIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" width=\"28\" height=\"28\">\n            <path d=\"M4 6h16M4 12h16M4 18h16\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\nfunction CloseIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" width=\"28\" height=\"28\">\n            <path d=\"M6 6l12 12M18 6 6 18\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\nfunction SunIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" width=\"24\" height=\"24\">\n            <circle cx=\"12\" cy=\"12\" r=\"4\" />\n            <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\nfunction MoonIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\n            <path d=\"M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z\" />\n        </svg>\n    );\n}\n\nexport function SwapDemo() {\n    const [menuOpen, setMenuOpen] = useState(false);\n\n    return (\n        <>\n            <Section title=\"Transition variants\">\n                <Row>\n                    <Swap variant=\"fade\" on={<CloseIcon />} off={<MenuIcon />} label=\"Fade\" />\n                    <Swap variant=\"rotate\" on={<CloseIcon />} off={<MenuIcon />} label=\"Rotate\" />\n                    <Swap variant=\"flip\" on={<MoonIcon />} off={<SunIcon />} label=\"Flip\" />\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · controlled mobile menu toggle\">\n                <div className=\"flex items-center gap-3\">\n                    <Swap\n                        variant=\"rotate\"\n                        active={menuOpen}\n                        onActiveChange={setMenuOpen}\n                        on={<CloseIcon />}\n                        off={<MenuIcon />}\n                        label=\"Toggle menu\"\n                    />\n                    <span className=\"text-sm opacity-70\">\n                        Menu is {menuOpen ? \"open\" : \"closed\"}\n                    </span>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Accordion",
@@ -203,7 +203,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Accordion,\n    AccordionItem,\n    AccordionTrigger,\n    AccordionPanel,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function AccordionDemo() {\n    return (\n        <>\n            <Section title=\"Real use · FAQ (single-open)\">\n                <Accordion defaultValue={[\"a\"]} className=\"max-w-md\">\n                    <AccordionItem value=\"a\">\n                        <AccordionTrigger>What is Silica?</AccordionTrigger>\n                        <AccordionPanel>\n                            A component library and design system built on one CSS-first\n                            token model.\n                        </AccordionPanel>\n                    </AccordionItem>\n                    <AccordionItem value=\"b\">\n                        <AccordionTrigger>Is it themeable?</AccordionTrigger>\n                        <AccordionPanel>\n                            Yes — every color, radius, and size is a CSS variable you can\n                            override per theme.\n                        </AccordionPanel>\n                    </AccordionItem>\n                    <AccordionItem value=\"c\">\n                        <AccordionTrigger>Does it work with any framework?</AccordionTrigger>\n                        <AccordionPanel>\n                            The core is a Tailwind plugin; React components are a thin\n                            typed layer on top.\n                        </AccordionPanel>\n                    </AccordionItem>\n                </Accordion>\n            </Section>\n\n            <Section title=\"Multiple open at once\">\n                <Accordion multiple defaultValue={[\"a\", \"b\"]} className=\"max-w-md\">\n                    <AccordionItem value=\"a\">\n                        <AccordionTrigger>Section one</AccordionTrigger>\n                        <AccordionPanel>Both of these can be open together.</AccordionPanel>\n                    </AccordionItem>\n                    <AccordionItem value=\"b\">\n                        <AccordionTrigger>Section two</AccordionTrigger>\n                        <AccordionPanel>Set the `multiple` prop to allow it.</AccordionPanel>\n                    </AccordionItem>\n                </Accordion>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Avatar",
@@ -261,7 +261,7 @@
         ]
       }
     ],
-    "usageExample": "import { Avatar, AvatarGroup } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS, SIZES } from \"../lib/data\";\n\n// A stand-in \"photo\" (data URI, always loads offline): a head-and-shoulders\n// silhouette on a gradient, so the image path — object-fit cover + rounding —\n// is demonstrated without a network request.\nconst PHOTO = `data:image/svg+xml,${encodeURIComponent(\n    `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>` +\n        `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +\n        `<stop offset='0' stop-color='#6366f1'/><stop offset='1' stop-color='#ec4899'/>` +\n        `</linearGradient></defs>` +\n        `<rect width='100' height='100' fill='url(#g)'/>` +\n        `<circle cx='50' cy='40' r='18' fill='rgba(255,255,255,.92)'/>` +\n        `<rect x='22' y='62' width='56' height='38' rx='19' fill='rgba(255,255,255,.92)'/>` +\n        `</svg>`,\n)}`;\n\nexport function AvatarDemo() {\n    return (\n        <>\n            <Section title=\"Colors (initials fallback)\">\n                <Row>\n                    {COLORS.map((color) => (\n                        <Avatar key={color} color={color} alt={color}>\n                            {color.slice(0, 2).toUpperCase()}\n                        </Avatar>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    {SIZES.map((size) => (\n                        <Avatar key={size} color=\"primary\" size={size} alt={size}>\n                            {size.toUpperCase()}\n                        </Avatar>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · team roster with presence\">\n                <Row>\n                    <Avatar src={PHOTO} alt=\"Ada Lovelace\" ring status=\"online\" />\n                    <Avatar color=\"secondary\" alt=\"Grace Hopper\" ring status=\"online\">\n                        GH\n                    </Avatar>\n                    <Avatar color=\"neutral\" alt=\"Alan Turing\" status=\"offline\">\n                        AT\n                    </Avatar>\n                    <Avatar shape=\"rounded\" color=\"brand\" alt=\"Katherine Johnson\">\n                        KJ\n                    </Avatar>\n                </Row>\n                <Row>\n                    <span className=\"text-xs opacity-60\">Overlapping group —</span>\n                    <AvatarGroup>\n                        <Avatar src={PHOTO} alt=\"Ada Lovelace\" />\n                        <Avatar color=\"secondary\" alt=\"Grace Hopper\">\n                            GH\n                        </Avatar>\n                        <Avatar color=\"accent\" alt=\"Alan Turing\">\n                            AT\n                        </Avatar>\n                        <Avatar color=\"neutral\" alt=\"+3 more\">\n                            +3\n                        </Avatar>\n                    </AvatarGroup>\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Badge",
@@ -301,7 +301,7 @@
         ]
       }
     ],
-    "usageExample": "import { Badge } from \"@wizeworks/silicaui-react\";\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\n\nexport function BadgeDemo() {\n    return (\n        <ColorVariantSizeGrid\n            Component={Badge}\n            variants={[\"outline\", \"soft\", \"ghost\", \"dash\"]}\n        />\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Card",
@@ -339,7 +339,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Card,\n    CardBody,\n    CardTitle,\n    CardActions,\n    ClickableCard,\n    SelectableCard,\n    Button,\n    Badge,\n    Input,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function CardDemo() {\n    return (\n        <>\n            <Section title=\"Surfaces\">\n                <div className=\"grid gap-6 sm:grid-cols-2\">\n                    <Card>\n                        <CardBody>\n                            <div className=\"flex items-center justify-between\">\n                                <CardTitle>Project Silica</CardTitle>\n                                <Badge color=\"success\" variant=\"soft\">\n                                    Active\n                                </Badge>\n                            </div>\n                            <p className=\"opacity-70\">\n                                A card sits on the <code>base-100</code> surface, rounds\n                                with <code>--radius-box</code>, and lifts with{\" \"}\n                                <code>--depth</code>.\n                            </p>\n                            <CardActions>\n                                <Button variant=\"ghost\" color=\"neutral\">\n                                    Cancel\n                                </Button>\n                                <Button color=\"primary\">Deploy</Button>\n                            </CardActions>\n                        </CardBody>\n                    </Card>\n\n                    <Card>\n                        <CardBody>\n                            <CardTitle>Newsletter</CardTitle>\n                            <p className=\"opacity-70\">\n                                Inputs and buttons share the field tier, so they line up.\n                            </p>\n                            <div className=\"flex gap-2\">\n                                <Input placeholder=\"you@example.com\" />\n                                <Button color=\"primary\">Subscribe</Button>\n                            </div>\n                        </CardBody>\n                    </Card>\n                </div>\n            </Section>\n\n            <Section title=\"ClickableCard · whole surface is a button (or render as a link)\">\n                <div className=\"grid gap-4 sm:grid-cols-3\">\n                    <ClickableCard onClick={() => console.log(\"open repo\")}>\n                        <CardBody>\n                            <CardTitle>Repository</CardTitle>\n                            <p className=\"opacity-70\">Click anywhere on this card.</p>\n                        </CardBody>\n                    </ClickableCard>\n                    <ClickableCard render={<a href=\"#card\" />}>\n                        <CardBody>\n                            <CardTitle>As a link</CardTitle>\n                            <p className=\"opacity-70\">Renders an &lt;a&gt;, same styling.</p>\n                        </CardBody>\n                    </ClickableCard>\n                    <ClickableCard disabled>\n                        <CardBody>\n                            <CardTitle>Disabled</CardTitle>\n                            <p className=\"opacity-70\">Not interactive.</p>\n                        </CardBody>\n                    </ClickableCard>\n                </div>\n            </Section>\n\n            <Section title=\"SelectableCard · radio group and independent checkboxes\">\n                <div className=\"grid gap-4 sm:grid-cols-3\">\n                    {([\"Starter\", \"Pro\", \"Enterprise\"] as const).map((plan, i) => (\n                        <SelectableCard key={plan} name=\"selectable-plan\" defaultChecked={i === 1}>\n                            <CardBody>\n                                <CardTitle>{plan}</CardTitle>\n                                <p className=\"opacity-70\">\n                                    {i === 0 ? \"For side projects.\" : i === 1 ? \"For growing teams.\" : \"For scale.\"}\n                                </p>\n                            </CardBody>\n                        </SelectableCard>\n                    ))}\n                </div>\n                <div className=\"mt-4 grid gap-4 sm:grid-cols-3\">\n                    {([\"Email alerts\", \"SMS alerts\", \"Push alerts\"] as const).map((opt) => (\n                        <SelectableCard key={opt} type=\"checkbox\" defaultChecked={opt === \"Email alerts\"}>\n                            <CardBody>\n                                <CardTitle>{opt}</CardTitle>\n                            </CardBody>\n                        </SelectableCard>\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Glass · Tier-0 frosted treatment (backdrop-filter blur + saturate, no SVG refraction)\">\n                <div\n                    className=\"rounded-box p-8\"\n                    style={{\n                        backgroundImage:\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\n                    }}\n                >\n                    <div className=\"grid gap-6 sm:grid-cols-2\">\n                        <Card className=\"glass\">\n                            <CardBody>\n                                <CardTitle>Neutral frost</CardTitle>\n                                <p className=\"opacity-80\">\n                                    Plain <code>glass</code> — no color declared, so it\n                                    frosts the neutral <code>base-100</code> surface.\n                                </p>\n                            </CardBody>\n                        </Card>\n\n                        <Card className=\"bg-primary glass\">\n                            <CardBody>\n                                <CardTitle>Tinted frost</CardTitle>\n                                <p className=\"opacity-80\">\n                                    <code>bg-primary glass</code> — same{\" \"}\n                                    <code>--u-accent</code> hook <code>soft</code> uses,\n                                    so the frost picks up primary for colored depth.\n                                </p>\n                            </CardBody>\n                        </Card>\n                    </div>\n\n                    <div className=\"mt-6 grid gap-4 sm:grid-cols-3\">\n                        <ClickableCard\n                            className=\"glass\"\n                            onClick={() => console.log(\"open repo\")}\n                        >\n                            <CardBody>\n                                <CardTitle>Clickable + glass</CardTitle>\n                                <p className=\"opacity-80\">\n                                    Hover still lifts — the rim sheen lives on its own\n                                    pseudo-element, not the hover shadow.\n                                </p>\n                            </CardBody>\n                        </ClickableCard>\n\n                        {([\"Starter\", \"Pro\"] as const).map((plan, i) => (\n                            <SelectableCard\n                                key={plan}\n                                name=\"selectable-plan-glass\"\n                                defaultChecked={i === 0}\n                                className=\"glass\"\n                            >\n                                <CardBody>\n                                    <CardTitle>{plan}</CardTitle>\n                                    <p className=\"opacity-80\">\n                                        Checked ring still reads through the frost.\n                                    </p>\n                                </CardBody>\n                            </SelectableCard>\n                        ))}\n                    </div>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Carousel",
@@ -407,7 +407,7 @@
         "members": []
       }
     ],
-    "usageExample": "import type { CSSProperties } from \"react\";\nimport { Carousel, CarouselItem } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst SLIDES = [\"primary\", \"secondary\", \"accent\", \"info\", \"success\"] as const;\n\nfunction slideStyle(color: string): CSSProperties {\n    return {\n        backgroundColor: `var(--color-${color})`,\n        color: `var(--color-${color}-content, #fff)`,\n    };\n}\n\nexport function CarouselDemo() {\n    return (\n        <>\n            <Section title=\"Real use · loop + autoplay\">\n                <Carousel loop autoplay={3000} className=\"max-w-lg gap-4 rounded-box\">\n                    {SLIDES.map((color) => (\n                        <CarouselItem\n                            key={color}\n                            className=\"flex h-40 w-full shrink-0 items-center justify-center rounded-box font-semibold\"\n                            style={slideStyle(color)}\n                        >\n                            {color}\n                        </CarouselItem>\n                    ))}\n                </Carousel>\n            </Section>\n\n            <Section title=\"Numbered indicators, no loop\">\n                <Carousel indicators=\"numbers\" className=\"max-w-lg gap-4 rounded-box\">\n                    {SLIDES.slice(0, 3).map((color) => (\n                        <CarouselItem\n                            key={color}\n                            className=\"flex h-32 w-full shrink-0 items-center justify-center rounded-box font-semibold\"\n                            style={slideStyle(color)}\n                        >\n                            {color}\n                        </CarouselItem>\n                    ))}\n                </Carousel>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Chat",
@@ -453,7 +453,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Chat,\n    ChatImage,\n    ChatHeader,\n    ChatBubble,\n    ChatFooter,\n    Avatar,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function ChatDemo() {\n    return (\n        <>\n            <Section title=\"Bubble colors\">\n                <div className=\"flex flex-col gap-3\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Chat key={color} side=\"end\">\n                            <ChatBubble color={color}>{color} bubble</ChatBubble>\n                        </Chat>\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · a short conversation\">\n                <div className=\"flex max-w-md flex-col gap-1\">\n                    <Chat side=\"start\">\n                        <ChatImage>\n                            <Avatar color=\"neutral\" alt=\"Obi-Wan\">\n                                OW\n                            </Avatar>\n                        </ChatImage>\n                        <ChatHeader>\n                            Obi-Wan <time className=\"opacity-60\">12:45</time>\n                        </ChatHeader>\n                        <ChatBubble>You were the chosen one!</ChatBubble>\n                    </Chat>\n                    <Chat side=\"start\">\n                        <ChatImage>\n                            <Avatar color=\"neutral\" alt=\"Obi-Wan\">\n                                OW\n                            </Avatar>\n                        </ChatImage>\n                        <ChatBubble>\n                            It was said that you would destroy the Sith, not join them.\n                        </ChatBubble>\n                    </Chat>\n                    <Chat side=\"end\">\n                        <ChatBubble color=\"primary\">I hate you!</ChatBubble>\n                        <ChatFooter>Delivered</ChatFooter>\n                    </Chat>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ChatComposer",
@@ -1164,7 +1164,7 @@
         ]
       }
     ],
-    "usageExample": "import { Collapse, CollapseTitle, CollapseContent } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst FAQS = [\n    { q: \"Can I change plans later?\", a: \"Yes — upgrade or downgrade anytime from Settings.\" },\n    { q: \"Do you offer refunds?\", a: \"Full refund within 14 days, no questions asked.\" },\n    { q: \"Is there a free trial?\", a: \"14 days on every paid plan, no card required.\" },\n];\n\nexport function CollapseDemo() {\n    return (\n        <>\n            <Section title=\"Real use · FAQ (exclusive — one open at a time)\">\n                <div className=\"flex max-w-md flex-col gap-2\">\n                    {FAQS.map((f, i) => (\n                        <Collapse key={f.q} name=\"faq\" open={i === 0}>\n                            <CollapseTitle>{f.q}</CollapseTitle>\n                            <CollapseContent>{f.a}</CollapseContent>\n                        </Collapse>\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Ghost (borderless)\">\n                <Collapse ghost className=\"max-w-md\">\n                    <CollapseTitle>Shipping details</CollapseTitle>\n                    <CollapseContent>Ships in 2–3 business days.</CollapseContent>\n                </Collapse>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Countdown",
@@ -1204,7 +1204,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Countdown } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function CountdownDemo() {\n    const [target] = useState(() => Date.now() + 90 * 1000);\n\n    return (\n        <>\n            <Section title=\"Real use · launch countdown (90s demo)\">\n                <Countdown to={target} />\n            </Section>\n\n            <Section title=\"Selected units, plain style\">\n                <Countdown to={target} units={[\"minutes\", \"seconds\"]} plain />\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Diff",
@@ -1250,7 +1250,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Diff } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nfunction Panel({ label, color }: { label: string; color: string }) {\n    return (\n        <div\n            className=\"flex h-full w-full items-center justify-center text-lg font-semibold text-white\"\n            style={{ backgroundColor: color }}\n        >\n            {label}\n        </div>\n    );\n}\n\nexport function DiffDemo() {\n    const [pos, setPos] = useState(50);\n\n    return (\n        <Section title=\"Real use · draggable before/after comparison\">\n            <Diff\n                className=\"max-w-lg\"\n                style={{ aspectRatio: \"16 / 9\" }}\n                position={pos}\n                onPositionChange={setPos}\n                before={<Panel label=\"Before\" color=\"#64748b\" />}\n                after={<Panel label=\"After\" color=\"#6366f1\" />}\n            />\n            <p className=\"pt-2 text-xs opacity-60\">\n                Split at {Math.round(pos)}% — drag the handle or use ←/→.\n            </p>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Kbd",
@@ -1272,7 +1272,7 @@
         ]
       }
     ],
-    "usageExample": "import { Kbd } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function KbdDemo() {\n    return (\n        <>\n            <Section title=\"Sizes\">\n                <Row>\n                    {SIZES.map((size) => (\n                        <Kbd key={size} size={size}>\n                            {size}\n                        </Kbd>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · shortcuts inline\">\n                <div className=\"flex flex-col gap-2 text-sm\">\n                    <p>\n                        Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette.\n                    </p>\n                    <p>\n                        <Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd> on Windows.\n                    </p>\n                    <p>\n                        <Kbd>Esc</Kbd> to close any dialog.\n                    </p>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "List",
@@ -1306,7 +1306,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { List, ListRow, ListColGrow, ListTitle, Avatar, Button } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst MEMBERS = [\n    { initials: \"AL\", name: \"Ada Lovelace\", role: \"Owner\" },\n    { initials: \"GH\", name: \"Grace Hopper\", role: \"Admin\" },\n    { initials: \"AT\", name: \"Alan Turing\", role: \"Member\" },\n];\n\nexport function ListDemo() {\n    return (\n        <Section title=\"Real use · team member list\">\n            <List hover className=\"max-w-md\">\n                <ListTitle>Team</ListTitle>\n                {MEMBERS.map((m) => (\n                    <ListRow key={m.initials}>\n                        <Avatar color=\"primary\" size=\"sm\" alt={m.name}>\n                            {m.initials}\n                        </Avatar>\n                        <ListColGrow>\n                            <div className=\"font-medium\">{m.name}</div>\n                            <div className=\"text-sm opacity-60\">{m.role}</div>\n                        </ListColGrow>\n                        <Button size=\"sm\" variant=\"ghost\" color=\"neutral\">\n                            Manage\n                        </Button>\n                    </ListRow>\n                ))}\n            </List>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "MetadataList",
@@ -1357,7 +1357,7 @@
         ]
       }
     ],
-    "usageExample": "import { MetadataList, MetadataItem, Badge, Avatar } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function MetadataListDemo() {\n    return (\n        <>\n            <Section title=\"Real use · project detail panel\">\n                <div className=\"max-w-sm rounded-box border border-base-300 p-4\">\n                    <MetadataList>\n                        <MetadataItem label=\"Status\">\n                            <Badge color=\"success\" variant=\"soft\">\n                                Active\n                            </Badge>\n                        </MetadataItem>\n                        <MetadataItem label=\"Owner\">\n                            <div className=\"flex items-center justify-end gap-2\">\n                                <Avatar size=\"xs\" alt=\"Ada Lovelace\" color=\"primary\">\n                                    AL\n                                </Avatar>\n                                Ada Lovelace\n                            </div>\n                        </MetadataItem>\n                        <MetadataItem label=\"Created\">Jan 1, 2026</MetadataItem>\n                        <MetadataItem label=\"Last updated\">2 hours ago</MetadataItem>\n                        <MetadataItem label=\"Repository\">wizeworks/silicaui</MetadataItem>\n                    </MetadataList>\n                </div>\n            </Section>\n\n            <Section title=\"layout=&quot;stack&quot; · label above value, for narrow cards\">\n                <Row>\n                    <div className=\"w-56 rounded-box border border-base-300 p-4\">\n                        <MetadataList layout=\"stack\">\n                            <MetadataItem label=\"Plan\">Pro</MetadataItem>\n                            <MetadataItem label=\"Seats\">12 / 20</MetadataItem>\n                            <MetadataItem label=\"Renews\">Aug 1, 2026</MetadataItem>\n                        </MetadataList>\n                    </div>\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Meter",
@@ -1421,7 +1421,7 @@
         ]
       }
     ],
-    "usageExample": "import { Meter } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { COLORS, SIZES } from \"../lib/data\";\n\nexport function MeterDemo() {\n    return (\n        <>\n            <Section title=\"Colors\">\n                <div className=\"grid max-w-md gap-4\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Meter key={color} color={color} value={65} label={color} showValue />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <div className=\"flex max-w-md flex-col gap-3\">\n                    {SIZES.map((size) => (\n                        <Meter key={size} color=\"primary\" size={size} value={60} />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · gauges\">\n                <div className=\"grid max-w-md gap-4\">\n                    <Meter color=\"warning\" value={92} label=\"Storage used\" showValue />\n                    <Meter color=\"success\" value={78} label=\"Battery\" showValue />\n                    <Meter color=\"error\" value={12} min={0} max={100} label=\"Credit score risk\" showValue />\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "MockupBrowser",
@@ -1768,7 +1768,7 @@
         ]
       }
     ],
-    "usageExample": "import { PreviewCard, Link, Avatar } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function PreviewCardDemo() {\n    return (\n        <Section title=\"Real use · hover a link to preview the profile\">\n            <p className=\"max-w-md text-sm\">\n                Reviewed by{\" \"}\n                <PreviewCard\n                    content={\n                        <div className=\"flex items-center gap-3\">\n                            <Avatar color=\"primary\" alt=\"Ada Lovelace\">\n                                AL\n                            </Avatar>\n                            <div>\n                                <div className=\"font-medium\">Ada Lovelace</div>\n                                <div className=\"text-xs opacity-60\">\n                                    Founding engineer · @ada\n                                </div>\n                            </div>\n                        </div>\n                    }\n                    arrow\n                >\n                    <Link href=\"#\" color=\"primary\">\n                        @ada\n                    </Link>\n                </PreviewCard>{\" \"}\n                on the pull request.\n            </p>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Stat",
@@ -1795,7 +1795,7 @@
         "members": []
       }
     ],
-    "usageExample": "import {\n    Stats,\n    Stat,\n    StatTitle,\n    StatValue,\n    StatDesc,\n    StatFigure,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { UserIcon } from \"../lib/icons\";\n\nexport function StatDemo() {\n    return (\n        <>\n            <Section title=\"Real use · dashboard KPIs\">\n                <Stats>\n                    <Stat>\n                        <StatFigure>\n                            <UserIcon />\n                        </StatFigure>\n                        <StatTitle>New users</StatTitle>\n                        <StatValue>1,204</StatValue>\n                        <StatDesc>↗︎ 3.2% this month</StatDesc>\n                    </Stat>\n                    <Stat>\n                        <StatTitle>Revenue</StatTitle>\n                        <StatValue>$14,300</StatValue>\n                        <StatDesc>↗︎ 12.4% this month</StatDesc>\n                    </Stat>\n                    <Stat>\n                        <StatTitle>Churn</StatTitle>\n                        <StatValue>1.8%</StatValue>\n                        <StatDesc>↘︎ 0.6% this month</StatDesc>\n                    </Stat>\n                </Stats>\n            </Section>\n\n            <Section title=\"Vertical layout\">\n                <Stats vertical className=\"max-w-xs\">\n                    <Stat>\n                        <StatTitle>Storage used</StatTitle>\n                        <StatValue>72 GB</StatValue>\n                        <StatDesc>of 100 GB</StatDesc>\n                    </Stat>\n                    <Stat>\n                        <StatTitle>Bandwidth</StatTitle>\n                        <StatValue>1.2 TB</StatValue>\n                        <StatDesc>this billing cycle</StatDesc>\n                    </Stat>\n                </Stats>\n            </Section>\n\n            <Section title=\"Glass · KPI band over a colored hero\">\n                <div\n                    className=\"rounded-box p-8\"\n                    style={{\n                        backgroundImage:\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\n                    }}\n                >\n                    <Stats className=\"glass\">\n                        <Stat>\n                            <StatFigure>\n                                <UserIcon />\n                            </StatFigure>\n                            <StatTitle>New users</StatTitle>\n                            <StatValue>1,204</StatValue>\n                            <StatDesc>↗︎ 3.2% this month</StatDesc>\n                        </Stat>\n                        <Stat>\n                            <StatTitle>Revenue</StatTitle>\n                            <StatValue>$14,300</StatValue>\n                            <StatDesc>↗︎ 12.4% this month</StatDesc>\n                        </Stat>\n                        <Stat>\n                            <StatTitle>Churn</StatTitle>\n                            <StatValue>1.8%</StatValue>\n                            <StatDesc>↘︎ 0.6% this month</StatDesc>\n                        </Stat>\n                    </Stats>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Table",
@@ -1835,7 +1835,7 @@
         ]
       }
     ],
-    "usageExample": "import { Table, Badge } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst ROWS = [\n    { name: \"Ada Lovelace\", role: \"Engineer\", status: \"Active\" as const },\n    { name: \"Grace Hopper\", role: \"Admin\", status: \"Active\" as const },\n    { name: \"Alan Turing\", role: \"Engineer\", status: \"Away\" as const },\n];\n\nexport function TableDemo() {\n    return (\n        <>\n            <Section title=\"Real use · team table\">\n                <Table zebra hover className=\"max-w-xl\">\n                    <thead>\n                        <tr>\n                            <th>Name</th>\n                            <th>Role</th>\n                            <th>Status</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {ROWS.map((r) => (\n                            <tr key={r.name}>\n                                <td>{r.name}</td>\n                                <td>{r.role}</td>\n                                <td>\n                                    <Badge\n                                        color={r.status === \"Active\" ? \"success\" : \"warning\"}\n                                        variant=\"soft\"\n                                    >\n                                        {r.status}\n                                    </Badge>\n                                </td>\n                            </tr>\n                        ))}\n                    </tbody>\n                </Table>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <div className=\"flex max-w-xl flex-col gap-4\">\n                    {([\"xs\", \"sm\", \"md\", \"lg\"] as const).map((size) => (\n                        <Table key={size} size={size} zebra>\n                            <thead>\n                                <tr>\n                                    <th>Size</th>\n                                    <th>Value</th>\n                                </tr>\n                            </thead>\n                            <tbody>\n                                <tr>\n                                    <td>{size}</td>\n                                    <td>Row height scales with density</td>\n                                </tr>\n                            </tbody>\n                        </Table>\n                    ))}\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Timeline",
@@ -1881,7 +1881,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Timeline,\n    TimelineItem,\n    TimelineStart,\n    TimelineMiddle,\n    TimelineEnd,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function TimelineDemo() {\n    return (\n        <>\n            <Section title=\"Real use · company milestones\">\n                <Timeline className=\"max-w-md\">\n                    <TimelineItem>\n                        <TimelineStart>2021</TimelineStart>\n                        <TimelineMiddle />\n                        <TimelineEnd box>Founded</TimelineEnd>\n                    </TimelineItem>\n                    <TimelineItem>\n                        <TimelineStart>2023</TimelineStart>\n                        <TimelineMiddle />\n                        <TimelineEnd box>Seed round closed</TimelineEnd>\n                    </TimelineItem>\n                    <TimelineItem>\n                        <TimelineStart>2026</TimelineStart>\n                        <TimelineMiddle />\n                        <TimelineEnd box>Shipped 1.0</TimelineEnd>\n                    </TimelineItem>\n                </Timeline>\n            </Section>\n\n            <Section title=\"Horizontal\">\n                <Timeline orientation=\"horizontal\" className=\"max-w-lg\">\n                    <TimelineItem>\n                        <TimelineStart>Cart</TimelineStart>\n                        <TimelineMiddle />\n                    </TimelineItem>\n                    <TimelineItem>\n                        <TimelineStart>Shipping</TimelineStart>\n                        <TimelineMiddle />\n                    </TimelineItem>\n                    <TimelineItem>\n                        <TimelineStart>Payment</TimelineStart>\n                        <TimelineMiddle />\n                    </TimelineItem>\n                </Timeline>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Timestamp",
@@ -1921,7 +1921,7 @@
         ]
       }
     ],
-    "usageExample": "import { Timestamp } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\nconst now = Date.now();\nconst MIN = 60_000;\nconst HOUR = 60 * MIN;\nconst DAY = 24 * HOUR;\n\nexport function TimestampDemo() {\n    return (\n        <>\n            <Section title=\"Auto (relative within 24h, absolute beyond)\">\n                <Stack>\n                    <p>\n                        Just now — <Timestamp value={now - 30_000} />\n                    </p>\n                    <p>\n                        5 minutes ago — <Timestamp value={now - 5 * MIN} />\n                    </p>\n                    <p>\n                        3 hours ago — <Timestamp value={now - 3 * HOUR} />\n                    </p>\n                    <p>\n                        2 days ago — <Timestamp value={now - 2 * DAY} />\n                    </p>\n                    <p>\n                        2 months ago — <Timestamp value={now - 60 * DAY} />\n                    </p>\n                </Stack>\n            </Section>\n\n            <Section title=\"Forced format\">\n                <Stack>\n                    <p>\n                        Relative — <Timestamp value={now - 3 * DAY} format=\"relative\" />\n                    </p>\n                    <p>\n                        Absolute — <Timestamp value={now - 3 * DAY} format=\"absolute\" />\n                    </p>\n                </Stack>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Autocomplete",
@@ -2197,7 +2197,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport {\n    Calendar,\n    DatePicker,\n    DateRangePicker,\n} from \"@wizeworks/silicaui-react\";\nimport type { DateRange } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function CalendarDemo() {\n    const [date, setDate] = useState<Date | null>(new Date(2026, 6, 14));\n    const [pickedDate, setPickedDate] = useState<Date | null>(null);\n    const [range, setRange] = useState<DateRange>({ start: null, end: null });\n\n    return (\n        <>\n            <Section title=\"Colors (inline)\">\n                <Row>\n                    {COLORS.slice(0, 3).map((color) => (\n                        <Calendar\n                            key={color}\n                            color={color}\n                            value={date}\n                            onValueChange={(v) => setDate(v as Date)}\n                        />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · date + range pickers\">\n                <Row>\n                    <DatePicker\n                        color=\"primary\"\n                        value={pickedDate}\n                        onValueChange={setPickedDate}\n                        placeholder=\"Pick a date\"\n                    />\n                    <DateRangePicker\n                        color=\"primary\"\n                        value={range}\n                        onValueChange={setRange}\n                        placeholder=\"Pick a range\"\n                    />\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Checkbox",
@@ -2225,7 +2225,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Checkbox } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\n\nconst TASKS = [\"Write the announcement\", \"Add screenshots\", \"Ping the design team\"];\n\nexport function CheckboxDemo() {\n    const [done, setDone] = useState<Record<string, boolean>>({\n        \"Write the announcement\": true,\n    });\n\n    return (\n        <>\n            <ColorVariantSizeGrid\n                Component={Checkbox}\n                render={({ color, size }) => (\n                    <label className=\"flex items-center gap-2 text-sm\">\n                        <Checkbox color={color} size={size} defaultChecked />\n                        {color ?? size}\n                    </label>\n                )}\n            />\n\n            <Section title=\"Real use · launch checklist\">\n                <div className=\"flex flex-col gap-2\">\n                    {TASKS.map((task) => (\n                        <label key={task} className=\"flex items-center gap-2 text-sm\">\n                            <Checkbox\n                                color=\"primary\"\n                                checked={!!done[task]}\n                                onChange={(e) =>\n                                    setDone((p) => ({ ...p, [task]: e.target.checked }))\n                                }\n                            />\n                            <span className={done[task] ? \"line-through opacity-50\" : \"\"}>\n                                {task}\n                            </span>\n                        </label>\n                    ))}\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "CheckboxGroup",
@@ -2313,7 +2313,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { CheckboxGroup, CheckboxOption } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function CheckboxGroupDemo() {\n    const [channels, setChannels] = useState<string[]>([\"email\", \"push\"]);\n\n    return (\n        <>\n            <Section title=\"Real use · notification channels\">\n                <CheckboxGroup value={channels} onValueChange={setChannels} color=\"primary\">\n                    <CheckboxOption value=\"email\">Email</CheckboxOption>\n                    <CheckboxOption value=\"push\">Push</CheckboxOption>\n                    <CheckboxOption value=\"sms\">SMS</CheckboxOption>\n                </CheckboxGroup>\n                <p className=\"pt-2 text-xs opacity-60\">\n                    Selected: {channels.join(\", \") || \"none\"}\n                </p>\n            </Section>\n\n            <Section title=\"Horizontal\">\n                <CheckboxGroup defaultValue={[\"mon\", \"wed\", \"fri\"]} orientation=\"horizontal\" color=\"primary\">\n                    <CheckboxOption value=\"mon\">Mon</CheckboxOption>\n                    <CheckboxOption value=\"wed\">Wed</CheckboxOption>\n                    <CheckboxOption value=\"fri\">Fri</CheckboxOption>\n                </CheckboxGroup>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ColorPicker",
@@ -2371,7 +2371,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { ColorPicker, Button } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function ColorPickerDemo() {\n    const [brand, setBrand] = useState(\"oklch(0.62 0.19 29)\");\n    const [accent, setAccent] = useState(\"#22c55e\");\n\n    return (\n        <>\n            <Section title=\"Real use · brand color picker\">\n                <div className=\"flex flex-col items-start gap-3\">\n                    <ColorPicker value={brand} onValueChange={(v) => setBrand(v)} />\n                    <Button style={{ backgroundColor: brand, borderColor: brand, color: \"#fff\" }}>\n                        Preview button\n                    </Button>\n                </div>\n            </Section>\n\n            <Section title=\"variant=&quot;swatch&quot; · compact chip, opens the same panel in a popover\">\n                <Row>\n                    <ColorPicker\n                        variant=\"swatch\"\n                        value={accent}\n                        format=\"hex\"\n                        onValueChange={(v) => setAccent(v)}\n                    />\n                    <span\n                        className=\"text-sm\"\n                        style={{ color: \"var(--color-base-content)\" }}\n                    >\n                        {accent}\n                    </span>\n                    <ColorPicker variant=\"swatch\" disabled defaultValue=\"oklch(0.55 0.2 280)\" />\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Combobox",
@@ -2548,7 +2548,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Combobox } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nconst US_STATES = [\n    \"Alabama\", \"Alaska\", \"Arizona\", \"Arkansas\", \"California\", \"Colorado\",\n    \"Connecticut\", \"Delaware\", \"Florida\", \"Georgia\", \"Hawaii\", \"Idaho\",\n    \"Illinois\", \"Indiana\", \"Iowa\", \"Kansas\", \"Kentucky\", \"Louisiana\",\n];\n\nconst DOC_SUGGESTIONS = [\n    \"Getting started\", \"Installation\", \"Theming\", \"Color tokens\",\n    \"Dark mode\", \"Components\", \"Button\", \"Select\", \"Combobox\",\n    \"Form validation\", \"Accessibility\", \"Migration guide\",\n];\n\nexport function ComboboxDemo() {\n    const [usState, setUsState] = useState<string | null>(null);\n    const [docQuery, setDocQuery] = useState(\"\");\n\n    return (\n        <>\n            <Section title=\"Real use · searchable state picker\">\n                <Combobox\n                    items={US_STATES}\n                    value={usState}\n                    onValueChange={(v) => setUsState(v as string | null)}\n                    placeholder=\"Search states…\"\n                    color=\"primary\"\n                />\n            </Section>\n\n            <Section title=\"Docs search (no clear button)\">\n                <Combobox\n                    items={DOC_SUGGESTIONS}\n                    value={docQuery || null}\n                    onValueChange={(v) => setDocQuery((v as string) ?? \"\")}\n                    placeholder=\"Search docs…\"\n                    clearable={false}\n                />\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n                        <Combobox key={size} items={[\"A\", \"B\", \"C\"]} size={size} placeholder={size} />\n                    ))}\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "DateInput",
@@ -2706,7 +2706,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { DateInput, DateRangeInput } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function DateInputDemo() {\n    const [date, setDate] = useState<Date | null>(new Date(2026, 6, 8));\n    const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({\n        start: null,\n        end: null,\n    });\n\n    return (\n        <>\n            <Section title=\"Real use · typeable date field (type digits or paste)\">\n                <DateInput value={date} onValueChange={setDate} color=\"primary\" />\n                <p className=\"mt-2 text-sm opacity-70\">\n                    {date ? date.toDateString() : \"No date\"}\n                </p>\n            </Section>\n\n            <Section title=\"Locale-driven segment order (en-US vs en-GB vs de-DE)\">\n                <Row>\n                    <DateInput locale=\"en-US\" defaultValue={new Date(2026, 6, 8)} />\n                    <DateInput locale=\"en-GB\" defaultValue={new Date(2026, 6, 8)} />\n                    <DateInput locale=\"de-DE\" defaultValue={new Date(2026, 6, 8)} />\n                </Row>\n            </Section>\n\n            <Section title=\"DateRangeInput\">\n                <DateRangeInput value={range} onValueChange={setRange} />\n                <p className=\"mt-2 text-sm opacity-70\">\n                    {range.start ? range.start.toDateString() : \"…\"} —{\" \"}\n                    {range.end ? range.end.toDateString() : \"…\"}\n                </p>\n            </Section>\n\n            <Section title=\"Sizes / disabled\">\n                <Row>\n                    <DateInput size=\"sm\" defaultValue={new Date(2026, 6, 8)} />\n                    <DateInput size=\"md\" defaultValue={new Date(2026, 6, 8)} />\n                    <DateInput size=\"lg\" defaultValue={new Date(2026, 6, 8)} />\n                    <DateInput disabled defaultValue={new Date(2026, 6, 8)} />\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "DatePicker",
@@ -3229,7 +3229,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { DateTimeInput } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function DateTimeInputDemo() {\n    const [when, setWhen] = useState<Date | null>(new Date(2026, 6, 8, 14, 30));\n\n    return (\n        <>\n            <Section title=\"Real use · schedule a post (type or paste 'e.g. 7/8/2026 2:30 PM')\">\n                <DateTimeInput value={when} onValueChange={setWhen} color=\"primary\" />\n                <p className=\"mt-2 text-sm opacity-70\">\n                    {when ? when.toString() : \"No date/time\"}\n                </p>\n            </Section>\n\n            <Section title=\"24h + seconds, min bound to now\">\n                <DateTimeInput hourCycle={24} showSeconds min={new Date()} />\n            </Section>\n\n            <Section title=\"Sizes / disabled\">\n                <Row>\n                    <DateTimeInput size=\"sm\" defaultValue={new Date(2026, 6, 8, 9, 0)} />\n                    <DateTimeInput size=\"lg\" defaultValue={new Date(2026, 6, 8, 9, 0)} />\n                    <DateTimeInput disabled defaultValue={new Date(2026, 6, 8, 9, 0)} />\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Field",
@@ -3323,7 +3323,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport {\n    Button,\n    Field,\n    FieldLabel,\n    FieldControl,\n    FieldDescription,\n    FieldError,\n    FieldStatus,\n    Textarea,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\nexport function FieldDemo() {\n    const [floatingError, setFloatingError] = useState(false);\n    return (\n        <>\n            <Section title=\"Real use · required field with description\">\n                <Field className=\"max-w-sm\">\n                    <FieldLabel required>Full name</FieldLabel>\n                    <FieldControl required placeholder=\"Ada Lovelace\" />\n                    <FieldDescription>As it appears on your ID.</FieldDescription>\n                    <FieldError />\n                </Field>\n            </Section>\n\n            <Section title=\"Non-input control via render (Textarea)\">\n                <Field className=\"max-w-sm\">\n                    <FieldLabel>Bio</FieldLabel>\n                    <FieldControl render={<Textarea rows={3} />} />\n                    <FieldDescription>Shown on your public profile.</FieldDescription>\n                </Field>\n            </Section>\n\n            <Section title=\"Disabled\">\n                <Stack className=\"max-w-sm\">\n                    <Field disabled>\n                        <FieldLabel>Organization</FieldLabel>\n                        <FieldControl defaultValue=\"Silica UI\" />\n                    </Field>\n                    <Field disabled disabledMessage=\"Contact your admin to change this.\">\n                        <FieldLabel>Billing plan</FieldLabel>\n                        <FieldControl defaultValue=\"Enterprise\" />\n                    </Field>\n                </Stack>\n            </Section>\n\n            <Section title=\"FieldStatus · attached (border+icon+message panel)\">\n                <Stack className=\"max-w-sm\">\n                    <Field status=\"error\" statusMessage=\"Please enter a valid email address.\">\n                        <FieldLabel>Email</FieldLabel>\n                        <FieldControl defaultValue=\"sarah@\" />\n                    </Field>\n                    <Field status=\"warning\" statusMessage=\"This username is already taken — try adding a number.\">\n                        <FieldLabel>Username</FieldLabel>\n                        <FieldControl defaultValue=\"sarah_chen\" />\n                    </Field>\n                    <Field status=\"success\" statusMessage=\"URL is valid and reachable.\">\n                        <FieldLabel>Website</FieldLabel>\n                        <FieldControl defaultValue=\"https://sarahchen.dev\" />\n                    </Field>\n                    <Field status=\"error\">\n                        <FieldLabel>Status without message</FieldLabel>\n                        <FieldControl defaultValue=\"test\" />\n                    </Field>\n                    <Field status=\"error\" statusMessage=\"Key is required.\">\n                        <FieldLabel required>Key</FieldLabel>\n                        <FieldControl placeholder=\"case_study\" />\n                        <FieldDescription>\n                            Immutable URL-safe identifier (lowercase, underscores).\n                        </FieldDescription>\n                    </Field>\n                    <Field loading>\n                        <FieldLabel>Loading field</FieldLabel>\n                        <FieldControl defaultValue=\"sarahc\" />\n                    </Field>\n                </Stack>\n            </Section>\n\n            <Section title=\"FieldStatus · floating (overlays instead of pushing sibling fields)\">\n                <Stack className=\"max-w-sm\">\n                    <Button size=\"sm\" onClick={() => setFloatingError((v) => !v)}>\n                        Toggle error\n                    </Button>\n                    <Field\n                        floating\n                        status={floatingError ? \"error\" : undefined}\n                        statusMessage={\n                            floatingError ? \"Please enter a valid email address.\" : undefined\n                        }\n                    >\n                        <FieldLabel>Email</FieldLabel>\n                        <FieldControl defaultValue=\"sarah@\" />\n                    </Field>\n                    <Field>\n                        <FieldLabel>Next field (stays put either way)</FieldLabel>\n                        <FieldControl defaultValue=\"unaffected\" />\n                    </Field>\n                </Stack>\n            </Section>\n\n            <Section title=\"FieldStatus · detached (for checkboxes/switches/custom controls)\">\n                <Stack className=\"max-w-sm\">\n                    <FieldStatus status=\"error\" attached={false}>\n                        This field is required\n                    </FieldStatus>\n                    <FieldStatus status=\"success\" attached={false}>\n                        Your changes have been saved\n                    </FieldStatus>\n                </Stack>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Fieldset",
@@ -3348,7 +3348,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Fieldset, FieldsetLegend, FieldsetLabel, Input } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function FieldsetDemo() {\n    return (\n        <>\n            <Section title=\"Real use · profile group\">\n                <Fieldset className=\"max-w-sm\">\n                    <FieldsetLegend>Profile</FieldsetLegend>\n                    <Input placeholder=\"Full name\" />\n                    <FieldsetLabel>Your full legal name.</FieldsetLabel>\n                </Fieldset>\n            </Section>\n\n            <Section title=\"Disabled cascades to every control\">\n                <Fieldset disabled className=\"max-w-sm\">\n                    <FieldsetLegend>Billing (locked)</FieldsetLegend>\n                    <Input placeholder=\"Card number\" />\n                    <FieldsetLabel>Contact support to change billing.</FieldsetLabel>\n                </Fieldset>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "FileInput",
@@ -3370,7 +3370,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { FileInput } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function FileInputDemo() {\n    const [name, setName] = useState<string | null>(null);\n\n    return (\n        <>\n            <Section title=\"Sizes\">\n                <Row>\n                    <FileInput size=\"sm\" />\n                    <FileInput />\n                    <FileInput size=\"lg\" />\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · avatar upload\">\n                <div className=\"flex flex-col gap-2\">\n                    <FileInput\n                        accept=\"image/*\"\n                        onChange={(e) => setName(e.target.files?.[0]?.name ?? null)}\n                    />\n                    <p className=\"text-xs opacity-60\">\n                        {name ? `Selected: ${name}` : \"PNG or JPG, up to 5MB.\"}\n                    </p>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "FileUpload",
@@ -3422,7 +3422,7 @@
         ]
       }
     ],
-    "usageExample": "import { FileUpload } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function FileUploadDemo() {\n    return (\n        <Section title=\"Real use · attachments with previews, accept/maxSize filtering\">\n            <div className=\"max-w-md\">\n                <FileUpload\n                    accept=\"image/*,.pdf\"\n                    maxSize={2 * 1024 * 1024}\n                    hint=\"Images or PDF, up to 2MB each\"\n                />\n            </div>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Filter",
@@ -3492,7 +3492,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Filter, FilterItem } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nconst CATEGORIES = [\"All\", \"Apparel\", \"Footwear\", \"Accessories\", \"Sale\"];\n\nexport function FilterDemo() {\n    const [category, setCategory] = useState<string | undefined>(\"All\");\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <div className=\"flex flex-col gap-3\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Filter key={color} color={color} defaultValue=\"all\">\n                            <FilterItem value=\"all\">All</FilterItem>\n                            <FilterItem value=\"new\">New</FilterItem>\n                            <FilterItem value=\"sale\">Sale</FilterItem>\n                        </Filter>\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · category filter\">\n                <div className=\"flex flex-col gap-2\">\n                    <Filter color=\"primary\" value={category} onValueChange={setCategory}>\n                        {CATEGORIES.map((c) => (\n                            <FilterItem key={c} value={c}>\n                                {c}\n                            </FilterItem>\n                        ))}\n                    </Filter>\n                    <p className=\"text-sm opacity-60\">\n                        Showing: {category ?? \"nothing selected\"}\n                    </p>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Form",
@@ -3534,7 +3534,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport {\n    Input,\n    Field,\n    FieldLabel,\n    FieldControl,\n    FieldDescription,\n    FieldError,\n    FloatingLabel,\n    Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Row, Stack } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function InputDemo() {\n    const [email, setEmail] = useState(\"not-an-email\");\n    const invalid = email.length > 0 && !email.includes(\"@\");\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Stack className=\"max-w-md\">\n                    <Input placeholder=\"Default (focus for primary ring)\" />\n                    <Input color=\"primary\" placeholder=\"Primary\" />\n                    <Input color=\"success\" placeholder=\"Success\" />\n                    <Input color=\"error\" placeholder=\"Error\" defaultValue=\"not-an-email\" />\n                    <Input color=\"brand\" placeholder=\"SilicaUI\" />\n                    <Input disabled placeholder=\"Disabled\" />\n                </Stack>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Stack className=\"max-w-md\">\n                    {SIZES.map((size) => (\n                        <Input key={size} size={size} placeholder={size} />\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Real form · Field + validation\">\n                <div className=\"max-w-sm rounded-box border border-base-300 bg-base-100 p-5 shadow-sm\">\n                    <div className=\"flex flex-col gap-4\">\n                        <Field\n                            validationMode=\"onChange\"\n                            validate={() => (invalid ? \"Enter a valid email address\" : null)}\n                        >\n                            <FieldLabel>Work email</FieldLabel>\n                            <FieldControl\n                                type=\"email\"\n                                value={email}\n                                onChange={(e) => setEmail(e.target.value)}\n                                placeholder=\"you@company.com\"\n                            />\n                            <FieldDescription>\n                                We'll send a magic link to sign in.\n                            </FieldDescription>\n                            <FieldError />\n                        </Field>\n                        <FloatingLabel label=\"Company name\">\n                            <Input />\n                        </FloatingLabel>\n                        <Row>\n                            <Button color=\"primary\" block>\n                                Continue\n                            </Button>\n                        </Row>\n                    </div>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "InputGroup",
@@ -3566,7 +3566,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Input, InputGroup, InputGroupAddon } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\nconst AtIcon = () => (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden=\"true\">\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\n        <path d=\"M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n);\n\nexport function InputGroupDemo() {\n    return (\n        <Section title=\"Custom affix composition\">\n            <p className=\"max-w-sm text-xs opacity-60\">\n                The primitive behind PasswordInput/SearchInput/PhoneInput — compose your\n                own leading/trailing icon or text around any Input.\n            </p>\n            <Stack className=\"max-w-sm\">\n                <InputGroup>\n                    <InputGroupAddon placement=\"start\">\n                        <AtIcon />\n                    </InputGroupAddon>\n                    <Input className=\"input-affix-start\" placeholder=\"username\" />\n                </InputGroup>\n            </Stack>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Join",
@@ -3588,7 +3588,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Join, Button, Input } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nconst RANGES = [\"Day\", \"Week\", \"Month\"];\n\nexport function JoinDemo() {\n    const [range, setRange] = useState(\"Week\");\n\n    return (\n        <>\n            <Section title=\"Real use · segmented range picker\">\n                <Join>\n                    {RANGES.map((r) => (\n                        <Button\n                            key={r}\n                            variant={r === range ? \"solid\" : \"outline\"}\n                            color={r === range ? \"primary\" : \"neutral\"}\n                            onClick={() => setRange(r)}\n                        >\n                            {r}\n                        </Button>\n                    ))}\n                </Join>\n            </Section>\n\n            <Section title=\"Input + button\">\n                <Row>\n                    <Join>\n                        <Input placeholder=\"Search…\" />\n                        <Button color=\"primary\">Go</Button>\n                    </Join>\n                </Row>\n            </Section>\n\n            <Section title=\"Vertical\">\n                <Join orientation=\"vertical\" className=\"w-32\">\n                    <Button variant=\"outline\" color=\"neutral\">\n                        Top\n                    </Button>\n                    <Button variant=\"outline\" color=\"neutral\">\n                        Middle\n                    </Button>\n                    <Button variant=\"outline\" color=\"neutral\">\n                        Bottom\n                    </Button>\n                </Join>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Label",
@@ -3628,7 +3628,7 @@
         ]
       }
     ],
-    "usageExample": "import { Label, FloatingLabel, Input } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\nexport function LabelDemo() {\n    return (\n        <>\n            <Section title=\"Plain label\">\n                <div className=\"flex max-w-sm flex-col gap-1.5\">\n                    <Label htmlFor=\"email-plain\">Email</Label>\n                    <Input id=\"email-plain\" placeholder=\"you@example.com\" />\n                </div>\n            </Section>\n\n            <Section title=\"Real use · floating label form\">\n                <Stack className=\"max-w-sm\">\n                    <FloatingLabel label=\"Email\">\n                        <Input type=\"email\" />\n                    </FloatingLabel>\n                    <FloatingLabel label=\"Password\">\n                        <Input type=\"password\" />\n                    </FloatingLabel>\n                </Stack>\n            </Section>\n\n            <Section title=\"Required\">\n                <div className=\"flex max-w-sm flex-col gap-1.5\">\n                    <Label htmlFor=\"email-required\" required>\n                        Email\n                    </Label>\n                    <Input id=\"email-required\" placeholder=\"you@example.com\" />\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "MultiSelect",
@@ -3799,7 +3799,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { MultiSelect } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nconst FRAMEWORKS = [\"React\", \"Vue\", \"Svelte\", \"Solid\", \"Angular\", \"Qwik\", \"Preact\"];\n\nconst COUNTRIES = [\n    { value: \"us\", label: \"United States\" },\n    { value: \"ca\", label: \"Canada\" },\n    { value: \"mx\", label: \"Mexico\" },\n    { value: \"gb\", label: \"United Kingdom\" },\n    { value: \"fr\", label: \"France\" },\n    { value: \"de\", label: \"Germany\" },\n];\n\nexport function MultiSelectDemo() {\n    const [frameworks, setFrameworks] = useState<string[]>([\"React\", \"Svelte\"]);\n    const [countries, setCountries] = useState<{ value: string; label: string }[]>([]);\n\n    return (\n        <>\n            <Section title=\"Real use · pick several frameworks (string items)\">\n                <MultiSelect\n                    items={FRAMEWORKS}\n                    value={frameworks}\n                    onValueChange={(v) => setFrameworks(v as string[])}\n                    placeholder=\"Add a framework…\"\n                    color=\"primary\"\n                />\n            </Section>\n\n            <Section title=\"Object items · label ≠ value\">\n                <MultiSelect\n                    items={COUNTRIES}\n                    value={countries}\n                    onValueChange={(v) => setCountries(v as { value: string; label: string }[])}\n                    placeholder=\"Add countries…\"\n                />\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n                        <MultiSelect\n                            key={size}\n                            items={[\"A\", \"B\", \"C\"]}\n                            defaultValue={[\"A\"]}\n                            size={size}\n                            placeholder={size}\n                        />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Disabled\">\n                <MultiSelect items={FRAMEWORKS} defaultValue={[\"Vue\"]} disabled />\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "NativeSelect",
@@ -3849,7 +3849,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { NumberField } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function NumberFieldDemo() {\n    const [qty, setQty] = useState<number | null>(2);\n\n    return (\n        <>\n            <Section title=\"Real use · cart quantity\">\n                <Row>\n                    <NumberField\n                        label=\"Quantity\"\n                        value={qty}\n                        onValueChange={setQty}\n                        min={1}\n                        max={10}\n                    />\n                    <span className=\"text-sm opacity-60\">{qty ?? 0} in cart</span>\n                </Row>\n            </Section>\n\n            <Section title=\"Step + bounds\">\n                <Row>\n                    <NumberField label=\"Percent\" defaultValue={50} min={0} max={100} step={5} />\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "PasswordInput",
@@ -3889,7 +3889,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { PasswordInput } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function PasswordInputDemo() {\n    const [value, setValue] = useState(\"hunter2\");\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Stack className=\"max-w-sm\">\n                    <PasswordInput placeholder=\"Default\" />\n                    <PasswordInput color=\"primary\" placeholder=\"Primary\" />\n                    <PasswordInput color=\"error\" placeholder=\"Error\" defaultValue=\"tooshort\" />\n                    <PasswordInput disabled placeholder=\"Disabled\" defaultValue=\"secret123\" />\n                </Stack>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Stack className=\"max-w-sm\">\n                    {SIZES.map((size) => (\n                        <PasswordInput key={size} size={size} placeholder={size} />\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Controlled\">\n                <Stack className=\"max-w-sm\">\n                    <PasswordInput\n                        value={value}\n                        onChange={(e) => setValue(e.target.value)}\n                        placeholder=\"Password\"\n                    />\n                    <p className=\"text-xs opacity-60\">{value.length} characters</p>\n                </Stack>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "PhoneInput",
@@ -3994,7 +3994,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { PhoneInput } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function PhoneInputDemo() {\n    const [national, setNational] = useState(\"\");\n    const [e164, setE164] = useState(\"\");\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Stack className=\"max-w-sm\">\n                    <PhoneInput />\n                    <PhoneInput color=\"primary\" defaultCountry=\"GB\" defaultValue=\"7911123456\" />\n                    <PhoneInput disabled defaultCountry=\"DE\" defaultValue=\"15123456789\" />\n                </Stack>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Stack className=\"max-w-sm\">\n                    {SIZES.map((size) => (\n                        <PhoneInput key={size} size={size} />\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Controlled\">\n                <Stack className=\"max-w-sm\">\n                    <PhoneInput\n                        value={national}\n                        onValueChange={(nat, e164) => {\n                            setNational(nat);\n                            setE164(e164);\n                        }}\n                    />\n                    <p className=\"text-xs opacity-60\">E.164: {e164 || \"(empty)\"}</p>\n                </Stack>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "PinInput",
@@ -4088,7 +4088,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { PinInput } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack, Row } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function PinInputDemo() {\n    const [code, setCode] = useState(\"\");\n    const [completed, setCompleted] = useState(\"\");\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Stack>\n                    <PinInput length={4} />\n                    <PinInput length={4} color=\"primary\" />\n                    <PinInput length={4} color=\"error\" defaultValue=\"12\" />\n                    <PinInput length={4} disabled defaultValue=\"1234\" />\n                </Stack>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Stack>\n                    {SIZES.map((size) => (\n                        <PinInput key={size} length={4} size={size} />\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Masked (text mode)\">\n                <Row>\n                    <PinInput length={4} mode=\"text\" mask />\n                </Row>\n            </Section>\n\n            <Section title=\"Controlled + onComplete\">\n                <Stack>\n                    <PinInput\n                        length={6}\n                        value={code}\n                        onValueChange={setCode}\n                        onComplete={setCompleted}\n                    />\n                    <p className=\"text-xs opacity-60\">\n                        Value: {code || \"(empty)\"}\n                        {completed && ` — completed: ${completed}`}\n                    </p>\n                </Stack>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Radio",
@@ -4116,7 +4116,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Radio } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\n\nconst PLANS = [\n    { id: \"starter\", label: \"Starter — $9/mo\" },\n    { id: \"pro\", label: \"Pro — $29/mo\" },\n    { id: \"enterprise\", label: \"Enterprise — custom\" },\n];\n\nexport function RadioDemo() {\n    const [plan, setPlan] = useState(\"pro\");\n\n    return (\n        <>\n            <ColorVariantSizeGrid\n                Component={Radio}\n                render={({ color, size }) => (\n                    <label className=\"flex items-center gap-2 text-sm\">\n                        <Radio name={`radio-${color ?? size}`} color={color} size={size} defaultChecked />\n                        {color ?? size}\n                    </label>\n                )}\n            />\n\n            <Section title=\"Real use · pick a plan\">\n                <div className=\"flex flex-col gap-2\">\n                    {PLANS.map((p) => (\n                        <label key={p.id} className=\"flex items-center gap-2 text-sm\">\n                            <Radio\n                                name=\"plan\"\n                                color=\"primary\"\n                                checked={plan === p.id}\n                                onChange={() => setPlan(p.id)}\n                            />\n                            {p.label}\n                        </label>\n                    ))}\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "RadioGroup",
@@ -4210,7 +4210,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { RadioGroup, RadioOption } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function RadioGroupDemo() {\n    const [plan, setPlan] = useState(\"pro\");\n\n    return (\n        <>\n            <Section title=\"Real use · billing plan\">\n                <RadioGroup value={plan} onValueChange={setPlan} color=\"primary\">\n                    <RadioOption value=\"starter\">Starter — $9/mo</RadioOption>\n                    <RadioOption value=\"pro\">Pro — $29/mo</RadioOption>\n                    <RadioOption value=\"enterprise\">Enterprise — custom</RadioOption>\n                </RadioGroup>\n            </Section>\n\n            <Section title=\"Horizontal\">\n                <RadioGroup defaultValue=\"md\" orientation=\"horizontal\" color=\"primary\">\n                    <RadioOption value=\"sm\">Small</RadioOption>\n                    <RadioOption value=\"md\">Medium</RadioOption>\n                    <RadioOption value=\"lg\">Large</RadioOption>\n                </RadioGroup>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Range",
@@ -4232,7 +4232,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Range } from \"@wizeworks/silicaui-react\";\nimport { Section, LabeledRow } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function RangeDemo() {\n    const [volume, setVolume] = useState(40);\n    const [priceRange, setPriceRange] = useState<number[]>([20, 70]);\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <div className=\"flex max-w-md flex-col gap-4\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Range key={color} color={color} defaultValue={55} />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · volume + price range\">\n                <div className=\"flex max-w-md flex-col gap-5\">\n                    <LabeledRow label={`Volume · ${volume}%`}>\n                        <Range\n                            color=\"brand\"\n                            value={volume}\n                            onValueChange={(v) => setVolume(v as number)}\n                        />\n                    </LabeledRow>\n                    <LabeledRow label={`Price range · $${priceRange[0]} – $${priceRange[1]}`}>\n                        <Range\n                            color=\"success\"\n                            value={priceRange}\n                            onValueChange={(v) => setPriceRange(v as number[])}\n                        />\n                    </LabeledRow>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Rating",
@@ -4302,7 +4302,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Rating } from \"@wizeworks/silicaui-react\";\nimport { Section, Row, LabeledRow } from \"../lib/Section\";\nimport { COLORS, SIZES } from \"../lib/data\";\n\nexport function RatingDemo() {\n    const [stars, setStars] = useState(3);\n\n    return (\n        <>\n            <Section title=\"Colors (read-only)\">\n                <Row>\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Rating key={color} color={color} defaultValue={4} readOnly />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <div className=\"flex flex-col gap-2\">\n                    {SIZES.map((size) => (\n                        <Rating key={size} color=\"warning\" size={size} defaultValue={3} readOnly />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · rate this product\">\n                <LabeledRow label={`You rated this ${stars} of 5 stars`}>\n                    <Rating color=\"warning\" value={stars} onChange={setStars} />\n                </LabeledRow>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "SearchInput",
@@ -4348,7 +4348,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { SearchInput } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function SearchInputDemo() {\n    const [query, setQuery] = useState(\"\");\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Stack className=\"max-w-sm\">\n                    <SearchInput placeholder=\"Search…\" />\n                    <SearchInput color=\"primary\" placeholder=\"Search…\" defaultValue=\"silica\" />\n                    <SearchInput disabled placeholder=\"Search…\" defaultValue=\"disabled\" />\n                </Stack>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Stack className=\"max-w-sm\">\n                    {SIZES.map((size) => (\n                        <SearchInput key={size} size={size} placeholder={size} defaultValue={size} />\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Controlled\">\n                <Stack className=\"max-w-sm\">\n                    <SearchInput\n                        value={query}\n                        onValueChange={setQuery}\n                        placeholder=\"Search components…\"\n                    />\n                    <p className=\"text-xs opacity-60\">\n                        {query ? `Searching for \"${query}\"` : \"Type to search, × to clear\"}\n                    </p>\n                </Stack>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Select",
@@ -4519,7 +4519,7 @@
         ]
       }
     ],
-    "usageExample": "import { NativeSelect } from \"@wizeworks/silicaui-react\";\nimport { Section, Row, Stack } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function SelectDemo() {\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Stack className=\"max-w-md\">\n                    <NativeSelect defaultValue=\"\">\n                        <option value=\"\" disabled>\n                            Pick a framework…\n                        </option>\n                        <option>React</option>\n                        <option>Svelte</option>\n                        <option>Vue</option>\n                        <option>Solid</option>\n                    </NativeSelect>\n                    <NativeSelect color=\"primary\" defaultValue=\"React\">\n                        <option>React</option>\n                        <option>Svelte</option>\n                        <option>Vue</option>\n                    </NativeSelect>\n                    <NativeSelect color=\"success\" defaultValue=\"React\">\n                        <option>React</option>\n                        <option>Svelte</option>\n                    </NativeSelect>\n                    <NativeSelect color=\"error\" defaultValue=\"React\">\n                        <option>React</option>\n                        <option>Svelte</option>\n                    </NativeSelect>\n                    <NativeSelect disabled defaultValue=\"React\">\n                        <option>React</option>\n                    </NativeSelect>\n                </Stack>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    {SIZES.map((size) => (\n                        <NativeSelect key={size} size={size} defaultValue={size}>\n                            <option>{size}</option>\n                        </NativeSelect>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · shipping region\">\n                <div className=\"grid max-w-sm gap-3 rounded-box border border-base-300 bg-base-100 p-5 shadow-sm\">\n                    <label className=\"flex flex-col gap-1.5 text-sm\">\n                        Country\n                        <NativeSelect color=\"primary\" defaultValue=\"US\">\n                            <option value=\"US\">United States</option>\n                            <option value=\"CA\">Canada</option>\n                            <option value=\"MX\">Mexico</option>\n                            <option value=\"UK\">United Kingdom</option>\n                        </NativeSelect>\n                    </label>\n                    <label className=\"flex flex-col gap-1.5 text-sm\">\n                        Shipping speed\n                        <NativeSelect defaultValue=\"standard\">\n                            <option value=\"standard\">Standard (5–7 days)</option>\n                            <option value=\"express\">Express (2–3 days)</option>\n                            <option value=\"overnight\">Overnight</option>\n                        </NativeSelect>\n                    </label>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "SelectionList",
@@ -4565,7 +4565,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { SelectionList } from \"@wizeworks/silicaui-react\";\nimport type { SelectionListItem } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nconst PlanIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n        <path d=\"M3 9h18\" />\n    </svg>\n);\n\nconst PLANS: SelectionListItem[] = [\n    { id: \"free\", label: \"Free\", description: \"For trying things out\", icon: PlanIcon },\n    { id: \"pro\", label: \"Pro\", description: \"For growing teams\", icon: PlanIcon },\n    { id: \"enterprise\", label: \"Enterprise\", description: \"Custom limits & support\", icon: PlanIcon },\n];\n\nconst NOTIFICATIONS: SelectionListItem[] = [\n    { id: \"email\", label: \"Email\", description: \"Order + shipping updates\" },\n    { id: \"sms\", label: \"SMS\", description: \"Delivery alerts only\" },\n    { id: \"push\", label: \"Push\", description: \"Real-time on this device\" },\n    { id: \"digest\", label: \"Weekly digest\", description: \"Coming soon\", disabled: true },\n];\n\nexport function SelectionListDemo() {\n    const [plan, setPlan] = useState<string[]>([\"pro\"]);\n    const [channels, setChannels] = useState<string[]>([\"email\", \"push\"]);\n\n    return (\n        <>\n            <Section title=\"Real use · single-select plan picker\">\n                <Row>\n                    <SelectionList\n                        items={PLANS}\n                        value={plan}\n                        onValueChange={setPlan}\n                        className=\"w-72\"\n                    />\n                </Row>\n            </Section>\n\n            <Section title=\"Multi-select · notification channels\">\n                <Row>\n                    <SelectionList\n                        items={NOTIFICATIONS}\n                        multiple\n                        value={channels}\n                        onValueChange={setChannels}\n                        className=\"w-72\"\n                    />\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Slider",
@@ -4599,7 +4599,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Slider } from \"@wizeworks/silicaui-react\";\nimport { Section, LabeledRow } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function SliderDemo() {\n    const [brightness, setBrightness] = useState(65);\n    const [range, setRange] = useState<number[]>([25, 75]);\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <div className=\"flex max-w-md flex-col gap-5\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Slider key={color} color={color} defaultValue={55} />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <div className=\"flex max-w-md flex-col gap-5\">\n                    {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n                        <Slider key={size} color=\"primary\" size={size} defaultValue={55} />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · brightness + a two-thumb range\">\n                <div className=\"flex max-w-md flex-col gap-6\">\n                    <LabeledRow label={`Brightness · ${brightness}%`}>\n                        <Slider\n                            color=\"brand\"\n                            value={brightness}\n                            onValueChange={(v) => setBrightness(v as number)}\n                            showValue={false}\n                        />\n                    </LabeledRow>\n                    <LabeledRow label={`Budget · $${range[0]} – $${range[1]}`}>\n                        <Slider\n                            color=\"success\"\n                            value={range}\n                            onValueChange={(v) => setRange(v as number[])}\n                        />\n                    </LabeledRow>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Switch",
@@ -4627,7 +4627,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Switch } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nconst SETTINGS = [\n    { key: \"push\", label: \"Push notifications\", defaultOn: true },\n    { key: \"email\", label: \"Email digest\", defaultOn: true },\n    { key: \"sms\", label: \"SMS alerts\", defaultOn: false },\n];\n\nexport function SwitchDemo() {\n    const [on, setOn] = useState<Record<string, boolean>>({\n        push: true,\n        email: true,\n        sms: false,\n    });\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Row>\n                    <Switch defaultChecked />\n                    <Switch color=\"primary\" defaultChecked />\n                    <Switch color=\"success\" defaultChecked />\n                    <Switch color=\"warning\" defaultChecked />\n                    <Switch color=\"error\" defaultChecked />\n                    <Switch color=\"brand\" defaultChecked />\n                    <Switch disabled />\n                </Row>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    {SIZES.filter((s) => s !== \"xl\").map((size) => (\n                        <Switch key={size} color=\"primary\" size={size} defaultChecked />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · notification settings\">\n                <div className=\"flex max-w-sm flex-col gap-3 rounded-box border border-base-300 bg-base-100 p-4\">\n                    {SETTINGS.map((s) => (\n                        <label key={s.key} className=\"flex items-center justify-between gap-4 text-sm\">\n                            {s.label}\n                            <Switch\n                                color=\"primary\"\n                                checked={on[s.key]}\n                                onCheckedChange={(v) => setOn((p) => ({ ...p, [s.key]: v }))}\n                            />\n                        </label>\n                    ))}\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "TagInput",
@@ -4715,7 +4715,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { TagInput } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function TagInputDemo() {\n    const [tags, setTags] = useState<string[]>([\"design\", \"ui\", \"tokens\"]);\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Stack className=\"max-w-md\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <TagInput\n                            key={color}\n                            color={color}\n                            defaultValue={[color]}\n                            placeholder=\"Add a tag…\"\n                        />\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Real use · post tags (max 6, dedupe on)\">\n                <div className=\"flex max-w-md flex-col gap-2\">\n                    <TagInput\n                        color=\"primary\"\n                        value={tags}\n                        onValueChange={setTags}\n                        placeholder=\"Press Enter or , to add\"\n                        max={6}\n                    />\n                    <p className=\"text-xs opacity-60\">\n                        {tags.length} / 6 tags — {tags.join(\", \") || \"none yet\"}\n                    </p>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Textarea",
@@ -4743,7 +4743,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Textarea } from \"@wizeworks/silicaui-react\";\nimport { Section, Row, Stack } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function TextareaDemo() {\n    const [note, setNote] = useState(\n        \"Shipping was fast and the packaging held up well.\",\n    );\n    const max = 200;\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Stack className=\"max-w-md\">\n                    <Textarea placeholder=\"Default textarea — drag the corner to resize\" />\n                    <Textarea\n                        color=\"primary\"\n                        defaultValue=\"Primary accent — border and focus ring.\"\n                    />\n                    <Textarea color=\"success\" placeholder=\"Success\" />\n                    <Textarea color=\"error\" placeholder=\"Error\" />\n                    <Textarea color=\"brand\" placeholder=\"Brand accent\" rows={2} />\n                    <Textarea disabled defaultValue=\"Disabled\" />\n                </Stack>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    {SIZES.map((size) => (\n                        <Textarea key={size} size={size} placeholder={size} rows={2} />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · review with a live character count\">\n                <div className=\"max-w-sm rounded-box border border-base-300 bg-base-100 p-5 shadow-sm\">\n                    <div className=\"flex flex-col gap-1.5\">\n                        <label className=\"text-sm font-medium\">Your review</label>\n                        <Textarea\n                            color={note.length > max ? \"error\" : \"primary\"}\n                            value={note}\n                            onChange={(e) => setNote(e.target.value)}\n                            rows={3}\n                        />\n                        <span\n                            className={`self-end text-xs ${\n                                note.length > max ? \"text-error\" : \"opacity-60\"\n                            }`}\n                        >\n                            {note.length} / {max}\n                        </span>\n                    </div>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "TimeInput",
@@ -4830,7 +4830,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { TimeInput, type TimeValue } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function TimeInputDemo() {\n    const [time, setTime] = useState<TimeValue | null>({ hour: 14, minute: 30 });\n\n    return (\n        <>\n            <Section title=\"Real use · 12h field (type digits, arrows, or paste 'e.g. 2:30 PM')\">\n                <TimeInput value={time} onValueChange={setTime} color=\"primary\" />\n                <p className=\"mt-2 text-sm opacity-70\">\n                    {time ? `${String(time.hour).padStart(2, \"0\")}:${String(time.minute).padStart(2, \"0\")} (24h)` : \"No time\"}\n                </p>\n            </Section>\n\n            <Section title=\"24h + seconds\">\n                <TimeInput hourCycle={24} showSeconds defaultValue={{ hour: 14, minute: 30, second: 45 }} />\n            </Section>\n\n            <Section title=\"Sizes / disabled\">\n                <Row>\n                    <TimeInput size=\"sm\" defaultValue={{ hour: 9, minute: 0 }} />\n                    <TimeInput size=\"md\" defaultValue={{ hour: 9, minute: 0 }} />\n                    <TimeInput size=\"lg\" defaultValue={{ hour: 9, minute: 0 }} />\n                    <TimeInput disabled defaultValue={{ hour: 9, minute: 0 }} />\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Toggle",
@@ -4858,7 +4858,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Toggle } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\n\nexport function ToggleDemo() {\n    const [wifi, setWifi] = useState(true);\n\n    return (\n        <>\n            <ColorVariantSizeGrid\n                Component={Toggle}\n                render={({ color, size }) => (\n                    <label className=\"flex items-center gap-2 text-sm\">\n                        <Toggle color={color} size={size} defaultChecked />\n                        {color ?? size}\n                    </label>\n                )}\n            />\n\n            <Section title=\"Real use · Wi-Fi setting\">\n                <label className=\"flex items-center gap-2 text-sm\">\n                    <Toggle\n                        color=\"primary\"\n                        checked={wifi}\n                        onChange={(e) => setWifi(e.target.checked)}\n                    />\n                    Wi-Fi is {wifi ? \"on\" : \"off\"}\n                </label>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ToggleGroup",
@@ -4876,7 +4876,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function ToggleGroupDemo() {\n    const [view, setView] = useState<string[]>([\"grid\"]);\n    const [format, setFormat] = useState<string[]>([\"bold\"]);\n\n    return (\n        <>\n            <Section title=\"Real use · single-select view switcher\">\n                <ToggleGroup value={view} onValueChange={setView}>\n                    <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n                    <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n                    <ToggleGroupItem value=\"board\">Board</ToggleGroupItem>\n                </ToggleGroup>\n            </Section>\n\n            <Section title=\"Multi-select text formatting\">\n                <ToggleGroup multiple value={format} onValueChange={setFormat}>\n                    <ToggleGroupItem value=\"bold\">B</ToggleGroupItem>\n                    <ToggleGroupItem value=\"italic\">I</ToggleGroupItem>\n                    <ToggleGroupItem value=\"underline\">U</ToggleGroupItem>\n                </ToggleGroup>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Validator",
@@ -4902,7 +4902,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Validator, ValidatorHint, Input } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\nexport function ValidatorDemo() {\n    return (\n        <Section title=\"Real use · native validity styling (type to see it flip)\">\n            <Stack className=\"max-w-sm\">\n                <Validator>\n                    <Input required type=\"email\" placeholder=\"you@example.com\" />\n                </Validator>\n                <ValidatorHint>Enter a valid email address.</ValidatorHint>\n\n                <Validator>\n                    <Input required minLength={8} type=\"password\" placeholder=\"Password (min 8 chars)\" />\n                </Validator>\n                <ValidatorHint>Must be at least 8 characters.</ValidatorHint>\n            </Stack>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Breadcrumb",
@@ -4917,7 +4917,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Breadcrumb } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function BreadcrumbDemo() {\n    return (\n        <Section title=\"Real use · navigation trail\">\n            <Breadcrumb>\n                <li>\n                    <a href=\"#\">Home</a>\n                </li>\n                <li>\n                    <a href=\"#\">Projects</a>\n                </li>\n                <li>\n                    <a href=\"#\">Silica UI</a>\n                </li>\n                <li>\n                    <span aria-current=\"page\">Breadcrumb</span>\n                </li>\n            </Breadcrumb>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Dock",
@@ -4955,7 +4955,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Dock, DockItem, DockLabel } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nfunction HomeIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <path d=\"m3 11 9-8 9 8M5 10v10h5v-6h4v6h5V10\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n    );\n}\nfunction SearchIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <circle cx=\"11\" cy=\"11\" r=\"7\" />\n            <path d=\"m21 21-4.3-4.3\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\nfunction UserIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <circle cx=\"12\" cy=\"8\" r=\"4\" />\n            <path d=\"M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7Z\" />\n        </svg>\n    );\n}\n\nexport function DockDemo() {\n    const [tab, setTab] = useState(\"home\");\n\n    return (\n        <>\n            <Section title=\"Colors (active item accent)\">\n                <div className=\"flex flex-col gap-4\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Dock key={color} color={color} className=\"max-w-xs rounded-box\">\n                            <DockItem active>\n                                <HomeIcon />\n                                <DockLabel>Home</DockLabel>\n                            </DockItem>\n                            <DockItem>\n                                <SearchIcon />\n                                <DockLabel>Search</DockLabel>\n                            </DockItem>\n                            <DockItem>\n                                <UserIcon />\n                                <DockLabel>Profile</DockLabel>\n                            </DockItem>\n                        </Dock>\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · interactive bottom nav\">\n                <Dock color=\"primary\" className=\"max-w-xs rounded-box\">\n                    <DockItem active={tab === \"home\"} onClick={() => setTab(\"home\")}>\n                        <HomeIcon />\n                        <DockLabel>Home</DockLabel>\n                    </DockItem>\n                    <DockItem active={tab === \"search\"} onClick={() => setTab(\"search\")}>\n                        <SearchIcon />\n                        <DockLabel>Search</DockLabel>\n                    </DockItem>\n                    <DockItem active={tab === \"profile\"} onClick={() => setTab(\"profile\")}>\n                        <UserIcon />\n                        <DockLabel>Profile</DockLabel>\n                    </DockItem>\n                </Dock>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Link",
@@ -4983,7 +4983,7 @@
         ]
       }
     ],
-    "usageExample": "import { Link } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function LinkDemo() {\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Row>\n                    {COLORS.map((color) => (\n                        <Link key={color} href=\"#\" color={color}>\n                            {color}\n                        </Link>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Hover-only underline\">\n                <Row>\n                    <Link href=\"#\" color=\"primary\" hover>\n                        Underlines on hover\n                    </Link>\n                    <Link href=\"#\" color=\"brand\" hover>\n                        Also brand\n                    </Link>\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · inline in a sentence\">\n                <p className=\"max-w-md opacity-80\">\n                    By continuing you agree to our{\" \"}\n                    <Link href=\"#\" color=\"primary\">\n                        Terms of Service\n                    </Link>{\" \"}\n                    and{\" \"}\n                    <Link href=\"#\" color=\"primary\" hover>\n                        Privacy Policy\n                    </Link>\n                    .\n                </p>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Menu",
@@ -4998,7 +4998,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Menu, MenuItem, MenuTitle } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function MenuDemo() {\n    return (\n        <Section title=\"Real use · sidebar navigation\">\n            <Menu className=\"max-w-xs\">\n                <MenuTitle>Workspace</MenuTitle>\n                <MenuItem>\n                    <a href=\"#\" aria-current=\"page\">\n                        Overview\n                    </a>\n                </MenuItem>\n                <MenuItem>\n                    <a href=\"#\">Projects</a>\n                </MenuItem>\n                <MenuItem>\n                    <a href=\"#\">Team</a>\n                </MenuItem>\n                <MenuTitle>Account</MenuTitle>\n                <MenuItem>\n                    <a href=\"#\">Settings</a>\n                </MenuItem>\n                <MenuItem>\n                    <button type=\"button\">Sign out</button>\n                </MenuItem>\n            </Menu>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Menubar",
@@ -5046,7 +5046,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Menubar,\n    MenubarMenu,\n    MenubarTrigger,\n    MenubarContent,\n    MenubarItem,\n    MenubarSeparator,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function MenubarDemo() {\n    return (\n        <Section title=\"Real use · desktop-app style menu bar\">\n            <Menubar>\n                <MenubarMenu>\n                    <MenubarTrigger>File</MenubarTrigger>\n                    <MenubarContent>\n                        <MenubarItem>New</MenubarItem>\n                        <MenubarItem>Open…</MenubarItem>\n                        <MenubarSeparator />\n                        <MenubarItem>Exit</MenubarItem>\n                    </MenubarContent>\n                </MenubarMenu>\n                <MenubarMenu>\n                    <MenubarTrigger>Edit</MenubarTrigger>\n                    <MenubarContent>\n                        <MenubarItem>Undo</MenubarItem>\n                        <MenubarItem>Redo</MenubarItem>\n                        <MenubarSeparator />\n                        <MenubarItem>Cut</MenubarItem>\n                        <MenubarItem>Copy</MenubarItem>\n                        <MenubarItem>Paste</MenubarItem>\n                    </MenubarContent>\n                </MenubarMenu>\n                <MenubarMenu>\n                    <MenubarTrigger>View</MenubarTrigger>\n                    <MenubarContent>\n                        <MenubarItem>Zoom in</MenubarItem>\n                        <MenubarItem>Zoom out</MenubarItem>\n                    </MenubarContent>\n                </MenubarMenu>\n            </Menubar>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Navbar",
@@ -5060,7 +5060,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Navbar, NavbarStart, NavbarCenter, NavbarEnd, Button } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function NavbarDemo() {\n    return (\n        <>\n            <Section title=\"Real use · site header\">\n                <Navbar className=\"rounded-box border border-base-300\">\n                    <NavbarStart>\n                        <span className=\"text-lg font-bold\">◆ Silica</span>\n                    </NavbarStart>\n                    <NavbarCenter className=\"hidden gap-4 text-sm sm:flex\">\n                        <a href=\"#\">Docs</a>\n                        <a href=\"#\">Components</a>\n                        <a href=\"#\">Pricing</a>\n                    </NavbarCenter>\n                    <NavbarEnd>\n                        <Button variant=\"ghost\" color=\"neutral\">\n                            Sign in\n                        </Button>\n                        <Button color=\"primary\">Get started</Button>\n                    </NavbarEnd>\n                </Navbar>\n            </Section>\n\n            <Section title=\"Glass · floating over a hero\">\n                <div\n                    className=\"flex flex-col gap-24 rounded-box p-4\"\n                    style={{\n                        backgroundImage:\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\n                    }}\n                >\n                    <Navbar className=\"glass\">\n                        <NavbarStart>\n                            <span className=\"text-lg font-bold\">◆ Silica</span>\n                        </NavbarStart>\n                        <NavbarCenter className=\"hidden gap-4 text-sm sm:flex\">\n                            <a href=\"#\">Docs</a>\n                            <a href=\"#\">Components</a>\n                            <a href=\"#\">Pricing</a>\n                        </NavbarCenter>\n                        <NavbarEnd>\n                            <Button variant=\"ghost\" color=\"neutral\">\n                                Sign in\n                            </Button>\n                            <Button color=\"primary\">Get started</Button>\n                        </NavbarEnd>\n                    </Navbar>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "NavigationMenu",
@@ -5116,7 +5116,7 @@
         "members": []
       }
     ],
-    "usageExample": "import {\n    NavigationMenu,\n    NavigationMenuItem,\n    NavigationMenuTrigger,\n    NavigationMenuContent,\n    NavigationMenuLink,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function NavigationMenuDemo() {\n    return (\n        <Section title=\"Real use · site nav with a mega-menu panel\">\n            <NavigationMenu>\n                <NavigationMenuItem>\n                    <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n                    <NavigationMenuContent>\n                        <ul className=\"grid w-80 gap-1 p-2\">\n                            <li>\n                                <a href=\"#\" className=\"block rounded-field p-2 hover:bg-base-200\">\n                                    <div className=\"font-medium\">Components</div>\n                                    <div className=\"text-xs opacity-60\">\n                                        95+ primitives on one token system.\n                                    </div>\n                                </a>\n                            </li>\n                            <li>\n                                <a href=\"#\" className=\"block rounded-field p-2 hover:bg-base-200\">\n                                    <div className=\"font-medium\">Builder</div>\n                                    <div className=\"text-xs opacity-60\">\n                                        Drag-and-drop pages, no code.\n                                    </div>\n                                </a>\n                            </li>\n                        </ul>\n                    </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                    <NavigationMenuLink href=\"#\">Pricing</NavigationMenuLink>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                    <NavigationMenuLink href=\"#\">Docs</NavigationMenuLink>\n                </NavigationMenuItem>\n            </NavigationMenu>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Outline",
@@ -5156,7 +5156,7 @@
         ]
       }
     ],
-    "usageExample": "import { useRef } from \"react\";\nimport { Outline } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst SECTIONS = [\n    { id: \"outline-install\", label: \"Installation\", depth: 0 },\n    { id: \"outline-npm\", label: \"Via npm\", depth: 1 },\n    { id: \"outline-cdn\", label: \"Via CDN\", depth: 1 },\n    { id: \"outline-usage\", label: \"Usage\", depth: 0 },\n    { id: \"outline-theming\", label: \"Theming\", depth: 0 },\n    { id: \"outline-tokens\", label: \"Color tokens\", depth: 1 },\n    { id: \"outline-dark\", label: \"Dark mode\", depth: 1 },\n    { id: \"outline-faq\", label: \"FAQ\", depth: 0 },\n];\n\nexport function OutlineDemo() {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    return (\n        <Section title=\"Real use · scroll-spy docs page (scroll the panel below)\">\n            <div className=\"grid grid-cols-[1fr_12rem] gap-6\">\n                <div\n                    ref={containerRef}\n                    className=\"h-80 overflow-y-auto rounded-box border border-base-300 p-6\"\n                >\n                    {SECTIONS.map((s) => (\n                        <section key={s.id} id={s.id} className=\"mb-10 scroll-mt-4\">\n                            <h3 className=\"mb-2 text-base font-semibold\">{s.label}</h3>\n                            <p className=\"text-sm opacity-70\">\n                                Placeholder copy for the “{s.label}” section — long enough to\n                                make the panel actually scroll so the active link updates as\n                                you go.\n                            </p>\n                        </section>\n                    ))}\n                </div>\n\n                <Outline items={SECTIONS} container={containerRef} offset={24} />\n            </div>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "OverflowList",
@@ -5207,7 +5207,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { OverflowList, Avatar, Badge } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst PEOPLE = [\n    \"Ada Lovelace\",\n    \"Grace Hopper\",\n    \"Alan Turing\",\n    \"Katherine Johnson\",\n    \"Margaret Hamilton\",\n    \"Radia Perlman\",\n    \"Barbara Liskov\",\n    \"Tim Berners-Lee\",\n];\n\nconst TAGS = [\"design-system\", \"accessibility\", \"performance\", \"dark-mode\", \"tokens\", \"typography\", \"motion\"];\n\nexport function OverflowListDemo() {\n    const [width, setWidth] = useState(420);\n\n    return (\n        <>\n            <Section title=\"Real use · assignee avatars, resizable to see the fold point\">\n                <div className=\"flex flex-col gap-3\">\n                    <input\n                        type=\"range\"\n                        min={120}\n                        max={640}\n                        value={width}\n                        onChange={(e) => setWidth(Number(e.target.value))}\n                        className=\"max-w-md\"\n                    />\n                    <div style={{ width }} className=\"rounded-box border border-base-300 p-3\">\n                        <OverflowList\n                            items={PEOPLE}\n                            renderItem={(name) => (\n                                <Avatar key={name} alt={name} color=\"primary\" size=\"sm\">\n                                    {name\n                                        .split(\" \")\n                                        .map((w) => w[0])\n                                        .join(\"\")}\n                                </Avatar>\n                            )}\n                        />\n                    </div>\n                </div>\n            </Section>\n\n            <Section title=\"Tags with custom overflow renderer\">\n                <div className=\"w-80 rounded-box border border-base-300 p-3\">\n                    <OverflowList\n                        items={TAGS}\n                        gap={6}\n                        renderItem={(tag) => (\n                            <Badge key={tag} color=\"neutral\" variant=\"soft\">\n                                {tag}\n                            </Badge>\n                        )}\n                        renderOverflow={(hidden) => (\n                            <Badge color=\"primary\" variant=\"soft\" title={hidden.join(\", \")}>\n                                +{hidden.length} more\n                            </Badge>\n                        )}\n                    />\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Pagination",
@@ -5271,7 +5271,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Pagination } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function PaginationDemo() {\n    const [page, setPage] = useState(4);\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <div className=\"flex flex-col gap-3\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Pagination\n                            key={color}\n                            color={color}\n                            page={3}\n                            count={10}\n                            onChange={() => {}}\n                        />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <div className=\"flex flex-col gap-3\">\n                    {([\"xs\", \"sm\", \"md\", \"lg\"] as const).map((size) => (\n                        <Pagination\n                            key={size}\n                            size={size}\n                            color=\"primary\"\n                            page={3}\n                            count={10}\n                            onChange={() => {}}\n                        />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · interactive search results\">\n                <div className=\"flex max-w-lg flex-col gap-3\">\n                    <p className=\"text-sm opacity-70\">\n                        Showing page {page} of 12 — 118 results\n                    </p>\n                    <Pagination\n                        color=\"primary\"\n                        page={page}\n                        count={12}\n                        onChange={setPage}\n                    />\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Sidebar",
@@ -5359,7 +5359,7 @@
       },
       {
         "name": "SidebarItemProps",
-        "extends": "extends Omit<React.HTMLAttributes<HTMLElement>, \"color\">",
+        "extends": "extends Omit<React.AllHTMLAttributes<HTMLElement>, \"color\" | \"as\">",
         "members": [
           {
             "name": "icon",
@@ -5389,7 +5389,7 @@
             "name": "as",
             "optional": true,
             "type": "React.ElementType",
-            "doc": "Render as a different element, typically `\"a\"` for real navigation."
+            "doc": "Render as a different element, typically `\"a\"` (or a router's `Link`) for real navigation — `AllHTMLAttributes` (not the plain `HTMLAttributes` most components here use) is deliberate so `href`/`target`/etc. type-check when doing so."
           }
         ]
       },
@@ -5399,7 +5399,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport {\n    SidebarProvider,\n    Sidebar,\n    SidebarHeader,\n    SidebarHeaderBrand,\n    SidebarContent,\n    SidebarFooter,\n    SidebarGroup,\n    SidebarGroupLabel,\n    SidebarItem,\n    SidebarTrigger,\n    Wordmark,\n    Avatar,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst HomeIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M3 12 12 3l9 9\" /> <path d=\"M5 10v10h14V10\" />\n    </svg>\n);\nconst SearchIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\" /> <path d=\"m21 21-4.3-4.3\" />\n    </svg>\n);\nconst UsersIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" /> <circle cx=\"9\" cy=\"7\" r=\"4\" />\n        <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" /> <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n    </svg>\n);\nconst SettingsIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M14 17H5\" /> <path d=\"M19 7h-9\" /> <circle cx=\"17\" cy=\"17\" r=\"3\" /> <circle cx=\"7\" cy=\"7\" r=\"3\" />\n    </svg>\n);\n\nfunction AppShell() {\n    const [active, setActive] = useState(\"dashboard\");\n\n    return (\n        <div className=\"flex h-[26rem] w-full max-w-2xl overflow-hidden rounded-box border border-base-200\">\n            <Sidebar>\n                <SidebarHeader>\n                    <SidebarHeaderBrand>\n                        <Wordmark size=\"sm\" color=\"primary\">Acme</Wordmark>\n                    </SidebarHeaderBrand>\n                    <SidebarTrigger />\n                </SidebarHeader>\n                <SidebarContent>\n                    <SidebarGroup>\n                        <SidebarGroupLabel>Workspace</SidebarGroupLabel>\n                        <SidebarItem\n                            icon={HomeIcon}\n                            active={active === \"dashboard\"}\n                            onClick={() => setActive(\"dashboard\")}\n                        >\n                            Dashboard\n                        </SidebarItem>\n                        <SidebarItem\n                            icon={SearchIcon}\n                            active={active === \"search\"}\n                            onClick={() => setActive(\"search\")}\n                        >\n                            Search\n                        </SidebarItem>\n                        <SidebarItem\n                            icon={UsersIcon}\n                            active={active === \"team\"}\n                            onClick={() => setActive(\"team\")}\n                            trailing={<span className=\"badge badge-primary badge-xs\">4</span>}\n                        >\n                            Team\n                        </SidebarItem>\n                    </SidebarGroup>\n                    <SidebarGroup>\n                        <SidebarGroupLabel>Account</SidebarGroupLabel>\n                        <SidebarItem\n                            icon={SettingsIcon}\n                            active={active === \"settings\"}\n                            onClick={() => setActive(\"settings\")}\n                        >\n                            Settings\n                        </SidebarItem>\n                    </SidebarGroup>\n                </SidebarContent>\n                <SidebarFooter>\n                    <SidebarItem icon={<Avatar size=\"xs\">AL</Avatar>}>Ada Lovelace</SidebarItem>\n                </SidebarFooter>\n            </Sidebar>\n\n            <div className=\"flex flex-1 flex-col gap-3 overflow-y-auto p-6\">\n                <div className=\"flex items-center gap-2\">\n                    <SidebarTrigger />\n                    <h4 className=\"text-sm font-semibold capitalize\">{active}</h4>\n                </div>\n                <p className=\"text-sm opacity-70\">\n                    The trigger above lives OUTSIDE the sidebar (in this main content\n                    area) yet still toggles it — both triggers share one\n                    SidebarProvider.\n                </p>\n            </div>\n        </div>\n    );\n}\n\nexport function SidebarDemo() {\n    return (\n        <Section title=\"Real use · app shell (collapsible, cross-tree trigger)\">\n            <SidebarProvider>\n                <AppShell />\n            </SidebarProvider>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Steps",
@@ -5432,7 +5432,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Steps, Step, Button } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nconst CHECKOUT = [\"Cart\", \"Shipping\", \"Payment\", \"Done\"];\n\nexport function StepsDemo() {\n    const [current, setCurrent] = useState(1);\n\n    return (\n        <>\n            <Section title=\"Colors (completed steps)\">\n                <div className=\"flex flex-col gap-6\">\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Steps key={color}>\n                            <Step color={color} data-content=\"✓\">\n                                Cart\n                            </Step>\n                            <Step color={color} data-content=\"✓\">\n                                Shipping\n                            </Step>\n                            <Step color={color}>Payment</Step>\n                            <Step>Done</Step>\n                        </Steps>\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · interactive checkout\">\n                <div className=\"flex max-w-lg flex-col gap-4\">\n                    <Steps>\n                        {CHECKOUT.map((label, i) => (\n                            <Step\n                                key={label}\n                                color={i <= current ? \"primary\" : undefined}\n                                data-content={i < current ? \"✓\" : undefined}\n                            >\n                                {label}\n                            </Step>\n                        ))}\n                    </Steps>\n                    <Row>\n                        <Button\n                            variant=\"outline\"\n                            color=\"neutral\"\n                            disabled={current === 0}\n                            onClick={() => setCurrent((c) => Math.max(0, c - 1))}\n                        >\n                            Back\n                        </Button>\n                        <Button\n                            color=\"primary\"\n                            disabled={current === CHECKOUT.length - 1}\n                            onClick={() =>\n                                setCurrent((c) => Math.min(CHECKOUT.length - 1, c + 1))\n                            }\n                        >\n                            {current === CHECKOUT.length - 2 ? \"Place order\" : \"Next\"}\n                        </Button>\n                    </Row>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Tabs",
@@ -5478,7 +5478,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Tabs,\n    TabsList,\n    TabsTab,\n    TabsPanel,\n    Input,\n    Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function TabsDemo() {\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Row>\n                    {COLORS.slice(0, 6).map((color) => (\n                        <Tabs key={color} color={color} defaultValue=\"a\" className=\"w-40\">\n                            <TabsList>\n                                <TabsTab value=\"a\">One</TabsTab>\n                                <TabsTab value=\"b\">Two</TabsTab>\n                            </TabsList>\n                        </Tabs>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Variants\">\n                {([\"underline\", \"boxed\", \"pills\"] as const).map((variant) => (\n                    <Tabs key={variant} variant={variant} color=\"primary\" defaultValue=\"a\">\n                        <TabsList>\n                            <TabsTab value=\"a\">Account</TabsTab>\n                            <TabsTab value=\"b\">Password</TabsTab>\n                            <TabsTab value=\"c\">Team</TabsTab>\n                        </TabsList>\n                    </Tabs>\n                ))}\n            </Section>\n\n            <Section title=\"Real use · settings panels\">\n                <Tabs variant=\"boxed\" color=\"primary\" defaultValue=\"account\" className=\"max-w-md\">\n                    <TabsList>\n                        <TabsTab value=\"account\">Account</TabsTab>\n                        <TabsTab value=\"password\">Password</TabsTab>\n                        <TabsTab value=\"team\">Team</TabsTab>\n                    </TabsList>\n                    <TabsPanel value=\"account\">\n                        <div className=\"flex flex-col gap-3 pt-4\">\n                            <Input placeholder=\"Full name\" defaultValue=\"Ada Lovelace\" />\n                            <Input placeholder=\"Email\" defaultValue=\"ada@silica.dev\" />\n                            <Button color=\"primary\" className=\"w-fit\">\n                                Save\n                            </Button>\n                        </div>\n                    </TabsPanel>\n                    <TabsPanel value=\"password\">\n                        <div className=\"flex flex-col gap-3 pt-4\">\n                            <Input placeholder=\"Current password\" type=\"password\" />\n                            <Input placeholder=\"New password\" type=\"password\" />\n                            <Button color=\"primary\" className=\"w-fit\">\n                                Update password\n                            </Button>\n                        </div>\n                    </TabsPanel>\n                    <TabsPanel value=\"team\">\n                        <p className=\"pt-4 opacity-70\">4 members — 1 seat available.</p>\n                    </TabsPanel>\n                </Tabs>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Alert",
@@ -5548,7 +5548,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport {\n    Alert,\n    AlertContent,\n    AlertTitle,\n    AlertDescription,\n    AlertActions,\n    Collapsible,\n    CollapsibleTrigger,\n    CollapsiblePanel,\n    Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\nimport { InfoIcon, CheckIcon, WarnIcon, XIcon } from \"../lib/icons\";\nimport { SIZES } from \"../lib/data\";\n\nexport function AlertDemo() {\n    const [dismissed, setDismissed] = useState(false);\n\n    return (\n        <>\n            <Section title=\"dismissible · animates away, then unmounts\">\n                <Stack>\n                    {!dismissed && (\n                        <Alert color=\"info\" dismissible onDismiss={() => setDismissed(true)}>\n                            <InfoIcon />A new software update is available.\n                        </Alert>\n                    )}\n                    {dismissed && (\n                        <Button size=\"sm\" variant=\"outline\" onClick={() => setDismissed(false)}>\n                            Reset\n                        </Button>\n                    )}\n                </Stack>\n            </Section>\n\n            <Section title=\"banner · full-bleed, edge to edge (no rounding)\">\n                <Alert color=\"warning\" banner dismissible variant=\"soft\">\n                    <WarnIcon />\n                    Scheduled maintenance tonight at 10pm PT — expect brief downtime.\n                </Alert>\n            </Section>\n\n            <Section title=\"collapsible detail · nests the existing Collapsible, not a bespoke prop\">\n                <Alert color=\"error\" variant=\"soft\">\n                    <XIcon />\n                    {/* `className=\"contents\"` (a utility, so it wins over the component's\n                        own flex-column) keeps AlertContent + AlertActions as direct row\n                        children of Alert — the Collapsible only supplies shared open-state\n                        context here, not a layout box. That's what lets the icon trigger\n                        sit top-right while the label trigger stays under the title, both\n                        toggling the one panel. */}\n                    <Collapsible className=\"contents\">\n                        <AlertContent>\n                            <AlertTitle>3 files failed to upload</AlertTitle>\n                            <CollapsibleTrigger chevron={false}>Show details</CollapsibleTrigger>\n                            <CollapsiblePanel>\n                                <ul className=\"list-disc pl-4 text-xs\">\n                                    <li>report-q3.pdf — exceeds 5 MB limit</li>\n                                    <li>archive.zip — unsupported type</li>\n                                    <li>notes.docx — network error</li>\n                                </ul>\n                            </CollapsiblePanel>\n                        </AlertContent>\n                        <AlertActions>\n                            <CollapsibleTrigger variant=\"icon\" aria-label=\"Toggle details\" />\n                        </AlertActions>\n                    </Collapsible>\n                </Alert>\n            </Section>\n\n            <Section title=\"Colors & structure\">\n                <Stack>\n                    {/* One-liner: leading icon + message */}\n                    <Alert color=\"info\">\n                        <InfoIcon />A new software update is available.\n                    </Alert>\n                    <Alert color=\"success\" variant=\"soft\">\n                        <CheckIcon />\n                        Your changes have been saved.\n                    </Alert>\n                    {/* Structured: title + description */}\n                    <Alert color=\"warning\" variant=\"soft\">\n                        <WarnIcon />\n                        <AlertContent>\n                            <AlertTitle>Storage almost full</AlertTitle>\n                            <AlertDescription>\n                                You've used 92% of your quota. Consider upgrading.\n                            </AlertDescription>\n                        </AlertContent>\n                    </Alert>\n                    {/* Structured + trailing actions (far right, centered) */}\n                    <Alert color=\"error\">\n                        <XIcon />\n                        <AlertContent>\n                            <AlertTitle>Upload failed</AlertTitle>\n                            <AlertDescription>\n                                The file exceeds the 5 MB limit.\n                            </AlertDescription>\n                        </AlertContent>\n                        <AlertActions>\n                            <Button size=\"sm\" color=\"error\" variant=\"soft\">\n                                Retry\n                            </Button>\n                        </AlertActions>\n                    </Alert>\n                    <Alert color=\"brand\" variant=\"outline\">\n                        <InfoIcon />\n                        The <code>brand</code> color flows through Alerts too.\n                    </Alert>\n                    <Alert>\n                        <InfoIcon />\n                        Neutral alert — no color prop, just the base surface.\n                    </Alert>\n                </Stack>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Stack className=\"gap-2\">\n                    {SIZES.slice(0, 4).map((size) => (\n                        <Alert key={size} color=\"info\" size={size}>\n                            <InfoIcon />\n                            {size}\n                        </Alert>\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Glass · notice floating over a colored background\">\n                <div\n                    className=\"rounded-box p-8\"\n                    style={{\n                        backgroundImage:\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\n                    }}\n                >\n                    <Stack className=\"gap-3\">\n                        <Alert className=\"glass\">\n                            <InfoIcon />A new software update is available.\n                        </Alert>\n                        <Alert color=\"success\" className=\"glass\">\n                            <CheckIcon />\n                            Your changes have been saved.\n                        </Alert>\n                        <Alert color=\"error\" className=\"glass\">\n                            <XIcon />\n                            <AlertContent>\n                                <AlertTitle>Upload failed</AlertTitle>\n                                <AlertDescription>\n                                    The file exceeds the 5 MB limit — glass still reads clearly\n                                    at error severity.\n                                </AlertDescription>\n                            </AlertContent>\n                            <AlertActions>\n                                <Button size=\"sm\" color=\"error\" variant=\"soft\">\n                                    Retry\n                                </Button>\n                            </AlertActions>\n                        </Alert>\n                    </Stack>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "AlertDialog",
@@ -5585,7 +5585,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    AlertDialog,\n    AlertDialogTrigger,\n    AlertDialogContent,\n    AlertDialogTitle,\n    AlertDialogDescription,\n    AlertDialogHeader,\n    AlertDialogFooter,\n    AlertDialogCancel,\n    AlertDialogAction,\n    Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function AlertDialogDemo() {\n    return (\n        <Section title=\"Real use · Cancel/Action, header + footer\">\n            <Row>\n                <AlertDialog>\n                    <AlertDialogTrigger>\n                        <Button color=\"error\" variant=\"outline\">\n                            Delete account…\n                        </Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent>\n                        <AlertDialogTitle>Delete account?</AlertDialogTitle>\n                        <AlertDialogDescription>\n                            This permanently removes your data. This can't be undone.\n                        </AlertDialogDescription>\n                        <div className=\"mt-4 flex justify-end gap-2\">\n                            <AlertDialogCancel>\n                                <Button variant=\"ghost\" color=\"neutral\">\n                                    Cancel\n                                </Button>\n                            </AlertDialogCancel>\n                            <AlertDialogAction\n                                color=\"error\"\n                                onClick={() => console.log(\"account deleted\")}\n                            >\n                                Delete\n                            </AlertDialogAction>\n                        </div>\n                    </AlertDialogContent>\n                </AlertDialog>\n\n                <AlertDialog>\n                    <AlertDialogTrigger>\n                        <Button variant=\"outline\">Header/Footer variant</Button>\n                    </AlertDialogTrigger>\n                    <AlertDialogContent>\n                        <AlertDialogHeader>\n                            <AlertDialogTitle>Discard changes?</AlertDialogTitle>\n                        </AlertDialogHeader>\n                        <AlertDialogDescription>\n                            You have unsaved changes that will be lost.\n                        </AlertDialogDescription>\n                        <AlertDialogFooter>\n                            <AlertDialogCancel>\n                                <Button variant=\"ghost\" color=\"neutral\">\n                                    Keep editing\n                                </Button>\n                            </AlertDialogCancel>\n                            <AlertDialogAction color=\"error\">Discard</AlertDialogAction>\n                        </AlertDialogFooter>\n                    </AlertDialogContent>\n                </AlertDialog>\n            </Row>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ContextMenu",
@@ -5671,7 +5671,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Dialog,\n    DialogTrigger,\n    DialogClose,\n    DialogContent,\n    DialogTitle,\n    DialogDescription,\n    DialogHeader,\n    DialogFooter,\n    Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function DialogDemo() {\n    return (\n        <>\n            <Section title=\"Real use · destructive-action confirmation\">\n                <Dialog>\n                    <DialogTrigger>\n                        <Button color=\"error\" variant=\"outline\">\n                            Delete project…\n                        </Button>\n                    </DialogTrigger>\n                    <DialogContent>\n                        <DialogTitle>Delete project?</DialogTitle>\n                        <DialogDescription>\n                            This will permanently delete the project and all its data. This\n                            can't be undone.\n                        </DialogDescription>\n                        <div className=\"mt-4 flex justify-end gap-2\">\n                            <DialogClose>\n                                <Button variant=\"ghost\" color=\"neutral\">\n                                    Cancel\n                                </Button>\n                            </DialogClose>\n                            <DialogClose>\n                                <Button color=\"error\">Delete</Button>\n                            </DialogClose>\n                        </div>\n                    </DialogContent>\n                </Dialog>\n            </Section>\n\n            <Section title=\"Header + Footer · placeable docking bars, sticky footer\">\n                <Row>\n                    <Dialog>\n                        <DialogTrigger>\n                            <Button variant=\"outline\">Header/Footer</Button>\n                        </DialogTrigger>\n                        <DialogContent>\n                            <DialogHeader>\n                                <DialogTitle>Invite teammates</DialogTitle>\n                                <DialogClose>\n                                    <Button variant=\"ghost\" shape=\"circle\" size=\"sm\">\n                                        ✕\n                                    </Button>\n                                </DialogClose>\n                            </DialogHeader>\n                            <DialogDescription>\n                                Send an invite by email — they'll get access once they accept.\n                            </DialogDescription>\n                            <DialogFooter>\n                                <DialogClose>\n                                    <Button variant=\"ghost\" color=\"neutral\">\n                                        Cancel\n                                    </Button>\n                                </DialogClose>\n                                <DialogClose>\n                                    <Button>Send invite</Button>\n                                </DialogClose>\n                            </DialogFooter>\n                        </DialogContent>\n                    </Dialog>\n\n                    <Dialog>\n                        <DialogTrigger>\n                            <Button variant=\"outline\">Sticky footer (scrolling content)</Button>\n                        </DialogTrigger>\n                        <DialogContent className=\"max-h-[70dvh]\">\n                            <DialogHeader sticky>\n                                <DialogTitle>Terms of service</DialogTitle>\n                            </DialogHeader>\n                            <DialogDescription>\n                                {Array.from({ length: 12 }, (_, i) => (\n                                    <p key={i} className=\"mb-3\">\n                                        Section {i + 1} — placeholder legal text to force this\n                                        dialog to scroll so the sticky footer below stays pinned.\n                                    </p>\n                                ))}\n                            </DialogDescription>\n                            <DialogFooter sticky>\n                                <DialogClose>\n                                    <Button variant=\"ghost\" color=\"neutral\">\n                                        Decline\n                                    </Button>\n                                </DialogClose>\n                                <DialogClose>\n                                    <Button>Accept</Button>\n                                </DialogClose>\n                            </DialogFooter>\n                        </DialogContent>\n                    </Dialog>\n                </Row>\n            </Section>\n\n            <Section title=\"Glass · frosted popup over the dimmed backdrop\">\n                <Dialog>\n                    <DialogTrigger>\n                        <Button variant=\"outline\">Glass dialog</Button>\n                    </DialogTrigger>\n                    <DialogContent className=\"glass\">\n                        <DialogTitle>Restart required</DialogTitle>\n                        <DialogDescription>\n                            <code>DialogContent className=&quot;glass&quot;</code> frosts the\n                            popup over the existing dimmed backdrop — same class, no new prop.\n                        </DialogDescription>\n                        <div className=\"mt-4 flex justify-end gap-2\">\n                            <DialogClose>\n                                <Button variant=\"ghost\" color=\"neutral\">\n                                    Later\n                                </Button>\n                            </DialogClose>\n                            <DialogClose>\n                                <Button>Restart now</Button>\n                            </DialogClose>\n                        </div>\n                    </DialogContent>\n                </Dialog>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Drawer",
@@ -5733,7 +5733,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Drawer,\n    DrawerTrigger,\n    DrawerClose,\n    DrawerContent,\n    DrawerTitle,\n    DrawerDescription,\n    DrawerHeader,\n    DrawerFooter,\n    Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function DrawerDemo() {\n    return (\n        <>\n            <Section title=\"Real use · navigation drawer\">\n                <Row>\n                    {([\"left\", \"right\", \"top\", \"bottom\"] as const).map((side) => (\n                        <Drawer key={side}>\n                            <DrawerTrigger>\n                                <Button variant=\"outline\" color=\"neutral\">\n                                    {side}\n                                </Button>\n                            </DrawerTrigger>\n                            <DrawerContent side={side}>\n                                <DrawerTitle>Navigation</DrawerTitle>\n                                <DrawerDescription>\n                                    Slides in from the {side} edge.\n                                </DrawerDescription>\n                                <nav className=\"flex flex-col gap-2 py-4 text-sm\">\n                                    <a href=\"#\">Dashboard</a>\n                                    <a href=\"#\">Projects</a>\n                                    <a href=\"#\">Settings</a>\n                                </nav>\n                                <DrawerClose>\n                                    <Button variant=\"ghost\" color=\"neutral\">\n                                        Close\n                                    </Button>\n                                </DrawerClose>\n                            </DrawerContent>\n                        </Drawer>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Header + Footer · sticky, scrolling content\">\n                <Drawer>\n                    <DrawerTrigger>\n                        <Button variant=\"outline\">Filters (sticky header/footer)</Button>\n                    </DrawerTrigger>\n                    <DrawerContent side=\"right\">\n                        <DrawerHeader sticky>\n                            <DrawerTitle>Filters</DrawerTitle>\n                            <DrawerClose>\n                                <Button variant=\"ghost\" shape=\"circle\" size=\"sm\">\n                                    ✕\n                                </Button>\n                            </DrawerClose>\n                        </DrawerHeader>\n                        <div className=\"flex flex-col gap-3 text-sm\">\n                            {Array.from({ length: 14 }, (_, i) => (\n                                <label key={i} className=\"flex items-center gap-2\">\n                                    <input type=\"checkbox\" /> Filter option {i + 1}\n                                </label>\n                            ))}\n                        </div>\n                        <DrawerFooter sticky>\n                            <DrawerClose>\n                                <Button variant=\"ghost\" color=\"neutral\">\n                                    Reset\n                                </Button>\n                            </DrawerClose>\n                            <DrawerClose>\n                                <Button>Apply</Button>\n                            </DrawerClose>\n                        </DrawerFooter>\n                    </DrawerContent>\n                </Drawer>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ImperativeAlertDialogProvider",
@@ -5781,7 +5781,7 @@
         ]
       }
     ],
-    "usageExample": "import { Indicator, IndicatorItem, Badge, Button, Status } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function IndicatorDemo() {\n    return (\n        <>\n            <Section title=\"Placements\">\n                <Row>\n                    {([\"top-end\", \"top-start\", \"bottom-end\", \"bottom-start\"] as const).map(\n                        (placement) => (\n                            <Indicator key={placement}>\n                                <IndicatorItem placement={placement}>\n                                    <Badge color=\"error\" size=\"xs\">\n                                        3\n                                    </Badge>\n                                </IndicatorItem>\n                                <Button variant=\"outline\" color=\"neutral\">\n                                    {placement}\n                                </Button>\n                            </Indicator>\n                        ),\n                    )}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · notification badge + presence dot\">\n                <Row>\n                    <Indicator>\n                        <IndicatorItem>\n                            <Badge color=\"error\" size=\"xs\">\n                                5\n                            </Badge>\n                        </IndicatorItem>\n                        <Button variant=\"outline\" color=\"neutral\">\n                            Inbox\n                        </Button>\n                    </Indicator>\n                    <Indicator>\n                        <IndicatorItem>\n                            <Status color=\"success\" ping />\n                        </IndicatorItem>\n                        <Button variant=\"outline\" color=\"neutral\">\n                            Ada Lovelace\n                        </Button>\n                    </Indicator>\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Lightbox",
@@ -5832,7 +5832,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Lightbox, type LightboxItem } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\n// Stand-in \"photos\" (data URIs, always load offline): a gradient tile with a\n// number, so the viewer/nav path is demonstrated without a network request.\nfunction placeholder(n: number, from: string, to: string): string {\n    return `data:image/svg+xml,${encodeURIComponent(\n        `<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'>` +\n            `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +\n            `<stop offset='0' stop-color='${from}'/><stop offset='1' stop-color='${to}'/>` +\n            `</linearGradient></defs>` +\n            `<rect width='800' height='600' fill='url(#g)'/>` +\n            `<text x='400' y='330' font-size='180' font-family='sans-serif' font-weight='700' fill='rgba(255,255,255,.85)' text-anchor='middle'>${n}</text>` +\n            `</svg>`,\n    )}`;\n}\n\nconst PHOTOS: LightboxItem[] = [\n    { src: placeholder(1, \"#6366f1\", \"#ec4899\"), caption: \"Photo 1\" },\n    { src: placeholder(2, \"#f97316\", \"#eab308\"), caption: \"Photo 2\" },\n    { src: placeholder(3, \"#10b981\", \"#06b6d4\"), caption: \"Photo 3\" },\n    { src: placeholder(4, \"#8b5cf6\", \"#ec4899\"), caption: \"Photo 4\" },\n];\n\nexport function LightboxDemo() {\n    const [index, setIndex] = useState<number | null>(null);\n\n    return (\n        <Section title=\"Real use · thumbnail grid opens a full-viewport viewer\">\n            <div className=\"grid grid-cols-4 gap-2\">\n                {PHOTOS.map((p, i) => (\n                    <button\n                        key={p.src}\n                        type=\"button\"\n                        className=\"overflow-hidden rounded-field\"\n                        onClick={() => setIndex(i)}\n                    >\n                        <img src={p.src} alt=\"\" className=\"block h-24 w-full object-cover\" />\n                    </button>\n                ))}\n            </div>\n            <Lightbox items={PHOTOS} index={index} onIndexChange={setIndex} />\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Loading",
@@ -5860,7 +5860,7 @@
         ]
       }
     ],
-    "usageExample": "import { Loading, Button } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { SIZES } from \"../lib/data\";\n\nexport function LoadingDemo() {\n    return (\n        <>\n            <Section title=\"Sizes\">\n                <Row>\n                    {SIZES.map((size) => (\n                        <Loading key={size} size={size} />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · inline with text, and colored\">\n                <div className=\"flex flex-col gap-2 text-sm\">\n                    <span className=\"flex items-center gap-2\">\n                        <Loading size=\"sm\" />\n                        Loading your dashboard…\n                    </span>\n                    <span className=\"flex items-center gap-2 text-primary\">\n                        <Loading size=\"sm\" />\n                        Syncing changes…\n                    </span>\n                </div>\n            </Section>\n\n            <Section title=\"Button's built-in spinner (for comparison)\">\n                <Row>\n                    <Button color=\"primary\" loading>\n                        Saving…\n                    </Button>\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Overlay",
@@ -5900,7 +5900,7 @@
         ]
       }
     ],
-    "usageExample": "import { Overlay, Badge, Button } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nfunction placeholder(label: string, from: string, to: string): string {\n    return `data:image/svg+xml,${encodeURIComponent(\n        `<svg xmlns='http://www.w3.org/2000/svg' width='400' height='260'>` +\n            `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +\n            `<stop offset='0' stop-color='${from}'/><stop offset='1' stop-color='${to}'/>` +\n            `</linearGradient></defs>` +\n            `<rect width='400' height='260' fill='url(#g)'/>` +\n            `</svg>`,\n    )}`;\n}\n\nexport function OverlayDemo() {\n    return (\n        <>\n            <Section title=\"Real use · caption scrim, always visible\">\n                <div className=\"max-w-sm\">\n                    <Overlay\n                        className=\"rounded-box\"\n                        overlay={\n                            <div>\n                                <h3 className=\"text-base font-semibold\">Mountain sunrise</h3>\n                                <p className=\"text-sm opacity-80\">Banff National Park</p>\n                            </div>\n                        }\n                    >\n                        <img src={placeholder(\"1\", \"#0ea5e9\", \"#1e3a8a\")} alt=\"\" />\n                    </Overlay>\n                </div>\n            </Section>\n\n            <Section title=\"Placement · top / bottom / full\">\n                <Row>\n                    {([\"top\", \"bottom\", \"full\"] as const).map((placement) => (\n                        <div key={placement} className=\"w-48\">\n                            <Overlay\n                                className=\"rounded-box\"\n                                placement={placement}\n                                overlay={<Badge color=\"primary\">{placement}</Badge>}\n                            >\n                                <img src={placeholder(placement, \"#f97316\", \"#7c2d12\")} alt=\"\" />\n                            </Overlay>\n                        </div>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"reveal=&quot;hover&quot; · gallery grid, scrim fades in on hover/focus\">\n                <div className=\"grid max-w-md grid-cols-3 gap-2\">\n                    {[\"10b981-06b6d4\", \"8b5cf6-ec4899\", \"f59e0b-ef4444\"].map((pair, i) => {\n                        const [from, to] = pair.split(\"-\").map((c) => `#${c}`);\n                        return (\n                            <Overlay\n                                key={pair}\n                                className=\"rounded-field\"\n                                reveal=\"hover\"\n                                placement=\"full\"\n                                overlay={\n                                    <Button size=\"sm\" color=\"primary\">\n                                        View\n                                    </Button>\n                                }\n                            >\n                                <img src={placeholder(`g${i}`, from!, to!)} alt=\"\" />\n                            </Overlay>\n                        );\n                    })}\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Popover",
@@ -5950,7 +5950,7 @@
         ]
       }
     ],
-    "usageExample": "import {\n    Popover,\n    PopoverTrigger,\n    PopoverContent,\n    PopoverTitle,\n    PopoverDescription,\n    Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function PopoverDemo() {\n    return (\n        <>\n            <Section title=\"Real use · click-triggered info panel\">\n                <Popover>\n                    <PopoverTrigger>\n                        <Button variant=\"outline\" color=\"neutral\">\n                            Storage details\n                        </Button>\n                    </PopoverTrigger>\n                    <PopoverContent arrow>\n                        <PopoverTitle>Storage</PopoverTitle>\n                        <PopoverDescription>\n                            92% of your 100 GB quota is used. Upgrade your plan for more\n                            space.\n                        </PopoverDescription>\n                    </PopoverContent>\n                </Popover>\n            </Section>\n\n            <Section title=\"Glass · frosted panel\">\n                <div\n                    className=\"flex justify-center rounded-box p-16\"\n                    style={{\n                        backgroundImage:\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\n                    }}\n                >\n                    <Popover>\n                        <PopoverTrigger>\n                            <Button variant=\"outline\" color=\"neutral\">\n                                Storage details\n                            </Button>\n                        </PopoverTrigger>\n                        <PopoverContent className=\"glass\" arrow>\n                            <PopoverTitle>Storage</PopoverTitle>\n                            <PopoverDescription>\n                                <code>PopoverContent className=&quot;glass&quot;</code> — the\n                                gradient behind it shows through the blur.\n                            </PopoverDescription>\n                        </PopoverContent>\n                    </Popover>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Progress",
@@ -6008,7 +6008,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState, useEffect } from \"react\";\nimport { Progress, Button } from \"@wizeworks/silicaui-react\";\nimport { Section, Row, LabeledRow } from \"../lib/Section\";\nimport { COLORS, SIZES } from \"../lib/data\";\n\nexport function ProgressDemo() {\n    const [pct, setPct] = useState(40);\n    const [upload, setUpload] = useState(0);\n\n    useEffect(() => {\n        const id = setInterval(\n            () => setUpload((p) => (p >= 100 ? 0 : p + 4)),\n            180,\n        );\n        return () => clearInterval(id);\n    }, []);\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <div className=\"grid max-w-md gap-4\">\n                    {COLORS.map((color) => (\n                        <LabeledRow key={color} label={color}>\n                            <Progress color={color} value={65} />\n                        </LabeledRow>\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <div className=\"flex max-w-md flex-col gap-2\">\n                    {SIZES.map((size) => (\n                        <Progress key={size} color=\"primary\" size={size} value={60} />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"showValue · built-in label row (replaces hand-rolled LabeledRow)\">\n                <div className=\"grid max-w-md gap-4\">\n                    <Progress color=\"brand\" value={upload} showValue label=\"Uploading photo.png\" />\n                    <Progress color=\"success\" value={3} max={4} showValue formatValue={(v, max) => `${v} of ${max} steps`} label=\"Onboarding\" />\n                    <Progress color=\"warning\" value={pct} showValue />\n                </div>\n            </Section>\n\n            <Section title=\"Real use · task + upload progress\">\n                <div className=\"grid max-w-md gap-4\">\n                    <LabeledRow label=\"Onboarding · 3 of 4 steps\">\n                        <Progress color=\"success\" value={3} max={4} />\n                    </LabeledRow>\n                    <LabeledRow label={`Uploading photo.png · ${upload}%`}>\n                        <Progress color=\"brand\" value={upload} />\n                    </LabeledRow>\n                    <LabeledRow label=\"Indeterminate (duration unknown)\">\n                        <Progress color=\"primary\" />\n                    </LabeledRow>\n                    <LabeledRow label={`Interactive · ${pct}%`}>\n                        <Progress color=\"warning\" value={pct} />\n                    </LabeledRow>\n                    <Row>\n                        <Button\n                            size=\"sm\"\n                            variant=\"outline\"\n                            color=\"neutral\"\n                            onClick={() => setPct((p) => Math.max(0, p - 10))}\n                        >\n                            −10\n                        </Button>\n                        <Button\n                            size=\"sm\"\n                            variant=\"outline\"\n                            color=\"neutral\"\n                            onClick={() => setPct((p) => Math.min(100, p + 10))}\n                        >\n                            +10\n                        </Button>\n                    </Row>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "RadialProgress",
@@ -6048,7 +6048,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState, useEffect } from \"react\";\nimport { RadialProgress } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function RadialProgressDemo() {\n    const [pct, setPct] = useState(0);\n\n    useEffect(() => {\n        const id = setInterval(() => setPct((p) => (p >= 100 ? 0 : p + 5)), 200);\n        return () => clearInterval(id);\n    }, []);\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Row>\n                    {COLORS.slice(0, 6).map((color) => (\n                        <RadialProgress key={color} value={70} color={color} />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    <RadialProgress value={60} color=\"primary\" size=\"3rem\" thickness=\"0.35rem\" />\n                    <RadialProgress value={60} color=\"primary\" size=\"5rem\" thickness=\"0.5rem\" />\n                    <RadialProgress value={60} color=\"primary\" size=\"8rem\" thickness=\"0.75rem\" />\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · animated upload progress\">\n                <RadialProgress value={pct} color=\"brand\" size=\"6rem\" />\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Skeleton",
@@ -6070,7 +6070,7 @@
         ]
       }
     ],
-    "usageExample": "import { Skeleton } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function SkeletonDemo() {\n    return (\n        <>\n            <Section title=\"Shapes\">\n                <Row>\n                    <Skeleton className=\"h-6 w-32\" />\n                    <Skeleton shape=\"circle\" className=\"h-12 w-12\" />\n                    <Skeleton shape=\"text\" className=\"w-40\" />\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · loading card\">\n                <div className=\"flex max-w-sm flex-col gap-3 rounded-box border border-base-300 p-4\">\n                    <div className=\"flex items-center gap-3\">\n                        <Skeleton shape=\"circle\" className=\"h-10 w-10\" />\n                        <div className=\"flex flex-1 flex-col gap-2\">\n                            <Skeleton shape=\"text\" className=\"w-32\" />\n                            <Skeleton shape=\"text\" className=\"w-20\" />\n                        </div>\n                    </div>\n                    <Skeleton className=\"h-32 w-full\" />\n                    <Skeleton shape=\"text\" className=\"w-full\" />\n                    <Skeleton shape=\"text\" className=\"w-2/3\" />\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Status",
@@ -6110,7 +6110,7 @@
         ]
       }
     ],
-    "usageExample": "import { Status } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS, SIZES } from \"../lib/data\";\n\nexport function StatusDemo() {\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Row>\n                    {COLORS.map((color) => (\n                        <span key={color} className=\"flex items-center gap-1.5 text-sm\">\n                            <Status color={color} label={color} />\n                            {color}\n                        </span>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    {SIZES.map((size) => (\n                        <span key={size} className=\"flex items-center gap-1.5 text-sm\">\n                            <Status color=\"primary\" size={size} />\n                            {size}\n                        </span>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · team presence\">\n                <div className=\"flex flex-col gap-2 text-sm\">\n                    <span className=\"flex items-center gap-1.5\">\n                        <Status color=\"success\" ping label=\"Online\" />\n                        Ada Lovelace — active now\n                    </span>\n                    <span className=\"flex items-center gap-1.5\">\n                        <Status color=\"warning\" label=\"Away\" />\n                        Grace Hopper — away\n                    </span>\n                    <span className=\"flex items-center gap-1.5\">\n                        <Status color=\"neutral\" label=\"Offline\" />\n                        Alan Turing — offline\n                    </span>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ToastProvider",
@@ -6221,7 +6221,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Tooltip, TooltipProvider, Button } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function TooltipDemo() {\n    return (\n        <TooltipProvider>\n            <Section title=\"Real use · sides (hover or focus a trigger)\">\n                <Row>\n                    {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n                        <Tooltip key={side} content={`On the ${side}`} side={side}>\n                            <Button variant=\"outline\" color=\"neutral\">\n                                {side}\n                            </Button>\n                        </Tooltip>\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Grouped delay (adjacent tooltips open instantly)\">\n                <Row>\n                    <Tooltip content=\"Copy link\">\n                        <Button variant=\"ghost\" color=\"neutral\">\n                            Copy\n                        </Button>\n                    </Tooltip>\n                    <Tooltip content=\"Share\">\n                        <Button variant=\"ghost\" color=\"neutral\">\n                            Share\n                        </Button>\n                    </Tooltip>\n                    <Tooltip content=\"Delete\">\n                        <Button variant=\"ghost\" color=\"error\">\n                            Delete\n                        </Button>\n                    </Tooltip>\n                </Row>\n            </Section>\n        </TooltipProvider>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "AppShell",
@@ -6251,7 +6251,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport {\n    AppShell,\n    AppShellSidebar,\n    AppShellHeader,\n    AppShellMain,\n    AppShellFooter,\n    SidebarProvider,\n    Sidebar,\n    SidebarHeader,\n    SidebarHeaderBrand,\n    SidebarContent,\n    SidebarGroup,\n    SidebarGroupLabel,\n    SidebarItem,\n    SidebarTrigger,\n    Navbar,\n    NavbarStart,\n    NavbarEnd,\n    Footer,\n    Wordmark,\n    Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst HomeIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M3 12 12 3l9 9\" /> <path d=\"M5 10v10h14V10\" />\n    </svg>\n);\nconst SettingsIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M14 17H5\" /> <path d=\"M19 7h-9\" /> <circle cx=\"17\" cy=\"17\" r=\"3\" /> <circle cx=\"7\" cy=\"7\" r=\"3\" />\n    </svg>\n);\n\nexport function AppShellDemo() {\n    const [active, setActive] = useState(\"dashboard\");\n\n    return (\n        <>\n            <Section title=\"Real use · sidebar + header + footer (same AppShell as below, different slots)\">\n                <div className=\"h-[26rem] w-full max-w-2xl overflow-hidden rounded-box border border-base-300\">\n                    <SidebarProvider>\n                        <AppShell>\n                            <AppShellSidebar>\n                                <Sidebar>\n                                    <SidebarHeader>\n                                        <SidebarHeaderBrand>\n                                            <Wordmark size=\"sm\" color=\"primary\">Acme</Wordmark>\n                                        </SidebarHeaderBrand>\n                                        <SidebarTrigger />\n                                    </SidebarHeader>\n                                    <SidebarContent>\n                                        <SidebarGroup>\n                                            <SidebarGroupLabel>Workspace</SidebarGroupLabel>\n                                            <SidebarItem\n                                                icon={HomeIcon}\n                                                active={active === \"dashboard\"}\n                                                onClick={() => setActive(\"dashboard\")}\n                                            >\n                                                Dashboard\n                                            </SidebarItem>\n                                            <SidebarItem\n                                                icon={SettingsIcon}\n                                                active={active === \"settings\"}\n                                                onClick={() => setActive(\"settings\")}\n                                            >\n                                                Settings\n                                            </SidebarItem>\n                                        </SidebarGroup>\n                                    </SidebarContent>\n                                </Sidebar>\n                            </AppShellSidebar>\n\n                            <AppShellHeader>\n                                <Navbar className=\"border-b border-base-300\">\n                                    <NavbarStart>\n                                        <span className=\"text-sm font-semibold capitalize\">{active}</span>\n                                    </NavbarStart>\n                                    <NavbarEnd>\n                                        <Button size=\"sm\" color=\"primary\">\n                                            New\n                                        </Button>\n                                    </NavbarEnd>\n                                </Navbar>\n                            </AppShellHeader>\n\n                            <AppShellMain className=\"p-6\">\n                                <p className=\"text-sm opacity-70\">\n                                    Content for “{active}” — this pane scrolls independently; try\n                                    collapsing the sidebar.\n                                </p>\n                                {Array.from({ length: 12 }, (_, i) => (\n                                    <p key={i} className=\"mt-3 text-sm opacity-60\">\n                                        Filler paragraph {i + 1} to make the main area scroll.\n                                    </p>\n                                ))}\n                            </AppShellMain>\n\n                            <AppShellFooter>\n                                <Footer center className=\"border-t border-base-300 py-3 text-xs\">\n                                    © 2026 Acme, Inc.\n                                </Footer>\n                            </AppShellFooter>\n                        </AppShell>\n                    </SidebarProvider>\n                </div>\n            </Section>\n\n            <Section title=\"Same AppShell, no sidebar · header + footer only\">\n                <div className=\"h-64 w-full max-w-2xl overflow-hidden rounded-box border border-base-300\">\n                    <AppShell>\n                        <AppShellHeader>\n                            <Navbar className=\"border-b border-base-300\">\n                                <NavbarStart>\n                                    <span className=\"text-sm font-semibold\">Acme</span>\n                                </NavbarStart>\n                            </Navbar>\n                        </AppShellHeader>\n                        <AppShellMain className=\"p-6\">\n                            <p className=\"text-sm opacity-70\">\n                                No sidebar slot rendered — its grid column collapses to zero\n                                automatically.\n                            </p>\n                        </AppShellMain>\n                        <AppShellFooter>\n                            <Footer center className=\"border-t border-base-300 py-3 text-xs\">\n                                © 2026 Acme, Inc.\n                            </Footer>\n                        </AppShellFooter>\n                    </AppShell>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Divider",
@@ -6273,7 +6273,7 @@
         ]
       }
     ],
-    "usageExample": "import { Divider, Button } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function DividerDemo() {\n    return (\n        <>\n            <Section title=\"Plain & labeled\">\n                <div className=\"flex max-w-sm flex-col\">\n                    <p className=\"text-sm opacity-70\">Continue with your account</p>\n                    <Divider />\n                    <p className=\"text-sm opacity-70\">Or use a different method</p>\n                </div>\n            </Section>\n\n            <Section title=\"Real use · sign-in split\">\n                <div className=\"flex max-w-sm flex-col gap-3\">\n                    <Button color=\"neutral\" variant=\"outline\">\n                        Continue with email\n                    </Button>\n                    <Divider>OR</Divider>\n                    <Button color=\"primary\">Continue with Google</Button>\n                </div>\n            </Section>\n\n            <Section title=\"Vertical (in a row)\">\n                <div className=\"flex h-8 items-center text-sm\">\n                    <span>Docs</span>\n                    <Divider orientation=\"vertical\" />\n                    <span>Pricing</span>\n                    <Divider orientation=\"vertical\" />\n                    <span>Blog</span>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Footer",
@@ -6299,7 +6299,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Footer, FooterTitle, Link } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function FooterDemo() {\n    return (\n        <>\n            <Section title=\"Real use · multi-column site footer\">\n                <Footer className=\"rounded-box border border-base-300 p-6\">\n                    <nav>\n                        <FooterTitle>Product</FooterTitle>\n                        <Link href=\"#\">Features</Link>\n                        <Link href=\"#\">Pricing</Link>\n                        <Link href=\"#\">Changelog</Link>\n                    </nav>\n                    <nav>\n                        <FooterTitle>Company</FooterTitle>\n                        <Link href=\"#\">About</Link>\n                        <Link href=\"#\">Careers</Link>\n                        <Link href=\"#\">Contact</Link>\n                    </nav>\n                    <nav>\n                        <FooterTitle>Legal</FooterTitle>\n                        <Link href=\"#\">Terms</Link>\n                        <Link href=\"#\">Privacy</Link>\n                    </nav>\n                </Footer>\n            </Section>\n\n            <Section title=\"Centered\">\n                <Footer center className=\"rounded-box border border-base-300 p-6\">\n                    <div>\n                        <p>© 2026 Silica UI — all rights reserved.</p>\n                    </div>\n                </Footer>\n            </Section>\n\n            <Section title=\"Glass · footer over a colored page background\">\n                <div\n                    className=\"flex flex-col justify-end gap-24 rounded-box p-4\"\n                    style={{\n                        backgroundImage:\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\n                    }}\n                >\n                    <Footer className=\"glass p-6\">\n                        <nav>\n                            <FooterTitle>Product</FooterTitle>\n                            <Link href=\"#\">Features</Link>\n                            <Link href=\"#\">Pricing</Link>\n                            <Link href=\"#\">Changelog</Link>\n                        </nav>\n                        <nav>\n                            <FooterTitle>Company</FooterTitle>\n                            <Link href=\"#\">About</Link>\n                            <Link href=\"#\">Careers</Link>\n                            <Link href=\"#\">Contact</Link>\n                        </nav>\n                        <nav>\n                            <FooterTitle>Legal</FooterTitle>\n                            <Link href=\"#\">Terms</Link>\n                            <Link href=\"#\">Privacy</Link>\n                        </nav>\n                    </Footer>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Hero",
@@ -6313,7 +6313,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Hero, HeroContent, HeroOverlay, Button } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function HeroDemo() {\n    return (\n        <Section title=\"Real use · landing banner\">\n            <Hero\n                className=\"rounded-box\"\n                style={{\n                    backgroundImage:\n                        \"linear-gradient(135deg, #6366f1, #ec4899)\",\n                }}\n            >\n                <HeroOverlay />\n                <HeroContent className=\"text-center text-white\">\n                    <div className=\"max-w-md\">\n                        <h1 className=\"text-4xl font-bold\">Ship faster with Silica</h1>\n                        <p className=\"py-4 opacity-90\">\n                            One token system, every component, zero lock-in.\n                        </p>\n                        <Button color=\"primary\">Get started</Button>\n                    </div>\n                </HeroContent>\n            </Hero>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Mask",
@@ -6335,7 +6335,7 @@
         ]
       }
     ],
-    "usageExample": "import { Mask } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nconst PHOTO = `data:image/svg+xml,${encodeURIComponent(\n    `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>` +\n        `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +\n        `<stop offset='0' stop-color='#6366f1'/><stop offset='1' stop-color='#ec4899'/>` +\n        `</linearGradient></defs>` +\n        `<rect width='100' height='100' fill='url(#g)'/>` +\n        `<circle cx='50' cy='40' r='18' fill='rgba(255,255,255,.92)'/>` +\n        `<rect x='22' y='62' width='56' height='38' rx='19' fill='rgba(255,255,255,.92)'/>` +\n        `</svg>`,\n)}`;\n\nconst SHAPES = [\n    \"squircle\",\n    \"circle\",\n    \"heart\",\n    \"hexagon\",\n    \"hexagon-2\",\n    \"pentagon\",\n    \"diamond\",\n    \"triangle\",\n    \"star\",\n    \"star-2\",\n    \"decagon\",\n    \"parallelogram\",\n] as const;\n\nexport function MaskDemo() {\n    return (\n        <Section title=\"Real use · avatar photo clipped to every shape\">\n            <Row>\n                {SHAPES.map((shape) => (\n                    <Mask key={shape} variant={shape} className=\"h-16 w-16\">\n                        <img src={PHOTO} alt=\"\" className=\"h-full w-full object-cover\" />\n                    </Mask>\n                ))}\n            </Row>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ScrollArea",
@@ -6357,7 +6357,7 @@
         ]
       }
     ],
-    "usageExample": "import { ScrollArea } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nconst ITEMS = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);\n\nexport function ScrollAreaDemo() {\n    return (\n        <>\n            <Section title=\"Real use · scrollable list panel\">\n                <ScrollArea className=\"h-64 w-72 rounded-box border border-base-300\">\n                    <div className=\"flex flex-col gap-1 p-4\">\n                        {ITEMS.map((item) => (\n                            <div key={item} className=\"rounded-field px-2 py-1 text-sm\">\n                                {item}\n                            </div>\n                        ))}\n                    </div>\n                </ScrollArea>\n            </Section>\n\n            <Section title=\"Both axes\">\n                <Row>\n                    <ScrollArea\n                        orientation=\"both\"\n                        className=\"h-48 w-64 rounded-box border border-base-300\"\n                    >\n                        <div style={{ width: \"40rem\", height: \"24rem\" }} className=\"p-4\">\n                            Wide + tall content — scroll both directions.\n                        </div>\n                    </ScrollArea>\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Stack",
@@ -6385,7 +6385,7 @@
         ]
       }
     ],
-    "usageExample": "import { Stack, Card, CardBody } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst CARDS = [\n    { label: \"1\", color: \"primary\" },\n    { label: \"2\", color: \"secondary\" },\n    { label: \"3\", color: \"accent\" },\n];\n\nexport function StackDemo() {\n    return (\n        <>\n            <Section title=\"Real use · interactive peeking deck (click to cycle)\">\n                <Stack interactive className=\"h-32 w-48\">\n                    {CARDS.map((c) => (\n                        <Card\n                            key={c.label}\n                            style={{\n                                backgroundColor: `var(--color-${c.color})`,\n                                color: `var(--color-${c.color}-content, #fff)`,\n                            }}\n                        >\n                            <CardBody className=\"items-center justify-center text-2xl font-bold\">\n                                {c.label}\n                            </CardBody>\n                        </Card>\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Peek direction\">\n                <div className=\"flex gap-8\">\n                    {([\"top\", \"bottom\", \"start\", \"end\"] as const).map((peek) => (\n                        <Stack key={peek} peek={peek} className=\"h-20 w-28\">\n                            {CARDS.map((c) => (\n                                <Card\n                                    key={c.label}\n                                    style={{\n                                        backgroundColor: `var(--color-${c.color})`,\n                                        color: `var(--color-${c.color}-content, #fff)`,\n                                    }}\n                                >\n                                    <CardBody className=\"items-center justify-center text-sm\">\n                                        {peek}\n                                    </CardBody>\n                                </Card>\n                            ))}\n                        </Stack>\n                    ))}\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Collapsible",
@@ -6429,7 +6429,7 @@
         ]
       }
     ],
-    "usageExample": "import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function CollapsibleDemo() {\n    return (\n        <Section title=\"Real use · single show/hide region\">\n            <Collapsible defaultOpen className=\"max-w-md\">\n                <CollapsibleTrigger>Shipping details</CollapsibleTrigger>\n                <CollapsiblePanel>\n                    Ships in 2–3 business days via standard shipping. Express options\n                    are available at checkout.\n                </CollapsiblePanel>\n            </Collapsible>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "CommandPalette",
@@ -6492,7 +6492,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { CommandPalette, Button } from \"@wizeworks/silicaui-react\";\nimport type { CommandItem } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function CommandPaletteDemo() {\n    const [open, setOpen] = useState(false);\n    const [lastCommand, setLastCommand] = useState<string | null>(null);\n\n    const items: CommandItem[] = [\n        {\n            id: \"new-page\",\n            label: \"Create new page\",\n            description: \"Add a blank page to this site\",\n            group: \"Actions\",\n            shortcut: \"⌘N\",\n            onSelect: () => setLastCommand(\"Create new page\"),\n        },\n        {\n            id: \"invite\",\n            label: \"Invite teammate\",\n            group: \"Actions\",\n            keywords: [\"member\", \"user\", \"collaborator\"],\n            onSelect: () => setLastCommand(\"Invite teammate\"),\n        },\n        {\n            id: \"theme-light\",\n            label: \"Switch to light theme\",\n            group: \"Preferences\",\n            onSelect: () => setLastCommand(\"Switch to light theme\"),\n        },\n        {\n            id: \"theme-dark\",\n            label: \"Switch to dark theme\",\n            group: \"Preferences\",\n            onSelect: () => setLastCommand(\"Switch to dark theme\"),\n        },\n        {\n            id: \"billing\",\n            label: \"Open billing settings\",\n            group: \"Preferences\",\n            disabled: true,\n            onSelect: () => setLastCommand(\"Open billing settings\"),\n        },\n    ];\n\n    return (\n        <Section title=\"Real use · ⌘K launcher (try the hotkey too)\">\n            <Row>\n                <Button color=\"primary\" onClick={() => setOpen(true)}>\n                    Open command palette\n                </Button>\n                {lastCommand && (\n                    <span className=\"text-sm opacity-70\">Ran: {lastCommand}</span>\n                )}\n            </Row>\n            <CommandPalette items={items} open={open} onOpenChange={setOpen} />\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Dropzone",
@@ -6568,7 +6568,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Dropzone } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function DropzoneDemo() {\n    const [files, setFiles] = useState<string[]>([]);\n    const [rejected, setRejected] = useState<string[]>([]);\n\n    return (\n        <Section title=\"Real use · image upload with rejection reasons\">\n            <div className=\"flex max-w-md flex-col gap-3\">\n                <Dropzone\n                    accept=\"image/*\"\n                    maxSize={2 * 1024 * 1024}\n                    hint=\"PNG or JPG, up to 2MB\"\n                    onFiles={(fs) => setFiles(fs.map((f) => f.name))}\n                    onReject={(rs) =>\n                        setRejected(rs.map((r) => `${r.file.name} (${r.reason})`))\n                    }\n                />\n                {files.length > 0 && (\n                    <p className=\"text-xs text-success\">Accepted: {files.join(\", \")}</p>\n                )}\n                {rejected.length > 0 && (\n                    <p className=\"text-xs text-error\">Rejected: {rejected.join(\", \")}</p>\n                )}\n            </div>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "EmptyState",
@@ -6614,7 +6614,7 @@
         ]
       }
     ],
-    "usageExample": "import { EmptyState, Button } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nfunction InboxIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" width=\"32\" height=\"32\">\n            <path d=\"M4 12h4l2 3h4l2-3h4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            <path d=\"M5 6h14l1.5 6.5v6a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-6z\" strokeLinejoin=\"round\" />\n        </svg>\n    );\n}\n\nexport function EmptyStateDemo() {\n    return (\n        <>\n            <Section title=\"Real use · empty inbox\">\n                <EmptyState\n                    icon={<InboxIcon />}\n                    title=\"No messages yet\"\n                    description=\"When someone sends you a message, it'll show up here.\"\n                    actions={<Button color=\"primary\">Invite teammates</Button>}\n                    className=\"max-w-sm rounded-box border border-base-300\"\n                />\n            </Section>\n\n            <Section title=\"Compact (sm)\">\n                <EmptyState\n                    size=\"sm\"\n                    title=\"No results\"\n                    description=\"Try a different search term.\"\n                    className=\"max-w-sm rounded-box border border-base-300\"\n                />\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "PowerSearch",
@@ -6712,7 +6712,7 @@
         ]
       }
     ],
-    "usageExample": "import { PowerSearch, usePowerSearchConfig, Button, type PowerSearchFieldDef } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst FIELDS: PowerSearchFieldDef[] = [\n    {\n        key: \"status\",\n        label: \"Status\",\n        type: \"select\",\n        options: [\n            { value: \"open\", label: \"Open\" },\n            { value: \"in-progress\", label: \"In progress\" },\n            { value: \"done\", label: \"Done\" },\n        ],\n    },\n    { key: \"assignee\", label: \"Assignee\", type: \"text\", placeholder: \"e.g. ada\" },\n    { key: \"due\", label: \"Due date\", type: \"date\" },\n    { key: \"starred\", label: \"Starred\", type: \"boolean\" },\n    {\n        key: \"priority\",\n        label: \"Priority\",\n        type: \"custom\",\n        formatValue: (v) => \"⭐\".repeat(Number(v) || 1),\n        render: ({ onCommit }) => (\n            <div className=\"flex gap-1\">\n                {[1, 2, 3].map((n) => (\n                    <Button key={n} size=\"sm\" variant=\"outline\" onClick={() => onCommit(String(n))}>\n                        {\"⭐\".repeat(n)}\n                    </Button>\n                ))}\n            </div>\n        ),\n    },\n];\n\nexport function PowerSearchDemo() {\n    const search = usePowerSearchConfig({\n        fields: FIELDS,\n        defaultValue: {\n            query: \"\",\n            terms: [{ id: \"seed-1\", field: \"status\", value: \"in-progress\" }],\n        },\n    });\n\n    return (\n        <Section title=\"Real use · issue search (select/text/date/boolean/custom fields)\">\n            <div className=\"max-w-xl\">\n                <PowerSearch {...search} placeholder=\"Search issues…\" />\n                <pre className=\"mt-3 rounded-field bg-base-200 p-3 text-xs\">\n                    {JSON.stringify(search.value, null, 2)}\n                </pre>\n            </div>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ThemeController",
@@ -6827,7 +6827,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport {\n    Toolbar,\n    ToolbarButton,\n    ToolbarCenter,\n    ToolbarGroup,\n    ToolbarLink,\n    ToolbarSeparator,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\nfunction BoldIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <path d=\"M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z\" strokeLinejoin=\"round\" />\n        </svg>\n    );\n}\nfunction ItalicIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <path d=\"M15 4h-5M14 20H9M14 4l-4 16\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\nfunction UnderlineIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <path d=\"M7 4v6a5 5 0 0 0 10 0V4M6 21h12\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\nfunction PlusIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <path d=\"M12 5v14M5 12h14\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\nfunction TrashIcon() {\n    return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <path d=\"M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n    );\n}\n\nexport function ToolbarDemo() {\n    const [format, setFormat] = useState<string[]>([\"bold\"]);\n\n    const toggle = (key: string) =>\n        setFormat((f) => (f.includes(key) ? f.filter((k) => k !== key) : [...f, key]));\n\n    return (\n        <>\n            <Section title=\"Real use · text formatting toolbar\">\n                <Toolbar aria-label=\"Formatting\">\n                    <ToolbarGroup>\n                        <ToolbarButton\n                            aria-pressed={format.includes(\"bold\")}\n                            onClick={() => toggle(\"bold\")}\n                        >\n                            <BoldIcon />\n                        </ToolbarButton>\n                        <ToolbarButton\n                            aria-pressed={format.includes(\"italic\")}\n                            onClick={() => toggle(\"italic\")}\n                        >\n                            <ItalicIcon />\n                        </ToolbarButton>\n                        <ToolbarButton\n                            aria-pressed={format.includes(\"underline\")}\n                            onClick={() => toggle(\"underline\")}\n                        >\n                            <UnderlineIcon />\n                        </ToolbarButton>\n                    </ToolbarGroup>\n                    <ToolbarSeparator />\n                    <ToolbarLink href=\"#\">Help</ToolbarLink>\n                </Toolbar>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Stack className=\"items-start\">\n                    {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n                        <Toolbar key={size} aria-label={`${size} toolbar`} size={size}>\n                            <ToolbarButton>\n                                <PlusIcon />\n                                Add\n                            </ToolbarButton>\n                            <ToolbarSeparator />\n                            <ToolbarLink href=\"#\">{size}</ToolbarLink>\n                        </Toolbar>\n                    ))}\n                </Stack>\n            </Section>\n\n            <Section title=\"Variant + dividers · bulk-selection bar\">\n                <div className=\"w-full max-w-md rounded-box border border-base-300\">\n                    <Toolbar aria-label=\"Bulk actions\" size=\"sm\" variant=\"muted\" dividers=\"bottom\" className=\"w-full\">\n                        <ToolbarGroup>\n                            <span className=\"px-1 text-xs font-medium opacity-70\">3 selected</span>\n                        </ToolbarGroup>\n                        <ToolbarSeparator />\n                        <ToolbarGroup>\n                            <ToolbarButton>\n                                <TrashIcon />\n                            </ToolbarButton>\n                        </ToolbarGroup>\n                        <ToolbarLink href=\"#\" className=\"ml-auto\">\n                            Deselect all\n                        </ToolbarLink>\n                    </Toolbar>\n                    <div className=\"p-4 text-sm opacity-60\">…table content…</div>\n                </div>\n            </Section>\n\n            <Section title=\"Dividers · card header\">\n                <div className=\"w-full max-w-md rounded-box border border-base-300\">\n                    <Toolbar aria-label=\"Card actions\" dividers=\"bottom\" className=\"w-full\">\n                        <span className=\"px-1 text-sm font-semibold\">Card title</span>\n                        <ToolbarButton className=\"ml-auto\">\n                            <PlusIcon />\n                        </ToolbarButton>\n                    </Toolbar>\n                    <div className=\"p-4 text-sm opacity-60\">…card content…</div>\n                </div>\n            </Section>\n\n            <Section title=\"Glass · floating action bar\">\n                <div\n                    className=\"flex justify-center rounded-box p-16\"\n                    style={{\n                        backgroundImage:\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\n                    }}\n                >\n                    <Toolbar aria-label=\"Floating actions\" className=\"glass\">\n                        <ToolbarGroup>\n                            <ToolbarButton>\n                                <PlusIcon />\n                                Add\n                            </ToolbarButton>\n                            <ToolbarButton>\n                                <TrashIcon />\n                            </ToolbarButton>\n                        </ToolbarGroup>\n                        <ToolbarSeparator />\n                        <ToolbarLink href=\"#\">Help</ToolbarLink>\n                    </Toolbar>\n                </div>\n            </Section>\n\n            <Section title=\"Center region · start / center / end\">\n                <div className=\"w-full max-w-md rounded-box border border-base-300\">\n                    <Toolbar aria-label=\"Section navigation\" dividers=\"bottom\" className=\"w-full\">\n                        <ToolbarGroup />\n                        <ToolbarCenter>\n                            <ToolbarGroup>\n                                <ToolbarButton aria-pressed={true}>Overview</ToolbarButton>\n                                <ToolbarButton aria-pressed={false}>Analytics</ToolbarButton>\n                                <ToolbarButton aria-pressed={false}>Settings</ToolbarButton>\n                            </ToolbarGroup>\n                        </ToolbarCenter>\n                        <ToolbarGroup>\n                            <ToolbarButton>\n                                <PlusIcon />\n                            </ToolbarButton>\n                        </ToolbarGroup>\n                    </Toolbar>\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "TreeView",
@@ -6897,7 +6897,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { TreeView } from \"@wizeworks/silicaui-react\";\nimport type { TreeDropEdge, TreeNode } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst FolderIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />\n    </svg>\n);\nconst FileIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\n        <path d=\"M5 3h9l5 5v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z\" />\n    </svg>\n);\n\nconst TREE_ITEMS: TreeNode[] = [\n    {\n        id: \"pages\",\n        label: \"Pages\",\n        icon: FolderIcon,\n        children: [\n            { id: \"home\", label: \"Home\", icon: FileIcon },\n            { id: \"about\", label: \"About\", icon: FileIcon },\n            { id: \"pricing\", label: \"Pricing\", icon: FileIcon },\n        ],\n    },\n    {\n        id: \"shop\",\n        label: \"Shop\",\n        icon: FolderIcon,\n        children: [\n            {\n                id: \"products\",\n                label: \"Products\",\n                icon: FolderIcon,\n                children: [\n                    { id: \"product-list\", label: \"All products\", icon: FileIcon },\n                    { id: \"product-new\", label: \"New product\", icon: FileIcon },\n                ],\n            },\n            { id: \"collections\", label: \"Collections\", icon: FileIcon },\n            { id: \"checkout\", label: \"Checkout (locked)\", icon: FileIcon, disabled: true },\n        ],\n    },\n    { id: \"blog\", label: \"Blog\", icon: FileIcon },\n    { id: \"settings\", label: \"Settings\", icon: FileIcon },\n];\n\n/** Remove `id` from the forest, returning the pruned tree + the removed node. */\nfunction removeById(nodes: TreeNode[], id: string): [TreeNode[], TreeNode | undefined] {\n    let removed: TreeNode | undefined;\n    const next = nodes.flatMap((n) => {\n        if (n.id === id) {\n            removed = n;\n            return [];\n        }\n        if (!n.children) return [n];\n        const [children, found] = removeById(n.children, id);\n        if (found) removed = found;\n        return [{ ...n, children }];\n    });\n    return [next, removed];\n}\n\n/** Insert `node` before/after/inside `targetId`, wherever it lives in the forest. */\nfunction insertRelative(nodes: TreeNode[], targetId: string, edge: TreeDropEdge, node: TreeNode): TreeNode[] {\n    const idx = nodes.findIndex((n) => n.id === targetId);\n    if (idx === -1) {\n        return nodes.map((n) => (n.children ? { ...n, children: insertRelative(n.children, targetId, edge, node) } : n));\n    }\n    if (edge === \"inside\") {\n        const target = nodes[idx]!;\n        const updated = { ...target, children: [...(target.children ?? []), node] };\n        return [...nodes.slice(0, idx), updated, ...nodes.slice(idx + 1)];\n    }\n    const at = edge === \"before\" ? idx : idx + 1;\n    return [...nodes.slice(0, at), node, ...nodes.slice(at)];\n}\n\nfunction moveNode(nodes: TreeNode[], id: string, targetId: string, edge: TreeDropEdge): TreeNode[] {\n    const [without, removed] = removeById(nodes, id);\n    return removed ? insertRelative(without, targetId, edge, removed) : nodes;\n}\n\nexport function TreeViewDemo() {\n    const [selected, setSelected] = useState(\"about\");\n    const [expanded, setExpanded] = useState<string[]>([\"pages\", \"shop\"]);\n    const [items, setItems] = useState(TREE_ITEMS);\n\n    return (\n        <Section title=\"Real use · site page tree — drag a row to reorder or reparent it\">\n            <TreeView\n                items={items}\n                selected={selected}\n                onSelectedChange={setSelected}\n                expanded={expanded}\n                onExpandedChange={setExpanded}\n                onMove={(id, targetId, edge) => setItems((prev) => moveNode(prev, id, targetId, edge))}\n                className=\"max-w-xs\"\n            />\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Wizard",
@@ -6991,7 +6991,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Wizard, Input } from \"@wizeworks/silicaui-react\";\nimport type { WizardStep } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nconst MINI_STEPS: WizardStep[] = [\n    { id: \"a\", title: \"Cart\" },\n    { id: \"b\", title: \"Shipping\" },\n    { id: \"c\", title: \"Payment\" },\n];\n\nconst STEPS: WizardStep[] = [\n    {\n        id: \"account\",\n        title: \"Account\",\n        content: (\n            <div className=\"flex max-w-sm flex-col gap-3\">\n                <Input placeholder=\"Work email\" type=\"email\" />\n                <Input placeholder=\"Choose a password\" type=\"password\" />\n            </div>\n        ),\n    },\n    {\n        id: \"profile\",\n        title: \"Profile\",\n        content: (\n            <div className=\"flex max-w-sm flex-col gap-3\">\n                <Input placeholder=\"Full name\" />\n                <Input placeholder=\"Company\" />\n            </div>\n        ),\n    },\n    {\n        id: \"billing\",\n        title: \"Billing\",\n        optional: true,\n        content: (\n            <div className=\"flex max-w-sm flex-col gap-3\">\n                <Input placeholder=\"Card number\" />\n                <span className=\"text-xs opacity-60\">\n                    Optional — you can add this later from Settings.\n                </span>\n            </div>\n        ),\n    },\n    {\n        id: \"review\",\n        title: \"Review\",\n        content: (\n            <p className=\"max-w-sm text-sm opacity-80\">\n                You're all set. Review your details and press Finish to create the\n                workspace.\n            </p>\n        ),\n    },\n];\n\nexport function WizardDemo() {\n    const [step, setStep] = useState(0);\n    const [done, setDone] = useState(false);\n\n    return (\n        <>\n            <Section title=\"Colors (step markers)\">\n                <div className=\"flex flex-col gap-6\">\n                    {COLORS.slice(0, 3).map((color) => (\n                        <Wizard\n                            key={color}\n                            color={color}\n                            steps={MINI_STEPS}\n                            defaultStep={1}\n                            hideFooter\n                        />\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Real use · workspace onboarding\">\n                <Wizard\n                    color=\"primary\"\n                    steps={STEPS}\n                    activeStep={step}\n                    onStepChange={setStep}\n                    onFinish={() => setDone(true)}\n                />\n                {done && (\n                    <p className=\"text-sm text-success\">\n                        🎉 Workspace created — you can close this wizard.\n                    </p>\n                )}\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Blockquote",
@@ -7235,7 +7235,7 @@
         ]
       }
     ],
-    "usageExample": "import { Prose } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function ProseDemo() {\n    return (\n        <>\n            <Section title=\"Real use · rendered article body\">\n                <Prose>\n                    <h2>Launch checklist</h2>\n                    <p>\n                        Draft the announcement in <strong>rich text</strong> — headings,\n                        lists, and links all export as clean HTML.\n                    </p>\n                    <ul>\n                        <li>Write the copy</li>\n                        <li>Add screenshots</li>\n                        <li>\n                            Link the <a href=\"#\">changelog</a>\n                        </li>\n                    </ul>\n                    <blockquote>Ship small, ship often.</blockquote>\n                    <p>\n                        Inline <code>code</code> and block code both pick up themed\n                        styling automatically.\n                    </p>\n                </Prose>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <div className=\"flex flex-col gap-6\">\n                    {([\"sm\", \"lg\"] as const).map((size) => (\n                        <Prose key={size} size={size}>\n                            <p>\n                                <code>size=&quot;{size}&quot;</code> rescales the whole block\n                                by one root font-size.\n                            </p>\n                        </Prose>\n                    ))}\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Text",
@@ -7383,7 +7383,7 @@
         ]
       }
     ],
-    "usageExample": "import { Heading, Display, Text, Blockquote, BlockquoteCite } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\nexport function TypographyDemo() {\n    return (\n        <>\n            <Section title=\"Heading · semantic level + visual size are independent\">\n                <Stack>\n                    <Display>Display</Display>\n                    <Heading level={1}>Heading 1</Heading>\n                    <Heading level={2}>Heading 2</Heading>\n                    <Heading level={3}>Heading 3</Heading>\n                    <Heading level={2} size={5}>\n                        h2 that reads as h5\n                    </Heading>\n                    <Text variant=\"lead\">\n                        Lead text — a slightly larger, muted intro paragraph.\n                    </Text>\n                    <Text>Body text — the default paragraph style.</Text>\n                    <Text variant=\"caption\">Caption — small, muted, for metadata.</Text>\n                </Stack>\n            </Section>\n\n            <Section title=\"Blockquote · pull-quote with attribution\">\n                <Stack className=\"max-w-lg\">\n                    <Blockquote>\n                        “Silica cut our design review time in half — everything just lines\n                        up on the same token system.”\n                        <BlockquoteCite>Ada Lovelace, Analytical Engines Inc.</BlockquoteCite>\n                    </Blockquote>\n                    <Blockquote>No attribution needed for a short pull-quote.</Blockquote>\n                </Stack>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Wordmark",
@@ -7439,7 +7439,7 @@
         "members": []
       }
     ],
-    "usageExample": "import { Wordmark, WordmarkAccent } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nconst Mark = (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n        <path d=\"M12 2 2 7l10 5 10-5-10-5Z\" />\n        <path d=\"m2 17 10 5 10-5\" />\n        <path d=\"m2 12 10 5 10-5\" />\n    </svg>\n);\n\nexport function WordmarkDemo() {\n    return (\n        <>\n            <Section title=\"Real use · brand logotype\">\n                <Row>\n                    <Wordmark>\n                        Silica<WordmarkAccent>UI</WordmarkAccent>\n                    </Wordmark>\n                    <Wordmark as=\"a\" href=\"#\" color=\"primary\">\n                        {Mark}\n                        Acme\n                    </Wordmark>\n                </Row>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    <Wordmark size=\"xs\">Silica</Wordmark>\n                    <Wordmark size=\"sm\">Silica</Wordmark>\n                    <Wordmark size=\"md\">Silica</Wordmark>\n                    <Wordmark size=\"lg\">Silica</Wordmark>\n                    <Wordmark size=\"xl\">Silica</Wordmark>\n                </Row>\n            </Section>\n\n            <Section title=\"Colors\">\n                <Row>\n                    <Wordmark>Base</Wordmark>\n                    <Wordmark color=\"primary\">Primary</Wordmark>\n                    <Wordmark color=\"secondary\">Secondary</Wordmark>\n                    <Wordmark color=\"accent\">Accent</Wordmark>\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Chart",
@@ -7485,7 +7485,7 @@
         ]
       }
     ],
-    "usageExample": "import { Chart, Sparkline } from \"@wizeworks/silicaui-charts\";\nimport type { EChartsOption } from \"@wizeworks/silicaui-charts\";\nimport { Section, Row } from \"../lib/Section\";\n\nconst REVENUE_OPTION: EChartsOption = {\n    tooltip: { trigger: \"axis\" },\n    legend: { data: [\"Revenue\", \"Orders\"], top: 0 },\n    grid: { left: 4, right: 8, top: 34, bottom: 4, containLabel: true },\n    xAxis: {\n        type: \"category\",\n        data: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\"],\n    },\n    yAxis: [{ type: \"value\" }, { type: \"value\", splitLine: { show: false } }],\n    series: [\n        {\n            name: \"Revenue\",\n            type: \"line\",\n            yAxisIndex: 0,\n            smooth: true,\n            areaStyle: { opacity: 0.12 },\n            data: [8200, 9310, 9020, 11200, 12800, 12010, 14300],\n        },\n        {\n            name: \"Orders\",\n            type: \"bar\",\n            yAxisIndex: 1,\n            data: [120, 132, 128, 151, 168, 160, 184],\n        },\n    ],\n};\n\nconst CHANNEL_OPTION: EChartsOption = {\n    tooltip: { trigger: \"item\" },\n    legend: { bottom: 0 },\n    series: [\n        {\n            name: \"Channel\",\n            type: \"pie\",\n            radius: [\"45%\", \"72%\"],\n            itemStyle: { borderRadius: 6 },\n            label: { show: false },\n            data: [\n                { value: 4200, name: \"Direct\" },\n                { value: 3100, name: \"Organic\" },\n                { value: 2400, name: \"Referral\" },\n                { value: 1600, name: \"Social\" },\n            ],\n        },\n    ],\n};\n\nexport function ChartDemo() {\n    return (\n        <>\n            <Section title=\"Real use · revenue trend (auto-themed ECharts)\">\n                <Chart option={REVENUE_OPTION} style={{ maxWidth: 640 }} />\n            </Section>\n\n            <Section title=\"Channel split\">\n                <Chart option={CHANNEL_OPTION} style={{ maxWidth: 420, height: \"18rem\" }} />\n            </Section>\n\n            <Section title=\"Sparklines · inline trend indicators\">\n                <Row>\n                    <Sparkline\n                        data={[8, 9, 9, 11, 12, 12, 14]}\n                        area\n                        style={{ width: \"8rem\", height: \"2.5rem\" }}\n                    />\n                    <Sparkline\n                        data={[14, 12, 12, 11, 9, 9, 8]}\n                        style={{ width: \"8rem\", height: \"2.5rem\" }}\n                    />\n                </Row>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Sparkline",
@@ -7648,7 +7648,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { Badge } from \"@wizeworks/silicaui-react\";\nimport type { SilicaColor } from \"@wizeworks/silicaui-react\";\nimport { DataTable } from \"@wizeworks/silicaui-table\";\nimport type { DataTableColumn } from \"@wizeworks/silicaui-table\";\nimport { Sparkline } from \"@wizeworks/silicaui-charts\";\nimport { Section } from \"../lib/Section\";\n\ninterface TeamRow {\n    name: string;\n    email: string;\n    role: string;\n    plan: string;\n    mrr: number;\n    trend: number[];\n    status: { label: string; color: SilicaColor };\n}\n\nconst TEAM: TeamRow[] = [\n    { name: \"Ada Lovelace\", email: \"ada@silica.dev\", role: \"Owner\", plan: \"Enterprise\", mrr: 2400, trend: [12, 18, 15, 22, 28, 26, 31], status: { label: \"Active\", color: \"success\" } },\n    { name: \"Grace Hopper\", email: \"grace@silica.dev\", role: \"Admin\", plan: \"Pro\", mrr: 990, trend: [8, 9, 11, 10, 13, 15, 14], status: { label: \"Active\", color: \"success\" } },\n    { name: \"Alan Turing\", email: \"alan@silica.dev\", role: \"Member\", plan: \"Pro\", mrr: 720, trend: [5, 6, 6, 8, 7, 9, 12], status: { label: \"Away\", color: \"warning\" } },\n    { name: \"Katherine Johnson\", email: \"kate@silica.dev\", role: \"Member\", plan: \"Starter\", mrr: 190, trend: [2, 3, 3, 4, 5, 5, 6], status: { label: \"Invited\", color: \"neutral\" } },\n    { name: \"Edsger Dijkstra\", email: \"edsger@silica.dev\", role: \"Admin\", plan: \"Enterprise\", mrr: 3100, trend: [20, 22, 25, 24, 29, 33, 38], status: { label: \"Active\", color: \"success\" } },\n    { name: \"Barbara Liskov\", email: \"barbara@silica.dev\", role: \"Member\", plan: \"Pro\", mrr: 880, trend: [9, 10, 12, 11, 14, 13, 16], status: { label: \"Active\", color: \"success\" } },\n    { name: \"Donald Knuth\", email: \"don@silica.dev\", role: \"Member\", plan: \"Starter\", mrr: 140, trend: [1, 2, 2, 3, 3, 4, 4], status: { label: \"Suspended\", color: \"error\" } },\n    { name: \"Margaret Hamilton\", email: \"maggie@silica.dev\", role: \"Admin\", plan: \"Enterprise\", mrr: 2750, trend: [18, 19, 21, 26, 30, 29, 34], status: { label: \"Active\", color: \"success\" } },\n];\n\nconst COLUMNS: DataTableColumn<TeamRow>[] = [\n    {\n        accessorKey: \"name\",\n        header: \"Member\",\n        cell: ({ row }) => (\n            <div className=\"flex flex-col\">\n                <span className=\"font-medium\">{row.original.name}</span>\n                <span className=\"text-xs opacity-60\">{row.original.email}</span>\n            </div>\n        ),\n    },\n    { accessorKey: \"role\", header: \"Role\" },\n    {\n        accessorKey: \"plan\",\n        header: \"Plan\",\n        cell: ({ row }) => <Badge>{row.original.plan}</Badge>,\n    },\n    {\n        accessorKey: \"mrr\",\n        header: \"MRR\",\n        cell: ({ row }) => (\n            <span className=\"tabular-nums\">${row.original.mrr.toLocaleString()}</span>\n        ),\n    },\n    {\n        id: \"trend\",\n        header: \"Trend\",\n        enableSorting: false,\n        cell: ({ row }) => (\n            <Sparkline\n                data={row.original.trend}\n                area\n                style={{ width: \"5rem\", height: \"1.75rem\" }}\n            />\n        ),\n    },\n    {\n        accessorKey: \"status\",\n        header: \"Status\",\n        enableSorting: false,\n        cell: ({ row }) => (\n            <Badge color={row.original.status.color}>{row.original.status.label}</Badge>\n        ),\n    },\n];\n\nexport function DataTableDemo() {\n    const [selected, setSelected] = useState<TeamRow[]>([]);\n    const [loading, setLoading] = useState(false);\n\n    return (\n        <>\n            <Section title=\"Real use · sortable, selectable, paginated team table\">\n                <div className=\"flex flex-col gap-2\">\n                    <DataTable\n                        data={TEAM}\n                        columns={COLUMNS}\n                        sortable\n                        selectable\n                        pagination={5}\n                        zebra\n                        color=\"primary\"\n                        onSelectionChange={setSelected}\n                    />\n                    <p className=\"text-xs opacity-60\">\n                        {selected.length} row{selected.length === 1 ? \"\" : \"s\"} selected\n                    </p>\n                </div>\n            </Section>\n\n            <Section title=\"Loading & empty states\">\n                <div className=\"flex flex-col gap-3\">\n                    <button\n                        className=\"w-fit text-xs underline opacity-70\"\n                        onClick={() => {\n                            setLoading(true);\n                            setTimeout(() => setLoading(false), 1500);\n                        }}\n                    >\n                        Simulate loading\n                    </button>\n                    <DataTable\n                        data={loading ? [] : TEAM.slice(0, 3)}\n                        columns={COLUMNS}\n                        loading={loading}\n                        loadingRows={3}\n                        emptyState={<span className=\"opacity-60\">No members found.</span>}\n                    />\n                </div>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "RichTextEditor",
@@ -7711,7 +7711,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { RichTextEditor } from \"@wizeworks/silicaui-editor\";\nimport { Section } from \"../lib/Section\";\n\nexport function RichTextEditorDemo() {\n    const [doc, setDoc] = useState(\n        \"<h2>Launch checklist</h2><p>Draft the announcement in <strong>rich text</strong> — headings, lists, and links all export as clean HTML.</p><ul><li>Write the copy</li><li>Add screenshots</li></ul>\",\n    );\n\n    return (\n        <Section title=\"Real use · a full formatting toolbar over TipTap\">\n            <RichTextEditor\n                value={doc}\n                onValueChange={setDoc}\n                className=\"max-w-xl\"\n            />\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "SortableList",
@@ -7766,7 +7766,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport { SortableList } from \"@wizeworks/silicaui-dnd\";\nimport { useSilicaClass } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\ninterface SectionBlock {\n    id: string;\n    label: string;\n}\n\nconst INITIAL: SectionBlock[] = [\n    { id: \"hero\", label: \"Hero banner\" },\n    { id: \"features\", label: \"Feature grid\" },\n    { id: \"pricing\", label: \"Pricing table\" },\n    { id: \"testimonials\", label: \"Testimonials\" },\n    { id: \"faq\", label: \"FAQ\" },\n];\n\nconst GripIcon = (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\">\n        <circle cx=\"9\" cy=\"6\" r=\"1.6\" />\n        <circle cx=\"15\" cy=\"6\" r=\"1.6\" />\n        <circle cx=\"9\" cy=\"12\" r=\"1.6\" />\n        <circle cx=\"15\" cy=\"12\" r=\"1.6\" />\n        <circle cx=\"9\" cy=\"18\" r=\"1.6\" />\n        <circle cx=\"15\" cy=\"18\" r=\"1.6\" />\n    </svg>\n);\n\nexport function SortableListDemo() {\n    const [blocks, setBlocks] = useState<SectionBlock[]>(INITIAL);\n    const sc = useSilicaClass();\n\n    return (\n        <Section title=\"Real use · reorder a page's sections (drag the handle)\">\n            <div className=\"max-w-sm\">\n                <SortableList\n                    items={blocks}\n                    getItemId={(b) => b.id}\n                    onReorder={setBlocks}\n                    handle\n                    renderItem={(block, ctx) => (\n                        <>\n                            <span\n                                {...ctx.handleProps}\n                                className={sc(\"sortable-handle\") as string}\n                                aria-label={`Drag ${block.label}`}\n                            >\n                                {GripIcon}\n                            </span>\n                            {block.label}\n                        </>\n                    )}\n                />\n            </div>\n        </Section>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "ResizablePanels",
@@ -7781,7 +7781,7 @@
         "members": []
       }
     ],
-    "usageExample": "import {\n    ResizablePanelGroup,\n    ResizablePanel,\n    ResizeHandle,\n} from \"@wizeworks/silicaui-panels\";\nimport { Section } from \"../lib/Section\";\n\nexport function ResizablePanelsDemo() {\n    return (\n        <>\n            <Section title=\"Real use · sidebar + editor + preview\">\n                <ResizablePanelGroup\n                    direction=\"horizontal\"\n                    className=\"h-64 max-w-2xl rounded-box border border-base-300\"\n                >\n                    <ResizablePanel defaultSize={20} minSize={15}>\n                        <div className=\"flex h-full items-center justify-center bg-base-200 text-sm\">\n                            Sidebar\n                        </div>\n                    </ResizablePanel>\n                    <ResizeHandle />\n                    <ResizablePanel defaultSize={50} minSize={30}>\n                        <div className=\"flex h-full items-center justify-center text-sm\">\n                            Editor\n                        </div>\n                    </ResizablePanel>\n                    <ResizeHandle />\n                    <ResizablePanel defaultSize={30} minSize={15}>\n                        <div className=\"flex h-full items-center justify-center bg-base-200 text-sm\">\n                            Preview\n                        </div>\n                    </ResizablePanel>\n                </ResizablePanelGroup>\n            </Section>\n\n            <Section title=\"Vertical stack\">\n                <ResizablePanelGroup\n                    direction=\"vertical\"\n                    className=\"h-64 max-w-md rounded-box border border-base-300\"\n                >\n                    <ResizablePanel defaultSize={50}>\n                        <div className=\"flex h-full items-center justify-center bg-base-200 text-sm\">\n                            Top\n                        </div>\n                    </ResizablePanel>\n                    <ResizeHandle />\n                    <ResizablePanel defaultSize={50}>\n                        <div className=\"flex h-full items-center justify-center text-sm\">\n                            Bottom\n                        </div>\n                    </ResizablePanel>\n                </ResizablePanelGroup>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": null
   },
   {
     "name": "Button",
@@ -7791,7 +7791,7 @@
     "icon": "button",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:582"
+    "sourceFile": "silicaui-html/src/component.ts:600"
   },
   {
     "name": "Image",
@@ -7801,7 +7801,7 @@
     "icon": "image",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:602"
+    "sourceFile": "silicaui-html/src/component.ts:620"
   },
   {
     "name": "Video",
@@ -7811,7 +7811,7 @@
     "icon": "video",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:625"
+    "sourceFile": "silicaui-html/src/component.ts:643"
   },
   {
     "name": "Embed",
@@ -7821,7 +7821,7 @@
     "icon": "video",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:667"
+    "sourceFile": "silicaui-html/src/component.ts:685"
   },
   {
     "name": "Heading",
@@ -7831,7 +7831,7 @@
     "icon": "heading",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:701"
+    "sourceFile": "silicaui-html/src/component.ts:720"
   },
   {
     "name": "Icon",
@@ -7841,7 +7841,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:713"
+    "sourceFile": "silicaui-html/src/component.ts:732"
   },
   {
     "name": "Divider",
@@ -7851,7 +7851,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:724"
+    "sourceFile": "silicaui-html/src/component.ts:743"
   },
   {
     "name": "Input",
@@ -7861,7 +7861,7 @@
     "icon": "input",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:731"
+    "sourceFile": "silicaui-html/src/component.ts:750"
   },
   {
     "name": "Textarea",
@@ -7871,7 +7871,7 @@
     "icon": "textarea",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:742"
+    "sourceFile": "silicaui-html/src/component.ts:761"
   },
   {
     "name": "Select",
@@ -7881,7 +7881,7 @@
     "icon": "select",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:754"
+    "sourceFile": "silicaui-html/src/component.ts:773"
   },
   {
     "name": "Checkbox",
@@ -7891,7 +7891,7 @@
     "icon": "checkbox",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:771"
+    "sourceFile": "silicaui-html/src/component.ts:790"
   },
   {
     "name": "Radio",
@@ -7901,7 +7901,7 @@
     "icon": "radio",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:778"
+    "sourceFile": "silicaui-html/src/component.ts:797"
   },
   {
     "name": "Toggle",
@@ -7911,7 +7911,7 @@
     "icon": "toggle",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:785"
+    "sourceFile": "silicaui-html/src/component.ts:804"
   },
   {
     "name": "Text",
@@ -7941,7 +7941,7 @@
     "icon": "wordmark",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:805"
+    "sourceFile": "silicaui-html/src/component.ts:824"
   },
   {
     "name": "Card",
@@ -8073,7 +8073,7 @@
     "behaviors": [
       "form"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:855"
+    "sourceFile": "silicaui-html/src/component.ts:874"
   },
   {
     "name": "Sidebar",
@@ -8085,7 +8085,7 @@
     "behaviors": [
       "sidebar"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:874"
+    "sourceFile": "silicaui-html/src/component.ts:893"
   },
   {
     "name": "SidebarTrigger",
@@ -8095,7 +8095,7 @@
     "icon": "sidebarTrigger",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:895"
+    "sourceFile": "silicaui-html/src/component.ts:914"
   },
   {
     "name": "SelectionList",
@@ -8107,7 +8107,7 @@
     "behaviors": [
       "selection-list"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:912"
+    "sourceFile": "silicaui-html/src/component.ts:931"
   },
   {
     "name": "Breadcrumb",
@@ -8117,7 +8117,7 @@
     "icon": "breadcrumb",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:971"
+    "sourceFile": "silicaui-html/src/component.ts:990"
   },
   {
     "name": "Menu",
@@ -8127,7 +8127,7 @@
     "icon": "nav",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:988"
+    "sourceFile": "silicaui-html/src/component.ts:1007"
   },
   {
     "name": "Steps",
@@ -8137,7 +8137,7 @@
     "icon": "steps",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1002"
+    "sourceFile": "silicaui-html/src/component.ts:1021"
   },
   {
     "name": "Pagination",
@@ -8147,7 +8147,7 @@
     "icon": "pagination",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1017"
+    "sourceFile": "silicaui-html/src/component.ts:1036"
   },
   {
     "name": "Alert",
@@ -8157,7 +8157,7 @@
     "icon": "warning",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1038"
+    "sourceFile": "silicaui-html/src/component.ts:1057"
   },
   {
     "name": "Progress",
@@ -8167,7 +8167,7 @@
     "icon": "progress",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1047"
+    "sourceFile": "silicaui-html/src/component.ts:1066"
   },
   {
     "name": "Stat",
@@ -8177,7 +8177,7 @@
     "icon": "stat",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1060"
+    "sourceFile": "silicaui-html/src/component.ts:1079"
   },
   {
     "name": "Avatar",
@@ -8187,7 +8187,7 @@
     "icon": "avatar",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1075"
+    "sourceFile": "silicaui-html/src/component.ts:1094"
   },
   {
     "name": "Collapse",
@@ -8197,7 +8197,7 @@
     "icon": "collapse",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1097"
+    "sourceFile": "silicaui-html/src/component.ts:1116"
   },
   {
     "name": "Timeline",
@@ -8207,7 +8207,7 @@
     "icon": "timeline",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1113"
+    "sourceFile": "silicaui-html/src/component.ts:1132"
   },
   {
     "name": "Label",
@@ -8247,7 +8247,7 @@
     "icon": "text",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1143"
+    "sourceFile": "silicaui-html/src/component.ts:1162"
   },
   {
     "name": "Hero",
@@ -8497,7 +8497,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1177"
+    "sourceFile": "silicaui-html/src/component.ts:1196"
   },
   {
     "name": "ToolbarCenter",
@@ -8517,7 +8517,7 @@
     "icon": "sidebarTrigger",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1198"
+    "sourceFile": "silicaui-html/src/component.ts:1217"
   },
   {
     "name": "InputGroupButton",
@@ -8527,7 +8527,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1206"
+    "sourceFile": "silicaui-html/src/component.ts:1225"
   },
   {
     "name": "ToolbarButton",
@@ -8537,7 +8537,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1214"
+    "sourceFile": "silicaui-html/src/component.ts:1233"
   },
   {
     "name": "ToolbarLink",
@@ -8547,7 +8547,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1222"
+    "sourceFile": "silicaui-html/src/component.ts:1241"
   },
   {
     "name": "ToolbarSeparator",
@@ -8557,7 +8557,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1230"
+    "sourceFile": "silicaui-html/src/component.ts:1249"
   },
   {
     "name": "ClickableCard",
@@ -8567,7 +8567,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1239"
+    "sourceFile": "silicaui-html/src/component.ts:1258"
   },
   {
     "name": "SearchInput",
@@ -8577,7 +8577,7 @@
     "icon": "input",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1255"
+    "sourceFile": "silicaui-html/src/component.ts:1274"
   },
   {
     "name": "PasswordInput",
@@ -8587,7 +8587,7 @@
     "icon": "input",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1262"
+    "sourceFile": "silicaui-html/src/component.ts:1281"
   },
   {
     "name": "CheckboxGroup",
@@ -8597,7 +8597,7 @@
     "icon": "checkbox",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1272"
+    "sourceFile": "silicaui-html/src/component.ts:1291"
   },
   {
     "name": "CheckboxOption",
@@ -8607,7 +8607,7 @@
     "icon": "checkbox",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1280"
+    "sourceFile": "silicaui-html/src/component.ts:1299"
   },
   {
     "name": "Swap",
@@ -8617,7 +8617,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1293"
+    "sourceFile": "silicaui-html/src/component.ts:1312"
   },
   {
     "name": "Display",
@@ -8627,7 +8627,7 @@
     "icon": "heading",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1307"
+    "sourceFile": "silicaui-html/src/component.ts:1326"
   },
   {
     "name": "Timestamp",
@@ -8637,7 +8637,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1322"
+    "sourceFile": "silicaui-html/src/component.ts:1341"
   },
   {
     "name": "EmptyState",
@@ -8647,7 +8647,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1356"
+    "sourceFile": "silicaui-html/src/component.ts:1375"
   },
   {
     "name": "RadioGroup",
@@ -8657,7 +8657,7 @@
     "icon": "radio",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1375"
+    "sourceFile": "silicaui-html/src/component.ts:1394"
   },
   {
     "name": "RadioOption",
@@ -8667,7 +8667,7 @@
     "icon": "radio",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1383"
+    "sourceFile": "silicaui-html/src/component.ts:1402"
   },
   {
     "name": "Stats",
@@ -8687,7 +8687,7 @@
     "icon": "progress",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1399"
+    "sourceFile": "silicaui-html/src/component.ts:1418"
   },
   {
     "name": "RadialProgress",
@@ -8697,7 +8697,7 @@
     "icon": "progress",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1413"
+    "sourceFile": "silicaui-html/src/component.ts:1432"
   },
   {
     "name": "Accordion",
@@ -8709,7 +8709,7 @@
     "behaviors": [
       "disclosure"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1446"
+    "sourceFile": "silicaui-html/src/component.ts:1465"
   },
   {
     "name": "AccordionItem",
@@ -8729,7 +8729,7 @@
     "icon": "collapse",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1462"
+    "sourceFile": "silicaui-html/src/component.ts:1481"
   },
   {
     "name": "AccordionPanel",
@@ -8739,7 +8739,7 @@
     "icon": "collapse",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1474"
+    "sourceFile": "silicaui-html/src/component.ts:1493"
   },
   {
     "name": "Collapsible",
@@ -8751,7 +8751,7 @@
     "behaviors": [
       "disclosure"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1490"
+    "sourceFile": "silicaui-html/src/component.ts:1509"
   },
   {
     "name": "CollapsibleTrigger",
@@ -8761,7 +8761,7 @@
     "icon": "collapse",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1502"
+    "sourceFile": "silicaui-html/src/component.ts:1521"
   },
   {
     "name": "CollapsiblePanel",
@@ -8771,7 +8771,7 @@
     "icon": "collapse",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1514"
+    "sourceFile": "silicaui-html/src/component.ts:1533"
   },
   {
     "name": "Carousel",
@@ -8783,7 +8783,7 @@
     "behaviors": [
       "carousel"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1532"
+    "sourceFile": "silicaui-html/src/component.ts:1551"
   },
   {
     "name": "CarouselItem",
@@ -8793,7 +8793,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1566"
+    "sourceFile": "silicaui-html/src/component.ts:1585"
   },
   {
     "name": "DropdownMenu",
@@ -8805,7 +8805,7 @@
     "behaviors": [
       "menu"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1583"
+    "sourceFile": "silicaui-html/src/component.ts:1602"
   },
   {
     "name": "DropdownMenuTrigger",
@@ -8815,7 +8815,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1595"
+    "sourceFile": "silicaui-html/src/component.ts:1614"
   },
   {
     "name": "DropdownMenuContent",
@@ -8825,7 +8825,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1607"
+    "sourceFile": "silicaui-html/src/component.ts:1626"
   },
   {
     "name": "DropdownMenuItem",
@@ -8835,7 +8835,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1619"
+    "sourceFile": "silicaui-html/src/component.ts:1640"
   },
   {
     "name": "Tabs",
@@ -8847,17 +8847,17 @@
     "behaviors": [
       "tabs"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1634"
+    "sourceFile": "silicaui-html/src/component.ts:1655"
   },
   {
     "name": "TabsList",
     "package": "@wizeworks/silicaui-html",
     "category": "data",
-    "label": "TabsList",
+    "label": "Tabs list",
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts"
+    "sourceFile": "silicaui-html/src/component.ts:1671"
   },
   {
     "name": "TabsTab",
@@ -8867,7 +8867,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1647"
+    "sourceFile": "silicaui-html/src/component.ts:1679"
   },
   {
     "name": "TabsPanel",
@@ -8877,7 +8877,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1659"
+    "sourceFile": "silicaui-html/src/component.ts:1691"
   },
   {
     "name": "Outline",
@@ -8889,7 +8889,7 @@
     "behaviors": [
       "toc"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1676"
+    "sourceFile": "silicaui-html/src/component.ts:1708"
   },
   {
     "name": "Dialog",
@@ -8901,7 +8901,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1709"
+    "sourceFile": "silicaui-html/src/component.ts:1741"
   },
   {
     "name": "DialogTrigger",
@@ -8911,7 +8911,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1721"
+    "sourceFile": "silicaui-html/src/component.ts:1753"
   },
   {
     "name": "DialogBackdrop",
@@ -8921,7 +8921,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1733"
+    "sourceFile": "silicaui-html/src/component.ts:1765"
   },
   {
     "name": "DialogContent",
@@ -8931,7 +8931,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1744"
+    "sourceFile": "silicaui-html/src/component.ts:1776"
   },
   {
     "name": "DialogClose",
@@ -8941,7 +8941,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1759"
+    "sourceFile": "silicaui-html/src/component.ts:1791"
   },
   {
     "name": "DialogTitle",
@@ -8973,7 +8973,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1777"
+    "sourceFile": "silicaui-html/src/component.ts:1809"
   },
   {
     "name": "DrawerTrigger",
@@ -8983,7 +8983,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1789"
+    "sourceFile": "silicaui-html/src/component.ts:1821"
   },
   {
     "name": "DrawerBackdrop",
@@ -8993,7 +8993,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1801"
+    "sourceFile": "silicaui-html/src/component.ts:1833"
   },
   {
     "name": "DrawerContent",
@@ -9003,7 +9003,7 @@
     "icon": "sidebar",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1812"
+    "sourceFile": "silicaui-html/src/component.ts:1844"
   },
   {
     "name": "DrawerClose",
@@ -9013,7 +9013,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1828"
+    "sourceFile": "silicaui-html/src/component.ts:1860"
   },
   {
     "name": "DrawerTitle",
@@ -9045,7 +9045,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1847"
+    "sourceFile": "silicaui-html/src/component.ts:1879"
   },
   {
     "name": "AlertDialogTrigger",
@@ -9055,7 +9055,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1859"
+    "sourceFile": "silicaui-html/src/component.ts:1891"
   },
   {
     "name": "AlertDialogBackdrop",
@@ -9065,7 +9065,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1871"
+    "sourceFile": "silicaui-html/src/component.ts:1903"
   },
   {
     "name": "AlertDialogContent",
@@ -9075,7 +9075,7 @@
     "icon": "warning",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1882"
+    "sourceFile": "silicaui-html/src/component.ts:1914"
   },
   {
     "name": "AlertDialogClose",
@@ -9085,7 +9085,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1897"
+    "sourceFile": "silicaui-html/src/component.ts:1929"
   },
   {
     "name": "AlertDialogCancel",
@@ -9095,7 +9095,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1909"
+    "sourceFile": "silicaui-html/src/component.ts:1941"
   },
   {
     "name": "AlertDialogAction",
@@ -9105,7 +9105,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1921"
+    "sourceFile": "silicaui-html/src/component.ts:1953"
   },
   {
     "name": "AlertDialogTitle",
@@ -9137,7 +9137,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1939"
+    "sourceFile": "silicaui-html/src/component.ts:1971"
   },
   {
     "name": "LightboxTrigger",
@@ -9147,7 +9147,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1951"
+    "sourceFile": "silicaui-html/src/component.ts:1983"
   },
   {
     "name": "LightboxBackdrop",
@@ -9157,7 +9157,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1963"
+    "sourceFile": "silicaui-html/src/component.ts:1995"
   },
   {
     "name": "LightboxContent",
@@ -9167,7 +9167,7 @@
     "icon": "image",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1974"
+    "sourceFile": "silicaui-html/src/component.ts:2006"
   },
   {
     "name": "LightboxSlide",
@@ -9177,7 +9177,7 @@
     "icon": "image",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1989"
+    "sourceFile": "silicaui-html/src/component.ts:2021"
   },
   {
     "name": "LightboxPrev",
@@ -9187,7 +9187,7 @@
     "icon": "button",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2001"
+    "sourceFile": "silicaui-html/src/component.ts:2033"
   },
   {
     "name": "LightboxNext",
@@ -9197,7 +9197,7 @@
     "icon": "button",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2015"
+    "sourceFile": "silicaui-html/src/component.ts:2047"
   },
   {
     "name": "LightboxClose",
@@ -9207,7 +9207,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2029"
+    "sourceFile": "silicaui-html/src/component.ts:2061"
   },
   {
     "name": "LightboxCounter",
@@ -9217,7 +9217,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2044"
+    "sourceFile": "silicaui-html/src/component.ts:2076"
   },
   {
     "name": "CommandPalette",
@@ -9229,7 +9229,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2059"
+    "sourceFile": "silicaui-html/src/component.ts:2091"
   },
   {
     "name": "CommandPaletteBackdrop",
@@ -9239,7 +9239,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2074"
+    "sourceFile": "silicaui-html/src/component.ts:2106"
   },
   {
     "name": "CommandPaletteContent",
@@ -9249,7 +9249,7 @@
     "icon": "search",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2085"
+    "sourceFile": "silicaui-html/src/component.ts:2117"
   },
   {
     "name": "CommandPaletteInput",
@@ -9259,7 +9259,7 @@
     "icon": "input",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2100"
+    "sourceFile": "silicaui-html/src/component.ts:2132"
   },
   {
     "name": "CommandPaletteItem",
@@ -9269,7 +9269,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2113"
+    "sourceFile": "silicaui-html/src/component.ts:2145"
   },
   {
     "name": "Popover",
@@ -9281,7 +9281,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2130"
+    "sourceFile": "silicaui-html/src/component.ts:2162"
   },
   {
     "name": "PopoverTrigger",
@@ -9291,7 +9291,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2142"
+    "sourceFile": "silicaui-html/src/component.ts:2174"
   },
   {
     "name": "PopoverContent",
@@ -9301,7 +9301,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2154"
+    "sourceFile": "silicaui-html/src/component.ts:2186"
   },
   {
     "name": "PopoverClose",
@@ -9311,7 +9311,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2166"
+    "sourceFile": "silicaui-html/src/component.ts:2198"
   },
   {
     "name": "PopoverTitle",
@@ -9343,7 +9343,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2184"
+    "sourceFile": "silicaui-html/src/component.ts:2216"
   },
   {
     "name": "TooltipTrigger",
@@ -9353,7 +9353,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2196"
+    "sourceFile": "silicaui-html/src/component.ts:2228"
   },
   {
     "name": "TooltipContent",
@@ -9363,7 +9363,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2208"
+    "sourceFile": "silicaui-html/src/component.ts:2240"
   },
   {
     "name": "PreviewCard",
@@ -9375,7 +9375,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2223"
+    "sourceFile": "silicaui-html/src/component.ts:2255"
   },
   {
     "name": "PreviewCardTrigger",
@@ -9385,7 +9385,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2235"
+    "sourceFile": "silicaui-html/src/component.ts:2267"
   },
   {
     "name": "PreviewCardContent",
@@ -9395,7 +9395,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2247"
+    "sourceFile": "silicaui-html/src/component.ts:2279"
   },
   {
     "name": "ContextMenu",
@@ -9407,7 +9407,7 @@
     "behaviors": [
       "menu"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2265"
+    "sourceFile": "silicaui-html/src/component.ts:2297"
   },
   {
     "name": "ContextMenuTrigger",
@@ -9417,7 +9417,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2277"
+    "sourceFile": "silicaui-html/src/component.ts:2309"
   },
   {
     "name": "ContextMenuContent",
@@ -9427,7 +9427,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2289"
+    "sourceFile": "silicaui-html/src/component.ts:2321"
   },
   {
     "name": "ContextMenuItem",
@@ -9437,7 +9437,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2301"
+    "sourceFile": "silicaui-html/src/component.ts:2333"
   },
   {
     "name": "Menubar",
@@ -9459,7 +9459,7 @@
     "behaviors": [
       "menu"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2319"
+    "sourceFile": "silicaui-html/src/component.ts:2351"
   },
   {
     "name": "MenubarTrigger",
@@ -9469,7 +9469,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2331"
+    "sourceFile": "silicaui-html/src/component.ts:2363"
   },
   {
     "name": "MenubarContent",
@@ -9479,7 +9479,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2343"
+    "sourceFile": "silicaui-html/src/component.ts:2375"
   },
   {
     "name": "MenubarItem",
@@ -9489,7 +9489,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2355"
+    "sourceFile": "silicaui-html/src/component.ts:2387"
   },
   {
     "name": "NavigationMenu",
@@ -9511,7 +9511,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2373"
+    "sourceFile": "silicaui-html/src/component.ts:2405"
   },
   {
     "name": "NavigationMenuTrigger",
@@ -9521,7 +9521,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2385"
+    "sourceFile": "silicaui-html/src/component.ts:2417"
   },
   {
     "name": "NavigationMenuContent",
@@ -9531,7 +9531,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2397"
+    "sourceFile": "silicaui-html/src/component.ts:2429"
   },
   {
     "name": "NavigationMenuLink",
@@ -9541,7 +9541,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2409"
+    "sourceFile": "silicaui-html/src/component.ts:2441"
   },
   {
     "name": "Combobox",
@@ -9553,7 +9553,7 @@
     "behaviors": [
       "combobox"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2424"
+    "sourceFile": "silicaui-html/src/component.ts:2456"
   },
   {
     "name": "Autocomplete",
@@ -9565,7 +9565,7 @@
     "behaviors": [
       "combobox"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2431"
+    "sourceFile": "silicaui-html/src/component.ts:2463"
   },
   {
     "name": "MultiSelect",
@@ -9577,7 +9577,7 @@
     "behaviors": [
       "combobox"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2438"
+    "sourceFile": "silicaui-html/src/component.ts:2470"
   },
   {
     "name": "DateInput",
@@ -9589,7 +9589,7 @@
     "behaviors": [
       "date-segment"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2450"
+    "sourceFile": "silicaui-html/src/component.ts:2482"
   },
   {
     "name": "DateRangeInput",
@@ -9601,7 +9601,7 @@
     "behaviors": [
       "date-segment"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2468"
+    "sourceFile": "silicaui-html/src/component.ts:2500"
   },
   {
     "name": "DateTimeInput",
@@ -9613,7 +9613,7 @@
     "behaviors": [
       "date-segment"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2484"
+    "sourceFile": "silicaui-html/src/component.ts:2516"
   },
   {
     "name": "TimeInput",
@@ -9625,7 +9625,7 @@
     "behaviors": [
       "date-segment"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2510"
+    "sourceFile": "silicaui-html/src/component.ts:2542"
   },
   {
     "name": "PinInput",
@@ -9637,7 +9637,7 @@
     "behaviors": [
       "pin-input"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2536"
+    "sourceFile": "silicaui-html/src/component.ts:2568"
   },
   {
     "name": "Calendar",
@@ -9649,7 +9649,7 @@
     "behaviors": [
       "calendar"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2581"
+    "sourceFile": "silicaui-html/src/component.ts:2613"
   },
   {
     "name": "DatePicker",
@@ -9661,7 +9661,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2593"
+    "sourceFile": "silicaui-html/src/component.ts:2625"
   },
   {
     "name": "DatePickerTrigger",
@@ -9671,7 +9671,7 @@
     "icon": "calendar",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2605"
+    "sourceFile": "silicaui-html/src/component.ts:2637"
   },
   {
     "name": "DatePickerContent",
@@ -9683,7 +9683,7 @@
     "behaviors": [
       "calendar"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2617"
+    "sourceFile": "silicaui-html/src/component.ts:2649"
   },
   {
     "name": "DateRangePicker",
@@ -9695,7 +9695,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2631"
+    "sourceFile": "silicaui-html/src/component.ts:2663"
   },
   {
     "name": "DateRangePickerTrigger",
@@ -9705,7 +9705,7 @@
     "icon": "calendar",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2643"
+    "sourceFile": "silicaui-html/src/component.ts:2675"
   },
   {
     "name": "DateRangePickerContent",
@@ -9717,7 +9717,7 @@
     "behaviors": [
       "calendar"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2655"
+    "sourceFile": "silicaui-html/src/component.ts:2687"
   },
   {
     "name": "TreeView",
@@ -9729,7 +9729,7 @@
     "behaviors": [
       "tree"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2675"
+    "sourceFile": "silicaui-html/src/component.ts:2707"
   },
   {
     "name": "TreeNode",
@@ -9739,7 +9739,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2687"
+    "sourceFile": "silicaui-html/src/component.ts:2719"
   },
   {
     "name": "TreeToggle",
@@ -9749,7 +9749,7 @@
     "icon": "button",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2699"
+    "sourceFile": "silicaui-html/src/component.ts:2731"
   },
   {
     "name": "TreeGroup",
@@ -9759,7 +9759,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2713"
+    "sourceFile": "silicaui-html/src/component.ts:2745"
   },
   {
     "name": "Wizard",
@@ -9771,7 +9771,7 @@
     "behaviors": [
       "wizard"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2727"
+    "sourceFile": "silicaui-html/src/component.ts:2759"
   },
   {
     "name": "WizardStep",
@@ -9781,7 +9781,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2739"
+    "sourceFile": "silicaui-html/src/component.ts:2771"
   },
   {
     "name": "WizardPanel",
@@ -9791,7 +9791,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2753"
+    "sourceFile": "silicaui-html/src/component.ts:2785"
   },
   {
     "name": "WizardBack",
@@ -9801,7 +9801,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2765"
+    "sourceFile": "silicaui-html/src/component.ts:2797"
   },
   {
     "name": "WizardNext",
@@ -9811,7 +9811,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2777"
+    "sourceFile": "silicaui-html/src/component.ts:2809"
   },
   {
     "name": "NumberField",
@@ -9823,7 +9823,7 @@
     "behaviors": [
       "number-field"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2795"
+    "sourceFile": "silicaui-html/src/component.ts:2827"
   },
   {
     "name": "ToggleGroup",
@@ -9835,7 +9835,7 @@
     "behaviors": [
       "toggle-group"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2825"
+    "sourceFile": "silicaui-html/src/component.ts:2857"
   },
   {
     "name": "ToggleGroupItem",
@@ -9845,7 +9845,7 @@
     "icon": "toggle",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2843"
+    "sourceFile": "silicaui-html/src/component.ts:2875"
   },
   {
     "name": "Range",
@@ -9857,7 +9857,7 @@
     "behaviors": [
       "slider"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2863"
+    "sourceFile": "silicaui-html/src/component.ts:2895"
   },
   {
     "name": "Slider",
@@ -9869,7 +9869,7 @@
     "behaviors": [
       "slider"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2864"
+    "sourceFile": "silicaui-html/src/component.ts:2896"
   },
   {
     "name": "Switch",
@@ -9881,7 +9881,7 @@
     "behaviors": [
       "switch"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2870"
+    "sourceFile": "silicaui-html/src/component.ts:2902"
   },
   {
     "name": "Rating",
@@ -9893,7 +9893,7 @@
     "behaviors": [
       "rating"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2894"
+    "sourceFile": "silicaui-html/src/component.ts:2926"
   },
   {
     "name": "ScrollArea",
@@ -9905,7 +9905,7 @@
     "behaviors": [
       "scroll-area"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2930"
+    "sourceFile": "silicaui-html/src/component.ts:2962"
   },
   {
     "name": "OverflowList",
@@ -9917,7 +9917,7 @@
     "behaviors": [
       "overflow-list"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2950"
+    "sourceFile": "silicaui-html/src/component.ts:2982"
   },
   {
     "name": "OverflowListItem",
@@ -9927,7 +9927,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2975"
+    "sourceFile": "silicaui-html/src/component.ts:3010"
   },
   {
     "name": "Dropzone",
@@ -9939,7 +9939,7 @@
     "behaviors": [
       "dropzone"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2992"
+    "sourceFile": "silicaui-html/src/component.ts:3027"
   },
   {
     "name": "FileUpload",
@@ -9951,7 +9951,7 @@
     "behaviors": [
       "dropzone"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2993"
+    "sourceFile": "silicaui-html/src/component.ts:3028"
   },
   {
     "name": "PhoneInput",
@@ -9963,7 +9963,7 @@
     "behaviors": [
       "phone-input"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2999"
+    "sourceFile": "silicaui-html/src/component.ts:3034"
   },
   {
     "name": "ThemeController",
@@ -9975,7 +9975,7 @@
     "behaviors": [
       "theme-toggle"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:3038"
+    "sourceFile": "silicaui-html/src/component.ts:3073"
   },
   {
     "name": "Overlay",
@@ -9985,7 +9985,7 @@
     "icon": "image",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:3060"
+    "sourceFile": "silicaui-html/src/component.ts:3095"
   },
   {
     "name": "OverlayScrim",
@@ -9995,6 +9995,6 @@
     "icon": "image",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:3068"
+    "sourceFile": "silicaui-html/src/component.ts:3103"
   }
 ]