@stll/ui 0.59.0 → 0.60.0

package/dist/components/combobox.js

@@ -5,6 +5,7 @@ import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { ScrollArea } from "./scroll-area.js";
 import { containedHandler } from "../hooks/use-contained-handler.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
+import "../lib/field-trigger.js";
 import { Input } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
@@ -94,8 +95,8 @@ const COMBOBOX_ACTION_SIZE_CLASS_NAMES = {
 	[CONTROL_SIZE.default]: "end-0.5",
 	[CONTROL_SIZE.lg]: "end-0.5"
 };
-const ComboboxTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
-	className,
+const ComboboxTrigger = ({ className, variant = "plain", ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+	className: cn(variant === "field" && "border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", className),
 	"data-slot": "combobox-trigger",
 	...props
 });

package/dist/components/date-picker-popover.d.ts

@@ -39,6 +39,8 @@ type DatePickerPopoverProps = {
    *  the control still has height; pass a call-to-action ("Select date…") to
    *  make the empty state self-explanatory. */
   placeholderLabel?: string;
+  /** Replaces the formatted date in the trigger, as a week range does. */
+  triggerLabel?: string;
   clearLabel?: string;
   defaultOpen?: boolean;
   open?: boolean;

package/dist/components/date-picker-popover.js

@@ -3,8 +3,8 @@ import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
-import { Input } from "./input.js";
 import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
+import { Input } from "./input.js";
 import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
 import { DATE_PICKER_MODE, formatDateTimeValue, getHourOptions, getMinuteOptions, getTimeFieldNames, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate, splitPickerTime } from "./date-picker-popover.logic.js";
 import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
@@ -252,8 +252,10 @@ const PICKER_SIZE_CLASS_NAMES = {
 		cell: "pointer-coarse:min-h-11 pointer-coarse:text-sm"
 	}
 };
+/** The trigger keeps its height with an em dash when nothing has a label. */
+const firstLabel = (...labels) => labels.find((label) => label !== null && label !== void 0) ?? "—";
 const DatePickerPopoverContent = (props) => {
-	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, open: controlledOpen, triggerRef, focusTriggerOnOpen = false, dateInputLabel, outOfRangeLabel, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
+	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, triggerLabel, clearLabel = "Clear date", defaultOpen = false, open: controlledOpen, triggerRef, focusTriggerOnOpen = false, dateInputLabel, outOfRangeLabel, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
 	const selection = resolveSelection(mode, rawValue);
 	const value = selection.date;
 	const labels = resolvePopupLabels(props);
@@ -300,7 +302,7 @@ const DatePickerPopoverContent = (props) => {
 		isDayDisabled,
 		onChange
 	});
-	const displayLabel = formatSelection(locale, selection) ?? placeholderLabel ?? "—";
+	const displayLabel = firstLabel(triggerLabel, formatSelection(locale, selection), placeholderLabel);
 	const selectDay = (date) => {
 		switch (selection.mode) {
 			case DATE_PICKER_MODE.date:

package/dist/components/details-grid.d.ts

@@ -1,10 +1,29 @@
 import * as React$1 from "react";
 //#region src/components/details-grid.d.ts
-declare const DetailsGrid: ({ className, ...props }: React$1.ComponentProps<"dl">) => React$1.JSX.Element;
+/**
+ * - `sheet`: a fact sheet; small uppercase labels, up to three pairs per row
+ *   as the container widens.
+ * - `list`: one pair per row in body type with a muted label, for a short
+ *   list inside a card or dialog (who is signed in, which organization).
+ */
+type DetailsVariant = "sheet" | "list";
+/**
+ * - `horizontal`: each label beside its value. In a `list`, every label
+ *   shares one column sized to the longest.
+ * - `vertical`: each label above its value, for values too long to share a
+ *   row (a server address, a list of origins).
+ */
+type DetailsOrientation = "horizontal" | "vertical";
+type DetailsGridProps = React$1.ComponentProps<"dl"> & {
+  orientation?: DetailsOrientation;
+  variant?: DetailsVariant;
+};
+declare const DetailsGrid: ({ className, orientation, variant, ...props }: DetailsGridProps) => React$1.JSX.Element;
 type DetailsItemProps = React$1.ComponentProps<"div"> & {
   label: React$1.ReactNode;
+  /** `wide` spans every pair column of a `sheet`. */
   span?: "wide";
 };
 declare const DetailsItem: ({ label, children, span, className, ...props }: DetailsItemProps) => React$1.JSX.Element;
 //#endregion
-export { DetailsGrid, DetailsItem };
+export { DetailsGrid, DetailsItem, type DetailsOrientation, type DetailsVariant };

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/form.d.ts

@@ -1,8 +1,14 @@
 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;
+type FormProps = Form$1.Props & VariantProps<typeof formVariants> & {
   dirty?: boolean;
   onDiscard?: (() => void) | undefined;
-}) => import("react").JSX.Element;
+};
+declare const Form: ({ className, density, layout, dirty, onDiscard, children, ...props }: FormProps) => import("react").JSX.Element;
 //#endregion
-export { Form };
+export { Form, type FormProps, formVariants };

package/dist/components/form.js

@@ -2,10 +2,31 @@
 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"
+		}
+	}
+});
+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 +35,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/textarea.d.ts

@@ -4,7 +4,20 @@ import { ControlSize } from "../lib/control-size.js";
 type TextareaProps = React$1.ComponentProps<"textarea"> & {
   size?: ControlSize | number;
   unstyled?: boolean;
+  /**
+   * A borderless field in a line of text: it edits text where it is read
+   * (the summary under a heading), with no box until focused, the parent's
+   * type and colour, no floor height, and grows with its content. See
+   * `INLINE_FIELD_CLASS_NAME`.
+   */
+  inline?: boolean;
+  /**
+   * `content` (default) grows with what is typed. `fixed` keeps the height
+   * its `rows` give and scrolls, with no resize grip: an editor inside a
+   * table cell or a row must not push its neighbours around.
+   */
+  fieldSizing?: "content" | "fixed";
 };
-declare const Textarea: ({ className, size, unstyled, dir, onChange, ...props }: TextareaProps) => React$1.JSX.Element;
+declare const Textarea: ({ className, size, unstyled, inline, fieldSizing, dir, onChange, ...props }: TextareaProps) => React$1.JSX.Element;
 //#endregion
 export { Textarea, type TextareaProps };

package/dist/components/textarea.js

@@ -2,11 +2,12 @@
 import { cn } from "../lib/utils.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
 import { useContentDir } from "../hooks/use-content-dir.js";
+import { INLINE_FIELD_CLASS_NAME } from "./input-control.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Field } from "@base-ui/react/field";
 //#region src/components/textarea.tsx
-const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, dir, onChange, ...props }) => {
+const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, inline = false, fieldSizing = "content", dir, onChange, ...props }) => {
 	const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
 	const contentDir = useContentDir({
 		dir,
@@ -18,11 +19,11 @@ const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, di
 		onChange?.(event);
 	};
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 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-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:has-not-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:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
+		className: cn(inline && "relative inline-flex w-full", !unstyled && !inline && "border-input bg-background text-foreground ring-ring/24 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-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:has-not-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:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
 		"data-size": size,
 		"data-slot": "textarea-control",
 		children: /* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
-			className: cn("field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5", TEXTAREA_SIZE_CLASS_NAMES[controlSize]),
+			className: cn(inline ? cn(INLINE_FIELD_CLASS_NAME, "resize-none") : cn("w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none", TEXTAREA_SIZE_CLASS_NAMES[controlSize], fieldSizing === "content" && TEXTAREA_FLOOR_CLASS_NAMES[controlSize]), fieldSizing === "content" ? "field-sizing-content" : "field-sizing-fixed resize-none"),
 			"data-slot": "textarea",
 			...mergeProps(defaultProps, props, { onChange: handleChange }),
 			dir: contentDir.dir
@@ -30,9 +31,14 @@ const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, di
 	});
 };
 const TEXTAREA_SIZE_CLASS_NAMES = {
-	[CONTROL_SIZE.sm]: "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
+	[CONTROL_SIZE.sm]: "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]",
 	[CONTROL_SIZE.default]: void 0,
-	[CONTROL_SIZE.lg]: "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5"
+	[CONTROL_SIZE.lg]: "py-[calc(--spacing(2)-1px)]"
+};
+const TEXTAREA_FLOOR_CLASS_NAMES = {
+	[CONTROL_SIZE.sm]: "min-h-16.5 max-sm:min-h-19.5",
+	[CONTROL_SIZE.default]: "min-h-17.5 max-sm:min-h-20.5",
+	[CONTROL_SIZE.lg]: "min-h-18.5 max-sm:min-h-21.5"
 };
 //#endregion
 export { Textarea };