@wizeworks/silicaui-mcp 0.13.0 → 0.15.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/classes.json +1 -0
- package/dist/data/components.json +9 -9
- package/dist/data/packages.json +10 -10
- package/package.json +1 -1
package/dist/data/classes.json
CHANGED
|
@@ -339,7 +339,7 @@
|
|
|
339
339
|
]
|
|
340
340
|
}
|
|
341
341
|
],
|
|
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 );\n}"
|
|
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",
|
|
@@ -1795,7 +1795,7 @@
|
|
|
1795
1795
|
"members": []
|
|
1796
1796
|
}
|
|
1797
1797
|
],
|
|
1798
|
-
"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 );\n}"
|
|
1798
|
+
"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}"
|
|
1799
1799
|
},
|
|
1800
1800
|
{
|
|
1801
1801
|
"name": "Table",
|
|
@@ -5042,7 +5042,7 @@
|
|
|
5042
5042
|
"members": []
|
|
5043
5043
|
}
|
|
5044
5044
|
],
|
|
5045
|
-
"usageExample": "import { Navbar, NavbarStart, NavbarCenter, NavbarEnd, Button } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function NavbarDemo() {\n return (\n <Section title=\"Real use · site header\">\n
|
|
5045
|
+
"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}"
|
|
5046
5046
|
},
|
|
5047
5047
|
{
|
|
5048
5048
|
"name": "NavigationMenu",
|
|
@@ -5530,7 +5530,7 @@
|
|
|
5530
5530
|
]
|
|
5531
5531
|
}
|
|
5532
5532
|
],
|
|
5533
|
-
"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 );\n}"
|
|
5533
|
+
"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}"
|
|
5534
5534
|
},
|
|
5535
5535
|
{
|
|
5536
5536
|
"name": "AlertDialog",
|
|
@@ -5653,7 +5653,7 @@
|
|
|
5653
5653
|
]
|
|
5654
5654
|
}
|
|
5655
5655
|
],
|
|
5656
|
-
"usageExample": "import {\n Dialog,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogHeader,\n DialogFooter,\n Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function DialogDemo() {\n return (\n <>\n <Section title=\"Real use · destructive-action confirmation\">\n <Dialog>\n <DialogTrigger>\n <Button color=\"error\" variant=\"outline\">\n Delete project…\n </Button>\n </DialogTrigger>\n <DialogContent>\n <DialogTitle>Delete project?</DialogTitle>\n <DialogDescription>\n This will permanently delete the project and all its data. This\n can't be undone.\n </DialogDescription>\n <div className=\"mt-4 flex justify-end gap-2\">\n <DialogClose>\n <Button variant=\"ghost\" color=\"neutral\">\n Cancel\n </Button>\n </DialogClose>\n <DialogClose>\n <Button color=\"error\">Delete</Button>\n </DialogClose>\n </div>\n </DialogContent>\n </Dialog>\n </Section>\n\n <Section title=\"Header + Footer · placeable docking bars, sticky footer\">\n <Row>\n <Dialog>\n <DialogTrigger>\n <Button variant=\"outline\">Header/Footer</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Invite teammates</DialogTitle>\n <DialogClose>\n <Button variant=\"ghost\" shape=\"circle\" size=\"sm\">\n ✕\n </Button>\n </DialogClose>\n </DialogHeader>\n <DialogDescription>\n Send an invite by email — they'll get access once they accept.\n </DialogDescription>\n <DialogFooter>\n <DialogClose>\n <Button variant=\"ghost\" color=\"neutral\">\n Cancel\n </Button>\n </DialogClose>\n <DialogClose>\n <Button>Send invite</Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n\n <Dialog>\n <DialogTrigger>\n <Button variant=\"outline\">Sticky footer (scrolling content)</Button>\n </DialogTrigger>\n <DialogContent className=\"max-h-[70dvh]\">\n <DialogHeader sticky>\n <DialogTitle>Terms of service</DialogTitle>\n </DialogHeader>\n <DialogDescription>\n {Array.from({ length: 12 }, (_, i) => (\n <p key={i} className=\"mb-3\">\n Section {i + 1} — placeholder legal text to force this\n dialog to scroll so the sticky footer below stays pinned.\n </p>\n ))}\n </DialogDescription>\n <DialogFooter sticky>\n <DialogClose>\n <Button variant=\"ghost\" color=\"neutral\">\n Decline\n </Button>\n </DialogClose>\n <DialogClose>\n <Button>Accept</Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </Row>\n </Section>\n </>\n );\n}"
|
|
5656
|
+
"usageExample": "import {\n Dialog,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogHeader,\n DialogFooter,\n Button,\n} from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function DialogDemo() {\n return (\n <>\n <Section title=\"Real use · destructive-action confirmation\">\n <Dialog>\n <DialogTrigger>\n <Button color=\"error\" variant=\"outline\">\n Delete project…\n </Button>\n </DialogTrigger>\n <DialogContent>\n <DialogTitle>Delete project?</DialogTitle>\n <DialogDescription>\n This will permanently delete the project and all its data. This\n can't be undone.\n </DialogDescription>\n <div className=\"mt-4 flex justify-end gap-2\">\n <DialogClose>\n <Button variant=\"ghost\" color=\"neutral\">\n Cancel\n </Button>\n </DialogClose>\n <DialogClose>\n <Button color=\"error\">Delete</Button>\n </DialogClose>\n </div>\n </DialogContent>\n </Dialog>\n </Section>\n\n <Section title=\"Header + Footer · placeable docking bars, sticky footer\">\n <Row>\n <Dialog>\n <DialogTrigger>\n <Button variant=\"outline\">Header/Footer</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Invite teammates</DialogTitle>\n <DialogClose>\n <Button variant=\"ghost\" shape=\"circle\" size=\"sm\">\n ✕\n </Button>\n </DialogClose>\n </DialogHeader>\n <DialogDescription>\n Send an invite by email — they'll get access once they accept.\n </DialogDescription>\n <DialogFooter>\n <DialogClose>\n <Button variant=\"ghost\" color=\"neutral\">\n Cancel\n </Button>\n </DialogClose>\n <DialogClose>\n <Button>Send invite</Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n\n <Dialog>\n <DialogTrigger>\n <Button variant=\"outline\">Sticky footer (scrolling content)</Button>\n </DialogTrigger>\n <DialogContent className=\"max-h-[70dvh]\">\n <DialogHeader sticky>\n <DialogTitle>Terms of service</DialogTitle>\n </DialogHeader>\n <DialogDescription>\n {Array.from({ length: 12 }, (_, i) => (\n <p key={i} className=\"mb-3\">\n Section {i + 1} — placeholder legal text to force this\n dialog to scroll so the sticky footer below stays pinned.\n </p>\n ))}\n </DialogDescription>\n <DialogFooter sticky>\n <DialogClose>\n <Button variant=\"ghost\" color=\"neutral\">\n Decline\n </Button>\n </DialogClose>\n <DialogClose>\n <Button>Accept</Button>\n </DialogClose>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </Row>\n </Section>\n\n <Section title=\"Glass · frosted popup over the dimmed backdrop\">\n <Dialog>\n <DialogTrigger>\n <Button variant=\"outline\">Glass dialog</Button>\n </DialogTrigger>\n <DialogContent className=\"glass\">\n <DialogTitle>Restart required</DialogTitle>\n <DialogDescription>\n <code>DialogContent className="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}"
|
|
5657
5657
|
},
|
|
5658
5658
|
{
|
|
5659
5659
|
"name": "Drawer",
|
|
@@ -5932,7 +5932,7 @@
|
|
|
5932
5932
|
]
|
|
5933
5933
|
}
|
|
5934
5934
|
],
|
|
5935
|
-
"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 <Section title=\"Real use · click-triggered info panel\">\n
|
|
5935
|
+
"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}"
|
|
5936
5936
|
},
|
|
5937
5937
|
{
|
|
5938
5938
|
"name": "Progress",
|
|
@@ -6099,7 +6099,7 @@
|
|
|
6099
6099
|
"package": "@wizeworks/silicaui-react",
|
|
6100
6100
|
"category": "Feedback & overlay",
|
|
6101
6101
|
"sourceFile": "silicaui-react/src/toast.tsx",
|
|
6102
|
-
"description": "Silica ToastProvider — wrap your app once, then call `useToast().add(...)`. <ToastProvider> <App /> </ToastProvider> const toast = useToast(); toast.add({ title: \"Saved\", description: \"Your changes are saved.\", type: \"success\" });",
|
|
6102
|
+
"description": "Silica ToastProvider — wrap your app once, then call `useToast().add(...)`. <ToastProvider> <App /> </ToastProvider> const toast = useToast(); toast.add({ title: \"Saved\", description: \"Your changes are saved.\", type: \"success\" }); For a glass toast, pass a `className` through `data` (there's no direct `className` on the imperative `add()` call): toast.add({ title: \"Saved\", data: { className: \"glass\" } });",
|
|
6103
6103
|
"props": [
|
|
6104
6104
|
{
|
|
6105
6105
|
"name": "ToastProviderProps",
|
|
@@ -6281,7 +6281,7 @@
|
|
|
6281
6281
|
"members": []
|
|
6282
6282
|
}
|
|
6283
6283
|
],
|
|
6284
|
-
"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 );\n}"
|
|
6284
|
+
"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}"
|
|
6285
6285
|
},
|
|
6286
6286
|
{
|
|
6287
6287
|
"name": "Hero",
|
|
@@ -6809,7 +6809,7 @@
|
|
|
6809
6809
|
"members": []
|
|
6810
6810
|
}
|
|
6811
6811
|
],
|
|
6812
|
-
"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=\"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}"
|
|
6812
|
+
"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}"
|
|
6813
6813
|
},
|
|
6814
6814
|
{
|
|
6815
6815
|
"name": "TreeView",
|
package/dist/data/packages.json
CHANGED
|
@@ -3,60 +3,60 @@
|
|
|
3
3
|
"name": "@wizeworks/silicaui",
|
|
4
4
|
"purpose": "Tailwind v4 plugin — design tokens + component CSS classes (the vocabulary every other package builds on).",
|
|
5
5
|
"install": "pnpm add -D @wizeworks/silicaui tailwindcss",
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.14.0"
|
|
7
7
|
},
|
|
8
8
|
{
|
|
9
9
|
"name": "@wizeworks/silicaui-react",
|
|
10
10
|
"purpose": "Typed React components over the @wizeworks/silicaui classes, built on Base UI.",
|
|
11
11
|
"install": "pnpm add @wizeworks/silicaui-react",
|
|
12
|
-
"version": "0.
|
|
12
|
+
"version": "0.14.0"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
"name": "@wizeworks/silicaui-html",
|
|
16
16
|
"purpose": "Framework-neutral node-tree schema + HTML projection + composed blocks (for non-React output).",
|
|
17
17
|
"install": "pnpm add @wizeworks/silicaui-html",
|
|
18
|
-
"version": "0.
|
|
18
|
+
"version": "0.14.0"
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"name": "@wizeworks/silicaui-behaviors",
|
|
22
22
|
"purpose": "Zero-dependency runtime that hydrates data-sui-* markers with interactivity (the vanilla-JS counterpart to @wizeworks/silicaui-react's Base UI behavior).",
|
|
23
23
|
"install": "pnpm add @wizeworks/silicaui-behaviors",
|
|
24
|
-
"version": "0.
|
|
24
|
+
"version": "0.14.0"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
"name": "@wizeworks/silicaui-builder",
|
|
28
28
|
"purpose": "The visual document editor/engine that powers the SilicaUI sitebuilder — also consumable directly: the framework-neutral engine at the root import, the `Builder` React component + `BuilderHost` interface (catalog/inspectorPanels/pickAsset) at `/react`, and the email editor at `/email` and `/email/react`.",
|
|
29
29
|
"install": "pnpm add @wizeworks/silicaui-builder @wizeworks/silicaui-react",
|
|
30
|
-
"version": "0.
|
|
30
|
+
"version": "0.14.0"
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
"name": "@wizeworks/silicaui-charts",
|
|
34
34
|
"purpose": "Apache ECharts wrapped and auto-themed to Silica's design tokens.",
|
|
35
35
|
"install": "pnpm add @wizeworks/silicaui-charts @wizeworks/silicaui-react",
|
|
36
|
-
"version": "0.
|
|
36
|
+
"version": "0.14.0"
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"name": "@wizeworks/silicaui-table",
|
|
40
40
|
"purpose": "TanStack Table wrapped in Silica's table CSS.",
|
|
41
41
|
"install": "pnpm add @wizeworks/silicaui-table @wizeworks/silicaui-react",
|
|
42
|
-
"version": "0.
|
|
42
|
+
"version": "0.14.0"
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
"name": "@wizeworks/silicaui-editor",
|
|
46
46
|
"purpose": "TipTap rich-text editor with a Silica-styled toolbar.",
|
|
47
47
|
"install": "pnpm add @wizeworks/silicaui-editor @wizeworks/silicaui-react",
|
|
48
|
-
"version": "0.
|
|
48
|
+
"version": "0.14.0"
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"name": "@wizeworks/silicaui-dnd",
|
|
52
52
|
"purpose": "dnd-kit wrapped — SortableList + drag primitives.",
|
|
53
53
|
"install": "pnpm add @wizeworks/silicaui-dnd @wizeworks/silicaui-react",
|
|
54
|
-
"version": "0.
|
|
54
|
+
"version": "0.14.0"
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
"name": "@wizeworks/silicaui-panels",
|
|
58
58
|
"purpose": "react-resizable-panels wrapped in Silica styling.",
|
|
59
59
|
"install": "pnpm add @wizeworks/silicaui-panels @wizeworks/silicaui-react",
|
|
60
|
-
"version": "0.
|
|
60
|
+
"version": "0.14.0"
|
|
61
61
|
}
|
|
62
62
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wizeworks/silicaui-mcp",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"description": "A local MCP server that lets AI coding assistants query the Silica UI design system — real class names, component props, blocks, and behaviors — instead of guessing.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|