@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/message-notice.js

@@ -1,35 +1,38 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OctagonAlert } from "lucide-react";
+import { Alert } from "./alert.js";
+import { NOTICE_EDGE, NoticeLink, NoticeMark, } from "../internal/notice.js";
 import { cn } from "../lib/utils.js";
-import { NoticeBanner } from "./notice-banner.js";
 import { PageCommandButton } from "./page-actions.js";
 import { bodyBeyondTitle } from "./product-message.js";
-function MessageActions({ message }) {
-    if (message.actions.length === 0) {
-        return null;
-    }
-    return (_jsx("div", { className: "flex flex-wrap items-center gap-2", "data-message-actions": true, children: message.actions.map((action) => (_jsx(PageCommandButton, { command: action, variant: "outline" }, action.label))) }));
-}
+const TONE_TEXT = {
+    neutral: "text-muted-foreground",
+    info: "text-info-soft-foreground",
+    warning: "text-warning-soft-foreground",
+    destructive: "text-destructive-soft-foreground",
+};
+const LEAD = { action: "font-medium", section: "font-semibold" };
+const closedSentence = (title) => (/[.!?:…]$/u.test(title) ? title : `${title}.`);
 /**
  * A catalogue message about one thing on the screen.
  *
  * @family Feedback
- * @when A catalogue message about one thing on the screen: under the control whose write failed
- * (`action`), or atop the section whose condition lasts (`section`).
- * @instead For a whole page or the account use `NoticeBanner`. For a finished action use a toast.
- * For a field's wrong value use `FieldError`. For a failed read use `EmptyState failed`.
- * @behaviour Tone `destructive` by default, `warning` or `info`. Its actions are outline buttons.
- * Long words wrap, nothing truncates. A successful retry removes it. A `section` message with no
- * action is drawn as the passage under a control, because a banner always carries its fix.
- * @words From the catalogue only. Title says what happened to which object; body only when it adds
- * something. Action labelled with its result: *Try again*, *Sign in*.
- * @access `action`: `role="alert"` (`status` for info). `section`: `role="status"`,
- * `aria-live="polite"`, atomic. Focus stays where the person was.
+ * @when "Display text that requires attention or provides additional information." (https://vercel.com/geist/note) "Use a Note for inline contextual feedback next to the field, card, or section it describes: a region change warning above a region picker, a rate-limit notice next to a usage gauge." (https://vercel.com/geist/note) "Choose `variant` by meaning: `error` for a problem the user must fix, `warning` for a consequence to acknowledge, `success` for a passed check, `secondary` for neutral information." (https://vercel.com/geist/note) Ours: a message beside the field, card or section it describes, under the control whose write failed (`action`), or atop the section whose condition lasts (`section`). The `tone` is the `variant`: `destructive` is `error`, `warning` is `warning`, `info` is `success` (a passed check or a state the product manages for the reader, drawn in the accent blue) and `neutral` is `secondary`; there is no violet or cyan.
+ * @instead "Pick `Banner` when the message is page-level or system-wide and needs a CTA, `Toast` for transient acknowledgments, `Modal` for destructive confirmations." (https://vercel.com/geist/note) Ours: `Banner` is `NoticeBanner`, `Toast` is `showMessageToast` and `Modal` is `ConfirmDialog`. For a field's wrong value use `FieldError`. For a failed read use `EmptyState failed`.
+ * @behaviour "A Note is persistent until the underlying state changes; don’t add an ad hoc dismiss control because it competes with the message." (https://vercel.com/geist/note) "One Note per concept. Stacking three Notes on a card means the page architecture, not the Note copy, is wrong." (https://vercel.com/geist/note) "The optional `NoteAction` holds a single inline CTA. Don’t pair it with a second button." (https://vercel.com/geist/note) Ours: tone `destructive` by default, `warning`, `info` or `neutral`. Colour sits on the line, the text and the mark; the ground stays clear, and the action stays neutral. `section` is the framed note, a line 36 px high with its mark and sentence on one row and the action at its trailing edge (under 768 px the action takes its own row, full width), with or without an action; `action` is the unframed passage, its mark and sentence on one row with the action link inside the sentence, after a space. The title and the body run on as one passage, the title closed by a full stop when it has none of its own, so the two never read as one sentence; the title leads in bold (semibold in a note, medium in a passage) only when a body follows it, and stands at regular weight alone. A message worded for a notice has one action, a small default button in a section and an underlined 14 px link in the passage, and at most a second one after it (Nadia's *Ask Nadia* after *Try again*), an outline button in a section and a second link in the passage; a third is not shown. Long words wrap, nothing truncates. A successful retry removes it. Required: the catalogue `message`, so the sentence and its mark are always drawn.
+ * @words "`NoteLabel` is a 1–2 word Title Case prefix that names the topic: `Region Change`, `Rate Limit`, `Plan Limit`. Cut hedges like `Heads Up`, `FYI`, and `Note`." (https://vercel.com/geist/note) "`NoteContent` is one sentence in active voice that names the impact: `Changing this region restarts all functions.`" (https://vercel.com/geist/note) "No `variant="info"` exists; omit `variant` for the default info icon or use `variant="secondary"` for neutral copy." (https://vercel.com/geist/note) "Single-fragment labels take no period; full descriptive sentences in the body do." (https://vercel.com/geist/note) Ours: words come from the catalogue only. The message's title stands in for `NoteLabel` and `NoteContent`, in sentence case, and `info` exists as Geist's blue `success`. The action is labelled with its result: *Try again*, *Sign in*. When the message carries an action, its body does not repeat it: the link is the step, so the body ends before "Try again".
+ * @access `action`: `role="alert"` (`status` for info and neutral). `section`: `role="status"`, `aria-live="polite"`, atomic. The mark is hidden. Focus stays where the person was.
  */
 export function MessageNotice({ message, placement, tone = "destructive", className, }) {
     const body = bodyBeyondTitle(message);
-    if (placement === "section" && message.actions.length > 0) {
-        return (_jsx(NoticeBanner, { action: _jsx(MessageActions, { message: message }), className: className, "data-message-code": message.code, description: body ?? undefined, liveRegion: "polite", title: _jsx("span", { className: "min-w-0 break-words", children: message.title }), tone: tone }));
+    const [action, secondAction] = message.actions;
+    const mark = _jsx(NoticeMark, { icon: tone === "destructive" ? OctagonAlert : undefined, tone: tone });
+    const sentence = (_jsxs("p", { className: "m-0 min-w-0 break-words", children: [_jsx("span", { className: body ? LEAD[placement] : undefined, children: body ? closedSentence(message.title) : message.title }), body ? ` ${body}` : null, placement === "action"
+                ? [action, secondAction].map((command) => command ? (_jsxs("span", { children: [" ", _jsx(NoticeLink, { command: command, place: "inline" })] }, command.label)) : null)
+                : null] }));
+    if (placement === "section") {
+        return (_jsxs(Alert, { "aria-atomic": "true", "aria-live": "polite", className: cn("flex min-h-9 flex-wrap items-center gap-3 bg-transparent px-3 py-1.5 text-body-sm", action && "rounded-md max-md:py-3 md:pr-2", NOTICE_EDGE[tone], TONE_TEXT[tone], className), "data-message-code": message.code, "data-message-notice": "section", "data-tone": tone, role: "status", variant: "default", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [_jsx("span", { className: "flex h-5 shrink-0 items-center [&_svg]:size-3.5", children: mark }), sentence] }), action ? (_jsxs("div", { className: "flex shrink-0 gap-2 self-center max-md:basis-full max-md:*:flex-1", "data-notice-action": true, children: [_jsx(PageCommandButton, { command: action, size: "sm", variant: "default" }), secondAction ? (_jsx(PageCommandButton, { command: secondAction, size: "sm", variant: "outline" })) : null] })) : null] }));
     }
-    return (_jsxs("div", { className: cn("flex min-w-0 flex-col gap-2 text-sm", className), "data-message-code": message.code, "data-message-notice": "action", role: tone === "info" ? "status" : "alert", children: [_jsxs("p", { className: cn("m-0 min-w-0 break-words", tone === "destructive" && "text-destructive", tone === "warning" && "text-warning-soft-foreground", tone === "info" && "text-muted-foreground"), children: [_jsx("span", { className: "block font-medium", children: message.title }), body ? (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "block", children: body })] })) : null] }), _jsx(MessageActions, { message: message })] }));
+    return (_jsxs("div", { className: cn("flex min-w-0 items-start gap-2 text-body-sm", TONE_TEXT[tone], className), "data-message-code": message.code, "data-message-notice": "action", role: tone === "info" || tone === "neutral" ? "status" : "alert", children: [_jsx("span", { className: "flex h-5 shrink-0 items-center [&_svg]:size-4", children: mark }), sentence] }));
 }

package/dist/components/middle-truncate.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+/**
+ * A technical string cut in the middle, so its start and its end both stay readable.
+ *
+ * @family Data
+ * @when “Use Middle Truncate for strings whose head and tail both carry information: file paths (`apps/…/page.tsx`), URLs, deployment IDs (`dpl_…abc123`), commit hashes, branch names with prefixes.” (https://vercel.com/geist/middle-truncate)
+ * Ours: an environment variable is one of these too.
+ * @instead “For prose, descriptions, and headings, use end-truncation with `…` instead; cutting the middle of a sentence destroys meaning.” (https://vercel.com/geist/middle-truncate)
+ * “For any truncated value the user might need verbatim, pair with a `Tooltip` showing the full string or a copy-on-click affordance.” (https://vercel.com/geist/middle-truncate)
+ * Ours: a value someone may need exactly is `TextWithCopyButton` or sits beside a `CopyButton`; while
+ * the middle is cut, the whole value is also the element's `title`.
+ * @behaviour “Middle Truncate renders a single ellipsis glyph (`…`) rather than three periods. This keeps monospace values, including environment variable keys, IDs, hashes, and paths, from reserving three character cells for the truncation marker.” (https://vercel.com/geist/middle-truncate)
+ * “The component listens to its container width, so layouts that change width on hover (expanding cards, animated rows) cause the truncation point to jitter. Lock the width during interaction.” (https://vercel.com/geist/middle-truncate)
+ * “Copying truncated text yields the full original string from the underlying value, not the visible ellipsis form. Confirm this stays true if wrapping with custom `onCopy`.” (https://vercel.com/geist/middle-truncate)
+ * “Don’t wrap Middle Truncate in another `text-overflow: ellipsis` container; the two strategies fight each other and the inner ellipsis wins inconsistently.” (https://vercel.com/geist/middle-truncate)
+ * “Keep the visible string long enough on small viewports that the head still identifies the resource (path segment, ID prefix).” (https://vercel.com/geist/middle-truncate)
+ * Ours: it fills the width its parent gives and shows the whole value when it fits. Too narrow, the
+ * last third of the value, at most 16 characters, stays whole. While the middle is cut, copying a
+ * selection made inside it puts the whole value on the clipboard; a value shown in full copies only
+ * what is selected. A custom `onCopy` runs first, and `preventDefault` in it keeps the value as
+ * selected.
+ * @words Ours: the value as the system writes it, unchanged; the ellipsis comes from the layout, never from
+ * the text.
+ * @access “Expose the full string to assistive tech via the wrapping element’s accessible name (the component already keeps the full value in the DOM for copy).” (https://vercel.com/geist/middle-truncate)
+ * “Avoid Middle Truncate inside focusable controls without an explicit `aria-label`; the ellipsis on its own gives screen readers nothing to announce.” (https://vercel.com/geist/middle-truncate)
+ * Ours: the whole value is the element's text, read in full; inside a link or a button, the control
+ * carries the `aria-label` that names the target.
+ */
+declare function MiddleTruncate({ className, onCopy, value, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
+    value: string;
+}): React.JSX.Element;
+export { MiddleTruncate };
+//# sourceMappingURL=middle-truncate.d.ts.map

package/dist/components/middle-truncate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"middle-truncate.d.ts","sourceRoot":"","sources":["../../src/components/middle-truncate.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmC/B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,MAAM,EACN,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,qBA0BpE;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/middle-truncate.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+const TAIL_SHARE = 3;
+const TAIL_MAX = 16;
+function copiesWholeValue(root) {
+    const head = root.firstElementChild;
+    const selection = window.getSelection();
+    return (head !== null &&
+        head.scrollWidth > head.clientWidth &&
+        selection !== null &&
+        !selection.isCollapsed &&
+        root.contains(selection.anchorNode) &&
+        root.contains(selection.focusNode));
+}
+function useIsCut(root, value) {
+    const [cut, setCut] = React.useState(false);
+    React.useEffect(() => {
+        const element = root.current;
+        const head = element?.firstElementChild;
+        if (!element || !head || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => setCut(head.scrollWidth > head.clientWidth);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [root, value]);
+    return cut;
+}
+/**
+ * A technical string cut in the middle, so its start and its end both stay readable.
+ *
+ * @family Data
+ * @when “Use Middle Truncate for strings whose head and tail both carry information: file paths (`apps/…/page.tsx`), URLs, deployment IDs (`dpl_…abc123`), commit hashes, branch names with prefixes.” (https://vercel.com/geist/middle-truncate)
+ * Ours: an environment variable is one of these too.
+ * @instead “For prose, descriptions, and headings, use end-truncation with `…` instead; cutting the middle of a sentence destroys meaning.” (https://vercel.com/geist/middle-truncate)
+ * “For any truncated value the user might need verbatim, pair with a `Tooltip` showing the full string or a copy-on-click affordance.” (https://vercel.com/geist/middle-truncate)
+ * Ours: a value someone may need exactly is `TextWithCopyButton` or sits beside a `CopyButton`; while
+ * the middle is cut, the whole value is also the element's `title`.
+ * @behaviour “Middle Truncate renders a single ellipsis glyph (`…`) rather than three periods. This keeps monospace values, including environment variable keys, IDs, hashes, and paths, from reserving three character cells for the truncation marker.” (https://vercel.com/geist/middle-truncate)
+ * “The component listens to its container width, so layouts that change width on hover (expanding cards, animated rows) cause the truncation point to jitter. Lock the width during interaction.” (https://vercel.com/geist/middle-truncate)
+ * “Copying truncated text yields the full original string from the underlying value, not the visible ellipsis form. Confirm this stays true if wrapping with custom `onCopy`.” (https://vercel.com/geist/middle-truncate)
+ * “Don’t wrap Middle Truncate in another `text-overflow: ellipsis` container; the two strategies fight each other and the inner ellipsis wins inconsistently.” (https://vercel.com/geist/middle-truncate)
+ * “Keep the visible string long enough on small viewports that the head still identifies the resource (path segment, ID prefix).” (https://vercel.com/geist/middle-truncate)
+ * Ours: it fills the width its parent gives and shows the whole value when it fits. Too narrow, the
+ * last third of the value, at most 16 characters, stays whole. While the middle is cut, copying a
+ * selection made inside it puts the whole value on the clipboard; a value shown in full copies only
+ * what is selected. A custom `onCopy` runs first, and `preventDefault` in it keeps the value as
+ * selected.
+ * @words Ours: the value as the system writes it, unchanged; the ellipsis comes from the layout, never from
+ * the text.
+ * @access “Expose the full string to assistive tech via the wrapping element’s accessible name (the component already keeps the full value in the DOM for copy).” (https://vercel.com/geist/middle-truncate)
+ * “Avoid Middle Truncate inside focusable controls without an explicit `aria-label`; the ellipsis on its own gives screen readers nothing to announce.” (https://vercel.com/geist/middle-truncate)
+ * Ours: the whole value is the element's text, read in full; inside a link or a button, the control
+ * carries the `aria-label` that names the target.
+ */
+function MiddleTruncate({ className, onCopy, value, ...props }) {
+    const root = React.useRef(null);
+    const cut = useIsCut(root, value);
+    const characters = Array.from(value);
+    const tailStart = characters.length - Math.min(Math.ceil(characters.length / TAIL_SHARE), TAIL_MAX);
+    return (_jsxs("span", { ref: root, "data-slot": "middle-truncate", title: cut ? value : undefined, className: cn("inline-flex max-w-full min-w-0 overflow-hidden", className), onCopy: (event) => {
+            onCopy?.(event);
+            if (event.defaultPrevented || !copiesWholeValue(event.currentTarget))
+                return;
+            event.clipboardData.setData("text/plain", value);
+            event.preventDefault();
+        }, ...props, children: [_jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-pre", children: characters.slice(0, tailStart).join("") }), _jsx("span", { className: "shrink-0 whitespace-pre", children: characters.slice(tailStart).join("") })] }));
+}
+export { MiddleTruncate };

package/dist/components/multi-select.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { type FieldName } from "../internal/field-frame.js";
+import { type FieldSize } from "../internal/input-box.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+type MultiSelectContextValue = {
+    selectedCount: number;
+    totalCount: number;
+    onSelectAll: () => void;
+    selectOnlyLabel: string;
+    selectAllLabel: string;
+};
+type MultiSelectProps = React.ComponentProps<typeof Popover> & MultiSelectContextValue;
+/**
+ * A menu of checkbox rows that chooses several values from a known list, with the count in its
+ * trigger.
+ *
+ * @family Choices
+ * @when "A keyboard-navigable dropdown for selecting multiple items with advanced focus management."
+ * (https://vercel.com/geist/multi-select) "Pick `<MultiSelect>` when users pick more than one value
+ * from a known list (regions, scopes, tags)." (https://vercel.com/geist/multi-select) Ours: also the facets of a collection.
+ * @instead "For a single value from a short list, use `Select`."
+ * (https://vercel.com/geist/multi-select) "When typing to filter is more important than seeing
+ * every option at once, use `Combobox`." (https://vercel.com/geist/multi-select) "Skip
+ * `<MultiSelect>` for boolean settings; `Toggle` handles those."
+ * (https://vercel.com/geist/multi-select) Ours: `Combobox` takes several values with `multiple`; a
+ * yes-or-no setting is a `Switch`, never a one-row multi-select.
+ * @behaviour "Use controlled mode when state lives in the URL or syncs to the server so the trigger
+ * label and stored value stay in lockstep." (https://vercel.com/geist/multi-select) "Use controlled
+ * state to manage selections programmatically." (https://vercel.com/geist/multi-select) Ours: the
+ * caller always owns the selection and passes it back through each row, so the trigger and the
+ * stored value (the URL, the server) never disagree; the root takes the same `selectedCount` and
+ * `totalCount` the trigger's summary is built from. "Show the selected count in the trigger (`3
+ * regions selected`); show the single name when only one is picked."
+ * (https://vercel.com/geist/multi-select) The trigger is `Input`'s box at its default size, in
+ * regular weight, with the chevron at the end (it turns up while the list is open); it keeps the
+ * hover edge while the list is open and takes the page's outline for keyboard focus, as a button
+ * does. Everything is neutral: a checked box is ink, never blue, and an error turns only the
+ * trigger's ring red. `label` and `error` go on `MultiSelectTrigger`, and a string `label` requires
+ * `id`; a trigger with no name does not compile. The list opens 8 px under the trigger at least as
+ * wide as it, in an 8 px inset, with rows 28 px tall and no gap, and stops 16 px short of the
+ * screen's edge (at most 24rem tall, then it scrolls). A row is the checkbox in a 28 px square that
+ * fills on hover, then a button holding the row's name; pressing the name runs the button, pressing
+ * the box toggles the row. "**Checkbox focus + Enter/Space**: Toggle individual item"
+ * (https://vercel.com/geist/multi-select) "**Button focus + Enter/Space**: Smart selection (Select
+ * Only, Select All, or Toggle based on context)" (https://vercel.com/geist/multi-select) "**Hidden
+ * action labels**: Appear on hover/focus to show available actions"
+ * (https://vercel.com/geist/multi-select) Ours: the button's label reads *Select all* on a chosen
+ * row while some rows are unchosen, and *Select only* on every other row; it shows on hover and
+ * focus of the row, and always on touch. "Keep checkbox focus and button focus distinct so Up/Down
+ * navigates rows and Left/Right toggles between the row’s checkbox and action button."
+ * (https://vercel.com/geist/multi-select) "**Up/Down arrows**: Navigate between rows while
+ * maintaining checkbox/button focus state" (https://vercel.com/geist/multi-select) "**Left/Right
+ * arrows**: Switch between checkbox and button focus within the current row"
+ * (https://vercel.com/geist/multi-select) "**Tab**: Focus away from the menu (natural tab
+ * behavior)" (https://vercel.com/geist/multi-select) "**Enter/Space**: Execute actions based on
+ * current focus (checkbox toggle or button click)" (https://vercel.com/geist/multi-select) "Trap
+ * focus inside the menu while it’s open and return focus to the trigger on close."
+ * (https://vercel.com/geist/multi-select) Ours: focus moves into the list when it opens; Tab leaves
+ * it in order. "For empty filters, render `No {items} match "{query}"` rather than `No results`."
+ * (https://vercel.com/geist/multi-select) Ours: there is no filter box, so a list that needs one is
+ * a `Combobox` with `multiple`.
+ * @words The trigger says how many are chosen in the product's words: the name when exactly one is
+ * chosen, *No regions selected* when none. It is never empty. Rows are sentence case names.
+ * "Announce bulk actions (`Select All`, `Select Only`) through the visible button label so the
+ * action matches what the screen reader speaks." (https://vercel.com/geist/multi-select) Ours: the
+ * two button labels come from the caller, in sentence case.
+ * @access "Each row checkbox needs an `aria-label` that names the item (`Select us-east-1`); a bare
+ * `Select` is unanchored for screen readers." (https://vercel.com/geist/multi-select) Ours: each
+ * row's checkbox is named by the row's name; each button is named by its label and the row (*Select
+ * only us-east-1*). "The trigger button needs a stable accessible name even when zero items are
+ * selected; don’t rely on the placeholder alone." (https://vercel.com/geist/multi-select) Ours: the
+ * trigger is a button with `aria-expanded`, named by its visible label tied by `id`, or by
+ * `aria-label` or `aria-labelledby`; the summary describes it.
+ */
+declare function MultiSelect({ selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel, ...props }: MultiSelectProps): React.JSX.Element;
+declare function MultiSelectTrigger({ className, children, size, label, error, ...props }: Omit<React.ComponentProps<typeof PopoverTrigger>, "children"> & {
+    /** The summary of the choice: a count, a name, or that nothing is chosen. It describes the trigger. */
+    children: string;
+    size?: FieldSize;
+    /** The message under the box, in the product's words; it also marks the box invalid. */
+    error?: string;
+} & FieldName): React.JSX.Element;
+declare function MultiSelectContent({ className, align, sideOffset, onKeyDown, ...props }: React.ComponentProps<typeof PopoverContent>): React.JSX.Element;
+declare function MultiSelectRow({ name, checked, onCheckedChange, onSelectOnly, disabled, className, }: {
+    name: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    /** Chooses this row and clears the rest. */
+    onSelectOnly: () => void;
+    disabled?: boolean;
+    className?: string;
+}): React.JSX.Element;
+export { MultiSelect, MultiSelectContent, MultiSelectRow, MultiSelectTrigger };
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/components/multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAG/E,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG,uBAAuB,CAAC;AAEvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,iBAAS,WAAW,CAAC,EACnB,aAAa,EACb,UAAU,EACV,WAAW,EACX,eAAe,EACf,cAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAUlB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,IAAgB,EAChB,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACjE,uGAAuG;IACvG,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,qBAmCZ;AAwBD,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAe,EACf,UAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,qBAiB7C;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,4CAA4C;IAC5C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAuDA;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/multi-select.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { FieldFrame } from "../internal/field-frame.js";
+import { fieldTriggerStates } from "../internal/input-box.js";
+import { Label } from "./label.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { selectTriggerVariants } from "./select.js";
+const MultiSelectContext = React.createContext(null);
+function useMultiSelect() {
+    const context = React.useContext(MultiSelectContext);
+    if (!context)
+        throw new Error("MultiSelectRow must be inside <MultiSelect>");
+    return context;
+}
+/**
+ * A menu of checkbox rows that chooses several values from a known list, with the count in its
+ * trigger.
+ *
+ * @family Choices
+ * @when "A keyboard-navigable dropdown for selecting multiple items with advanced focus management."
+ * (https://vercel.com/geist/multi-select) "Pick `<MultiSelect>` when users pick more than one value
+ * from a known list (regions, scopes, tags)." (https://vercel.com/geist/multi-select) Ours: also the facets of a collection.
+ * @instead "For a single value from a short list, use `Select`."
+ * (https://vercel.com/geist/multi-select) "When typing to filter is more important than seeing
+ * every option at once, use `Combobox`." (https://vercel.com/geist/multi-select) "Skip
+ * `<MultiSelect>` for boolean settings; `Toggle` handles those."
+ * (https://vercel.com/geist/multi-select) Ours: `Combobox` takes several values with `multiple`; a
+ * yes-or-no setting is a `Switch`, never a one-row multi-select.
+ * @behaviour "Use controlled mode when state lives in the URL or syncs to the server so the trigger
+ * label and stored value stay in lockstep." (https://vercel.com/geist/multi-select) "Use controlled
+ * state to manage selections programmatically." (https://vercel.com/geist/multi-select) Ours: the
+ * caller always owns the selection and passes it back through each row, so the trigger and the
+ * stored value (the URL, the server) never disagree; the root takes the same `selectedCount` and
+ * `totalCount` the trigger's summary is built from. "Show the selected count in the trigger (`3
+ * regions selected`); show the single name when only one is picked."
+ * (https://vercel.com/geist/multi-select) The trigger is `Input`'s box at its default size, in
+ * regular weight, with the chevron at the end (it turns up while the list is open); it keeps the
+ * hover edge while the list is open and takes the page's outline for keyboard focus, as a button
+ * does. Everything is neutral: a checked box is ink, never blue, and an error turns only the
+ * trigger's ring red. `label` and `error` go on `MultiSelectTrigger`, and a string `label` requires
+ * `id`; a trigger with no name does not compile. The list opens 8 px under the trigger at least as
+ * wide as it, in an 8 px inset, with rows 28 px tall and no gap, and stops 16 px short of the
+ * screen's edge (at most 24rem tall, then it scrolls). A row is the checkbox in a 28 px square that
+ * fills on hover, then a button holding the row's name; pressing the name runs the button, pressing
+ * the box toggles the row. "**Checkbox focus + Enter/Space**: Toggle individual item"
+ * (https://vercel.com/geist/multi-select) "**Button focus + Enter/Space**: Smart selection (Select
+ * Only, Select All, or Toggle based on context)" (https://vercel.com/geist/multi-select) "**Hidden
+ * action labels**: Appear on hover/focus to show available actions"
+ * (https://vercel.com/geist/multi-select) Ours: the button's label reads *Select all* on a chosen
+ * row while some rows are unchosen, and *Select only* on every other row; it shows on hover and
+ * focus of the row, and always on touch. "Keep checkbox focus and button focus distinct so Up/Down
+ * navigates rows and Left/Right toggles between the row’s checkbox and action button."
+ * (https://vercel.com/geist/multi-select) "**Up/Down arrows**: Navigate between rows while
+ * maintaining checkbox/button focus state" (https://vercel.com/geist/multi-select) "**Left/Right
+ * arrows**: Switch between checkbox and button focus within the current row"
+ * (https://vercel.com/geist/multi-select) "**Tab**: Focus away from the menu (natural tab
+ * behavior)" (https://vercel.com/geist/multi-select) "**Enter/Space**: Execute actions based on
+ * current focus (checkbox toggle or button click)" (https://vercel.com/geist/multi-select) "Trap
+ * focus inside the menu while it’s open and return focus to the trigger on close."
+ * (https://vercel.com/geist/multi-select) Ours: focus moves into the list when it opens; Tab leaves
+ * it in order. "For empty filters, render `No {items} match "{query}"` rather than `No results`."
+ * (https://vercel.com/geist/multi-select) Ours: there is no filter box, so a list that needs one is
+ * a `Combobox` with `multiple`.
+ * @words The trigger says how many are chosen in the product's words: the name when exactly one is
+ * chosen, *No regions selected* when none. It is never empty. Rows are sentence case names.
+ * "Announce bulk actions (`Select All`, `Select Only`) through the visible button label so the
+ * action matches what the screen reader speaks." (https://vercel.com/geist/multi-select) Ours: the
+ * two button labels come from the caller, in sentence case.
+ * @access "Each row checkbox needs an `aria-label` that names the item (`Select us-east-1`); a bare
+ * `Select` is unanchored for screen readers." (https://vercel.com/geist/multi-select) Ours: each
+ * row's checkbox is named by the row's name; each button is named by its label and the row (*Select
+ * only us-east-1*). "The trigger button needs a stable accessible name even when zero items are
+ * selected; don’t rely on the placeholder alone." (https://vercel.com/geist/multi-select) Ours: the
+ * trigger is a button with `aria-expanded`, named by its visible label tied by `id`, or by
+ * `aria-label` or `aria-labelledby`; the summary describes it.
+ */
+function MultiSelect({ selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel, ...props }) {
+    const value = React.useMemo(() => ({ selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel }), [selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel]);
+    return (_jsx(MultiSelectContext.Provider, { value: value, children: _jsx(Popover, { ...props }) }));
+}
+function MultiSelectTrigger({ className, children, size = "default", label, error, ...props }) {
+    const summaryId = React.useId();
+    return (_jsx(FieldFrame, { label: label, error: error, size: size, control: props, children: (aria) => (_jsxs(PopoverTrigger, { "data-slot": "multi-select-trigger", "data-size": size, "data-field-frame": "", className: cn(selectTriggerVariants({ size }), fieldTriggerStates, "group/multi-select-trigger pr-3.25 pl-2.5", size !== "lg" && "leading-5.25", className), ...props, ...aria, "aria-describedby": [aria["aria-describedby"], summaryId].filter(Boolean).join(" "), children: [_jsx("span", { id: summaryId, className: "flex-1 truncate px-1.5 text-left", children: children }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-3.5 text-muted-foreground group-data-popup-open/multi-select-trigger:hidden" }), _jsx(ChevronUpIcon, { "aria-hidden": "true", className: "hidden size-3.5 text-muted-foreground group-data-popup-open/multi-select-trigger:block" })] })) }));
+}
+const ROW = "[data-slot=multi-select-row]";
+function moveFocus(event) {
+    const target = event.target;
+    if (!(target instanceof HTMLElement))
+        return;
+    const column = target.closest("[data-multi-select]")?.dataset.multiSelect;
+    const row = target.closest(ROW);
+    if (!column || !row)
+        return;
+    const rows = [...event.currentTarget.querySelectorAll(ROW)];
+    const index = rows.indexOf(row);
+    const focusIn = (next, name) => {
+        const control = next?.querySelector(`[data-multi-select=${name}]`);
+        if (!control)
+            return;
+        event.preventDefault();
+        control.focus();
+    };
+    if (event.key === "ArrowDown")
+        focusIn(rows[index + 1], column);
+    else if (event.key === "ArrowUp")
+        focusIn(rows[index - 1], column);
+    else if (event.key === "ArrowRight" && column === "check")
+        focusIn(row, "action");
+    else if (event.key === "ArrowLeft" && column === "action")
+        focusIn(row, "check");
+}
+function MultiSelectContent({ className, align = "start", sideOffset = 8, onKeyDown, ...props }) {
+    return (_jsx(PopoverContent, { "data-slot": "multi-select-content", align: align, sideOffset: sideOffset, className: cn("max-h-[min(calc(var(--available-height)---spacing(4)),24rem)] w-auto min-w-(--anchor-width) gap-0 overflow-y-auto p-2", className), onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented)
+                moveFocus(event);
+        }, ...props }));
+}
+function MultiSelectRow({ name, checked, onCheckedChange, onSelectOnly, disabled, className, }) {
+    const { selectedCount, totalCount, onSelectAll, selectOnlyLabel, selectAllLabel } = useMultiSelect();
+    const id = React.useId();
+    const actionId = `${id}-action`;
+    const nameId = `${id}-name`;
+    const selectsAll = checked && selectedCount < totalCount;
+    return (_jsxs("div", { "data-slot": "multi-select-row", className: cn("group/multi-select-row flex min-h-touch-target items-center text-sm [@media(hover:hover)_and_(pointer:fine)]:min-h-7", className), children: [_jsx(Label, { className: "size-7 shrink-0 justify-center gap-0 rounded-xs-plus hover:bg-accent active:bg-border has-data-disabled:pointer-events-none", htmlFor: id, children: _jsx(Checkbox, { id: id, "aria-labelledby": nameId, checked: checked, "data-multi-select": "check", disabled: disabled, onCheckedChange: onCheckedChange }) }), totalCount > 1 ? (_jsxs(Button, { "aria-labelledby": `${actionId} ${nameId}`, className: "h-7 flex-1 justify-between gap-0 rounded-xs-plus p-1 text-sm font-normal hover:bg-accent focus-visible:bg-accent active:bg-border disabled:text-placeholder disabled:opacity-100", "data-multi-select": "action", disabled: disabled, onClick: selectsAll ? onSelectAll : onSelectOnly, size: "xs", variant: "ghost", children: [_jsx("span", { className: "min-w-0 truncate text-left", id: nameId, children: name }), _jsx("span", { className: "min-w-16 rounded-xs-plus px-1 py-0.5 text-right text-xs font-normal text-muted-foreground opacity-0 group-focus-within/multi-select-row:opacity-100 group-hover/multi-select-row:opacity-100 [@media(hover:none)]:opacity-100", id: actionId, children: selectsAll ? selectAllLabel : selectOnlyLabel })] })) : (_jsx(Label, { className: "flex-1 truncate px-1 text-sm leading-5", htmlFor: id, id: nameId, children: name }))] }));
+}
+export { MultiSelect, MultiSelectContent, MultiSelectRow, MultiSelectTrigger };

package/dist/components/native-select.d.ts

@@ -1,24 +1,48 @@
 import * as React from "react";
-type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
-    size?: "sm" | "default";
-};
+import { type FieldName } from "../internal/field-frame.js";
+import { type FieldSize } from "../internal/input-box.js";
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "prefix" | "size"> & {
+    size?: FieldSize;
+    /** A mark before the value, such as an icon. */
+    prefix?: React.ReactNode;
+    /** A mark at the end, in place of the chevron. */
+    suffix?: React.ReactNode;
+    /** One muted sentence under the box that says what to enter, read with the box. */
+    description?: string;
+    /** The message under the box, in the product's words; it also marks the box invalid. */
+    error?: string;
+} & FieldName;
 /**
  * The platform's own select, drawn as our input box.
  *
  * @family Inputs
  * @when A long fixed list inside a native form, where the platform's own picker serves best: a time
  * zone, a country.
- * @instead Two or three options are radios or a segmented control. Up to about ten, drawn in our
- * style, is `Select`. A list people type into is `Combobox`.
- * @behaviour Same box as `Input`, the chevron 10 px from the edge in the muted grey. It opens the
- * system's list, with native keyboard and typing. As an uncontrolled field it keeps a saved value
- * instead of snapping back to the page's first default.
- * @words The label names the thing chosen (*Time zone*). A placeholder option is distinct from a
- * real one and never preselected as if chosen.
- * @access A real `select` with a visible label; option groups are `optgroup`. The chevron is
- * decorative.
+ * @instead Two or three options are radios or a segmented control. "Pick `<Select>` for short,
+ * fixed lists (under ~10 items) where typing adds nothing; switch to `Combobox` once filtering
+ * helps." (https://vercel.com/geist/select) Ours: `Select` draws the short list in our style.
+ * @behaviour Same box, sizes, ring, hover, focus halo and disabled as `Input`, filling its
+ * container, the chevron in the muted grey with room reserved for it, after an optional `prefix`
+ * mark (a `suffix` mark takes the chevron's place). Colour sits in one place: an error turns the
+ * ring red and fills the halo, and colours the message; the fill, the value and the label stay
+ * neutral. `label` and `error` draw the `Field` parts around the box, and a string `label` requires
+ * `id`; a box with no name does not compile. It opens the system's list, with native keyboard and
+ * typing. As an uncontrolled field it keeps a saved value instead of snapping back to the page's
+ * first default. "Validate on blur and pass a string to `error`; messages name the field and end in
+ * a period (`Select a framework.`)." (https://vercel.com/geist/select) Other form rules are
+ * `Field`'s.
+ * @words "Label is a short Title Case noun (`Framework`, `Region`); accept the prop directly on
+ * `<Select>`." (https://vercel.com/geist/select) "Options are Title Case when short and match
+ * canonical branding (`Next.js`, not `NextJS`); keep the same register across the list."
+ * (https://vercel.com/geist/select) Ours: the label names the thing chosen (*Time zone*) and
+ * options are sentence case. A placeholder option is distinct from a real one and never preselected
+ * as if chosen.
+ * @access A real `select` with a visible label tied by `id`, or `aria-label`. "Group options past
+ * ~10 items with native `<optgroup>`; Geist `<Select>` has no `.Group` static."
+ * (https://vercel.com/geist/select) Ours: option groups are `optgroup`. The chevron, the prefix and
+ * the suffix are decorative.
  */
-declare function NativeSelect({ className, size, ref, ...props }: NativeSelectProps): React.JSX.Element;
+declare function NativeSelect({ className, size, prefix, suffix, label, description, error, ref, ...props }: NativeSelectProps): React.JSX.Element;
 declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): React.JSX.Element;
 declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): React.JSX.Element;
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/components/native-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../src/components/native-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACtE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAiEtF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,qBAQlF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAQtF;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../src/components/native-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG7F,KAAK,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC,GAAG;IACjF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kDAAkD;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,IAAgB,EAChB,MAAM,EACN,MAAM,EACN,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6FnB;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,qBAQlF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAQtF;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/native-select.js

@@ -2,6 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
+import { FieldFrame } from "../internal/field-frame.js";
+import { fieldDisabled, fieldRing, fieldStates } from "../internal/input-box.js";
 import { ChevronDownIcon } from "lucide-react";
 /**
  * The platform's own select, drawn as our input box.
@@ -9,17 +11,31 @@ import { ChevronDownIcon } from "lucide-react";
  * @family Inputs
  * @when A long fixed list inside a native form, where the platform's own picker serves best: a time
  * zone, a country.
- * @instead Two or three options are radios or a segmented control. Up to about ten, drawn in our
- * style, is `Select`. A list people type into is `Combobox`.
- * @behaviour Same box as `Input`, the chevron 10 px from the edge in the muted grey. It opens the
- * system's list, with native keyboard and typing. As an uncontrolled field it keeps a saved value
- * instead of snapping back to the page's first default.
- * @words The label names the thing chosen (*Time zone*). A placeholder option is distinct from a
- * real one and never preselected as if chosen.
- * @access A real `select` with a visible label; option groups are `optgroup`. The chevron is
- * decorative.
+ * @instead Two or three options are radios or a segmented control. "Pick `<Select>` for short,
+ * fixed lists (under ~10 items) where typing adds nothing; switch to `Combobox` once filtering
+ * helps." (https://vercel.com/geist/select) Ours: `Select` draws the short list in our style.
+ * @behaviour Same box, sizes, ring, hover, focus halo and disabled as `Input`, filling its
+ * container, the chevron in the muted grey with room reserved for it, after an optional `prefix`
+ * mark (a `suffix` mark takes the chevron's place). Colour sits in one place: an error turns the
+ * ring red and fills the halo, and colours the message; the fill, the value and the label stay
+ * neutral. `label` and `error` draw the `Field` parts around the box, and a string `label` requires
+ * `id`; a box with no name does not compile. It opens the system's list, with native keyboard and
+ * typing. As an uncontrolled field it keeps a saved value instead of snapping back to the page's
+ * first default. "Validate on blur and pass a string to `error`; messages name the field and end in
+ * a period (`Select a framework.`)." (https://vercel.com/geist/select) Other form rules are
+ * `Field`'s.
+ * @words "Label is a short Title Case noun (`Framework`, `Region`); accept the prop directly on
+ * `<Select>`." (https://vercel.com/geist/select) "Options are Title Case when short and match
+ * canonical branding (`Next.js`, not `NextJS`); keep the same register across the list."
+ * (https://vercel.com/geist/select) Ours: the label names the thing chosen (*Time zone*) and
+ * options are sentence case. A placeholder option is distinct from a real one and never preselected
+ * as if chosen.
+ * @access A real `select` with a visible label tied by `id`, or `aria-label`. "Group options past
+ * ~10 items with native `<optgroup>`; Geist `<Select>` has no `.Group` static."
+ * (https://vercel.com/geist/select) Ours: option groups are `optgroup`. The chevron, the prefix and
+ * the suffix are decorative.
  */
-function NativeSelect({ className, size = "default", ref, ...props }) {
+function NativeSelect({ className, size = "default", prefix, suffix, label, description, error, ref, ...props }) {
     const select = React.useRef(null);
     const setRef = React.useCallback((node) => {
         select.current = node;
@@ -63,7 +79,7 @@ function NativeSelect({ className, size = "default", ref, ...props }) {
                 option.selected = shown.includes(option.value);
         appliedDefault.current = defaultKey;
     }, [defaultKey]);
-    return (_jsxs("div", { className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { ref: setRef, "data-slot": "native-select", "data-size": size, className: "h-control-height min-h-touch-target w-full min-w-0 appearance-none rounded-sm border border-input bg-background py-1 pr-8 pl-control-padding-inline text-sm transition-colors select-none selection:bg-primary selection:text-primary-foreground placeholder:text-placeholder disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive data-[size=sm]:h-nadicode-control-height-sm data-[size=sm]:py-0.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-0", ...props }), _jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
+    return (_jsx(FieldFrame, { label: label, description: description, error: error, size: size, control: props, children: (aria) => (_jsxs("div", { className: cn("group/native-select relative w-full", className), "data-slot": "native-select-wrapper", "data-size": size, children: [prefix ? (_jsx("span", { "data-slot": "native-select-prefix", "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-control-padding-inline flex -translate-y-1/2 items-center text-muted-foreground [&_svg:not([class*='size-'])]:size-4", children: prefix })) : null, _jsx("select", { ref: setRef, "data-slot": "native-select", "data-size": size, "data-field-frame": "", className: cn("h-control-height min-h-touch-target w-full min-w-0 cursor-pointer appearance-none rounded-sm bg-(--nc-field,var(--background)) py-0 pr-9 pl-control-padding-inline text-sm select-none selection:bg-primary selection:text-primary-foreground data-[size=lg]:h-nadicode-control-height-lg data-[size=lg]:rounded-md data-[size=lg]:text-base data-[size=sm]:h-nadicode-control-height-sm [@media(hover:hover)_and_(pointer:fine)]:min-h-0", fieldRing, fieldStates, fieldDisabled, prefix ? "pl-10" : undefined), ...props, ...aria }), suffix ? (_jsx("span", { "data-slot": "native-select-suffix", "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 right-3 flex -translate-y-1/2 items-center text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-4", children: suffix })) : (_jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-3 size-3.5 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" }))] })) }));
 }
 function NativeSelectOption({ className, ...props }) {
     return (_jsx("option", { "data-slot": "native-select-option", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));