@cueplusplus/ui 0.13.0

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,39 @@
+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;
+  /**
+   * Accessible name for the textarea, when no `FieldLabel` names it. Declared
+   * here rather than left to the inherited attribute so the props table carries
+   * the row: a bare textarea outside a `Field` has no other way to be named.
+   */
+  "aria-label"?: string;
+  /**
+   * An example of what goes in the box, shown while it is empty. Not a name:
+   * it disappears on the first keystroke, so pair it with `aria-label` or a
+   * `FieldLabel`. Declared for the props-table row, as `aria-label` is above.
+   */
+  placeholder?: string;
+}
+/**
+ * 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-(--cue-leading-ui)", className),
+		...controlProps
+	});
+});
+//#endregion
+export { Textarea };

package/dist/forms/toggle-group.d.ts

@@ -0,0 +1,41 @@
+import { FormControlSize } from "./_chassis.js";
+import * as React from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/forms/toggle-group.d.ts
+interface ToggleGroupProps extends Omit<ToggleGroup.Props, "className" | "value" | "defaultValue" | "onValueChange" | "children"> {
+  /** The pressed values when controlled. Pass with `onValueChange`. */
+  value?: readonly string[];
+  /** The initially pressed values when uncontrolled. */
+  defaultValue?: readonly string[];
+  /** Called with every pressed value, in the order the toggles are declared. */
+  onValueChange?: (value: string[]) => void;
+  /** Rung of the control ladder for every toggle inside. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Extra classes for the group frame. */
+  className?: string;
+  /** The {@link Toggle}s, each carrying a `value`. */
+  children: React.ReactNode;
+}
+/**
+ * A cluster of {@link Toggle}s sharing one pressed state.
+ *
+ * The difference from {@link SegmentedControl} is not cosmetic: a toggle group
+ * can be **empty**. Pressing the pressed item unpresses it, so "no filter" is a
+ * reachable state — which is what a filter bar needs and what a view switcher
+ * must never offer. Reach for `SegmentedControl` when the answer is always one
+ * of N, and for this when the answer may be none, or several (`multiple`).
+ *
+ * Arrow-key roving focus and the pressed-state ARIA come from Base UI; this
+ * layer supplies the density rung (published to the children through context)
+ * and the flat frame-less layout — a group of toggles is a row of controls, not
+ * a boxed widget.
+ *
+ * @example
+ * <ToggleGroup aria-label="Layers" multiple value={layers} onValueChange={setLayers}>
+ *   <Toggle value="beams">Beams</Toggle>
+ *   <Toggle value="haze">Haze</Toggle>
+ * </ToggleGroup>
+ */
+declare const ToggleGroup$1: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupProps };

package/dist/forms/toggle-group.js

@@ -0,0 +1,56 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/forms/toggle-group.tsx
+/**
+* The rung the group publishes to the {@link Toggle}s inside it, so a caller
+* sizes the cluster once instead of repeating `size` on every member.
+*
+* `null` outside a group — a lone toggle then falls back to its own default.
+*
+* @internal Not part of the public API; read by `toggle.tsx`.
+*/
+const ToggleGroupSizeContext = React.createContext(null);
+/**
+* A cluster of {@link Toggle}s sharing one pressed state.
+*
+* The difference from {@link SegmentedControl} is not cosmetic: a toggle group
+* can be **empty**. Pressing the pressed item unpresses it, so "no filter" is a
+* reachable state — which is what a filter bar needs and what a view switcher
+* must never offer. Reach for `SegmentedControl` when the answer is always one
+* of N, and for this when the answer may be none, or several (`multiple`).
+*
+* Arrow-key roving focus and the pressed-state ARIA come from Base UI; this
+* layer supplies the density rung (published to the children through context)
+* and the flat frame-less layout — a group of toggles is a row of controls, not
+* a boxed widget.
+*
+* @example
+* <ToggleGroup aria-label="Layers" multiple value={layers} onValueChange={setLayers}>
+*   <Toggle value="beams">Beams</Toggle>
+*   <Toggle value="haze">Haze</Toggle>
+* </ToggleGroup>
+*/
+const ToggleGroup$1 = React.forwardRef(function ToggleGroup$2({ value, defaultValue, onValueChange, size = "md", orientation, className, children, ...groupProps }, ref) {
+	const handleValueChange = React.useCallback((next) => {
+		onValueChange?.(next);
+	}, [onValueChange]);
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		ref,
+		"data-slot": "toggle-group",
+		value,
+		defaultValue,
+		onValueChange: onValueChange === void 0 ? void 0 : handleValueChange,
+		orientation,
+		className: cn("inline-flex items-center gap-(--cue-space-1)", orientation === "vertical" && "flex-col items-stretch", className),
+		...groupProps,
+		children: /* @__PURE__ */ jsx(ToggleGroupSizeContext.Provider, {
+			value: size,
+			children
+		})
+	});
+});
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupSizeContext };

package/dist/forms/toggle.d.ts

@@ -0,0 +1,47 @@
+import { FormControlSize } from "./_chassis.js";
+import * as React from "react";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/forms/toggle.d.ts
+interface ToggleProps extends Omit<Toggle.Props, "className"> {
+  /** Extra classes, merged over the recipe. */
+  className?: string;
+  /**
+   * Rung of the control ladder. Defaults to the enclosing {@link ToggleGroup}'s
+   * rung, or `"md"` outside one.
+   */
+  size?: FormControlSize;
+  /**
+   * Optional leading icon component (e.g. a lucide icon). Rendered `aria-hidden`
+   * and sized to the density icon token. With no `children` the toggle collapses
+   * to a square target instead of a wide pill.
+   */
+  icon?: React.ElementType;
+  /** The label. Leave it off for an icon-only toggle — and then pass `aria-label`. */
+  children?: React.ReactNode;
+  /**
+   * Accessible name. An icon-only toggle has no text to be named by, so this is
+   * its name; declared here rather than left to the inherited attribute so the
+   * props table carries the row the sentence above tells a caller to pass.
+   */
+  "aria-label"?: string;
+}
+/**
+ * A two-state button: solo, mute, snap-to-grid, "show hidden".
+ *
+ * Distinct from {@link Switch}, which sets a *setting* and reads as a physical
+ * throw; a toggle is a **button that stays down**, so it belongs in a toolbar
+ * next to other buttons rather than in a settings list. `aria-pressed` — not
+ * `aria-checked` — is what says so to assistive technology, and Base UI wires
+ * that for us.
+ *
+ * Inside a {@link ToggleGroup} it inherits the group's density rung and joins
+ * its roving-focus ring; on its own it is a perfectly good standalone control.
+ *
+ * @example
+ * <Toggle aria-label="Solo" icon={Headphones} pressed={solo} onPressedChange={setSolo} />
+ * @example
+ * <Toggle defaultPressed>Snap</Toggle>
+ */
+declare const Toggle$1: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Toggle$1 as Toggle, ToggleProps };