@nadicodeai/ui 12.1.102 → 12.1.103

package/dist/components/record-time.d.ts

@@ -1,6 +1,15 @@
+import type { ComponentProps, ReactNode } from "react";
+import { HoverCardContent } from "./hover-card.js";
 export type RecordTimeProps = {
-    /** When it happened. */
-    at: Date | number | string;
+    /** When it happened; null or a time that names no moment draws `children`, or nothing. */
+    at: Date | number | string | null | undefined;
+    /**
+     * A state the time cannot describe, such as "Just now", "Pending" or "Queued". It replaces the
+     * sentence while `at` names a moment, and stands alone, without a card, while it does not.
+     */
+    children?: ReactNode;
+    /** Which side of the time the card opens on; above by default. */
+    side?: ComponentProps<typeof HoverCardContent>["side"];
     /** The person's language; the runtime's when left out. */
     locale?: string;
     /**
@@ -31,11 +40,15 @@ export declare function recordDate(at: Date | number | string | null | undefined
  * says what, or the time of day in a feed's time column.
  *
  * @family Data
- * @when The moment a record was made, changed or last ran, in its row or its facts ("Updated 3 hours ago"), and the time of each event in an ActivityFeed or a RunTimeline step (`mode="clock"`).
- * @instead A date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run's duration is a fact written by the product ("Took 4 min").
- * @behaviour Relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows the exact moment in UTC and in the viewer's zone. A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws nothing.
- * @words The product writes the sentence through `phrase` ("Updated {when}", "Ran {when}"); the clock needs no words. The package formats every date with the person's `locale`.
- * @access A `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.
+ * @when "Use `<RelativeTimeCard>` anywhere a recent timestamp appears in scannable surfaces: `Table` cells, `Entity` rows, deploy lists, activity feeds." (https://vercel.com/geist/relative-time-card)
+ * Ours: `RelativeTimeCard` is `RecordTime`: the moment a record was made, changed or last ran, in its row or its facts, and the time of each event in an ActivityFeed or a RunTimeline step (`mode="clock"`).
+ * @instead "For a static date in body prose past 7 days, render `Mar 14, 2026` directly." (https://vercel.com/geist/relative-time-card)
+ * Ours: a date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run's duration is a fact written by the product (*Took 4 min*).
+ * @behaviour "The hover card already shows absolute UTC and local time, so don’t duplicate that copy elsewhere on the row." (https://vercel.com/geist/relative-time-card)
+ * Ours: relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows a card that opens above after 150 ms, 13 px from the time, with a stem: the relative reading first, then the exact date and time in UTC and in the viewer's zone, each behind a zone chip, the viewer's by its offset (*GMT+2*). A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws `children`, a state such as *Pending*, or nothing.
+ * @words "Pass `date` as a number (Unix ms or epoch)." "Don’t pre-format the value, and don’t replace `children` with a formatted string." "The component’s short formatter is the canonical form (`2m`, `5h`, `Yesterday`)." "Don’t append `ago` after the component." "The formatter already produces `2m ago` / `5h ago`, so `<RelativeTimeCard /> ago` reads as `2m ago ago`." "Use `children` only for non-time labels (`Just now`, `Pending`, `Queued`) where the formatter can’t describe the state." "Pair with a leading label when the row is ambiguous on its own: `Last deploy <RelativeTimeCard date={ts} />`." (https://vercel.com/geist/relative-time-card)
+ * Ours: `at` takes a Date, epoch milliseconds or an ISO string, never a display string such as *3 hours ago*. The reading is the locale's long form (*3 hours ago*, *12 Sep*), not `2m`. The product writes the sentence through `phrase` (*Updated {when}*, *Ran {when}*), so *ago* is never added after it; the clock needs no words. The package formats every date with the person's `locale`.
+ * @access Ours: a `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.
  */
 export declare function RecordTime(props: RecordTimeProps): import("react").JSX.Element | null;
 //# sourceMappingURL=record-time.d.ts.map

package/dist/components/record-time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-time.d.ts","sourceRoot":"","sources":["../../src/components/record-time.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,eAAe,GAAG;IAC5B,wBAAwB;IACxB,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,CACA;IACE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AACH,gEAAgE;GAC9D;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CACpB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,IAAI,EACR,MAAM,CAAC,EAAE,MAAM,EACf,GAAG,SAAa,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAcR;AAED,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAIrF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,sCAoDhD"}
+{"version":3,"file":"record-time.d.ts","sourceRoot":"","sources":["../../src/components/record-time.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAa,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAYxF,MAAM,MAAM,eAAe,GAAG;IAC5B,0FAA0F;IAC1F,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACvD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,CACA;IACE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AACH,gEAAgE;GAC9D;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CACpB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,IAAI,EACR,MAAM,CAAC,EAAE,MAAM,EACf,GAAG,SAAa,EAChB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAcR;AAeD,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAIrF;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,sCAyEhD"}

package/dist/components/record-time.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";
 import { useHydrated } from "../hooks/use-hydrated.js";
 const DAY = 86_400_000;
@@ -27,6 +27,17 @@ export function formatRecordTime(at, locale, now = Date.now(), timeZone) {
         shown.year = "numeric";
     return new Intl.DateTimeFormat(locale, shown).format(at);
 }
+function offsetLabel(at, locale, timeZone) {
+    return new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" })
+        .formatToParts(at)
+        .find((part) => part.type === "timeZoneName")?.value;
+}
+function exactMoment(at, locale, timeZone) {
+    return {
+        date: new Intl.DateTimeFormat(locale, { dateStyle: "long", timeZone }).format(at),
+        time: new Intl.DateTimeFormat(locale, { timeStyle: "medium", timeZone }).format(at),
+    };
+}
 /** The moment `at` names, or null when it names none, such as an empty or malformed time. */
 export function recordDate(at) {
     if (at == null)
@@ -39,35 +50,43 @@ export function recordDate(at) {
  * says what, or the time of day in a feed's time column.
  *
  * @family Data
- * @when The moment a record was made, changed or last ran, in its row or its facts ("Updated 3 hours ago"), and the time of each event in an ActivityFeed or a RunTimeline step (`mode="clock"`).
- * @instead A date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run's duration is a fact written by the product ("Took 4 min").
- * @behaviour Relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows the exact moment in UTC and in the viewer's zone. A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws nothing.
- * @words The product writes the sentence through `phrase` ("Updated {when}", "Ran {when}"); the clock needs no words. The package formats every date with the person's `locale`.
- * @access A `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.
+ * @when "Use `<RelativeTimeCard>` anywhere a recent timestamp appears in scannable surfaces: `Table` cells, `Entity` rows, deploy lists, activity feeds." (https://vercel.com/geist/relative-time-card)
+ * Ours: `RelativeTimeCard` is `RecordTime`: the moment a record was made, changed or last ran, in its row or its facts, and the time of each event in an ActivityFeed or a RunTimeline step (`mode="clock"`).
+ * @instead "For a static date in body prose past 7 days, render `Mar 14, 2026` directly." (https://vercel.com/geist/relative-time-card)
+ * Ours: a date a person picks is a Calendar; a span of days a page reads is a DateRangeControl; a run's duration is a fact written by the product (*Took 4 min*).
+ * @behaviour "The hover card already shows absolute UTC and local time, so don’t duplicate that copy elsewhere on the row." (https://vercel.com/geist/relative-time-card)
+ * Ours: relative within a week, then the day and month, with the year only when it is another year; `mode="clock"` prints the time of day in the viewer's zone in tabular figures. Hovering either shows a card that opens above after 150 ms, 13 px from the time, with a stem: the relative reading first, then the exact date and time in UTC and in the viewer's zone, each behind a zone chip, the viewer's by its offset (*GMT+2*). A page rendered on a server passes the viewer's `timeZone` when it knows it, so the server and the browser write the same time; otherwise the server and the hydrating page write UTC and the page then rewrites it in the browser's zone. A time that names no moment draws `children`, a state such as *Pending*, or nothing.
+ * @words "Pass `date` as a number (Unix ms or epoch)." "Don’t pre-format the value, and don’t replace `children` with a formatted string." "The component’s short formatter is the canonical form (`2m`, `5h`, `Yesterday`)." "Don’t append `ago` after the component." "The formatter already produces `2m ago` / `5h ago`, so `<RelativeTimeCard /> ago` reads as `2m ago ago`." "Use `children` only for non-time labels (`Just now`, `Pending`, `Queued`) where the formatter can’t describe the state." "Pair with a leading label when the row is ambiguous on its own: `Last deploy <RelativeTimeCard date={ts} />`." (https://vercel.com/geist/relative-time-card)
+ * Ours: `at` takes a Date, epoch milliseconds or an ISO string, never a display string such as *3 hours ago*. The reading is the locale's long form (*3 hours ago*, *12 Sep*), not `2m`. The product writes the sentence through `phrase` (*Updated {when}*, *Ran {when}*), so *ago* is never added after it; the clock needs no words. The package formats every date with the person's `locale`.
+ * @access Ours: a `<time>` element with the machine-readable moment; assistive technology reads the exact local moment after the visible text.
  */
 export function RecordTime(props) {
     const { at, locale, now } = props;
     const hydrated = useHydrated();
     const timeZone = props.timeZone ?? (hydrated ? undefined : "UTC");
     const date = recordDate(at);
-    if (!date)
-        return null;
-    const inZone = new Intl.DateTimeFormat(locale, {
+    if (!date) {
+        return props.children ? (_jsx("span", { className: "whitespace-nowrap text-muted-foreground", "data-slot": "record-time", children: props.children })) : null;
+    }
+    const local = new Intl.DateTimeFormat(locale, {
         dateStyle: "long",
         timeStyle: "medium",
         timeZone,
-    });
-    const local = inZone.format(date);
-    const utc = new Intl.DateTimeFormat(locale, {
-        dateStyle: "long",
-        timeStyle: "medium",
-        timeZone: "UTC",
     }).format(date);
+    const exactRows = [
+        { id: "utc", zone: "UTC", ...exactMoment(date, locale, "UTC") },
+        {
+            id: "viewer",
+            zone: offsetLabel(date, locale, timeZone) ?? "UTC",
+            ...exactMoment(date, locale, timeZone),
+        },
+    ];
     const clock = props.mode === "clock";
-    const shown = clock
-        ? new Intl.DateTimeFormat(locale, { timeStyle: "short", timeZone }).format(date)
-        : props.phrase(formatRecordTime(date, locale, now, timeZone));
+    const shown = props.children ??
+        (clock
+            ? new Intl.DateTimeFormat(locale, { timeStyle: "short", timeZone }).format(date)
+            : props.phrase(formatRecordTime(date, locale, now, timeZone)));
     return (_jsxs(HoverCard, { children: [_jsxs(HoverCardTrigger, { render: _jsx("time", { className: clock
                         ? "whitespace-nowrap tabular-nums text-muted-foreground"
-                        : "whitespace-nowrap text-muted-foreground", "data-slot": "record-time", dateTime: date.toISOString() }), children: [shown, _jsxs("span", { className: "sr-only", children: [", ", local] })] }), _jsx(HoverCardContent, { className: "w-auto", children: _jsxs("dl", { className: "grid grid-cols-[auto_auto] gap-x-4 gap-y-1 text-xs", "data-slot": "record-time-exact", children: [_jsx("dt", { className: "text-muted-foreground", children: "UTC" }), _jsx("dd", { className: "tabular-nums", children: utc }), _jsx("dt", { className: "text-muted-foreground", children: inZone.resolvedOptions().timeZone }), _jsx("dd", { className: "tabular-nums", children: local })] }) })] }));
+                        : "whitespace-nowrap text-muted-foreground", "data-slot": "record-time", dateTime: date.toISOString() }), children: [shown, _jsxs("span", { className: "sr-only", children: [", ", local] })] }), _jsx(HoverCardContent, { side: props.side, sideOffset: 13, children: _jsxs("div", { className: "grid min-w-75 gap-3 text-body-compact", "data-slot": "record-time-exact", children: [_jsx("p", { className: "text-muted-foreground tabular-nums", children: formatRecordTime(date, locale, now, timeZone) }), _jsx("dl", { className: "grid gap-2", children: exactRows.map((row) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("dt", { className: "inline-flex h-4 items-center rounded-xs bg-recessed px-1.5 font-label-mono text-label-mono text-muted-foreground", children: row.zone }), _jsxs("dd", { className: "flex min-w-0 flex-1 items-center justify-between gap-3", children: [_jsx("span", { children: row.date }), _jsx("span", { className: "font-label-mono text-label-mono text-muted-foreground tabular-nums", children: row.time })] })] }, row.id))) })] }) })] }));
 }

package/dist/components/resizable.d.ts

@@ -3,15 +3,17 @@ import * as ResizablePrimitive from "react-resizable-panels";
  * Panels a person resizes by dragging the handle between them.
  *
  * @family Other
- * @when Side-by-side panes whose balance a person sets: a conversation and its side panel.
- * @instead The product frame's sidebar resizes through `DashboardShell` or `DesktopAppShell`.
- * @behaviour The handle moves on drag and on arrow keys; each panel keeps its minimum and maximum.
- * @words None of its own.
- * @access The handle is the resizable library's focusable separator.
+ * @when Side-by-side panes whose balance a person sets: a conversation and its side panel. Nadia's side panel is this, with the window's grid column as the group; it is not a hand-made separator.
+ * @instead The product frame's sidebar resizes through `Sidebar`'s `resize` handle or `DesktopAppShell`. A width a person never changes is a plain grid column.
+ * @behaviour The handle moves on drag and on arrow keys, and returns the panels to their default size on a double click; each panel keeps its minimum and maximum. A number is pixels (`minSize={352}`), a string without a unit is a percentage (`defaultSize="60"`), and `"20rem"` and `"40vw"` are read as written, so a panel that must keep a readable width is set in pixels and the pane beside it takes the rest. The handle is a 1 px line with a 4 px reach on each side; it takes the ring colour while hovered, dragged or focused, and `withHandle` adds a grip for a handle that must be found. Colour: neutral until it is touched, then the ring colour, and nothing else.
+ * @words Required: the handle's name, a verb phrase from the product's catalogue: *Resize the side panel*. A panel has none of its own.
+ * @access The handle is the resizable library's focusable `separator` with its value, named by the `aria-label` the type requires; the arrow keys move it and Home and End take it to the ends of its range.
  */
 declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): import("react").JSX.Element;
 declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): import("react").JSX.Element;
 declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {
+    /** Names the handle for assistive technology: "Resize the side panel". */
+    "aria-label": string;
     withHandle?: boolean;
 }): import("react").JSX.Element;
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D;;;;;;;;;GASG;AACH,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,UAAU,+BASlF;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,UAAU,+BAElE;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,cAAc,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,+BAaA;AAED,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D;;;;;;;;;GASG;AACH,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,UAAU,+BASlF;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,UAAU,+BAElE;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,cAAc,GAAG;IACrC,0EAA0E;IAC1E,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,+BAaA;AAED,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/resizable.js

@@ -6,11 +6,11 @@ import { cn } from "../lib/utils.js";
  * Panels a person resizes by dragging the handle between them.
  *
  * @family Other
- * @when Side-by-side panes whose balance a person sets: a conversation and its side panel.
- * @instead The product frame's sidebar resizes through `DashboardShell` or `DesktopAppShell`.
- * @behaviour The handle moves on drag and on arrow keys; each panel keeps its minimum and maximum.
- * @words None of its own.
- * @access The handle is the resizable library's focusable separator.
+ * @when Side-by-side panes whose balance a person sets: a conversation and its side panel. Nadia's side panel is this, with the window's grid column as the group; it is not a hand-made separator.
+ * @instead The product frame's sidebar resizes through `Sidebar`'s `resize` handle or `DesktopAppShell`. A width a person never changes is a plain grid column.
+ * @behaviour The handle moves on drag and on arrow keys, and returns the panels to their default size on a double click; each panel keeps its minimum and maximum. A number is pixels (`minSize={352}`), a string without a unit is a percentage (`defaultSize="60"`), and `"20rem"` and `"40vw"` are read as written, so a panel that must keep a readable width is set in pixels and the pane beside it takes the rest. The handle is a 1 px line with a 4 px reach on each side; it takes the ring colour while hovered, dragged or focused, and `withHandle` adds a grip for a handle that must be found. Colour: neutral until it is touched, then the ring colour, and nothing else.
+ * @words Required: the handle's name, a verb phrase from the product's catalogue: *Resize the side panel*. A panel has none of its own.
+ * @access The handle is the resizable library's focusable `separator` with its value, named by the `aria-label` the type requires; the arrow keys move it and Home and End take it to the ends of its range.
  */
 function ResizablePanelGroup({ className, ...props }) {
     return (_jsx(ResizablePrimitive.Group, { "data-slot": "resizable-panel-group", className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className), ...props }));
@@ -19,6 +19,6 @@ function ResizablePanel({ ...props }) {
     return _jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({ withHandle, className, ...props }) {
-    return (_jsx(ResizablePrimitive.Separator, { "data-slot": "resizable-handle", className: cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90", className), ...props, children: withHandle && _jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-full bg-border" }) }));
+    return (_jsx(ResizablePrimitive.Separator, { "data-slot": "resizable-handle", className: cn("relative flex w-px items-center justify-center bg-border nc-transition-paint data-[separator=active]:bg-ring data-[separator=focus]:bg-ring data-[separator=hover]:bg-ring after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90", className), ...props, children: withHandle && _jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-full bg-border" }) }));
 }
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/components/scope-switcher.d.ts

@@ -9,6 +9,8 @@ export type ScopeSwitcherCopy = {
     label: string;
     search: string;
     empty: string;
+    /** The sentence a screen reader hears as the list narrows, from the catalogue: "3 results". */
+    results: (count: number) => string;
 };
 export type ScopeSwitcherProps = {
     value: string;

package/dist/components/scope-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scope-switcher.d.ts","sourceRoot":"","sources":["../../src/components/scope-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,kBAAkB,qBA6FhG"}
+{"version":3,"file":"scope-switcher.d.ts","sourceRoot":"","sources":["../../src/components/scope-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAClD,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,kBAAkB,qBA6FhG"}

package/dist/components/scope-switcher.js

@@ -34,11 +34,11 @@ export function ScopeSwitcher({ value, options, onValueChange, copy, create }) {
             onValueChange(next);
     };
     const switchable = options.length > 1 || create !== undefined;
-    return (_jsxs("span", { "data-slot": "scope-switcher", className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "aria-hidden": switchable ? "true" : undefined, className: "text-xs font-medium text-muted-foreground", children: copy.label }), switchable ? (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "ghost", "aria-label": `${copy.label}: ${currentLabel}`, className: "max-w-64" }), children: [_jsx("span", { className: "truncate", children: currentLabel }), _jsx(ChevronsUpDown, { "data-icon": "inline-end", "aria-hidden": "true" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-0", initialFocus: search, children: [_jsx(PopoverTitle, { className: "sr-only", children: copy.label }), _jsxs(Command, { label: copy.search, children: [_jsx(CommandInput, { ref: search, "aria-label": copy.search, placeholder: copy.search }), _jsxs(CommandList, { label: copy.label, children: [_jsx(CommandEmpty, { children: copy.empty }), groups.map(([group, items]) => (_jsx(CommandGroup, { heading: group, children: items.map((option) => (_jsx(CommandItem, { value: option.value, keywords: [
+    return (_jsxs("span", { "data-slot": "scope-switcher", className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "aria-hidden": switchable ? "true" : undefined, className: "text-xs font-medium text-muted-foreground", children: copy.label }), switchable ? (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { variant: "ghost", className: "max-w-64", suffix: _jsx(ChevronsUpDown, { "aria-hidden": "true" }) }), children: [_jsxs("span", { className: "sr-only", children: [copy.label, ":"] }), " ", _jsx("span", { className: "truncate", children: currentLabel })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-0", initialFocus: search, children: [_jsx(PopoverTitle, { className: "sr-only", children: copy.label }), _jsxs(Command, { label: copy.search, resultCount: copy.results, children: [_jsx(CommandInput, { ref: search, "aria-label": copy.search, placeholder: copy.search }), _jsxs(CommandList, { label: copy.label, children: [_jsx(CommandEmpty, { children: copy.empty }), groups.map(([group, items]) => (_jsx(CommandGroup, { heading: group, children: items.map((option) => (_jsx(CommandItem, { value: option.value, keywords: [
                                                         option.label,
                                                         ...(option.group ? [option.group] : []),
                                                         ...(option.keywords ?? []),
-                                                    ], "data-checked": option.value === value, onSelect: () => choose(option.value), children: _jsx("span", { className: "truncate", children: option.label }) }, option.value))) }, group ?? ""))), create ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { alwaysRender: true }), _jsx(CommandGroup, { forceMount: true, children: _jsxs(CommandItem, { value: `create ${create.label}`, forceMount: true, onSelect: () => {
+                                                    ], "data-checked": option.value === value, onSelect: () => choose(option.value), children: _jsx("span", { className: "truncate", children: option.label }) }, option.value))) }, group ?? ""))), create ? (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, { alwaysRender: true }), _jsx(CommandGroup, { forceMount: true, heading: undefined, children: _jsxs(CommandItem, { value: `create ${create.label}`, forceMount: true, onSelect: () => {
                                                                 setOpen(false);
                                                                 create.onSelect();
                                                             }, children: [_jsx(Plus, { "aria-hidden": "true" }), create.label] }) })] })) : null] })] })] })] })) : (_jsx("span", { className: "truncate px-3 text-sm", children: currentLabel }))] }));

package/dist/components/scroll-area.d.ts

@@ -1,18 +1,54 @@
 import * as React from "react";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+type ButtonLabels = {
+    /** Names the move back and what moves, such as "Scroll installations left". */
+    previous: string;
+    /** Names the move forward and what moves, such as "Scroll installations right". */
+    next: string;
+};
+type ScrollAxes = {
+    overflow: "y" | "x" | "both";
+    buttonLabels?: undefined;
+} | {
+    overflow: "y" | "x";
+    buttonLabels: ButtonLabels;
+};
+type ScrollAreaProps = Omit<ScrollAreaPrimitive.Root.Props, "children" | "render"> & ScrollAxes & {
+    children: React.ReactNode;
+    /** Classes of the element that holds the children; its children are what the buttons scroll to. */
+    contentClassName?: string | undefined;
+    /** Classes of the scrolling box alone, such as a border and radius; the buttons stay outside it. */
+    frameClassName?: string | undefined;
+};
 /**
- * An area that scrolls with the product's own thin scrollbar.
+ * An area that scrolls along one axis, with a fade where more is waiting.
  *
  * @family Other
- * @when A bounded area whose content overflows on one axis: a side panel's list, a menu's long
- * body.
- * @instead A page scrolls as the document. A rail of slides is `Carousel`.
- * @behaviour The viewport scrolls natively, so wheel, touch and keyboard all reach it; the thin
- * scrollbar is drawn over the content.
- * @words None of its own.
- * @access The content keeps its own semantics; the scrollbar is paint.
+ * @when “Use Scroller for an overflowing list of peer items along a single axis: chip rows, log streams, code snippets, command palettes.” (https://vercel.com/geist/scroller)
+ * “Pick `vertical` for stacked feeds, `horizontal` for chip and tile rails, `free` only when content genuinely scrolls in both directions (logs with very long lines).” (https://vercel.com/geist/scroller)
+ * “For paginated or virtualized data sets larger than a few hundred items, render with a virtualization library inside the Scroller rather than dumping every node into the DOM.” (https://vercel.com/geist/scroller)
+ * Ours: Geist's `Scroller` is `ScrollArea`, and `vertical`, `horizontal` and `free` are `overflow="y"`,
+ * `"x"` and `"both"`. A bounded area whose content overflows: a side panel's list, a menu's long
+ * body, a rail of chips or logos.
+ * @instead Ours: a page scrolls as the document. A sequence of slides on the website is `Carousel`.
+ * @behaviour “Buttons will automatically scroll to a given **direct** child.” (https://vercel.com/geist/scroller)
+ * “Auto-scroll buttons target direct children only. If items are wrapped in extra layout nodes the buttons won’t find their target.” (https://vercel.com/geist/scroller)
+ * “Show edge fade or shadow affordances on the clipped axis so users see there’s more content past the viewport.” (https://vercel.com/geist/scroller)
+ * “Keep item widths and gaps consistent in horizontal scrollers; ragged edges break the snap rhythm and make the rail feel broken.” (https://vercel.com/geist/scroller)
+ * Ours: `overflow` is required. Give the area its height or width with `className`, and a border or
+ * radius with `frameClassName`, which draws only the scrolling box and leaves the buttons outside
+ * it. The scrollbar is hidden; a 40 px fade of the surface at each clipped edge is the only sign
+ * there is more, and it is gone at an edge with nothing beyond it. The viewport scrolls natively, so
+ * wheel, touch and keyboard all reach it. `buttonLabels` adds two round 32 px outline buttons, 16 px
+ * from the area: above it and centred for `y`, below it and at the start for `x`. They sit disabled
+ * at the ends. Smooth scrolling gives way to an instant jump under reduced motion. Colour is neutral
+ * only.
+ * @words “Scroller buttons need `aria-label`s that name the direction and content (`Scroll customer logos left`), not bare `Previous`/`Next`.” (https://vercel.com/geist/scroller)
+ * Ours: *Scroll installations left*; both labels are required with the buttons.
+ * @access “Tab order follows DOM order, so place items in reading order regardless of visual scroll direction.” (https://vercel.com/geist/scroller)
+ * “Make sure focusing an off-screen item scrolls it into view; the default browser behavior covers this, but custom focus traps can break it.” (https://vercel.com/geist/scroller)
+ * Ours: the content keeps its own semantics. The viewport is a tab stop when it scrolls.
  */
-declare function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props): React.JSX.Element;
-declare function ScrollBar({ className, orientation, ...props }: ScrollAreaPrimitive.Scrollbar.Props): React.JSX.Element;
-export { ScrollArea, ScrollBar };
+declare function ScrollArea({ className, children, contentClassName, frameClassName, overflow, buttonLabels, ...props }: ScrollAreaProps): React.JSX.Element;
+export { ScrollArea };
 //# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/components/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;;;;;;;;GAWG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,qBAiBpF;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,SAAS,CAAC,KAAK,qBAkBrC;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/components/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAM/E,KAAK,YAAY,GAAG;IAClB,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,mFAAmF;IACnF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,UAAU,GACX;IAAE,QAAQ,EAAE,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,GAC1D;IAAE,QAAQ,EAAE,GAAG,GAAG,GAAG,CAAC;IAAC,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC;AAExD,KAAK,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,QAAQ,CAAC,GAChF,UAAU,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mGAAmG;IACnG,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,oGAAoG;IACpG,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC,CAAC;AAmCJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,eAAe,qBAyEjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/scroll-area.js

@@ -1,22 +1,80 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
+import { Button } from "./button.js";
 import { cn } from "../lib/utils.js";
+const viewportAxis = {
+    y: "overflow-x-hidden! [mask-image:linear-gradient(to_bottom,transparent,black_min(2.5rem,var(--scroll-area-overflow-y-start,0px)),black_calc(100%_-_min(2.5rem,var(--scroll-area-overflow-y-end,0px))),transparent)]",
+    x: "overflow-y-hidden! [mask-image:linear-gradient(to_right,transparent,black_min(2.5rem,var(--scroll-area-overflow-x-start,0px)),black_calc(100%_-_min(2.5rem,var(--scroll-area-overflow-x-end,0px))),transparent)]",
+    both: "[mask-composite:intersect] [mask-image:linear-gradient(to_bottom,transparent,black_min(2.5rem,var(--scroll-area-overflow-y-start,0px)),black_calc(100%_-_min(2.5rem,var(--scroll-area-overflow-y-end,0px))),transparent),linear-gradient(to_right,transparent,black_min(2.5rem,var(--scroll-area-overflow-x-start,0px)),black_calc(100%_-_min(2.5rem,var(--scroll-area-overflow-x-end,0px))),transparent)]",
+};
+function scrollToNeighbour(viewport, content, axis, direction) {
+    const edges = (box) => axis === "y" ? { start: box.top, end: box.bottom } : { start: box.left, end: box.right };
+    const view = edges(viewport.getBoundingClientRect());
+    const items = Array.from(content.children, (child) => edges(child.getBoundingClientRect()));
+    const target = direction === "next"
+        ? items.find((item) => item.end > view.end + 1)
+        : items.reverse().find((item) => item.start < view.start - 1);
+    if (!target)
+        return;
+    const distance = direction === "next"
+        ? Math.min(target.end - view.end, target.start - view.start)
+        : target.start - view.start;
+    viewport.scrollBy(axis === "y" ? { top: distance } : { left: distance });
+}
+const buttonIcons = {
+    x: { previous: ChevronLeftIcon, next: ChevronRightIcon },
+    y: { previous: ChevronUpIcon, next: ChevronDownIcon },
+};
 /**
- * An area that scrolls with the product's own thin scrollbar.
+ * An area that scrolls along one axis, with a fade where more is waiting.
  *
  * @family Other
- * @when A bounded area whose content overflows on one axis: a side panel's list, a menu's long
- * body.
- * @instead A page scrolls as the document. A rail of slides is `Carousel`.
- * @behaviour The viewport scrolls natively, so wheel, touch and keyboard all reach it; the thin
- * scrollbar is drawn over the content.
- * @words None of its own.
- * @access The content keeps its own semantics; the scrollbar is paint.
+ * @when “Use Scroller for an overflowing list of peer items along a single axis: chip rows, log streams, code snippets, command palettes.” (https://vercel.com/geist/scroller)
+ * “Pick `vertical` for stacked feeds, `horizontal` for chip and tile rails, `free` only when content genuinely scrolls in both directions (logs with very long lines).” (https://vercel.com/geist/scroller)
+ * “For paginated or virtualized data sets larger than a few hundred items, render with a virtualization library inside the Scroller rather than dumping every node into the DOM.” (https://vercel.com/geist/scroller)
+ * Ours: Geist's `Scroller` is `ScrollArea`, and `vertical`, `horizontal` and `free` are `overflow="y"`,
+ * `"x"` and `"both"`. A bounded area whose content overflows: a side panel's list, a menu's long
+ * body, a rail of chips or logos.
+ * @instead Ours: a page scrolls as the document. A sequence of slides on the website is `Carousel`.
+ * @behaviour “Buttons will automatically scroll to a given **direct** child.” (https://vercel.com/geist/scroller)
+ * “Auto-scroll buttons target direct children only. If items are wrapped in extra layout nodes the buttons won’t find their target.” (https://vercel.com/geist/scroller)
+ * “Show edge fade or shadow affordances on the clipped axis so users see there’s more content past the viewport.” (https://vercel.com/geist/scroller)
+ * “Keep item widths and gaps consistent in horizontal scrollers; ragged edges break the snap rhythm and make the rail feel broken.” (https://vercel.com/geist/scroller)
+ * Ours: `overflow` is required. Give the area its height or width with `className`, and a border or
+ * radius with `frameClassName`, which draws only the scrolling box and leaves the buttons outside
+ * it. The scrollbar is hidden; a 40 px fade of the surface at each clipped edge is the only sign
+ * there is more, and it is gone at an edge with nothing beyond it. The viewport scrolls natively, so
+ * wheel, touch and keyboard all reach it. `buttonLabels` adds two round 32 px outline buttons, 16 px
+ * from the area: above it and centred for `y`, below it and at the start for `x`. They sit disabled
+ * at the ends. Smooth scrolling gives way to an instant jump under reduced motion. Colour is neutral
+ * only.
+ * @words “Scroller buttons need `aria-label`s that name the direction and content (`Scroll customer logos left`), not bare `Previous`/`Next`.” (https://vercel.com/geist/scroller)
+ * Ours: *Scroll installations left*; both labels are required with the buttons.
+ * @access “Tab order follows DOM order, so place items in reading order regardless of visual scroll direction.” (https://vercel.com/geist/scroller)
+ * “Make sure focusing an off-screen item scrolls it into view; the default browser behavior covers this, but custom focus traps can break it.” (https://vercel.com/geist/scroller)
+ * Ours: the content keeps its own semantics. The viewport is a tab stop when it scrolls.
  */
-function ScrollArea({ className, children, ...props }) {
-    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "size-full rounded-[inherit] transition-colors", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
-}
-function ScrollBar({ className, orientation = "vertical", ...props }) {
-    return (_jsx(ScrollAreaPrimitive.Scrollbar, { "data-slot": "scroll-area-scrollbar", "data-orientation": orientation, orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", className), ...props, children: _jsx(ScrollAreaPrimitive.Thumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) }));
+function ScrollArea({ className, children, contentClassName, frameClassName, overflow, buttonLabels, ...props }) {
+    const viewport = React.useRef(null);
+    const content = React.useRef(null);
+    const axis = overflow === "y" ? "y" : "x";
+    const buttons = (disabled) => buttonLabels ? (_jsx("div", { className: cn("m-px flex gap-2", axis === "y" ? "justify-center" : "justify-start"), "data-slot": "scroll-area-buttons", children: ["previous", "next"].map((direction) => {
+            const Icon = buttonIcons[axis][direction];
+            return (_jsx(Button, { "aria-label": buttonLabels[direction], disabled: disabled[direction], onClick: () => {
+                    if (viewport.current && content.current) {
+                        scrollToNeighbour(viewport.current, content.current, axis, direction);
+                    }
+                }, shape: "circle", size: "icon-sm", variant: "outline", children: _jsx(Icon, { "aria-hidden": "true" }) }, direction));
+        }) })) : null;
+    return (_jsx(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative flex flex-col gap-4", className), render: (rootProps, state) => {
+            const row = buttons({
+                previous: axis === "y" ? !state.overflowYStart : !state.overflowXStart,
+                next: axis === "y" ? !state.overflowYEnd : !state.overflowXEnd,
+            });
+            return (_jsxs("div", { ...rootProps, children: [axis === "y" ? row : null, _jsx("div", { className: cn("relative min-h-0 flex-1 rounded-[inherit]", frameClassName), children: rootProps.children }), axis === "x" ? row : null] }));
+        }, ...props, children: _jsx(ScrollAreaPrimitive.Viewport, { ref: viewport, "data-slot": "scroll-area-viewport", className: cn("size-full scroll-smooth rounded-[inherit] transition-colors motion-reduce:scroll-auto", viewportAxis[overflow]), children: _jsx(ScrollAreaPrimitive.Content, { ref: content, "data-slot": "scroll-area-content", className: contentClassName, children: children }) }) }));
 }
-export { ScrollArea, ScrollBar };
+export { ScrollArea };

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+export type SegmentedControlSize = "sm" | "default" | "lg";
+export type SegmentedOption<Value extends string = string> = {
+    value: Value;
+    /** The option's name. An icon-only option shows it as a tooltip and keeps it as its accessible name. */
+    label: string;
+    disabled?: boolean;
+} & ({
+    icon?: undefined;
+    iconOnly?: undefined;
+} | {
+    icon: React.ReactElement;
+    iconOnly?: boolean;
+});
+export type SegmentedOptions<Value extends string = string> = readonly [SegmentedOption<Value>, SegmentedOption<Value>] | readonly [SegmentedOption<Value>, SegmentedOption<Value>, SegmentedOption<Value>];
+export type SegmentedControlProps<Value extends string = string> = Omit<RadioGroupPrimitive.Props<Value>, "aria-label" | "aria-labelledby" | "children" | "defaultValue" | "onValueChange" | "readOnly" | "render" | "required" | "value"> & {
+    options: SegmentedOptions<Value>;
+    size?: SegmentedControlSize;
+    /** Stretches the control to its container, with the options sharing the width equally. */
+    fullWidth?: boolean;
+} & ({
+    "aria-label": string;
+    "aria-labelledby"?: undefined;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: undefined;
+}) & ({
+    value: Value;
+    defaultValue?: undefined;
+    onValueChange: (value: Value) => void;
+} | {
+    defaultValue: Value;
+    value?: undefined;
+    onValueChange?: (value: Value) => void;
+});
+/**
+ * Two or three options that show different views of one surface, the chosen one filled.
+ *
+ * @family Choices
+ * @when "Use Switch as a segmented selector for 2–3 mutually exclusive options that show different
+ * views of the same surface, like `Source` vs `Output`." (https://vercel.com/geist/switch) Ours:
+ * Geist's `Switch` is our `SegmentedControl`.
+ * @instead "For a boolean on/off setting, use `Toggle`." (https://vercel.com/geist/switch) "Switch
+ * implements radio semantics, so two options stay mutually exclusive rather than reading as a
+ * checkbox." (https://vercel.com/geist/switch) "Past 3 options or when labels grow beyond a couple
+ * of words, switch to `Tabs` or a `Select`." (https://vercel.com/geist/switch) Ours: Geist's
+ * `Toggle` is our `Switch`. The theme is `ThemeModeSwitcher`, never a second picker. Four to six
+ * that must be compared are a `RadioGroup`. Pressed buttons that can be several or none are a
+ * `ToggleGroup`. Panels of one object are `Tabs`.
+ * @behaviour "Pass a `name` so the underlying radios are grouped; without it, more than one option
+ * can appear selected at once." (https://vercel.com/geist/switch) "Set `defaultChecked` (or
+ * controlled `checked`) on exactly one `Switch.Control` so the group has a defined initial state."
+ * (https://vercel.com/geist/switch) "Pad each `Switch.Control` so the widest label fits without the
+ * active pill resizing on selection." (https://vercel.com/geist/switch) "Test with the longest copy
+ * in the set." (https://vercel.com/geist/switch) Ours: the group's name (`aria-label` or
+ * `aria-labelledby`), a label on every option and a starting choice (`defaultValue` or `value`) are
+ * required; without them it does not compile. The options are one radio group, so they stay
+ * exclusive without a form `name`. The
+ * options share the width of the widest, so the fill never resizes as the choice moves; where the
+ * row is narrower than that, each option keeps its own word's width rather than cutting it. The track
+ * is white with a hairline and a 4 px inset, so it is 32, 36 or 40 px high around options of 24, 28
+ * or 32 px. Colour: neutral throughout, the chosen option filled grey with ink words and the others
+ * grey words that turn ink on hover; nothing takes a hue. Icons are 16 px, 20 px at `lg`. A
+ * disabled option keeps the chosen fill, lightens only its words and has no hover change. The
+ * options are radios in one group: arrows move and choose, and pressing the chosen one changes
+ * nothing. It applies at once; it is not a field that waits for a Save. `fullWidth` when it heads a
+ * form or a dialog, as the two-factor form's method switch does.
+ * @words "Title Case each `Switch.Control` label." (https://vercel.com/geist/switch) "Keep labels
+ * to one or two words and parallel: `Source` / `Output`, not `Source` / `Show output`."
+ * (https://vercel.com/geist/switch) Ours: sentence case: *Source*, *Output*.
+ * @access "Always provide a `label` on every `Switch.Control`, even when an `icon` carries the
+ * meaning, so screen readers announce the option." (https://vercel.com/geist/switch) "The component
+ * renders it as `geist-sr-only` for icon-only controls." (https://vercel.com/geist/switch) "Pair an
+ * icon-only Switch with a `Tooltip` on each control so sighted users get the same label assistive
+ * tech receives." (https://vercel.com/geist/switch) Ours: `role="radiogroup"` named by `aria-label`
+ * or `aria-labelledby`; each option a radio named by its label, shown as a tooltip on an icon-only
+ * option.
+ */
+declare function SegmentedControl<Value extends string = string>({ options, size, fullWidth, className, ...props }: SegmentedControlProps<Value>): React.JSX.Element;
+export { SegmentedControl };
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/components/segmented-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AA6C/E,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI;IAC3D,KAAK,EAAE,KAAK,CAAC;IACb,wGAAwG;IACxG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,CAAC;IAAE,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAEpG,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IACtD,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,GACzD,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;AAEtF,MAAM,MAAM,qBAAqB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrE,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,EAC9B,YAAY,GACZ,iBAAiB,GACjB,UAAU,GACV,cAAc,GACd,eAAe,GACf,UAAU,GACV,QAAQ,GACR,UAAU,GACV,OAAO,CACV,GAAG;IACF,OAAO,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,0FAA0F;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,CACE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAE,GACvD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAA;CAAE,CAC1D,GACD,CACI;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,GACjF;IAAE,YAAY,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,CACrF,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,EACvD,OAAO,EACP,IAAgB,EAChB,SAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,KAAK,CAAC,qBAkC9B;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}