@wizeworks/silicaui-mcp 0.49.0 → 0.50.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data/components.json +567 -350
- package/package.json +1 -1
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
]
|
|
80
80
|
}
|
|
81
81
|
],
|
|
82
|
-
"usageExample": "import { useState } from \"react\";\
|
|
82
|
+
"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}"
|
|
83
83
|
},
|
|
84
84
|
{
|
|
85
85
|
"name": "DropdownMenu",
|
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
]
|
|
182
182
|
}
|
|
183
183
|
],
|
|
184
|
-
"usageExample": "import { useState } from \"react\";\
|
|
184
|
+
"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}"
|
|
185
185
|
},
|
|
186
186
|
{
|
|
187
187
|
"name": "Accordion",
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
]
|
|
204
204
|
}
|
|
205
205
|
],
|
|
206
|
-
"usageExample": "import {\
|
|
206
|
+
"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}"
|
|
207
207
|
},
|
|
208
208
|
{
|
|
209
209
|
"name": "Avatar",
|
|
@@ -261,7 +261,7 @@
|
|
|
261
261
|
]
|
|
262
262
|
}
|
|
263
263
|
],
|
|
264
|
-
"usageExample": "import { Avatar, AvatarGroup } from \"@wizeworks/silicaui-react\";\
|
|
264
|
+
"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}"
|
|
265
265
|
},
|
|
266
266
|
{
|
|
267
267
|
"name": "Badge",
|
|
@@ -301,7 +301,7 @@
|
|
|
301
301
|
]
|
|
302
302
|
}
|
|
303
303
|
],
|
|
304
|
-
"usageExample": "import { Badge } from \"@wizeworks/silicaui-react\";\
|
|
304
|
+
"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}"
|
|
305
305
|
},
|
|
306
306
|
{
|
|
307
307
|
"name": "Card",
|
|
@@ -339,7 +339,7 @@
|
|
|
339
339
|
]
|
|
340
340
|
}
|
|
341
341
|
],
|
|
342
|
-
"usageExample": "import {\
|
|
342
|
+
"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 <a>, 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}"
|
|
343
343
|
},
|
|
344
344
|
{
|
|
345
345
|
"name": "Carousel",
|
|
@@ -413,7 +413,7 @@
|
|
|
413
413
|
"members": []
|
|
414
414
|
}
|
|
415
415
|
],
|
|
416
|
-
"usageExample": "import type { CSSProperties } from \"react\";\
|
|
416
|
+
"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}"
|
|
417
417
|
},
|
|
418
418
|
{
|
|
419
419
|
"name": "Chat",
|
|
@@ -459,7 +459,7 @@
|
|
|
459
459
|
]
|
|
460
460
|
}
|
|
461
461
|
],
|
|
462
|
-
"usageExample": "import {\
|
|
462
|
+
"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}"
|
|
463
463
|
},
|
|
464
464
|
{
|
|
465
465
|
"name": "ChatComposer",
|
|
@@ -1208,7 +1208,7 @@
|
|
|
1208
1208
|
]
|
|
1209
1209
|
}
|
|
1210
1210
|
],
|
|
1211
|
-
"usageExample": "import { Collapse, CollapseTitle, CollapseContent } from \"@wizeworks/silicaui-react\";\
|
|
1211
|
+
"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}"
|
|
1212
1212
|
},
|
|
1213
1213
|
{
|
|
1214
1214
|
"name": "Countdown",
|
|
@@ -1248,7 +1248,7 @@
|
|
|
1248
1248
|
]
|
|
1249
1249
|
}
|
|
1250
1250
|
],
|
|
1251
|
-
"usageExample": "import { useState } from \"react\";\
|
|
1251
|
+
"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}"
|
|
1252
1252
|
},
|
|
1253
1253
|
{
|
|
1254
1254
|
"name": "Diff",
|
|
@@ -1294,7 +1294,7 @@
|
|
|
1294
1294
|
]
|
|
1295
1295
|
}
|
|
1296
1296
|
],
|
|
1297
|
-
"usageExample": "import { useState } from \"react\";\
|
|
1297
|
+
"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}"
|
|
1298
1298
|
},
|
|
1299
1299
|
{
|
|
1300
1300
|
"name": "Kbd",
|
|
@@ -1316,7 +1316,7 @@
|
|
|
1316
1316
|
]
|
|
1317
1317
|
}
|
|
1318
1318
|
],
|
|
1319
|
-
"usageExample": "import { Kbd } from \"@wizeworks/silicaui-react\";\
|
|
1319
|
+
"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}"
|
|
1320
1320
|
},
|
|
1321
1321
|
{
|
|
1322
1322
|
"name": "List",
|
|
@@ -1350,7 +1350,7 @@
|
|
|
1350
1350
|
"members": []
|
|
1351
1351
|
}
|
|
1352
1352
|
],
|
|
1353
|
-
"usageExample": "import { List, ListRow, ListColGrow, ListTitle, Avatar, Button } from \"@wizeworks/silicaui-react\";\
|
|
1353
|
+
"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}"
|
|
1354
1354
|
},
|
|
1355
1355
|
{
|
|
1356
1356
|
"name": "Marquee",
|
|
@@ -1447,7 +1447,7 @@
|
|
|
1447
1447
|
]
|
|
1448
1448
|
}
|
|
1449
1449
|
],
|
|
1450
|
-
"usageExample": "import { MetadataList, MetadataItem, Badge, Avatar } from \"@wizeworks/silicaui-react\";\
|
|
1450
|
+
"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="stack" · 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}"
|
|
1451
1451
|
},
|
|
1452
1452
|
{
|
|
1453
1453
|
"name": "Meter",
|
|
@@ -1511,7 +1511,7 @@
|
|
|
1511
1511
|
]
|
|
1512
1512
|
}
|
|
1513
1513
|
],
|
|
1514
|
-
"usageExample": "import { Meter } from \"@wizeworks/silicaui-react\";\
|
|
1514
|
+
"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}"
|
|
1515
1515
|
},
|
|
1516
1516
|
{
|
|
1517
1517
|
"name": "MockupBrowser",
|
|
@@ -1858,7 +1858,7 @@
|
|
|
1858
1858
|
]
|
|
1859
1859
|
}
|
|
1860
1860
|
],
|
|
1861
|
-
"usageExample": "import { PreviewCard, Link, Avatar } from \"@wizeworks/silicaui-react\";\
|
|
1861
|
+
"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}"
|
|
1862
1862
|
},
|
|
1863
1863
|
{
|
|
1864
1864
|
"name": "SelectableCard",
|
|
@@ -1923,7 +1923,7 @@
|
|
|
1923
1923
|
"members": []
|
|
1924
1924
|
}
|
|
1925
1925
|
],
|
|
1926
|
-
"usageExample": "import {\
|
|
1926
|
+
"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}"
|
|
1927
1927
|
},
|
|
1928
1928
|
{
|
|
1929
1929
|
"name": "Table",
|
|
@@ -1963,7 +1963,7 @@
|
|
|
1963
1963
|
]
|
|
1964
1964
|
}
|
|
1965
1965
|
],
|
|
1966
|
-
"usageExample": "import { Table, Badge } from \"@wizeworks/silicaui-react\";\
|
|
1966
|
+
"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}"
|
|
1967
1967
|
},
|
|
1968
1968
|
{
|
|
1969
1969
|
"name": "Timeline",
|
|
@@ -2009,7 +2009,7 @@
|
|
|
2009
2009
|
]
|
|
2010
2010
|
}
|
|
2011
2011
|
],
|
|
2012
|
-
"usageExample": "import {\
|
|
2012
|
+
"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}"
|
|
2013
2013
|
},
|
|
2014
2014
|
{
|
|
2015
2015
|
"name": "Timestamp",
|
|
@@ -2049,7 +2049,7 @@
|
|
|
2049
2049
|
]
|
|
2050
2050
|
}
|
|
2051
2051
|
],
|
|
2052
|
-
"usageExample": "import { Timestamp } from \"@wizeworks/silicaui-react\";\
|
|
2052
|
+
"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}"
|
|
2053
2053
|
},
|
|
2054
2054
|
{
|
|
2055
2055
|
"name": "Autocomplete",
|
|
@@ -2325,7 +2325,7 @@
|
|
|
2325
2325
|
]
|
|
2326
2326
|
}
|
|
2327
2327
|
],
|
|
2328
|
-
"usageExample": "import { useState } from \"react\";\
|
|
2328
|
+
"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}"
|
|
2329
2329
|
},
|
|
2330
2330
|
{
|
|
2331
2331
|
"name": "Checkbox",
|
|
@@ -2336,7 +2336,7 @@
|
|
|
2336
2336
|
"props": [
|
|
2337
2337
|
{
|
|
2338
2338
|
"name": "CheckboxProps",
|
|
2339
|
-
"extends": "extends Omit<\
|
|
2339
|
+
"extends": "extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"color\" | \"type\"\n >",
|
|
2340
2340
|
"members": [
|
|
2341
2341
|
{
|
|
2342
2342
|
"name": "color",
|
|
@@ -2359,7 +2359,7 @@
|
|
|
2359
2359
|
]
|
|
2360
2360
|
}
|
|
2361
2361
|
],
|
|
2362
|
-
"usageExample": "import { useState } from \"react\";\
|
|
2362
|
+
"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}"
|
|
2363
2363
|
},
|
|
2364
2364
|
{
|
|
2365
2365
|
"name": "CheckboxGroup",
|
|
@@ -2447,7 +2447,7 @@
|
|
|
2447
2447
|
]
|
|
2448
2448
|
}
|
|
2449
2449
|
],
|
|
2450
|
-
"usageExample": "import { useState } from \"react\";\
|
|
2450
|
+
"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}"
|
|
2451
2451
|
},
|
|
2452
2452
|
{
|
|
2453
2453
|
"name": "CheckboxOption",
|
|
@@ -2593,7 +2593,7 @@
|
|
|
2593
2593
|
]
|
|
2594
2594
|
}
|
|
2595
2595
|
],
|
|
2596
|
-
"usageExample": "import { useState } from \"react\";\
|
|
2596
|
+
"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="swatch" · 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}"
|
|
2597
2597
|
},
|
|
2598
2598
|
{
|
|
2599
2599
|
"name": "Combobox",
|
|
@@ -2734,7 +2734,7 @@
|
|
|
2734
2734
|
{
|
|
2735
2735
|
"name": "popupProps",
|
|
2736
2736
|
"optional": true,
|
|
2737
|
-
"type": "React.ComponentProps<typeof BaseCombobox.Popup> & {\
|
|
2737
|
+
"type": "React.ComponentProps<typeof BaseCombobox.Popup> & {\n \"data-theme\"?: string;\n }",
|
|
2738
2738
|
"doc": "Extra props spread onto the popup surface — a portaled popup renders at document.body, OUTSIDE any `[data-theme]` island it was opened from, so a host with a scoped theme (e.g. a builder chrome) should pass `popupProps={{ \"data-theme\": \"…\" }}` to re-establish the theme tokens on the popup's own root (mirrors `Select`'s `popupProps`)."
|
|
2739
2739
|
},
|
|
2740
2740
|
{
|
|
@@ -2770,7 +2770,7 @@
|
|
|
2770
2770
|
]
|
|
2771
2771
|
}
|
|
2772
2772
|
],
|
|
2773
|
-
"usageExample": "import { useState } from \"react\";\
|
|
2773
|
+
"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}"
|
|
2774
2774
|
},
|
|
2775
2775
|
{
|
|
2776
2776
|
"name": "DateInput",
|
|
@@ -2928,7 +2928,7 @@
|
|
|
2928
2928
|
]
|
|
2929
2929
|
}
|
|
2930
2930
|
],
|
|
2931
|
-
"usageExample": "import { useState } from \"react\";\
|
|
2931
|
+
"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}"
|
|
2932
2932
|
},
|
|
2933
2933
|
{
|
|
2934
2934
|
"name": "DatePicker",
|
|
@@ -3717,7 +3717,7 @@
|
|
|
3717
3717
|
]
|
|
3718
3718
|
}
|
|
3719
3719
|
],
|
|
3720
|
-
"usageExample": "import { useState } from \"react\";\
|
|
3720
|
+
"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}"
|
|
3721
3721
|
},
|
|
3722
3722
|
{
|
|
3723
3723
|
"name": "Field",
|
|
@@ -3811,7 +3811,7 @@
|
|
|
3811
3811
|
]
|
|
3812
3812
|
}
|
|
3813
3813
|
],
|
|
3814
|
-
"usageExample": "import { useState } from \"react\";\
|
|
3814
|
+
"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}"
|
|
3815
3815
|
},
|
|
3816
3816
|
{
|
|
3817
3817
|
"name": "Fieldset",
|
|
@@ -3836,7 +3836,7 @@
|
|
|
3836
3836
|
"members": []
|
|
3837
3837
|
}
|
|
3838
3838
|
],
|
|
3839
|
-
"usageExample": "import { Fieldset, FieldsetLegend, FieldsetLabel, Input } from \"@wizeworks/silicaui-react\";\
|
|
3839
|
+
"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}"
|
|
3840
3840
|
},
|
|
3841
3841
|
{
|
|
3842
3842
|
"name": "FileInput",
|
|
@@ -3847,7 +3847,7 @@
|
|
|
3847
3847
|
"props": [
|
|
3848
3848
|
{
|
|
3849
3849
|
"name": "FileInputProps",
|
|
3850
|
-
"extends": "extends VoidElementProps<\
|
|
3850
|
+
"extends": "extends VoidElementProps<\n Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">\n >",
|
|
3851
3851
|
"members": [
|
|
3852
3852
|
{
|
|
3853
3853
|
"name": "size",
|
|
@@ -3858,7 +3858,7 @@
|
|
|
3858
3858
|
]
|
|
3859
3859
|
}
|
|
3860
3860
|
],
|
|
3861
|
-
"usageExample": "import { useState } from \"react\";\
|
|
3861
|
+
"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}"
|
|
3862
3862
|
},
|
|
3863
3863
|
{
|
|
3864
3864
|
"name": "FileUpload",
|
|
@@ -3910,7 +3910,7 @@
|
|
|
3910
3910
|
]
|
|
3911
3911
|
}
|
|
3912
3912
|
],
|
|
3913
|
-
"usageExample": "import { FileUpload } from \"@wizeworks/silicaui-react\";\
|
|
3913
|
+
"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}"
|
|
3914
3914
|
},
|
|
3915
3915
|
{
|
|
3916
3916
|
"name": "Filter",
|
|
@@ -3980,7 +3980,7 @@
|
|
|
3980
3980
|
]
|
|
3981
3981
|
}
|
|
3982
3982
|
],
|
|
3983
|
-
"usageExample": "import { useState } from \"react\";\
|
|
3983
|
+
"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}"
|
|
3984
3984
|
},
|
|
3985
3985
|
{
|
|
3986
3986
|
"name": "FloatingLabel",
|
|
@@ -4042,7 +4042,7 @@
|
|
|
4042
4042
|
]
|
|
4043
4043
|
}
|
|
4044
4044
|
],
|
|
4045
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4045
|
+
"usageExample": "import { useState } from \"react\";\nimport {\n Button,\n Field,\n FieldControl,\n FieldError,\n FieldLabel,\n Form,\n PasswordInput,\n ToggleGroup,\n ToggleGroupItem,\n} from \"@wizeworks/silicaui-react\";\nimport type { FormFocusOnError } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\ntype Errors = Record<string, string>;\n\n/**\n * `Form` runs each Field's validation on submit and moves focus to the first\n * invalid control. `focusOnError` decides how far that goes — the sign-in shape\n * below is where it matters, because the rejection arrives from a server long\n * after the user has moved on to the next field.\n */\nexport function FormDemo() {\n const [focusOnError, setFocusOnError] = useState<FormFocusOnError>(true);\n const [errors, setErrors] = useState<Errors>({});\n const [pending, setPending] = useState(false);\n\n function onSubmit(event: React.FormEvent<HTMLFormElement>) {\n event.preventDefault();\n setErrors({});\n setPending(true);\n // Stands in for a sign-in round trip. Type into the password field while\n // it runs: the caret has to stay put when the rejection lands.\n window.setTimeout(() => {\n setPending(false);\n setErrors({ email: \"That address isn't registered.\" });\n }, 1500);\n }\n\n return (\n <>\n <Section title=\"focusOnError\">\n <Stack className=\"max-w-sm\">\n <ToggleGroup\n size=\"sm\"\n value={[String(focusOnError)]}\n onValueChange={(v) => {\n const next = v[0];\n if (next == null) return; // clicking the active item can't clear it\n setFocusOnError(\n next === \"false\" ? false : next === \"scroll\" ? \"scroll\" : true,\n );\n }}\n >\n <ToggleGroupItem value=\"true\">true</ToggleGroupItem>\n <ToggleGroupItem value=\"scroll\">scroll</ToggleGroupItem>\n <ToggleGroupItem value=\"false\">false</ToggleGroupItem>\n </ToggleGroup>\n <p className=\"text-sm\">\n Submit with an invalid email to see the client-side path. For the\n async path, submit a <em>valid</em> address and keep typing your\n password during the 1.5s round trip — the rejection must not take\n the caret.\n </p>\n </Stack>\n </Section>\n\n <Section title=\"Sign in\">\n <Form\n errors={errors}\n focusOnError={focusOnError}\n onSubmit={onSubmit}\n className=\"grid max-w-sm gap-4\"\n >\n <Field name=\"email\">\n <FieldLabel required>Email</FieldLabel>\n <FieldControl\n type=\"email\"\n required\n placeholder=\"you@example.com\"\n data-testid=\"demo-email\"\n />\n <FieldError />\n </Field>\n <Field\n name=\"password\"\n validate={(v) =>\n String(v ?? \"\").length >= 8 ? null : \"Use at least 8 characters.\"\n }\n >\n <FieldLabel required>Password</FieldLabel>\n <FieldControl\n required\n render={<PasswordInput data-testid=\"demo-password\" />}\n />\n <FieldError />\n </Field>\n <Button type=\"submit\" color=\"primary\" loading={pending}>\n {pending ? \"Signing in…\" : \"Sign in\"}\n </Button>\n </Form>\n </Section>\n </>\n );\n}"
|
|
4046
4046
|
},
|
|
4047
4047
|
{
|
|
4048
4048
|
"name": "Input",
|
|
@@ -4053,7 +4053,7 @@
|
|
|
4053
4053
|
"props": [
|
|
4054
4054
|
{
|
|
4055
4055
|
"name": "InputProps",
|
|
4056
|
-
"extends": "extends VoidElementProps<\
|
|
4056
|
+
"extends": "extends VoidElementProps<\n Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"color\">\n >",
|
|
4057
4057
|
"members": [
|
|
4058
4058
|
{
|
|
4059
4059
|
"name": "color",
|
|
@@ -4070,7 +4070,7 @@
|
|
|
4070
4070
|
]
|
|
4071
4071
|
}
|
|
4072
4072
|
],
|
|
4073
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4073
|
+
"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}"
|
|
4074
4074
|
},
|
|
4075
4075
|
{
|
|
4076
4076
|
"name": "InputGroup",
|
|
@@ -4102,7 +4102,7 @@
|
|
|
4102
4102
|
"members": []
|
|
4103
4103
|
}
|
|
4104
4104
|
],
|
|
4105
|
-
"usageExample": "import { Input, InputGroup, InputGroupAddon } from \"@wizeworks/silicaui-react\";\
|
|
4105
|
+
"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}"
|
|
4106
4106
|
},
|
|
4107
4107
|
{
|
|
4108
4108
|
"name": "Join",
|
|
@@ -4124,7 +4124,7 @@
|
|
|
4124
4124
|
]
|
|
4125
4125
|
}
|
|
4126
4126
|
],
|
|
4127
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4127
|
+
"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}"
|
|
4128
4128
|
},
|
|
4129
4129
|
{
|
|
4130
4130
|
"name": "Label",
|
|
@@ -4164,7 +4164,7 @@
|
|
|
4164
4164
|
]
|
|
4165
4165
|
}
|
|
4166
4166
|
],
|
|
4167
|
-
"usageExample": "import { Label, FloatingLabel, Input } from \"@wizeworks/silicaui-react\";\
|
|
4167
|
+
"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}"
|
|
4168
4168
|
},
|
|
4169
4169
|
{
|
|
4170
4170
|
"name": "MultiSelect",
|
|
@@ -4335,7 +4335,7 @@
|
|
|
4335
4335
|
]
|
|
4336
4336
|
}
|
|
4337
4337
|
],
|
|
4338
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4338
|
+
"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}"
|
|
4339
4339
|
},
|
|
4340
4340
|
{
|
|
4341
4341
|
"name": "NativeSelect",
|
|
@@ -4385,7 +4385,7 @@
|
|
|
4385
4385
|
]
|
|
4386
4386
|
}
|
|
4387
4387
|
],
|
|
4388
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4388
|
+
"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}"
|
|
4389
4389
|
},
|
|
4390
4390
|
{
|
|
4391
4391
|
"name": "PasswordInput",
|
|
@@ -4396,7 +4396,7 @@
|
|
|
4396
4396
|
"props": [
|
|
4397
4397
|
{
|
|
4398
4398
|
"name": "PasswordInputProps",
|
|
4399
|
-
"extends": "extends VoidElementProps<\
|
|
4399
|
+
"extends": "extends VoidElementProps<\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"color\" | \"type\"\n >\n >",
|
|
4400
4400
|
"members": [
|
|
4401
4401
|
{
|
|
4402
4402
|
"name": "color",
|
|
@@ -4425,7 +4425,7 @@
|
|
|
4425
4425
|
]
|
|
4426
4426
|
}
|
|
4427
4427
|
],
|
|
4428
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4428
|
+
"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}"
|
|
4429
4429
|
},
|
|
4430
4430
|
{
|
|
4431
4431
|
"name": "PhoneInput",
|
|
@@ -4530,7 +4530,7 @@
|
|
|
4530
4530
|
]
|
|
4531
4531
|
}
|
|
4532
4532
|
],
|
|
4533
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4533
|
+
"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}"
|
|
4534
4534
|
},
|
|
4535
4535
|
{
|
|
4536
4536
|
"name": "PinInput",
|
|
@@ -4624,7 +4624,7 @@
|
|
|
4624
4624
|
]
|
|
4625
4625
|
}
|
|
4626
4626
|
],
|
|
4627
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4627
|
+
"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}"
|
|
4628
4628
|
},
|
|
4629
4629
|
{
|
|
4630
4630
|
"name": "Radio",
|
|
@@ -4635,7 +4635,7 @@
|
|
|
4635
4635
|
"props": [
|
|
4636
4636
|
{
|
|
4637
4637
|
"name": "RadioProps",
|
|
4638
|
-
"extends": "extends Omit<\
|
|
4638
|
+
"extends": "extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"color\" | \"type\"\n >",
|
|
4639
4639
|
"members": [
|
|
4640
4640
|
{
|
|
4641
4641
|
"name": "color",
|
|
@@ -4658,7 +4658,7 @@
|
|
|
4658
4658
|
]
|
|
4659
4659
|
}
|
|
4660
4660
|
],
|
|
4661
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4661
|
+
"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}"
|
|
4662
4662
|
},
|
|
4663
4663
|
{
|
|
4664
4664
|
"name": "RadioGroup",
|
|
@@ -4752,7 +4752,7 @@
|
|
|
4752
4752
|
]
|
|
4753
4753
|
}
|
|
4754
4754
|
],
|
|
4755
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4755
|
+
"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}"
|
|
4756
4756
|
},
|
|
4757
4757
|
{
|
|
4758
4758
|
"name": "RadioOption",
|
|
@@ -4868,7 +4868,7 @@
|
|
|
4868
4868
|
]
|
|
4869
4869
|
}
|
|
4870
4870
|
],
|
|
4871
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4871
|
+
"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}"
|
|
4872
4872
|
},
|
|
4873
4873
|
{
|
|
4874
4874
|
"name": "Rating",
|
|
@@ -4944,7 +4944,7 @@
|
|
|
4944
4944
|
]
|
|
4945
4945
|
}
|
|
4946
4946
|
],
|
|
4947
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4947
|
+
"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} onValueChange={setStars} />\n </LabeledRow>\n </Section>\n </>\n );\n}"
|
|
4948
4948
|
},
|
|
4949
4949
|
{
|
|
4950
4950
|
"name": "SearchInput",
|
|
@@ -4955,7 +4955,7 @@
|
|
|
4955
4955
|
"props": [
|
|
4956
4956
|
{
|
|
4957
4957
|
"name": "SearchInputProps",
|
|
4958
|
-
"extends": "extends VoidElementProps<\
|
|
4958
|
+
"extends": "extends VoidElementProps<\n Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"color\" | \"type\"\n >\n >",
|
|
4959
4959
|
"members": [
|
|
4960
4960
|
{
|
|
4961
4961
|
"name": "color",
|
|
@@ -4990,7 +4990,7 @@
|
|
|
4990
4990
|
]
|
|
4991
4991
|
}
|
|
4992
4992
|
],
|
|
4993
|
-
"usageExample": "import { useState } from \"react\";\
|
|
4993
|
+
"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}"
|
|
4994
4994
|
},
|
|
4995
4995
|
{
|
|
4996
4996
|
"name": "Select",
|
|
@@ -5131,7 +5131,7 @@
|
|
|
5131
5131
|
{
|
|
5132
5132
|
"name": "popupProps",
|
|
5133
5133
|
"optional": true,
|
|
5134
|
-
"type": "React.ComponentProps<typeof BaseSelect.Popup> & {\
|
|
5134
|
+
"type": "React.ComponentProps<typeof BaseSelect.Popup> & {\n [key: `data-${string}`]: string;\n }",
|
|
5135
5135
|
"doc": "Extra props spread onto the popup surface. The popup renders in a PORTAL at document.body, so when the Select lives inside a scoped `[data-theme]` island pass `popupProps={{ \"data-theme\": \"…\" }}` to re-establish the theme tokens (custom props inherit through the DOM, not the portal boundary)."
|
|
5136
5136
|
},
|
|
5137
5137
|
{
|
|
@@ -5161,7 +5161,7 @@
|
|
|
5161
5161
|
]
|
|
5162
5162
|
}
|
|
5163
5163
|
],
|
|
5164
|
-
"usageExample": "import { NativeSelect } from \"@wizeworks/silicaui-react\";\
|
|
5164
|
+
"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}"
|
|
5165
5165
|
},
|
|
5166
5166
|
{
|
|
5167
5167
|
"name": "SelectionList",
|
|
@@ -5207,7 +5207,7 @@
|
|
|
5207
5207
|
]
|
|
5208
5208
|
}
|
|
5209
5209
|
],
|
|
5210
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5210
|
+
"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}"
|
|
5211
5211
|
},
|
|
5212
5212
|
{
|
|
5213
5213
|
"name": "Slider",
|
|
@@ -5241,7 +5241,7 @@
|
|
|
5241
5241
|
]
|
|
5242
5242
|
}
|
|
5243
5243
|
],
|
|
5244
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5244
|
+
"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}"
|
|
5245
5245
|
},
|
|
5246
5246
|
{
|
|
5247
5247
|
"name": "Switch",
|
|
@@ -5269,7 +5269,7 @@
|
|
|
5269
5269
|
]
|
|
5270
5270
|
}
|
|
5271
5271
|
],
|
|
5272
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5272
|
+
"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}"
|
|
5273
5273
|
},
|
|
5274
5274
|
{
|
|
5275
5275
|
"name": "TagInput",
|
|
@@ -5357,7 +5357,7 @@
|
|
|
5357
5357
|
]
|
|
5358
5358
|
}
|
|
5359
5359
|
],
|
|
5360
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5360
|
+
"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}"
|
|
5361
5361
|
},
|
|
5362
5362
|
{
|
|
5363
5363
|
"name": "Textarea",
|
|
@@ -5385,7 +5385,7 @@
|
|
|
5385
5385
|
]
|
|
5386
5386
|
}
|
|
5387
5387
|
],
|
|
5388
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5388
|
+
"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}"
|
|
5389
5389
|
},
|
|
5390
5390
|
{
|
|
5391
5391
|
"name": "TimeInput",
|
|
@@ -5472,7 +5472,7 @@
|
|
|
5472
5472
|
]
|
|
5473
5473
|
}
|
|
5474
5474
|
],
|
|
5475
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5475
|
+
"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}"
|
|
5476
5476
|
},
|
|
5477
5477
|
{
|
|
5478
5478
|
"name": "Toggle",
|
|
@@ -5483,7 +5483,7 @@
|
|
|
5483
5483
|
"props": [
|
|
5484
5484
|
{
|
|
5485
5485
|
"name": "ToggleProps",
|
|
5486
|
-
"extends": "extends Omit<\
|
|
5486
|
+
"extends": "extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"size\" | \"color\" | \"type\"\n >",
|
|
5487
5487
|
"members": [
|
|
5488
5488
|
{
|
|
5489
5489
|
"name": "color",
|
|
@@ -5506,7 +5506,7 @@
|
|
|
5506
5506
|
]
|
|
5507
5507
|
}
|
|
5508
5508
|
],
|
|
5509
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5509
|
+
"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}"
|
|
5510
5510
|
},
|
|
5511
5511
|
{
|
|
5512
5512
|
"name": "ToggleGroup",
|
|
@@ -5524,7 +5524,7 @@
|
|
|
5524
5524
|
"members": []
|
|
5525
5525
|
}
|
|
5526
5526
|
],
|
|
5527
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5527
|
+
"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 <Section title=\"Sizes\">\n <div className=\"flex flex-wrap items-center gap-4\">\n {([\"xs\", \"sm\", \"md\", \"lg\"] as const).map((size) => (\n <ToggleGroup key={size} size={size} defaultValue={[\"grid\"]}>\n <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n </ToggleGroup>\n ))}\n </div>\n </Section>\n\n <Section title=\"Colored active pill\">\n <div className=\"flex flex-wrap items-center gap-4\">\n {([\"primary\", \"secondary\", \"accent\", \"success\"] as const).map((color) => (\n <ToggleGroup key={color} color={color} defaultValue={[\"grid\"]}>\n <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n </ToggleGroup>\n ))}\n </div>\n </Section>\n </>\n );\n}"
|
|
5528
5528
|
},
|
|
5529
5529
|
{
|
|
5530
5530
|
"name": "Validator",
|
|
@@ -5550,7 +5550,7 @@
|
|
|
5550
5550
|
"members": []
|
|
5551
5551
|
}
|
|
5552
5552
|
],
|
|
5553
|
-
"usageExample": "import { Validator, ValidatorHint, Input } from \"@wizeworks/silicaui-react\";\
|
|
5553
|
+
"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}"
|
|
5554
5554
|
},
|
|
5555
5555
|
{
|
|
5556
5556
|
"name": "Breadcrumb",
|
|
@@ -5565,7 +5565,7 @@
|
|
|
5565
5565
|
"members": []
|
|
5566
5566
|
}
|
|
5567
5567
|
],
|
|
5568
|
-
"usageExample": "import { Breadcrumb } from \"@wizeworks/silicaui-react\";\
|
|
5568
|
+
"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}"
|
|
5569
5569
|
},
|
|
5570
5570
|
{
|
|
5571
5571
|
"name": "Dock",
|
|
@@ -5603,7 +5603,7 @@
|
|
|
5603
5603
|
"members": []
|
|
5604
5604
|
}
|
|
5605
5605
|
],
|
|
5606
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5606
|
+
"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}"
|
|
5607
5607
|
},
|
|
5608
5608
|
{
|
|
5609
5609
|
"name": "Link",
|
|
@@ -5631,7 +5631,7 @@
|
|
|
5631
5631
|
]
|
|
5632
5632
|
}
|
|
5633
5633
|
],
|
|
5634
|
-
"usageExample": "import { Link } from \"@wizeworks/silicaui-react\";\
|
|
5634
|
+
"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}"
|
|
5635
5635
|
},
|
|
5636
5636
|
{
|
|
5637
5637
|
"name": "Menu",
|
|
@@ -5646,7 +5646,7 @@
|
|
|
5646
5646
|
"members": []
|
|
5647
5647
|
}
|
|
5648
5648
|
],
|
|
5649
|
-
"usageExample": "import { Menu, MenuItem, MenuTitle } from \"@wizeworks/silicaui-react\";\
|
|
5649
|
+
"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}"
|
|
5650
5650
|
},
|
|
5651
5651
|
{
|
|
5652
5652
|
"name": "Menubar",
|
|
@@ -5694,7 +5694,7 @@
|
|
|
5694
5694
|
]
|
|
5695
5695
|
}
|
|
5696
5696
|
],
|
|
5697
|
-
"usageExample": "import {\
|
|
5697
|
+
"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}"
|
|
5698
5698
|
},
|
|
5699
5699
|
{
|
|
5700
5700
|
"name": "Navbar",
|
|
@@ -5708,7 +5708,7 @@
|
|
|
5708
5708
|
"members": []
|
|
5709
5709
|
}
|
|
5710
5710
|
],
|
|
5711
|
-
"usageExample": "import { Navbar, NavbarStart, NavbarCenter, NavbarEnd, Button } from \"@wizeworks/silicaui-react\";\
|
|
5711
|
+
"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}"
|
|
5712
5712
|
},
|
|
5713
5713
|
{
|
|
5714
5714
|
"name": "NavigationMenu",
|
|
@@ -5764,7 +5764,7 @@
|
|
|
5764
5764
|
"members": []
|
|
5765
5765
|
}
|
|
5766
5766
|
],
|
|
5767
|
-
"usageExample": "import {\
|
|
5767
|
+
"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}"
|
|
5768
5768
|
},
|
|
5769
5769
|
{
|
|
5770
5770
|
"name": "Outline",
|
|
@@ -5804,7 +5804,7 @@
|
|
|
5804
5804
|
]
|
|
5805
5805
|
}
|
|
5806
5806
|
],
|
|
5807
|
-
"usageExample": "import { useRef } from \"react\";\
|
|
5807
|
+
"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}"
|
|
5808
5808
|
},
|
|
5809
5809
|
{
|
|
5810
5810
|
"name": "OverflowList",
|
|
@@ -5855,7 +5855,7 @@
|
|
|
5855
5855
|
]
|
|
5856
5856
|
}
|
|
5857
5857
|
],
|
|
5858
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5858
|
+
"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}"
|
|
5859
5859
|
},
|
|
5860
5860
|
{
|
|
5861
5861
|
"name": "Pagination",
|
|
@@ -5925,7 +5925,7 @@
|
|
|
5925
5925
|
]
|
|
5926
5926
|
}
|
|
5927
5927
|
],
|
|
5928
|
-
"usageExample": "import { useState } from \"react\";\
|
|
5928
|
+
"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 onValueChange={() => {}}\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 onValueChange={() => {}}\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 onValueChange={setPage}\n />\n </div>\n </Section>\n </>\n );\n}"
|
|
5929
5929
|
},
|
|
5930
5930
|
{
|
|
5931
5931
|
"name": "Sidebar",
|
|
@@ -6053,7 +6053,7 @@
|
|
|
6053
6053
|
"members": []
|
|
6054
6054
|
}
|
|
6055
6055
|
],
|
|
6056
|
-
"usageExample": "import { useState } from \"react\";\
|
|
6056
|
+
"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}"
|
|
6057
6057
|
},
|
|
6058
6058
|
{
|
|
6059
6059
|
"name": "Steps",
|
|
@@ -6086,7 +6086,7 @@
|
|
|
6086
6086
|
]
|
|
6087
6087
|
}
|
|
6088
6088
|
],
|
|
6089
|
-
"usageExample": "import { useState } from \"react\";\
|
|
6089
|
+
"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}"
|
|
6090
6090
|
},
|
|
6091
6091
|
{
|
|
6092
6092
|
"name": "Tabs",
|
|
@@ -6132,7 +6132,7 @@
|
|
|
6132
6132
|
]
|
|
6133
6133
|
}
|
|
6134
6134
|
],
|
|
6135
|
-
"usageExample": "import {\
|
|
6135
|
+
"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}"
|
|
6136
6136
|
},
|
|
6137
6137
|
{
|
|
6138
6138
|
"name": "Alert",
|
|
@@ -6202,7 +6202,7 @@
|
|
|
6202
6202
|
]
|
|
6203
6203
|
}
|
|
6204
6204
|
],
|
|
6205
|
-
"usageExample": "import { useState } from \"react\";\
|
|
6205
|
+
"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}"
|
|
6206
6206
|
},
|
|
6207
6207
|
{
|
|
6208
6208
|
"name": "AlertDialog",
|
|
@@ -6239,7 +6239,7 @@
|
|
|
6239
6239
|
]
|
|
6240
6240
|
}
|
|
6241
6241
|
],
|
|
6242
|
-
"usageExample": "import {\
|
|
6242
|
+
"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}"
|
|
6243
6243
|
},
|
|
6244
6244
|
{
|
|
6245
6245
|
"name": "ContextMenu",
|
|
@@ -6325,7 +6325,7 @@
|
|
|
6325
6325
|
]
|
|
6326
6326
|
}
|
|
6327
6327
|
],
|
|
6328
|
-
"usageExample": "import {\
|
|
6328
|
+
"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 <div>\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 </div>\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="glass"</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}"
|
|
6329
6329
|
},
|
|
6330
6330
|
{
|
|
6331
6331
|
"name": "Drawer",
|
|
@@ -6387,7 +6387,7 @@
|
|
|
6387
6387
|
]
|
|
6388
6388
|
}
|
|
6389
6389
|
],
|
|
6390
|
-
"usageExample": "import {\
|
|
6390
|
+
"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}"
|
|
6391
6391
|
},
|
|
6392
6392
|
{
|
|
6393
6393
|
"name": "ImperativeAlertDialogProvider",
|
|
@@ -6441,7 +6441,7 @@
|
|
|
6441
6441
|
]
|
|
6442
6442
|
}
|
|
6443
6443
|
],
|
|
6444
|
-
"usageExample": "import { Indicator, IndicatorItem, Badge, Button, Status } from \"@wizeworks/silicaui-react\";\
|
|
6444
|
+
"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}"
|
|
6445
6445
|
},
|
|
6446
6446
|
{
|
|
6447
6447
|
"name": "Lightbox",
|
|
@@ -6492,7 +6492,7 @@
|
|
|
6492
6492
|
]
|
|
6493
6493
|
}
|
|
6494
6494
|
],
|
|
6495
|
-
"usageExample": "import { useState } from \"react\";\
|
|
6495
|
+
"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}"
|
|
6496
6496
|
},
|
|
6497
6497
|
{
|
|
6498
6498
|
"name": "Loading",
|
|
@@ -6520,7 +6520,7 @@
|
|
|
6520
6520
|
]
|
|
6521
6521
|
}
|
|
6522
6522
|
],
|
|
6523
|
-
"usageExample": "import { Loading, Button } from \"@wizeworks/silicaui-react\";\
|
|
6523
|
+
"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}"
|
|
6524
6524
|
},
|
|
6525
6525
|
{
|
|
6526
6526
|
"name": "Overlay",
|
|
@@ -6560,7 +6560,7 @@
|
|
|
6560
6560
|
]
|
|
6561
6561
|
}
|
|
6562
6562
|
],
|
|
6563
|
-
"usageExample": "import { Overlay, Badge, Button } from \"@wizeworks/silicaui-react\";\
|
|
6563
|
+
"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="hover" · 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}"
|
|
6564
6564
|
},
|
|
6565
6565
|
{
|
|
6566
6566
|
"name": "Popover",
|
|
@@ -6610,7 +6610,7 @@
|
|
|
6610
6610
|
]
|
|
6611
6611
|
}
|
|
6612
6612
|
],
|
|
6613
|
-
"usageExample": "import {\
|
|
6613
|
+
"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="glass"</code> — the\n gradient behind it shows through the blur.\n </PopoverDescription>\n </PopoverContent>\n </Popover>\n </div>\n </Section>\n </>\n );\n}"
|
|
6614
6614
|
},
|
|
6615
6615
|
{
|
|
6616
6616
|
"name": "Progress",
|
|
@@ -6668,7 +6668,7 @@
|
|
|
6668
6668
|
]
|
|
6669
6669
|
}
|
|
6670
6670
|
],
|
|
6671
|
-
"usageExample": "import { useState, useEffect } from \"react\";\
|
|
6671
|
+
"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}"
|
|
6672
6672
|
},
|
|
6673
6673
|
{
|
|
6674
6674
|
"name": "RadialProgress",
|
|
@@ -6708,7 +6708,7 @@
|
|
|
6708
6708
|
]
|
|
6709
6709
|
}
|
|
6710
6710
|
],
|
|
6711
|
-
"usageExample": "import { useState, useEffect } from \"react\";\
|
|
6711
|
+
"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\" diameter=\"3rem\" thickness=\"0.35rem\" />\n <RadialProgress value={60} color=\"primary\" diameter=\"5rem\" thickness=\"0.5rem\" />\n <RadialProgress value={60} color=\"primary\" diameter=\"8rem\" thickness=\"0.75rem\" />\n </Row>\n </Section>\n\n <Section title=\"Real use · animated upload progress\">\n <RadialProgress value={pct} color=\"brand\" diameter=\"6rem\" />\n </Section>\n </>\n );\n}"
|
|
6712
6712
|
},
|
|
6713
6713
|
{
|
|
6714
6714
|
"name": "Skeleton",
|
|
@@ -6730,7 +6730,7 @@
|
|
|
6730
6730
|
]
|
|
6731
6731
|
}
|
|
6732
6732
|
],
|
|
6733
|
-
"usageExample": "import { Skeleton } from \"@wizeworks/silicaui-react\";\
|
|
6733
|
+
"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}"
|
|
6734
6734
|
},
|
|
6735
6735
|
{
|
|
6736
6736
|
"name": "Status",
|
|
@@ -6770,7 +6770,7 @@
|
|
|
6770
6770
|
]
|
|
6771
6771
|
}
|
|
6772
6772
|
],
|
|
6773
|
-
"usageExample": "import { Status } from \"@wizeworks/silicaui-react\";\
|
|
6773
|
+
"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}"
|
|
6774
6774
|
},
|
|
6775
6775
|
{
|
|
6776
6776
|
"name": "ToastProvider",
|
|
@@ -6881,7 +6881,7 @@
|
|
|
6881
6881
|
"members": []
|
|
6882
6882
|
}
|
|
6883
6883
|
],
|
|
6884
|
-
"usageExample": "import { Tooltip, TooltipProvider, Button } from \"@wizeworks/silicaui-react\";\
|
|
6884
|
+
"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}"
|
|
6885
6885
|
},
|
|
6886
6886
|
{
|
|
6887
6887
|
"name": "AppShell",
|
|
@@ -6911,7 +6911,7 @@
|
|
|
6911
6911
|
"members": []
|
|
6912
6912
|
}
|
|
6913
6913
|
],
|
|
6914
|
-
"usageExample": "import { useState } from \"react\";\
|
|
6914
|
+
"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}"
|
|
6915
6915
|
},
|
|
6916
6916
|
{
|
|
6917
6917
|
"name": "Divider",
|
|
@@ -6933,7 +6933,7 @@
|
|
|
6933
6933
|
]
|
|
6934
6934
|
}
|
|
6935
6935
|
],
|
|
6936
|
-
"usageExample": "import { Divider, Button } from \"@wizeworks/silicaui-react\";\
|
|
6936
|
+
"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}"
|
|
6937
6937
|
},
|
|
6938
6938
|
{
|
|
6939
6939
|
"name": "Footer",
|
|
@@ -6959,7 +6959,7 @@
|
|
|
6959
6959
|
"members": []
|
|
6960
6960
|
}
|
|
6961
6961
|
],
|
|
6962
|
-
"usageExample": "import { Footer, FooterTitle, Link } from \"@wizeworks/silicaui-react\";\
|
|
6962
|
+
"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}"
|
|
6963
6963
|
},
|
|
6964
6964
|
{
|
|
6965
6965
|
"name": "Hero",
|
|
@@ -6973,7 +6973,7 @@
|
|
|
6973
6973
|
"members": []
|
|
6974
6974
|
}
|
|
6975
6975
|
],
|
|
6976
|
-
"usageExample": "import { Hero, HeroContent, HeroOverlay, Button } from \"@wizeworks/silicaui-react\";\
|
|
6976
|
+
"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}"
|
|
6977
6977
|
},
|
|
6978
6978
|
{
|
|
6979
6979
|
"name": "Mask",
|
|
@@ -6995,7 +6995,7 @@
|
|
|
6995
6995
|
]
|
|
6996
6996
|
}
|
|
6997
6997
|
],
|
|
6998
|
-
"usageExample": "import { Mask } from \"@wizeworks/silicaui-react\";\
|
|
6998
|
+
"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}"
|
|
6999
6999
|
},
|
|
7000
7000
|
{
|
|
7001
7001
|
"name": "ScrollArea",
|
|
@@ -7017,7 +7017,7 @@
|
|
|
7017
7017
|
]
|
|
7018
7018
|
}
|
|
7019
7019
|
],
|
|
7020
|
-
"usageExample": "import { ScrollArea } from \"@wizeworks/silicaui-react\";\
|
|
7020
|
+
"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}"
|
|
7021
7021
|
},
|
|
7022
7022
|
{
|
|
7023
7023
|
"name": "Stack",
|
|
@@ -7095,7 +7095,7 @@
|
|
|
7095
7095
|
]
|
|
7096
7096
|
}
|
|
7097
7097
|
],
|
|
7098
|
-
"usageExample": "import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from \"@wizeworks/silicaui-react\";\
|
|
7098
|
+
"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}"
|
|
7099
7099
|
},
|
|
7100
7100
|
{
|
|
7101
7101
|
"name": "CommandPalette",
|
|
@@ -7158,7 +7158,7 @@
|
|
|
7158
7158
|
]
|
|
7159
7159
|
}
|
|
7160
7160
|
],
|
|
7161
|
-
"usageExample": "import { useState } from \"react\";\
|
|
7161
|
+
"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}"
|
|
7162
7162
|
},
|
|
7163
7163
|
{
|
|
7164
7164
|
"name": "Dropzone",
|
|
@@ -7234,7 +7234,7 @@
|
|
|
7234
7234
|
]
|
|
7235
7235
|
}
|
|
7236
7236
|
],
|
|
7237
|
-
"usageExample": "import { useState } from \"react\";\
|
|
7237
|
+
"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}"
|
|
7238
7238
|
},
|
|
7239
7239
|
{
|
|
7240
7240
|
"name": "EmptyState",
|
|
@@ -7280,7 +7280,7 @@
|
|
|
7280
7280
|
]
|
|
7281
7281
|
}
|
|
7282
7282
|
],
|
|
7283
|
-
"usageExample": "import { EmptyState, Button } from \"@wizeworks/silicaui-react\";\
|
|
7283
|
+
"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}"
|
|
7284
7284
|
},
|
|
7285
7285
|
{
|
|
7286
7286
|
"name": "PowerSearch",
|
|
@@ -7378,7 +7378,7 @@
|
|
|
7378
7378
|
]
|
|
7379
7379
|
}
|
|
7380
7380
|
],
|
|
7381
|
-
"usageExample": "import { PowerSearch, usePowerSearchConfig, Button, type PowerSearchFieldDef } from \"@wizeworks/silicaui-react\";\
|
|
7381
|
+
"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}"
|
|
7382
7382
|
},
|
|
7383
7383
|
{
|
|
7384
7384
|
"name": "ThemeController",
|
|
@@ -7499,7 +7499,7 @@
|
|
|
7499
7499
|
"members": []
|
|
7500
7500
|
}
|
|
7501
7501
|
],
|
|
7502
|
-
"usageExample": "import { useState } from \"react\";\
|
|
7502
|
+
"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}"
|
|
7503
7503
|
},
|
|
7504
7504
|
{
|
|
7505
7505
|
"name": "TreeView",
|
|
@@ -7575,7 +7575,7 @@
|
|
|
7575
7575
|
]
|
|
7576
7576
|
}
|
|
7577
7577
|
],
|
|
7578
|
-
"usageExample": "import { useState } from \"react\";\
|
|
7578
|
+
"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}"
|
|
7579
7579
|
},
|
|
7580
7580
|
{
|
|
7581
7581
|
"name": "Wizard",
|
|
@@ -7669,7 +7669,7 @@
|
|
|
7669
7669
|
]
|
|
7670
7670
|
}
|
|
7671
7671
|
],
|
|
7672
|
-
"usageExample": "import { useState } from \"react\";\
|
|
7672
|
+
"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}"
|
|
7673
7673
|
},
|
|
7674
7674
|
{
|
|
7675
7675
|
"name": "Blockquote",
|
|
@@ -7985,7 +7985,7 @@
|
|
|
7985
7985
|
]
|
|
7986
7986
|
}
|
|
7987
7987
|
],
|
|
7988
|
-
"usageExample": "import { Prose } from \"@wizeworks/silicaui-react\";\
|
|
7988
|
+
"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="{size}"</code> rescales the whole block\n by one root font-size.\n </p>\n </Prose>\n ))}\n </div>\n </Section>\n </>\n );\n}"
|
|
7989
7989
|
},
|
|
7990
7990
|
{
|
|
7991
7991
|
"name": "Text",
|
|
@@ -8133,7 +8133,7 @@
|
|
|
8133
8133
|
"members": []
|
|
8134
8134
|
}
|
|
8135
8135
|
],
|
|
8136
|
-
"usageExample": "import { Wordmark, WordmarkAccent } from \"@wizeworks/silicaui-react\";\
|
|
8136
|
+
"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}"
|
|
8137
8137
|
},
|
|
8138
8138
|
{
|
|
8139
8139
|
"name": "Chart",
|
|
@@ -8179,7 +8179,7 @@
|
|
|
8179
8179
|
]
|
|
8180
8180
|
}
|
|
8181
8181
|
],
|
|
8182
|
-
"usageExample": "import { Chart, Sparkline } from \"@wizeworks/silicaui-charts\";\
|
|
8182
|
+
"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}"
|
|
8183
8183
|
},
|
|
8184
8184
|
{
|
|
8185
8185
|
"name": "Sparkline",
|
|
@@ -8342,7 +8342,7 @@
|
|
|
8342
8342
|
]
|
|
8343
8343
|
}
|
|
8344
8344
|
],
|
|
8345
|
-
"usageExample": "import { useState } from \"react\";\
|
|
8345
|
+
"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}"
|
|
8346
8346
|
},
|
|
8347
8347
|
{
|
|
8348
8348
|
"name": "RichTextEditor",
|
|
@@ -8405,7 +8405,7 @@
|
|
|
8405
8405
|
]
|
|
8406
8406
|
}
|
|
8407
8407
|
],
|
|
8408
|
-
"usageExample": "import { useState } from \"react\";\
|
|
8408
|
+
"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}"
|
|
8409
8409
|
},
|
|
8410
8410
|
{
|
|
8411
8411
|
"name": "SortableList",
|
|
@@ -8460,7 +8460,7 @@
|
|
|
8460
8460
|
]
|
|
8461
8461
|
}
|
|
8462
8462
|
],
|
|
8463
|
-
"usageExample": "import { useState } from \"react\";\
|
|
8463
|
+
"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}"
|
|
8464
8464
|
},
|
|
8465
8465
|
{
|
|
8466
8466
|
"name": "ResizablePanels",
|
|
@@ -8475,7 +8475,7 @@
|
|
|
8475
8475
|
"members": []
|
|
8476
8476
|
}
|
|
8477
8477
|
],
|
|
8478
|
-
"usageExample": "import {\
|
|
8478
|
+
"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}"
|
|
8479
8479
|
},
|
|
8480
8480
|
{
|
|
8481
8481
|
"name": "Button",
|
|
@@ -8485,7 +8485,8 @@
|
|
|
8485
8485
|
"icon": "button",
|
|
8486
8486
|
"container": false,
|
|
8487
8487
|
"behaviors": [],
|
|
8488
|
-
"
|
|
8488
|
+
"doc": "Button — a <button>, or an <a> when it carries an href; label is text sugar.",
|
|
8489
|
+
"sourceFile": "silicaui-html/src/component.ts:615"
|
|
8489
8490
|
},
|
|
8490
8491
|
{
|
|
8491
8492
|
"name": "Image",
|
|
@@ -8495,7 +8496,8 @@
|
|
|
8495
8496
|
"icon": "image",
|
|
8496
8497
|
"container": false,
|
|
8497
8498
|
"behaviors": [],
|
|
8498
|
-
"
|
|
8499
|
+
"doc": "Image — a self-closing <img>; `ratio` maps to an aspect utility appended to the class, then the whole string is prefixed as normal.",
|
|
8500
|
+
"sourceFile": "silicaui-html/src/component.ts:635"
|
|
8499
8501
|
},
|
|
8500
8502
|
{
|
|
8501
8503
|
"name": "Video",
|
|
@@ -8505,7 +8507,8 @@
|
|
|
8505
8507
|
"icon": "video",
|
|
8506
8508
|
"container": false,
|
|
8507
8509
|
"behaviors": [],
|
|
8508
|
-
"
|
|
8510
|
+
"doc": "Video — a native <video>; `ratio` maps to an aspect utility like Image. A single `src` renders on the element; `props.sources` (`{src,type}[]`) OR authored children (hand-authored <source>/<track>) render nested instead, so the browser can pick a format. Boolean playback props follow the `=== true` convention every other boolean prop uses (the inspector toggle writes `undefined` when off), so a freshly-dropped Video seeds `controls: true`.",
|
|
8511
|
+
"sourceFile": "silicaui-html/src/component.ts:668"
|
|
8509
8512
|
},
|
|
8510
8513
|
{
|
|
8511
8514
|
"name": "Embed",
|
|
@@ -8515,7 +8518,76 @@
|
|
|
8515
8518
|
"icon": "video",
|
|
8516
8519
|
"container": false,
|
|
8517
8520
|
"behaviors": [],
|
|
8518
|
-
"
|
|
8521
|
+
"doc": "Embed — a curated third-party player (YouTube / Vimeo / Google Maps / Spotify / SoundCloud / Apple Music + Podcasts / Bandcamp / the podcast hosts). The ONLY component that emits an <iframe>, and only to an allowlisted host, in a sandbox, via `rawHtml` (so it bypasses the floor that downgrades arbitrary authored iframes to <div>). `props.url` is normalized by `resolveEmbed`; anything it does not recognize as FRAMEABLE falls back to a plain link — never a raw iframe. See embed.ts for why that distinction is the whole job.",
|
|
8522
|
+
"providers": [
|
|
8523
|
+
{
|
|
8524
|
+
"name": "YouTube",
|
|
8525
|
+
"kind": "video",
|
|
8526
|
+
"example": "https://www.youtube.com/watch?v=VIDEO_ID"
|
|
8527
|
+
},
|
|
8528
|
+
{
|
|
8529
|
+
"name": "Vimeo",
|
|
8530
|
+
"kind": "video",
|
|
8531
|
+
"example": "https://vimeo.com/123456789"
|
|
8532
|
+
},
|
|
8533
|
+
{
|
|
8534
|
+
"name": "Google Maps",
|
|
8535
|
+
"kind": "map",
|
|
8536
|
+
"example": "https://www.google.com/maps/embed?pb=…",
|
|
8537
|
+
"embedUrlOnly": true
|
|
8538
|
+
},
|
|
8539
|
+
{
|
|
8540
|
+
"name": "Spotify",
|
|
8541
|
+
"kind": "audio",
|
|
8542
|
+
"example": "https://open.spotify.com/track/TRACK_ID"
|
|
8543
|
+
},
|
|
8544
|
+
{
|
|
8545
|
+
"name": "SoundCloud",
|
|
8546
|
+
"kind": "audio",
|
|
8547
|
+
"example": "https://soundcloud.com/artist/track"
|
|
8548
|
+
},
|
|
8549
|
+
{
|
|
8550
|
+
"name": "Apple Music",
|
|
8551
|
+
"kind": "audio",
|
|
8552
|
+
"example": "https://music.apple.com/us/album/name/1441164426"
|
|
8553
|
+
},
|
|
8554
|
+
{
|
|
8555
|
+
"name": "Apple Podcasts",
|
|
8556
|
+
"kind": "podcast",
|
|
8557
|
+
"example": "https://podcasts.apple.com/us/podcast/name/id1200361736"
|
|
8558
|
+
},
|
|
8559
|
+
{
|
|
8560
|
+
"name": "Bandcamp",
|
|
8561
|
+
"kind": "audio",
|
|
8562
|
+
"example": "https://bandcamp.com/EmbeddedPlayer/album=123456789/size=large/",
|
|
8563
|
+
"embedUrlOnly": true
|
|
8564
|
+
},
|
|
8565
|
+
{
|
|
8566
|
+
"name": "Simplecast",
|
|
8567
|
+
"kind": "podcast",
|
|
8568
|
+
"example": "https://player.simplecast.com/EPISODE_ID",
|
|
8569
|
+
"embedUrlOnly": true
|
|
8570
|
+
},
|
|
8571
|
+
{
|
|
8572
|
+
"name": "Megaphone",
|
|
8573
|
+
"kind": "podcast",
|
|
8574
|
+
"example": "https://player.megaphone.fm/EPISODE_ID",
|
|
8575
|
+
"embedUrlOnly": true
|
|
8576
|
+
},
|
|
8577
|
+
{
|
|
8578
|
+
"name": "Transistor",
|
|
8579
|
+
"kind": "podcast",
|
|
8580
|
+
"example": "https://share.transistor.fm/e/EPISODE_ID",
|
|
8581
|
+
"embedUrlOnly": true
|
|
8582
|
+
},
|
|
8583
|
+
{
|
|
8584
|
+
"name": "Buzzsprout",
|
|
8585
|
+
"kind": "podcast",
|
|
8586
|
+
"example": "https://www.buzzsprout.com/123456/9876543?iframe=true",
|
|
8587
|
+
"embedUrlOnly": true
|
|
8588
|
+
}
|
|
8589
|
+
],
|
|
8590
|
+
"sourceFile": "silicaui-html/src/component.ts:712"
|
|
8519
8591
|
},
|
|
8520
8592
|
{
|
|
8521
8593
|
"name": "Heading",
|
|
@@ -8525,7 +8597,8 @@
|
|
|
8525
8597
|
"icon": "heading",
|
|
8526
8598
|
"container": false,
|
|
8527
8599
|
"behaviors": [],
|
|
8528
|
-
"
|
|
8600
|
+
"doc": "Heading — <h1>…<h6> from props.level (default 2, clamped).",
|
|
8601
|
+
"sourceFile": "silicaui-html/src/component.ts:759"
|
|
8529
8602
|
},
|
|
8530
8603
|
{
|
|
8531
8604
|
"name": "Icon",
|
|
@@ -8535,7 +8608,8 @@
|
|
|
8535
8608
|
"icon": "box",
|
|
8536
8609
|
"container": false,
|
|
8537
8610
|
"behaviors": [],
|
|
8538
|
-
"
|
|
8611
|
+
"doc": "Icon — an inline <span> carrying its name for a runtime/icon font to resolve.",
|
|
8612
|
+
"sourceFile": "silicaui-html/src/component.ts:771"
|
|
8539
8613
|
},
|
|
8540
8614
|
{
|
|
8541
8615
|
"name": "Divider",
|
|
@@ -8545,7 +8619,8 @@
|
|
|
8545
8619
|
"icon": "box",
|
|
8546
8620
|
"container": false,
|
|
8547
8621
|
"behaviors": [],
|
|
8548
|
-
"
|
|
8622
|
+
"doc": "Divider — a void <hr>.",
|
|
8623
|
+
"sourceFile": "silicaui-html/src/component.ts:782"
|
|
8549
8624
|
},
|
|
8550
8625
|
{
|
|
8551
8626
|
"name": "Link",
|
|
@@ -8555,7 +8630,8 @@
|
|
|
8555
8630
|
"icon": "link",
|
|
8556
8631
|
"container": true,
|
|
8557
8632
|
"behaviors": [],
|
|
8558
|
-
"
|
|
8633
|
+
"doc": "Link — a styled inline <a>. Static output had no way to author one at all, so every link in a projected page had to be a raw element node.",
|
|
8634
|
+
"sourceFile": "silicaui-html/src/component.ts:786"
|
|
8559
8635
|
},
|
|
8560
8636
|
{
|
|
8561
8637
|
"name": "Input",
|
|
@@ -8565,7 +8641,8 @@
|
|
|
8565
8641
|
"icon": "input",
|
|
8566
8642
|
"container": false,
|
|
8567
8643
|
"behaviors": [],
|
|
8568
|
-
"
|
|
8644
|
+
"doc": "── form controls ───────────────────────────────────────────────────────── Each lowers to a native form element, so the browser's built-in behavior + accessibility come for free and the Phase 2 form contract wires the same tags. Input — a single-line <input>; props.type picks the mode (default 'text').",
|
|
8645
|
+
"sourceFile": "silicaui-html/src/component.ts:805"
|
|
8569
8646
|
},
|
|
8570
8647
|
{
|
|
8571
8648
|
"name": "FileInput",
|
|
@@ -8575,7 +8652,8 @@
|
|
|
8575
8652
|
"icon": "input",
|
|
8576
8653
|
"container": false,
|
|
8577
8654
|
"behaviors": [],
|
|
8578
|
-
"
|
|
8655
|
+
"doc": "FileInput — an <input type=\"file\">. `type` is fixed, so it isn't reachable through Input's props.type the way the other field modes are.",
|
|
8656
|
+
"sourceFile": "silicaui-html/src/component.ts:817"
|
|
8579
8657
|
},
|
|
8580
8658
|
{
|
|
8581
8659
|
"name": "FloatingLabel",
|
|
@@ -8585,7 +8663,8 @@
|
|
|
8585
8663
|
"icon": "label",
|
|
8586
8664
|
"container": true,
|
|
8587
8665
|
"behaviors": [],
|
|
8588
|
-
"
|
|
8666
|
+
"doc": "FloatingLabel — <label> wrapping the control, caption LAST (the CSS floats it via the control's :placeholder-shown, which needs the sibling order the React component also produces: control first, caption second).",
|
|
8667
|
+
"sourceFile": "silicaui-html/src/component.ts:830"
|
|
8589
8668
|
},
|
|
8590
8669
|
{
|
|
8591
8670
|
"name": "Textarea",
|
|
@@ -8595,7 +8674,8 @@
|
|
|
8595
8674
|
"icon": "textarea",
|
|
8596
8675
|
"container": false,
|
|
8597
8676
|
"behaviors": [],
|
|
8598
|
-
"
|
|
8677
|
+
"doc": "Textarea — a multi-line <textarea>; text/children are its value.",
|
|
8678
|
+
"sourceFile": "silicaui-html/src/component.ts:844"
|
|
8599
8679
|
},
|
|
8600
8680
|
{
|
|
8601
8681
|
"name": "Select",
|
|
@@ -8605,7 +8685,8 @@
|
|
|
8605
8685
|
"icon": "select",
|
|
8606
8686
|
"container": false,
|
|
8607
8687
|
"behaviors": [],
|
|
8608
|
-
"
|
|
8688
|
+
"doc": "Select — a native <select>; options come from props.options (or child nodes).",
|
|
8689
|
+
"sourceFile": "silicaui-html/src/component.ts:856"
|
|
8609
8690
|
},
|
|
8610
8691
|
{
|
|
8611
8692
|
"name": "Checkbox",
|
|
@@ -8615,7 +8696,8 @@
|
|
|
8615
8696
|
"icon": "checkbox",
|
|
8616
8697
|
"container": true,
|
|
8617
8698
|
"behaviors": [],
|
|
8618
|
-
"
|
|
8699
|
+
"doc": "Checkbox / Radio / Toggle — native <input>s of the matching type. Toggle shares checkbox semantics; only its class (`toggle`) plus role=\"switch\" makes it a switch.",
|
|
8700
|
+
"sourceFile": "silicaui-html/src/component.ts:873"
|
|
8619
8701
|
},
|
|
8620
8702
|
{
|
|
8621
8703
|
"name": "Radio",
|
|
@@ -8625,7 +8707,7 @@
|
|
|
8625
8707
|
"icon": "radio",
|
|
8626
8708
|
"container": true,
|
|
8627
8709
|
"behaviors": [],
|
|
8628
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
8710
|
+
"sourceFile": "silicaui-html/src/component.ts:881"
|
|
8629
8711
|
},
|
|
8630
8712
|
{
|
|
8631
8713
|
"name": "Toggle",
|
|
@@ -8635,7 +8717,7 @@
|
|
|
8635
8717
|
"icon": "toggle",
|
|
8636
8718
|
"container": true,
|
|
8637
8719
|
"behaviors": [],
|
|
8638
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
8720
|
+
"sourceFile": "silicaui-html/src/component.ts:889"
|
|
8639
8721
|
},
|
|
8640
8722
|
{
|
|
8641
8723
|
"name": "Text",
|
|
@@ -8645,7 +8727,8 @@
|
|
|
8645
8727
|
"icon": "text",
|
|
8646
8728
|
"container": false,
|
|
8647
8729
|
"behaviors": [],
|
|
8648
|
-
"
|
|
8730
|
+
"doc": "Simple element atoms.",
|
|
8731
|
+
"sourceFile": "silicaui-html/src/component.ts:898"
|
|
8649
8732
|
},
|
|
8650
8733
|
{
|
|
8651
8734
|
"name": "Badge",
|
|
@@ -8655,7 +8738,8 @@
|
|
|
8655
8738
|
"icon": "label",
|
|
8656
8739
|
"container": false,
|
|
8657
8740
|
"behaviors": [],
|
|
8658
|
-
"
|
|
8741
|
+
"doc": "Badge — lowers to `<span>`, carrying `props.text` as its content.",
|
|
8742
|
+
"sourceFile": "silicaui-html/src/component.ts:899"
|
|
8659
8743
|
},
|
|
8660
8744
|
{
|
|
8661
8745
|
"name": "Wordmark",
|
|
@@ -8665,7 +8749,8 @@
|
|
|
8665
8749
|
"icon": "wordmark",
|
|
8666
8750
|
"container": true,
|
|
8667
8751
|
"behaviors": [],
|
|
8668
|
-
"
|
|
8752
|
+
"doc": "Wordmark — the brand lockup: an optional MARK (logo image or a slotted svg/Icon child) beside the brand name. It was `elementDef(…, \"span\")` — text-only, container:false — while its CSS (`& :is(svg,img)` sizing) and its React wrapper (`<Wordmark as=\"a\"><LogoMark/>Acme</Wordmark>`) both already assumed a mark. The schema is the layer the builder reads, so the builder won and \"put the logo in the wordmark\" was impossible by construction. Two paths, one DOM: nest a child (the power path), or set `src` (the one-control Inspector path). `primary: \"text\"` keeps a bare bind on the NAME — without it, adding `src` would make a bound site name fill the image URL instead.",
|
|
8753
|
+
"sourceFile": "silicaui-html/src/component.ts:910"
|
|
8669
8754
|
},
|
|
8670
8755
|
{
|
|
8671
8756
|
"name": "Card",
|
|
@@ -8675,7 +8760,8 @@
|
|
|
8675
8760
|
"icon": "box",
|
|
8676
8761
|
"container": true,
|
|
8677
8762
|
"behaviors": [],
|
|
8678
|
-
"
|
|
8763
|
+
"doc": "Card — lowers to `<div>`, holding its children.",
|
|
8764
|
+
"sourceFile": "silicaui-html/src/component.ts:940"
|
|
8679
8765
|
},
|
|
8680
8766
|
{
|
|
8681
8767
|
"name": "SelectableCard",
|
|
@@ -8685,7 +8771,8 @@
|
|
|
8685
8771
|
"icon": "box",
|
|
8686
8772
|
"container": true,
|
|
8687
8773
|
"behaviors": [],
|
|
8688
|
-
"
|
|
8774
|
+
"doc": "SelectableCard — a card that IS an option tile: a real (visually hidden) radio/checkbox inside a <label>, so the whole card is the click target and the selection posts with the form. Matches the React component's DOM.",
|
|
8775
|
+
"sourceFile": "silicaui-html/src/component.ts:945"
|
|
8689
8776
|
},
|
|
8690
8777
|
{
|
|
8691
8778
|
"name": "Section",
|
|
@@ -8695,7 +8782,8 @@
|
|
|
8695
8782
|
"icon": "section",
|
|
8696
8783
|
"container": true,
|
|
8697
8784
|
"behaviors": [],
|
|
8698
|
-
"
|
|
8785
|
+
"doc": "Section — lowers to `<section>`, holding its children.",
|
|
8786
|
+
"sourceFile": "silicaui-html/src/component.ts:964"
|
|
8699
8787
|
},
|
|
8700
8788
|
{
|
|
8701
8789
|
"name": "Container",
|
|
@@ -8705,7 +8793,8 @@
|
|
|
8705
8793
|
"icon": "box",
|
|
8706
8794
|
"container": true,
|
|
8707
8795
|
"behaviors": [],
|
|
8708
|
-
"
|
|
8796
|
+
"doc": "Container — lowers to `<div>`, holding its children.",
|
|
8797
|
+
"sourceFile": "silicaui-html/src/component.ts:965"
|
|
8709
8798
|
},
|
|
8710
8799
|
{
|
|
8711
8800
|
"name": "Grid",
|
|
@@ -8715,7 +8804,8 @@
|
|
|
8715
8804
|
"icon": "grid",
|
|
8716
8805
|
"container": true,
|
|
8717
8806
|
"behaviors": [],
|
|
8718
|
-
"
|
|
8807
|
+
"doc": "Grid — lowers to `<div>`, holding its children.",
|
|
8808
|
+
"sourceFile": "silicaui-html/src/component.ts:966"
|
|
8719
8809
|
},
|
|
8720
8810
|
{
|
|
8721
8811
|
"name": "Stack",
|
|
@@ -8725,7 +8815,8 @@
|
|
|
8725
8815
|
"icon": "stack",
|
|
8726
8816
|
"container": true,
|
|
8727
8817
|
"behaviors": [],
|
|
8728
|
-
"
|
|
8818
|
+
"doc": "Stack — lowers to `<div>`, holding its children.",
|
|
8819
|
+
"sourceFile": "silicaui-html/src/component.ts:967"
|
|
8729
8820
|
},
|
|
8730
8821
|
{
|
|
8731
8822
|
"name": "Loading",
|
|
@@ -8735,7 +8826,8 @@
|
|
|
8735
8826
|
"icon": "loading",
|
|
8736
8827
|
"container": false,
|
|
8737
8828
|
"behaviors": [],
|
|
8738
|
-
"
|
|
8829
|
+
"doc": "Feedback leaves — colorless status surfaces (class carries size/variant).",
|
|
8830
|
+
"sourceFile": "silicaui-html/src/component.ts:969"
|
|
8739
8831
|
},
|
|
8740
8832
|
{
|
|
8741
8833
|
"name": "Skeleton",
|
|
@@ -8745,7 +8837,8 @@
|
|
|
8745
8837
|
"icon": "box",
|
|
8746
8838
|
"container": false,
|
|
8747
8839
|
"behaviors": [],
|
|
8748
|
-
"
|
|
8840
|
+
"doc": "Skeleton — lowers to `<div>`, carrying `props.text` as its content.",
|
|
8841
|
+
"sourceFile": "silicaui-html/src/component.ts:970"
|
|
8749
8842
|
},
|
|
8750
8843
|
{
|
|
8751
8844
|
"name": "Status",
|
|
@@ -8755,7 +8848,8 @@
|
|
|
8755
8848
|
"icon": "dot",
|
|
8756
8849
|
"container": false,
|
|
8757
8850
|
"behaviors": [],
|
|
8758
|
-
"
|
|
8851
|
+
"doc": "Status — lowers to `<span>`, carrying `props.text` as its content.",
|
|
8852
|
+
"sourceFile": "silicaui-html/src/component.ts:971"
|
|
8759
8853
|
},
|
|
8760
8854
|
{
|
|
8761
8855
|
"name": "Kbd",
|
|
@@ -8765,7 +8859,8 @@
|
|
|
8765
8859
|
"icon": "kbd",
|
|
8766
8860
|
"container": false,
|
|
8767
8861
|
"behaviors": [],
|
|
8768
|
-
"
|
|
8862
|
+
"doc": "Kbd — lowers to `<kbd>`, carrying `props.text` as its content.",
|
|
8863
|
+
"sourceFile": "silicaui-html/src/component.ts:972"
|
|
8769
8864
|
},
|
|
8770
8865
|
{
|
|
8771
8866
|
"name": "Navbar",
|
|
@@ -8775,7 +8870,8 @@
|
|
|
8775
8870
|
"icon": "header",
|
|
8776
8871
|
"container": true,
|
|
8777
8872
|
"behaviors": [],
|
|
8778
|
-
"
|
|
8873
|
+
"doc": "Navbar / Table — structural containers (children authored in the tree).",
|
|
8874
|
+
"sourceFile": "silicaui-html/src/component.ts:974"
|
|
8779
8875
|
},
|
|
8780
8876
|
{
|
|
8781
8877
|
"name": "Table",
|
|
@@ -8785,7 +8881,8 @@
|
|
|
8785
8881
|
"icon": "table",
|
|
8786
8882
|
"container": true,
|
|
8787
8883
|
"behaviors": [],
|
|
8788
|
-
"
|
|
8884
|
+
"doc": "Table — lowers to `<table>`, holding its children.",
|
|
8885
|
+
"sourceFile": "silicaui-html/src/component.ts:975"
|
|
8789
8886
|
},
|
|
8790
8887
|
{
|
|
8791
8888
|
"name": "Field",
|
|
@@ -8795,7 +8892,8 @@
|
|
|
8795
8892
|
"icon": "label",
|
|
8796
8893
|
"container": true,
|
|
8797
8894
|
"behaviors": [],
|
|
8798
|
-
"
|
|
8895
|
+
"doc": "Field — a form-row container (label + control as children).",
|
|
8896
|
+
"sourceFile": "silicaui-html/src/component.ts:977"
|
|
8799
8897
|
},
|
|
8800
8898
|
{
|
|
8801
8899
|
"name": "Form",
|
|
@@ -8807,7 +8905,8 @@
|
|
|
8807
8905
|
"behaviors": [
|
|
8808
8906
|
"form"
|
|
8809
8907
|
],
|
|
8810
|
-
"
|
|
8908
|
+
"doc": "Form — a <form> that ALWAYS lowers with the `form` behavior marker so a published form is functional (validate + submit) with zero author wiring. `props.action` names the host action a valid submit dispatches to; an explicitly-set behavior/data on the node is respected and never overwritten.",
|
|
8909
|
+
"sourceFile": "silicaui-html/src/component.ts:983"
|
|
8811
8910
|
},
|
|
8812
8911
|
{
|
|
8813
8912
|
"name": "Sidebar",
|
|
@@ -8819,7 +8918,8 @@
|
|
|
8819
8918
|
"behaviors": [
|
|
8820
8919
|
"sidebar"
|
|
8821
8920
|
],
|
|
8822
|
-
"
|
|
8921
|
+
"doc": "Sidebar — a persistent nav panel (`<aside>`) that collapses in place to an icon rail, unlike Drawer (which overlays and dismisses). Always carries the `sidebar` behavior so a `SidebarTrigger` nested anywhere inside it works with zero authored wiring; `props.defaultCollapsed` seeds the initial state.",
|
|
8922
|
+
"sourceFile": "silicaui-html/src/component.ts:1002"
|
|
8823
8923
|
},
|
|
8824
8924
|
{
|
|
8825
8925
|
"name": "SidebarTrigger",
|
|
@@ -8829,7 +8929,8 @@
|
|
|
8829
8929
|
"icon": "sidebarTrigger",
|
|
8830
8930
|
"container": false,
|
|
8831
8931
|
"behaviors": [],
|
|
8832
|
-
"
|
|
8932
|
+
"doc": "SidebarTrigger — the sidebar's collapse/expand button. A structural PART (`trigger`), not a behavior root itself — it must be authored somewhere inside the `Sidebar` it controls (e.g. its header).",
|
|
8933
|
+
"sourceFile": "silicaui-html/src/component.ts:1023"
|
|
8833
8934
|
},
|
|
8834
8935
|
{
|
|
8835
8936
|
"name": "SelectionList",
|
|
@@ -8841,7 +8942,8 @@
|
|
|
8841
8942
|
"behaviors": [
|
|
8842
8943
|
"selection-list"
|
|
8843
8944
|
],
|
|
8844
|
-
"
|
|
8945
|
+
"doc": "SelectionList — a selectable listbox (single- or multi-select), items driven by props (not authored children, like Breadcrumb/Steps). Always carries the `selection-list` behavior so it's clickable/keyboard-navigable once published, with zero authored wiring. `props.items`: `{id, label, description?}[]` (or plain strings); `props.multiple`; `props.selected`: array of selected ids.",
|
|
8946
|
+
"sourceFile": "silicaui-html/src/component.ts:1040"
|
|
8845
8947
|
},
|
|
8846
8948
|
{
|
|
8847
8949
|
"name": "Breadcrumb",
|
|
@@ -8851,7 +8953,8 @@
|
|
|
8851
8953
|
"icon": "breadcrumb",
|
|
8852
8954
|
"container": false,
|
|
8853
8955
|
"behaviors": [],
|
|
8854
|
-
"
|
|
8956
|
+
"doc": "── navigation ───────────────────────────────────────────────────────────── Breadcrumb — a <nav class=\"breadcrumb\"> wrapping an <ol>; each item is a link, the last marked aria-current=\"page\". Items come from props.items (strings).",
|
|
8957
|
+
"sourceFile": "silicaui-html/src/component.ts:1099"
|
|
8855
8958
|
},
|
|
8856
8959
|
{
|
|
8857
8960
|
"name": "Menu",
|
|
@@ -8861,7 +8964,8 @@
|
|
|
8861
8964
|
"icon": "nav",
|
|
8862
8965
|
"container": false,
|
|
8863
8966
|
"behaviors": [],
|
|
8864
|
-
"
|
|
8967
|
+
"doc": "Menu — a vertical <ul class=\"menu\"> of link items (sidebars / popover bodies).",
|
|
8968
|
+
"sourceFile": "silicaui-html/src/component.ts:1116"
|
|
8865
8969
|
},
|
|
8866
8970
|
{
|
|
8867
8971
|
"name": "Steps",
|
|
@@ -8871,7 +8975,8 @@
|
|
|
8871
8975
|
"icon": "steps",
|
|
8872
8976
|
"container": false,
|
|
8873
8977
|
"behaviors": [],
|
|
8874
|
-
"
|
|
8978
|
+
"doc": "Steps — a <ul class=\"steps\"> tracker; items up to props.current are `-primary` (read as completed). Both from props.",
|
|
8979
|
+
"sourceFile": "silicaui-html/src/component.ts:1130"
|
|
8875
8980
|
},
|
|
8876
8981
|
{
|
|
8877
8982
|
"name": "Pagination",
|
|
@@ -8881,7 +8986,8 @@
|
|
|
8881
8986
|
"icon": "pagination",
|
|
8882
8987
|
"container": false,
|
|
8883
8988
|
"behaviors": [],
|
|
8884
|
-
"
|
|
8989
|
+
"doc": "Pagination — a joined button row (1…props.pages), the first marked active.",
|
|
8990
|
+
"sourceFile": "silicaui-html/src/component.ts:1145"
|
|
8885
8991
|
},
|
|
8886
8992
|
{
|
|
8887
8993
|
"name": "Alert",
|
|
@@ -8891,7 +8997,8 @@
|
|
|
8891
8997
|
"icon": "warning",
|
|
8892
8998
|
"container": false,
|
|
8893
8999
|
"behaviors": [],
|
|
8894
|
-
"
|
|
9000
|
+
"doc": "── feedback ─────────────────────────────────────────────────────────────── Alert — a role=\"alert\" surface; its children (or text prop) sit in the flex row.",
|
|
9001
|
+
"sourceFile": "silicaui-html/src/component.ts:1166"
|
|
8895
9002
|
},
|
|
8896
9003
|
{
|
|
8897
9004
|
"name": "Progress",
|
|
@@ -8901,7 +9008,8 @@
|
|
|
8901
9008
|
"icon": "progress",
|
|
8902
9009
|
"container": false,
|
|
8903
9010
|
"behaviors": [],
|
|
8904
|
-
"
|
|
9011
|
+
"doc": "Progress — a track div + a fill div whose LITERAL width utility encodes value.",
|
|
9012
|
+
"sourceFile": "silicaui-html/src/component.ts:1197"
|
|
8905
9013
|
},
|
|
8906
9014
|
{
|
|
8907
9015
|
"name": "Stat",
|
|
@@ -8911,7 +9019,8 @@
|
|
|
8911
9019
|
"icon": "stat",
|
|
8912
9020
|
"container": false,
|
|
8913
9021
|
"behaviors": [],
|
|
8914
|
-
"
|
|
9022
|
+
"doc": "── data display ─────────────────────────────────────────────────────────── Stat — a .stats container holding one .stat (title / value / desc from props).",
|
|
9023
|
+
"sourceFile": "silicaui-html/src/component.ts:1210"
|
|
8915
9024
|
},
|
|
8916
9025
|
{
|
|
8917
9026
|
"name": "Avatar",
|
|
@@ -8921,7 +9030,8 @@
|
|
|
8921
9030
|
"icon": "avatar",
|
|
8922
9031
|
"container": false,
|
|
8923
9032
|
"behaviors": [],
|
|
8924
|
-
"
|
|
9033
|
+
"doc": "Avatar — a single .avatar div whose inner <img> rounds via inherited radius.",
|
|
9034
|
+
"sourceFile": "silicaui-html/src/component.ts:1225"
|
|
8925
9035
|
},
|
|
8926
9036
|
{
|
|
8927
9037
|
"name": "Collapse",
|
|
@@ -8931,7 +9041,8 @@
|
|
|
8931
9041
|
"icon": "collapse",
|
|
8932
9042
|
"container": false,
|
|
8933
9043
|
"behaviors": [],
|
|
8934
|
-
"
|
|
9044
|
+
"doc": "Collapse — a native <details> disclosure (works with zero JS on publish). Not a container: its body is `props.content` (text). `expand` still honors authored children as the body for direct toHtml use, but the builder edits it as a prop. Root class is author-supplied (see palette.ts) and should be `details`, NOT `collapse` — Tailwind v4's built-in `.collapse` utility (`visibility: collapse`) wins over any component rule of that name and silently hides the whole thing; see the doc comment in @wizeworks/silicaui/src/components/collapse.js for the full story.",
|
|
9045
|
+
"sourceFile": "silicaui-html/src/component.ts:1247"
|
|
8935
9046
|
},
|
|
8936
9047
|
{
|
|
8937
9048
|
"name": "Timeline",
|
|
@@ -8941,7 +9052,8 @@
|
|
|
8941
9052
|
"icon": "timeline",
|
|
8942
9053
|
"container": false,
|
|
8943
9054
|
"behaviors": [],
|
|
8944
|
-
"
|
|
9055
|
+
"doc": "Timeline — a <ul class=\"timeline\"> of events (marker + content per item).",
|
|
9056
|
+
"sourceFile": "silicaui-html/src/component.ts:1263"
|
|
8945
9057
|
},
|
|
8946
9058
|
{
|
|
8947
9059
|
"name": "Label",
|
|
@@ -8951,7 +9063,8 @@
|
|
|
8951
9063
|
"icon": "label",
|
|
8952
9064
|
"container": false,
|
|
8953
9065
|
"behaviors": [],
|
|
8954
|
-
"
|
|
9066
|
+
"doc": "── structural/presentational catch-up (2026-07-08 sync pass) ────────────── Plain element atoms — same shape as `elementDef`, one tag each, no behavior. Sub-parts that carry no semantic tag of their own (a styled <div>/<span> — Card's CardBody/CardTitle, Hero's HeroContent, etc.) are deliberately NOT registered here: a host authors them as plain class-carrying children, per the confirmed Card precedent. Only parts with real semantic value (a distinct tag, or \"part\" behavior metadata) get their own atom.",
|
|
9067
|
+
"sourceFile": "silicaui-html/src/component.ts:1285"
|
|
8955
9068
|
},
|
|
8956
9069
|
{
|
|
8957
9070
|
"name": "AvatarGroup",
|
|
@@ -8961,7 +9074,8 @@
|
|
|
8961
9074
|
"icon": "avatar",
|
|
8962
9075
|
"container": true,
|
|
8963
9076
|
"behaviors": [],
|
|
8964
|
-
"
|
|
9077
|
+
"doc": "AvatarGroup — lowers to `<span>`, holding its children.",
|
|
9078
|
+
"sourceFile": "silicaui-html/src/component.ts:1286"
|
|
8965
9079
|
},
|
|
8966
9080
|
{
|
|
8967
9081
|
"name": "Prose",
|
|
@@ -8971,7 +9085,8 @@
|
|
|
8971
9085
|
"icon": "text",
|
|
8972
9086
|
"container": true,
|
|
8973
9087
|
"behaviors": [],
|
|
8974
|
-
"
|
|
9088
|
+
"doc": "Prose — lowers to `<div>`, holding its children.",
|
|
9089
|
+
"sourceFile": "silicaui-html/src/component.ts:1287"
|
|
8975
9090
|
},
|
|
8976
9091
|
{
|
|
8977
9092
|
"name": "RichText",
|
|
@@ -8981,7 +9096,8 @@
|
|
|
8981
9096
|
"icon": "text",
|
|
8982
9097
|
"container": true,
|
|
8983
9098
|
"behaviors": [],
|
|
8984
|
-
"
|
|
9099
|
+
"doc": "RichText — a `.prose` container for TRUSTED rich-text / CMS long-form HTML. Authored children render as-is; pair it with an `html` data binding and `resolveTree` fills its inner HTML from the host-sanitized resolved value (see NodeBase.rawHtml). This is the data-bound content-page primitive.",
|
|
9100
|
+
"sourceFile": "silicaui-html/src/component.ts:1293"
|
|
8985
9101
|
},
|
|
8986
9102
|
{
|
|
8987
9103
|
"name": "Hero",
|
|
@@ -8991,7 +9107,8 @@
|
|
|
8991
9107
|
"icon": "box",
|
|
8992
9108
|
"container": true,
|
|
8993
9109
|
"behaviors": [],
|
|
8994
|
-
"
|
|
9110
|
+
"doc": "Hero — lowers to `<div>`, holding its children.",
|
|
9111
|
+
"sourceFile": "silicaui-html/src/component.ts:1300"
|
|
8995
9112
|
},
|
|
8996
9113
|
{
|
|
8997
9114
|
"name": "Footer",
|
|
@@ -9001,7 +9118,8 @@
|
|
|
9001
9118
|
"icon": "box",
|
|
9002
9119
|
"container": true,
|
|
9003
9120
|
"behaviors": [],
|
|
9004
|
-
"
|
|
9121
|
+
"doc": "Footer — lowers to `<footer>`, holding its children.",
|
|
9122
|
+
"sourceFile": "silicaui-html/src/component.ts:1301"
|
|
9005
9123
|
},
|
|
9006
9124
|
{
|
|
9007
9125
|
"name": "FooterTitle",
|
|
@@ -9011,7 +9129,8 @@
|
|
|
9011
9129
|
"icon": "heading",
|
|
9012
9130
|
"container": false,
|
|
9013
9131
|
"behaviors": [],
|
|
9014
|
-
"
|
|
9132
|
+
"doc": "FooterTitle — lowers to `<h6>`, carrying `props.text` as its content.",
|
|
9133
|
+
"sourceFile": "silicaui-html/src/component.ts:1302"
|
|
9015
9134
|
},
|
|
9016
9135
|
{
|
|
9017
9136
|
"name": "MockupWindow",
|
|
@@ -9021,7 +9140,8 @@
|
|
|
9021
9140
|
"icon": "box",
|
|
9022
9141
|
"container": true,
|
|
9023
9142
|
"behaviors": [],
|
|
9024
|
-
"
|
|
9143
|
+
"doc": "MockupWindow — lowers to `<div>`, holding its children.",
|
|
9144
|
+
"sourceFile": "silicaui-html/src/component.ts:1303"
|
|
9025
9145
|
},
|
|
9026
9146
|
{
|
|
9027
9147
|
"name": "MockupBrowser",
|
|
@@ -9031,7 +9151,8 @@
|
|
|
9031
9151
|
"icon": "box",
|
|
9032
9152
|
"container": true,
|
|
9033
9153
|
"behaviors": [],
|
|
9034
|
-
"
|
|
9154
|
+
"doc": "MockupBrowser — lowers to `<div>`, holding its children.",
|
|
9155
|
+
"sourceFile": "silicaui-html/src/component.ts:1304"
|
|
9035
9156
|
},
|
|
9036
9157
|
{
|
|
9037
9158
|
"name": "MockupCode",
|
|
@@ -9041,7 +9162,8 @@
|
|
|
9041
9162
|
"icon": "box",
|
|
9042
9163
|
"container": true,
|
|
9043
9164
|
"behaviors": [],
|
|
9044
|
-
"
|
|
9165
|
+
"doc": "MockupCode — lowers to `<div>`, holding its children.",
|
|
9166
|
+
"sourceFile": "silicaui-html/src/component.ts:1305"
|
|
9045
9167
|
},
|
|
9046
9168
|
{
|
|
9047
9169
|
"name": "MockupCodeLine",
|
|
@@ -9051,7 +9173,8 @@
|
|
|
9051
9173
|
"icon": "box",
|
|
9052
9174
|
"container": true,
|
|
9053
9175
|
"behaviors": [],
|
|
9054
|
-
"
|
|
9176
|
+
"doc": "MockupCodeLine — a <pre> row inside MockupCode. The gutter marker is a real `data-prefix` attribute the CSS reads, not text content.",
|
|
9177
|
+
"sourceFile": "silicaui-html/src/component.ts:1309"
|
|
9055
9178
|
},
|
|
9056
9179
|
{
|
|
9057
9180
|
"name": "MockupPhone",
|
|
@@ -9061,7 +9184,8 @@
|
|
|
9061
9184
|
"icon": "box",
|
|
9062
9185
|
"container": true,
|
|
9063
9186
|
"behaviors": [],
|
|
9064
|
-
"
|
|
9187
|
+
"doc": "MockupPhone — lowers to `<div>`, holding its children.",
|
|
9188
|
+
"sourceFile": "silicaui-html/src/component.ts:1320"
|
|
9065
9189
|
},
|
|
9066
9190
|
{
|
|
9067
9191
|
"name": "List",
|
|
@@ -9071,7 +9195,8 @@
|
|
|
9071
9195
|
"icon": "box",
|
|
9072
9196
|
"container": true,
|
|
9073
9197
|
"behaviors": [],
|
|
9074
|
-
"
|
|
9198
|
+
"doc": "List — lowers to `<div>`, holding its children.",
|
|
9199
|
+
"sourceFile": "silicaui-html/src/component.ts:1321"
|
|
9075
9200
|
},
|
|
9076
9201
|
{
|
|
9077
9202
|
"name": "Dock",
|
|
@@ -9081,7 +9206,8 @@
|
|
|
9081
9206
|
"icon": "sidebar",
|
|
9082
9207
|
"container": true,
|
|
9083
9208
|
"behaviors": [],
|
|
9084
|
-
"
|
|
9209
|
+
"doc": "Dock — lowers to `<div>`, holding its children.",
|
|
9210
|
+
"sourceFile": "silicaui-html/src/component.ts:1322"
|
|
9085
9211
|
},
|
|
9086
9212
|
{
|
|
9087
9213
|
"name": "Join",
|
|
@@ -9091,7 +9217,8 @@
|
|
|
9091
9217
|
"icon": "box",
|
|
9092
9218
|
"container": true,
|
|
9093
9219
|
"behaviors": [],
|
|
9094
|
-
"
|
|
9220
|
+
"doc": "Join — lowers to `<div>`, holding its children.",
|
|
9221
|
+
"sourceFile": "silicaui-html/src/component.ts:1323"
|
|
9095
9222
|
},
|
|
9096
9223
|
{
|
|
9097
9224
|
"name": "Indicator",
|
|
@@ -9101,7 +9228,8 @@
|
|
|
9101
9228
|
"icon": "dot",
|
|
9102
9229
|
"container": true,
|
|
9103
9230
|
"behaviors": [],
|
|
9104
|
-
"
|
|
9231
|
+
"doc": "Indicator — lowers to `<span>`, holding its children.",
|
|
9232
|
+
"sourceFile": "silicaui-html/src/component.ts:1324"
|
|
9105
9233
|
},
|
|
9106
9234
|
{
|
|
9107
9235
|
"name": "Mask",
|
|
@@ -9111,7 +9239,8 @@
|
|
|
9111
9239
|
"icon": "box",
|
|
9112
9240
|
"container": true,
|
|
9113
9241
|
"behaviors": [],
|
|
9114
|
-
"
|
|
9242
|
+
"doc": "Mask — lowers to `<div>`, holding its children.",
|
|
9243
|
+
"sourceFile": "silicaui-html/src/component.ts:1325"
|
|
9115
9244
|
},
|
|
9116
9245
|
{
|
|
9117
9246
|
"name": "Fieldset",
|
|
@@ -9121,7 +9250,8 @@
|
|
|
9121
9250
|
"icon": "box",
|
|
9122
9251
|
"container": true,
|
|
9123
9252
|
"behaviors": [],
|
|
9124
|
-
"
|
|
9253
|
+
"doc": "Fieldset — lowers to `<fieldset>`, holding its children.",
|
|
9254
|
+
"sourceFile": "silicaui-html/src/component.ts:1326"
|
|
9125
9255
|
},
|
|
9126
9256
|
{
|
|
9127
9257
|
"name": "FieldsetLegend",
|
|
@@ -9131,7 +9261,8 @@
|
|
|
9131
9261
|
"icon": "label",
|
|
9132
9262
|
"container": false,
|
|
9133
9263
|
"behaviors": [],
|
|
9134
|
-
"
|
|
9264
|
+
"doc": "FieldsetLegend — lowers to `<legend>`, carrying `props.text` as its content.",
|
|
9265
|
+
"sourceFile": "silicaui-html/src/component.ts:1327"
|
|
9135
9266
|
},
|
|
9136
9267
|
{
|
|
9137
9268
|
"name": "Blockquote",
|
|
@@ -9141,7 +9272,8 @@
|
|
|
9141
9272
|
"icon": "text",
|
|
9142
9273
|
"container": true,
|
|
9143
9274
|
"behaviors": [],
|
|
9144
|
-
"
|
|
9275
|
+
"doc": "Blockquote — lowers to `<blockquote>`, holding its children.",
|
|
9276
|
+
"sourceFile": "silicaui-html/src/component.ts:1328"
|
|
9145
9277
|
},
|
|
9146
9278
|
{
|
|
9147
9279
|
"name": "BlockquoteCite",
|
|
@@ -9151,7 +9283,8 @@
|
|
|
9151
9283
|
"icon": "text",
|
|
9152
9284
|
"container": false,
|
|
9153
9285
|
"behaviors": [],
|
|
9154
|
-
"
|
|
9286
|
+
"doc": "BlockquoteCite — lowers to `<footer>`, carrying `props.text` as its content.",
|
|
9287
|
+
"sourceFile": "silicaui-html/src/component.ts:1329"
|
|
9155
9288
|
},
|
|
9156
9289
|
{
|
|
9157
9290
|
"name": "MetadataList",
|
|
@@ -9161,7 +9294,8 @@
|
|
|
9161
9294
|
"icon": "box",
|
|
9162
9295
|
"container": true,
|
|
9163
9296
|
"behaviors": [],
|
|
9164
|
-
"
|
|
9297
|
+
"doc": "MetadataList — lowers to `<dl>`, holding its children.",
|
|
9298
|
+
"sourceFile": "silicaui-html/src/component.ts:1330"
|
|
9165
9299
|
},
|
|
9166
9300
|
{
|
|
9167
9301
|
"name": "AppShell",
|
|
@@ -9171,7 +9305,8 @@
|
|
|
9171
9305
|
"icon": "box",
|
|
9172
9306
|
"container": true,
|
|
9173
9307
|
"behaviors": [],
|
|
9174
|
-
"
|
|
9308
|
+
"doc": "AppShell — lowers to `<div>`, holding its children.",
|
|
9309
|
+
"sourceFile": "silicaui-html/src/component.ts:1331"
|
|
9175
9310
|
},
|
|
9176
9311
|
{
|
|
9177
9312
|
"name": "AppShellSidebar",
|
|
@@ -9181,7 +9316,8 @@
|
|
|
9181
9316
|
"icon": "sidebar",
|
|
9182
9317
|
"container": true,
|
|
9183
9318
|
"behaviors": [],
|
|
9184
|
-
"
|
|
9319
|
+
"doc": "AppShellSidebar — lowers to `<aside>`, holding its children.",
|
|
9320
|
+
"sourceFile": "silicaui-html/src/component.ts:1332"
|
|
9185
9321
|
},
|
|
9186
9322
|
{
|
|
9187
9323
|
"name": "AppShellHeader",
|
|
@@ -9191,7 +9327,8 @@
|
|
|
9191
9327
|
"icon": "header",
|
|
9192
9328
|
"container": true,
|
|
9193
9329
|
"behaviors": [],
|
|
9194
|
-
"
|
|
9330
|
+
"doc": "AppShellHeader — lowers to `<header>`, holding its children.",
|
|
9331
|
+
"sourceFile": "silicaui-html/src/component.ts:1333"
|
|
9195
9332
|
},
|
|
9196
9333
|
{
|
|
9197
9334
|
"name": "AppShellMain",
|
|
@@ -9201,7 +9338,8 @@
|
|
|
9201
9338
|
"icon": "box",
|
|
9202
9339
|
"container": true,
|
|
9203
9340
|
"behaviors": [],
|
|
9204
|
-
"
|
|
9341
|
+
"doc": "AppShellMain — lowers to `<main>`, holding its children.",
|
|
9342
|
+
"sourceFile": "silicaui-html/src/component.ts:1334"
|
|
9205
9343
|
},
|
|
9206
9344
|
{
|
|
9207
9345
|
"name": "AppShellFooter",
|
|
@@ -9211,7 +9349,8 @@
|
|
|
9211
9349
|
"icon": "box",
|
|
9212
9350
|
"container": true,
|
|
9213
9351
|
"behaviors": [],
|
|
9214
|
-
"
|
|
9352
|
+
"doc": "AppShellFooter — lowers to `<footer>`, holding its children.",
|
|
9353
|
+
"sourceFile": "silicaui-html/src/component.ts:1335"
|
|
9215
9354
|
},
|
|
9216
9355
|
{
|
|
9217
9356
|
"name": "InputGroup",
|
|
@@ -9221,7 +9360,8 @@
|
|
|
9221
9360
|
"icon": "input",
|
|
9222
9361
|
"container": true,
|
|
9223
9362
|
"behaviors": [],
|
|
9224
|
-
"
|
|
9363
|
+
"doc": "InputGroup — lowers to `<div>`, holding its children.",
|
|
9364
|
+
"sourceFile": "silicaui-html/src/component.ts:1336"
|
|
9225
9365
|
},
|
|
9226
9366
|
{
|
|
9227
9367
|
"name": "Diff",
|
|
@@ -9231,7 +9371,8 @@
|
|
|
9231
9371
|
"icon": "box",
|
|
9232
9372
|
"container": true,
|
|
9233
9373
|
"behaviors": [],
|
|
9234
|
-
"
|
|
9374
|
+
"doc": "Diff — lowers to `<div>`, holding its children.",
|
|
9375
|
+
"sourceFile": "silicaui-html/src/component.ts:1337"
|
|
9235
9376
|
},
|
|
9236
9377
|
{
|
|
9237
9378
|
"name": "Toolbar",
|
|
@@ -9241,7 +9382,8 @@
|
|
|
9241
9382
|
"icon": "box",
|
|
9242
9383
|
"container": true,
|
|
9243
9384
|
"behaviors": [],
|
|
9244
|
-
"
|
|
9385
|
+
"doc": "Toolbar — size/variant/dividers are props on the source node, forwarded as data-attrs the CSS reads (mirrors DrawerContent's `data-side` below).",
|
|
9386
|
+
"sourceFile": "silicaui-html/src/component.ts:1341"
|
|
9245
9387
|
},
|
|
9246
9388
|
{
|
|
9247
9389
|
"name": "ToolbarCenter",
|
|
@@ -9251,7 +9393,8 @@
|
|
|
9251
9393
|
"icon": "box",
|
|
9252
9394
|
"container": true,
|
|
9253
9395
|
"behaviors": [],
|
|
9254
|
-
"
|
|
9396
|
+
"doc": "ToolbarCenter — lowers to `<div>`, holding its children.",
|
|
9397
|
+
"sourceFile": "silicaui-html/src/component.ts:1357"
|
|
9255
9398
|
},
|
|
9256
9399
|
{
|
|
9257
9400
|
"name": "DockItem",
|
|
@@ -9261,7 +9404,8 @@
|
|
|
9261
9404
|
"icon": "sidebarTrigger",
|
|
9262
9405
|
"container": true,
|
|
9263
9406
|
"behaviors": [],
|
|
9264
|
-
"
|
|
9407
|
+
"doc": "Button-shaped structural atoms — a real <button>/<a>, so registering them (vs. plain divs) buys the host correct semantics + tab order for free.",
|
|
9408
|
+
"sourceFile": "silicaui-html/src/component.ts:1362"
|
|
9265
9409
|
},
|
|
9266
9410
|
{
|
|
9267
9411
|
"name": "InputGroupButton",
|
|
@@ -9271,7 +9415,7 @@
|
|
|
9271
9415
|
"icon": "button",
|
|
9272
9416
|
"container": true,
|
|
9273
9417
|
"behaviors": [],
|
|
9274
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9418
|
+
"sourceFile": "silicaui-html/src/component.ts:1370"
|
|
9275
9419
|
},
|
|
9276
9420
|
{
|
|
9277
9421
|
"name": "ToolbarButton",
|
|
@@ -9281,7 +9425,7 @@
|
|
|
9281
9425
|
"icon": "button",
|
|
9282
9426
|
"container": true,
|
|
9283
9427
|
"behaviors": [],
|
|
9284
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9428
|
+
"sourceFile": "silicaui-html/src/component.ts:1378"
|
|
9285
9429
|
},
|
|
9286
9430
|
{
|
|
9287
9431
|
"name": "ToolbarLink",
|
|
@@ -9291,7 +9435,7 @@
|
|
|
9291
9435
|
"icon": "nav",
|
|
9292
9436
|
"container": true,
|
|
9293
9437
|
"behaviors": [],
|
|
9294
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9438
|
+
"sourceFile": "silicaui-html/src/component.ts:1386"
|
|
9295
9439
|
},
|
|
9296
9440
|
{
|
|
9297
9441
|
"name": "ToolbarSeparator",
|
|
@@ -9301,7 +9445,7 @@
|
|
|
9301
9445
|
"icon": "box",
|
|
9302
9446
|
"container": false,
|
|
9303
9447
|
"behaviors": [],
|
|
9304
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9448
|
+
"sourceFile": "silicaui-html/src/component.ts:1394"
|
|
9305
9449
|
},
|
|
9306
9450
|
{
|
|
9307
9451
|
"name": "ClickableCard",
|
|
@@ -9311,7 +9455,8 @@
|
|
|
9311
9455
|
"icon": "box",
|
|
9312
9456
|
"container": true,
|
|
9313
9457
|
"behaviors": [],
|
|
9314
|
-
"
|
|
9458
|
+
"doc": "ClickableCard — a Card that's a whole clickable surface; a <button>, or an <a> when it carries an href (mirrors Button's own href-swap rule).",
|
|
9459
|
+
"sourceFile": "silicaui-html/src/component.ts:1403"
|
|
9315
9460
|
},
|
|
9316
9461
|
{
|
|
9317
9462
|
"name": "SearchInput",
|
|
@@ -9321,7 +9466,8 @@
|
|
|
9321
9466
|
"icon": "input",
|
|
9322
9467
|
"container": false,
|
|
9323
9468
|
"behaviors": [],
|
|
9324
|
-
"
|
|
9469
|
+
"doc": "Leaf form inputs — native controls only; the show/hide + clear-button chrome the React versions add needs real JS, so those are dropped here rather than shipping a dead button (see the sync-gap memory).",
|
|
9470
|
+
"sourceFile": "silicaui-html/src/component.ts:1419"
|
|
9325
9471
|
},
|
|
9326
9472
|
{
|
|
9327
9473
|
"name": "PasswordInput",
|
|
@@ -9331,7 +9477,7 @@
|
|
|
9331
9477
|
"icon": "input",
|
|
9332
9478
|
"container": false,
|
|
9333
9479
|
"behaviors": [],
|
|
9334
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9480
|
+
"sourceFile": "silicaui-html/src/component.ts:1426"
|
|
9335
9481
|
},
|
|
9336
9482
|
{
|
|
9337
9483
|
"name": "CheckboxGroup",
|
|
@@ -9341,7 +9487,8 @@
|
|
|
9341
9487
|
"icon": "checkbox",
|
|
9342
9488
|
"container": true,
|
|
9343
9489
|
"behaviors": [],
|
|
9344
|
-
"
|
|
9490
|
+
"doc": "CheckboxGroup / CheckboxOption — a native fieldset-free group of checkboxes; CheckboxOption's label text is its children, matching the React shape.",
|
|
9491
|
+
"sourceFile": "silicaui-html/src/component.ts:1436"
|
|
9345
9492
|
},
|
|
9346
9493
|
{
|
|
9347
9494
|
"name": "CheckboxOption",
|
|
@@ -9351,7 +9498,7 @@
|
|
|
9351
9498
|
"icon": "checkbox",
|
|
9352
9499
|
"container": true,
|
|
9353
9500
|
"behaviors": [],
|
|
9354
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9501
|
+
"sourceFile": "silicaui-html/src/component.ts:1444"
|
|
9355
9502
|
},
|
|
9356
9503
|
{
|
|
9357
9504
|
"name": "Swap",
|
|
@@ -9361,7 +9508,8 @@
|
|
|
9361
9508
|
"icon": "box",
|
|
9362
9509
|
"container": true,
|
|
9363
9510
|
"behaviors": [],
|
|
9364
|
-
"
|
|
9511
|
+
"doc": "Swap — a hidden checkbox driving a pure-CSS cross-fade between two children (`.swap-on` / `.swap-off`, authored by the host as the node's children).",
|
|
9512
|
+
"sourceFile": "silicaui-html/src/component.ts:1456"
|
|
9365
9513
|
},
|
|
9366
9514
|
{
|
|
9367
9515
|
"name": "Display",
|
|
@@ -9371,7 +9519,8 @@
|
|
|
9371
9519
|
"icon": "heading",
|
|
9372
9520
|
"container": false,
|
|
9373
9521
|
"behaviors": [],
|
|
9374
|
-
"
|
|
9522
|
+
"doc": "Display — an oversized hero heading; always `.display`-styled, semantic level from props (mirrors Heading's own level handling).",
|
|
9523
|
+
"sourceFile": "silicaui-html/src/component.ts:1470"
|
|
9375
9524
|
},
|
|
9376
9525
|
{
|
|
9377
9526
|
"name": "Timestamp",
|
|
@@ -9381,7 +9530,8 @@
|
|
|
9381
9530
|
"icon": "box",
|
|
9382
9531
|
"container": false,
|
|
9383
9532
|
"behaviors": [],
|
|
9384
|
-
"
|
|
9533
|
+
"doc": "Timestamp — dependency-free `Intl`-formatted date text. Computed once at render time (no live \"3m ago\" ticking without a JS runtime); `props.value` is an ISO date string, `props.format` picks relative vs. absolute.",
|
|
9534
|
+
"sourceFile": "silicaui-html/src/component.ts:1485"
|
|
9385
9535
|
},
|
|
9386
9536
|
{
|
|
9387
9537
|
"name": "EmptyState",
|
|
@@ -9391,7 +9541,8 @@
|
|
|
9391
9541
|
"icon": "box",
|
|
9392
9542
|
"container": false,
|
|
9393
9543
|
"behaviors": [],
|
|
9394
|
-
"
|
|
9544
|
+
"doc": "EmptyState — the centered \"nothing here yet\" placeholder; icon/title/ description/actions are DATA slots (mirrors Stat's prop-driven rows).",
|
|
9545
|
+
"sourceFile": "silicaui-html/src/component.ts:1519"
|
|
9395
9546
|
},
|
|
9396
9547
|
{
|
|
9397
9548
|
"name": "RadioGroup",
|
|
@@ -9401,7 +9552,8 @@
|
|
|
9401
9552
|
"icon": "radio",
|
|
9402
9553
|
"container": true,
|
|
9403
9554
|
"behaviors": [],
|
|
9404
|
-
"
|
|
9555
|
+
"doc": "RadioGroup / RadioOption — same shape as CheckboxGroup/CheckboxOption, one native radio per option (shared `name` gives arrow-key nav for free).",
|
|
9556
|
+
"sourceFile": "silicaui-html/src/component.ts:1538"
|
|
9405
9557
|
},
|
|
9406
9558
|
{
|
|
9407
9559
|
"name": "RadioOption",
|
|
@@ -9411,7 +9563,7 @@
|
|
|
9411
9563
|
"icon": "radio",
|
|
9412
9564
|
"container": true,
|
|
9413
9565
|
"behaviors": [],
|
|
9414
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9566
|
+
"sourceFile": "silicaui-html/src/component.ts:1546"
|
|
9415
9567
|
},
|
|
9416
9568
|
{
|
|
9417
9569
|
"name": "Stats",
|
|
@@ -9421,7 +9573,8 @@
|
|
|
9421
9573
|
"icon": "stat",
|
|
9422
9574
|
"container": true,
|
|
9423
9575
|
"behaviors": [],
|
|
9424
|
-
"
|
|
9576
|
+
"doc": "Stats — a flex row grouping multiple Stat blocks (mirrors AvatarGroup).",
|
|
9577
|
+
"sourceFile": "silicaui-html/src/component.ts:1554"
|
|
9425
9578
|
},
|
|
9426
9579
|
{
|
|
9427
9580
|
"name": "Meter",
|
|
@@ -9431,7 +9584,8 @@
|
|
|
9431
9584
|
"icon": "progress",
|
|
9432
9585
|
"container": false,
|
|
9433
9586
|
"behaviors": [],
|
|
9434
|
-
"
|
|
9587
|
+
"doc": "Meter — a static measurement (not task advancement, unlike Progress); same bucketed-literal-width technique so the fill needs no inline style.",
|
|
9588
|
+
"sourceFile": "silicaui-html/src/component.ts:1559"
|
|
9435
9589
|
},
|
|
9436
9590
|
{
|
|
9437
9591
|
"name": "RadialProgress",
|
|
@@ -9441,7 +9595,8 @@
|
|
|
9441
9595
|
"icon": "progress",
|
|
9442
9596
|
"container": false,
|
|
9443
9597
|
"behaviors": [],
|
|
9444
|
-
"
|
|
9598
|
+
"doc": "RadialProgress — a circular ring; `--value` can't be an inline style (no inline style, ever), so the value snaps to the nearest of 21 literal `[--value:N]` utility buckets, same principle as Progress's width buckets.",
|
|
9599
|
+
"sourceFile": "silicaui-html/src/component.ts:1573"
|
|
9445
9600
|
},
|
|
9446
9601
|
{
|
|
9447
9602
|
"name": "Accordion",
|
|
@@ -9453,7 +9608,8 @@
|
|
|
9453
9608
|
"behaviors": [
|
|
9454
9609
|
"disclosure"
|
|
9455
9610
|
],
|
|
9456
|
-
"
|
|
9611
|
+
"doc": "Accordion — `disclosure` with `params.single`; AccordionItem is a plain wrapper div (no part), Trigger/Panel carry the trigger/panel roles.",
|
|
9612
|
+
"sourceFile": "silicaui-html/src/component.ts:1606"
|
|
9457
9613
|
},
|
|
9458
9614
|
{
|
|
9459
9615
|
"name": "AccordionItem",
|
|
@@ -9463,7 +9619,8 @@
|
|
|
9463
9619
|
"icon": "collapse",
|
|
9464
9620
|
"container": true,
|
|
9465
9621
|
"behaviors": [],
|
|
9466
|
-
"
|
|
9622
|
+
"doc": "AccordionItem — lowers to `<div>`, holding its children.",
|
|
9623
|
+
"sourceFile": "silicaui-html/src/component.ts:1620"
|
|
9467
9624
|
},
|
|
9468
9625
|
{
|
|
9469
9626
|
"name": "AccordionTrigger",
|
|
@@ -9473,7 +9630,7 @@
|
|
|
9473
9630
|
"icon": "collapse",
|
|
9474
9631
|
"container": true,
|
|
9475
9632
|
"behaviors": [],
|
|
9476
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9633
|
+
"sourceFile": "silicaui-html/src/component.ts:1622"
|
|
9477
9634
|
},
|
|
9478
9635
|
{
|
|
9479
9636
|
"name": "AccordionPanel",
|
|
@@ -9483,7 +9640,7 @@
|
|
|
9483
9640
|
"icon": "collapse",
|
|
9484
9641
|
"container": true,
|
|
9485
9642
|
"behaviors": [],
|
|
9486
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9643
|
+
"sourceFile": "silicaui-html/src/component.ts:1634"
|
|
9487
9644
|
},
|
|
9488
9645
|
{
|
|
9489
9646
|
"name": "Collapsible",
|
|
@@ -9495,7 +9652,8 @@
|
|
|
9495
9652
|
"behaviors": [
|
|
9496
9653
|
"disclosure"
|
|
9497
9654
|
],
|
|
9498
|
-
"
|
|
9655
|
+
"doc": "Collapsible — a single `disclosure` trigger/panel pair (not single-open — there's only one pair under this root).",
|
|
9656
|
+
"sourceFile": "silicaui-html/src/component.ts:1650"
|
|
9499
9657
|
},
|
|
9500
9658
|
{
|
|
9501
9659
|
"name": "CollapsibleTrigger",
|
|
@@ -9505,7 +9663,7 @@
|
|
|
9505
9663
|
"icon": "collapse",
|
|
9506
9664
|
"container": true,
|
|
9507
9665
|
"behaviors": [],
|
|
9508
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9666
|
+
"sourceFile": "silicaui-html/src/component.ts:1662"
|
|
9509
9667
|
},
|
|
9510
9668
|
{
|
|
9511
9669
|
"name": "CollapsiblePanel",
|
|
@@ -9515,7 +9673,7 @@
|
|
|
9515
9673
|
"icon": "collapse",
|
|
9516
9674
|
"container": true,
|
|
9517
9675
|
"behaviors": [],
|
|
9518
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9676
|
+
"sourceFile": "silicaui-html/src/component.ts:1674"
|
|
9519
9677
|
},
|
|
9520
9678
|
{
|
|
9521
9679
|
"name": "ColorPicker",
|
|
@@ -9527,7 +9685,8 @@
|
|
|
9527
9685
|
"behaviors": [
|
|
9528
9686
|
"color-picker"
|
|
9529
9687
|
],
|
|
9530
|
-
"
|
|
9688
|
+
"doc": "ColorPicker — the real OKLCH editor, not `<input type=\"color\">`. The native input was the obvious shortcut and is a DIFFERENT control (an sRGB swatch dialog, not an L/C/H editor); shipping it under this name would misdescribe what a consumer gets. Structure only — no `style` attributes, since static output must stay CSP-clean (verify-csp). The handler paints the ramps.",
|
|
9689
|
+
"sourceFile": "silicaui-html/src/component.ts:1693"
|
|
9531
9690
|
},
|
|
9532
9691
|
{
|
|
9533
9692
|
"name": "TagInput",
|
|
@@ -9539,7 +9698,8 @@
|
|
|
9539
9698
|
"behaviors": [
|
|
9540
9699
|
"tag-input"
|
|
9541
9700
|
],
|
|
9542
|
-
"
|
|
9701
|
+
"doc": "TagInput — chips + a text field. The `template` part is what lets the handler create new chips without hardcoding class names in the runtime, which would break under a SilicaProvider prefix.",
|
|
9702
|
+
"sourceFile": "silicaui-html/src/component.ts:1779"
|
|
9543
9703
|
},
|
|
9544
9704
|
{
|
|
9545
9705
|
"name": "Countdown",
|
|
@@ -9551,7 +9711,8 @@
|
|
|
9551
9711
|
"behaviors": [
|
|
9552
9712
|
"countdown"
|
|
9553
9713
|
],
|
|
9554
|
-
"
|
|
9714
|
+
"doc": "Countdown — a live clock. Renders the CORRECT values for its build moment rather than zeros, so a page that never hydrates shows a sensible (if frozen) countdown instead of empty boxes; the handler then takes over.",
|
|
9715
|
+
"sourceFile": "silicaui-html/src/component.ts:1852"
|
|
9555
9716
|
},
|
|
9556
9717
|
{
|
|
9557
9718
|
"name": "Filter",
|
|
@@ -9563,7 +9724,8 @@
|
|
|
9563
9724
|
"behaviors": [
|
|
9564
9725
|
"toggle-group"
|
|
9565
9726
|
],
|
|
9566
|
-
"
|
|
9727
|
+
"doc": "Filter — a single-select chip row with a reset. This is the EXISTING `toggle-group` behavior, not a new one: same single-select press semantics, same roving focus, same aria-pressed buttons. The only delta was the reset, which is now an optional `reset` part on that handler. Reusing kept the BehaviorType vocabulary closed, which is deliberate.",
|
|
9728
|
+
"sourceFile": "silicaui-html/src/component.ts:1905"
|
|
9567
9729
|
},
|
|
9568
9730
|
{
|
|
9569
9731
|
"name": "FilterItem",
|
|
@@ -9573,7 +9735,7 @@
|
|
|
9573
9735
|
"icon": "box",
|
|
9574
9736
|
"container": true,
|
|
9575
9737
|
"behaviors": [],
|
|
9576
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9738
|
+
"sourceFile": "silicaui-html/src/component.ts:1927"
|
|
9577
9739
|
},
|
|
9578
9740
|
{
|
|
9579
9741
|
"name": "ChatImage",
|
|
@@ -9583,7 +9745,8 @@
|
|
|
9583
9745
|
"icon": "box",
|
|
9584
9746
|
"container": true,
|
|
9585
9747
|
"behaviors": [],
|
|
9586
|
-
"
|
|
9748
|
+
"doc": "── chat ────────────────────────────────────────────────────────────────── The whole family lands together on purpose. Half a family is worse than none: a consumer who finds `Chat` but no `ChatComposer` hand-rolls the missing half in markup that then drifts from the React layer, which is the exact failure this registry exists to prevent.\n\nThe primitives (image/header/footer/bubble/layout) take their class from the authored node like `Card` does; the composites below build inner structure the author never writes, so those classes ARE emitted here.",
|
|
9749
|
+
"sourceFile": "silicaui-html/src/component.ts:1959"
|
|
9587
9750
|
},
|
|
9588
9751
|
{
|
|
9589
9752
|
"name": "ChatHeader",
|
|
@@ -9593,7 +9756,8 @@
|
|
|
9593
9756
|
"icon": "box",
|
|
9594
9757
|
"container": true,
|
|
9595
9758
|
"behaviors": [],
|
|
9596
|
-
"
|
|
9759
|
+
"doc": "ChatHeader — lowers to `<div>`, holding its children.",
|
|
9760
|
+
"sourceFile": "silicaui-html/src/component.ts:1960"
|
|
9597
9761
|
},
|
|
9598
9762
|
{
|
|
9599
9763
|
"name": "ChatFooter",
|
|
@@ -9603,7 +9767,8 @@
|
|
|
9603
9767
|
"icon": "box",
|
|
9604
9768
|
"container": true,
|
|
9605
9769
|
"behaviors": [],
|
|
9606
|
-
"
|
|
9770
|
+
"doc": "ChatFooter — lowers to `<div>`, holding its children.",
|
|
9771
|
+
"sourceFile": "silicaui-html/src/component.ts:1961"
|
|
9607
9772
|
},
|
|
9608
9773
|
{
|
|
9609
9774
|
"name": "ChatBubble",
|
|
@@ -9613,7 +9778,8 @@
|
|
|
9613
9778
|
"icon": "box",
|
|
9614
9779
|
"container": true,
|
|
9615
9780
|
"behaviors": [],
|
|
9616
|
-
"
|
|
9781
|
+
"doc": "ChatBubble — lowers to `<div>`, holding its children.",
|
|
9782
|
+
"sourceFile": "silicaui-html/src/component.ts:1962"
|
|
9617
9783
|
},
|
|
9618
9784
|
{
|
|
9619
9785
|
"name": "ChatLayout",
|
|
@@ -9623,7 +9789,8 @@
|
|
|
9623
9789
|
"icon": "box",
|
|
9624
9790
|
"container": true,
|
|
9625
9791
|
"behaviors": [],
|
|
9626
|
-
"
|
|
9792
|
+
"doc": "ChatLayout — lowers to `<div>`, holding its children.",
|
|
9793
|
+
"sourceFile": "silicaui-html/src/component.ts:1963"
|
|
9627
9794
|
},
|
|
9628
9795
|
{
|
|
9629
9796
|
"name": "ChatLayoutMessages",
|
|
@@ -9633,7 +9800,8 @@
|
|
|
9633
9800
|
"icon": "box",
|
|
9634
9801
|
"container": true,
|
|
9635
9802
|
"behaviors": [],
|
|
9636
|
-
"
|
|
9803
|
+
"doc": "ChatLayoutMessages — lowers to `<div>`, holding its children.",
|
|
9804
|
+
"sourceFile": "silicaui-html/src/component.ts:1964"
|
|
9637
9805
|
},
|
|
9638
9806
|
{
|
|
9639
9807
|
"name": "ChatMessageMetadata",
|
|
@@ -9643,7 +9811,8 @@
|
|
|
9643
9811
|
"icon": "box",
|
|
9644
9812
|
"container": true,
|
|
9645
9813
|
"behaviors": [],
|
|
9646
|
-
"
|
|
9814
|
+
"doc": "ChatMessageMetadata — lowers to `<div>`, holding its children.",
|
|
9815
|
+
"sourceFile": "silicaui-html/src/component.ts:1965"
|
|
9647
9816
|
},
|
|
9648
9817
|
{
|
|
9649
9818
|
"name": "Chat",
|
|
@@ -9653,7 +9822,8 @@
|
|
|
9653
9822
|
"icon": "box",
|
|
9654
9823
|
"container": true,
|
|
9655
9824
|
"behaviors": [],
|
|
9656
|
-
"
|
|
9825
|
+
"doc": "Chat — one message row. `side: \"end\"` flips it to the outgoing side.",
|
|
9826
|
+
"sourceFile": "silicaui-html/src/component.ts:1968"
|
|
9657
9827
|
},
|
|
9658
9828
|
{
|
|
9659
9829
|
"name": "ChatSystemMessage",
|
|
@@ -9663,7 +9833,8 @@
|
|
|
9663
9833
|
"icon": "box",
|
|
9664
9834
|
"container": true,
|
|
9665
9835
|
"behaviors": [],
|
|
9666
|
-
"
|
|
9836
|
+
"doc": "A centered notice (\"Today\", \"Ada joined\") — attributed to neither side.",
|
|
9837
|
+
"sourceFile": "silicaui-html/src/component.ts:1983"
|
|
9667
9838
|
},
|
|
9668
9839
|
{
|
|
9669
9840
|
"name": "ChatMessage",
|
|
@@ -9673,7 +9844,8 @@
|
|
|
9673
9844
|
"icon": "box",
|
|
9674
9845
|
"container": true,
|
|
9675
9846
|
"behaviors": [],
|
|
9676
|
-
"
|
|
9847
|
+
"doc": "ChatMessage — the convenience composite the React layer also exposes, lowering to the same primitives. `avatar` is a STRING here (initials); a rich avatar node is authored by composing Chat/ChatImage/ChatBubble directly, exactly as in React.",
|
|
9848
|
+
"sourceFile": "silicaui-html/src/component.ts:2000"
|
|
9677
9849
|
},
|
|
9678
9850
|
{
|
|
9679
9851
|
"name": "ChatTypingIndicator",
|
|
@@ -9683,7 +9855,8 @@
|
|
|
9683
9855
|
"icon": "box",
|
|
9684
9856
|
"container": true,
|
|
9685
9857
|
"behaviors": [],
|
|
9686
|
-
"
|
|
9858
|
+
"doc": "Three animated dots inside a real bubble, so it occupies the slot the next message will land in rather than reading as a stray line of muted text.",
|
|
9859
|
+
"sourceFile": "silicaui-html/src/component.ts:2033"
|
|
9687
9860
|
},
|
|
9688
9861
|
{
|
|
9689
9862
|
"name": "ChatToolCalls",
|
|
@@ -9695,7 +9868,8 @@
|
|
|
9695
9868
|
"behaviors": [
|
|
9696
9869
|
"disclosure"
|
|
9697
9870
|
],
|
|
9698
|
-
"
|
|
9871
|
+
"doc": "ChatToolCalls — reuses the existing `disclosure` behavior and the Collapsible part classes the CSS already targets, rather than inventing a new BehaviorType for what is structurally a collapsible.",
|
|
9872
|
+
"sourceFile": "silicaui-html/src/component.ts:2059"
|
|
9699
9873
|
},
|
|
9700
9874
|
{
|
|
9701
9875
|
"name": "ChatComposer",
|
|
@@ -9707,7 +9881,8 @@
|
|
|
9707
9881
|
"behaviors": [
|
|
9708
9882
|
"form"
|
|
9709
9883
|
],
|
|
9710
|
-
"
|
|
9884
|
+
"doc": "ChatComposer — a real <form> so a static page can actually send. React adds autoresize and Enter-to-send on top; those are progressive enhancements, and their absence degrades to a normal textarea + submit rather than to something broken.",
|
|
9885
|
+
"sourceFile": "silicaui-html/src/component.ts:2086"
|
|
9711
9886
|
},
|
|
9712
9887
|
{
|
|
9713
9888
|
"name": "Carousel",
|
|
@@ -9719,7 +9894,8 @@
|
|
|
9719
9894
|
"behaviors": [
|
|
9720
9895
|
"carousel"
|
|
9721
9896
|
],
|
|
9722
|
-
"
|
|
9897
|
+
"doc": "Carousel — `carousel`; unlike Accordion/Tabs/Menu, Track/Prev/Next/Dot aren't part of the public React API (Carousel/CarouselItem only), so the macro builds that inner structure itself from `node.children`, matching what the React component does internally.",
|
|
9898
|
+
"sourceFile": "silicaui-html/src/component.ts:2121"
|
|
9723
9899
|
},
|
|
9724
9900
|
{
|
|
9725
9901
|
"name": "CarouselItem",
|
|
@@ -9729,7 +9905,7 @@
|
|
|
9729
9905
|
"icon": "box",
|
|
9730
9906
|
"container": true,
|
|
9731
9907
|
"behaviors": [],
|
|
9732
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9908
|
+
"sourceFile": "silicaui-html/src/component.ts:2155"
|
|
9733
9909
|
},
|
|
9734
9910
|
{
|
|
9735
9911
|
"name": "Marquee",
|
|
@@ -9741,7 +9917,8 @@
|
|
|
9741
9917
|
"behaviors": [
|
|
9742
9918
|
"marquee"
|
|
9743
9919
|
],
|
|
9744
|
-
"
|
|
9920
|
+
"doc": "Marquee — `marquee`. Direction/speed/fade are CLASSES, not props: they're pure presentation with no structural or runtime counterpart, so the class is the API exactly as it is for Button. `repeat` earns a prop because it changes the STRUCTURE (how many copies get rendered) and the copy count has to agree with `--marquee-copies` or the loop distance is wrong — so the macro owns both halves. `pauseOnHover` earns one because it has a runtime counterpart to keep in step (the behavior param below).",
|
|
9921
|
+
"sourceFile": "silicaui-html/src/component.ts:2175"
|
|
9745
9922
|
},
|
|
9746
9923
|
{
|
|
9747
9924
|
"name": "DropdownMenu",
|
|
@@ -9753,7 +9930,8 @@
|
|
|
9753
9930
|
"behaviors": [
|
|
9754
9931
|
"menu"
|
|
9755
9932
|
],
|
|
9756
|
-
"
|
|
9933
|
+
"doc": "DropdownMenu — `menu`; Trigger/Content/Item carry the trigger/panel/item roles. Content starts hidden (menu.ts reads its own `hidden` attribute to determine open state). Group/Label/Separator are plain elements — author them directly inside Content, same rule as every other sub-part above.",
|
|
9934
|
+
"sourceFile": "silicaui-html/src/component.ts:2216"
|
|
9757
9935
|
},
|
|
9758
9936
|
{
|
|
9759
9937
|
"name": "DropdownMenuTrigger",
|
|
@@ -9763,7 +9941,7 @@
|
|
|
9763
9941
|
"icon": "nav",
|
|
9764
9942
|
"container": true,
|
|
9765
9943
|
"behaviors": [],
|
|
9766
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9944
|
+
"sourceFile": "silicaui-html/src/component.ts:2228"
|
|
9767
9945
|
},
|
|
9768
9946
|
{
|
|
9769
9947
|
"name": "DropdownMenuContent",
|
|
@@ -9773,7 +9951,7 @@
|
|
|
9773
9951
|
"icon": "nav",
|
|
9774
9952
|
"container": true,
|
|
9775
9953
|
"behaviors": [],
|
|
9776
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9954
|
+
"sourceFile": "silicaui-html/src/component.ts:2240"
|
|
9777
9955
|
},
|
|
9778
9956
|
{
|
|
9779
9957
|
"name": "DropdownMenuItem",
|
|
@@ -9783,7 +9961,7 @@
|
|
|
9783
9961
|
"icon": "nav",
|
|
9784
9962
|
"container": true,
|
|
9785
9963
|
"behaviors": [],
|
|
9786
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9964
|
+
"sourceFile": "silicaui-html/src/component.ts:2254"
|
|
9787
9965
|
},
|
|
9788
9966
|
{
|
|
9789
9967
|
"name": "Tabs",
|
|
@@ -9795,7 +9973,8 @@
|
|
|
9795
9973
|
"behaviors": [
|
|
9796
9974
|
"tabs"
|
|
9797
9975
|
],
|
|
9798
|
-
"
|
|
9976
|
+
"doc": "Tabs — `tabs`; Tab/Panel pair by position. TabsList is a plain wrapper (tabs.ts scopes `ownParts` to the whole root, not a specific list part).",
|
|
9977
|
+
"sourceFile": "silicaui-html/src/component.ts:2269"
|
|
9799
9978
|
},
|
|
9800
9979
|
{
|
|
9801
9980
|
"name": "TabsList",
|
|
@@ -9805,7 +9984,8 @@
|
|
|
9805
9984
|
"icon": "box",
|
|
9806
9985
|
"container": true,
|
|
9807
9986
|
"behaviors": [],
|
|
9808
|
-
"
|
|
9987
|
+
"doc": "TabsList carries the tablist role its role=tab children require; the tabs behavior fills in aria-selected/tabindex at hydrate. Panels stay visible pre-hydration on purpose (progressive enhancement — no-JS readers get all content), the runtime hides the inactive ones.",
|
|
9988
|
+
"sourceFile": "silicaui-html/src/component.ts:2285"
|
|
9809
9989
|
},
|
|
9810
9990
|
{
|
|
9811
9991
|
"name": "TabsTab",
|
|
@@ -9815,7 +9995,7 @@
|
|
|
9815
9995
|
"icon": "box",
|
|
9816
9996
|
"container": true,
|
|
9817
9997
|
"behaviors": [],
|
|
9818
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
9998
|
+
"sourceFile": "silicaui-html/src/component.ts:2293"
|
|
9819
9999
|
},
|
|
9820
10000
|
{
|
|
9821
10001
|
"name": "TabsPanel",
|
|
@@ -9825,7 +10005,7 @@
|
|
|
9825
10005
|
"icon": "box",
|
|
9826
10006
|
"container": true,
|
|
9827
10007
|
"behaviors": [],
|
|
9828
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10008
|
+
"sourceFile": "silicaui-html/src/component.ts:2305"
|
|
9829
10009
|
},
|
|
9830
10010
|
{
|
|
9831
10011
|
"name": "Outline",
|
|
@@ -9837,7 +10017,8 @@
|
|
|
9837
10017
|
"behaviors": [
|
|
9838
10018
|
"toc"
|
|
9839
10019
|
],
|
|
9840
|
-
"
|
|
10020
|
+
"doc": "Outline — `toc`; unlike the React version (which derives its list from scanning heading elements at runtime), the vanilla macro is prop-driven like Breadcrumb/Steps/Timeline: `props.items`: `{id, label}[]` becomes the anchor links the `toc` behavior tracks via IntersectionObserver.",
|
|
10021
|
+
"sourceFile": "silicaui-html/src/component.ts:2322"
|
|
9841
10022
|
},
|
|
9842
10023
|
{
|
|
9843
10024
|
"name": "Dialog",
|
|
@@ -9849,7 +10030,8 @@
|
|
|
9849
10030
|
"behaviors": [
|
|
9850
10031
|
"modal"
|
|
9851
10032
|
],
|
|
9852
|
-
"
|
|
10033
|
+
"doc": "── interactive: new primitives (2026-07-08 bucket-2b sync pass) ────────── `modal` — Dialog/Drawer/AlertDialog/Lightbox/CommandPalette all share one Root(behavior) > Trigger(part=trigger) + Backdrop(part=backdrop) + Content(part=panel) + Close(part=close) shape; Lightbox layers `slide`/ `prev`/`next`/`title`(counter) parts and CommandPalette layers `search`/ `item` parts on the SAME behavior type rather than getting their own — see `modal.ts`. Header/Footer/Group/Label sub-parts are NOT registered (plain docking-bar divs — same sub-part rule as Card's CardBody).",
|
|
10034
|
+
"sourceFile": "silicaui-html/src/component.ts:2355"
|
|
9853
10035
|
},
|
|
9854
10036
|
{
|
|
9855
10037
|
"name": "DialogTrigger",
|
|
@@ -9859,7 +10041,7 @@
|
|
|
9859
10041
|
"icon": "button",
|
|
9860
10042
|
"container": true,
|
|
9861
10043
|
"behaviors": [],
|
|
9862
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10044
|
+
"sourceFile": "silicaui-html/src/component.ts:2367"
|
|
9863
10045
|
},
|
|
9864
10046
|
{
|
|
9865
10047
|
"name": "DialogBackdrop",
|
|
@@ -9869,7 +10051,7 @@
|
|
|
9869
10051
|
"icon": "box",
|
|
9870
10052
|
"container": false,
|
|
9871
10053
|
"behaviors": [],
|
|
9872
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10054
|
+
"sourceFile": "silicaui-html/src/component.ts:2379"
|
|
9873
10055
|
},
|
|
9874
10056
|
{
|
|
9875
10057
|
"name": "DialogContent",
|
|
@@ -9879,7 +10061,7 @@
|
|
|
9879
10061
|
"icon": "box",
|
|
9880
10062
|
"container": true,
|
|
9881
10063
|
"behaviors": [],
|
|
9882
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10064
|
+
"sourceFile": "silicaui-html/src/component.ts:2390"
|
|
9883
10065
|
},
|
|
9884
10066
|
{
|
|
9885
10067
|
"name": "DialogClose",
|
|
@@ -9889,7 +10071,7 @@
|
|
|
9889
10071
|
"icon": "button",
|
|
9890
10072
|
"container": true,
|
|
9891
10073
|
"behaviors": [],
|
|
9892
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10074
|
+
"sourceFile": "silicaui-html/src/component.ts:2405"
|
|
9893
10075
|
},
|
|
9894
10076
|
{
|
|
9895
10077
|
"name": "DialogTitle",
|
|
@@ -9899,7 +10081,8 @@
|
|
|
9899
10081
|
"icon": "heading",
|
|
9900
10082
|
"container": false,
|
|
9901
10083
|
"behaviors": [],
|
|
9902
|
-
"
|
|
10084
|
+
"doc": "DialogTitle — lowers to `<h2>`, carrying `props.text` as its content.",
|
|
10085
|
+
"sourceFile": "silicaui-html/src/component.ts:2416"
|
|
9903
10086
|
},
|
|
9904
10087
|
{
|
|
9905
10088
|
"name": "DialogDescription",
|
|
@@ -9909,7 +10092,8 @@
|
|
|
9909
10092
|
"icon": "text",
|
|
9910
10093
|
"container": false,
|
|
9911
10094
|
"behaviors": [],
|
|
9912
|
-
"
|
|
10095
|
+
"doc": "DialogDescription — lowers to `<p>`, carrying `props.text` as its content.",
|
|
10096
|
+
"sourceFile": "silicaui-html/src/component.ts:2417"
|
|
9913
10097
|
},
|
|
9914
10098
|
{
|
|
9915
10099
|
"name": "Drawer",
|
|
@@ -9921,7 +10105,8 @@
|
|
|
9921
10105
|
"behaviors": [
|
|
9922
10106
|
"modal"
|
|
9923
10107
|
],
|
|
9924
|
-
"
|
|
10108
|
+
"doc": "Drawer — identical shape to Dialog; `props.side` becomes a `data-side` attribute on the panel for the CSS to slide from (render-neutral to the behavior itself).",
|
|
10109
|
+
"sourceFile": "silicaui-html/src/component.ts:2423"
|
|
9925
10110
|
},
|
|
9926
10111
|
{
|
|
9927
10112
|
"name": "DrawerTrigger",
|
|
@@ -9931,7 +10116,7 @@
|
|
|
9931
10116
|
"icon": "button",
|
|
9932
10117
|
"container": true,
|
|
9933
10118
|
"behaviors": [],
|
|
9934
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10119
|
+
"sourceFile": "silicaui-html/src/component.ts:2435"
|
|
9935
10120
|
},
|
|
9936
10121
|
{
|
|
9937
10122
|
"name": "DrawerBackdrop",
|
|
@@ -9941,7 +10126,7 @@
|
|
|
9941
10126
|
"icon": "box",
|
|
9942
10127
|
"container": false,
|
|
9943
10128
|
"behaviors": [],
|
|
9944
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10129
|
+
"sourceFile": "silicaui-html/src/component.ts:2447"
|
|
9945
10130
|
},
|
|
9946
10131
|
{
|
|
9947
10132
|
"name": "DrawerContent",
|
|
@@ -9951,7 +10136,7 @@
|
|
|
9951
10136
|
"icon": "sidebar",
|
|
9952
10137
|
"container": true,
|
|
9953
10138
|
"behaviors": [],
|
|
9954
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10139
|
+
"sourceFile": "silicaui-html/src/component.ts:2458"
|
|
9955
10140
|
},
|
|
9956
10141
|
{
|
|
9957
10142
|
"name": "DrawerClose",
|
|
@@ -9961,7 +10146,7 @@
|
|
|
9961
10146
|
"icon": "button",
|
|
9962
10147
|
"container": true,
|
|
9963
10148
|
"behaviors": [],
|
|
9964
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10149
|
+
"sourceFile": "silicaui-html/src/component.ts:2474"
|
|
9965
10150
|
},
|
|
9966
10151
|
{
|
|
9967
10152
|
"name": "DrawerTitle",
|
|
@@ -9971,7 +10156,8 @@
|
|
|
9971
10156
|
"icon": "heading",
|
|
9972
10157
|
"container": false,
|
|
9973
10158
|
"behaviors": [],
|
|
9974
|
-
"
|
|
10159
|
+
"doc": "DrawerTitle — lowers to `<h2>`, carrying `props.text` as its content.",
|
|
10160
|
+
"sourceFile": "silicaui-html/src/component.ts:2485"
|
|
9975
10161
|
},
|
|
9976
10162
|
{
|
|
9977
10163
|
"name": "DrawerDescription",
|
|
@@ -9981,7 +10167,8 @@
|
|
|
9981
10167
|
"icon": "text",
|
|
9982
10168
|
"container": false,
|
|
9983
10169
|
"behaviors": [],
|
|
9984
|
-
"
|
|
10170
|
+
"doc": "DrawerDescription — lowers to `<p>`, carrying `props.text` as its content.",
|
|
10171
|
+
"sourceFile": "silicaui-html/src/component.ts:2486"
|
|
9985
10172
|
},
|
|
9986
10173
|
{
|
|
9987
10174
|
"name": "AlertDialog",
|
|
@@ -9993,7 +10180,8 @@
|
|
|
9993
10180
|
"behaviors": [
|
|
9994
10181
|
"modal"
|
|
9995
10182
|
],
|
|
9996
|
-
"
|
|
10183
|
+
"doc": "AlertDialog — same shape, `params.dismissible: false` (backdrop is inert — clicking it does NOT close, only Escape/an explicit close does, per the ARIA alert-dialog pattern). Action/Cancel are both `close` parts — a host's own click listener on Action still runs before this one closes it.",
|
|
10184
|
+
"sourceFile": "silicaui-html/src/component.ts:2493"
|
|
9997
10185
|
},
|
|
9998
10186
|
{
|
|
9999
10187
|
"name": "AlertDialogTrigger",
|
|
@@ -10003,7 +10191,7 @@
|
|
|
10003
10191
|
"icon": "button",
|
|
10004
10192
|
"container": true,
|
|
10005
10193
|
"behaviors": [],
|
|
10006
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10194
|
+
"sourceFile": "silicaui-html/src/component.ts:2505"
|
|
10007
10195
|
},
|
|
10008
10196
|
{
|
|
10009
10197
|
"name": "AlertDialogBackdrop",
|
|
@@ -10013,7 +10201,7 @@
|
|
|
10013
10201
|
"icon": "box",
|
|
10014
10202
|
"container": false,
|
|
10015
10203
|
"behaviors": [],
|
|
10016
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10204
|
+
"sourceFile": "silicaui-html/src/component.ts:2517"
|
|
10017
10205
|
},
|
|
10018
10206
|
{
|
|
10019
10207
|
"name": "AlertDialogContent",
|
|
@@ -10023,7 +10211,7 @@
|
|
|
10023
10211
|
"icon": "warning",
|
|
10024
10212
|
"container": true,
|
|
10025
10213
|
"behaviors": [],
|
|
10026
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10214
|
+
"sourceFile": "silicaui-html/src/component.ts:2528"
|
|
10027
10215
|
},
|
|
10028
10216
|
{
|
|
10029
10217
|
"name": "AlertDialogClose",
|
|
@@ -10033,7 +10221,7 @@
|
|
|
10033
10221
|
"icon": "button",
|
|
10034
10222
|
"container": true,
|
|
10035
10223
|
"behaviors": [],
|
|
10036
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10224
|
+
"sourceFile": "silicaui-html/src/component.ts:2543"
|
|
10037
10225
|
},
|
|
10038
10226
|
{
|
|
10039
10227
|
"name": "AlertDialogCancel",
|
|
@@ -10043,7 +10231,7 @@
|
|
|
10043
10231
|
"icon": "button",
|
|
10044
10232
|
"container": true,
|
|
10045
10233
|
"behaviors": [],
|
|
10046
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10234
|
+
"sourceFile": "silicaui-html/src/component.ts:2555"
|
|
10047
10235
|
},
|
|
10048
10236
|
{
|
|
10049
10237
|
"name": "AlertDialogAction",
|
|
@@ -10053,7 +10241,7 @@
|
|
|
10053
10241
|
"icon": "button",
|
|
10054
10242
|
"container": true,
|
|
10055
10243
|
"behaviors": [],
|
|
10056
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10244
|
+
"sourceFile": "silicaui-html/src/component.ts:2567"
|
|
10057
10245
|
},
|
|
10058
10246
|
{
|
|
10059
10247
|
"name": "AlertDialogTitle",
|
|
@@ -10063,7 +10251,8 @@
|
|
|
10063
10251
|
"icon": "heading",
|
|
10064
10252
|
"container": false,
|
|
10065
10253
|
"behaviors": [],
|
|
10066
|
-
"
|
|
10254
|
+
"doc": "AlertDialogTitle — lowers to `<h2>`, carrying `props.text` as its content.",
|
|
10255
|
+
"sourceFile": "silicaui-html/src/component.ts:2578"
|
|
10067
10256
|
},
|
|
10068
10257
|
{
|
|
10069
10258
|
"name": "AlertDialogDescription",
|
|
@@ -10073,7 +10262,8 @@
|
|
|
10073
10262
|
"icon": "text",
|
|
10074
10263
|
"container": false,
|
|
10075
10264
|
"behaviors": [],
|
|
10076
|
-
"
|
|
10265
|
+
"doc": "AlertDialogDescription — lowers to `<p>`, carrying `props.text` as its content.",
|
|
10266
|
+
"sourceFile": "silicaui-html/src/component.ts:2579"
|
|
10077
10267
|
},
|
|
10078
10268
|
{
|
|
10079
10269
|
"name": "Lightbox",
|
|
@@ -10085,7 +10275,8 @@
|
|
|
10085
10275
|
"behaviors": [
|
|
10086
10276
|
"modal"
|
|
10087
10277
|
],
|
|
10088
|
-
"
|
|
10278
|
+
"doc": "Lightbox — trigger[i] opens slide[i] (positional pairing, like `tabs`); Counter reuses the `title` role (same \"text this behavior keeps in sync\" convention `calendar`'s month label uses).",
|
|
10279
|
+
"sourceFile": "silicaui-html/src/component.ts:2585"
|
|
10089
10280
|
},
|
|
10090
10281
|
{
|
|
10091
10282
|
"name": "LightboxTrigger",
|
|
@@ -10095,7 +10286,7 @@
|
|
|
10095
10286
|
"icon": "button",
|
|
10096
10287
|
"container": true,
|
|
10097
10288
|
"behaviors": [],
|
|
10098
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10289
|
+
"sourceFile": "silicaui-html/src/component.ts:2597"
|
|
10099
10290
|
},
|
|
10100
10291
|
{
|
|
10101
10292
|
"name": "LightboxBackdrop",
|
|
@@ -10105,7 +10296,7 @@
|
|
|
10105
10296
|
"icon": "box",
|
|
10106
10297
|
"container": false,
|
|
10107
10298
|
"behaviors": [],
|
|
10108
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10299
|
+
"sourceFile": "silicaui-html/src/component.ts:2609"
|
|
10109
10300
|
},
|
|
10110
10301
|
{
|
|
10111
10302
|
"name": "LightboxContent",
|
|
@@ -10115,7 +10306,7 @@
|
|
|
10115
10306
|
"icon": "image",
|
|
10116
10307
|
"container": true,
|
|
10117
10308
|
"behaviors": [],
|
|
10118
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10309
|
+
"sourceFile": "silicaui-html/src/component.ts:2620"
|
|
10119
10310
|
},
|
|
10120
10311
|
{
|
|
10121
10312
|
"name": "LightboxSlide",
|
|
@@ -10125,7 +10316,7 @@
|
|
|
10125
10316
|
"icon": "image",
|
|
10126
10317
|
"container": true,
|
|
10127
10318
|
"behaviors": [],
|
|
10128
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10319
|
+
"sourceFile": "silicaui-html/src/component.ts:2635"
|
|
10129
10320
|
},
|
|
10130
10321
|
{
|
|
10131
10322
|
"name": "LightboxPrev",
|
|
@@ -10135,7 +10326,7 @@
|
|
|
10135
10326
|
"icon": "button",
|
|
10136
10327
|
"container": false,
|
|
10137
10328
|
"behaviors": [],
|
|
10138
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10329
|
+
"sourceFile": "silicaui-html/src/component.ts:2647"
|
|
10139
10330
|
},
|
|
10140
10331
|
{
|
|
10141
10332
|
"name": "LightboxNext",
|
|
@@ -10145,7 +10336,7 @@
|
|
|
10145
10336
|
"icon": "button",
|
|
10146
10337
|
"container": false,
|
|
10147
10338
|
"behaviors": [],
|
|
10148
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10339
|
+
"sourceFile": "silicaui-html/src/component.ts:2661"
|
|
10149
10340
|
},
|
|
10150
10341
|
{
|
|
10151
10342
|
"name": "LightboxClose",
|
|
@@ -10155,7 +10346,7 @@
|
|
|
10155
10346
|
"icon": "button",
|
|
10156
10347
|
"container": true,
|
|
10157
10348
|
"behaviors": [],
|
|
10158
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10349
|
+
"sourceFile": "silicaui-html/src/component.ts:2675"
|
|
10159
10350
|
},
|
|
10160
10351
|
{
|
|
10161
10352
|
"name": "LightboxCounter",
|
|
@@ -10165,7 +10356,7 @@
|
|
|
10165
10356
|
"icon": "box",
|
|
10166
10357
|
"container": false,
|
|
10167
10358
|
"behaviors": [],
|
|
10168
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10359
|
+
"sourceFile": "silicaui-html/src/component.ts:2690"
|
|
10169
10360
|
},
|
|
10170
10361
|
{
|
|
10171
10362
|
"name": "CommandPalette",
|
|
@@ -10177,7 +10368,8 @@
|
|
|
10177
10368
|
"behaviors": [
|
|
10178
10369
|
"modal"
|
|
10179
10370
|
],
|
|
10180
|
-
"
|
|
10371
|
+
"doc": "CommandPalette — `params.hotkey` binds ⌘K/Ctrl+K globally (default `true`; `props.hotkey === false` disables it). Input/Item reuse the `search`/`item` parts `modal.ts` optionally wires filter+arrow-nav for.",
|
|
10372
|
+
"sourceFile": "silicaui-html/src/component.ts:2705"
|
|
10181
10373
|
},
|
|
10182
10374
|
{
|
|
10183
10375
|
"name": "CommandPaletteBackdrop",
|
|
@@ -10187,7 +10379,7 @@
|
|
|
10187
10379
|
"icon": "box",
|
|
10188
10380
|
"container": false,
|
|
10189
10381
|
"behaviors": [],
|
|
10190
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10382
|
+
"sourceFile": "silicaui-html/src/component.ts:2720"
|
|
10191
10383
|
},
|
|
10192
10384
|
{
|
|
10193
10385
|
"name": "CommandPaletteContent",
|
|
@@ -10197,7 +10389,7 @@
|
|
|
10197
10389
|
"icon": "search",
|
|
10198
10390
|
"container": true,
|
|
10199
10391
|
"behaviors": [],
|
|
10200
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10392
|
+
"sourceFile": "silicaui-html/src/component.ts:2731"
|
|
10201
10393
|
},
|
|
10202
10394
|
{
|
|
10203
10395
|
"name": "CommandPaletteInput",
|
|
@@ -10207,7 +10399,7 @@
|
|
|
10207
10399
|
"icon": "input",
|
|
10208
10400
|
"container": false,
|
|
10209
10401
|
"behaviors": [],
|
|
10210
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10402
|
+
"sourceFile": "silicaui-html/src/component.ts:2746"
|
|
10211
10403
|
},
|
|
10212
10404
|
{
|
|
10213
10405
|
"name": "CommandPaletteItem",
|
|
@@ -10217,7 +10409,7 @@
|
|
|
10217
10409
|
"icon": "box",
|
|
10218
10410
|
"container": true,
|
|
10219
10411
|
"behaviors": [],
|
|
10220
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10412
|
+
"sourceFile": "silicaui-html/src/component.ts:2759"
|
|
10221
10413
|
},
|
|
10222
10414
|
{
|
|
10223
10415
|
"name": "Popover",
|
|
@@ -10229,7 +10421,8 @@
|
|
|
10229
10421
|
"behaviors": [
|
|
10230
10422
|
"popover"
|
|
10231
10423
|
],
|
|
10232
|
-
"
|
|
10424
|
+
"doc": "`popover` — anchored trigger/panel pairs; positioning is computed at runtime (see `popover.ts`), same precedent as `carousel`'s `track.style.transform`. Popover/Tooltip/PreviewCard differ only by `params.trigger` — real parameters, not a papered-over mismatch.",
|
|
10425
|
+
"sourceFile": "silicaui-html/src/component.ts:2776"
|
|
10233
10426
|
},
|
|
10234
10427
|
{
|
|
10235
10428
|
"name": "PopoverTrigger",
|
|
@@ -10239,7 +10432,7 @@
|
|
|
10239
10432
|
"icon": "button",
|
|
10240
10433
|
"container": true,
|
|
10241
10434
|
"behaviors": [],
|
|
10242
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10435
|
+
"sourceFile": "silicaui-html/src/component.ts:2788"
|
|
10243
10436
|
},
|
|
10244
10437
|
{
|
|
10245
10438
|
"name": "PopoverContent",
|
|
@@ -10249,7 +10442,7 @@
|
|
|
10249
10442
|
"icon": "box",
|
|
10250
10443
|
"container": true,
|
|
10251
10444
|
"behaviors": [],
|
|
10252
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10445
|
+
"sourceFile": "silicaui-html/src/component.ts:2800"
|
|
10253
10446
|
},
|
|
10254
10447
|
{
|
|
10255
10448
|
"name": "PopoverClose",
|
|
@@ -10259,7 +10452,7 @@
|
|
|
10259
10452
|
"icon": "button",
|
|
10260
10453
|
"container": true,
|
|
10261
10454
|
"behaviors": [],
|
|
10262
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10455
|
+
"sourceFile": "silicaui-html/src/component.ts:2812"
|
|
10263
10456
|
},
|
|
10264
10457
|
{
|
|
10265
10458
|
"name": "PopoverTitle",
|
|
@@ -10269,7 +10462,8 @@
|
|
|
10269
10462
|
"icon": "heading",
|
|
10270
10463
|
"container": false,
|
|
10271
10464
|
"behaviors": [],
|
|
10272
|
-
"
|
|
10465
|
+
"doc": "PopoverTitle — lowers to `<h3>`, carrying `props.text` as its content.",
|
|
10466
|
+
"sourceFile": "silicaui-html/src/component.ts:2823"
|
|
10273
10467
|
},
|
|
10274
10468
|
{
|
|
10275
10469
|
"name": "PopoverDescription",
|
|
@@ -10279,7 +10473,8 @@
|
|
|
10279
10473
|
"icon": "text",
|
|
10280
10474
|
"container": false,
|
|
10281
10475
|
"behaviors": [],
|
|
10282
|
-
"
|
|
10476
|
+
"doc": "PopoverDescription — lowers to `<p>`, carrying `props.text` as its content.",
|
|
10477
|
+
"sourceFile": "silicaui-html/src/component.ts:2824"
|
|
10283
10478
|
},
|
|
10284
10479
|
{
|
|
10285
10480
|
"name": "Tooltip",
|
|
@@ -10291,7 +10486,8 @@
|
|
|
10291
10486
|
"behaviors": [
|
|
10292
10487
|
"popover"
|
|
10293
10488
|
],
|
|
10294
|
-
"
|
|
10489
|
+
"doc": "Tooltip — `params.trigger: \"hover\"`; the trigger wraps an arbitrary element (Base UI merges hover/focus onto it directly — a framework-free host instead gets a small inline wrapper, a documented simplification).",
|
|
10490
|
+
"sourceFile": "silicaui-html/src/component.ts:2830"
|
|
10295
10491
|
},
|
|
10296
10492
|
{
|
|
10297
10493
|
"name": "TooltipTrigger",
|
|
@@ -10301,7 +10497,7 @@
|
|
|
10301
10497
|
"icon": "box",
|
|
10302
10498
|
"container": true,
|
|
10303
10499
|
"behaviors": [],
|
|
10304
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10500
|
+
"sourceFile": "silicaui-html/src/component.ts:2842"
|
|
10305
10501
|
},
|
|
10306
10502
|
{
|
|
10307
10503
|
"name": "TooltipContent",
|
|
@@ -10311,7 +10507,7 @@
|
|
|
10311
10507
|
"icon": "box",
|
|
10312
10508
|
"container": true,
|
|
10313
10509
|
"behaviors": [],
|
|
10314
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10510
|
+
"sourceFile": "silicaui-html/src/component.ts:2854"
|
|
10315
10511
|
},
|
|
10316
10512
|
{
|
|
10317
10513
|
"name": "PreviewCard",
|
|
@@ -10323,7 +10519,8 @@
|
|
|
10323
10519
|
"behaviors": [
|
|
10324
10520
|
"popover"
|
|
10325
10521
|
],
|
|
10326
|
-
"
|
|
10522
|
+
"doc": "PreviewCard — same shape as Tooltip (hover trigger), rich card content rather than a short text label.",
|
|
10523
|
+
"sourceFile": "silicaui-html/src/component.ts:2869"
|
|
10327
10524
|
},
|
|
10328
10525
|
{
|
|
10329
10526
|
"name": "PreviewCardTrigger",
|
|
@@ -10333,7 +10530,7 @@
|
|
|
10333
10530
|
"icon": "box",
|
|
10334
10531
|
"container": true,
|
|
10335
10532
|
"behaviors": [],
|
|
10336
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10533
|
+
"sourceFile": "silicaui-html/src/component.ts:2881"
|
|
10337
10534
|
},
|
|
10338
10535
|
{
|
|
10339
10536
|
"name": "PreviewCardContent",
|
|
@@ -10343,7 +10540,7 @@
|
|
|
10343
10540
|
"icon": "box",
|
|
10344
10541
|
"container": true,
|
|
10345
10542
|
"behaviors": [],
|
|
10346
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10543
|
+
"sourceFile": "silicaui-html/src/component.ts:2893"
|
|
10347
10544
|
},
|
|
10348
10545
|
{
|
|
10349
10546
|
"name": "ContextMenu",
|
|
@@ -10355,7 +10552,8 @@
|
|
|
10355
10552
|
"behaviors": [
|
|
10356
10553
|
"menu"
|
|
10357
10554
|
],
|
|
10358
|
-
"
|
|
10555
|
+
"doc": "ContextMenu — reuses `menu` (not `popover`): its content is a flat action-item list that wants the SAME arrow-key/Home/End roving focus DropdownMenu already has, not a rich anchored panel. `params.trigger: \"context\"` swaps the open event to `contextmenu` and positions at the pointer instead of the trigger rect (see `menu.ts`).",
|
|
10556
|
+
"sourceFile": "silicaui-html/src/component.ts:2911"
|
|
10359
10557
|
},
|
|
10360
10558
|
{
|
|
10361
10559
|
"name": "ContextMenuTrigger",
|
|
@@ -10365,7 +10563,7 @@
|
|
|
10365
10563
|
"icon": "box",
|
|
10366
10564
|
"container": true,
|
|
10367
10565
|
"behaviors": [],
|
|
10368
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10566
|
+
"sourceFile": "silicaui-html/src/component.ts:2923"
|
|
10369
10567
|
},
|
|
10370
10568
|
{
|
|
10371
10569
|
"name": "ContextMenuContent",
|
|
@@ -10375,7 +10573,7 @@
|
|
|
10375
10573
|
"icon": "nav",
|
|
10376
10574
|
"container": true,
|
|
10377
10575
|
"behaviors": [],
|
|
10378
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10576
|
+
"sourceFile": "silicaui-html/src/component.ts:2935"
|
|
10379
10577
|
},
|
|
10380
10578
|
{
|
|
10381
10579
|
"name": "ContextMenuItem",
|
|
@@ -10385,7 +10583,7 @@
|
|
|
10385
10583
|
"icon": "nav",
|
|
10386
10584
|
"container": true,
|
|
10387
10585
|
"behaviors": [],
|
|
10388
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10586
|
+
"sourceFile": "silicaui-html/src/component.ts:2947"
|
|
10389
10587
|
},
|
|
10390
10588
|
{
|
|
10391
10589
|
"name": "Menubar",
|
|
@@ -10395,7 +10593,8 @@
|
|
|
10395
10593
|
"icon": "nav",
|
|
10396
10594
|
"container": true,
|
|
10397
10595
|
"behaviors": [],
|
|
10398
|
-
"
|
|
10596
|
+
"doc": "Menubar — each menu is its OWN independent `menu` root (a documented simplification: no bar-wide single-open coordination or hover-to-switch in vanilla, since sibling behavior roots can't see each other — but every menu still fully opens/closes/roves/dismisses on its own).",
|
|
10597
|
+
"sourceFile": "silicaui-html/src/component.ts:2963"
|
|
10399
10598
|
},
|
|
10400
10599
|
{
|
|
10401
10600
|
"name": "MenubarMenu",
|
|
@@ -10407,7 +10606,7 @@
|
|
|
10407
10606
|
"behaviors": [
|
|
10408
10607
|
"menu"
|
|
10409
10608
|
],
|
|
10410
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10609
|
+
"sourceFile": "silicaui-html/src/component.ts:2965"
|
|
10411
10610
|
},
|
|
10412
10611
|
{
|
|
10413
10612
|
"name": "MenubarTrigger",
|
|
@@ -10417,7 +10616,7 @@
|
|
|
10417
10616
|
"icon": "button",
|
|
10418
10617
|
"container": true,
|
|
10419
10618
|
"behaviors": [],
|
|
10420
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10619
|
+
"sourceFile": "silicaui-html/src/component.ts:2977"
|
|
10421
10620
|
},
|
|
10422
10621
|
{
|
|
10423
10622
|
"name": "MenubarContent",
|
|
@@ -10427,7 +10626,7 @@
|
|
|
10427
10626
|
"icon": "nav",
|
|
10428
10627
|
"container": true,
|
|
10429
10628
|
"behaviors": [],
|
|
10430
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10629
|
+
"sourceFile": "silicaui-html/src/component.ts:2989"
|
|
10431
10630
|
},
|
|
10432
10631
|
{
|
|
10433
10632
|
"name": "MenubarItem",
|
|
@@ -10437,7 +10636,7 @@
|
|
|
10437
10636
|
"icon": "nav",
|
|
10438
10637
|
"container": true,
|
|
10439
10638
|
"behaviors": [],
|
|
10440
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10639
|
+
"sourceFile": "silicaui-html/src/component.ts:3001"
|
|
10441
10640
|
},
|
|
10442
10641
|
{
|
|
10443
10642
|
"name": "NavigationMenu",
|
|
@@ -10447,7 +10646,8 @@
|
|
|
10447
10646
|
"icon": "nav",
|
|
10448
10647
|
"container": true,
|
|
10449
10648
|
"behaviors": [],
|
|
10450
|
-
"
|
|
10649
|
+
"doc": "NavigationMenu — each item is its own independent `popover` root (`hover` trigger; same bar-wide-coordination simplification as Menubar). Content is rich mega-menu markup, not a flat item list, so this reuses `popover` (no item roving assumed) rather than `menu`.",
|
|
10650
|
+
"sourceFile": "silicaui-html/src/component.ts:3017"
|
|
10451
10651
|
},
|
|
10452
10652
|
{
|
|
10453
10653
|
"name": "NavigationMenuItem",
|
|
@@ -10459,7 +10659,7 @@
|
|
|
10459
10659
|
"behaviors": [
|
|
10460
10660
|
"popover"
|
|
10461
10661
|
],
|
|
10462
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10662
|
+
"sourceFile": "silicaui-html/src/component.ts:3019"
|
|
10463
10663
|
},
|
|
10464
10664
|
{
|
|
10465
10665
|
"name": "NavigationMenuTrigger",
|
|
@@ -10469,7 +10669,7 @@
|
|
|
10469
10669
|
"icon": "button",
|
|
10470
10670
|
"container": true,
|
|
10471
10671
|
"behaviors": [],
|
|
10472
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10672
|
+
"sourceFile": "silicaui-html/src/component.ts:3031"
|
|
10473
10673
|
},
|
|
10474
10674
|
{
|
|
10475
10675
|
"name": "NavigationMenuContent",
|
|
@@ -10479,7 +10679,7 @@
|
|
|
10479
10679
|
"icon": "nav",
|
|
10480
10680
|
"container": true,
|
|
10481
10681
|
"behaviors": [],
|
|
10482
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10682
|
+
"sourceFile": "silicaui-html/src/component.ts:3043"
|
|
10483
10683
|
},
|
|
10484
10684
|
{
|
|
10485
10685
|
"name": "NavigationMenuLink",
|
|
@@ -10489,7 +10689,7 @@
|
|
|
10489
10689
|
"icon": "nav",
|
|
10490
10690
|
"container": true,
|
|
10491
10691
|
"behaviors": [],
|
|
10492
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10692
|
+
"sourceFile": "silicaui-html/src/component.ts:3055"
|
|
10493
10693
|
},
|
|
10494
10694
|
{
|
|
10495
10695
|
"name": "Combobox",
|
|
@@ -10501,7 +10701,8 @@
|
|
|
10501
10701
|
"behaviors": [
|
|
10502
10702
|
"combobox"
|
|
10503
10703
|
],
|
|
10504
|
-
"
|
|
10704
|
+
"doc": "`combobox` — Combobox/Autocomplete/MultiSelect are all SINGLE, self- contained React components with an `items` prop (like `Select`, not a Root/Trigger/Content compound tree), so their vanilla macros follow the same shape: build the whole input+popup+options structure from `props.items` (unauthored structural sugar, same precedent as `Carousel`'s invented track/dots). Only `params.mode` differs.",
|
|
10705
|
+
"sourceFile": "silicaui-html/src/component.ts:3070"
|
|
10505
10706
|
},
|
|
10506
10707
|
{
|
|
10507
10708
|
"name": "Autocomplete",
|
|
@@ -10513,7 +10714,7 @@
|
|
|
10513
10714
|
"behaviors": [
|
|
10514
10715
|
"combobox"
|
|
10515
10716
|
],
|
|
10516
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10717
|
+
"sourceFile": "silicaui-html/src/component.ts:3077"
|
|
10517
10718
|
},
|
|
10518
10719
|
{
|
|
10519
10720
|
"name": "MultiSelect",
|
|
@@ -10525,7 +10726,7 @@
|
|
|
10525
10726
|
"behaviors": [
|
|
10526
10727
|
"combobox"
|
|
10527
10728
|
],
|
|
10528
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10729
|
+
"sourceFile": "silicaui-html/src/component.ts:3084"
|
|
10529
10730
|
},
|
|
10530
10731
|
{
|
|
10531
10732
|
"name": "DateInput",
|
|
@@ -10537,7 +10738,8 @@
|
|
|
10537
10738
|
"behaviors": [
|
|
10538
10739
|
"date-segment"
|
|
10539
10740
|
],
|
|
10540
|
-
"
|
|
10741
|
+
"doc": "`date-segment` — DateInput/DateTimeInput/TimeInput carry the behavior on their own root; DateRangeInput is two INDEPENDENT `date-segment` roots nested side by side (hydrate() scans the whole document for behavior roots, not just top-level ones, so both wire up with zero extra code).",
|
|
10742
|
+
"sourceFile": "silicaui-html/src/component.ts:3096"
|
|
10541
10743
|
},
|
|
10542
10744
|
{
|
|
10543
10745
|
"name": "DateRangeInput",
|
|
@@ -10549,7 +10751,7 @@
|
|
|
10549
10751
|
"behaviors": [
|
|
10550
10752
|
"date-segment"
|
|
10551
10753
|
],
|
|
10552
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10754
|
+
"sourceFile": "silicaui-html/src/component.ts:3114"
|
|
10553
10755
|
},
|
|
10554
10756
|
{
|
|
10555
10757
|
"name": "DateTimeInput",
|
|
@@ -10561,7 +10763,7 @@
|
|
|
10561
10763
|
"behaviors": [
|
|
10562
10764
|
"date-segment"
|
|
10563
10765
|
],
|
|
10564
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10766
|
+
"sourceFile": "silicaui-html/src/component.ts:3130"
|
|
10565
10767
|
},
|
|
10566
10768
|
{
|
|
10567
10769
|
"name": "TimeInput",
|
|
@@ -10573,7 +10775,7 @@
|
|
|
10573
10775
|
"behaviors": [
|
|
10574
10776
|
"date-segment"
|
|
10575
10777
|
],
|
|
10576
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10778
|
+
"sourceFile": "silicaui-html/src/component.ts:3156"
|
|
10577
10779
|
},
|
|
10578
10780
|
{
|
|
10579
10781
|
"name": "PinInput",
|
|
@@ -10585,7 +10787,8 @@
|
|
|
10585
10787
|
"behaviors": [
|
|
10586
10788
|
"pin-input"
|
|
10587
10789
|
],
|
|
10588
|
-
"
|
|
10790
|
+
"doc": "`pin-input` — real single-char `<input>` cells (index-based), unlike `date-segment`'s buffer-accumulate model — see `pin-input.ts`.",
|
|
10791
|
+
"sourceFile": "silicaui-html/src/component.ts:3182"
|
|
10589
10792
|
},
|
|
10590
10793
|
{
|
|
10591
10794
|
"name": "Calendar",
|
|
@@ -10597,7 +10800,8 @@
|
|
|
10597
10800
|
"behaviors": [
|
|
10598
10801
|
"calendar"
|
|
10599
10802
|
],
|
|
10600
|
-
"
|
|
10803
|
+
"doc": "`calendar` — Calendar carries the behavior directly; DatePicker/ DateRangePicker are the SAME calendar shell nested inside a `popover` root's panel (a `calendar` behavior root nested inside a `popover` one — `ownParts` already stops at nested behavior boundaries, so this needs no extra code, same composition trick as Lightbox nesting inside `modal`).",
|
|
10804
|
+
"sourceFile": "silicaui-html/src/component.ts:3227"
|
|
10601
10805
|
},
|
|
10602
10806
|
{
|
|
10603
10807
|
"name": "DatePicker",
|
|
@@ -10609,7 +10813,7 @@
|
|
|
10609
10813
|
"behaviors": [
|
|
10610
10814
|
"popover"
|
|
10611
10815
|
],
|
|
10612
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10816
|
+
"sourceFile": "silicaui-html/src/component.ts:3239"
|
|
10613
10817
|
},
|
|
10614
10818
|
{
|
|
10615
10819
|
"name": "DatePickerTrigger",
|
|
@@ -10619,7 +10823,7 @@
|
|
|
10619
10823
|
"icon": "calendar",
|
|
10620
10824
|
"container": true,
|
|
10621
10825
|
"behaviors": [],
|
|
10622
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10826
|
+
"sourceFile": "silicaui-html/src/component.ts:3251"
|
|
10623
10827
|
},
|
|
10624
10828
|
{
|
|
10625
10829
|
"name": "DatePickerContent",
|
|
@@ -10631,7 +10835,7 @@
|
|
|
10631
10835
|
"behaviors": [
|
|
10632
10836
|
"calendar"
|
|
10633
10837
|
],
|
|
10634
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10838
|
+
"sourceFile": "silicaui-html/src/component.ts:3263"
|
|
10635
10839
|
},
|
|
10636
10840
|
{
|
|
10637
10841
|
"name": "DateRangePicker",
|
|
@@ -10643,7 +10847,7 @@
|
|
|
10643
10847
|
"behaviors": [
|
|
10644
10848
|
"popover"
|
|
10645
10849
|
],
|
|
10646
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10850
|
+
"sourceFile": "silicaui-html/src/component.ts:3277"
|
|
10647
10851
|
},
|
|
10648
10852
|
{
|
|
10649
10853
|
"name": "DateRangePickerTrigger",
|
|
@@ -10653,7 +10857,7 @@
|
|
|
10653
10857
|
"icon": "calendar",
|
|
10654
10858
|
"container": true,
|
|
10655
10859
|
"behaviors": [],
|
|
10656
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10860
|
+
"sourceFile": "silicaui-html/src/component.ts:3289"
|
|
10657
10861
|
},
|
|
10658
10862
|
{
|
|
10659
10863
|
"name": "DateRangePickerContent",
|
|
@@ -10665,7 +10869,7 @@
|
|
|
10665
10869
|
"behaviors": [
|
|
10666
10870
|
"calendar"
|
|
10667
10871
|
],
|
|
10668
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10872
|
+
"sourceFile": "silicaui-html/src/component.ts:3301"
|
|
10669
10873
|
},
|
|
10670
10874
|
{
|
|
10671
10875
|
"name": "TreeView",
|
|
@@ -10677,7 +10881,8 @@
|
|
|
10677
10881
|
"behaviors": [
|
|
10678
10882
|
"tree"
|
|
10679
10883
|
],
|
|
10680
|
-
"
|
|
10884
|
+
"doc": "`tree` — TreeGroup defaults hidden unless `defaultExpanded`, same convention `AccordionPanel`/`CollapsiblePanel` established (the behavior only READS existing hidden state on hydrate, never forces it).",
|
|
10885
|
+
"sourceFile": "silicaui-html/src/component.ts:3321"
|
|
10681
10886
|
},
|
|
10682
10887
|
{
|
|
10683
10888
|
"name": "TreeNode",
|
|
@@ -10687,7 +10892,7 @@
|
|
|
10687
10892
|
"icon": "box",
|
|
10688
10893
|
"container": true,
|
|
10689
10894
|
"behaviors": [],
|
|
10690
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10895
|
+
"sourceFile": "silicaui-html/src/component.ts:3333"
|
|
10691
10896
|
},
|
|
10692
10897
|
{
|
|
10693
10898
|
"name": "TreeToggle",
|
|
@@ -10697,7 +10902,7 @@
|
|
|
10697
10902
|
"icon": "button",
|
|
10698
10903
|
"container": false,
|
|
10699
10904
|
"behaviors": [],
|
|
10700
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10905
|
+
"sourceFile": "silicaui-html/src/component.ts:3345"
|
|
10701
10906
|
},
|
|
10702
10907
|
{
|
|
10703
10908
|
"name": "TreeGroup",
|
|
@@ -10707,7 +10912,7 @@
|
|
|
10707
10912
|
"icon": "box",
|
|
10708
10913
|
"container": true,
|
|
10709
10914
|
"behaviors": [],
|
|
10710
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10915
|
+
"sourceFile": "silicaui-html/src/component.ts:3359"
|
|
10711
10916
|
},
|
|
10712
10917
|
{
|
|
10713
10918
|
"name": "Wizard",
|
|
@@ -10719,7 +10924,8 @@
|
|
|
10719
10924
|
"behaviors": [
|
|
10720
10925
|
"wizard"
|
|
10721
10926
|
],
|
|
10722
|
-
"
|
|
10927
|
+
"doc": "`wizard` — Back/Next reuse the `prev`/`next` roles (already exist).",
|
|
10928
|
+
"sourceFile": "silicaui-html/src/component.ts:3373"
|
|
10723
10929
|
},
|
|
10724
10930
|
{
|
|
10725
10931
|
"name": "WizardStep",
|
|
@@ -10729,7 +10935,7 @@
|
|
|
10729
10935
|
"icon": "box",
|
|
10730
10936
|
"container": true,
|
|
10731
10937
|
"behaviors": [],
|
|
10732
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10938
|
+
"sourceFile": "silicaui-html/src/component.ts:3385"
|
|
10733
10939
|
},
|
|
10734
10940
|
{
|
|
10735
10941
|
"name": "WizardPanel",
|
|
@@ -10739,7 +10945,7 @@
|
|
|
10739
10945
|
"icon": "box",
|
|
10740
10946
|
"container": true,
|
|
10741
10947
|
"behaviors": [],
|
|
10742
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10948
|
+
"sourceFile": "silicaui-html/src/component.ts:3399"
|
|
10743
10949
|
},
|
|
10744
10950
|
{
|
|
10745
10951
|
"name": "WizardBack",
|
|
@@ -10749,7 +10955,7 @@
|
|
|
10749
10955
|
"icon": "button",
|
|
10750
10956
|
"container": true,
|
|
10751
10957
|
"behaviors": [],
|
|
10752
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10958
|
+
"sourceFile": "silicaui-html/src/component.ts:3411"
|
|
10753
10959
|
},
|
|
10754
10960
|
{
|
|
10755
10961
|
"name": "WizardNext",
|
|
@@ -10759,7 +10965,7 @@
|
|
|
10759
10965
|
"icon": "button",
|
|
10760
10966
|
"container": true,
|
|
10761
10967
|
"behaviors": [],
|
|
10762
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
10968
|
+
"sourceFile": "silicaui-html/src/component.ts:3423"
|
|
10763
10969
|
},
|
|
10764
10970
|
{
|
|
10765
10971
|
"name": "NumberField",
|
|
@@ -10771,7 +10977,8 @@
|
|
|
10771
10977
|
"behaviors": [
|
|
10772
10978
|
"number-field"
|
|
10773
10979
|
],
|
|
10774
|
-
"
|
|
10980
|
+
"doc": "`number-field` — native `<input type=number>`, no Base-UI-only CSS selectors to work around (confirmed via the CSS check this pass).",
|
|
10981
|
+
"sourceFile": "silicaui-html/src/component.ts:3441"
|
|
10775
10982
|
},
|
|
10776
10983
|
{
|
|
10777
10984
|
"name": "ToggleGroup",
|
|
@@ -10783,7 +10990,8 @@
|
|
|
10783
10990
|
"behaviors": [
|
|
10784
10991
|
"toggle-group"
|
|
10785
10992
|
],
|
|
10786
|
-
"
|
|
10993
|
+
"doc": "`toggle-group` — a toolbar of toggle buttons, NOT a listbox (distinct ARIA pattern from `SelectionList`: `aria-pressed` on real buttons).",
|
|
10994
|
+
"sourceFile": "silicaui-html/src/component.ts:3471"
|
|
10787
10995
|
},
|
|
10788
10996
|
{
|
|
10789
10997
|
"name": "ToggleGroupItem",
|
|
@@ -10793,7 +11001,7 @@
|
|
|
10793
11001
|
"icon": "toggle",
|
|
10794
11002
|
"container": true,
|
|
10795
11003
|
"behaviors": [],
|
|
10796
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
11004
|
+
"sourceFile": "silicaui-html/src/component.ts:3489"
|
|
10797
11005
|
},
|
|
10798
11006
|
{
|
|
10799
11007
|
"name": "Range",
|
|
@@ -10805,7 +11013,8 @@
|
|
|
10805
11013
|
"behaviors": [
|
|
10806
11014
|
"slider"
|
|
10807
11015
|
],
|
|
10808
|
-
"
|
|
11016
|
+
"doc": "`slider` — Range (compact) and Slider (rich, `showValue`) are both single self-contained components; see `sliderExpand`. Base UI's three addressable Track/Indicator/Thumb nodes are rebuilt here since a bare `<input type=range>` has no such structure (confirmed via the CSS check this pass) — real pointer-drag + keyboard geometry, not a native fallback.",
|
|
11017
|
+
"sourceFile": "silicaui-html/src/component.ts:3509"
|
|
10809
11018
|
},
|
|
10810
11019
|
{
|
|
10811
11020
|
"name": "Slider",
|
|
@@ -10817,7 +11026,7 @@
|
|
|
10817
11026
|
"behaviors": [
|
|
10818
11027
|
"slider"
|
|
10819
11028
|
],
|
|
10820
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
11029
|
+
"sourceFile": "silicaui-html/src/component.ts:3510"
|
|
10821
11030
|
},
|
|
10822
11031
|
{
|
|
10823
11032
|
"name": "Switch",
|
|
@@ -10829,7 +11038,8 @@
|
|
|
10829
11038
|
"behaviors": [
|
|
10830
11039
|
"switch"
|
|
10831
11040
|
],
|
|
10832
|
-
"
|
|
11041
|
+
"doc": "`switch` — a `role=switch` element the CSS keys off `[data-checked]` for (Base UI's synthetic attribute, ported verbatim — a bare `<input type=checkbox>` would NOT match `.switch`'s selectors).",
|
|
11042
|
+
"sourceFile": "silicaui-html/src/component.ts:3516"
|
|
10833
11043
|
},
|
|
10834
11044
|
{
|
|
10835
11045
|
"name": "Rating",
|
|
@@ -10841,7 +11051,8 @@
|
|
|
10841
11051
|
"behaviors": [
|
|
10842
11052
|
"rating"
|
|
10843
11053
|
],
|
|
10844
|
-
"
|
|
11054
|
+
"doc": "`rating` — not Base UI-backed in React either (plain JSX-set `data-filled`), so this ports near 1:1.",
|
|
11055
|
+
"sourceFile": "silicaui-html/src/component.ts:3540"
|
|
10845
11056
|
},
|
|
10846
11057
|
{
|
|
10847
11058
|
"name": "ScrollArea",
|
|
@@ -10853,7 +11064,8 @@
|
|
|
10853
11064
|
"behaviors": [
|
|
10854
11065
|
"scroll-area"
|
|
10855
11066
|
],
|
|
10856
|
-
"
|
|
11067
|
+
"doc": "`scroll-area` — a real `overflow:auto` `track` (CSS hides its native scrollbar) with a custom `thumb` the behavior sizes/positions from the viewport/content ratio — not achievable as a pure-CSS trick (confirmed this pass).",
|
|
11068
|
+
"sourceFile": "silicaui-html/src/component.ts:3576"
|
|
10857
11069
|
},
|
|
10858
11070
|
{
|
|
10859
11071
|
"name": "OverflowList",
|
|
@@ -10865,7 +11077,8 @@
|
|
|
10865
11077
|
"behaviors": [
|
|
10866
11078
|
"overflow-list"
|
|
10867
11079
|
],
|
|
10868
|
-
"
|
|
11080
|
+
"doc": "`overflow-list` — real `item`s reparent into the `panel` behind a \"+N\" `trigger` once they don't fit; `params.maxVisible` forces a fixed count when real layout isn't available (see `overflow-list.ts`).",
|
|
11081
|
+
"sourceFile": "silicaui-html/src/component.ts:3596"
|
|
10869
11082
|
},
|
|
10870
11083
|
{
|
|
10871
11084
|
"name": "OverflowListItem",
|
|
@@ -10875,7 +11088,7 @@
|
|
|
10875
11088
|
"icon": "box",
|
|
10876
11089
|
"container": true,
|
|
10877
11090
|
"behaviors": [],
|
|
10878
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
11091
|
+
"sourceFile": "silicaui-html/src/component.ts:3624"
|
|
10879
11092
|
},
|
|
10880
11093
|
{
|
|
10881
11094
|
"name": "Dropzone",
|
|
@@ -10887,7 +11100,8 @@
|
|
|
10887
11100
|
"behaviors": [
|
|
10888
11101
|
"dropzone"
|
|
10889
11102
|
],
|
|
10890
|
-
"
|
|
11103
|
+
"doc": "`dropzone` — Dropzone is bare (presentational only, host owns the file list via `onFiles`-equivalent listening for `sui:file`); FileUpload adds a managed `list` part the behavior renders thumbnail/name/remove rows into directly (the one place a behavior owns real create-your-own-markup state, same precedent as `Carousel`'s track/dots).",
|
|
11104
|
+
"sourceFile": "silicaui-html/src/component.ts:3641"
|
|
10891
11105
|
},
|
|
10892
11106
|
{
|
|
10893
11107
|
"name": "FileUpload",
|
|
@@ -10899,7 +11113,7 @@
|
|
|
10899
11113
|
"behaviors": [
|
|
10900
11114
|
"dropzone"
|
|
10901
11115
|
],
|
|
10902
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
11116
|
+
"sourceFile": "silicaui-html/src/component.ts:3642"
|
|
10903
11117
|
},
|
|
10904
11118
|
{
|
|
10905
11119
|
"name": "PhoneInput",
|
|
@@ -10911,7 +11125,8 @@
|
|
|
10911
11125
|
"behaviors": [
|
|
10912
11126
|
"phone-input"
|
|
10913
11127
|
],
|
|
10914
|
-
"
|
|
11128
|
+
"doc": "`phone-input` — a country `<select>` (options carry `data-dial`) joined with a digits `input`; the country list is plain static data, ported verbatim (no React-only mechanism was involved in the original).",
|
|
11129
|
+
"sourceFile": "silicaui-html/src/component.ts:3648"
|
|
10915
11130
|
},
|
|
10916
11131
|
{
|
|
10917
11132
|
"name": "ThemeController",
|
|
@@ -10923,7 +11138,8 @@
|
|
|
10923
11138
|
"behaviors": [
|
|
10924
11139
|
"theme-toggle"
|
|
10925
11140
|
],
|
|
10926
|
-
"
|
|
11141
|
+
"doc": "`theme-toggle` — thin wiring over the existing `setTheme`/`getTheme` primitives (see `theme-toggle.ts`); there was no new state machine to build here, just a registration.",
|
|
11142
|
+
"sourceFile": "silicaui-html/src/component.ts:3687"
|
|
10927
11143
|
},
|
|
10928
11144
|
{
|
|
10929
11145
|
"name": "Overlay",
|
|
@@ -10933,7 +11149,8 @@
|
|
|
10933
11149
|
"icon": "image",
|
|
10934
11150
|
"container": true,
|
|
10935
11151
|
"behaviors": [],
|
|
10936
|
-
"
|
|
11152
|
+
"doc": "Overlay — pure CSS (`[data-reveal=\"hover\"]:hover .overlay-scrim`); no behavior at all (confirmed this pass). OverlayScrim is a real sub-atom (not a plain div) because `data-placement` is behavior-relevant to the CSS, same rule that earned ToolbarSeparator its own atom.",
|
|
11153
|
+
"sourceFile": "silicaui-html/src/component.ts:3709"
|
|
10937
11154
|
},
|
|
10938
11155
|
{
|
|
10939
11156
|
"name": "OverlayScrim",
|
|
@@ -10943,7 +11160,7 @@
|
|
|
10943
11160
|
"icon": "image",
|
|
10944
11161
|
"container": true,
|
|
10945
11162
|
"behaviors": [],
|
|
10946
|
-
"sourceFile": "silicaui-html/src/component.ts:
|
|
11163
|
+
"sourceFile": "silicaui-html/src/component.ts:3717"
|
|
10947
11164
|
},
|
|
10948
11165
|
{
|
|
10949
11166
|
"name": "accordion",
|