@sableui/react 0.7.0 → 0.8.0

package/dist/components/data-table/data-table.js

@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { Button } from "../button/button.js";
+import { Checkbox } from "../checkbox/index.js";
 import {
   Table,
   TableBody,
@@ -28,6 +29,10 @@ function DataTable({
   rowKey,
   onRowClick,
   isRowSelected,
+  selectedKeys,
+  onSelectedKeysChange,
+  rowSelectionLabel = () => "Select row",
+  selectAllLabel = (count) => `Select all ${count} shown`,
   defaultSort,
   empty = "No results.",
   caption,
@@ -58,82 +63,130 @@ function DataTable({
       return sort.direction === "asc" ? c : -c;
     });
   }, [data, sort, columns]);
+  const selectable = Boolean(onSelectedKeysChange);
+  const dataIndex = selectable ? new Map(data.map((row, i) => [row, i])) : null;
+  const keyOf = (row) => {
+    const i = dataIndex?.get(row) ?? 0;
+    return rowKey ? rowKey(row, i) : i;
+  };
+  const shownKeys = selectable ? rows.map(keyOf) : [];
+  const checkedCount = selectable ? shownKeys.filter((k) => selectedKeys?.has(k)).length : 0;
+  const allChecked = shownKeys.length > 0 && checkedCount === shownKeys.length;
+  function setChecked(keys, checked) {
+    const next = new Set(selectedKeys);
+    for (const k of keys) {
+      if (checked) next.add(k);
+      else next.delete(k);
+    }
+    onSelectedKeysChange?.(next);
+  }
   return /* @__PURE__ */ jsxs(Table, { className, children: [
     caption ? /* @__PURE__ */ jsx(TableCaption, { children: caption }) : null,
-    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => {
-      const active = sort?.key === col.key;
-      return /* @__PURE__ */ jsx(
-        TableHead,
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      selectable ? /* @__PURE__ */ jsx(TableHead, { className: "w-0", children: /* @__PURE__ */ jsx(
+        Checkbox,
         {
-          "aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
-          className: cn(col.align && ALIGN[col.align], col.className),
-          children: col.sortable ? (
-            // The negative inline margin cancels Button's padding so
-            // the label stays on the column's text edge; the header's
-            // own type and ink win over Button's action tier. In an
-            // end-aligned column the chevron leads, so the LABEL is
-            // what sits on the numbers' edge.
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                variant: "ghost",
-                size: "xs",
-                onClick: () => toggleSort(col.key),
-                className: cn(
-                  "-mx-2 gap-1 text-label-md text-muted-foreground hover:text-foreground",
-                  col.align === "end" && "flex-row-reverse"
-                ),
-                children: [
-                  col.header,
-                  /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      name: active && sort.direction === "desc" ? "chevron-down" : "chevron-up",
-                      className: cn("text-xs", !active && "opacity-60")
-                    }
-                  )
-                ]
-              }
-            )
-          ) : col.header
-        },
-        col.key
-      );
-    }) }) }),
+          "aria-label": selectAllLabel(shownKeys.length),
+          checked: allChecked,
+          indeterminate: checkedCount > 0 && !allChecked,
+          disabled: shownKeys.length === 0,
+          onCheckedChange: (checked) => setChecked(shownKeys, checked),
+          className: "align-middle"
+        }
+      ) }) : null,
+      columns.map((col) => {
+        const active = sort?.key === col.key;
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            "aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
+            className: cn(col.align && ALIGN[col.align], col.className),
+            children: col.sortable ? (
+              // The negative inline margin cancels Button's padding so
+              // the label stays on the column's text edge; the header's
+              // own type and ink win over Button's action tier. In an
+              // end-aligned column the chevron leads, so the LABEL is
+              // what sits on the numbers' edge.
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "xs",
+                  onClick: () => toggleSort(col.key),
+                  className: cn(
+                    "-mx-2 gap-1 text-label-md text-muted-foreground hover:text-foreground",
+                    col.align === "end" && "flex-row-reverse"
+                  ),
+                  children: [
+                    col.header,
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: active && sort.direction === "desc" ? "chevron-down" : "chevron-up",
+                        className: cn("text-xs", !active && "opacity-60")
+                      }
+                    )
+                  ]
+                }
+              )
+            ) : col.header
+          },
+          col.key
+        );
+      })
+    ] }) }),
     /* @__PURE__ */ jsx(TableBody, { children: rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
       TableCell,
       {
-        colSpan: columns.length,
+        colSpan: columns.length + (selectable ? 1 : 0),
         className: cn(
           "text-center text-muted-foreground",
           typeof empty === "string" && "py-8"
         ),
         children: empty
       }
-    ) }) : rows.map((row, i) => /* @__PURE__ */ jsx(
-      TableRow,
-      {
-        "data-selected": isRowSelected?.(row) ? "" : void 0,
-        onClick: onRowClick ? () => onRowClick(row) : void 0,
-        tabIndex: onRowClick ? 0 : void 0,
-        onKeyDown: onRowClick ? (e) => {
-          if (e.target !== e.currentTarget) return;
-          if (e.key !== "Enter" && e.key !== " ") return;
-          e.preventDefault();
-          onRowClick(row);
-        } : void 0,
-        className: onRowClick ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" : void 0,
-        children: columns.map((col) => /* @__PURE__ */ jsx(
-          TableCell,
-          {
-            className: cn(col.align && ALIGN[col.align], col.className),
-            children: col.cell ? col.cell(row) : row[col.key]
-          },
-          col.key
-        ))
-      },
-      rowKey ? rowKey(row, i) : i
-    )) })
+    ) }) : rows.map((row, i) => {
+      const key = selectable ? keyOf(row) : i;
+      const checked = selectable && Boolean(selectedKeys?.has(key));
+      return /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          "data-selected": checked || isRowSelected?.(row) ? "" : void 0,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
+          onKeyDown: onRowClick ? (e) => {
+            if (e.target !== e.currentTarget) return;
+            if (e.key !== "Enter" && e.key !== " ") return;
+            e.preventDefault();
+            onRowClick(row);
+          } : void 0,
+          className: onRowClick ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" : void 0,
+          children: [
+            selectable ? (
+              // A click on the box checks it; it never opens the row.
+              /* @__PURE__ */ jsx(TableCell, { className: "w-0", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": rowSelectionLabel(row),
+                  checked,
+                  onCheckedChange: (next) => setChecked([key], next),
+                  className: "align-middle"
+                }
+              ) })
+            ) : null,
+            columns.map((col) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: cn(col.align && ALIGN[col.align], col.className),
+                children: col.cell ? col.cell(row) : row[col.key]
+              },
+              col.key
+            ))
+          ]
+        },
+        rowKey ? rowKey(row, i) : i
+      );
+    }) })
   ] });
 }
 DataTable.displayName = "DataTable";

package/dist/components/data-table/data-table.meta.js

@@ -93,7 +93,29 @@ var dataTableMeta = {
     {
       name: "isRowSelected",
       type: "(row) => boolean",
-      description: "Mark a row visually selected (data-selected). Derive it from a stable id (row.id === selectedId), not the row index, so selection survives re-sorts."
+      description: "Mark a row visually selected (data-selected), e.g. the one open in a detail pane. Derive it from a stable id (row.id === selectedId), not the row index, so selection survives re-sorts. For checking several rows, use selectedKeys."
+    },
+    {
+      name: "selectedKeys",
+      type: "ReadonlySet<string | number>",
+      description: "The checked rows, by rowKey, for bulk actions. With onSelectedKeysChange it adds a checkbox column (each box named by rowSelectionLabel) and a select-all box in the header that acts on the rows shown and goes mixed when some are checked. Checked rows get the selected fill. Controlled: when the rows shown change (a filter, another view), set the keys to keep, usually none. Needs rowKey."
+    },
+    {
+      name: "onSelectedKeysChange",
+      type: "(keys: Set<string | number>) => void",
+      description: "Called with the new set of checked keys. Its presence turns selection on. A click on a box never fires onRowClick."
+    },
+    {
+      name: "rowSelectionLabel",
+      type: "(row) => string",
+      default: '() => "Select row"',
+      description: "A row checkbox's accessible name. Name the row, e.g. (t) => `Select ${t.subject}`, so a screen reader can tell the boxes apart."
+    },
+    {
+      name: "selectAllLabel",
+      type: "(count: number) => string",
+      default: "(count) => `Select all ${count} shown`",
+      description: `The select-all checkbox's accessible name; say what it acts on ("Select all 7 tickets shown").`
     },
     {
       name: "defaultSort",
@@ -119,6 +141,10 @@ var dataTableMeta = {
     "Inherits the Table's scrollable frame and semantic <table>/<th>/<td> structure."
   ],
   examples: [
+    {
+      label: "Checkbox selection with a bulk-action bar",
+      code: 'const [selected, setSelected] = useState<Set<string | number>>(new Set())\n\n<Stack gap={2}>\n	{/* Mounted from the start, so a screen reader hears each change. */}\n	<span role="status" className="sr-only">{selected.size ? `${selected.size} of ${tickets.length} selected` : ""}</span>\n	{selected.size ? (\n		<Toolbar aria-label="Bulk actions">\n			<span className="text-label-md">{selected.size} of {tickets.length} selected</span>\n			<Button size="sm" variant="secondary" onClick={() => resolve(selected)}>Resolve</Button>\n		</Toolbar>\n	) : null}\n	<DataTable\n		data={tickets}\n		rowKey={(t) => t.id}\n		columns={columns}\n		selectedKeys={selected}\n		onSelectedKeysChange={setSelected}\n		rowSelectionLabel={(t) => `Select ${t.subject}`}\n		selectAllLabel={(n) => `Select all ${n} tickets shown`}\n	/>\n</Stack>'
+    },
     {
       label: "Sortable columns",
       code: '<DataTable data={users} columns={[{ key: "name", header: "Name", sortable: true }, { key: "role", header: "Role" }, { key: "joined", header: "Joined", sortable: true, sortValue: (u) => u.joinedAt, cell: (u) => formatDate(u.joinedAt) }]} />'

package/dist/components/form/form.js

@@ -17,13 +17,16 @@ function Form({
   onSubmit,
   onFormSubmit,
   noValidate,
+  validationMode,
+  errors,
+  actionsRef,
   ...props
 }) {
   const blockedRef = useRef(false);
   const handleSubmit = (event) => {
     blockedRef.current = false;
     const form = event.currentTarget;
-    if (!noValidate && !form.checkValidity()) {
+    if (!form.checkValidity()) {
       event.preventDefault();
       blockedRef.current = true;
       form.reportValidity();
@@ -31,10 +34,24 @@ function Form({
     }
     onSubmit?.(event);
   };
+  if (noValidate) {
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        noValidate: true,
+        className: cn("flex flex-col gap-6", className),
+        onSubmit,
+        ...props
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     BaseForm,
     {
       className: cn("flex flex-col gap-6", className),
+      validationMode,
+      errors,
+      actionsRef,
       onSubmit: handleSubmit,
       onFormSubmit: onFormSubmit ? (values, details) => {
         if (!blockedRef.current) onFormSubmit(values, details);
@@ -49,6 +66,7 @@ function Field({
   description,
   error,
   required,
+  messages,
   disabled,
   name,
   validate,
@@ -98,14 +116,17 @@ function Field({
       children: description
     }
   ) : null;
-  const errorNode = /* @__PURE__ */ jsx(
-    BaseField.Error,
-    {
-      id: errId,
-      className: "text-body-sm text-destructive",
-      ...hasError ? { match: true, children: error } : null
-    }
-  );
+  const errorNode = /* @__PURE__ */ jsx(BaseField.Validity, { children: ({ validity }) => {
+    const flag = messages ? Object.keys(messages).find((key) => validity[key]) : void 0;
+    return /* @__PURE__ */ jsx(
+      BaseField.Error,
+      {
+        id: errId,
+        className: "text-body-sm text-destructive",
+        ...hasError ? { match: true, children: error } : flag ? { children: messages?.[flag] } : null
+      }
+    );
+  } });
   return /* @__PURE__ */ jsx(
     BaseField.Root,
     {

package/dist/components/form/form.meta.js

@@ -72,7 +72,7 @@ var formMeta = {
     {
       name: "Form",
       type: '{ validationMode?: "onSubmit" | "onBlur" | "onChange"; errors?: Record<string, string | string[]>; onFormSubmit?: (values, details) => void; actionsRef?: RefObject<Form.Actions> } + ComponentPropsWithRef<"form">',
-      description: 'A <form> laid out as a vertical column with comfortable field spacing (override with className, e.g. gap-4). On submit it validates every Field (native constraints plus Field validate), shows each message under its field, focuses the first invalid control, and only then calls onSubmit. validationMode defaults to "onSubmit" (then live re-validation on change). errors shows external (e.g. server) messages keyed by Field name and clears one when its field is edited. onFormSubmit receives the named Field values and prevents the native submit. A control outside any Field is still checked by the browser before onSubmit runs; pass noValidate to skip that.'
+      description: 'A <form> laid out as a vertical column with comfortable field spacing (override with className, e.g. gap-4). On submit it validates every Field (native constraints plus Field validate), shows each message under its field, focuses the first invalid control, and only then calls onSubmit. validationMode defaults to "onSubmit" (then live re-validation on change). errors shows external (e.g. server) messages keyed by Field name and clears one when its field is edited. onFormSubmit receives the named Field values and prevents the native submit. A control outside any Field is still checked by the browser before onSubmit runs. Validating in your own code (react-hook-form, a schema, state)? Pass noValidate: onSubmit always runs and each Field shows the error you set; without it an empty required Field stops the submit before your handler can set that error.'
     },
     {
       name: "validationMode",
@@ -90,6 +90,12 @@ var formMeta = {
       type: "(values: Record<string, unknown>, details) => void",
       description: "Called with the named Field values after validation passes; prevents the native submit."
     },
+    {
+      name: "noValidate",
+      type: "boolean",
+      default: "false",
+      description: "Your code owns validation: nothing is checked before onSubmit (neither the Fields nor the browser), so it always runs and each Field shows the error you pass. required Fields keep their asterisk and aria-required. validationMode, errors, onFormSubmit and actionsRef do nothing with it."
+    },
     {
       name: "actionsRef",
       type: "RefObject<{ validate(name?: string): void }>",
@@ -99,8 +105,8 @@ var formMeta = {
   subcomponents: [
     {
       name: "Field",
-      type: '{ label?: ReactNode; description?: ReactNode; error?: ReactNode; required?: boolean; disabled?: boolean; name?: string; validate?: (value, formValues) => string | string[] | null | Promise<\u2026>; validationMode?: "onSubmit" | "onBlur" | "onChange"; validationDebounceTime?: number; orientation?: "vertical" | "horizontal"; className?: string; children: ReactElement }',
-      description: `Wraps a single control element (e.g. <Input />) on Base UI Field and wires label (htmlFor + aria-labelledby), helper text and error (aria-describedby), aria-invalid, and required onto it automatically. Base UI-backed controls (Input, Textarea, Select, Combobox, NumberField, Checkbox, Switch, Slider, OtpField\u2026) register through context; the child is also cloned so plain elements keep the same wiring. error renders a destructive message and takes precedence; without it the slot shows Base UI's validation message when the field fails (native constraint, validate, or Form errors). required adds the native attribute plus a visual asterisk (defaults to false). disabled disables the control and dims the label. name keys the field in Form errors / onFormSubmit. validationMode overrides the Form's. orientation defaults to "vertical" (label \u2192 control); "horizontal" places control then label inline for a single checkbox / switch / radio \u2014 the control centres on the label's first line (it stays there when the label wraps) and description/error sit in the label's column. The root, label, description, error and control carry data-invalid / data-valid, data-touched, data-dirty, data-filled, data-focused and data-disabled for state styling.`
+      type: '{ label?: ReactNode; description?: ReactNode; error?: ReactNode; required?: boolean; messages?: Partial<Record<"valueMissing" | "typeMismatch" | "patternMismatch" | "tooShort" | "tooLong" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput", ReactNode>>; disabled?: boolean; name?: string; validate?: (value, formValues) => string | string[] | null | Promise<\u2026>; validationMode?: "onSubmit" | "onBlur" | "onChange"; validationDebounceTime?: number; orientation?: "vertical" | "horizontal"; className?: string; children: ReactElement }',
+      description: `Wraps a single control element (e.g. <Input />) on Base UI Field and wires label (htmlFor + aria-labelledby), helper text and error (aria-describedby), aria-invalid, and required onto it automatically. Base UI-backed controls (Input, Textarea, Select, Combobox, NumberField, Checkbox, Switch, Slider, OtpField\u2026) register through context; the child is also cloned so plain elements keep the same wiring. error renders a destructive message and takes precedence; without it the slot shows the field's messages entry for the native constraint that failed (messages={{ valueMissing: "Enter a subject." }}), else Base UI's validation message (the browser's wording for a native constraint, validate, or Form errors). required adds the native attribute plus a visual asterisk (defaults to false). disabled disables the control and dims the label. name keys the field in Form errors / onFormSubmit. validationMode overrides the Form's. orientation defaults to "vertical" (label \u2192 control); "horizontal" places control then label inline for a single checkbox / switch / radio \u2014 the control centres on the label's first line (it stays there when the label wraps) and description/error sit in the label's column. The root, label, description, error and control carry data-invalid / data-valid, data-touched, data-dirty, data-filled, data-focused and data-disabled for state styling.`
     }
   ],
   tokensUsed: ["muted-foreground", "destructive"],
@@ -119,6 +125,14 @@ var formMeta = {
       label: "Field with an error",
       code: '<Field label="Password" error="Must be at least 8 characters."><Input type="password" /></Field>'
     },
+    {
+      label: "Your own wording for a missing value",
+      code: '<Form onSubmit={handleSubmit}><Field label="Subject" required messages={{ valueMissing: "Enter a subject." }}><Input name="subject" /></Field><Button type="submit">Send</Button></Form>'
+    },
+    {
+      label: "Validation in your own code",
+      code: '<Form noValidate onSubmit={handleSubmit}><Field label="Subject" required error={errors.subject}><Input name="subject" /></Field><Button type="submit">Send</Button></Form>'
+    },
     {
       label: "Validated on submit",
       code: '<Form onSubmit={handleSubmit}><Field label="Handle" required validate={(value) => String(value).length < 3 ? "At least 3 characters." : null}><Input name="handle" /></Field><Button type="submit">Claim</Button></Form>'

package/dist/components/message-scroller/message-scroller.meta.js

@@ -86,7 +86,7 @@ var messageScrollerMeta = {
     {
       name: "ref",
       type: "Ref<MessageScrollerHandle>",
-      description: "Imperative commands, not the DOM node: `scrollToBottom(opts)`, `scrollToTop(opts)`, `scrollToMessage(id, opts)` (returns false when the message is not rendered), `isFollowing()`, and `element` for the scrolling node itself."
+      description: "Imperative commands, not the DOM node: `scrollToBottom(opts)`, `scrollToTop(opts)`, `scrollToMessage(id, opts)` (returns false when the message is not rendered), `isFollowing()`, and `element` for the scrolling node itself. `opts` is `ScrollCommandOptions`: `{ animate?: boolean }` (default true, and off whenever motion is), not the DOM's `behavior`."
     },
     {
       name: "autoFollow",

package/dist/components/page-header/page-header.js

@@ -20,6 +20,7 @@ function PageHeader({
         title,
         titleClassName: "text-heading-2",
         band: "flex min-h-(--control-md) items-center",
+        titleBasis: "basis-[min(100%,20rem)]",
         leading: back,
         actions
       }

package/dist/components/page-header/page-header.meta.js

@@ -57,7 +57,7 @@ var pageHeaderMeta = {
     {
       name: "actions",
       type: "ReactNode",
-      description: "Trailing actions aligned to the title row's end. They drop under the title when the row runs out of room, and the title wraps rather than truncating. A ghost or link Button at either end of the group bleeds by its own padding, so its label meets the content edge (the end on the title row, the start once wrapped); filled buttons keep their edge on the line. Direct children only."
+      description: "Trailing actions aligned to the title row's end. They drop under the title when the title would have less than 20rem beside them (on a phone, nearly always), and the title wraps rather than truncating. A ghost or link Button at either end of the group bleeds by its own padding, so its label meets the content edge (the end on the title row, the start once wrapped); filled buttons keep their edge on the line. Direct children only."
     },
     {
       name: "titleAs",

package/dist/components/pie-chart/pie-chart.js

@@ -5,7 +5,7 @@ import { useId } from "react";
 import { ChartFrame } from "../../lib/chart/chart-frame.js";
 import { ChartLegend } from "../../lib/chart/chart-legend.js";
 import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
-import { categoryText, chartFormatters } from "../../lib/chart/format.js";
+import { categoryText, centerValueText, chartFormatters } from "../../lib/chart/format.js";
 import { arcPath, polar } from "../../lib/chart/geometry.js";
 import { DRAW_DURATION, morphTransition, pathStyle } from "../../lib/chart/motion.js";
 import {
@@ -177,8 +177,8 @@ function PieChart({
             );
           }) : null,
           centerLabel && g.inner > 0 ? /* @__PURE__ */ jsxs("text", { x: g.cx, y: g.cy, textAnchor: "middle", className: "[[data-reveal=out]_&]:opacity-0", style: { transition: morphTransition() }, children: [
-            /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: centerLabel.label ? "-0.1em" : "0.32em", className: "fill-foreground text-heading-2 tabular-nums", children: centerLabel.value }),
-            centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "1.6em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
+            /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "0.35em", className: "fill-foreground text-heading-2 tabular-nums", children: centerValueText(centerLabel.value, locale) }),
+            centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "1.9em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
           ] }) : null
         ] });
       }

package/dist/components/pie-chart/pie-chart.meta.js

@@ -83,8 +83,8 @@ var pieChartMeta = {
     },
     {
       name: "centerLabel",
-      type: "{ value: string; label?: string }",
-      description: "A value and caption in the hole of a donut."
+      type: "{ value: string | number; label?: string }",
+      description: "A value and caption in the hole of a donut. The value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K, 102.1K, 1.2M); pass a string for units."
     },
     {
       name: "separator",
@@ -197,7 +197,7 @@ var pieChartMeta = {
   examples: [
     {
       label: "Donut with a total",
-      code: 'const sources = [\n	{ source: "Search", visitors: 275 },\n	{ source: "Direct", visitors: 200 },\n	{ source: "Social", visitors: 187 },\n	{ source: "Email", visitors: 90 },\n]\n\n<PieChart\n	label="Visitors by source"\n	data={sources}\n	index="source"\n	valueKey="visitors"\n	donut\n	centerLabel={{ value: "752", label: "Visitors" }}\n/>'
+      code: 'const sources = [\n	{ source: "Search", visitors: 275 },\n	{ source: "Direct", visitors: 200 },\n	{ source: "Social", visitors: 187 },\n	{ source: "Email", visitors: 90 },\n]\n\n<PieChart\n	label="Visitors by source"\n	data={sources}\n	index="source"\n	valueKey="visitors"\n	donut\n	centerLabel={{ value: 752, label: "Visitors" }}\n/>'
     },
     {
       label: "Labelled slices",

package/dist/components/radial-chart/radial-chart.js

@@ -4,7 +4,7 @@
 import { ChartFrame } from "../../lib/chart/chart-frame.js";
 import { ChartLegend } from "../../lib/chart/chart-legend.js";
 import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
-import { categoryText, chartFormatters } from "../../lib/chart/format.js";
+import { categoryText, centerValueText, chartFormatters } from "../../lib/chart/format.js";
 import { polar, strokeArcPath } from "../../lib/chart/geometry.js";
 import { drawTransition, morphTransition, pathStyle, stagger } from "../../lib/chart/motion.js";
 import {
@@ -159,8 +159,8 @@ function RadialChart({
               className: "[[data-reveal=out]_&]:opacity-0",
               style: { transition: morphTransition() },
               children: [
-                /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? centerLabel.label ? "-1.4em" : "0" : centerLabel.label ? "-0.1em" : "0.32em", className: "fill-foreground text-heading-2 tabular-nums", children: centerLabel.value }),
-                centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: "1.6em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
+                /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? centerLabel.label ? "-1.4em" : "0" : "0.35em", className: "fill-foreground text-heading-2 tabular-nums", children: centerValueText(centerLabel.value, locale) }),
+                centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? "1.6em" : "1.9em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
               ]
             }
           ) : null

package/dist/components/radial-chart/radial-chart.meta.js

@@ -107,8 +107,8 @@ var radialChartMeta = {
     },
     {
       name: "centerLabel",
-      type: "{ value: string; label?: string }",
-      description: "A value and caption in the middle."
+      type: "{ value: string | number; label?: string }",
+      description: 'A value and caption in the middle. On a full ring the value holds the centre and the caption hangs below it. A number is formatted for you: in full up to 9,999, compact from 10,000 (10.2K); pass a string for units ("7.2 GB", "72%").'
     },
     {
       name: "legend",

package/dist/components/settings-menu/settings-menu.js

@@ -1,10 +1,13 @@
 // src/components/settings-menu/settings-menu.tsx
+import { Children, isValidElement } from "react";
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { useTypeTier } from "../../lib/density.js";
 import {
   Menu,
   MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
   MenuSubmenu,
   MenuSubmenuTrigger,
   MenuTrigger
@@ -29,6 +32,12 @@ function SettingsMenu({
   ...props
 }) {
   const tier = useTypeTier();
+  const rows = Children.toArray(children);
+  const only = rows.length === 1 && isValidElement(rows[0]) && rows[0].type === SettingsRow ? rows[0] : null;
+  const content = only?.props.children && !only.props.disabled ? /* @__PURE__ */ jsxs(MenuGroup, { children: [
+    /* @__PURE__ */ jsx(MenuGroupLabel, { children: only.props.label }),
+    only.props.children
+  ] }) : children;
   return /* @__PURE__ */ jsxs(Menu, { ...props, children: [
     /* @__PURE__ */ jsxs(
       MenuTrigger,
@@ -49,7 +58,7 @@ function SettingsMenu({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(MenuContent, { side, align, className: "min-w-56", children })
+    /* @__PURE__ */ jsx(MenuContent, { side, align, className: "min-w-56", children: content })
   ] });
 }
 SettingsMenu.displayName = "SettingsMenu";

package/dist/components/settings-menu/settings-menu.meta.js

@@ -1,7 +1,7 @@
 // src/components/settings-menu/settings-menu.meta.ts
 var settingsMenuMeta = {
   name: "SettingsMenu",
-  summary: "A compact trigger that states the current settings, over a menu of rows that change them. Each row shows its own value and opens a submenu.",
+  summary: "A compact trigger that states the current settings, over a menu of rows that change them. Each row shows its own value and opens a submenu; with one setting, the menu opens straight to its options under the row's label.",
   status: "stable",
   keywords: [
     "settings",

package/dist/components/side-nav/side-nav.variants.js

@@ -20,9 +20,10 @@ var sideNavItemVariants = cva(
   }
 );
 var sideNavItemIconVariants = cva(
-  "grid shrink-0 place-items-center",
+  "flex shrink-0 items-center justify-center",
   {
-    variants: { size: { md: "size-5 text-xl", lg: "size-6 text-xl", rail: "size-6 text-2xl" } },
+    // md 20px icon in a 20px box; lg 20px in 24px; rail 24px in 24px.
+    variants: { size: { md: "size-[1em] text-xl", lg: "size-[1.2em] text-xl", rail: "size-[1em] text-2xl" } },
     defaultVariants: { size: "md" }
   }
 );

package/dist/components/sidebar/sidebar.js

@@ -72,7 +72,7 @@ function SidebarHeader({
     "div",
     {
       className: cn(
-        "flex h-16 items-center px-3",
+        "flex min-h-16 flex-wrap content-center items-center gap-y-2 px-3 has-[>:nth-child(2)]:py-3",
         // Collapsed, the brand mark centres on the same axis as the item icons.
         collapsed && "justify-center px-0",
         className

package/dist/components/sidebar/sidebar.meta.js

@@ -70,6 +70,11 @@ var sidebarMeta = {
     }
   ],
   subcomponents: [
+    {
+      name: "SidebarHeader",
+      type: "div props",
+      description: "The top of the rail, at least 64px tall. It holds SidebarBrand and may take a second row under it, such as a search field or a notifications button: give that row basis-full and the header grows to hold it instead of clipping."
+    },
     {
       name: "SidebarBrand",
       type: "{ mark: ReactNode; label: ReactNode; render?: useRender.RenderProp } + div props",

package/dist/components/switch/switch.js

@@ -16,7 +16,7 @@ function Switch({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(Base.Thumb, { className: "block h-5 w-5 rounded-full bg-(--switch-thumb) shadow-(--knob-shadow) motion-interactive ease-spring data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4 data-[checked]:bg-primary-foreground" })
+      children: /* @__PURE__ */ jsx(Base.Thumb, { className: "block h-5 w-5 rounded-full bg-(--switch-thumb) shadow-(--knob-shadow) motion-interactive ease-spring data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4 data-[checked]:bg-(--switch-thumb-on)" })
     }
   );
 }

package/dist/components/switch/switch.meta.js

@@ -1,7 +1,7 @@
 // src/components/switch/switch.meta.ts
 var switchMeta = {
   name: "Switch",
-  summary: "Binary on/off toggle for immediate-effect settings. Track fills with the primary tone when checked; the thumb slides on a spring-eased transform (mirrored in RTL).",
+  summary: "Binary on/off toggle for immediate-effect settings. Track fills with the primary tone when checked; the thumb slides on a spring-eased transform (mirrored in RTL). The thumb is white in both states, like every physical toggle, and turns dark only on a near-white track (a dark mode's light primary). Themes can set --theme-switch-thumb-on.",
   status: "stable",
   keywords: [
     "switch",
@@ -82,7 +82,7 @@ var switchMeta = {
       description: "Identifies the field when the enclosing form is submitted."
     }
   ],
-  tokensUsed: ["input", "primary", "primary-foreground", "ring"],
+  tokensUsed: ["input", "primary", "ring"],
   motion: [
     {
       slot: "arrival",

package/dist/components/table/table.js

@@ -51,7 +51,7 @@ function TableRow({ className, ...props }) {
     "tr",
     {
       className: cn(
-        "border-b border-border motion-interactive hover:bg-muted/50",
+        "border-b border-border motion-interactive [tbody>&:hover]:bg-muted/50",
         "*:motion-interactive data-[selected]:*:bg-muted data-[selected]:*:shadow-[1px_0_0_var(--muted)]",
         className
       ),

package/dist/components/toggle/toggle.js

@@ -22,7 +22,8 @@ function Toggle({ className, ...props }) {
         ),
         "data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
         "disabled:pointer-events-none disabled:opacity-50",
-        "[&_svg]:shrink-0",
+        // An icon beside a label is spaced like Button's; without it they touched.
+        "gap-(--control-gap) [&_svg]:shrink-0",
         className
       ),
       ...props