@parallelworks/ui 0.46.0 → 0.48.0

package/README.md

@@ -32,9 +32,14 @@ Each need has one component. Reach for it before styling markup by hand.
 | Work under way | `Loader`; `Skeleton` in a `LoadingRegion` for the shape of content still loading |
 | Nothing to show yet, or nothing matches | `EmptyState` |
 | A text field | `Input`, `Textarea`, or a control framed by `Field`, whose `actions` hold buttons that act on it |
-| A number, a date | `NumberInput`, `DatePicker` |
+| A number, a date, a color | `NumberInput`, `DatePicker`, `ColorInput` |
+| A one-time code, such as a sign-in check | `OneTimeCodeInput` |
+| A labeled value nobody edits, among fields | `FieldValue` in a `Field`; `DescriptionList` for a set of them alone |
+| An error beside a control outside a `Field` | `ErrorText` |
+| A dense field in a toolbar or a table cell | any field control with `size="sm"`; a width in `className` wins, and `cx` merges classes the same way |
 | On or off | `Switch`; `Checkbox` in a list of things to tick, several of which may be on |
 | One of a few choices, all shown | `RadioGroup` in a form; `SegmentedControl` in a toolbar, or as a field's control in a `Field group` |
+| Narrowing a list by values, such as statuses: several at once, or one or none | `ToggleGroup` |
 | Narrowing what is shown by typing | `SearchInput`; `ListSearchControl` on a list page's toolbar |
 | A value from a list | `Select`, or `Combobox` when the list needs filtering |
 | Free text with suggestions, or tags | `Autocomplete`; `Combobox` with `multiple creatable` |
@@ -78,6 +83,12 @@ Some pairs look alike and are split on purpose:
   thing, each with its own panel or route. A `SegmentedControl` sets a value,
   such as a time range, that changes what one view shows. `Tabs` with
   `variant="segmented"` look the same, so the choice rests on what pressing does.
+- **SegmentedControl or ToggleGroup.** A `SegmentedControl` holds a setting
+  that always has exactly one value, such as a time range or which view of the
+  data to show. A `ToggleGroup` filters a list by values and may be off: its
+  options are pressed independently, or one or none with `multiple={false}`,
+  and `all` leads with an All option for "no filter". Each option can carry a
+  status dot or icon and a count.
 - **SearchInput or ListSearchControl.** A `SearchInput` is a box that is
   always shown and narrows what sits beside it, such as a panel's rows or a
   log's lines. `ListSearchControl` belongs to a list page's toolbar: it folds to
@@ -354,7 +365,11 @@ meaning across the apps.
   instance. `RemoveIcon` takes an item out of a list, while `CloseIcon` closes,
   dismisses or clears; they share the X glyph, the convention for both.
   `DestroyIcon` tears down what was provisioned, while `TrashIcon` deletes a
-  record.
+  record. `RemoveUserIcon` takes someone out of a group or project, while
+  `DisableUserIcon` turns off their account. `ChangesRequestedIcon` asks for
+  changes to something sent, while `FlaggedIcon` marks an item for attention.
+  `PendingIcon` is a requirement not met yet and `NotRunningIcon` a run not
+  started; they share the empty circle, so keep them out of the same list.
 - **Adding an icon:** pick the [Lucide glyph](https://lucide.dev/icons) and add
   `export const NameIcon = /* @__PURE__ */ icon(Glyph)` to `src/icons.tsx`,
   named for what it means rather than what it shows. Reuse an existing name

package/dist/ai/components/ChatInput.js

@@ -261,7 +261,7 @@ var ChatInput = forwardRef(function ChatInput({ onSend, disabled = false, placeh
 										"aria-label": inputLabel ?? effectivePlaceholder,
 										disabled,
 										rows: 1,
-										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:theme-muted-text", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
+										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:text-(--theme-placeholder)", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
 									})
 								}), !toolbar && action]
 							}),

package/dist/components/ColorInput.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import { type FieldBoxSize } from './fieldBox.js';
+export interface ColorInputProps {
+    /** A CSS color the theme reads: a hex, `oklch()` or `color(display-p3 …)`. */
+    value: string;
+    /** Called with each color that parses, as typed or as picked: a picked one is a hex. */
+    onValueChange: (color: string) => void;
+    /** Without a label the row stands alone; name it with `aria-label`. */
+    label?: ReactNode;
+    /** Beside the label and outside it, so it stays out of the field's name. */
+    hint?: ReactNode;
+    /** Help under the field. */
+    description?: ReactNode;
+    error?: ReactNode;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
+    /** The hex field's id, which a label names. */
+    id?: string | undefined;
+    /** Submits the color under this name with a form. */
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    'aria-required'?: boolean | undefined;
+    /** On the row that holds the swatch and the hex field: its width or margin. */
+    className?: string | undefined;
+}
+/**
+ * A color as a swatch that opens the system picker, beside a field its hex can be typed or pasted
+ * in. A half-typed color stays in the field, marked invalid, until it parses; leaving the field
+ * puts back the last color that did.
+ */
+export declare function ColorInput({ value, onValueChange, label, hint, description, error, size, id, name, disabled, required, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: ColorInputProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/components/ColorInput.js

@@ -0,0 +1,82 @@
+import { cx } from "../cx.js";
+import { useStrings } from "./Provider.js";
+import { parseColor, toHex } from "../theme/color.js";
+import { ErrorText } from "./Field.js";
+import { fieldBox } from "./fieldBox.js";
+import { framed } from "./Input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+//#region src/components/ColorInput.tsx
+var swatchClassName = cx("shrink-0 cursor-pointer p-0.5", "[&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded [&::-webkit-color-swatch]:border-0", "[&::-moz-color-swatch]:rounded [&::-moz-color-swatch]:border-0");
+/**
+* A color as a swatch that opens the system picker, beside a field its hex can be typed or pasted
+* in. A half-typed color stays in the field, marked invalid, until it parses; leaving the field
+* puts back the last color that did.
+*/
+function ColorInput({ value, onValueChange, label, hint, description, error, size = "md", id, name, disabled, required, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
+	const t = useStrings().colorInput;
+	const [draft, setDraft] = useState(null);
+	const errorId = useId();
+	const parsed = parseColor(value);
+	const unparsed = draft !== null && parseColor(draft) === null;
+	const named = typeof label === "string" ? label : ariaLabel;
+	const ownError = unparsed && label === void 0;
+	return framed({
+		label,
+		hint,
+		description,
+		error: error ?? (unparsed ? t.invalid : void 0)
+	}, {
+		id,
+		required,
+		disabled
+	}, (control) => /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full flex-col gap-1", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center", size === "sm" ? "gap-1.5" : "gap-2"),
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "color",
+				"aria-label": t.pick(named),
+				value: parsed ? toHex(parsed) : "#000000",
+				disabled,
+				onChange: (e) => {
+					setDraft(null);
+					onValueChange(e.target.value);
+				},
+				className: cx(fieldBox({ size }), swatchClassName, size === "sm" ? "w-8" : "w-10")
+			}), /* @__PURE__ */ jsx("input", {
+				id,
+				name,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				...control,
+				"aria-describedby": [
+					ariaDescribedBy,
+					control["aria-describedby"],
+					ownError && errorId
+				].filter(Boolean).join(" ") || void 0,
+				"aria-invalid": control["aria-invalid"] ?? (ariaInvalid || unparsed || void 0),
+				"aria-required": control["aria-required"] ?? (ariaRequired || void 0),
+				required,
+				disabled,
+				spellCheck: false,
+				autoComplete: "off",
+				value: draft ?? value,
+				onChange: (e) => {
+					const text = e.target.value;
+					if (parseColor(text)) {
+						setDraft(null);
+						onValueChange(text.trim().toLowerCase());
+					} else setDraft(text);
+				},
+				onBlur: () => setDraft(null),
+				className: cx(fieldBox({ size }), "font-mono")
+			})]
+		}), ownError && /* @__PURE__ */ jsx(ErrorText, {
+			id: errorId,
+			children: t.invalid
+		})]
+	}));
+}
+//#endregion
+export { ColorInput };

package/dist/components/Combobox.d.ts

@@ -1,5 +1,6 @@
 import { type ReactElement, type ReactNode } from 'react';
 import { type ComboboxItems } from './comboboxItems.js';
+import { type FieldBoxSize } from './fieldBox.js';
 export type { ComboboxGroup, ComboboxItem, ComboboxItems, ComboboxLeaf, } from './comboboxItems.js';
 interface FieldProps {
     id?: string | undefined;
@@ -11,7 +12,9 @@ interface FieldProps {
     'aria-describedby'?: string | undefined;
     'aria-invalid'?: boolean | undefined;
     'aria-required'?: boolean | undefined;
-    /** Classes for the field box: border, background, size. */
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
+    /** Classes for the field box: border, background, width. */
     className?: string | undefined;
 }
 type SelectionProps<Value> = {
@@ -54,4 +57,4 @@ export interface AutocompleteProps extends FieldProps {
 /** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
 export declare function Combobox<Value = string>(props: ComboboxProps<Value>): import("react").JSX.Element;
 /** A free-text field that suggests values as you type. */
-export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, }: AutocompleteProps): import("react").JSX.Element;
+export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, size, }: AutocompleteProps): import("react").JSX.Element;

package/dist/components/Combobox.js

@@ -4,8 +4,8 @@ import { panelClassName, panelItemClassName, positionerClassName } from "./float
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
-import { isComboboxGroup } from "./comboboxItems.js";
 import { fieldBox } from "./fieldBox.js";
+import { isComboboxGroup } from "./comboboxItems.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Combobox } from "@base-ui/react/combobox";
@@ -68,17 +68,18 @@ function useEntryFilter() {
 	return useCallback((entry, query) => entry.created === true || match(query, entry.label, typeof entry.value === "string" ? entry.value : void 0, entry.group), [match]);
 }
 var entryLabel = (entry) => entry?.label ?? "";
-var fieldClassName = cx(fieldBox({
+var fieldClassName = (size) => cx(fieldBox({
+	size,
 	within: true,
 	multiline: true,
 	padded: false
 }), "relative flex items-center gap-1");
-var inputClassName = "h-full min-w-12 flex-1 self-stretch border-0 bg-transparent py-1.5 pl-3 text-inherit outline-none placeholder:text-(--theme-muted-text-color) disabled:cursor-not-allowed";
+var inputClassName = (size) => cx("min-w-12 flex-1 self-stretch border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-(--theme-placeholder) disabled:cursor-not-allowed", size === "sm" ? "pl-2" : "pl-3");
 var triggerClassName = "flex shrink-0 items-center self-stretch px-2 text-(--theme-muted-text-color) disabled:cursor-not-allowed";
 var popupInputClassName = fieldBox({ size: "sm" });
 /** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
 function Combobox$1(props) {
-	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip } = props;
+	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip, size = "md" } = props;
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const strings = useStrings();
@@ -122,7 +123,7 @@ function Combobox$1(props) {
 		"aria-invalid": ariaInvalid || void 0,
 		"aria-required": ariaRequired || required || void 0,
 		autoComplete: "off",
-		className: trigger ? popupInputClassName : inputClassName
+		className: trigger ? popupInputClassName : inputClassName(size)
 	});
 	const itemRow = (entry, rowProps) => /* @__PURE__ */ jsxs(Combobox.Item, {
 		value: entry,
@@ -158,9 +159,9 @@ function Combobox$1(props) {
 		renderItem: itemRow
 	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
 		"data-testid": "combobox",
-		className: cx(fieldClassName, className),
+		className: cx(fieldClassName(size), className),
 		children: [props.multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
-			className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-1",
+			className: cx("flex min-w-0 flex-1 flex-wrap items-center gap-1 pl-1", size === "sm" ? "py-0.5" : "py-1"),
 			children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (values) => values.map((entry) => /* @__PURE__ */ jsxs(Combobox.Chip, {
 				"aria-label": entry.label,
 				className: "flex items-center gap-1 rounded bg-(--theme-muted-panel-bg) py-0.5 pr-0.5 pl-1.5 text-xs outline-none data-highlighted:bg-(--theme-hover)",
@@ -171,7 +172,7 @@ function Combobox$1(props) {
 				})]
 			}, entry.label)) }), input]
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
-			className: "flex shrink-0 items-center pl-3",
+			className: cx("flex shrink-0 items-center", size === "sm" ? "pl-2" : "pl-3"),
 			children: selectedIcon
 		}), input] }), /* @__PURE__ */ jsx(Combobox.Trigger, {
 			"aria-label": t.showOptions,
@@ -216,7 +217,7 @@ function Combobox$1(props) {
 	});
 }
 /** A free-text field that suggests values as you type. */
-function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired }) {
+function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md" }) {
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const t = useStrings().dropdown;
@@ -234,7 +235,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 		virtualized: true,
 		children: [/* @__PURE__ */ jsxs(Autocomplete.InputGroup, {
 			"data-testid": "combobox",
-			className: cx(fieldClassName, className),
+			className: cx(fieldClassName(size), className),
 			children: [/* @__PURE__ */ jsx(Autocomplete.Input, {
 				id,
 				placeholder,
@@ -244,7 +245,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 				"aria-invalid": ariaInvalid || void 0,
 				"aria-required": ariaRequired || required || void 0,
 				autoComplete: "off",
-				className: inputClassName
+				className: inputClassName(size)
 			}), entries.flat.length > 0 && /* @__PURE__ */ jsx(Autocomplete.Trigger, {
 				"aria-label": t.showOptions,
 				"data-testid": "combobox-button",

package/dist/components/CreateModal.js

@@ -124,7 +124,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								placeholder: namePlaceholder,
 								"aria-label": namePlaceholder,
 								onAnimationEnd: () => setNameFlash(false),
-								className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
+								className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
 							}),
 							nameError && /* @__PURE__ */ jsx("p", {
 								className: "mt-1 text-xs text-(--theme-error)",
@@ -142,7 +142,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								placeholder: descriptionText,
 								"aria-label": descriptionText,
 								rows: 3,
-								className: "mt-1.5 w-full border-0 p-0 bg-transparent shadow-none resize-none text-sm text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none focus:ring-0"
+								className: "mt-1.5 w-full border-0 p-0 bg-transparent shadow-none resize-none text-sm text-(--theme-app) placeholder:text-(--theme-placeholder) focus:outline-none focus:ring-0"
 							}) : /* @__PURE__ */ jsx("div", { className: "mt-3" })
 						] }),
 						children && /* @__PURE__ */ jsx("div", {

package/dist/components/DatePicker.d.ts

@@ -1,3 +1,4 @@
+import { type FieldBoxSize } from './fieldBox.js';
 export interface DatePickerProps {
     /** As a native date input holds it: `yyyy-MM-dd`, or with `withTime` the local
      *  `yyyy-MM-ddTHH:mm` of `datetime-local`. Empty while nothing is chosen. */
@@ -21,6 +22,9 @@ export interface DatePickerProps {
     'aria-describedby'?: string | undefined;
     'aria-invalid'?: boolean | undefined;
     'aria-required'?: boolean | undefined;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
+    /** On the row that holds the date and the time: its width or margin. */
     className?: string | undefined;
 }
 /**
@@ -28,4 +32,4 @@ export interface DatePickerProps {
  * date or datetime-local input holds it, so it reads the same in forms and URLs; months, weekdays
  * and the shown date follow the reader's locale.
  */
-export declare function DatePicker({ value, onValueChange, withTime, min, max, timeStep, required, disabled, placeholder, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: DatePickerProps): import("react").JSX.Element;
+export declare function DatePicker({ value, onValueChange, withTime, min, max, timeStep, required, disabled, placeholder, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, size, className, }: DatePickerProps): import("react").JSX.Element;

package/dist/components/DatePicker.js

@@ -65,13 +65,13 @@ var calendarClassNames = {
 	outside: "text-(--theme-muted-text-color) opacity-60",
 	disabled: "text-(--theme-muted-text-color) opacity-40"
 };
-var triggerClassName = cx(fieldBox(), "flex flex-1 min-w-40 cursor-pointer items-center gap-2 text-left");
+var triggerClassName = (size) => cx(fieldBox({ size }), "flex flex-1 cursor-pointer items-center text-left", size === "sm" ? "min-w-32 gap-1.5" : "min-w-40 gap-2");
 /**
 * A day from a calendar, and with `withTime` a time beside it. The value is a string as a native
 * date or datetime-local input holds it, so it reads the same in forms and URLs; months, weekdays
 * and the shown date follow the reader's locale.
 */
-function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
+function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md", className }) {
 	const t = useStrings().datePicker;
 	const { common } = useStrings();
 	const [open, setOpen] = useState(false);
@@ -95,7 +95,7 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 	};
 	const sameDay = (bound) => day !== void 0 && parseDay(bound)?.getTime() === day.getTime();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex w-full items-center gap-2", className),
+		className: cx("flex w-full items-center", size === "sm" ? "gap-1.5" : "gap-2", className),
 		children: [/* @__PURE__ */ jsxs(Popover.Root, {
 			open,
 			onOpenChange: setOpen,
@@ -107,12 +107,12 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 				"aria-describedby": ariaDescribedBy,
 				"aria-invalid": ariaInvalid || void 0,
 				"aria-required": ariaRequired || void 0,
-				className: triggerClassName,
+				className: triggerClassName(size),
 				children: [/* @__PURE__ */ jsx(CalendarIcon, {
 					"aria-hidden": "true",
-					className: "size-3.5 shrink-0 text-(--theme-muted-text-color)"
+					className: cx("shrink-0 text-(--theme-muted-text-color)", size === "sm" ? "size-3" : "size-3.5")
 				}), /* @__PURE__ */ jsx("span", {
-					className: cx("truncate", !day && "text-(--theme-muted-text-color)"),
+					className: cx("truncate", !day && "text-(--theme-placeholder)"),
 					children: day ? shownDay.format(day) : placeholder ?? t.pickDate
 				})]
 			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
@@ -183,7 +183,7 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 				const next = event.target.value;
 				if (next) emit(day ?? earliest ?? /* @__PURE__ */ new Date(), next);
 			},
-			className: cx(fieldBox(), "w-auto tabular-nums")
+			className: cx(fieldBox({ size }), "w-auto tabular-nums")
 		})]
 	});
 }

package/dist/components/Field.d.ts

@@ -1,4 +1,5 @@
-import { type ReactNode } from 'react';
+import { type OutputHTMLAttributes, type ReactNode } from 'react';
+import type { FieldBoxSize } from './fieldBox.js';
 /** What a field's control takes to be named, described and marked by its field. Spread it
  *  on the control: `{(control) => <input {...control} />}`. */
 export interface FieldControlProps {
@@ -43,12 +44,15 @@ export interface FieldProps {
     id?: string | undefined;
     className?: string | undefined;
     /** The control, or a function that places the control props on it. A Base UI control, such
-     *  as Select, Combobox, NumberInput, Checkbox or Switch, needs only the `id`. */
+     *  as Select, Combobox, NumberInput, Checkbox or Switch, needs only the `id`. A value shown
+     *  but not edited goes in a `FieldValue`. */
     children: ReactNode | ((control: FieldControlProps) => ReactNode);
 }
-/** An error in the look a Field gives its own, for one under a part of a control rather than
- *  the whole of it, such as a row of a list editor. */
-export declare function ErrorText({ children }: {
+/** An error in the look a Field gives its own, for a control outside a Field, or for a part of
+ *  one rather than the whole of it, such as a row of a list editor. Give it an `id` and name it
+ *  in the control's `aria-describedby` so the error is read with the control. */
+export declare function ErrorText({ id, children }: {
+    id?: string | undefined;
     children: ReactNode;
 }): import("react").JSX.Element | null;
 /** A control with its label, help and error, tied to it for assistive technology. One frame
@@ -68,3 +72,13 @@ export declare function RevealToggle({ revealed, onRevealedChange, disabled, }:
     onRevealedChange: (revealed: boolean) => void;
     disabled?: boolean | undefined;
 }): import("react").JSX.Element;
+export interface FieldValueProps extends OutputHTMLAttributes<HTMLOutputElement> {
+    /** Matches the height and text of the controls around it, as `size` does on a control. */
+    size?: FieldBoxSize | undefined;
+}
+/** A value a Field shows that nobody edits, such as one worked out from other fields. It is an
+ *  `<output>`, which the Field's label names and which reads out when the value changes; list
+ *  the controls it is worked out from in `htmlFor`. It keeps a control's height, so it lines
+ *  up with the fields around it. For a set of names and values on their own, use
+ *  DescriptionList. */
+export declare function FieldValue({ size, className, children, ...props }: FieldValueProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -20,10 +20,12 @@ function useFieldControl() {
 var labelClassName = "flex items-center gap-1 text-sm font-medium text-(--theme-app)";
 var actionsClassName = "ml-auto flex shrink-0 items-center gap-1";
 var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error)";
-/** An error in the look a Field gives its own, for one under a part of a control rather than
-*  the whole of it, such as a row of a list editor. */
-function ErrorText({ children }) {
+/** An error in the look a Field gives its own, for a control outside a Field, or for a part of
+*  one rather than the whole of it, such as a row of a list editor. Give it an `id` and name it
+*  in the control's `aria-describedby` so the error is read with the control. */
+function ErrorText({ id, children }) {
 	return children ? /* @__PURE__ */ jsxs("div", {
+		id,
 		role: "alert",
 		className: errorTextClassName,
 		children: [/* @__PURE__ */ jsx(WarningIcon, {
@@ -155,5 +157,20 @@ function RevealToggle({ revealed, onRevealedChange, disabled }) {
 		})
 	});
 }
+/** A value a Field shows that nobody edits, such as one worked out from other fields. It is an
+*  `<output>`, which the Field's label names and which reads out when the value changes; list
+*  the controls it is worked out from in `htmlFor`. It keeps a control's height, so it lines
+*  up with the fields around it. For a set of names and values on their own, use
+*  DescriptionList. */
+function FieldValue({ size = "md", className, children, ...props }) {
+	const control = useFieldControl();
+	return /* @__PURE__ */ jsx("output", {
+		id: control?.id,
+		"aria-describedby": control?.["aria-describedby"],
+		...props,
+		className: cx("flex min-w-0 items-center break-words text-(--theme-app)", size === "sm" ? "min-h-7 text-xs" : "min-h-9 text-sm", className),
+		children
+	});
+}
 //#endregion
-export { ErrorText, Field$1 as Field, FieldOption, FieldRowContext, RevealToggle, useFieldControl };
+export { ErrorText, Field$1 as Field, FieldOption, FieldRowContext, FieldValue, RevealToggle, useFieldControl };

package/dist/components/Input.d.ts

@@ -1,4 +1,6 @@
 import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import { type FieldControlProps } from './Field.js';
+import { type FieldBoxSize } from './fieldBox.js';
 interface FramedProps {
     /** Without a label the box stands alone; name it with `aria-label`. */
     label?: ReactNode;
@@ -8,11 +10,19 @@ interface FramedProps {
     description?: ReactNode;
     error?: ReactNode;
     mono?: boolean;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
 }
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FramedProps {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, FramedProps {
 }
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FramedProps {
 }
+/** The Field around a control when it has a label; the control alone when it doesn't. */
+export declare function framed({ label, hint, description, error }: Omit<FramedProps, 'mono' | 'size'>, { id, required, disabled, }: {
+    id?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, control: (props: Partial<FieldControlProps>) => ReactNode): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
 /** A single-line text field. `type="password"` adds a button that shows what was typed. */
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 /** A multi-line text field that grows by hand. */

package/dist/components/Input.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
-import { fieldBox } from "./fieldBox.js";
 import { Field, RevealToggle } from "./Field.js";
+import { fieldBox } from "./fieldBox.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 //#region src/components/Input.tsx
@@ -19,7 +19,7 @@ function framed({ label, hint, description, error }, { id, required, disabled },
 	});
 }
 /** A single-line text field. `type="password"` adds a button that shows what was typed. */
-var Input = forwardRef(({ label, hint, description, error, className, mono, type, ...props }, ref) => {
+var Input = forwardRef(({ label, hint, description, error, className, mono, size, type, ...props }, ref) => {
 	const [revealed, setRevealed] = useState(false);
 	const secret = type === "password";
 	return framed({
@@ -35,7 +35,7 @@ var Input = forwardRef(({ label, hint, description, error, className, mono, type
 			"aria-invalid": control["aria-invalid"] ?? props["aria-invalid"],
 			"aria-describedby": [props["aria-describedby"], control["aria-describedby"]].filter(Boolean).join(" ") || void 0,
 			type: secret && revealed ? "text" : type,
-			className: cx(fieldBox(), mono && "font-mono", secret && "pr-9", className)
+			className: cx(fieldBox({ size }), mono && "font-mono", secret && "pr-9", className)
 		});
 		return secret ? /* @__PURE__ */ jsxs("div", {
 			className: "relative w-full",
@@ -49,7 +49,7 @@ var Input = forwardRef(({ label, hint, description, error, className, mono, type
 });
 Input.displayName = "Input";
 /** A multi-line text field that grows by hand. */
-var Textarea = forwardRef(({ label, hint, description, error, className, mono, ...props }, ref) => framed({
+var Textarea = forwardRef(({ label, hint, description, error, className, mono, size, ...props }, ref) => framed({
 	label,
 	hint,
 	description,
@@ -60,8 +60,11 @@ var Textarea = forwardRef(({ label, hint, description, error, className, mono, .
 	...control,
 	"aria-invalid": control["aria-invalid"] ?? props["aria-invalid"],
 	"aria-describedby": [props["aria-describedby"], control["aria-describedby"]].filter(Boolean).join(" ") || void 0,
-	className: cx(fieldBox({ multiline: true }), "min-h-24 resize-y", mono && "font-mono", className)
+	className: cx(fieldBox({
+		size,
+		multiline: true
+	}), size === "sm" ? "min-h-16" : "min-h-24", "resize-y", mono && "font-mono", className)
 })));
 Textarea.displayName = "Textarea";
 //#endregion
-export { Input, Textarea };
+export { Input, Textarea, framed };

package/dist/components/MenuEntries.js

@@ -38,7 +38,7 @@ function MenuEntries({ entries, search, query = "" }) {
 			children: /* @__PURE__ */ jsx(Menu.Input, {
 				"aria-label": search.placeholder,
 				placeholder: search.placeholder,
-				className: "w-full rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-1 text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-muted-text-color) focus:border-(--theme-accent)"
+				className: "w-full rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-1 text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-placeholder) focus:border-(--theme-accent)"
 			})
 		}),
 		/* @__PURE__ */ jsx(Menu.List, { children: /* @__PURE__ */ jsx(EntryRows, { entries: shown }) }),

package/dist/components/NumberInput.d.ts

@@ -15,6 +15,7 @@ export interface NumberInputProps extends Omit<NumberField.Root.Props, 'classNam
     'aria-invalid'?: boolean | undefined;
     /** Marks the field required for assistive technology without the native check `required` adds. */
     'aria-required'?: boolean | undefined;
+    /** `sm` for dense places such as toolbars and table cells. */
     size?: FieldBoxSize | undefined;
     /** Applied to the box around the input and its steppers, such as a width. */
     className?: string | undefined;

package/dist/components/OneTimeCodeInput.d.ts

@@ -0,0 +1,23 @@
+import { OTPField } from '@base-ui/react/otp-field';
+import { type FieldBoxSize } from './fieldBox.js';
+export interface OneTimeCodeInputProps extends Omit<OTPField.Root.Props, 'className' | 'render' | 'children' | 'length' | 'style'> {
+    /** How many characters the code has. */
+    length?: number | undefined;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: FieldBoxSize | undefined;
+    'aria-invalid'?: boolean | undefined;
+    'aria-required'?: boolean | undefined;
+    /** On the row of boxes: its margin or gap. */
+    className?: string | undefined;
+}
+/**
+ * A one-time code, such as the six digits of a sign-in check, typed one character to a box. It
+ * fills from the browser's or phone's code autofill (`autocomplete="one-time-code"`) and from a
+ * paste of the whole code, moves on as each character is typed and back on Backspace, and opens a
+ * number pad for a numeric code. The value is the code as one string; `onValueComplete` fires once
+ * every box is filled, and `autoSubmit` submits the form then.
+ *
+ * Name it with a Field or a `<label>` for its `id`, which is the first box's, or with
+ * `aria-label`.
+ */
+export declare function OneTimeCodeInput({ length, size, className, 'aria-label': ariaLabel, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, ...rootProps }: OneTimeCodeInputProps): import("react").JSX.Element;

package/dist/components/OneTimeCodeInput.js

@@ -0,0 +1,39 @@
+import { cx } from "../cx.js";
+import { useStrings } from "./Provider.js";
+import { fieldBox } from "./fieldBox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/components/OneTimeCodeInput.tsx
+/**
+* A one-time code, such as the six digits of a sign-in check, typed one character to a box. It
+* fills from the browser's or phone's code autofill (`autocomplete="one-time-code"`) and from a
+* paste of the whole code, moves on as each character is typed and back on Backspace, and opens a
+* number pad for a numeric code. The value is the code as one string; `onValueComplete` fires once
+* every box is filled, and `autoSubmit` submits the form then.
+*
+* Name it with a Field or a `<label>` for its `id`, which is the first box's, or with
+* `aria-label`.
+*/
+function OneTimeCodeInput({ length = 6, size = "md", className, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, ...rootProps }) {
+	const t = useStrings().oneTimeCode;
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs(OTPField.Root, {
+		length,
+		"aria-label": ariaLabel,
+		...rootProps,
+		className: cx("flex items-center", size === "sm" ? "gap-1" : "gap-2", className),
+		children: [ariaLabel && /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			hidden: true,
+			children: ariaLabel
+		}), Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OTPField.Input, {
+			...index > 0 ? { "aria-label": t.character(index + 1, length) } : ariaLabel ? { "aria-labelledby": labelId } : {},
+			...ariaInvalid && { "aria-invalid": true },
+			...ariaRequired && { "aria-required": true },
+			className: cx(fieldBox({ size }), "px-0 text-center font-mono tabular-nums", size === "sm" ? "w-7" : "w-9 text-base")
+		}, index))]
+	});
+}
+//#endregion
+export { OneTimeCodeInput };