@nadicodeai/ui 12.1.96 → 12.1.97

package/dist/showcase/showcase.d.ts

@@ -0,0 +1,10 @@
+import type { EmptyArt, EmptyArtName } from "../components/empty-art.js";
+/**
+ * Every component of the package on its own page: what it is, its specimen,
+ * and when to use it, from the doc comment in its source. The product serving
+ * it passes the first-use pictures its bundler approved.
+ */
+export declare function Showcase({ emptyArt }: {
+    emptyArt: Record<EmptyArtName, EmptyArt>;
+}): import("react").JSX.Element;
+//# sourceMappingURL=showcase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"showcase.d.ts","sourceRoot":"","sources":["../../src/showcase/showcase.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAqErE;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;CAAE,+BA0DlF"}

package/dist/showcase/showcase.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { textLinkVariants } from "../components/text-link.js";
+import { EmptyArtProvider } from "./assets.js";
+import { Foundations } from "./foundations.js";
+import { SPECIMENS } from "./specimens/index.js";
+import { USAGE, USAGE_FAMILIES } from "./usage.generated.js";
+const FIELDS = [
+    ["when", "When"],
+    ["instead", "Instead"],
+    ["behaviour", "Behaviour"],
+    ["words", "Words"],
+    ["access", "Access"],
+];
+const anchor = (name) => `usage-${name.toLowerCase()}`;
+function Prose({ text }) {
+    return text.split(/(`[^`]+`)/).flatMap((part, index) => {
+        if (part.startsWith("`") && part.endsWith("`") && part.length > 1) {
+            return [
+                _jsx("code", { className: "font-mono", children: part.slice(1, -1) }, `${index}-code`),
+            ];
+        }
+        return part
+            .split(/(\*[^*\s][^*]*\*)/)
+            .map((piece, pieceIndex) => piece.length > 2 && piece.startsWith("*") && piece.endsWith("*") ? (_jsx("em", { children: piece.slice(1, -1) }, `${index}-${pieceIndex}`)) : (piece));
+    });
+}
+function UsagePage({ usage }) {
+    const id = anchor(usage.name);
+    return (_jsxs("article", { "aria-labelledby": id, className: "grid gap-4 border-t border-border pt-8", children: [_jsxs("header", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [_jsx("h3", { className: "text-lg font-semibold", id: id, children: usage.name }), _jsx("code", { className: "font-mono text-xs text-muted-foreground", children: `${usage.module}.tsx` })] }), _jsx("p", { className: "max-w-3xl text-sm", children: _jsx(Prose, { text: usage.summary }) }), _jsx("div", { className: "min-w-0 rounded-md border border-border bg-background p-6", children: createElement(SPECIMENS[usage.name]) }), _jsx("dl", { className: "grid max-w-3xl gap-3 text-sm sm:grid-cols-[8rem_minmax(0,1fr)]", children: FIELDS.map(([field, label]) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "font-medium text-muted-foreground", children: label }), _jsx("dd", { className: "m-0", children: _jsx(Prose, { text: usage[field] }) })] }, field))) })] }));
+}
+/**
+ * Every component of the package on its own page: what it is, its specimen,
+ * and when to use it, from the doc comment in its source. The product serving
+ * it passes the first-use pictures its bundler approved.
+ */
+export function Showcase({ emptyArt }) {
+    const families = USAGE_FAMILIES.map((family) => ({
+        family,
+        usages: USAGE.filter((usage) => usage.family === family),
+    })).filter(({ usages }) => usages.length > 0);
+    return (_jsx(EmptyArtProvider, { art: emptyArt, children: _jsxs("div", { className: "grid gap-16 pb-24", "data-slot": "showcase", children: [_jsxs("header", { className: "grid max-w-2xl gap-2", children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Components" }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Each component of the package, drawn by its own source with sample words. A page's text is the doc comment on the component's export, which", " ", _jsx("code", { className: "font-mono", children: "generate:usage" }), " copies here."] })] }), _jsxs("nav", { "aria-label": "Families", className: "flex flex-wrap gap-x-4 gap-y-2 text-sm", children: [_jsx("a", { className: textLinkVariants({ kind: "quiet" }), href: "#foundations", children: "Foundations" }), families.map(({ family, usages }) => (_jsx("a", { className: textLinkVariants({ kind: "quiet" }), href: `#${family.toLowerCase()}`, children: `${family} · ${usages.length}` }, family)))] }), _jsxs("section", { "aria-labelledby": "foundations-title", className: "grid gap-6", id: "foundations", children: [_jsx("h2", { className: "text-xl font-semibold", id: "foundations-title", children: "Foundations" }), _jsx(Foundations, {})] }), families.map(({ family, usages }) => (_jsxs("section", { "aria-labelledby": `${family.toLowerCase()}-title`, className: "grid gap-8", id: family.toLowerCase(), children: [_jsx("h2", { className: "text-xl font-semibold", id: `${family.toLowerCase()}-title`, children: family }), usages.map((usage) => (_jsx(UsagePage, { usage: usage }, usage.name)))] }, family)))] }) }));
+}

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

@@ -0,0 +1,7 @@
+export declare const ACTIONS: {
+    Button: () => import("react").JSX.Element;
+    ButtonGroup: () => import("react").JSX.Element;
+    CopyButton: () => import("react").JSX.Element;
+    PageActions: () => import("react").JSX.Element;
+};
+//# sourceMappingURL=actions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/actions.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,OAAO;;;;;CA2EO,CAAC"}

package/dist/showcase/specimens/actions.js

@@ -0,0 +1,15 @@
+"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 { ButtonGroup } from "../../components/button-group.js";
+import { CopyButton } from "../../components/copy-button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "../../components/dropdown-menu.js";
+import { PageActionsRow } from "../../components/page-actions.js";
+import { nothing, PAGE_MENU } from "../samples.js";
+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" })] }) })] })] })] })),
+    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

@@ -0,0 +1,17 @@
+declare function DateRangeControlSpecimen(): import("react").JSX.Element;
+export declare const CHARTS: {
+    ActivityCalendar: () => import("react").JSX.Element;
+    ChartAreaStacked: () => import("react").JSX.Element;
+    ChartBarHorizontal: () => import("react").JSX.Element;
+    ChartBarMultiple: () => import("react").JSX.Element;
+    ChartBarStacked: () => import("react").JSX.Element;
+    ChartCard: () => import("react").JSX.Element;
+    ChartContainer: () => import("react").JSX.Element;
+    ChartSparkline: () => import("react").JSX.Element;
+    createEntityColorMap: () => import("react").JSX.Element;
+    DateRangeControl: typeof DateRangeControlSpecimen;
+    KpiCard: () => import("react").JSX.Element;
+    TrendBadge: () => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=charts.d.ts.map

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

@@ -0,0 +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"}

package/dist/showcase/specimens/charts.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import { ActivityCalendar } from "../../components/activity-calendar.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../../components/chart.js";
+import { ChartAreaStacked } from "../../components/chart-area-stacked.js";
+import { ChartBarHorizontal } from "../../components/chart-bar-horizontal.js";
+import { ChartBarMultiple } from "../../components/chart-bar-multiple.js";
+import { ChartBarStacked } from "../../components/chart-bar-stacked.js";
+import { ChartCard, ChartSummary } from "../../components/chart-card.js";
+import { DateRangeControl } from "../../components/chart-date-range-control.js";
+import { createEntityColorMap } from "../../components/chart-entity-colors.js";
+import { ChartSparkline } from "../../components/chart-sparkline.js";
+import { KpiCard } from "../../components/kpi-card.js";
+import { TrendBadge, trendTone } from "../../components/trend-badge.js";
+const euro = (value) => new Intl.NumberFormat("en", { style: "currency", currency: "EUR" }).format(value);
+const CUSTOMERS = [
+    { id: "rossi", label: "Rossi Ottica" },
+    { id: "bizeta", label: "Bizeta Arredamenti" },
+    { id: "acme", label: "Acme S.r.l." },
+];
+const CUSTOMER_COLORS = createEntityColorMap(CUSTOMERS.map((customer) => customer.id));
+const SPEND = [
+    { month: "Jul", rossi: 120, bizeta: 80, acme: 40 },
+    { month: "Aug", rossi: 140, bizeta: 95, acme: 52 },
+    { month: "Sep", rossi: 160, bizeta: 90, acme: 61 },
+    { month: "Oct", rossi: 182, bizeta: 104, acme: 70 },
+];
+const USAGE_SERIES = [
+    { id: "included", label: "Included usage" },
+    { id: "extra", label: "Extra usage" },
+];
+const USAGE = [
+    { day: "1 Oct", included: 1.2, extra: 0 },
+    { day: "5 Oct", included: 2.6, extra: 0.1 },
+    { day: "9 Oct", included: 3.9, extra: 0.4 },
+    { day: "13 Oct", included: 4.8, extra: 0.9 },
+];
+const REVENUE_SERIES = [
+    { id: "revenue", label: "Monthly recurring revenue" },
+    { id: "cost", label: "Model cost" },
+];
+const REVENUE = [
+    { month: "Aug", revenue: 4200, cost: 1100 },
+    { month: "Sep", revenue: 4600, cost: 1250 },
+    { month: "Oct", revenue: 5100, cost: 1400 },
+];
+const MARGIN = [
+    { customer: "Rossi Ottica", margin: 840 },
+    { customer: "Bizeta Arredamenti", margin: 420 },
+    { customer: "Acme S.r.l.", margin: -360 },
+];
+const ACTIVITY = Array.from({ length: 60 }, (_, day) => ({
+    date: new Date(Date.UTC(2026, 7, 16 + day)).toISOString().slice(0, 10),
+    value: (day * 7) % 11,
+}));
+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 }));
+}
+export const CHARTS = {
+    ActivityCalendar: () => (_jsx(ActivityCalendar, { data: ACTIVITY, from: "2026-08-16", labels: {
+            ariaLabel: "Requests per day",
+            unavailable: "Not measured",
+            legend: "Requests per day, from less to more",
+            legendLevel: "Level",
+            less: "Less",
+            more: "More",
+        }, locale: "en", to: "2026-10-14", valueFormatter: (value) => `${value} requests` })),
+    ChartAreaStacked: () => (_jsx(ChartAreaStacked, { axisFormatter: (value) => `${value}M`, data: USAGE, entityColorMap: createEntityColorMap(USAGE_SERIES.map((series) => series.id)), otherLabel: "Everything else", period: "1\u201313 Oct 2026", series: USAGE_SERIES, title: "Tokens this cycle", valueFormatter: (value) => `${value}M tokens`, xKey: "day" })),
+    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: {
+                value: "+12.4%",
+                direction: "up",
+                tone: trendTone("up"),
+                comparison: "vs September",
+                directionLabel: "up",
+            }, value: "1,284" }), title: "Runs per week", children: (titleId) => (_jsx(ChartContainer, { "aria-labelledby": titleId, className: "h-48 w-full", config: { runs: { label: "Runs", color: "var(--nc-chart-1)" } }, children: _jsxs(BarChart, { data: [
+                    { week: "W40", runs: 280 },
+                    { week: "W41", runs: 312 },
+                ], children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "week", tickLine: false }), _jsx(Bar, { dataKey: "runs", fill: "var(--color-runs)", radius: 4 })] }) })) })),
+    ChartContainer: () => (_jsx(ChartContainer, { "aria-label": "Runs per week", className: "h-48 w-full max-w-md", config: { runs: { label: "Runs", color: "var(--nc-chart-1)" } }, children: _jsxs(BarChart, { data: [
+                { week: "W40", runs: 280 },
+                { week: "W41", runs: 312 },
+            ], children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "week", tickLine: false }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, {}) }), _jsx(Bar, { dataKey: "runs", fill: "var(--color-runs)", radius: 4 })] }) })),
+    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" }) })),
+    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

@@ -0,0 +1,21 @@
+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 SelectSpecimen(): import("react").JSX.Element;
+declare function ThemeModeSwitcherSpecimen(): import("react").JSX.Element;
+export declare const CHOICES: {
+    Checkbox: () => import("react").JSX.Element;
+    CollectionSort: typeof CollectionSortSpecimen;
+    Combobox: typeof ComboboxSpecimen;
+    ModelSelect: typeof ModelSelectSpecimen;
+    RadioGroup: () => import("react").JSX.Element;
+    SegmentedChoice: typeof SegmentedChoiceSpecimen;
+    Select: typeof SelectSpecimen;
+    Switch: () => import("react").JSX.Element;
+    ThemeModeSwitcher: typeof ThemeModeSwitcherSpecimen;
+    Toggle: () => import("react").JSX.Element;
+    ToggleGroup: () => import("react").JSX.Element;
+};
+export {};
+//# sourceMappingURL=choices.d.ts.map

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

@@ -0,0 +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"}

package/dist/showcase/specimens/choices.js

@@ -0,0 +1,68 @@
+"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 { ModelSelect, SegmentedChoice } from "../../components/agent-profile.js";
+import { Checkbox } from "../../components/checkbox.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 { Label } from "../../components/label.js";
+import { RadioGroup, RadioGroupItem } from "../../components/radio-group.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 { Toggle } from "../../components/toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "../../components/toggle-group.js";
+const SCHEDULES = [
+    { value: "hourly", label: "Every hour" },
+    { value: "daily", label: "Every day" },
+    { value: "weekdays", label: "Every weekday" },
+    { value: "weekly", label: "Every week" },
+];
+const AGENTS = ["Acme Quotes", "Invoices", "Orders", "Support"];
+function CollectionSortSpecimen() {
+    const [order, setOrder] = useState("newest");
+    return (_jsx(CollectionSort, { label: "Sort by", onValueChange: setOrder, options: [
+            { value: "newest", label: "Newest first" },
+            { value: "name", label: "Name" },
+            { value: "cost", label: "Cost" },
+        ], 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)) })] })] })] }));
+}
+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 })] }));
+}
+function SegmentedChoiceSpecimen() {
+    const [effort, setEffort] = useState("default");
+    return (_jsx(SegmentedChoice, { "aria-label": "Reasoning", onValueChange: setEffort, options: [
+            { value: "default", label: "Default" },
+            { value: "low", label: "Low" },
+            { value: "medium", label: "Medium" },
+            { value: "high", label: "High" },
+        ], value: effort }));
+}
+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))) })] })] }));
+}
+function ThemeModeSwitcherSpecimen() {
+    const [mode, setMode] = useState("system");
+    return (_jsx(ThemeModeSwitcher, { "aria-label": "Theme", labels: { light: "Light", dark: "Dark", system: "System" }, onValueChange: setMode, value: mode }));
+}
+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" })] })] })),
+    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" })] })] })] })),
+    SegmentedChoice: SegmentedChoiceSpecimen,
+    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" })] })),
+    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" }) })] })),
+};

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

@@ -0,0 +1,39 @@
+declare function ActivityFeedSpecimen(): import("react").JSX.Element;
+declare function AgentProfileCardSpecimen(): import("react").JSX.Element;
+declare function CatalogDrawerSpecimen(): import("react").JSX.Element;
+declare function CollectionFiltersSpecimen(): import("react").JSX.Element;
+declare function CollectionPageSpecimen(): import("react").JSX.Element;
+declare function CollectionToolbarSpecimen(): import("react").JSX.Element;
+declare function ConfirmDialogSpecimen(): import("react").JSX.Element;
+declare function EntrySceneSpecimen(): import("react").JSX.Element;
+declare function FormDialogSpecimen(): import("react").JSX.Element;
+declare function FormDrawerSpecimen(): import("react").JSX.Element;
+declare function LibraryShelfSpecimen(): import("react").JSX.Element;
+declare function OverviewPageSpecimen(): import("react").JSX.Element;
+declare function RecordSheetSpecimen(): import("react").JSX.Element;
+declare function RowEditFormSpecimen(): import("react").JSX.Element;
+declare function SettingsSectionSpecimen(): import("react").JSX.Element;
+export declare const COMPOSITIONS: {
+    ActivityFeed: typeof ActivityFeedSpecimen;
+    AgentProfileCard: typeof AgentProfileCardSpecimen;
+    CatalogDrawer: typeof CatalogDrawerSpecimen;
+    CollectionFilters: typeof CollectionFiltersSpecimen;
+    CollectionPage: typeof CollectionPageSpecimen;
+    CollectionToolbar: typeof CollectionToolbarSpecimen;
+    ConfirmDialog: typeof ConfirmDialogSpecimen;
+    EntryScene: typeof EntrySceneSpecimen;
+    FormDialog: typeof FormDialogSpecimen;
+    FormDrawer: typeof FormDrawerSpecimen;
+    LibraryShelf: typeof LibraryShelfSpecimen;
+    ObjectPage: () => import("react").JSX.Element;
+    ObjectSection: () => import("react").JSX.Element;
+    OverviewPage: typeof OverviewPageSpecimen;
+    PageHeader: () => import("react").JSX.Element;
+    RecordList: () => import("react").JSX.Element;
+    RecordSheet: typeof RecordSheetSpecimen;
+    RowEditForm: typeof RowEditFormSpecimen;
+    SettingsPage: () => import("react").JSX.Element;
+    SettingsSection: typeof SettingsSectionSpecimen;
+};
+export {};
+//# sourceMappingURL=compositions.d.ts.map

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

@@ -0,0 +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"}