@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/showcase/specimens/actions.js

@@ -1,15 +1,40 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowUpRight, ChevronDown, ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
-import { Button } from "../../components/button.js";
+import { ArrowUpRight, ChevronLeft, ChevronRight, Download, Plus, X } from "lucide-react";
+import { Button, ButtonLink } from "../../components/button.js";
 import { ButtonGroup } from "../../components/button-group.js";
+import { Card } from "../../components/card.js";
 import { CopyButton } from "../../components/copy-button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "../../components/dropdown-menu.js";
+import { LoadMoreButton } from "../../components/load-more-button.js";
 import { PageActionsRow } from "../../components/page-actions.js";
 import { nothing, PAGE_MENU } from "../samples.js";
+const TEXT_SIZES = ["xs", "sm", "default", "lg"];
+const LOOKS = [
+    { look: "default", label: "New Agent" },
+    { look: "outline", label: "Import" },
+    { look: "secondary", label: "Preview" },
+    { look: "ghost", label: "Skip" },
+    { look: "destructive", label: "Delete Agent" },
+    { look: "link", label: "View logs" },
+];
+const ICON_SIZES = [
+    { size: "icon-xs", label: "Add Agent, extra small" },
+    { size: "icon-sm", label: "Add Agent, small" },
+    { size: "icon", label: "Add Agent" },
+    { size: "icon-lg", label: "Add Agent, large" },
+];
+const EVENTS = ["Rossi Ottica connected", "Invoice 0412 paid", "Agent updated"];
+function Row({ children, label }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [label ? (_jsx("span", { className: "w-24 shrink-0 text-body-sm text-muted-foreground", children: label })) : null, children] }));
+}
+function Hint({ children }) {
+    return _jsx("span", { className: "text-body-sm text-muted-foreground", children: children });
+}
 export const ACTIONS = {
-    Button: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { children: [_jsx(Plus, { "data-icon": "inline-start", "aria-hidden": "true" }), "New Agent"] }), _jsx(Button, { variant: "outline", children: "Import" }), _jsx(Button, { variant: "secondary", children: "Preview" }), _jsx(Button, { variant: "ghost", children: "Skip" }), _jsx(Button, { variant: "destructive", children: "Delete Agent" }), _jsx(Button, { variant: "link", children: "View logs" }), _jsx(Button, { disabled: true, variant: "outline", children: "Connect" }), _jsxs(Button, { variant: "outline", children: ["Open Billing", _jsx(ArrowUpRight, { "data-icon": "inline-end", "aria-hidden": "true" })] })] })),
-    ButtonGroup: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs(ButtonGroup, { "aria-label": "Status filter", children: [_jsx(Button, { variant: "outline", children: "Status: Needs attention" }), _jsx(Button, { "aria-label": "Remove filter: Status", size: "icon", variant: "outline", children: _jsx(X, { "aria-hidden": "true" }) })] }), _jsxs(ButtonGroup, { "aria-label": "Pages", children: [_jsx(Button, { "aria-label": "Previous page", disabled: true, size: "icon", variant: "outline", children: _jsx(ChevronLeft, { "aria-hidden": "true" }) }), _jsx(Button, { "aria-label": "Next page", size: "icon", variant: "outline", children: _jsx(ChevronRight, { "aria-hidden": "true" }) })] }), _jsxs(ButtonGroup, { "aria-label": "Download report", children: [_jsx(Button, { variant: "outline", children: "Download PDF" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { "aria-label": "More download formats", render: _jsx(Button, { size: "icon", variant: "outline" }), children: _jsx(ChevronDown, { "aria-hidden": "true" }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuRadioGroup, { value: "pdf", children: [_jsx(DropdownMenuRadioItem, { value: "pdf", children: "Download PDF" }), _jsx(DropdownMenuRadioItem, { value: "csv", children: "Download CSV" }), _jsx(DropdownMenuRadioItem, { value: "xlsx", children: "Download Excel" })] }) })] })] })] })),
+    Button: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "flex flex-col gap-3", children: LOOKS.map(({ look, label }) => (_jsx(Row, { label: look, children: TEXT_SIZES.map((size) => (_jsx(Button, { size: size, variant: look, children: label }, size))) }, look))) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Row, { label: "prefix", children: TEXT_SIZES.map((size) => (_jsx(Button, { prefix: _jsx(Plus, { "aria-hidden": "true" }), size: size, children: "New Agent" }, size))) }), _jsx(Row, { label: "suffix", children: TEXT_SIZES.map((size) => (_jsx(Button, { size: size, suffix: _jsx(ArrowUpRight, { "aria-hidden": "true" }), variant: "outline", children: "Open Billing" }, size))) }), _jsx(Row, { label: "both", children: TEXT_SIZES.map((size) => (_jsx(Button, { prefix: _jsx(Download, { "aria-hidden": "true" }), size: size, suffix: _jsx(ArrowUpRight, { "aria-hidden": "true" }), variant: "secondary", children: "Download report" }, size))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Row, { label: "icon only", children: ICON_SIZES.map(({ size, label }) => (_jsx(Button, { "aria-label": label, size: size, variant: "outline", children: _jsx(Plus, { "aria-hidden": "true" }) }, size))) }), _jsx(Row, { label: "circle", children: ICON_SIZES.map(({ size, label }) => (_jsx(Button, { "aria-label": label, shape: "circle", size: size, variant: "outline", children: _jsx(Plus, { "aria-hidden": "true" }) }, size))) }), _jsx(Row, { label: "rounded", children: TEXT_SIZES.map((size) => (_jsx(Button, { shape: "rounded", size: size, variant: "outline", children: "Invite member" }, size))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Row, { label: "disabled", children: [_jsx(Button, { disabled: true, variant: "outline", children: "Connect" }), _jsx(Hint, { children: "Add a billing account first." })] }), _jsxs(Row, { label: "loading", children: [_jsx(Button, { variant: "outline", children: "Save" }), _jsx(Button, { loading: true, loadingLabel: "Saving", variant: "outline", children: "Save" }), _jsx(Button, { children: "Invite member" }), _jsx(Button, { loading: true, loadingLabel: "Inviting member", children: "Invite member" })] })] })] })),
+    ButtonLink: () => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Row, { label: "variants", children: [_jsx(ButtonLink, { href: "#portal", children: "Open Portal" }), _jsx(ButtonLink, { href: "#invoices", variant: "outline", children: "View invoices" }), _jsx(ButtonLink, { href: "#agents", variant: "secondary", children: "All Agents" }), _jsx(ButtonLink, { href: "#settings", variant: "ghost", children: "Settings" })] }), _jsx(Row, { label: "sizes", children: TEXT_SIZES.map((size) => (_jsx(ButtonLink, { href: "#portal", size: size, variant: "outline", children: "Open Portal" }, size))) }), _jsx(Row, { label: "external", children: _jsx(ButtonLink, { href: "https://docs.nadicode.com", rel: "noreferrer", suffix: _jsx(ArrowUpRight, { "aria-hidden": "true" }), target: "_blank", variant: "outline", children: "Read the guide" }) }), _jsx(Row, { label: "icon only", children: _jsx(ButtonLink, { "aria-label": "Open Rossi Ottica", href: "#rossi-ottica", size: "icon", variant: "outline", children: _jsx(ArrowUpRight, { "aria-hidden": "true" }) }) }), _jsxs(Row, { label: "loading", children: [_jsx(ButtonLink, { href: "#portal", loading: true, loadingLabel: "Opening Portal", variant: "outline", children: "Open Portal" }), _jsx(ButtonLink, { disabled: true, href: "#invoices", variant: "outline", children: "Download invoice" }), _jsx(Hint, { children: "The invoice is still being prepared." })] })] })),
+    ButtonGroup: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs(ButtonGroup, { "aria-label": "Status filter", children: [_jsx(Button, { variant: "outline", children: "Status: Needs attention" }), _jsx(Button, { "aria-label": "Remove filter: Status", size: "icon", variant: "outline", children: _jsx(X, { "aria-hidden": "true" }) })] }), _jsxs(ButtonGroup, { "aria-label": "Pages", children: [_jsx(Button, { "aria-label": "Previous page", disabled: true, size: "icon", variant: "outline", children: _jsx(ChevronLeft, { "aria-hidden": "true" }) }), _jsx(Button, { "aria-label": "Next page", size: "icon", variant: "outline", children: _jsx(ChevronRight, { "aria-hidden": "true" }) })] })] })),
+    LoadMoreButton: () => (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("ul", { className: "flex flex-col gap-1 text-body-sm", children: EVENTS.map((event) => (_jsx("li", { children: event }, event))) }), _jsx(LoadMoreButton, { loading: false, loadingLabel: "Loading more events", onClick: nothing, children: "Load more events" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx("ul", { className: "flex flex-col gap-1 text-body-sm", children: EVENTS.map((event) => (_jsx("li", { children: event }, event))) }), _jsx(LoadMoreButton, { loading: true, loadingLabel: "Loading more events", children: "Load more events" })] }), _jsxs(Card, { className: "gap-0 py-0", surface: "outlined", children: [_jsx("ul", { className: "flex flex-col gap-1 p-4 text-body-sm", children: EVENTS.map((event) => (_jsx("li", { children: event }, event))) }), _jsx(LoadMoreButton, { className: "border-x-0 border-b-0", loading: false, loadingLabel: "Loading more events", noBorderRadius: true, noGap: true, onClick: nothing, children: "Load more events" })] })] })),
     CopyButton: () => (_jsxs("div", { className: "flex items-center gap-2 font-mono text-sm", children: ["agt_0042", _jsx(CopyButton, { copiedLabel: "Copied", copyFailedLabel: "Couldn't copy", copyLabel: "Copy Agent ID", value: "agt_0042" })] })),
     PageActions: () => (_jsx(PageActionsRow, { menu: PAGE_MENU, primary: { label: "Invite customer", icon: _jsx(Plus, {}), onClick: nothing }, secondary: { label: "Import", onClick: nothing } })),
 };

package/dist/showcase/specimens/charts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/charts.tsx"],"names":[],"mappings":"AAyEA,iBAAS,wBAAwB,gCAiBhC;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;CA2KQ,CAAC"}
+{"version":3,"file":"charts.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/charts.tsx"],"names":[],"mappings":"AAmFA,iBAAS,wBAAwB,gCA0BhC;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAwLQ,CAAC"}

package/dist/showcase/specimens/charts.js

@@ -55,14 +55,18 @@ const ACTIVITY = Array.from({ length: 60 }, (_, day) => ({
     date: new Date(Date.UTC(2026, 7, 16 + day)).toISOString().slice(0, 10),
     value: (day * 7) % 11,
 }));
+const RANGE_PRESET_LABELS = {
+    "7d": "Past 7 days",
+    "14d": "Past 14 days",
+    "30d": "Past 30 days",
+    cycle: "This cycle",
+};
+const RETENTION_FROM = "2026-07-16";
+const RETENTION_TO = "2026-10-14";
 function DateRangeControlSpecimen() {
     const [range, setRange] = useState({ kind: "preset", preset: "30d" });
-    return (_jsx(DateRangeControl, { customLabel: "Custom", label: "Date range", onChange: setRange, presetLabels: {
-            "7d": "Past 7 days",
-            "14d": "Past 14 days",
-            "30d": "Past 30 days",
-            cycle: "This cycle",
-        }, formatCustomValue: ({ from, to }) => `${from} – ${to}`, value: range }));
+    const [smallRange, setSmallRange] = useState({ kind: "preset", preset: "7d" });
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(DateRangeControl, { formatCustomValue: ({ from, to }) => `${from} – ${to}`, label: "Date range", maxValue: RETENTION_TO, minValue: RETENTION_FROM, onChange: setRange, presetLabels: RANGE_PRESET_LABELS, value: range }), _jsx(DateRangeControl, { formatCustomValue: ({ from, to }) => `${from} – ${to}`, label: "Date range, small", maxValue: RETENTION_TO, minValue: RETENTION_FROM, onChange: setSmallRange, presetLabels: RANGE_PRESET_LABELS, size: "sm", value: smallRange })] }));
 }
 export const CHARTS = {
     ActivityCalendar: () => (_jsx(ActivityCalendar, { data: ACTIVITY, from: "2026-08-16", labels: {
@@ -77,7 +81,7 @@ export const CHARTS = {
     ChartBarHorizontal: () => (_jsx(ChartBarHorizontal, { data: MARGIN, negativeLabel: "Loss", period: "October 2026", positiveLabel: "Profit", title: "Margin by Customer", valueFormatter: euro, valueKey: "margin", xKey: "customer" })),
     ChartBarMultiple: () => (_jsx(ChartBarMultiple, { data: REVENUE, entityColorMap: createEntityColorMap(REVENUE_SERIES.map((series) => series.id)), otherLabel: "Everything else", period: "Aug \u2013 Oct 2026", series: REVENUE_SERIES, title: "Revenue and model cost", valueFormatter: euro, xKey: "month" })),
     ChartBarStacked: () => (_jsx(ChartBarStacked, { data: SPEND, entityColorMap: CUSTOMER_COLORS, otherLabel: "Everything else", period: "Jul \u2013 Oct 2026", series: CUSTOMERS, title: "Model spend by Customer", valueFormatter: euro, xKey: "month" })),
-    ChartCard: () => (_jsx(ChartCard, { footer: { reading: "Updated 4 minutes ago" }, period: "October 2026", summary: _jsx(ChartSummary, { label: "Runs", trend: {
+    ChartCard: () => (_jsx(ChartCard, { footer: { reading: "Updated 4 minutes ago" }, link: { label: "Explore", accessibleName: "Explore Runs per week", link: _jsx("a", { href: "#runs" }) }, period: "October 2026", summary: _jsx(ChartSummary, { label: "Runs", trend: {
                 value: "+12.4%",
                 direction: "up",
                 tone: trendTone("up"),
@@ -94,11 +98,16 @@ export const CHARTS = {
     ChartSparkline: () => (_jsxs("span", { className: "flex items-center gap-3 text-sm", children: ["Requests \u00B7 past 8 weeks", _jsx("span", { className: "h-6 w-24", children: _jsx(ChartSparkline, { data: [12, 18, 14, 22, 27, 25, 31, 36] }) }), _jsx(TrendBadge, { direction: "up", directionLabel: "up", tone: trendTone("up"), value: "+16%" })] })),
     createEntityColorMap: () => (_jsx("ul", { className: "grid max-w-xs gap-2 text-sm", children: CUSTOMERS.map((customer) => (_jsxs("li", { className: "flex items-center justify-between gap-3", children: [customer.label, _jsx("span", { className: "h-6 w-24", children: _jsx(ChartSparkline, { color: CUSTOMER_COLORS[customer.id], data: SPEND.map((month) => month[customer.id]) }) })] }, customer.id))) })),
     DateRangeControl: DateRangeControlSpecimen,
-    KpiCard: () => (_jsx("div", { className: "max-w-xs", children: _jsx(KpiCard, { delta: {
-                value: "+18%",
-                direction: "up",
-                comparison: "vs September",
-                directionLabel: "up",
-            }, label: "Tasks done this month", value: "1,284" }) })),
+    KpiCard: () => (_jsxs("div", { className: "grid max-w-xl gap-4 sm:grid-cols-2", children: [_jsx(KpiCard, { delta: {
+                    value: "+18%",
+                    direction: "up",
+                    comparison: "vs September",
+                    directionLabel: "up",
+                }, label: "Tasks done this month", value: "1,284" }), _jsx(KpiCard, { delta: {
+                    value: "+63%",
+                    direction: "up",
+                    comparison: "vs previous period",
+                    directionLabel: "up",
+                }, label: "Spend", note: "$110.00", sparkline: [4.1, 6.2, 1.2, 6.8, 7.1, 1.4, 7.4], value: "$179.32" })] })),
     TrendBadge: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(TrendBadge, { direction: "up", directionLabel: "up", tone: trendTone("up"), value: "+12.4%" }), _jsx(TrendBadge, { direction: "up", directionLabel: "up", tone: trendTone("up", false), value: "+\u20AC 360" }), _jsx(TrendBadge, { direction: "flat", directionLabel: "unchanged", tone: trendTone("flat"), value: "0%" })] })),
 };

package/dist/showcase/specimens/choices.d.ts

@@ -2,17 +2,28 @@ declare function CollectionSortSpecimen(): import("react").JSX.Element;
 declare function ComboboxSpecimen(): import("react").JSX.Element;
 declare function ModelSelectSpecimen(): import("react").JSX.Element;
 declare function SegmentedChoiceSpecimen(): import("react").JSX.Element;
+declare function ChoiceboxGroupSpecimen(): import("react").JSX.Element;
+declare function MultiSelectSpecimen(): import("react").JSX.Element;
+declare function SegmentedControlSpecimen(): import("react").JSX.Element;
 declare function SelectSpecimen(): import("react").JSX.Element;
+declare function ThemeModeSegmentsSpecimen(): import("react").JSX.Element;
 declare function ThemeModeSwitcherSpecimen(): import("react").JSX.Element;
+declare function RadioGroupSpecimen(): import("react").JSX.Element;
+declare function CheckboxSpecimen(): import("react").JSX.Element;
+declare function SwitchSpecimen(): import("react").JSX.Element;
 export declare const CHOICES: {
-    Checkbox: () => import("react").JSX.Element;
+    Checkbox: typeof CheckboxSpecimen;
+    ChoiceboxGroup: typeof ChoiceboxGroupSpecimen;
     CollectionSort: typeof CollectionSortSpecimen;
     Combobox: typeof ComboboxSpecimen;
     ModelSelect: typeof ModelSelectSpecimen;
-    RadioGroup: () => import("react").JSX.Element;
+    MultiSelect: typeof MultiSelectSpecimen;
+    RadioGroup: typeof RadioGroupSpecimen;
     SegmentedChoice: typeof SegmentedChoiceSpecimen;
+    SegmentedControl: typeof SegmentedControlSpecimen;
     Select: typeof SelectSpecimen;
-    Switch: () => import("react").JSX.Element;
+    Switch: typeof SwitchSpecimen;
+    ThemeModeSegments: typeof ThemeModeSegmentsSpecimen;
     ThemeModeSwitcher: typeof ThemeModeSwitcherSpecimen;
     Toggle: () => import("react").JSX.Element;
     ToggleGroup: () => import("react").JSX.Element;

package/dist/showcase/specimens/choices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choices.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/choices.tsx"],"names":[],"mappings":"AAqCA,iBAAS,sBAAsB,gCAc9B;AAED,iBAAS,gBAAgB,gCAmBxB;AAED,iBAAS,mBAAmB,gCAc3B;AAED,iBAAS,uBAAuB,gCAe/B;AAED,iBAAS,cAAc,gCAmBtB;AAED,iBAAS,yBAAyB,gCAUjC;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;CAwDO,CAAC"}
+{"version":3,"file":"choices.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/choices.tsx"],"names":[],"mappings":"AAwDA,iBAAS,sBAAsB,gCAc9B;AAED,iBAAS,gBAAgB,gCAgCxB;AAED,iBAAS,mBAAmB,gCAiB3B;AAED,iBAAS,uBAAuB,gCAe/B;AAED,iBAAS,sBAAsB,gCAkF9B;AAED,iBAAS,mBAAmB,gCAoC3B;AAID,iBAAS,wBAAwB,gCA8DhC;AAED,iBAAS,cAAc,gCA2CtB;AAED,iBAAS,yBAAyB,gCAUjC;AAED,iBAAS,yBAAyB,gCAQjC;AAED,iBAAS,kBAAkB,gCAuE1B;AAED,iBAAS,gBAAgB,gCAoCxB;AAED,iBAAS,cAAc,gCAgDtB;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAyBO,CAAC"}

package/dist/showcase/specimens/choices.js

@@ -1,17 +1,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LayoutGrid, List, Pin } from "lucide-react";
-import { useState } from "react";
+import { Clock, Kanban, LayoutGrid, List, Pin } from "lucide-react";
+import { useId, useState } from "react";
 import { ModelSelect, SegmentedChoice } from "../../components/agent-profile.js";
+import { Button } from "../../components/button.js";
 import { Checkbox } from "../../components/checkbox.js";
+import { ChoiceboxGroup, ChoiceboxGroupItem } from "../../components/choicebox.js";
 import { CollectionSort } from "../../components/collection-sort.js";
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "../../components/combobox.js";
-import { FieldLegend, FieldSet } from "../../components/field.js";
+import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxList, ComboboxLoading, } from "../../components/combobox.js";
+import { Field, FieldLabel, FieldLegend, FieldSet } from "../../components/field.js";
 import { Label } from "../../components/label.js";
+import { MultiSelect, MultiSelectContent, MultiSelectRow, MultiSelectTrigger, } from "../../components/multi-select.js";
 import { RadioGroup, RadioGroupItem } from "../../components/radio-group.js";
+import { SegmentedControl } from "../../components/segmented-control.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/select.js";
 import { Switch } from "../../components/switch.js";
-import { ThemeModeSwitcher } from "../../components/theme-mode-switcher.js";
+import { ThemeModeSegments, ThemeModeSwitcher } from "../../components/theme-mode-switcher.js";
 import { Toggle } from "../../components/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "../../components/toggle-group.js";
 const SCHEDULES = [
@@ -21,6 +25,12 @@ const SCHEDULES = [
     { value: "weekly", label: "Every week" },
 ];
 const AGENTS = ["Acme Quotes", "Invoices", "Orders", "Support"];
+const SWITCH_SIZES = [
+    { size: "sm", label: "Approvals" },
+    { size: "md", label: "Reminders" },
+    { size: "lg", label: "Digest" },
+];
+const REGIONS = ["Milan", "Frankfurt", "Dublin"];
 function CollectionSortSpecimen() {
     const [order, setOrder] = useState("newest");
     return (_jsx(CollectionSort, { label: "Sort by", onValueChange: setOrder, options: [
@@ -30,11 +40,12 @@ function CollectionSortSpecimen() {
         ], value: order }));
 }
 function ComboboxSpecimen() {
-    return (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsx(Label, { htmlFor: "showcase-assignee", children: "Assign to" }), _jsxs(Combobox, { items: AGENTS, children: [_jsx(ComboboxInput, { id: "showcase-assignee", placeholder: "Find an Agent" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No Agent matches" }), _jsx(ComboboxList, { children: (agent) => (_jsx(ComboboxItem, { value: agent, children: agent }, agent)) })] })] })] }));
+    const [loading, setLoading] = useState(false);
+    return (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsxs(Combobox, { items: AGENTS, children: [_jsx(ComboboxInput, { id: "showcase-assignee", label: "Assign to", placeholder: "Find an Agent", triggerLabel: "Show Agents" }), _jsxs(ComboboxContent, { empty: loading ? null : "No Agent matches", children: [_jsx(ComboboxLoading, { children: loading ? "Finding Agents" : null }), _jsx(ComboboxList, { children: (agent) => (_jsx(ComboboxItem, { value: agent, children: agent }, agent)) })] })] }), _jsx(Button, { className: "justify-self-start", onClick: () => setLoading((current) => !current), size: "sm", variant: "outline", children: loading ? "Show the list" : "Show loading" })] }));
 }
 function ModelSelectSpecimen() {
     const [model, setModel] = useState("anthropic/claude-opus-5");
-    return (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsx(Label, { htmlFor: "showcase-model", children: "Model" }), _jsx(ModelSelect, { id: "showcase-model", onValueChange: setModel, options: ["anthropic/claude-opus-5", "openai/gpt-5.6-sol", "google/gemini-3.1-flash-lite"], placeholder: "Choose a model", value: model })] }));
+    return (_jsxs("div", { className: "grid max-w-sm gap-2", children: [_jsx(Label, { htmlFor: "showcase-model", id: "showcase-model-label", children: "Model" }), _jsx(ModelSelect, { "aria-labelledby": "showcase-model-label", id: "showcase-model", onValueChange: setModel, options: ["anthropic/claude-opus-5", "openai/gpt-5.6-sol", "google/gemini-3.1-flash-lite"], placeholder: "Choose a model", value: model })] }));
 }
 function SegmentedChoiceSpecimen() {
     const [effort, setEffort] = useState("default");
@@ -45,24 +56,93 @@ function SegmentedChoiceSpecimen() {
             { value: "high", label: "High" },
         ], value: effort }));
 }
+function ChoiceboxGroupSpecimen() {
+    const [plan, setPlan] = useState("trial");
+    return (_jsxs("div", { className: "grid max-w-2xl gap-6", children: [_jsxs(ChoiceboxGroup, { label: "Plan", name: "plan", onValueChange: (next) => setPlan(next === "pro" ? "pro" : "trial"), showLabel: true, type: "radio", value: plan, children: [_jsx(ChoiceboxGroupItem, { description: "Free for two weeks.", title: "Pro trial", value: "trial", children: "Ends on 30 November." }), _jsx(ChoiceboxGroupItem, { description: "Starts today.", title: "Pro", value: "pro" }), _jsx(ChoiceboxGroupItem, { description: "For one company only.", disabledReason: "Already used on this company.", title: "Second trial", value: "second-trial" })] }), _jsxs(ChoiceboxGroup, { defaultValue: "standard", label: "Server size", name: "server-size", showLabel: true, type: "radio", children: [_jsx(ChoiceboxGroupItem, { badge: "Recommended", description: "Enough for most teams.", specs: ["4 vCPU", "8 GB"], title: "Standard", value: "standard" }), _jsx(ChoiceboxGroupItem, { description: "For heavy daily use.", specs: ["8 vCPU", "16 GB"], title: "Enhanced", value: "enhanced" })] }), _jsxs(ChoiceboxGroup, { label: "Send the report by", showLabel: true, type: "checkbox", children: [_jsx(ChoiceboxGroupItem, { description: "To the billing address.", title: "Email", value: "email" }), _jsx(ChoiceboxGroupItem, { description: "To the Rossi Ottica channel.", title: "Alveare", value: "chat" })] }), _jsxs(ChoiceboxGroup, { defaultValue: "pro", disabledReason: "Your partner manages this plan.", label: "Plan, managed by a partner", showLabel: true, type: "radio", children: [_jsx(ChoiceboxGroupItem, { description: "Free for two weeks.", title: "Pro trial", value: "trial" }), _jsx(ChoiceboxGroupItem, { description: "Starts today.", title: "Pro", value: "pro" })] }), _jsxs(ChoiceboxGroup, { defaultValue: ["email"], label: "Send the invoice by", showLabel: true, type: "checkbox", children: [_jsx(ChoiceboxGroupItem, { description: "To the billing address.", title: "Email", value: "email" }), _jsx(ChoiceboxGroupItem, { description: "Not set up for this company.", disabledReason: "Connect Alveare first.", title: "Alveare", value: "chat" })] }), _jsxs(ChoiceboxGroup, { label: "Plan, stacked", orientation: "vertical", showLabel: true, type: "radio", children: [_jsx(ChoiceboxGroupItem, { description: "Free for two weeks.", title: "Pro trial", value: "trial" }), _jsx(ChoiceboxGroupItem, { description: "Starts today.", title: "Pro", value: "pro" })] })] }));
+}
+function MultiSelectSpecimen() {
+    const [chosen, setChosen] = useState(new Set(["Milan", "Frankfurt"]));
+    const [first] = chosen;
+    const summary = chosen.size === 0
+        ? "No regions selected"
+        : chosen.size === 1
+            ? (first ?? "")
+            : `${chosen.size} regions selected`;
+    return (_jsxs(MultiSelect, { onSelectAll: () => setChosen(new Set(REGIONS)), selectAllLabel: "Select all", selectedCount: chosen.size, selectOnlyLabel: "Select only", totalCount: REGIONS.length, children: [_jsx(MultiSelectTrigger, { "aria-label": "Regions", children: summary }), _jsx(MultiSelectContent, { children: REGIONS.map((region) => (_jsx(MultiSelectRow, { checked: chosen.has(region), name: region, onCheckedChange: (checked) => {
+                        const next = new Set(chosen);
+                        if (checked)
+                            next.add(region);
+                        else
+                            next.delete(region);
+                        setChosen(next);
+                    }, onSelectOnly: () => setChosen(new Set([region])) }, region))) })] }));
+}
+const SEGMENT_SIZES = ["sm", "default", "lg"];
+function SegmentedControlSpecimen() {
+    return (_jsxs("div", { className: "grid max-w-3xl gap-6", children: [_jsx(SegmentedControl, { "aria-label": "Message", defaultValue: "source", options: [
+                    { value: "source", label: "Source" },
+                    { value: "output", label: "Output" },
+                ] }), _jsx(SegmentedControl, { "aria-label": "Message, disabled", defaultValue: "source", disabled: true, options: [
+                    { value: "source", label: "Source" },
+                    { value: "output", label: "Output" },
+                ] }), _jsx("div", { className: "flex flex-wrap items-center gap-6", children: SEGMENT_SIZES.map((size) => (_jsx(SegmentedControl, { "aria-label": `Reports period, ${size}`, defaultValue: "month", options: [
+                        { value: "week", label: "Week" },
+                        { value: "month", label: "Month" },
+                        { value: "year", label: "Year" },
+                    ], size: size }, size))) }), _jsx(SegmentedControl, { "aria-label": "Message, full width", defaultValue: "source", fullWidth: true, options: [
+                    { value: "source", label: "Source" },
+                    { value: "output", label: "Output" },
+                ], size: "lg" }), _jsx("div", { className: "flex flex-wrap items-center gap-6", children: SEGMENT_SIZES.map((size) => (_jsx(SegmentedControl, { "aria-label": `Layout, ${size}`, defaultValue: "list", options: [
+                        { value: "list", label: "List", icon: _jsx(List, {}), iconOnly: true },
+                        { value: "grid", label: "Grid", icon: _jsx(LayoutGrid, {}), iconOnly: true },
+                        { value: "board", label: "Board", icon: _jsx(Kanban, {}), iconOnly: true },
+                    ], size: size }, size))) })] }));
+}
 function SelectSpecimen() {
     const [schedule, setSchedule] = useState("weekdays");
-    return (_jsxs("div", { className: "grid max-w-xs gap-2", children: [_jsx(Label, { htmlFor: "showcase-schedule", children: "Runs" }), _jsxs(Select, { onValueChange: (next) => setSchedule(next ?? "weekdays"), value: schedule, children: [_jsx(SelectTrigger, { id: "showcase-schedule", children: _jsx(SelectValue, { children: SCHEDULES.find((option) => option.value === schedule)?.label }) }), _jsx(SelectContent, { children: SCHEDULES.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }));
+    const label = SCHEDULES.find((option) => option.value === schedule)?.label;
+    return (_jsxs("div", { className: "grid max-w-xs gap-2", children: [_jsxs(Select, { onValueChange: (next) => setSchedule(next ?? "weekdays"), value: schedule, children: [_jsx(SelectTrigger, { id: "showcase-schedule", label: "Runs", children: _jsx(SelectValue, { children: label }) }), _jsx(SelectContent, { children: SCHEDULES.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }), _jsxs(Select, { onValueChange: (next) => setSchedule(next ?? "weekdays"), value: schedule, children: [_jsx(SelectTrigger, { "aria-label": "Runs, small", size: "sm", children: _jsx(SelectValue, { children: label }) }), _jsx(SelectContent, { children: SCHEDULES.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }), _jsxs(Select, { onValueChange: (next) => setSchedule(next ?? "weekdays"), value: schedule, children: [_jsx(SelectTrigger, { "aria-label": "Runs, large", prefix: _jsx(Clock, { "aria-hidden": "true" }), size: "lg", children: _jsx(SelectValue, { children: label }) }), _jsx(SelectContent, { children: SCHEDULES.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }));
+}
+function ThemeModeSegmentsSpecimen() {
+    const [mode, setMode] = useState("system");
+    return (_jsx(ThemeModeSegments, { "aria-label": "Theme", labels: { system: "System", light: "Light", dark: "Dark" }, onValueChange: setMode, value: mode }));
 }
 function ThemeModeSwitcherSpecimen() {
     const [mode, setMode] = useState("system");
-    return (_jsx(ThemeModeSwitcher, { "aria-label": "Theme", labels: { light: "Light", dark: "Dark", system: "System" }, onValueChange: setMode, value: mode }));
+    const labels = { light: "Light", dark: "Dark", system: "System" };
+    return (_jsx("div", { className: "flex flex-wrap items-center gap-6", children: _jsx(ThemeModeSwitcher, { "aria-label": "Theme", labels: labels, onValueChange: setMode, value: mode }) }));
+}
+function RadioGroupSpecimen() {
+    const id = useId();
+    const legend = `${id}-legend`;
+    const disabledLegend = `${id}-disabled-legend`;
+    const requiredLegend = `${id}-required-legend`;
+    return (_jsxs("div", { className: "grid max-w-md gap-8", children: [_jsxs(FieldSet, { children: [_jsx(FieldLegend, { id: legend, variant: "label", children: "Who can see this Agent" }), _jsxs(RadioGroup, { "aria-labelledby": legend, defaultValue: "me", children: [_jsxs(Field, { orientation: "horizontal", children: [_jsx(RadioGroupItem, { id: `${id}-me`, value: "me" }), _jsx(FieldLabel, { htmlFor: `${id}-me`, children: "Only me" })] }), _jsxs(Field, { orientation: "horizontal", children: [_jsx(RadioGroupItem, { id: `${id}-everyone`, value: "everyone" }), _jsx(FieldLabel, { htmlFor: `${id}-everyone`, children: "Everyone in the company" })] })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { id: disabledLegend, variant: "label", children: "Who can see this Agent, locked" }), _jsxs(RadioGroup, { "aria-labelledby": disabledLegend, defaultValue: "me", disabled: true, children: [_jsxs(Field, { orientation: "horizontal", children: [_jsx(RadioGroupItem, { id: `${id}-locked-me`, value: "me" }), _jsx(FieldLabel, { htmlFor: `${id}-locked-me`, children: "Only me" })] }), _jsxs(Field, { orientation: "horizontal", children: [_jsx(RadioGroupItem, { id: `${id}-locked-everyone`, value: "everyone" }), _jsx(FieldLabel, { htmlFor: `${id}-locked-everyone`, children: "Everyone in the company" })] })] })] }), _jsxs("form", { className: "grid gap-4", method: "post", onSubmit: (event) => {
+                    event.preventDefault();
+                }, children: [_jsxs(FieldSet, { children: [_jsx(FieldLegend, { id: requiredLegend, variant: "label", children: "Billing cycle" }), _jsxs(RadioGroup, { "aria-labelledby": requiredLegend, name: "cycle", required: true, children: [_jsxs(Field, { orientation: "horizontal", children: [_jsx(RadioGroupItem, { id: `${id}-monthly`, value: "monthly" }), _jsx(FieldLabel, { htmlFor: `${id}-monthly`, children: "Monthly" })] }), _jsxs(Field, { orientation: "horizontal", children: [_jsx(RadioGroupItem, { id: `${id}-yearly`, value: "yearly" }), _jsx(FieldLabel, { htmlFor: `${id}-yearly`, children: "Yearly" })] })] })] }), _jsx(Button, { className: "justify-self-start", size: "sm", type: "submit", children: "Choose billing cycle" })] }), _jsx(RadioGroup, { "aria-label": "Standalone", defaultValue: "only", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { "aria-label": "Keep the old key", value: "only" }), _jsx("span", { className: "text-label-sm text-foreground", children: "Keep the old key" })] }) })] }));
+}
+function CheckboxSpecimen() {
+    const id = useId();
+    return (_jsxs("div", { className: "grid max-w-md gap-8", children: [_jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: "Copies" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { defaultChecked: true, id: `${id}-copy` }), _jsx(Label, { htmlFor: `${id}-copy`, children: "Send a copy to the person who asked" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: `${id}-archive` }), _jsx(Label, { htmlFor: `${id}-archive`, children: "Keep a copy in the archive" })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: "Disabled" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { disabled: true, id: `${id}-off` }), _jsx(Label, { htmlFor: `${id}-off`, children: "Send a copy to the person who asked" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { defaultChecked: true, disabled: true, id: `${id}-on` }), _jsx(Label, { htmlFor: `${id}-on`, children: "Keep a copy in the archive" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { disabled: true, id: `${id}-mixed`, indeterminate: true }), _jsx(Label, { htmlFor: `${id}-mixed`, children: "Notify the people who follow it" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: `${id}-some`, indeterminate: true }), _jsx(Label, { htmlFor: `${id}-some`, children: "3 of 5 selected" })] })] }));
+}
+function SwitchSpecimen() {
+    const id = useId();
+    return (_jsxs("div", { className: "grid max-w-md gap-8", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { id: `${id}-off` }), _jsx(Label, { htmlFor: `${id}-off`, children: "Approvals" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { defaultChecked: true, id: `${id}-on` }), _jsx(Label, { htmlFor: `${id}-on`, children: "Reminders" })] })] }), _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { disabled: true, id: `${id}-disabled-off` }), _jsx(Label, { htmlFor: `${id}-disabled-off`, children: "Approvals" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { defaultChecked: true, disabled: true, id: `${id}-disabled-on` }), _jsx(Label, { htmlFor: `${id}-disabled-on`, children: "Reminders" })] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-6", children: SWITCH_SIZES.map(({ size, label }) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { defaultChecked: true, id: `${id}-${size}`, size: size }), _jsx(Label, { htmlFor: `${id}-${size}`, children: label })] }, size))) }), _jsx("div", { className: "grid gap-4", children: ["sm", "lg"].map((size) => (_jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Label, { htmlFor: `${id}-left-${size}`, children: "Digest" }), _jsx(Switch, { id: `${id}-left-${size}`, size: size })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { id: `${id}-right-${size}`, size: size }), _jsx(Label, { htmlFor: `${id}-right-${size}`, children: "Digest" })] })] }, size))) })] }));
 }
 export const CHOICES = {
-    Checkbox: () => (_jsxs(FieldSet, { className: "max-w-md", children: [_jsx(FieldLegend, { children: "Copies" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { defaultChecked: true, id: "showcase-copy" }), _jsx(Label, { htmlFor: "showcase-copy", children: "Send a copy to the person who asked" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "showcase-archive" }), _jsx(Label, { htmlFor: "showcase-archive", children: "Keep a copy in the archive" })] })] })),
+    Checkbox: CheckboxSpecimen,
+    ChoiceboxGroup: ChoiceboxGroupSpecimen,
     CollectionSort: CollectionSortSpecimen,
     Combobox: ComboboxSpecimen,
     ModelSelect: ModelSelectSpecimen,
-    RadioGroup: () => (_jsxs(FieldSet, { className: "max-w-md", children: [_jsx(FieldLegend, { children: "Who can see this Agent" }), _jsxs(RadioGroup, { defaultValue: "me", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { id: "showcase-me", value: "me" }), _jsx(Label, { htmlFor: "showcase-me", children: "Only me" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { id: "showcase-everyone", value: "everyone" }), _jsx(Label, { htmlFor: "showcase-everyone", children: "Everyone in the company" })] })] })] })),
+    MultiSelect: MultiSelectSpecimen,
+    RadioGroup: RadioGroupSpecimen,
     SegmentedChoice: SegmentedChoiceSpecimen,
+    SegmentedControl: SegmentedControlSpecimen,
     Select: SelectSpecimen,
-    Switch: () => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { defaultChecked: true, id: "showcase-switch" }), _jsx(Label, { htmlFor: "showcase-switch", children: "Approvals" })] })),
+    Switch: SwitchSpecimen,
+    ThemeModeSegments: ThemeModeSegmentsSpecimen,
     ThemeModeSwitcher: ThemeModeSwitcherSpecimen,
     Toggle: () => (_jsx(Toggle, { "aria-label": "Pin chat", children: _jsx(Pin, { "aria-hidden": "true" }) })),
-    ToggleGroup: () => (_jsxs(ToggleGroup, { "aria-label": "View", defaultValue: ["list"], spacing: 0, children: [_jsx(ToggleGroupItem, { "aria-label": "List", value: "list", children: _jsx(List, { "aria-hidden": "true" }) }), _jsx(ToggleGroupItem, { "aria-label": "Grid", value: "grid", children: _jsx(LayoutGrid, { "aria-hidden": "true" }) })] })),
+    ToggleGroup: () => (_jsxs(ToggleGroup, { "aria-label": "Chat details", defaultValue: ["tools"], multiple: true, spacing: 0, children: [_jsx(ToggleGroupItem, { value: "tools", children: "Tools" }), _jsx(ToggleGroupItem, { value: "reasoning", children: "Reasoning" })] })),
 };

package/dist/showcase/specimens/compositions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compositions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/compositions.tsx"],"names":[],"mappings":"AA4HA,iBAAS,oBAAoB,gCA+B5B;AAED,iBAAS,wBAAwB,gCAahC;AAED,iBAAS,qBAAqB,gCAsB7B;AAED,iBAAS,yBAAyB,gCAGjC;AAED,iBAAS,sBAAsB,gCA6B9B;AAED,iBAAS,yBAAyB,gCAUjC;AAED,iBAAS,qBAAqB,gCAoB7B;AAED,iBAAS,kBAAkB,gCAiB1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,oBAAoB,gCAiB5B;AAED,iBAAS,oBAAoB,gCAqC5B;AAED,iBAAS,mBAAmB,gCA2B3B;AAED,iBAAS,mBAAmB,gCAsB3B;AAED,iBAAS,uBAAuB,gCAoB/B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAiEE,CAAC"}
+{"version":3,"file":"compositions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/compositions.tsx"],"names":[],"mappings":"AAoIA,iBAAS,oBAAoB,gCA+B5B;AAED,iBAAS,wBAAwB,gCAahC;AAED,iBAAS,qBAAqB,gCA0B7B;AAED,iBAAS,yBAAyB,gCAGjC;AAED,iBAAS,sBAAsB,gCAyD9B;AAED,iBAAS,yBAAyB,gCAUjC;AAED,iBAAS,qBAAqB,gCAwC7B;AAED,iBAAS,kBAAkB,gCAiB1B;AAED,iBAAS,kBAAkB,gCAuE1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,oBAAoB,gCAkD5B;AAED,iBAAS,oBAAoB,gCAqC5B;AAED,iBAAS,mBAAmB,gCA2B3B;AAED,iBAAS,mBAAmB,gCAoB3B;AAwBD,iBAAS,uBAAuB,gCAkD/B;AA0BD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAmFE,CAAC"}