@cueplusplus/ui 0.1.0

package/dist/forms/select.d.ts

@@ -0,0 +1,75 @@
+import { FormControlSize } from "./_chassis.js";
+import * as React from "react";
+//#region src/forms/select.d.ts
+/** One row in a {@link Select}. */
+interface SelectOption {
+  /** Submitted value and identity of the row. */
+  value: string;
+  /** What the user reads, in the trigger as well as the list. */
+  label: React.ReactNode;
+  /** Grey the row out and skip it during keyboard navigation. */
+  disabled?: boolean;
+}
+interface SelectProps {
+  /** The rows, in display order. */
+  items: readonly SelectOption[];
+  /** Selected value. Use with `onValueChange` for a controlled select. */
+  value?: string | null;
+  /** Initially selected value for an uncontrolled select. */
+  defaultValue?: string | null;
+  /** Called with the newly selected value (`null` when cleared). */
+  onValueChange?: (value: string | null) => void;
+  /** Shown in the trigger while nothing is selected. */
+  placeholder?: React.ReactNode;
+  /** Rung of the control ladder for the trigger. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Prevent opening and grey the trigger out. */
+  disabled?: boolean;
+  /** Require a value before the owning form submits. */
+  required?: boolean;
+  /** Name for the hidden input, when the select is part of a form. */
+  name?: string;
+  /** Id forwarded to the select's hidden input. */
+  id?: string;
+  /** Accessible name for the trigger, when no {@link FieldLabel} names it. */
+  "aria-label"?: string;
+  /** Id of the element naming the trigger. */
+  "aria-labelledby"?: string;
+  /**
+   * Lock interaction to the popup while it is open. Defaults to `true`, matching
+   * Base UI; set `false` inside a canvas or a drag surface that must keep
+   * receiving pointer events.
+   */
+  modal?: boolean;
+  /** Extra classes for the trigger. */
+  className?: string;
+  /** Extra classes for the popup surface. */
+  popupClassName?: string;
+  /** Distance in px between the trigger and the popup. Defaults to `4`. */
+  sideOffset?: number;
+}
+/**
+ * A dropdown for choosing one of a known set of values.
+ *
+ * The trigger rides the recessed control chassis so a select lines up with the
+ * {@link Input}s beside it; the popup wears the overlay surface
+ * (`surface-2` + `border-overlay` + the overlay radius) that every floating
+ * element in this system shares. Rows are one `control-sm` tall — the list is
+ * meant to show a dozen options without scrolling.
+ *
+ * The popup is portalled through {@link useCuePortalProps}, so it carries the
+ * caller's `data-theme` / `data-density` / `data-mode` even though it mounts at
+ * the end of `<body>`. Without that a select opened inside an ultra-compact
+ * island would render at the page's density.
+ *
+ * @example
+ * <Select
+ *   aria-label="Blend mode"
+ *   items={[{ value: "htp", label: "HTP" }, { value: "ltp", label: "LTP" }]}
+ *   value={mode}
+ *   onValueChange={setMode}
+ * />
+ */
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Select, SelectOption, SelectProps };

package/dist/forms/select.js

@@ -0,0 +1,91 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { controlVariants } from "./_chassis.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { CaretGlyph, TickGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/forms/select.tsx
+/**
+* A dropdown for choosing one of a known set of values.
+*
+* The trigger rides the recessed control chassis so a select lines up with the
+* {@link Input}s beside it; the popup wears the overlay surface
+* (`surface-2` + `border-overlay` + the overlay radius) that every floating
+* element in this system shares. Rows are one `control-sm` tall — the list is
+* meant to show a dozen options without scrolling.
+*
+* The popup is portalled through {@link useCuePortalProps}, so it carries the
+* caller's `data-theme` / `data-density` / `data-mode` even though it mounts at
+* the end of `<body>`. Without that a select opened inside an ultra-compact
+* island would render at the page's density.
+*
+* @example
+* <Select
+*   aria-label="Blend mode"
+*   items={[{ value: "htp", label: "HTP" }, { value: "ltp", label: "LTP" }]}
+*   value={mode}
+*   onValueChange={setMode}
+* />
+*/
+const Select$1 = React.forwardRef(function Select$2({ items, value, defaultValue, onValueChange, placeholder, size, disabled, required, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, modal, className, popupClassName, sideOffset = 4 }, ref) {
+	const portalProps = useCuePortalProps();
+	const handleValueChange = React.useCallback((next) => {
+		onValueChange?.(next ?? null);
+	}, [onValueChange]);
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		items,
+		value,
+		defaultValue,
+		onValueChange: onValueChange === void 0 ? void 0 : handleValueChange,
+		disabled,
+		required,
+		name,
+		id,
+		modal,
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			ref,
+			"data-slot": "select-trigger",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			className: cn(controlVariants({ size }), "flex cursor-default items-center justify-between gap-(--cue-space-3) text-left", "hover:not-data-disabled:border-border-strong", className),
+			children: [/* @__PURE__ */ jsx(Select.Value, {
+				className: "truncate data-[placeholder]:text-fg-subtle",
+				placeholder
+			}), /* @__PURE__ */ jsx(Select.Icon, {
+				className: "flex shrink-0 items-center text-fg-subtle",
+				children: /* @__PURE__ */ jsx(CaretGlyph, { className: "size-icon-md" })
+			})]
+		}), /* @__PURE__ */ jsx(Select.Portal, {
+			...portalProps,
+			children: /* @__PURE__ */ jsx(Select.Positioner, {
+				className: "z-50 outline-none",
+				sideOffset,
+				alignItemWithTrigger: false,
+				children: /* @__PURE__ */ jsx(Select.Popup, {
+					"data-slot": "select-popup",
+					className: cn("min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-(--radius-overlay) border border-border-overlay bg-surface-2 py-(--cue-space-1) shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none", "transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", popupClassName),
+					children: /* @__PURE__ */ jsx(Select.List, {
+						className: "max-h-(--available-height) overflow-y-auto",
+						children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+							value: item.value,
+							disabled: item.disabled,
+							"data-slot": "select-item",
+							className: "flex h-control-sm cursor-default items-center gap-(--cue-space-2) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[selected]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "flex size-icon-sm shrink-0 items-center justify-center",
+								children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(TickGlyph, { className: "size-icon-sm" }) })
+							}), /* @__PURE__ */ jsx(Select.ItemText, {
+								className: "truncate",
+								children: item.label
+							})]
+						}, item.value))
+					})
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { Select$1 as Select };

package/dist/forms/slider.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Slider } from "@base-ui/react/slider";
+//#region src/forms/slider.d.ts
+interface SliderProps extends Omit<Slider.Root.Props, "className" | "onValueCommitted"> {
+  /** Extra classes, merged over the root defaults. */
+  className?: string;
+  /**
+   * Fired once when a gesture *ends*: pointer-up after a drag, key-up after a
+   * step, or a track press. `onValueChange` fires on every intermediate value —
+   * a drag emits dozens — so an undo stack, a network write or a persisted
+   * setting must hang off this, not off `onValueChange`, or it will record every
+   * frame of the drag as a separate edit.
+   */
+  onCommit?: (value: number | number[]) => void;
+  /** Visible label above the track. */
+  label?: React.ReactNode;
+  /** Show the live formatted value opposite the label. */
+  showValue?: boolean;
+  /**
+   * Accessible name for the thumb. With several thumbs each is suffixed with its
+   * 1-based index, so a range slider announces "Window 1" and "Window 2".
+   */
+  "aria-label"?: string;
+}
+/**
+ * A continuous value control: one thumb, or several for a range.
+ *
+ * Drawn as a 2px rail rather than the chunky default — at console density a
+ * slider is a readout first and a grab target second, and the thumb supplies the
+ * affordance. The filled portion uses the theme accent so the slider agrees with
+ * every other "this much" indicator on screen.
+ *
+ * The important part of the API is {@link SliderProps.onCommit}: the
+ * change/commit split is what lets a host app coalesce a whole drag into one
+ * undo entry instead of hundreds.
+ *
+ * @example
+ * <Slider aria-label="Intensity" value={level} onValueChange={setLevel} onCommit={pushUndo} />
+ * @example
+ * <Slider label="Window" showValue defaultValue={[20, 60]} />
+ */
+declare const Slider$1: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Slider$1 as Slider, SliderProps };

package/dist/forms/slider.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+//#region src/forms/slider.tsx
+/** How many thumbs the current value implies. */
+function thumbCount(value, defaultValue) {
+	const source = value ?? defaultValue;
+	return Array.isArray(source) ? source.length : 1;
+}
+/**
+* A continuous value control: one thumb, or several for a range.
+*
+* Drawn as a 2px rail rather than the chunky default — at console density a
+* slider is a readout first and a grab target second, and the thumb supplies the
+* affordance. The filled portion uses the theme accent so the slider agrees with
+* every other "this much" indicator on screen.
+*
+* The important part of the API is {@link SliderProps.onCommit}: the
+* change/commit split is what lets a host app coalesce a whole drag into one
+* undo entry instead of hundreds.
+*
+* @example
+* <Slider aria-label="Intensity" value={level} onValueChange={setLevel} onCommit={pushUndo} />
+* @example
+* <Slider label="Window" showValue defaultValue={[20, 60]} />
+*/
+const Slider$1 = React.forwardRef(function Slider$2({ className, onCommit, label, showValue = false, "aria-label": ariaLabel, value, defaultValue, ...elementProps }, ref) {
+	const count = thumbCount(value, defaultValue);
+	const handleCommitted = React.useCallback((next) => {
+		onCommit?.(typeof next === "number" ? next : [...next]);
+	}, [onCommit]);
+	return /* @__PURE__ */ jsxs(Slider.Root, {
+		ref,
+		"data-slot": "slider",
+		value,
+		defaultValue,
+		onValueCommitted: onCommit === void 0 ? void 0 : handleCommitted,
+		className: cn("flex w-full flex-col gap-(--cue-space-2)", className),
+		...elementProps,
+		children: [label === void 0 && !showValue ? null : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.1em] text-fg-muted uppercase",
+			children: [label === void 0 ? /* @__PURE__ */ jsx("span", {}) : /* @__PURE__ */ jsx(Slider.Label, { children: label }), showValue ? /* @__PURE__ */ jsx(Slider.Value, { className: "tabular-nums text-fg normal-case tracking-normal" }) : null]
+		}), /* @__PURE__ */ jsx(Slider.Control, {
+			"data-slot": "slider-control",
+			className: "flex h-control-sm w-full touch-none items-center select-none",
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				"data-slot": "slider-track",
+				className: "relative h-0.5 w-full rounded-full bg-border select-none",
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, {
+					"data-slot": "slider-indicator",
+					className: "h-full rounded-full bg-accent select-none"
+				}), Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
+					index,
+					"data-slot": "slider-thumb",
+					"aria-label": ariaLabel === void 0 ? void 0 : count > 1 ? `${ariaLabel} ${index + 1}` : ariaLabel,
+					className: "size-[0.5rem] rounded-full bg-accent outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent data-[disabled]:opacity-40"
+				}, index))]
+			})
+		})]
+	});
+});
+//#endregion
+export { Slider$1 as Slider };

package/dist/forms/switch.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Switch } from "@base-ui/react/switch";
+//#region src/forms/switch.d.ts
+interface SwitchProps extends Omit<Switch.Root.Props, "className"> {
+  /** Extra classes, merged over the track defaults. */
+  className?: string;
+  /**
+   * Inline label rendered beside the track and wrapped with it in a `<label>`,
+   * so the text is both the accessible name and part of the hit target.
+   */
+  label?: React.ReactNode;
+  /**
+   * Track size. Defaults to `"md"` (28×14). `sm` exists because a console packs
+   * switches into 20px rows where a stock 44px switch simply does not fit.
+   */
+  size?: "sm" | "md" | "lg";
+}
+/**
+ * A binary on/off control — `role="switch"`, not a checkbox.
+ *
+ * The distinction matters to assistive tech: a switch takes effect immediately,
+ * a checkbox is a value you submit later. Use this for "live" state (blackout,
+ * mute, follow) and {@link Checkbox} for form values.
+ *
+ * Ships in three sizes down to a 22×12 track, because a dense console cannot
+ * spare the height a stock switch demands. The thumb slides on a transform and
+ * stills entirely under `prefers-reduced-motion`.
+ *
+ * @example
+ * <Switch label="Blackout" checked={blackout} onCheckedChange={setBlackout} />
+ * @example
+ * <Switch aria-label="Mute channel" size="sm" />
+ */
+declare const Switch$1: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Switch$1 as Switch, SwitchProps };

package/dist/forms/switch.js

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/forms/switch.tsx
+/**
+* The three tracks, in rem so they follow browser zoom and the user's font size.
+*
+* Geometry (px at the 16px reference root): `sm` 22×12 with an 8px thumb, `md`
+* 28×14 with 10px, `lg` 34×18 with 12px. The travel is
+* `track − 2×border − 2×inset − thumb`, i.e. the thumb sits one hairline inside
+* the rim at both ends.
+*/
+const SWITCH_SIZES = {
+	sm: {
+		track: "w-[1.375rem] h-[0.75rem]",
+		thumb: "size-[0.5rem] data-[checked]:translate-x-[0.625rem]"
+	},
+	md: {
+		track: "w-[1.75rem] h-[0.875rem]",
+		thumb: "size-[0.625rem] data-[checked]:translate-x-[0.875rem]"
+	},
+	lg: {
+		track: "w-[2.125rem] h-[1.125rem]",
+		thumb: "size-[0.75rem] data-[checked]:translate-x-[1.125rem]"
+	}
+};
+/**
+* A binary on/off control — `role="switch"`, not a checkbox.
+*
+* The distinction matters to assistive tech: a switch takes effect immediately,
+* a checkbox is a value you submit later. Use this for "live" state (blackout,
+* mute, follow) and {@link Checkbox} for form values.
+*
+* Ships in three sizes down to a 22×12 track, because a dense console cannot
+* spare the height a stock switch demands. The thumb slides on a transform and
+* stills entirely under `prefers-reduced-motion`.
+*
+* @example
+* <Switch label="Blackout" checked={blackout} onCheckedChange={setBlackout} />
+* @example
+* <Switch aria-label="Mute channel" size="sm" />
+*/
+const Switch$1 = React.forwardRef(function Switch$2({ className, label, size = "md", ...elementProps }, ref) {
+	const labelId = React.useId();
+	const hasLabel = label !== void 0;
+	const geometry = SWITCH_SIZES[size];
+	const control = /* @__PURE__ */ jsx(Switch.Root, {
+		ref,
+		"data-slot": "switch",
+		"aria-labelledby": hasLabel ? labelId : void 0,
+		className: cn("relative inline-flex shrink-0 items-center rounded-full border border-border bg-surface-3 p-0 outline-none transition-colors duration-150 motion-reduce:transition-none", geometry.track, "hover:border-border-strong", "data-[checked]:border-accent data-[checked]:bg-accent", "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: cn("absolute top-1/2 left-px -translate-y-1/2 rounded-full bg-fg-muted transition-transform duration-150 motion-reduce:transition-none", geometry.thumb, "data-[checked]:bg-accent-fg")
+		})
+	});
+	if (!hasLabel) return control;
+	return /* @__PURE__ */ jsxs("label", {
+		"data-slot": "switch-label",
+		className: "inline-flex cursor-pointer items-center gap-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted select-none has-[[data-disabled]]:cursor-default has-[[data-disabled]]:opacity-40",
+		children: [control, /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			children: label
+		})]
+	});
+});
+//#endregion
+export { Switch$1 as Switch };

package/dist/forms/tags-input.d.ts

@@ -0,0 +1,69 @@
+import { FormControlSize } from "./_chassis.js";
+import * as React from "react";
+//#region src/forms/tags-input.d.ts
+interface TagsInputProps {
+  /** The tags. Use with `onValueChange` for a controlled field. */
+  value?: readonly string[];
+  /** Initial tags for an uncontrolled field. */
+  defaultValue?: readonly string[];
+  /** Called with the full list after every add or remove. */
+  onValueChange?: (value: string[]) => void;
+  /**
+   * Optional known tags, offered in a popup as the user types. Free-form entry
+   * works with or without them — a suggestion is a shortcut, never a constraint.
+   */
+  suggestions?: readonly string[];
+  /** Shown while there are no tags. */
+  placeholder?: string;
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /**
+   * Extra keys that commit the pending tag, on top of Enter. Defaults to `[","]`
+   * — the separator every "type a list" field in the wild accepts.
+   */
+  separators?: readonly string[];
+  /** Refuse further tags past this many. */
+  max?: number;
+  /** Prevent entry and grey the field out. */
+  disabled?: boolean;
+  /** Name for the hidden input, when the field is part of a form. */
+  name?: string;
+  /** Id forwarded to the text input. */
+  id?: string;
+  /** Accessible name for the input, when no {@link FieldLabel} names it. */
+  "aria-label"?: string;
+  /** Id of the element naming the input. */
+  "aria-labelledby"?: string;
+  /**
+   * Accessible name for a tag's remove button. Defaults to
+   * ``(tag) => `Remove ${tag}` ``.
+   */
+  removeLabel?: (tag: string) => string;
+  /** Extra classes for the field. */
+  className?: string;
+  /** Extra classes for the popup surface. */
+  popupClassName?: string;
+  /** Distance in px between the field and the popup. Defaults to `4`. */
+  sideOffset?: number;
+}
+/**
+ * Free-form tags, each a removable chip.
+ *
+ * {@link MultiSelect} with the set opened up: Enter (or a separator key) commits
+ * whatever is in the box, so this is the control for labels, hostnames and
+ * anything else the product cannot enumerate in advance. Pass `suggestions` to
+ * offer the ones you *do* know.
+ *
+ * Three rules the hand-rolled version always misses, all enforced here: tags are
+ * trimmed, blanks are refused, and duplicates are refused silently rather than
+ * appended (a tag list is a set). Backspace in an empty input removes the last
+ * tag, courtesy of Base UI's chip handling.
+ *
+ * @example
+ * <TagsInput aria-label="Labels" value={labels} onValueChange={setLabels} />
+ * @example
+ * <TagsInput aria-label="Labels" suggestions={knownLabels} max={8} />
+ */
+declare const TagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TagsInput, TagsInputProps };

package/dist/forms/tags-input.js

@@ -0,0 +1,148 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { bareControlClasses, controlGroupFocusClasses, controlSurface } from "./_chassis.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { CrossGlyph } from "./_glyphs.js";
+import { chipFieldClasses, chipRemoveClasses, listboxItemClasses, listboxListClasses, listboxPopupClasses, listboxPositionerClasses, valueChipClasses } from "./_listbox.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/forms/tags-input.tsx
+/** Horizontal padding and type size per rung; the height comes from the chips. */
+const FIELD_SIZES = {
+	sm: "min-h-control-sm px-(--cue-space-2) text-(length:--cue-text-label)",
+	md: "min-h-control-md px-(--cue-space-3) text-(length:--cue-text-ui)",
+	lg: "min-h-control-lg px-(--cue-space-4) text-(length:--cue-text-body)"
+};
+/**
+* Free-form tags, each a removable chip.
+*
+* {@link MultiSelect} with the set opened up: Enter (or a separator key) commits
+* whatever is in the box, so this is the control for labels, hostnames and
+* anything else the product cannot enumerate in advance. Pass `suggestions` to
+* offer the ones you *do* know.
+*
+* Three rules the hand-rolled version always misses, all enforced here: tags are
+* trimmed, blanks are refused, and duplicates are refused silently rather than
+* appended (a tag list is a set). Backspace in an empty input removes the last
+* tag, courtesy of Base UI's chip handling.
+*
+* @example
+* <TagsInput aria-label="Labels" value={labels} onValueChange={setLabels} />
+* @example
+* <TagsInput aria-label="Labels" suggestions={knownLabels} max={8} />
+*/
+const TagsInput = React.forwardRef(function TagsInput({ value, defaultValue, onValueChange, suggestions, placeholder, size = "md", separators = [","], max, disabled, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, removeLabel = (tag) => `Remove ${tag}`, className, popupClassName, sideOffset = 4 }, ref) {
+	const portalProps = useCuePortalProps();
+	const isControlled = value !== void 0;
+	const [uncontrolled, setUncontrolled] = React.useState(() => [...defaultValue ?? []]);
+	const tags = React.useMemo(() => isControlled ? [...value] : uncontrolled, [
+		isControlled,
+		uncontrolled,
+		value
+	]);
+	const [query, setQuery] = React.useState("");
+	const highlighted = React.useRef(void 0);
+	const commit = React.useCallback((next) => {
+		if (!isControlled) setUncontrolled(next);
+		onValueChange?.(next);
+	}, [isControlled, onValueChange]);
+	const add = React.useCallback((raw) => {
+		const tag = raw.trim();
+		if (tag === "") return;
+		if (tags.includes(tag)) return;
+		if (max !== void 0 && tags.length >= max) return;
+		commit([...tags, tag]);
+		setQuery("");
+	}, [
+		commit,
+		max,
+		tags
+	]);
+	const handleValueChange = React.useCallback((next) => {
+		const picked = next;
+		if (max !== void 0 && picked.length > max) return;
+		commit(picked);
+		setQuery("");
+	}, [commit, max]);
+	const handleKeyDown = React.useCallback((event) => {
+		if (event.defaultPrevented || disabled === true) return;
+		if (!(event.key === "Enter" || separators.includes(event.key)) || highlighted.current !== void 0) return;
+		if (query.trim() === "") {
+			if (event.key !== "Enter") event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		add(query);
+	}, [
+		add,
+		disabled,
+		query,
+		separators
+	]);
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		multiple: true,
+		items: suggestions ?? [],
+		value: tags,
+		onValueChange: handleValueChange,
+		inputValue: query,
+		onInputValueChange: setQuery,
+		onItemHighlighted: (item) => {
+			highlighted.current = item;
+		},
+		disabled,
+		name,
+		children: [/* @__PURE__ */ jsx(Combobox.InputGroup, {
+			"data-slot": "tags-input-group",
+			className: cn(controlSurface, FIELD_SIZES[size], controlGroupFocusClasses, className),
+			children: /* @__PURE__ */ jsx(Combobox.Chips, {
+				className: chipFieldClasses,
+				children: /* @__PURE__ */ jsx(Combobox.Value, { children: (selected) => /* @__PURE__ */ jsxs(React.Fragment, { children: [selected.map((tag) => /* @__PURE__ */ jsxs(Combobox.Chip, {
+					"data-slot": "tags-input-chip",
+					className: valueChipClasses,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: tag
+					}), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+						"aria-label": removeLabel(tag),
+						className: chipRemoveClasses,
+						children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
+					})]
+				}, tag)), /* @__PURE__ */ jsx(Combobox.Input, {
+					ref,
+					id,
+					"data-slot": "tags-input-input",
+					placeholder: selected.length > 0 ? "" : placeholder,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					onKeyDown: handleKeyDown,
+					className: cn(bareControlClasses, "h-control-sm w-auto min-w-[6ch]")
+				})] }) })
+			})
+		}), suggestions === void 0 ? null : /* @__PURE__ */ jsx(Combobox.Portal, {
+			...portalProps,
+			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+				className: listboxPositionerClasses,
+				sideOffset,
+				children: /* @__PURE__ */ jsx(Combobox.Popup, {
+					"data-slot": "tags-input-popup",
+					className: cn(listboxPopupClasses, popupClassName),
+					children: /* @__PURE__ */ jsx(Combobox.List, {
+						className: listboxListClasses,
+						children: (item) => /* @__PURE__ */ jsx(Combobox.Item, {
+							value: item,
+							"data-slot": "tags-input-item",
+							className: listboxItemClasses,
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: item
+							})
+						}, item)
+					})
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { TagsInput };

package/dist/forms/textarea.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+//#region src/forms/textarea.d.ts
+interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
+  /** Extra classes, merged over the chassis. */
+  className?: string;
+  /** Visible rows before the box starts scrolling. Defaults to `3`. */
+  rows?: number;
+}
+/**
+ * The multi-line text control.
+ *
+ * Rendered through Base UI's `Field.Control`, so it joins a {@link Field} on the
+ * same terms as {@link Input} — label wiring, `aria-describedby`, `data-invalid`
+ * — while still being a real `<textarea>`.
+ *
+ * Wears the recessed chassis minus the fixed control height: a textarea's job is
+ * to be taller than one rung. Height comes from `rows`, and the user may drag it
+ * taller (`resize-y`) but never wider, which would break the panel grid.
+ *
+ * @example
+ * <Textarea placeholder="Notes for the operator" />
+ * @example
+ * <Field><FieldLabel>Cue notes</FieldLabel><Textarea rows={6} /></Field>
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { Textarea, TextareaProps };

package/dist/forms/textarea.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { controlSurface } from "./_chassis.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/forms/textarea.tsx
+/**
+* The multi-line text control.
+*
+* Rendered through Base UI's `Field.Control`, so it joins a {@link Field} on the
+* same terms as {@link Input} — label wiring, `aria-describedby`, `data-invalid`
+* — while still being a real `<textarea>`.
+*
+* Wears the recessed chassis minus the fixed control height: a textarea's job is
+* to be taller than one rung. Height comes from `rows`, and the user may drag it
+* taller (`resize-y`) but never wider, which would break the panel grid.
+*
+* @example
+* <Textarea placeholder="Notes for the operator" />
+* @example
+* <Field><FieldLabel>Cue notes</FieldLabel><Textarea rows={6} /></Field>
+*/
+const Textarea = React.forwardRef(function Textarea({ className, rows = 3, ...elementProps }, ref) {
+	const controlProps = elementProps;
+	return /* @__PURE__ */ jsx(Field.Control, {
+		render: /* @__PURE__ */ jsx("textarea", {
+			ref,
+			rows
+		}),
+		"data-slot": "textarea",
+		className: cn(controlSurface, "resize-y px-(--cue-space-4) py-(--cue-space-3) text-(length:--cue-text-ui) leading-relaxed", className),
+		...controlProps
+	});
+});
+//#endregion
+export { Textarea };