@nadicodeai/ui 12.1.102 → 12.1.103

package/dist/components/tabs.js

@@ -1,32 +1,54 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { cn } from "../lib/utils.js";
 /**
  * Panels of one surface that switch in place.
  *
  * @family Navigation
- * @when Sibling views of one object that switch in place inside one surface.
- * @instead Views with their own URL are `TabsNav`. A choice that changes a value is a `RadioGroup`
- * or `ToggleGroup`. A stable destination belongs in the `Sidebar`. A tab never opens a new scope.
- * @behaviour One treatment among siblings, chosen through `variant`, never a page border. Arrow
- * keys move, one tab stop. The underline fades on `confirm`, 180 ms.
- * @words Nouns, one or two words: *Overview*, *Installations*. Italian (*Installazioni*) scrolls,
- * never wraps or truncates.
- * @access `tablist`, `tab`, `tabpanel` with `aria-selected`.
+ * @when "Use Tabs to switch between sibling views inside a single page (`Overview`, `Logs`, `Settings`)." (https://vercel.com/geist/tabs)
+ * "Cap a Tabs row at 5–7 entries on desktop and 3–4 on mobile. Past that, consolidate or move secondary views behind a `Menu`." (https://vercel.com/geist/tabs)
+ * Ours: the cap is 7 on a desktop and 4 on a phone.
+ * @instead "For navigation between unrelated pages, use a sub-menu, not Tabs." (https://vercel.com/geist/tabs) "Tabs imply the views share scope, URL parent, and data model." (https://vercel.com/geist/tabs)
+ * Ours: views with their own URL are `TabsNav`. A choice that changes a value is a `RadioGroup` or
+ * `ToggleGroup`. A stable destination belongs in the `Sidebar`.
+ * @behaviour "Selecting a tab is instant; don’t trigger network confirmation or toast on tab change." (https://vercel.com/geist/tabs)
+ * "Reflect the active tab in the URL (query param or path) so deep-links and refresh restore state." (https://vercel.com/geist/tabs)
+ * "Disable individual tabs only for permission or empty-state reasons; pair the disabled tab with a `tooltip` that names the constraint." (https://vercel.com/geist/tabs)
+ * Ours: the `tooltip` is `disabledReason`, shown on hover and focus and kept as the tab's
+ * description. One treatment among siblings, chosen through `variant`, never a page border: `line`
+ * (50 px, a 2 px ink underline over the row's 1 px rule) for a page's collections, `default` (a
+ * 32 px pill on the selection fill) for an object's sections. The page owns the chosen tab: `value`
+ * and `onValueChange` are required. There is no sliding underline. Colour is neutral only: the
+ * chosen tab is ink, the rest are muted until hover, and a disabled tab is never dimmed: in `line`
+ * it reads as an unchosen one, in `default` it sits on the selection fill with muted text, both
+ * with a not-allowed cursor.
+ * @words "`tabs[].title` is Title Case, 1–2 words, and names the destination noun (`Overview`, `Logs`, `Settings`). Verbs belong on buttons; `View Logs` is wrong on a tab." (https://vercel.com/geist/tabs)
+ * "`tabs[].tooltip` is sentence case and explains the constraint (`Only visible to project owners.`), not the tab’s purpose." (https://vercel.com/geist/tabs)
+ * "Don’t append a count to the title (`Logs (12)`); use a badge slot instead and drop the badge at zero." (https://vercel.com/geist/tabs)
+ * Ours: the title is sentence case (*Overview*, *Installations*), not Title Case. There is no badge
+ * slot: a count belongs to the list's footer. A reason is *Only owners see billing*. Italian
+ * (*Installazioni*) scrolls, never wraps or truncates.
+ * @access "Keep Left/Right arrows moving focus across tabs and Enter/Space activating; don’t hijack with global shortcuts." (https://vercel.com/geist/tabs)
+ * "Label the tablist with `aria-label` when no visible heading sits above it (`aria-label="Sections"`)." (https://vercel.com/geist/tabs)
+ * "Maintain a visible focus ring on the active tab; don’t suppress focus styles for visual polish." (https://vercel.com/geist/tabs)
+ * Ours: the arrow keys move with one tab stop. `tablist`, `tab`, `tabpanel` with `aria-selected`.
+ * The row is named by `aria-label` or `aria-labelledby`, which the type requires; a disabled tab is
+ * `aria-disabled`.
  */
 function Tabs({ className, orientation = "horizontal", ...props }) {
     return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn("group/tabs flex min-w-0 gap-4 data-horizontal:flex-col", className), ...props }));
 }
-const tabsListVariants = cva("group/tabs-list inline-flex max-w-full w-fit items-center justify-start gap-1 overflow-x-auto text-placeholder group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", {
+const tabsListVariants = cva("group/tabs-list inline-flex max-w-full w-fit items-center justify-start gap-0 overflow-x-auto text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", {
     variants: {
         variant: {
             default: "",
-            line: "rounded-none bg-transparent",
+            line: "rounded-none bg-transparent group-data-horizontal/tabs:w-full group-data-horizontal/tabs:gap-6 group-data-horizontal/tabs:pb-px group-data-horizontal/tabs:shadow-[inset_0_-1px_0_0_var(--border)]",
         },
     },
     defaultVariants: {
@@ -36,13 +58,31 @@ const tabsListVariants = cva("group/tabs-list inline-flex max-w-full w-fit items
 function TabsList({ className, variant = "default", ...props }) {
     return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
 }
-const tabShape = "nc-transition-paint relative inline-flex shrink-0 h-control-height min-h-touch-target min-w-touch-target items-center justify-center gap-1.5 rounded-sm px-3 text-sm font-medium whitespace-nowrap text-placeholder hover:text-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
-function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn(tabShape, "group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start", "group-data-[variant=default]/tabs-list:data-active:bg-selection group-data-[variant=default]/tabs-list:data-active:text-selection-foreground", "group-data-[variant=line]/tabs-list:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity after:duration-[var(--nc-duration-confirm)] after:ease-[var(--nc-ease-out-strong)] group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-0 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:right-0 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
+const tabShape = "nc-transition-paint relative inline-flex shrink-0 h-nadicode-control-height-sm min-h-touch-target min-w-touch-target items-center justify-center gap-1.5 rounded-sm px-3 text-label-sm font-normal whitespace-nowrap text-muted-foreground not-aria-disabled:hover:text-foreground aria-disabled:cursor-not-allowed focus-visible:-outline-offset-2 [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:text-body-sm";
+function TabsTrigger({ className, disabled, disabledReason, "aria-describedby": describedBy, ...props }) {
+    const reasonId = React.useId();
+    const description = [describedBy, disabledReason === undefined ? undefined : reasonId].filter(Boolean).join(" ") ||
+        undefined;
+    const tab = (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", disabled: disabled, "aria-describedby": description, className: cn(tabShape, "group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:-mb-px group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:h-12.5 group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:px-0.5", "group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start", "group-data-[variant=default]/tabs-list:aria-disabled:bg-selection group-data-[variant=default]/tabs-list:data-active:bg-selection group-data-[variant=default]/tabs-list:data-active:text-selection-foreground", "group-data-[variant=line]/tabs-list:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-0 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:right-0 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
+    if (disabledReason === undefined)
+        return tab;
+    return (_jsxs(_Fragment, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: tab }), _jsx(TooltipContent, { children: disabledReason })] }), _jsx("span", { hidden: true, id: reasonId, children: disabledReason })] }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("min-w-0 flex-1 text-sm outline-none", className), ...props }));
 }
+/** Which ends of a scrolled row hide links, so the row fades there to say more stand beyond. */
+function hiddenTabs(element) {
+    const start = element.scrollLeft > 1;
+    const end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
+    return start && end ? "both" : start ? "start" : end ? "end" : "none";
+}
+const HIDDEN_FADE = {
+    none: undefined,
+    start: "[mask-image:linear-gradient(to_right,transparent,black_2rem)]",
+    end: "[mask-image:linear-gradient(to_left,transparent,black_2rem)]",
+    both: "[mask-image:linear-gradient(to_right,transparent,black_2rem,black_calc(100%_-_2rem),transparent)]",
+};
 /**
  * Sibling views of one object, each with its own URL, under the top bar.
  *
@@ -51,15 +91,43 @@ function TabsContent({ className, ...props }) {
  * sections), with `TabsLink` for each.
  * @instead Panels that switch in place are `Tabs`. A stable destination belongs in the `Sidebar`.
  * An object's ancestry is the `Breadcrumb`.
- * @behaviour Overflow scrolls sideways and brings the current link into view. The current link
- * takes the underline.
- * @words Nouns, one or two words: *Overview*, *Installations*. Italian scrolls, never wraps or
- * truncates.
- * @access A labelled `nav` of links with `aria-current="page"` on the current one.
+ * @behaviour "Reflect the active tab in the URL (query param or path) so deep-links and refresh restore state." (https://vercel.com/geist/tabs)
+ * Ours: each view is its own URL, so a link carries it. Overflow scrolls sideways and brings the
+ * current link into view, and the row fades out over 32 px at each end where links stand beyond it. The current link takes the selection fill, or in `line` an ink underline
+ * over the row's 1 px rule; the other links are muted until hover, with no hue. Sizes and spacing
+ * follow `Tabs`. The sub-pages of one object stand as the filled-pill row in a `band` under the top
+ * bar, as Vercel draws a deployment's tabs: the band is this component's, with `above` for the
+ * object's identity, so no page draws the border, the fill or the gutters around the row. The band
+ * keeps the page's own column and gutter, and the first link's words start at the page title's edge,
+ * its fill reaching into the gutter as Vercel's tabs do. The
+ * `line` row has its own rule and takes no band.
+ * @words "`tabs[].title` is Title Case, 1–2 words, and names the destination noun (`Overview`, `Logs`, `Settings`). Verbs belong on buttons; `View Logs` is wrong on a tab." (https://vercel.com/geist/tabs)
+ * "Don’t append a count to the title (`Logs (12)`); use a badge slot instead and drop the badge at zero." (https://vercel.com/geist/tabs)
+ * Ours: the title is sentence case (*Overview*, *Installations*), not Title Case. There is no badge
+ * slot: a count belongs to the list's footer. Italian scrolls, never wraps or truncates.
+ * @access "Label the tablist with `aria-label` when no visible heading sits above it (`aria-label="Sections"`)." (https://vercel.com/geist/tabs)
+ * "Maintain a visible focus ring on the active tab; don’t suppress focus styles for visual polish." (https://vercel.com/geist/tabs)
+ * Ours: a `nav` of links named by `aria-label` or `aria-labelledby`, which the type requires, with
+ * `aria-current="page"` on the current one.
  */
-function TabsNav({ className, children, variant = "default", ...props }) {
+function TabsNav({ className, children, variant = "default", band = false, above, ...props }) {
     const navigation = React.useRef(null);
     const current = React.useRef(null);
+    const [hidden, setHidden] = React.useState("none");
+    React.useEffect(() => {
+        const element = navigation.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => setHidden(hiddenTabs(element));
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        element.addEventListener("scroll", measure, { passive: true });
+        return () => {
+            observer.disconnect();
+            element.removeEventListener("scroll", measure);
+        };
+    }, []);
     React.useEffect(() => {
         const element = navigation.current;
         const link = element?.querySelector('[aria-current="page"]') ?? null;
@@ -70,7 +138,10 @@ function TabsNav({ className, children, variant = "default", ...props }) {
             link.scrollIntoView({ block: "nearest", inline: "nearest" });
         }
     });
-    return (_jsx("nav", { ref: navigation, "data-slot": "tabs-nav", "data-variant": variant, className: cn("group/tabs-nav min-w-0 overflow-x-auto", variant === "line" && "border-b border-border", className), ...props, children: _jsx("ul", { className: "flex w-max min-w-full items-center gap-1", children: children }) }));
+    const row = (_jsx("nav", { ref: navigation, "data-slot": "tabs-nav", "data-variant": variant, className: cn("group/tabs-nav group/tabs-list min-w-0 overflow-x-auto", HIDDEN_FADE[hidden], variant === "line" && "pb-px shadow-[inset_0_-1px_0_0_var(--border)]", className), ...props, children: _jsx("ul", { className: "flex w-max min-w-full items-center gap-0 group-data-[variant=line]/tabs-nav:gap-6", children: children }) }));
+    if (!band)
+        return row;
+    return (_jsx("div", { "data-slot": "tabs-nav-band", className: "border-b bg-background", children: _jsxs("div", { className: "mx-auto w-full max-w-7xl px-6", children: [above, _jsx("div", { className: "-mx-3 py-2", children: row })] }) }));
 }
 function TabsLink({ current = false, className, render, ...props }) {
     const link = useRender({
@@ -78,7 +149,7 @@ function TabsLink({ current = false, className, render, ...props }) {
         render,
         props: mergeProps({
             "aria-current": current ? "page" : undefined,
-            className: cn(tabShape, "group-data-[variant=default]/tabs-nav:aria-[current=page]:bg-selection group-data-[variant=default]/tabs-nav:aria-[current=page]:text-selection-foreground", "group-data-[variant=line]/tabs-nav:rounded-none group-data-[variant=line]/tabs-nav:aria-[current=page]:text-foreground", "after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity after:duration-[var(--nc-duration-confirm)] group-data-[variant=line]/tabs-nav:aria-[current=page]:after:opacity-100", className),
+            className: cn(tabShape, "group-data-[variant=line]/tabs-nav:-mb-px group-data-[variant=line]/tabs-nav:h-12.5 group-data-[variant=line]/tabs-nav:px-0.5", "group-data-[variant=default]/tabs-nav:aria-[current=page]:bg-selection group-data-[variant=default]/tabs-nav:aria-[current=page]:text-selection-foreground", "group-data-[variant=line]/tabs-nav:aria-[current=page]:text-foreground", "after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:opacity-0 group-data-[variant=line]/tabs-nav:aria-[current=page]:after:opacity-100", className),
         }, props),
         state: { slot: "tabs-link", current },
     });

package/dist/components/text-link.d.ts

@@ -10,7 +10,10 @@ import { type VariantProps } from "class-variance-authority";
  * `buttonVariants`. Going to a record from its row is the record's name in `RecordIdentity`.
  * @behaviour Classes only: the caller renders the real anchor or router link. `inline` thickens its
  * underline on hover; `plain` and `quiet` underline on hover. Paint changes ride the shared paint
- * transition.
+ * transition. Colour: only `inline` takes the link blue, as Vercel puts blue on links and nowhere
+ * else in running text; `plain` keeps the colour of the text around it, and `quiet` is muted and
+ * turns ink on hover, which is how a card footer's or a list note's *Learn more* reads. A link that
+ * leaves the product ends in the arrow icon after its text, which `quiet` sizes.
  * @words The link's text names where it goes: *Open Billing*, *Read the privacy notice*; never
  * *Click here* or a bare URL.
  * @access A real `a` with an `href`. A link that leaves the product says so in its text or carries

package/dist/components/text-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-link.d.ts","sourceRoot":"","sources":["../../src/components/text-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,gBAAgB;;8EAYpB,CAAC;AAEH,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,CAAC"}
+{"version":3,"file":"text-link.d.ts","sourceRoot":"","sources":["../../src/components/text-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,gBAAgB;;8EAYpB,CAAC;AAEH,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/dist/components/text-link.js

@@ -10,7 +10,10 @@ import { cva } from "class-variance-authority";
  * `buttonVariants`. Going to a record from its row is the record's name in `RecordIdentity`.
  * @behaviour Classes only: the caller renders the real anchor or router link. `inline` thickens its
  * underline on hover; `plain` and `quiet` underline on hover. Paint changes ride the shared paint
- * transition.
+ * transition. Colour: only `inline` takes the link blue, as Vercel puts blue on links and nowhere
+ * else in running text; `plain` keeps the colour of the text around it, and `quiet` is muted and
+ * turns ink on hover, which is how a card footer's or a list note's *Learn more* reads. A link that
+ * leaves the product ends in the arrow icon after its text, which `quiet` sizes.
  * @words The link's text names where it goes: *Open Billing*, *Read the privacy notice*; never
  * *Click here* or a bare URL.
  * @access A real `a` with an `href`. A link that leaves the product says so in its text or carries

package/dist/components/text-with-copy-button.d.ts

@@ -0,0 +1,30 @@
+import { type CopyButtonProps } from "./copy-button.js";
+type TextWithCopyButtonProps = {
+    value: string;
+    ellipsis?: boolean | undefined;
+    className?: string | undefined;
+} & Pick<CopyButtonProps, "copyLabel" | "copiedLabel" | "copyFailedLabel">;
+/**
+ * A short exact value with the button that copies it.
+ *
+ * @family Data
+ * @when A short value someone reads and pastes elsewhere: an identifier, a checksum, a slug, a
+ * server address.
+ * @instead Several lines are a `CodeBlock`; a command is a `Snippet`. A value that needs no copying
+ * is plain text. The button alone, beside text that is not the value, is `CopyButton`.
+ * @behaviour Shows the value in the body type, with a 24 px `CopyButton` whose 16 px mark sits 6 px
+ * after it. The value is slightly softer than the full text colour and the mark softer still;
+ * hovering either takes both to the full text colour, with no fill, border or shadow. Only the
+ * button copies: the value stays selectable, so a copy the clipboard refuses can be done by hand. A
+ * value too long for its row wraps at any character; `ellipsis` instead cuts it in the middle in
+ * one line (`MiddleTruncate`) and the whole value is still what copies. The result shows as the
+ * button's check mark, with no toast.
+ * @words `copyLabel` names what is copied (*Copy config digest*), never a bare *Copy*; `copiedLabel`
+ * says what was copied (*Config digest copied*); `copyFailedLabel` says it failed (*Couldn't copy*).
+ * All three are required.
+ * @access The value is text, read in full. The button is named by `copyLabel`; the result is read
+ * once from its status.
+ */
+declare function TextWithCopyButton({ className, copiedLabel, copyFailedLabel, copyLabel, ellipsis, value, }: TextWithCopyButtonProps): import("react").JSX.Element;
+export { TextWithCopyButton, type TextWithCopyButtonProps };
+//# sourceMappingURL=text-with-copy-button.d.ts.map

package/dist/components/text-with-copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-with-copy-button.d.ts","sourceRoot":"","sources":["../../src/components/text-with-copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI5E,KAAK,uBAAuB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAQ3E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,WAAW,EACX,eAAe,EACf,SAAS,EACT,QAAgB,EAChB,KAAK,GACN,EAAE,uBAAuB,+BAwBzB;AAED,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,CAAC"}

package/dist/components/text-with-copy-button.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from "./copy-button.js";
+import { MiddleTruncate } from "./middle-truncate.js";
+import { cn } from "../lib/utils.js";
+const VALUE = "text-body-md text-foreground/80 nc-transition-paint group-hover/copy:text-foreground";
+const BUTTON_WITHOUT_FILL = "[&_[data-slot=button]]:hover:bg-transparent [&_[data-slot=button]]:active:bg-transparent";
+/**
+ * A short exact value with the button that copies it.
+ *
+ * @family Data
+ * @when A short value someone reads and pastes elsewhere: an identifier, a checksum, a slug, a
+ * server address.
+ * @instead Several lines are a `CodeBlock`; a command is a `Snippet`. A value that needs no copying
+ * is plain text. The button alone, beside text that is not the value, is `CopyButton`.
+ * @behaviour Shows the value in the body type, with a 24 px `CopyButton` whose 16 px mark sits 6 px
+ * after it. The value is slightly softer than the full text colour and the mark softer still;
+ * hovering either takes both to the full text colour, with no fill, border or shadow. Only the
+ * button copies: the value stays selectable, so a copy the clipboard refuses can be done by hand. A
+ * value too long for its row wraps at any character; `ellipsis` instead cuts it in the middle in
+ * one line (`MiddleTruncate`) and the whole value is still what copies. The result shows as the
+ * button's check mark, with no toast.
+ * @words `copyLabel` names what is copied (*Copy config digest*), never a bare *Copy*; `copiedLabel`
+ * says what was copied (*Config digest copied*); `copyFailedLabel` says it failed (*Couldn't copy*).
+ * All three are required.
+ * @access The value is text, read in full. The button is named by `copyLabel`; the result is read
+ * once from its status.
+ */
+function TextWithCopyButton({ className, copiedLabel, copyFailedLabel, copyLabel, ellipsis = false, value, }) {
+    return (_jsxs("div", { "data-slot": "text-with-copy-button", className: cn("group/copy flex w-fit max-w-full min-w-0 items-center gap-0.5 text-muted-foreground nc-transition-paint hover:text-foreground", BUTTON_WITHOUT_FILL, className), children: [ellipsis ? (_jsx(MiddleTruncate, { value: value, className: VALUE })) : (_jsx("span", { className: cn("min-w-0 break-all", VALUE), children: value })), _jsx(CopyButton, { value: value, copyLabel: copyLabel, copiedLabel: copiedLabel, copyFailedLabel: copyFailedLabel, size: "icon-xs" })] }));
+}
+export { TextWithCopyButton };

package/dist/components/textarea.d.ts

@@ -1,18 +1,48 @@
 import * as React from "react";
+import { type FieldName } from "../internal/field-frame.js";
+import { type FieldSize } from "../internal/input-box.js";
+type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
+    size?: FieldSize;
+    /** 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;
 /**
  * Several lines of free text that grow with their content.
  *
  * @family Inputs
- * @when Several lines of free text: an Agent's instructions, a description, notes.
- * @instead One line is `Input`. Code or a value to copy is `CodeBlock`, read-only.
- * @behaviour At least 64 px, then it grows with its content (`field-sizing: content`). The same
- * edge, focus, invalid and disabled as `Input`. Whitespace is kept exactly; nothing trims it. A
- * character count shows only when a real limit exists.
- * @words The label names the content (*Instructions*); the help says who reads it and when. The
- * placeholder is a short example, not a paragraph.
- * @access A visible label tied by `id`; help and error through `aria-describedby`. In a dialog, the
- * footer's Save stays reachable while the box grows.
+ * @when "Retrieve multi-line user input." (https://vercel.com/geist/textarea) "Pick `<Textarea>` for
+ * content that wraps to multiple lines (commit messages, descriptions, notes); use `Input` for a
+ * single value like a name or domain." (https://vercel.com/geist/textarea)
+ * @instead Ours: code or a value to copy is `CodeBlock`, read-only.
+ * @behaviour Same ring, halo, hover, disabled and error as `Input`; the red of an error sits on the
+ * ring, the halo and the message only, and holds while the box has focus. It grows with its content
+ * (`field-sizing: content`) from a roomy 100 px minimum with a 10 px by 12 px inset; `lg` takes
+ * larger type and the larger corner, `sm` is the default's size. Read-only keeps the plain fill: it
+ * does not look disabled. `label` and `error` draw the `Field` parts around the box, and a string
+ * `label` requires `id`, as on `Input`; a box with no name does not compile. "Set a generous
+ * default `rows` and grow only when the surface has vertical room; don’t let the field push primary
+ * actions below the fold." (https://vercel.com/geist/textarea) Ours: there is no resize handle and
+ * `rows` does not set the height. Nothing caps the growth, so a form keeps its footer's primary
+ * action in view and lets the body scroll. "Validate on blur and pass a string to `error` to render
+ * the inline message; the validation replaces helper text on failure."
+ * (https://vercel.com/geist/textarea) "Trim leading and trailing whitespace on submit so empty
+ * newlines don’t pass a `required` check." (https://vercel.com/geist/textarea) Ours: typing keeps
+ * every space and newline; the save of `FormDialog`, `FormDrawer`, `RowEditForm` and
+ * `SettingsSection` trims the ends (see `Field`). A character count shows only when a real limit
+ * exists.
+ * @words "Labels are short Title Case nouns (`Description`, `Release Notes`); placeholders show an
+ * example value, not instructions like `Enter a description`." (https://vercel.com/geist/textarea)
+ * "Validation names the field and constraint, ends in a period, and skips `please` (`Description is
+ * required.`, `Release notes can’t exceed 500 characters.`)." (https://vercel.com/geist/textarea)
+ * "Render helper text as a sibling `<p>` linked through `aria-describedby`; sentence case, one
+ * sentence, with a period." (https://vercel.com/geist/textarea) Ours: the label names the content
+ * (*Instructions*) in sentence case. Help is the one-line description of the card or form around
+ * the box, not a `<p>` under it. The placeholder is a short example, not a paragraph.
+ * @access A visible label tied by `id`, or `aria-label`; the error through `aria-describedby`. In a
+ * dialog, the footer's Save stays reachable while the box grows.
  */
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+declare function Textarea({ label, description, error, size, className, ...props }: TextareaProps): React.JSX.Element;
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;GAaG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAqB7F,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,GAAG;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EACL,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,qBAef;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/textarea.js

@@ -1,20 +1,59 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
+import { FieldFrame } from "../internal/field-frame.js";
+import { fieldDisabled, fieldRing, fieldStates } from "../internal/input-box.js";
+const textareaVariants = cva([
+    "flex field-sizing-content min-h-25 w-full resize-none bg-(--nc-field,var(--background)) px-control-padding-inline py-2.5 placeholder:text-placeholder",
+    fieldRing,
+    fieldStates,
+    fieldDisabled,
+], {
+    variants: {
+        size: {
+            sm: "rounded-sm text-base md:text-sm",
+            default: "rounded-sm text-base md:text-sm",
+            lg: "rounded-md text-base",
+        },
+    },
+    defaultVariants: { size: "default" },
+});
 /**
  * Several lines of free text that grow with their content.
  *
  * @family Inputs
- * @when Several lines of free text: an Agent's instructions, a description, notes.
- * @instead One line is `Input`. Code or a value to copy is `CodeBlock`, read-only.
- * @behaviour At least 64 px, then it grows with its content (`field-sizing: content`). The same
- * edge, focus, invalid and disabled as `Input`. Whitespace is kept exactly; nothing trims it. A
- * character count shows only when a real limit exists.
- * @words The label names the content (*Instructions*); the help says who reads it and when. The
- * placeholder is a short example, not a paragraph.
- * @access A visible label tied by `id`; help and error through `aria-describedby`. In a dialog, the
- * footer's Save stays reachable while the box grows.
+ * @when "Retrieve multi-line user input." (https://vercel.com/geist/textarea) "Pick `<Textarea>` for
+ * content that wraps to multiple lines (commit messages, descriptions, notes); use `Input` for a
+ * single value like a name or domain." (https://vercel.com/geist/textarea)
+ * @instead Ours: code or a value to copy is `CodeBlock`, read-only.
+ * @behaviour Same ring, halo, hover, disabled and error as `Input`; the red of an error sits on the
+ * ring, the halo and the message only, and holds while the box has focus. It grows with its content
+ * (`field-sizing: content`) from a roomy 100 px minimum with a 10 px by 12 px inset; `lg` takes
+ * larger type and the larger corner, `sm` is the default's size. Read-only keeps the plain fill: it
+ * does not look disabled. `label` and `error` draw the `Field` parts around the box, and a string
+ * `label` requires `id`, as on `Input`; a box with no name does not compile. "Set a generous
+ * default `rows` and grow only when the surface has vertical room; don’t let the field push primary
+ * actions below the fold." (https://vercel.com/geist/textarea) Ours: there is no resize handle and
+ * `rows` does not set the height. Nothing caps the growth, so a form keeps its footer's primary
+ * action in view and lets the body scroll. "Validate on blur and pass a string to `error` to render
+ * the inline message; the validation replaces helper text on failure."
+ * (https://vercel.com/geist/textarea) "Trim leading and trailing whitespace on submit so empty
+ * newlines don’t pass a `required` check." (https://vercel.com/geist/textarea) Ours: typing keeps
+ * every space and newline; the save of `FormDialog`, `FormDrawer`, `RowEditForm` and
+ * `SettingsSection` trims the ends (see `Field`). A character count shows only when a real limit
+ * exists.
+ * @words "Labels are short Title Case nouns (`Description`, `Release Notes`); placeholders show an
+ * example value, not instructions like `Enter a description`." (https://vercel.com/geist/textarea)
+ * "Validation names the field and constraint, ends in a period, and skips `please` (`Description is
+ * required.`, `Release notes can’t exceed 500 characters.`)." (https://vercel.com/geist/textarea)
+ * "Render helper text as a sibling `<p>` linked through `aria-describedby`; sentence case, one
+ * sentence, with a period." (https://vercel.com/geist/textarea) Ours: the label names the content
+ * (*Instructions*) in sentence case. Help is the one-line description of the card or form around
+ * the box, not a `<p>` under it. The placeholder is a short example, not a paragraph.
+ * @access A visible label tied by `id`, or `aria-label`; the error through `aria-describedby`. In a
+ * dialog, the footer's Save stays reachable while the box grows.
  */
-function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-sm border border-input bg-background px-control-padding-inline py-2 text-base transition-colors placeholder:text-placeholder disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive md:text-sm", className), ...props }));
+function Textarea({ label, description, error, size = "default", className, ...props }) {
+    return (_jsx(FieldFrame, { label: label, description: description, error: error, size: size, control: props, children: (aria) => (_jsx("textarea", { "data-slot": "textarea", "data-size": size, "data-field-frame": "", className: cn(textareaVariants({ size }), className), ...props, ...aria })) }));
 }
 export { Textarea };

package/dist/components/theme-mode-switcher.d.ts

@@ -10,7 +10,7 @@ export type ThemeModeOption = {
     mode: ThemeMode;
     selected: boolean;
 };
-export type ThemeModeSwitcherProps = Omit<React.ComponentProps<typeof RadioGroup>, "children" | "defaultValue" | "onValueChange" | "value"> & {
+export type ThemeModeSwitcherProps = Omit<React.ComponentProps<typeof RadioGroup>, "aria-label" | "aria-labelledby" | "children" | "defaultValue" | "onValueChange" | "value"> & {
     "aria-label": string;
     compact?: boolean;
     itemClassName?: string;
@@ -49,4 +49,21 @@ export declare function ThemeModeMenu({ label, labels, value, onValueChange, dis
     onValueChange: (value: ThemeMode) => void;
     disabled?: boolean;
 }): React.JSX.Element;
+/**
+ * The appearance as one small pill of three icons, for the corner of a page.
+ *
+ * @family Choices
+ * @when The appearance outside a settings page, where it must take little room: the corner of a sign-in page or a site's footer.
+ * @instead On a settings page, where the choice has room for its names, it is ThemeModeSwitcher; inside a menu, ThemeModeMenu.
+ * @behaviour One control of three icon segments, System, Light and Dark, the chosen one filled; choosing applies at once. Each segment shows its name as a tooltip.
+ * @words Each segment's name from the product's catalogue: "System", "Light", "Dark"; the control's name is the setting's: "Theme".
+ * @access A radio group named by `aria-label`; each segment is a radio named by its label, moved through with the arrow keys.
+ */
+export declare function ThemeModeSegments({ "aria-label": ariaLabel, disabled, labels, onValueChange, value, }: {
+    "aria-label": string;
+    disabled?: boolean;
+    labels: ThemeModeOptionLabels;
+    onValueChange: (value: ThemeMode) => void;
+    value: ThemeMode;
+}): React.JSX.Element;
 //# sourceMappingURL=theme-mode-switcher.d.ts.map

package/dist/components/theme-mode-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF;;;;;;;;;GASG;AACH,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA6CxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAkBA"}
+{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,YAAY,GAAG,iBAAiB,GAAG,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CAC3F,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF;;;;;;;;;GASG;AACH,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBA6CxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,qBAAqB,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAkBA;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,MAAM,EACN,aAAa,EACb,KAAK,GACN,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC;CAClB,qBAeA"}

package/dist/components/theme-mode-switcher.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
 import { MenuChoiceRow } from "./menu-choice-row.js";
 import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { SegmentedControl } from "./segmented-control.js";
 import { toggleVariants } from "./toggle.js";
 import { isThemeMode, themeModes } from "../lib/theme-mode.js";
 import { cn } from "../lib/utils.js";
@@ -23,7 +24,7 @@ const themeModeIcons = {
  * @access A radio group named by `aria-label`; each mode is a radio with its name, moved through with the arrow keys.
  */
 function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }) {
-    return (_jsx(RadioGroup, { "aria-label": ariaLabel, className: cn("max-w-full grid-cols-3", className), disabled: disabled, onValueChange: (nextMode) => {
+    return (_jsx(RadioGroup, { "aria-label": ariaLabel, className: cn("@container/theme-mode max-w-full grid-cols-3 gap-2", className), disabled: disabled, onValueChange: (nextMode) => {
             if (isThemeMode(nextMode)) {
                 onValueChange(nextMode);
             }
@@ -31,7 +32,7 @@ function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false
             const Icon = themeModeIcons[mode];
             const label = labels[mode];
             const selected = value === mode;
-            return (_jsx(RadioGroupItem, { "aria-label": label, className: cn(toggleVariants({ variant: "outline" }), "aspect-auto w-auto min-w-0 gap-1.5 data-checked:border-transparent data-checked:bg-selection data-checked:text-selection-foreground", compact && "text-xs", itemClassName), disabled: disabled, value: mode, children: renderItem ? (renderItem({ Icon, label, mode, selected })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", "data-icon": true }), _jsx("span", { className: "min-w-0 truncate", children: label })] })) }, mode));
+            return (_jsx(RadioGroupItem, { "aria-label": label, className: cn(toggleVariants({ variant: "outline" }), "aspect-auto w-auto min-w-0 gap-1.5 @max-[24rem]/theme-mode:px-2 data-checked:border-transparent data-checked:bg-selection data-checked:text-selection-foreground", compact && "text-xs", itemClassName), disabled: disabled, value: mode, children: renderItem ? (renderItem({ Icon, label, mode, selected })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", "data-icon": true }), _jsx("span", { className: "min-w-0", children: label })] })) }, mode));
         }) }));
 }
 export { ThemeModeSwitcher };
@@ -56,3 +57,20 @@ export function ThemeModeMenu({ label, labels, value, onValueChange, disabled, }
             };
         }) }));
 }
+/**
+ * The appearance as one small pill of three icons, for the corner of a page.
+ *
+ * @family Choices
+ * @when The appearance outside a settings page, where it must take little room: the corner of a sign-in page or a site's footer.
+ * @instead On a settings page, where the choice has room for its names, it is ThemeModeSwitcher; inside a menu, ThemeModeMenu.
+ * @behaviour One control of three icon segments, System, Light and Dark, the chosen one filled; choosing applies at once. Each segment shows its name as a tooltip.
+ * @words Each segment's name from the product's catalogue: "System", "Light", "Dark"; the control's name is the setting's: "Theme".
+ * @access A radio group named by `aria-label`; each segment is a radio named by its label, moved through with the arrow keys.
+ */
+export function ThemeModeSegments({ "aria-label": ariaLabel, disabled, labels, onValueChange, value, }) {
+    return (_jsx(SegmentedControl, { "aria-label": ariaLabel, disabled: disabled, onValueChange: onValueChange, options: [
+            { value: "system", label: labels.system, icon: _jsx(MonitorIcon, {}), iconOnly: true },
+            { value: "light", label: labels.light, icon: _jsx(SunIcon, {}), iconOnly: true },
+            { value: "dark", label: labels.dark, icon: _jsx(MoonIcon, {}), iconOnly: true },
+        ], size: "sm", value: value }));
+}

package/dist/components/toggle-group.d.ts

@@ -3,23 +3,43 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
 import { type VariantProps } from "class-variance-authority";
 import { toggleVariants } from "./toggle.js";
+type ToggleGroupName = {
+    "aria-label": string;
+    "aria-labelledby"?: undefined;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: undefined;
+};
+type ToggleGroupMemberName = {
+    children: string;
+    "aria-label"?: string;
+} | {
+    "aria-label": string;
+    children?: React.ReactNode;
+};
 /**
  * Pressed buttons that belong together.
  *
  * @family Choices
- * @when Pressed buttons that belong together: a list or grid view, which details a chat shows.
- * @instead A segmented control that sets a value, such as the theme or a period, is a `RadioGroup`
- * drawn with the toggle classes, as `ThemeModeSwitcher` does. Panels of one object are `Tabs`.
+ * @when Pressed buttons that belong together: which details a chat shows, the marks on a toolbar.
+ * @instead A value that is always exactly one of two or three, such as a list or grid view, is a
+ * `SegmentedControl`: its options are radios, so pressing the chosen one never clears it. The
+ * theme is `ThemeModeSwitcher`. Panels of one object are `Tabs`.
  * @behaviour Spacing 0 joins the members into one outline with one seam; spacing 2 keeps them 8 px
- * apart. Single or multiple pressed. Arrow keys move between members; Space presses.
- * @words Text members are short words of equal weight. Icon members always carry a name: *List*,
- * *Grid*.
+ * apart. With `multiple`, members are pressed independently and any number may be pressed, none
+ * included. Without it, at most one is pressed and pressing it again clears it; a value that is
+ * always one of two or three is a `SegmentedControl`. The group is named with `aria-label`
+ * or `aria-labelledby`, and a member is either a word as its children or carries an `aria-label`;
+ * a group or an icon member without a name does not compile. Colour: a pressed member takes the
+ * accent grey and nothing takes a hue. Arrow keys move between members; Space presses.
+ * @words Text members are short words of equal weight. Icon members always carry a name: *Tools*,
+ * *Reasoning*.
  * @access `role="group"` with a name; each member a button with `aria-pressed`.
  */
-declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, ...props }: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
+declare function ToggleGroup({ className, variant, size, spacing, orientation, style, children, ...props }: Omit<ToggleGroupPrimitive.Props, "aria-label" | "aria-labelledby"> & ToggleGroupName & VariantProps<typeof toggleVariants> & {
     spacing?: number;
     orientation?: "horizontal" | "vertical";
 }): React.JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: Omit<TogglePrimitive.Props, "children"> & ToggleGroupMemberName & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD;;;;;;;;;;;;GAYG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,GAC3B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,qBA2BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsB7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAcrD,KAAK,eAAe,GAChB;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,CAAC;AAE5D,KAAK,qBAAqB,GACtB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3C;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEzD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,YAAY,GAAG,iBAAiB,CAAC,GACnE,eAAe,GACf,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,qBA2BF;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,GACxC,qBAAqB,GACrB,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsBpC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}