@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/components/chart-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../src/components/chart-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"chart-card.d.ts","sourceRoot":"","sources":["../../src/components/chart-card.tsx"],"names":[],"mappings":"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"}

package/dist/components/chart-card.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { ButtonLink } from "./button.js";
 import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "./card.js";
 import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js";
 import { PageCommandButton } from "./page-actions.js";
@@ -12,6 +14,11 @@ const chartSizes = {
     default: "h-64",
     lg: "h-80",
 };
+/**
+ * Below a 28 rem card the controls drop under the title; a lone link stays at the
+ * header's trailing edge, as the ranking cards beside it keep theirs.
+ */
+const CONTROLS_UNDER_TITLE_WHEN_NARROW = "has-data-[slot=card-action]:grid-cols-1 [&>[data-slot=card-action]]:col-start-1 [&>[data-slot=card-action]]:row-span-1 [&>[data-slot=card-action]]:row-start-3 [&>[data-slot=card-action]]:justify-self-start @md/chart-card:has-data-[slot=card-action]:grid-cols-[1fr_auto] @md/chart-card:[&>[data-slot=card-action]]:col-start-2 @md/chart-card:[&>[data-slot=card-action]]:row-span-2 @md/chart-card:[&>[data-slot=card-action]]:row-start-1 @md/chart-card:[&>[data-slot=card-action]]:justify-self-end";
 /** Synthetic key for the aggregated neutral series. */
 const OTHER_SERIES_ID = "__nc-other-series__";
 function defaultValueFormatter(value) {
@@ -62,13 +69,13 @@ function foldOtherSeries(series, data, entityColorMap, otherLabel) {
  * @family Charts
  * @when Every chart and every reading built around one: the frame a page never builds by hand. A chart is a named section of its page.
  * @instead A single figure is a `KpiCard`, never nested inside a chart. A ranking beside the plot goes in the card's `aside`, not a second card.
- * @behaviour Header grid: title and period in the first column, controls in the second from a 28 rem card width, under the title below it. Summary, plot, legend, footer in that order. An empty dataset shows its `emptyState` in the plot's place. The footer is a recessed strip behind a hairline: the reading's time left, the link to its owner right.
- * @words Title names the measure and its split: "Model spend by Customer". Period as dates. Footer: the reading's time, "Updated 4 minutes ago" or "Read at 12:42", and the way to its owner, "Open in Analytics". Sentence case throughout.
+ * @behaviour Header grid: title and period in the first column, controls and then the link to the reading's owner (a small ghost button ending in a chevron, as OpenRouter's "Explore ›") in the second from a 28 rem card width, under the title below it; a link with no controls stays at the trailing edge at every width. Summary, plot, legend, footer in that order. An empty dataset shows its `emptyState` in the plot's place. The footer is a recessed strip behind a hairline: the reading's time left, a command on the reading (Refresh) right.
+ * @words Title names the measure and its split: "Model spend by Customer". Period as dates. The link: "Explore", or "Open in Analytics" where the owner is another page. Footer: the reading's time, "Updated 4 minutes ago" or "Read at 12:42". Sentence case throughout.
  * @access The title is a heading at the page's level (default 2) and labels the plot. The plot is focusable and shows the 2 px focus outline only on keyboard focus.
  */
-function ChartCard({ title, period, controls, summary, aside, footer, headingLevel = 2, className, children, }) {
+function ChartCard({ title, period, controls, link, summary, aside, footer, headingLevel = 2, className, children, }) {
     const titleId = React.useId();
-    return (_jsxs(Card, { "data-slot": "chart-card", className: cn("@container/chart-card", className), children: [_jsxs(CardHeader, { className: "has-data-[slot=card-action]:grid-cols-1 [&>[data-slot=card-action]]:col-start-1 [&>[data-slot=card-action]]:row-span-1 [&>[data-slot=card-action]]:row-start-3 [&>[data-slot=card-action]]:justify-self-start @md/chart-card:has-data-[slot=card-action]:grid-cols-[1fr_auto] @md/chart-card:[&>[data-slot=card-action]]:col-start-2 @md/chart-card:[&>[data-slot=card-action]]:row-span-2 @md/chart-card:[&>[data-slot=card-action]]:row-start-1 @md/chart-card:[&>[data-slot=card-action]]:justify-self-end", children: [_jsx(CardTitle, { id: titleId, role: "heading", "aria-level": headingLevel, children: title }), period ? _jsx(CardDescription, { children: period }) : null, controls ? _jsx(CardAction, { children: controls }) : null] }), summary ? (_jsx("div", { "data-slot": "chart-card-summary", className: "px-(--card-spacing)", children: summary })) : null, _jsxs(CardContent, { className: cn(aside &&
+    return (_jsxs(Card, { "data-slot": "chart-card", className: cn("@container/chart-card", className), children: [_jsxs(CardHeader, { className: cn(controls && CONTROLS_UNDER_TITLE_WHEN_NARROW), children: [_jsx(CardTitle, { id: titleId, role: "heading", "aria-level": headingLevel, children: title }), period ? _jsx(CardDescription, { children: period }) : null, controls || link ? (_jsxs(CardAction, { className: "flex flex-wrap items-center gap-2", children: [controls, link ? (_jsx(ButtonLink, { variant: "ghost", size: "sm", suffix: _jsx(ChevronRight, { "aria-hidden": "true" }), "aria-label": link.accessibleName, render: link.link, children: link.label })) : null] })) : null] }), summary ? (_jsx("div", { "data-slot": "chart-card-summary", className: "px-(--card-spacing)", children: summary })) : null, _jsxs(CardContent, { className: cn(aside &&
                     "grid min-w-0 gap-(--card-spacing) lg:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)]"), children: [_jsx("div", { className: "min-w-0", children: children(titleId) }), aside ? (_jsx("aside", { "data-slot": "chart-card-aside", className: "min-w-0 border-t border-border pt-(--card-spacing) lg:border-t-0 lg:border-l lg:pt-0 lg:pl-(--card-spacing)", children: aside })) : null] }), footer ? (_jsx(FooterStrip, { hint: footer.reading, hintSlot: "chart-card-reading", children: footer.link ? _jsx(PageCommandButton, { command: footer.link, variant: "ghost" }) : null })) : null] }));
 }
 function ChartSummary({ label, value, valueTitle, valueSize = "default", trend, status, }) {

package/dist/components/chart-date-range-control.d.ts

@@ -1,16 +1,21 @@
 import * as React from "react";
 import { type DateRangePreset, type DateRangeValue } from "./chart-date-range.js";
 /**
- * The period a chart reads: a `Select` of presets with a custom window from a calendar.
+ * The period a chart reads: a button that opens the common windows and a calendar for any other.
  *
  * @family Charts
- * @when The reading period of an overview or a chart: on the title row through `PageActions`' `period`, or in a `ChartCard`'s `controls` where the page has none.
- * @instead A choice of metric is a `ToggleGroup` in the card's controls. A date a person enters in a form is a date field.
- * @behaviour One select with the presets and a custom window; the value is encoded into the URL by the caller with `encodeDateRange`.
- * @words Presets name the window: "Past 7 days", "Past 14 days", "Past 30 days", "This cycle". A custom window reads as its dates.
- * @access The select carries the control's accessible name and announces the current range.
+ * @when "Pick `<Calendar>` for analytics ranges and any picker where day-of-week and month context matter." "Provide `<Calendar.Presets>` for the common ranges (`Last 7 Days`, `Month to Date`) so users land on the right window in one click." (https://vercel.com/geist/calendar)
+ * Ours: the reading period of an overview or a chart: on the title row through `PageActions`' `period`, or in a `ChartCard`'s `controls` where the page has none.
+ * @instead "For ISO dates pasted whole or relative shorthand like `7d`, use a free-form `Input`." (https://vercel.com/geist/calendar)
+ * Ours: a choice of metric is a `ToggleGroup` in the card's controls. A date a person enters in a form is a date field.
+ * @behaviour "Pair a horizontal layout with live results next to the calendar; in narrow surfaces like a sidebar, fall back to the stacked layout." "Set `min` and `max` to the data window so users can’t pick outside the retention range." "Keep the trigger label as the chosen range (`Apr 1 – Apr 28, 2026`); don’t fall back to `Pick a date` once a value is committed." "Persist the selected range when the popover closes and re-opens so users can tweak the end date without re-picking the start." (https://vercel.com/geist/calendar)
+ * Ours: one button that reads as the current window. It opens the presets as buttons beside a two-month calendar, stacked above it on a narrow surface. A preset applies at once and closes; a custom window applies on the second day. `min` and `max` are `minValue` and `maxValue`, the data's retention window. The value is encoded into the URL by the caller with `encodeDateRange`.
+ * @words "Each preset is a real button with a Title Case label (`Last 30 Days`); don’t mark presets as menu items without keyboard handling." (https://vercel.com/geist/calendar)
+ * Ours: presets name the window in sentence case: *Past 7 days*, *Past 14 days*, *Past 30 days*, *This cycle*. A custom window reads as its dates.
+ * @access "Trap focus inside the popover so Tab cycles day cells and presets instead of the page behind it." "Announce range changes through `aria-live="polite"` so a screen reader hears `From Apr 1 to Apr 28` after the second click." (https://vercel.com/geist/calendar)
+ * Ours: the button carries the control's name and the current window, and opens a dialog of preset buttons, the current one pressed, and the day grid. A polite status next to the button states the window: the preset's name, or the dates once the second day is chosen; it does not change after the first day.
  */
-declare function DateRangeControl({ value, onChange, label, presets, presetLabels, customLabel, formatCustomValue, className, }: {
+declare function DateRangeControl({ value, onChange, label, presets, presetLabels, formatCustomValue, minValue, maxValue, size, className, }: {
     value: DateRangeValue;
     onChange: (value: DateRangeValue) => void;
     /** Accessible name for the control. */
@@ -18,13 +23,17 @@ declare function DateRangeControl({ value, onChange, label, presets, presetLabel
     /** Which presets to offer, in order. Defaults to the full codec set. */
     presets?: readonly DateRangePreset[];
     presetLabels: Record<DateRangePreset, string>;
-    customLabel: string;
     /** Renders the selected custom window as a finished label in the reader's language. */
     formatCustomValue: (value: {
         from: string;
         to: string;
     }) => string;
-    className?: string;
+    /** The first day with data, as `yyyy-mm-dd`. */
+    minValue?: string | undefined;
+    /** The last day with data, as `yyyy-mm-dd`. */
+    maxValue?: string | undefined;
+    size?: "default" | "sm" | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 export { DateRangeControl };
 //# sourceMappingURL=chart-date-range-control.d.ts.map

package/dist/components/chart-date-range-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-date-range-control.d.ts","sourceRoot":"","sources":["../../src/components/chart-date-range-control.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AA2BvC;;;;;;;;;GASG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAA4B,EAC5B,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,YAAY,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAC9C,WAAW,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,iBAAiB,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAiGA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"chart-date-range-control.d.ts","sourceRoot":"","sources":["../../src/components/chart-date-range-control.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAyBvC;;;;;;;;;;;;;;GAcG;AACH,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAA4B,EAC5B,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,IAAgB,EAChB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,YAAY,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAC9C,uFAAuF;IACvF,iBAAiB,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACnE,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,qBAuGA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/chart-date-range-control.js

@@ -1,29 +1,28 @@
-// Composed from the shadcn registry items `select`, `popover` and `calendar`
-// (https://ui.shadcn.com/r/styles/base-nova/select.json, .../popover.json,
-// .../calendar.json).
+// Composed from the shadcn registry items `popover` and `calendar`
+// (https://ui.shadcn.com/r/styles/base-nova/popover.json, .../calendar.json).
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { Button } from "./button.js";
 import { cn } from "../lib/utils.js";
-import { Popover, PopoverContent } from "./popover.js";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
-import { DATE_RANGE_PRESETS, formatIsoDay, isDateRangePreset, parseIsoDay, } from "./chart-date-range.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { DATE_RANGE_PRESETS, formatIsoDay, parseIsoDay, } from "./chart-date-range.js";
 /**
- * chart-date-range-control — ONE Select of relative presets with a "Custom"
- * entry that opens a range calendar in a Popover anchored to it. A page
- * toolbar carries one such control, not a row of range buttons.
+ * chart-date-range-control: ONE button that opens the common windows as
+ * buttons beside a range calendar. A page toolbar carries one such control,
+ * not a row of range buttons.
  *
  * Fully controlled: the consumer owns the value and typically round-trips it
  * through URL state with `encodeDateRange` / `decodeDateRange` from
  * `chart-date-range` (a separate server-safe module, because the package owns
  * no routing).
  *
- * `presets` narrows which entries the Select offers, in the order given. It
- * only filters the offered entries — the codec enum (`DATE_RANGE_PRESETS`) is
+ * `presets` narrows which windows are offered, in the order given. It only
+ * filters the offered buttons: the codec enum (`DATE_RANGE_PRESETS`) is
  * unchanged, so a URL arriving with an un-offered but valid preset token still
  * decodes; the consumer decides its fallback.
  */
-const CUSTOM_VALUE = "custom";
 const loadCalendar = () => import("./calendar");
 const Calendar = React.lazy(() => loadCalendar().then((module) => ({ default: module.Calendar })));
 function preloadCalendar(open) {
@@ -31,19 +30,26 @@ function preloadCalendar(open) {
         loadCalendar().catch(() => undefined);
 }
 /**
- * The period a chart reads: a `Select` of presets with a custom window from a calendar.
+ * The period a chart reads: a button that opens the common windows and a calendar for any other.
  *
  * @family Charts
- * @when The reading period of an overview or a chart: on the title row through `PageActions`' `period`, or in a `ChartCard`'s `controls` where the page has none.
- * @instead A choice of metric is a `ToggleGroup` in the card's controls. A date a person enters in a form is a date field.
- * @behaviour One select with the presets and a custom window; the value is encoded into the URL by the caller with `encodeDateRange`.
- * @words Presets name the window: "Past 7 days", "Past 14 days", "Past 30 days", "This cycle". A custom window reads as its dates.
- * @access The select carries the control's accessible name and announces the current range.
+ * @when "Pick `<Calendar>` for analytics ranges and any picker where day-of-week and month context matter." "Provide `<Calendar.Presets>` for the common ranges (`Last 7 Days`, `Month to Date`) so users land on the right window in one click." (https://vercel.com/geist/calendar)
+ * Ours: the reading period of an overview or a chart: on the title row through `PageActions`' `period`, or in a `ChartCard`'s `controls` where the page has none.
+ * @instead "For ISO dates pasted whole or relative shorthand like `7d`, use a free-form `Input`." (https://vercel.com/geist/calendar)
+ * Ours: a choice of metric is a `ToggleGroup` in the card's controls. A date a person enters in a form is a date field.
+ * @behaviour "Pair a horizontal layout with live results next to the calendar; in narrow surfaces like a sidebar, fall back to the stacked layout." "Set `min` and `max` to the data window so users can’t pick outside the retention range." "Keep the trigger label as the chosen range (`Apr 1 – Apr 28, 2026`); don’t fall back to `Pick a date` once a value is committed." "Persist the selected range when the popover closes and re-opens so users can tweak the end date without re-picking the start." (https://vercel.com/geist/calendar)
+ * Ours: one button that reads as the current window. It opens the presets as buttons beside a two-month calendar, stacked above it on a narrow surface. A preset applies at once and closes; a custom window applies on the second day. `min` and `max` are `minValue` and `maxValue`, the data's retention window. The value is encoded into the URL by the caller with `encodeDateRange`.
+ * @words "Each preset is a real button with a Title Case label (`Last 30 Days`); don’t mark presets as menu items without keyboard handling." (https://vercel.com/geist/calendar)
+ * Ours: presets name the window in sentence case: *Past 7 days*, *Past 14 days*, *Past 30 days*, *This cycle*. A custom window reads as its dates.
+ * @access "Trap focus inside the popover so Tab cycles day cells and presets instead of the page behind it." "Announce range changes through `aria-live="polite"` so a screen reader hears `From Apr 1 to Apr 28` after the second click." (https://vercel.com/geist/calendar)
+ * Ours: the button carries the control's name and the current window, and opens a dialog of preset buttons, the current one pressed, and the day grid. A polite status next to the button states the window: the preset's name, or the dates once the second day is chosen; it does not change after the first day.
  */
-function DateRangeControl({ value, onChange, label, presets = DATE_RANGE_PRESETS, presetLabels, customLabel, formatCustomValue, className, }) {
+function DateRangeControl({ value, onChange, label, presets = DATE_RANGE_PRESETS, presetLabels, formatCustomValue, minValue, maxValue, size = "default", className, }) {
     const [open, setOpen] = React.useState(false);
     const [pending, setPending] = React.useState(undefined);
-    const anchor = React.useRef(null);
+    const id = React.useId();
+    const labelId = `${id}-label`;
+    const triggerId = `${id}-trigger`;
     const isCustom = value.kind === "custom";
     const selected = pending ??
         (isCustom ? { from: parseIsoDay(value.from), to: parseIsoDay(value.to) } : undefined);
@@ -52,40 +58,30 @@ function DateRangeControl({ value, onChange, label, presets = DATE_RANGE_PRESETS
         : presetLabels[value.preset];
     function handleOpenChange(nextOpen) {
         setOpen(nextOpen);
+        preloadCalendar(nextOpen);
         if (!nextOpen) {
             setPending(undefined);
         }
     }
-    function handleSelectChange(next) {
-        if (next === CUSTOM_VALUE) {
-            setOpen(true);
-            return;
-        }
-        if (next !== null && isDateRangePreset(next)) {
-            onChange({ kind: "preset", preset: next });
-        }
+    function handlePreset(preset) {
+        setPending(undefined);
+        setOpen(false);
+        onChange({ kind: "preset", preset });
     }
-    function handleCalendarSelect(range) {
-        // The day picker answers the FIRST click with `from` and `to` on the same
-        // day, so "both ends are set" is not the same as "the reader chose a
-        // window". A range commits on the second click: the first one only opens
-        // the selection and leaves the calendar up.
-        const started = pending?.from !== undefined;
-        const oneDay = range?.from !== undefined &&
-            range.to !== undefined &&
-            range.from.getTime() === range.to.getTime();
-        if (range?.from && range?.to && (started || !oneDay)) {
-            setPending(undefined);
-            setOpen(false);
-            onChange({
-                kind: "custom",
-                from: formatIsoDay(range.from),
-                to: formatIsoDay(range.to),
-            });
+    function handleCalendarSelect(_range, day) {
+        // The first click on an open picker starts a new window at that day, whatever window it
+        // shows; the day picker would instead stretch the shown window to it and the window would
+        // commit on one click. The second click ends the window, before or after the first day.
+        const start = pending?.from;
+        if (start === undefined) {
+            setPending({ from: day, to: undefined });
             return;
         }
-        setPending(range);
+        const [from, to] = start.getTime() <= day.getTime() ? [start, day] : [day, start];
+        setPending(undefined);
+        setOpen(false);
+        onChange({ kind: "custom", from: formatIsoDay(from), to: formatIsoDay(to) });
     }
-    return (_jsxs("div", { ref: anchor, "data-slot": "date-range-control", className: cn("inline-flex", className), children: [_jsxs(Select, { value: isCustom ? CUSTOM_VALUE : value.preset, onValueChange: handleSelectChange, onOpenChange: preloadCalendar, children: [_jsx(SelectTrigger, { "aria-label": label, className: "w-auto min-w-36", children: _jsx(SelectValue, { children: triggerLabel }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [presets.map((preset) => (_jsx(SelectItem, { value: preset, children: presetLabels[preset] }, preset))), _jsx(SelectItem, { value: CUSTOM_VALUE, children: customLabel })] }) })] }), _jsx(Popover, { open: open, onOpenChange: handleOpenChange, children: _jsx(PopoverContent, { anchor: anchor, align: "start", className: "w-auto p-0", children: _jsx(React.Suspense, { fallback: null, children: _jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: selected?.from, selected: selected, onSelect: handleCalendarSelect }) }) }) })] }));
+    return (_jsxs("div", { "data-slot": "date-range-control", className: cn("inline-flex", className), children: [_jsx("span", { className: "sr-only", id: labelId, children: label }), _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { render: _jsx(Button, { "aria-labelledby": `${labelId} ${triggerId}`, className: "w-auto min-w-36 justify-start", id: triggerId, prefix: _jsx(CalendarIcon, { "aria-hidden": "true" }), size: size, variant: "outline" }), children: triggerLabel }), _jsxs(PopoverContent, { align: "start", "aria-label": label, className: "w-auto flex-col gap-0 p-0 md:flex-row", sideOffset: 8, children: [_jsx("div", { className: "flex flex-col gap-1 border-b border-border p-2 md:w-44 md:border-r md:border-b-0", children: presets.map((preset) => (_jsx(Button, { "aria-pressed": !isCustom && value.preset === preset, className: "w-full justify-start", onClick: () => handlePreset(preset), size: "sm", variant: "ghost", children: presetLabels[preset] }, preset))) }), _jsx(React.Suspense, { fallback: null, children: _jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: selected?.from, selected: selected, onSelect: handleCalendarSelect, minValue: minValue === undefined ? undefined : parseIsoDay(minValue), maxValue: maxValue === undefined ? undefined : parseIsoDay(maxValue) }) })] })] }), _jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: triggerLabel })] }));
 }
 export { DateRangeControl };

package/dist/components/chart-sparkline.d.ts

@@ -1,10 +1,11 @@
 /**
- * The stock linear line with nothing around it: no axes, no grid, no tooltip, no card.
+ * The stock line with nothing around it: no axes, no grid, no tooltip, no card, drawn smooth and thin
+ * as OpenRouter's Activity tiles draw theirs, so a weekly rhythm reads as a wave and not as a row of spikes.
  *
  * @family Charts
  * @when What is trending: a row in a list, beside its name and its delta.
- * @instead When the reader needs values, axes or a period, use a full chart card. A KPI value carries its delta badge, not a sparkline, unless the card owns one.
- * @behaviour 96 by 32 px, a 2 px linear line. Stroke is one chart token or the entity's colour.
+ * @instead When the reader needs values, axes or a period, use a full chart card. A KPI value carries its delta badge; a `KpiCard` draws its own sparkline from its `sparkline` values, never one placed beside it.
+ * @behaviour 96 by 32 px, a 1.5 px monotone line through every value. Stroke is one chart token or the entity's colour.
  * @words None of its own. The row names the measure and the window: "Requests · past 8 weeks".
  * @access Decorative by default, hidden from assistive technology, because the value and delta beside it carry the reading. Standalone it takes a `label` and becomes an image.
  */

package/dist/components/chart-sparkline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-sparkline.d.ts","sourceRoot":"","sources":["../../src/components/chart-sparkline.tsx"],"names":[],"mappings":"AAYA;;;;;;;;;GASG;AACH,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,KAA2B,EAC3B,SAAS,GACV,EAAE;IACD,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAwBA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"chart-sparkline.d.ts","sourceRoot":"","sources":["../../src/components/chart-sparkline.tsx"],"names":[],"mappings":"AAYA;;;;;;;;;;GAUG;AACH,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,KAA2B,EAC3B,SAAS,GACV,EAAE;IACD,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAwBA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/chart-sparkline.js

@@ -1,6 +1,6 @@
 // Pulled from the shadcn registry item `chart-line-linear`
 // (https://ui.shadcn.com/r/styles/new-york-v4/chart-line-linear.json),
-// stripped of its card, axes, grid and tooltip.
+// stripped of its card, axes, grid and tooltip, its line drawn monotone at 1.5 px.
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Line, LineChart } from "recharts";
@@ -8,12 +8,13 @@ import { cn } from "../lib/utils.js";
 import { ChartContainer } from "./chart.js";
 const SPARKLINE_SERIES_KEY = "value";
 /**
- * The stock linear line with nothing around it: no axes, no grid, no tooltip, no card.
+ * The stock line with nothing around it: no axes, no grid, no tooltip, no card, drawn smooth and thin
+ * as OpenRouter's Activity tiles draw theirs, so a weekly rhythm reads as a wave and not as a row of spikes.
  *
  * @family Charts
  * @when What is trending: a row in a list, beside its name and its delta.
- * @instead When the reader needs values, axes or a period, use a full chart card. A KPI value carries its delta badge, not a sparkline, unless the card owns one.
- * @behaviour 96 by 32 px, a 2 px linear line. Stroke is one chart token or the entity's colour.
+ * @instead When the reader needs values, axes or a period, use a full chart card. A KPI value carries its delta badge; a `KpiCard` draws its own sparkline from its `sparkline` values, never one placed beside it.
+ * @behaviour 96 by 32 px, a 1.5 px monotone line through every value. Stroke is one chart token or the entity's colour.
  * @words None of its own. The row names the measure and the window: "Requests · past 8 weeks".
  * @access Decorative by default, hidden from assistive technology, because the value and delta beside it carry the reading. Standalone it takes a `label` and becomes an image.
  */
@@ -22,6 +23,6 @@ function ChartSparkline({ data, label, color = "var(--nc-chart-1)", className, }
     const chartConfig = {
         [SPARKLINE_SERIES_KEY]: { label: label ?? "Trend", color },
     };
-    return (_jsx(ChartContainer, { "data-slot": "chart-sparkline", config: chartConfig, className: cn("aspect-auto h-8 w-24", className), ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }), children: _jsx(LineChart, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: _jsx(Line, { dataKey: SPARKLINE_SERIES_KEY, type: "linear", stroke: color, strokeWidth: 2, dot: false }) }) }));
+    return (_jsx(ChartContainer, { "data-slot": "chart-sparkline", config: chartConfig, className: cn("aspect-auto h-8 w-24", className), ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }), children: _jsx(LineChart, { data: chartData, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: _jsx(Line, { dataKey: SPARKLINE_SERIES_KEY, type: "monotone", stroke: color, strokeWidth: 1.5, dot: false }) }) }));
 }
 export { ChartSparkline };

package/dist/components/check-counts.d.ts

@@ -0,0 +1,44 @@
+/** How a check ended, or that it has not ended yet. */
+type CheckOutcome = "passed" | "failed" | "warning" | "pending";
+type CheckCount = {
+    outcome: CheckOutcome;
+    count: number;
+    /** The count in words, which is what is read: "3 tasks completed". */
+    label: string;
+};
+type CheckCountsProps = {
+    /** Every outcome the checks can end in, zeros included: a zero stays, greyed. */
+    counts: readonly CheckCount[];
+    className?: string;
+};
+/**
+ * The checks run on one thing, counted by how they ended, each count a small outlined pill.
+ *
+ * @family Status
+ * @when The summary of a set of checks on one object, at the trailing edge of the row that opens
+ * them: an Agent's health checks (tasks completed, failed, still running), as Vercel counts a
+ * deployment's checks on its Deployment Checks row.
+ * @instead One state of a record is a `StatusBadge`. Whether the row as a whole passed is
+ * `CheckState`. A count of changed lines is `DiffCount`.
+ * @behaviour Each outcome is a 24 px outlined pill of its mark, in the outcome's colour (passed
+ * blue, failed red, warning amber, pending grey), and its count in ink and tabular figures, zeros
+ * included, in the order given, as Vercel draws a deployment's check counts. Static.
+ * @words The label is the count in words with its noun: *3 tasks completed*, *0 failed*.
+ * @access A list, drawn in phrasing elements so it can stand inside the button of the row it sums
+ * up; each chip is read by its label, and the mark is hidden, so colour never carries
+ * the outcome alone.
+ */
+declare function CheckCounts({ counts, className }: CheckCountsProps): import("react").JSX.Element;
+/**
+ * Whether a row of checks passed, as one filled 16 px circle at the row's trailing edge (passed
+ * blue with its check, as Vercel closes each deployment step); `none`
+ * when there was nothing to check. Read by its `label`, never by its colour.
+ */
+declare function CheckState({ outcome, label, className, }: {
+    outcome: CheckOutcome | "none";
+    /** The state in words: "All checks passed", "1 check failed". */
+    label: string;
+    className?: string;
+}): import("react").JSX.Element;
+export { CheckCounts, CheckState, type CheckCount, type CheckOutcome };
+//# sourceMappingURL=check-counts.d.ts.map

package/dist/components/check-counts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-counts.d.ts","sourceRoot":"","sources":["../../src/components/check-counts.tsx"],"names":[],"mappings":"AAYA,uDAAuD;AACvD,KAAK,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhE,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAWF,KAAK,gBAAgB,GAAG;IACtB,iFAAiF;IACjF,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAwB3D;AAUD;;;;GAIG;AACH,iBAAS,UAAU,CAAC,EAClB,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,OAAO,EAAE,YAAY,GAAG,MAAM,CAAC;IAC/B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAiBA;AAED,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/components/check-counts.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, CircleAlert, CircleCheck, CircleDot, Clock, Minus, } from "lucide-react";
+import { cn } from "../lib/utils.js";
+// As Vercel's deployment checks: an outlined pill per outcome, its mark in the
+// outcome's colour and its count in ink, zeros included.
+const CHIP_BY_OUTCOME = {
+    passed: { icon: CircleCheck, mark: "text-info" },
+    failed: { icon: CircleAlert, mark: "text-destructive" },
+    warning: { icon: CircleDot, mark: "text-warning" },
+    pending: { icon: Clock, mark: "text-muted-foreground" },
+};
+/**
+ * The checks run on one thing, counted by how they ended, each count a small outlined pill.
+ *
+ * @family Status
+ * @when The summary of a set of checks on one object, at the trailing edge of the row that opens
+ * them: an Agent's health checks (tasks completed, failed, still running), as Vercel counts a
+ * deployment's checks on its Deployment Checks row.
+ * @instead One state of a record is a `StatusBadge`. Whether the row as a whole passed is
+ * `CheckState`. A count of changed lines is `DiffCount`.
+ * @behaviour Each outcome is a 24 px outlined pill of its mark, in the outcome's colour (passed
+ * blue, failed red, warning amber, pending grey), and its count in ink and tabular figures, zeros
+ * included, in the order given, as Vercel draws a deployment's check counts. Static.
+ * @words The label is the count in words with its noun: *3 tasks completed*, *0 failed*.
+ * @access A list, drawn in phrasing elements so it can stand inside the button of the row it sums
+ * up; each chip is read by its label, and the mark is hidden, so colour never carries
+ * the outcome alone.
+ */
+function CheckCounts({ counts, className }) {
+    return (_jsx("span", { className: cn("flex shrink-0 items-center gap-1", className), "data-slot": "check-counts", role: "list", children: counts.map(({ outcome, count, label }) => {
+            const { icon: Icon, mark } = CHIP_BY_OUTCOME[outcome];
+            return (_jsxs("span", { className: "inline-flex h-6 items-center gap-1.5 rounded-full border border-border px-2 text-label-sm font-medium text-foreground tabular-nums", "data-outcome": outcome, role: "listitem", children: [_jsx(Icon, { "aria-hidden": "true", className: cn("size-3.5", mark) }), _jsx("span", { "aria-hidden": "true", children: count }), _jsx("span", { className: "sr-only", children: label })] }, outcome));
+        }) }));
+}
+const STATE_BY_OUTCOME = {
+    passed: { icon: Check, fill: "bg-info text-info-foreground" },
+    failed: { icon: CircleAlert, fill: "bg-destructive text-destructive-foreground" },
+    warning: { icon: CircleDot, fill: "bg-warning text-warning-foreground" },
+    pending: { icon: Clock, fill: "bg-muted-foreground text-background" },
+    none: { icon: Minus, fill: "bg-accent text-muted-foreground" },
+};
+/**
+ * Whether a row of checks passed, as one filled 16 px circle at the row's trailing edge (passed
+ * blue with its check, as Vercel closes each deployment step); `none`
+ * when there was nothing to check. Read by its `label`, never by its colour.
+ */
+function CheckState({ outcome, label, className, }) {
+    const { icon: Icon, fill } = STATE_BY_OUTCOME[outcome];
+    return (_jsx("span", { "aria-label": label, className: cn("inline-flex size-4 shrink-0 items-center justify-center rounded-full", fill, className), "data-outcome": outcome, "data-slot": "check-state", role: "img", children: _jsx(Icon, { "aria-hidden": "true", className: "size-2.5", strokeWidth: 3 }) }));
+}
+export { CheckCounts, CheckState };

package/dist/components/checkbox.d.ts

@@ -1,19 +1,47 @@
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { type ControlName } from "../internal/control-name.js";
 /**
  * A box that is checked, unchecked or mixed.
  *
  * @family Choices
- * @when Independent yes-or-no choices in a form, an acknowledgment before a step, selecting rows.
- * @instead A setting that is on or off is a `Switch`. One of several is a `RadioGroup`. Several
- * values from a long list is a multi-select.
- * @behaviour Unchecked is only the input-grey edge, showing the surface beneath. Checked fills with
- * ink and a 14 px check; mixed shows a minus and is worked out from the rows below. The label
- * toggles it too, and on touch the target is 44 px. A required acknowledgment is checked on submit.
- * @words The label says what is true when checked, positively: *Send a copy to the person who
- * asked*, not *Don't send*. A related set gets a legend.
- * @access `role="checkbox"` with `aria-checked` true, false or mixed. A row's box is named for its
- * record: *Select pec@acme.it*. A set sits in a `FieldSet` with its legend.
+ * @when "Multi-select inside a list, like table-row pickers, multi-pick filters, and opt-in
+ * preference groups." (https://vercel.com/geist/checkbox) "Acknowledgments where the user must
+ * affirm a specific statement (terms of service, irreversible export)."
+ * (https://vercel.com/geist/checkbox)
+ * @instead "For a single boolean setting like dark mode or password protection, use `Toggle`."
+ * (https://vercel.com/geist/checkbox) "The on/off mechanic is clearer there than a lone checkbox."
+ * (https://vercel.com/geist/checkbox) Ours: Geist's `Toggle` is our `Switch`. One of several
+ * exclusive options is a `RadioGroup`, and one that needs a description is a `ChoiceboxGroup`.
+ * Several values from a long list is a multi-select.
+ * @behaviour "Indeterminate is a visual state, not a third value."
+ * (https://vercel.com/geist/checkbox) "Drive it from a parent that knows partial selection, and
+ * clear it as soon as every child is fully checked or unchecked."
+ * (https://vercel.com/geist/checkbox) "Validation on a required acknowledgment fires on submit, not
+ * on blur, so checking and unchecking shouldn’t flash an error."
+ * (https://vercel.com/geist/checkbox) "Disabled checkboxes still need a Tooltip naming the reason;
+ * a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: named
+ * by `aria-label`, `aria-labelledby` or an `id` that a `FieldLabel` points at; a box with none does
+ * not compile. It is 16 px with a 4 px corner, the label 8 px away at 13 px regular weight on a 20
+ * px row, and the label is part of the target. Colour: only a checked box fills, in ink; an
+ * unchecked box shows the surface and greys on hover. Mixed is an unfilled box with a grey dash. A
+ * disabled box turns grey, an unchecked or mixed one with a lighter edge and a checked one mid
+ * grey, and ignores hover.
+ * @words "Group label above a `<fieldset>` is a Title Case noun like `Notifications` or `Required
+ * Permissions`. No trailing colon." (https://vercel.com/geist/checkbox) "Acknowledgment label is a
+ * full sentence ending in a period: `I agree to the Terms of Service.`"
+ * (https://vercel.com/geist/checkbox) "Indeterminate copy names the partial count next to the group
+ * label (`3 of 5 selected`). Never leave the dash state unlabeled."
+ * (https://vercel.com/geist/checkbox) Ours: sentence case, not Title Case. The label says what is
+ * true when checked, positively: *Send a copy to the person who asked*, not *Don't send*.
+ * @access "Wrap related checkboxes in `<fieldset>` with a `<legend>` so screen readers announce the
+ * group name before each option." (https://vercel.com/geist/checkbox) "Row-select checkbox in a
+ * table has no visible label. Set `aria-label="Select {row name}"` so the row stays identifiable
+ * out of context." (https://vercel.com/geist/checkbox) "The click target already extends to the
+ * label. Don’t override the `<label>`/`htmlFor` association with a custom wrapper that breaks the
+ * click region." (https://vercel.com/geist/checkbox) Ours: `role="checkbox"` with `aria-checked`
+ * true, false or mixed. A row's box is named for its record: *Select pec@acme.it*. A set sits in a
+ * `FieldSet` with its legend.
  */
-declare function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props): import("react").JSX.Element;
+declare function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props & ControlName): import("react").JSX.Element;
 export { Checkbox };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAKxE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,+BAmBtE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGxE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,GAAG,WAAW,+BAmBpF;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/checkbox.js

@@ -7,18 +7,45 @@ import { CheckIcon, MinusIcon } from "lucide-react";
  * A box that is checked, unchecked or mixed.
  *
  * @family Choices
- * @when Independent yes-or-no choices in a form, an acknowledgment before a step, selecting rows.
- * @instead A setting that is on or off is a `Switch`. One of several is a `RadioGroup`. Several
- * values from a long list is a multi-select.
- * @behaviour Unchecked is only the input-grey edge, showing the surface beneath. Checked fills with
- * ink and a 14 px check; mixed shows a minus and is worked out from the rows below. The label
- * toggles it too, and on touch the target is 44 px. A required acknowledgment is checked on submit.
- * @words The label says what is true when checked, positively: *Send a copy to the person who
- * asked*, not *Don't send*. A related set gets a legend.
- * @access `role="checkbox"` with `aria-checked` true, false or mixed. A row's box is named for its
- * record: *Select pec@acme.it*. A set sits in a `FieldSet` with its legend.
+ * @when "Multi-select inside a list, like table-row pickers, multi-pick filters, and opt-in
+ * preference groups." (https://vercel.com/geist/checkbox) "Acknowledgments where the user must
+ * affirm a specific statement (terms of service, irreversible export)."
+ * (https://vercel.com/geist/checkbox)
+ * @instead "For a single boolean setting like dark mode or password protection, use `Toggle`."
+ * (https://vercel.com/geist/checkbox) "The on/off mechanic is clearer there than a lone checkbox."
+ * (https://vercel.com/geist/checkbox) Ours: Geist's `Toggle` is our `Switch`. One of several
+ * exclusive options is a `RadioGroup`, and one that needs a description is a `ChoiceboxGroup`.
+ * Several values from a long list is a multi-select.
+ * @behaviour "Indeterminate is a visual state, not a third value."
+ * (https://vercel.com/geist/checkbox) "Drive it from a parent that knows partial selection, and
+ * clear it as soon as every child is fully checked or unchecked."
+ * (https://vercel.com/geist/checkbox) "Validation on a required acknowledgment fires on submit, not
+ * on blur, so checking and unchecking shouldn’t flash an error."
+ * (https://vercel.com/geist/checkbox) "Disabled checkboxes still need a Tooltip naming the reason;
+ * a greyed box with no explanation reads as a bug." (https://vercel.com/geist/checkbox) Ours: named
+ * by `aria-label`, `aria-labelledby` or an `id` that a `FieldLabel` points at; a box with none does
+ * not compile. It is 16 px with a 4 px corner, the label 8 px away at 13 px regular weight on a 20
+ * px row, and the label is part of the target. Colour: only a checked box fills, in ink; an
+ * unchecked box shows the surface and greys on hover. Mixed is an unfilled box with a grey dash. A
+ * disabled box turns grey, an unchecked or mixed one with a lighter edge and a checked one mid
+ * grey, and ignores hover.
+ * @words "Group label above a `<fieldset>` is a Title Case noun like `Notifications` or `Required
+ * Permissions`. No trailing colon." (https://vercel.com/geist/checkbox) "Acknowledgment label is a
+ * full sentence ending in a period: `I agree to the Terms of Service.`"
+ * (https://vercel.com/geist/checkbox) "Indeterminate copy names the partial count next to the group
+ * label (`3 of 5 selected`). Never leave the dash state unlabeled."
+ * (https://vercel.com/geist/checkbox) Ours: sentence case, not Title Case. The label says what is
+ * true when checked, positively: *Send a copy to the person who asked*, not *Don't send*.
+ * @access "Wrap related checkboxes in `<fieldset>` with a `<legend>` so screen readers announce the
+ * group name before each option." (https://vercel.com/geist/checkbox) "Row-select checkbox in a
+ * table has no visible label. Set `aria-label="Select {row name}"` so the row stays identifiable
+ * out of context." (https://vercel.com/geist/checkbox) "The click target already extends to the
+ * label. Don’t override the `<label>`/`htmlFor` association with a custom wrapper that breaks the
+ * click region." (https://vercel.com/geist/checkbox) Ours: `role="checkbox"` with `aria-checked`
+ * true, false or mixed. A row's box is named for its record: *Select pec@acme.it*. A set sits in a
+ * `FieldSet` with its legend.
  */
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-xs border border-input transition-colors group-has-disabled/field:opacity-50 after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: state.indeterminate ? _jsx(MinusIcon, {}) : _jsx(CheckIcon, {}) })) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-xs-plus border border-input nc-transition-paint after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-disabled:cursor-not-allowed data-disabled:not-data-checked:border-border data-disabled:not-data-checked:bg-muted data-disabled:data-checked:border-transparent data-disabled:data-checked:bg-input/50 data-indeterminate:text-input data-unchecked:not-data-disabled:hover:bg-accent data-indeterminate:not-data-disabled:hover:bg-accent aria-invalid:border-destructive aria-invalid:aria-checked:border-primary [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: state.indeterminate ? _jsx(MinusIcon, {}) : _jsx(CheckIcon, {}) })) }) }));
 }
 export { Checkbox };