@stll/ui 0.59.1 → 0.61.0

package/dist/components/details-grid.js

@@ -1,26 +1,81 @@
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 //#region src/components/details-grid.tsx
-const DetailsGrid = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: "@container min-w-0 [contain-intrinsic-inline-size:20rem]",
-	"data-slot": "details-grid-container",
-	children: /* @__PURE__ */ jsx("dl", {
-		className: cn("grid grid-cols-[repeat(auto-fit,minmax(min(100%,20rem),1fr))] gap-x-6 gap-y-2 font-sans @min-[64rem]:grid-cols-3", className),
-		"data-slot": "details-grid",
-		...props
-	})
-});
-const DetailsItem = ({ label, children, span, className, ...props }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-start gap-x-4 text-xs", span === "wide" && "col-span-full", className),
-	"data-slot": "details-item",
-	...props,
-	children: [/* @__PURE__ */ jsx("dt", {
-		className: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase",
-		children: label
-	}), /* @__PURE__ */ jsx("dd", {
-		className: "text-foreground-strong-muted min-w-0 wrap-anywhere",
-		children
-	})]
+const DetailsShapeContext = createContext({
+	orientation: "horizontal",
+	variant: "sheet"
 });
+const LIST_CLASS_NAME = {
+	horizontal: "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-4 gap-y-1 text-sm",
+	vertical: "flex min-w-0 flex-col gap-2 text-sm"
+};
+const ITEM_CLASS_NAME = {
+	list: {
+		horizontal: "col-span-full grid grid-cols-subgrid items-center",
+		vertical: "flex min-w-0 flex-col gap-2"
+	},
+	sheet: {
+		horizontal: "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-start gap-x-4 text-xs",
+		vertical: "flex min-w-0 flex-col gap-1 text-xs"
+	}
+};
+const LABEL_CLASS_NAME = {
+	list: {
+		horizontal: "text-muted-foreground min-w-0",
+		vertical: "font-medium"
+	},
+	sheet: {
+		horizontal: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase",
+		vertical: "text-foreground-disabled min-w-0 font-medium tracking-wide wrap-anywhere uppercase"
+	}
+};
+const VALUE_CLASS_NAME = {
+	list: "min-w-0 wrap-anywhere",
+	sheet: "text-foreground-strong-muted min-w-0 wrap-anywhere"
+};
+const DetailsGrid = ({ className, orientation = "horizontal", variant = "sheet", ...props }) => {
+	const shape = {
+		orientation,
+		variant
+	};
+	if (variant === "list") return /* @__PURE__ */ jsx(DetailsShapeContext.Provider, {
+		value: shape,
+		children: /* @__PURE__ */ jsx("dl", {
+			className: cn(LIST_CLASS_NAME[orientation], className),
+			"data-orientation": orientation,
+			"data-slot": "details-grid",
+			"data-variant": variant,
+			...props
+		})
+	});
+	return /* @__PURE__ */ jsx(DetailsShapeContext.Provider, {
+		value: shape,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "@container min-w-0 [contain-intrinsic-inline-size:20rem]",
+			"data-slot": "details-grid-container",
+			children: /* @__PURE__ */ jsx("dl", {
+				className: cn("grid grid-cols-[repeat(auto-fit,minmax(min(100%,20rem),1fr))] gap-x-6 gap-y-2 font-sans @min-[64rem]:grid-cols-3", className),
+				"data-slot": "details-grid",
+				...props
+			})
+		})
+	});
+};
+const DetailsItem = ({ label, children, span, className, ...props }) => {
+	const { orientation, variant } = useContext(DetailsShapeContext);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(ITEM_CLASS_NAME[variant][orientation], variant === "sheet" && span === "wide" && "col-span-full", className),
+		"data-slot": "details-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: LABEL_CLASS_NAME[variant][orientation],
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: VALUE_CLASS_NAME[variant],
+			children
+		})]
+	});
+};
 //#endregion
 export { DetailsGrid, DetailsItem };

package/dist/components/field.d.ts

@@ -4,6 +4,12 @@ declare const Field: ({ className, ...props }: Field$1.Root.Props) => import("re
 declare const FieldLabel: ({ className, ...props }: Field$1.Label.Props) => import("react").JSX.Element;
 declare const FieldItem: ({ className, ...props }: Field$1.Item.Props) => import("react").JSX.Element;
 declare const FieldDescription: ({ className, ...props }: Field$1.Description.Props) => import("react").JSX.Element;
+/**
+ * The message for an invalid field. With no `match` it shows whatever error
+ * the field has, including one the `Form` received in `errors` from the
+ * server; with a validity key (`match="valueMissing"`) it shows only for that
+ * constraint, so each rule can be worded on its own. See `Form`.
+ */
 declare const FieldError: ({ className, ...props }: Field$1.Error.Props) => import("react").JSX.Element;
 declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldControlProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 declare const FieldValidity: import("react").FC<import("@base-ui/react").FieldValidityProps>;

package/dist/components/field.js

@@ -23,6 +23,12 @@ const FieldDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$
 	"data-slot": "field-description",
 	...props
 });
+/**
+* The message for an invalid field. With no `match` it shows whatever error
+* the field has, including one the `Form` received in `errors` from the
+* server; with a validity key (`match="valueMissing"`) it shows only for that
+* constraint, so each rule can be worded on its own. See `Form`.
+*/
 const FieldError = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Error, {
 	className: cn("text-destructive-foreground text-xs", className),
 	"data-slot": "field-error",

package/dist/components/form.d.ts

@@ -1,8 +1,48 @@
 import { Form as Form$1 } from "@base-ui/react/form";
+import { VariantProps } from "class-variance-authority";
 //#region src/components/form.d.ts
-declare const Form: ({ className, dirty, onDiscard, children, ...props }: Form$1.Props & {
+declare const formVariants: (props?: ({
+  density?: "compact" | "default" | "snug" | null | undefined;
+  layout?: "inline" | "stack" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Errors a server returned for the last submit, keyed by each `Field`'s
+ * `name`: one message or several.
+ */
+type FormErrors = NonNullable<Form$1.Props["errors"]>;
+type FormProps = Form$1.Props & VariantProps<typeof formVariants> & {
   dirty?: boolean;
   onDiscard?: (() => void) | undefined;
-}) => import("react").JSX.Element;
+};
+/**
+ * A form whose fields report their own errors.
+ *
+ * Validation, in the order a reader meets it:
+ *
+ * - **In the browser.** A `Field` reads its control's constraints
+ *   (`required`, `type`, `pattern`, `min`/`max`, a `validate` function) and
+ *   shows a `FieldError` for the ones that fail. `validationMode` stays
+ *   Base UI's `onSubmit`: nothing is flagged while a person tabs through an
+ *   empty form, the first submit marks every invalid field at once, and from
+ *   then on each field re-validates as it changes. `onBlur` would flag a
+ *   required field the moment focus passes it, before anyone tried to submit;
+ *   pass it only where checking a value as soon as it is left is the point
+ *   (an availability check, a long identifier).
+ * - **From the server.** Pass what the server rejected as `errors`, keyed by
+ *   field `name` (`{ email: "Already invited" }`). The field turns invalid,
+ *   its control gets `aria-invalid`, and its `FieldError` shows the message.
+ *   Base UI drops a field's server error as soon as its value changes, so a
+ *   correction clears the message without a round trip. Keep the errors in
+ *   state and replace them on the next submit.
+ *
+ * In a `FieldError`, leave `match` unset to show whichever error the field
+ * has, the server's included; `match="valueMissing"` (or another validity
+ * key) words one constraint in the product's voice; `match` set to `true`
+ * hands visibility to the caller.
+ *
+ * `dirty` and `onDiscard` register the form with an enclosing `Dialog`'s
+ * unsaved-changes guard.
+ */
+declare const Form: ({ className, density, layout, dirty, onDiscard, children, ...props }: FormProps) => import("react").JSX.Element;
 //#endregion
-export { Form };
+export { Form, type FormErrors, type FormProps, formVariants };

package/dist/components/form.js

@@ -2,10 +2,60 @@
 import { cn } from "../lib/utils.js";
 import { DialogFormState } from "./dialog-form-state.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { Form as Form$1 } from "@base-ui/react/form";
 //#region src/components/form.tsx
-const Form = ({ className, dirty = false, onDiscard, children, ...props }) => /* @__PURE__ */ jsxs(Form$1, {
-	className: cn("flex w-full flex-col gap-4", className),
+const formVariants = cva("flex w-full", {
+	defaultVariants: {
+		density: "default",
+		layout: "stack"
+	},
+	variants: {
+		density: {
+			default: "gap-4",
+			snug: "gap-3",
+			compact: "gap-2"
+		},
+		layout: {
+			stack: "flex-col",
+			inline: "flex-row items-center"
+		}
+	}
+});
+/**
+* A form whose fields report their own errors.
+*
+* Validation, in the order a reader meets it:
+*
+* - **In the browser.** A `Field` reads its control's constraints
+*   (`required`, `type`, `pattern`, `min`/`max`, a `validate` function) and
+*   shows a `FieldError` for the ones that fail. `validationMode` stays
+*   Base UI's `onSubmit`: nothing is flagged while a person tabs through an
+*   empty form, the first submit marks every invalid field at once, and from
+*   then on each field re-validates as it changes. `onBlur` would flag a
+*   required field the moment focus passes it, before anyone tried to submit;
+*   pass it only where checking a value as soon as it is left is the point
+*   (an availability check, a long identifier).
+* - **From the server.** Pass what the server rejected as `errors`, keyed by
+*   field `name` (`{ email: "Already invited" }`). The field turns invalid,
+*   its control gets `aria-invalid`, and its `FieldError` shows the message.
+*   Base UI drops a field's server error as soon as its value changes, so a
+*   correction clears the message without a round trip. Keep the errors in
+*   state and replace them on the next submit.
+*
+* In a `FieldError`, leave `match` unset to show whichever error the field
+* has, the server's included; `match="valueMissing"` (or another validity
+* key) words one constraint in the product's voice; `match` set to `true`
+* hands visibility to the caller.
+*
+* `dirty` and `onDiscard` register the form with an enclosing `Dialog`'s
+* unsaved-changes guard.
+*/
+const Form = ({ className, density, layout, dirty = false, onDiscard, children, ...props }) => /* @__PURE__ */ jsxs(Form$1, {
+	className: cn(formVariants({
+		density,
+		layout
+	}), className),
 	"data-slot": "form",
 	...props,
 	children: [/* @__PURE__ */ jsx(DialogFormState, {
@@ -14,4 +64,4 @@ const Form = ({ className, dirty = false, onDiscard, children, ...props }) => /*
 	}), children]
 });
 //#endregion
-export { Form };
+export { Form, formVariants };

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

@@ -16,4 +16,13 @@ export declare const INPUT_SIZE_CLASS_NAMES: {
   readonly default: undefined;
   readonly lg: "min-h-9.5 leading-9.5 sm:min-h-8.5 sm:leading-8.5";
 };
+/**
+ * A field edited where it is read: an option's name in a list, a page
+ * heading, the summary under it. No box until focused, the type, leading and
+ * colour of the text around it, so the row keeps the height of its text; a
+ * focus ring marks it while editing. A slim inline inset gives the ring and
+ * the caret room, and a matching negative margin keeps the text in line with
+ * its neighbours.
+ */
+export declare const INLINE_FIELD_CLASS_NAME = "placeholder:text-foreground-placeholder focus-visible:ring-ring/30 -mx-1 min-h-0 w-full min-w-0 rounded-sm bg-transparent px-1 py-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit outline-none focus-visible:ring-2";
 //#endregion

package/dist/components/input-control.js

@@ -17,5 +17,14 @@ const INPUT_SIZE_CLASS_NAMES = {
 	[CONTROL_SIZE.default]: void 0,
 	[CONTROL_SIZE.lg]: "min-h-9.5 leading-9.5 sm:min-h-8.5 sm:leading-8.5"
 };
+/**
+* A field edited where it is read: an option's name in a list, a page
+* heading, the summary under it. No box until focused, the type, leading and
+* colour of the text around it, so the row keeps the height of its text; a
+* focus ring marks it while editing. A slim inline inset gives the ring and
+* the caret room, and a matching negative margin keeps the text in line with
+* its neighbours.
+*/
+const INLINE_FIELD_CLASS_NAME = "placeholder:text-foreground-placeholder focus-visible:ring-ring/30 -mx-1 min-h-0 w-full min-w-0 rounded-sm bg-transparent px-1 py-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit outline-none focus-visible:ring-2";
 //#endregion
-export { INPUT_CONTROL_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES };
+export { INLINE_FIELD_CLASS_NAME, INPUT_CONTROL_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES };

package/dist/components/input.d.ts

@@ -7,8 +7,14 @@ type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>,
   size?: ControlSize | number;
   style?: React$1.CSSProperties;
   unstyled?: boolean;
+  /**
+   * A borderless field in a line of text: it edits a value where it is read,
+   * with no box until focused and the parent's type, leading and colour. See
+   * `INLINE_FIELD_CLASS_NAME`.
+   */
+  inline?: boolean;
   nativeInput?: boolean;
 };
-declare const Input: ({ className, size, unstyled, nativeInput, dir, onChange, ...props }: InputProps) => React$1.JSX.Element;
+declare const Input: ({ className, size, unstyled, inline, nativeInput, dir, onChange, ...props }: InputProps) => React$1.JSX.Element;
 //#endregion
 export { Input, type InputProps };

package/dist/components/input.js

@@ -3,11 +3,11 @@ import { SearchIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
 import { isStructuredInputType, useContentDir } from "../hooks/use-content-dir.js";
-import { INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES } from "./input-control.js";
+import { INLINE_FIELD_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES } from "./input-control.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/components/input.tsx
-const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, nativeInput = false, dir, onChange, ...props }) => {
+const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, inline = false, nativeInput = false, dir, onChange, ...props }) => {
 	const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
 	const contentDir = useContentDir({
 		dir: dir ?? (isStructuredInputType(props.type) ? "ltr" : void 0),
@@ -18,9 +18,9 @@ const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, nativ
 		contentDir.trackValue(event.currentTarget.value);
 		onChange?.(event);
 	};
-	const inputClassName = cn(INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES[controlSize], unstyled && "px-0", props.type === "search" && "ps-8 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none");
+	const inputClassName = cn(inline ? INLINE_FIELD_CLASS_NAME : INPUT_ELEMENT_CLASS_NAME, !inline && INPUT_SIZE_CLASS_NAMES[controlSize], unstyled && !inline && "px-0", props.type === "search" && "ps-8 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none");
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:min-h-11", className) || void 0,
+		className: cn(inline ? "relative inline-flex w-full" : !unstyled && "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:min-h-11", className) || void 0,
 		"data-size": size,
 		"data-slot": "input-control",
 		dir: contentDir.dir,

package/dist/components/label.d.ts

@@ -1,5 +1,27 @@
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/label.d.ts
-declare function Label({ className, render, ...props }: useRender.ComponentProps<"label">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * - `default`: the caption above or beside a control.
+ * - `choice`: one row of a list of choices, wrapping its radio or checkbox so
+ *   the whole row picks it; it highlights on hover and rings while the
+ *   control inside has keyboard focus.
+ * - `choice-card`: a bordered card wrapping its radio, for choices that carry
+ *   a description; the chosen card takes the primary border.
+ * - `muted`: a quiet caption in small type, for a filter bar or a dense side
+ *   form where the controls, not their names, carry the eye.
+ *
+ * The choice variants dim and stop inviting a click while their control is
+ * disabled.
+ */
+declare const LABEL_VARIANT_CLASS_NAME: {
+  readonly default: "text-foreground inline-flex items-center gap-2 text-base/4.5 font-medium sm:text-sm/4";
+  readonly choice: "hover:bg-muted/60 has-focus-visible:ring-ring flex min-h-11 cursor-pointer items-center gap-2 rounded-sm px-1 py-1.5 text-sm has-focus-visible:ring-2 has-disabled:cursor-not-allowed has-disabled:opacity-64";
+  readonly "choice-card": "has-checked:border-primary has-checked:bg-muted/50 flex min-h-11 cursor-pointer items-start gap-3 rounded-md border p-3 has-disabled:cursor-not-allowed has-disabled:opacity-50";
+  readonly muted: "text-muted-foreground inline-flex items-center gap-2 text-xs/4 font-medium";
+};
+type LabelVariant = keyof typeof LABEL_VARIANT_CLASS_NAME;
+declare function Label({ className, render, variant, ...props }: useRender.ComponentProps<"label"> & {
+  variant?: LabelVariant;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { Label };
+export { Label, type LabelVariant };

package/dist/components/label.js

@@ -3,9 +3,28 @@ import { cn } from "../lib/utils.js";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/label.tsx
-function Label({ className, render, ...props }) {
+/**
+* - `default`: the caption above or beside a control.
+* - `choice`: one row of a list of choices, wrapping its radio or checkbox so
+*   the whole row picks it; it highlights on hover and rings while the
+*   control inside has keyboard focus.
+* - `choice-card`: a bordered card wrapping its radio, for choices that carry
+*   a description; the chosen card takes the primary border.
+* - `muted`: a quiet caption in small type, for a filter bar or a dense side
+*   form where the controls, not their names, carry the eye.
+*
+* The choice variants dim and stop inviting a click while their control is
+* disabled.
+*/
+const LABEL_VARIANT_CLASS_NAME = {
+	default: "text-foreground inline-flex items-center gap-2 text-base/4.5 font-medium sm:text-sm/4",
+	choice: "hover:bg-muted/60 has-focus-visible:ring-ring flex min-h-11 cursor-pointer items-center gap-2 rounded-sm px-1 py-1.5 text-sm has-focus-visible:ring-2 has-disabled:cursor-not-allowed has-disabled:opacity-64",
+	"choice-card": "has-checked:border-primary has-checked:bg-muted/50 flex min-h-11 cursor-pointer items-start gap-3 rounded-md border p-3 has-disabled:cursor-not-allowed has-disabled:opacity-50",
+	muted: "text-muted-foreground inline-flex items-center gap-2 text-xs/4 font-medium"
+};
+function Label({ className, render, variant = "default", ...props }) {
 	const defaultProps = {
-		className: cn("text-foreground inline-flex items-center gap-2 text-base/4.5 font-medium sm:text-sm/4", className),
+		className: cn(LABEL_VARIANT_CLASS_NAME[variant], className),
 		"data-slot": "label"
 	};
 	return useRender({

package/dist/components/number-input.d.ts

@@ -1,17 +1,24 @@
 import { ControlSize } from "../lib/control-size.js";
 import { NumberField } from "@base-ui/react/number-field";
+import { ReactNode } from "react";
 //#region src/components/number-input.d.ts
 type NumberInputProps = Omit<NumberField.Root.Props, "children" | "className" | "render"> & {
   className?: string;
   inputClassName?: string;
-  inputProps?: Omit<NumberField.Input.Props, "className" | "defaultValue" | "id" | "onChange" | "type" | "value">;
+  inputProps?: Omit<NumberField.Input.Props, "className" | "defaultValue" | "id" | "onChange" | "render" | "type" | "value">;
   size?: ControlSize;
+  /**
+   * The unit the value is in ("pt", "%"), shown muted at the end of the
+   * control so the number reads with its unit while the typed text stays a
+   * bare number.
+   */
+  suffix?: ReactNode;
 };
 /**
  * A numeric control that keeps the user's editable text separate from its
  * canonical numeric value. Parsed changes are reported through `onValueChange`;
  * formatting and clamping happen only at Base UI's commit boundaries.
  */
-declare const NumberInput: ({ className, inputClassName, inputProps, dir, size, ...props }: NumberInputProps) => import("react").JSX.Element;
+declare const NumberInput: ({ className, inputClassName, inputProps, dir, size, suffix, ...props }: NumberInputProps) => import("react").JSX.Element;
 //#endregion
 export { NumberInput, type NumberInputProps };

package/dist/components/number-input.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
 import { INPUT_CONTROL_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES } from "./input-control.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField } from "@base-ui/react/number-field";
 //#region src/components/number-input.tsx
 /**
@@ -10,18 +10,30 @@ import { NumberField } from "@base-ui/react/number-field";
 * canonical numeric value. Parsed changes are reported through `onValueChange`;
 * formatting and clamping happen only at Base UI's commit boundaries.
 */
-const NumberInput = ({ className, inputClassName, inputProps, dir = "ltr", size = CONTROL_SIZE.default, ...props }) => /* @__PURE__ */ jsx(NumberField.Root, {
+const NumberInput = ({ className, inputClassName, inputProps, dir = "ltr", size = CONTROL_SIZE.default, suffix, ...props }) => /* @__PURE__ */ jsxs(NumberField.Root, {
 	...props,
 	className: cn(INPUT_CONTROL_CLASS_NAME, className),
 	"data-size": size,
 	"data-slot": "number-input-control",
 	dir,
 	render: void 0,
-	children: /* @__PURE__ */ jsx(NumberField.Input, {
+	children: [/* @__PURE__ */ jsx(NumberField.Input, {
 		...inputProps,
-		className: cn(INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES[size], inputClassName),
-		"data-slot": "number-input"
-	})
+		className: cn(INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES[size], "tabular-nums", suffix !== void 0 && "pe-1", inputClassName),
+		"data-slot": "number-input",
+		render: (inputElementProps, state) => /* @__PURE__ */ jsx("input", {
+			...inputElementProps,
+			"aria-valuemax": props.max,
+			"aria-valuemin": props.min,
+			"aria-valuenow": state.value ?? void 0,
+			dir,
+			role: "spinbutton"
+		})
+	}), suffix === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground pointer-events-none flex shrink-0 items-center pe-2.5 text-xs",
+		"data-slot": "number-input-suffix",
+		children: suffix
+	})]
 });
 //#endregion
 export { NumberInput };

package/dist/components/search-field.js

@@ -35,6 +35,7 @@ const SearchField = ({ value, onValueChange, clearLabel, groupClassName, classNa
 		align: "inline-end",
 		children: /* @__PURE__ */ jsx(Button, {
 			"aria-label": clearLabel,
+			disabled: props.disabled,
 			onClick: () => {
 				onValueChange("");
 			},

package/dist/components/segmented-icon-toggle.d.ts

@@ -16,7 +16,8 @@ type SegmentedIconToggleProps<T extends string> = {
 };
 /** Compact segmented control of icon buttons (e.g. table row wrap, list
  * density). One shared shell so every density/mode switch looks and behaves
- * the same across the app. */
+ * the same across the app. A `ToggleGroup` of icon items that always holds
+ * one value: clicking the chosen option keeps it. */
 export declare const SegmentedIconToggle: <T extends string>({ value, options, onChange, size }: SegmentedIconToggleProps<T>) => import("react").JSX.Element;
 //#endregion
 export {};

package/dist/components/segmented-icon-toggle.js

@@ -1,31 +1,30 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
-import { Button } from "./button.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/segmented-icon-toggle.tsx
 /** Compact segmented control of icon buttons (e.g. table row wrap, list
 * density). One shared shell so every density/mode switch looks and behaves
-* the same across the app. */
-const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) => /* @__PURE__ */ jsx("div", {
-	className: cn("border-border/70 bg-muted/30 inline-flex shrink-0 items-center overflow-hidden rounded-md border p-0.5", size === "touch" ? "h-7 [@media(any-pointer:coarse)]:h-12" : "h-7"),
+* the same across the app. A `ToggleGroup` of icon items that always holds
+* one value: clicking the chosen option keeps it. */
+const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) => /* @__PURE__ */ jsx(ToggleGroup, {
+	className: cn("rounded-md", size === "touch" ? "h-7 [@media(any-pointer:coarse)]:h-12" : "h-7"),
 	"data-slot": "segmented-icon-toggle",
+	onValueChange: (next) => {
+		const [chosen] = next;
+		if (chosen !== void 0 && chosen !== value) onChange(chosen);
+	},
+	value: [value],
 	children: options.map((option) => {
 		const Icon = option.icon;
-		const isActive = value === option.value;
-		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-			render: /* @__PURE__ */ jsx(Button, {
-				"aria-label": option.label,
-				"aria-pressed": isActive,
-				className: cn("text-muted-foreground h-6 min-h-0 w-7 rounded-[4px] p-0", size === "touch" && "[@media(any-pointer:coarse)]:h-11 [@media(any-pointer:coarse)]:min-h-11 [@media(any-pointer:coarse)]:w-11", isActive && "bg-muted text-foreground ring-border/80 hover:bg-muted hover:text-foreground shadow-xs ring-1"),
-				"data-control-value": option.value,
-				onClick: () => onChange(option.value),
-				size: "icon-xs",
-				type: "button",
-				variant: "ghost"
-			}),
+		return /* @__PURE__ */ jsx(ToggleGroupItem, {
+			"aria-label": option.label,
+			className: cn("h-6 w-7 rounded-[4px] sm:h-6", size === "touch" && "[@media(any-pointer:coarse)]:h-11 [@media(any-pointer:coarse)]:w-11"),
+			"data-control-value": option.value,
+			size: "icon-xs",
+			value: option.value,
 			children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
-		}), /* @__PURE__ */ jsx(TooltipPopup, { children: option.label })] }, option.value);
+		}, option.value);
 	})
 });
 //#endregion

package/dist/components/switch.d.ts

@@ -1,5 +1,24 @@
+import * as React$1 from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/components/switch.d.ts
-declare const Switch: ({ className, ...props }: Switch$1.Root.Props) => import("react").JSX.Element;
+/**
+ * `default` is a setting's own control; `sm` sits in a dense row or a menu
+ * beside small type.
+ */
+type SwitchSize = "sm" | "default";
+type SwitchProps = Switch$1.Root.Props & {
+  size?: SwitchSize | undefined;
+};
+declare const Switch: ({ className, size, ...props }: SwitchProps) => React$1.JSX.Element;
+/**
+ * A setting row: its label and an optional description at the start, the
+ * switch at the end. The whole row is the label, so a click anywhere on it
+ * flips the switch, and the row is at least 44px tall for touch. The
+ * description is linked to the switch, so it is read after the name.
+ */
+declare const SwitchField: ({ className, description, label, size, ...props }: SwitchProps & {
+  label: React$1.ReactNode;
+  description?: React$1.ReactNode;
+}) => React$1.JSX.Element;
 //#endregion
-export { Switch };
+export { Switch, SwitchField, type SwitchProps, type SwitchSize };

package/dist/components/switch.js

@@ -1,16 +1,55 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/components/switch.tsx
-const Switch = ({ className, ...props }) => /* @__PURE__ */ jsx(Switch$1.Root, {
-	className: cn("focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input relative inline-flex h-5 w-9 shrink-0 items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64", className),
+const SWITCH_ROOT_SIZE_CLASS_NAME = {
+	default: "h-5 w-9",
+	sm: "h-4 w-7"
+};
+const SWITCH_THUMB_SIZE_CLASS_NAME = {
+	default: "size-4 ltr:data-checked:translate-x-4.5 ltr:data-unchecked:translate-x-0.5 rtl:data-checked:-translate-x-4.5 rtl:data-unchecked:-translate-x-0.5",
+	sm: "size-3 ltr:data-checked:translate-x-3.5 ltr:data-unchecked:translate-x-0.5 rtl:data-checked:-translate-x-3.5 rtl:data-unchecked:-translate-x-0.5"
+};
+const Switch = ({ className, size = "default", ...props }) => /* @__PURE__ */ jsx(Switch$1.Root, {
+	className: cn("focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input relative inline-flex shrink-0 items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64", SWITCH_ROOT_SIZE_CLASS_NAME[size], className),
+	"data-size": size,
 	"data-slot": "switch",
 	...props,
 	children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
-		className: "bg-background pointer-events-none block size-4 rounded-full shadow-xs transition-transform ltr:data-checked:translate-x-4.5 ltr:data-unchecked:translate-x-0.5 rtl:data-checked:-translate-x-4.5 rtl:data-unchecked:-translate-x-0.5",
+		className: cn("bg-background pointer-events-none block rounded-full shadow-xs transition-transform", SWITCH_THUMB_SIZE_CLASS_NAME[size]),
 		"data-slot": "switch-thumb"
 	})
 });
+/**
+* A setting row: its label and an optional description at the start, the
+* switch at the end. The whole row is the label, so a click anywhere on it
+* flips the switch, and the row is at least 44px tall for touch. The
+* description is linked to the switch, so it is read after the name.
+*/
+const SwitchField = ({ className, description, label, size, ...props }) => {
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("flex min-h-11 cursor-pointer items-center justify-between gap-4 py-2 has-data-disabled:cursor-not-allowed", className),
+		"data-slot": "switch-field",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5 in-[label:has([data-disabled])]:opacity-64",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-foreground text-sm font-medium",
+				children: label
+			}), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				"data-slot": "switch-field-description",
+				id: descriptionId,
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx(Switch, {
+			"aria-describedby": description === void 0 ? void 0 : descriptionId,
+			size,
+			...props
+		})]
+	});
+};
 //#endregion
-export { Switch };
+export { Switch, SwitchField };