@cueplusplus/ui 0.1.0

package/dist/forms/multi-select.d.ts

@@ -0,0 +1,62 @@
+import { FormControlSize } from "./_chassis.js";
+import { ComboboxOption } from "./combobox.js";
+import * as React from "react";
+//#region src/forms/multi-select.d.ts
+interface MultiSelectProps {
+  /** The rows, in display order. Base UI filters them against what is typed. */
+  items: readonly ComboboxOption[];
+  /** Selected values. Use with `onValueChange` for a controlled field. */
+  value?: readonly string[];
+  /** Initially selected values for an uncontrolled field. */
+  defaultValue?: readonly string[];
+  /** Called with the full selection after every add or remove. */
+  onValueChange?: (value: string[]) => void;
+  /** Shown while nothing is selected — suppressed once chips fill the field. */
+  placeholder?: string;
+  /** Shown in place of the list when the query matches nothing. */
+  emptyMessage?: React.ReactNode;
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Prevent opening and grey the field out. */
+  disabled?: boolean;
+  /** Require at least one value before the owning form submits. */
+  required?: 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 chip's remove button, given the row's label. Defaults
+   * to ``(label) => `Remove ${label}` ``.
+   */
+  removeLabel?: (label: 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;
+}
+/**
+ * Several values out of a known set, each shown as a removable chip.
+ *
+ * The chips live *inside* the field rather than under it, which is what makes
+ * the control honest about its own size: a selection of nine trusses is visibly
+ * nine trusses tall, and nothing is hidden behind a "+6 more" the user has to
+ * open something to read. That is also why the field takes `min-h-control-*`
+ * instead of a fixed height.
+ *
+ * Backspace in an empty input removes the last chip and the chips themselves are
+ * arrow-key navigable — both come from Base UI's `Combobox.Chips`, and both are
+ * the parts hand-rolled multi-selects forget.
+ *
+ * @example
+ * <MultiSelect aria-label="Trusses" items={trusses} value={picked} onValueChange={setPicked} />
+ */
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { MultiSelect, MultiSelectProps };

package/dist/forms/multi-select.js

@@ -0,0 +1,107 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { bareControlClasses, controlGroupFocusClasses, controlSurface } from "./_chassis.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { CrossGlyph, TickGlyph } from "./_glyphs.js";
+import { chipFieldClasses, chipRemoveClasses, listboxEmptyClasses, listboxIndicatorClasses, 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/multi-select.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)"
+};
+/**
+* Several values out of a known set, each shown as a removable chip.
+*
+* The chips live *inside* the field rather than under it, which is what makes
+* the control honest about its own size: a selection of nine trusses is visibly
+* nine trusses tall, and nothing is hidden behind a "+6 more" the user has to
+* open something to read. That is also why the field takes `min-h-control-*`
+* instead of a fixed height.
+*
+* Backspace in an empty input removes the last chip and the chips themselves are
+* arrow-key navigable — both come from Base UI's `Combobox.Chips`, and both are
+* the parts hand-rolled multi-selects forget.
+*
+* @example
+* <MultiSelect aria-label="Trusses" items={trusses} value={picked} onValueChange={setPicked} />
+*/
+const MultiSelect = React.forwardRef(function MultiSelect({ items, value, defaultValue, onValueChange, placeholder, emptyMessage = "No matches", size = "md", disabled, required, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, removeLabel = (label) => `Remove ${label}`, className, popupClassName, sideOffset = 4 }, ref) {
+	const portalProps = useCuePortalProps();
+	const resolve = React.useCallback((keys) => keys === void 0 ? void 0 : keys.map((key) => items.find((item) => item.value === key)).filter((item) => item !== void 0), [items]);
+	const handleValueChange = React.useCallback((next) => {
+		onValueChange?.(next.map((item) => item.value));
+	}, [onValueChange]);
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		multiple: true,
+		items,
+		value: resolve(value),
+		defaultValue: resolve(defaultValue),
+		onValueChange: onValueChange === void 0 ? void 0 : handleValueChange,
+		disabled,
+		required,
+		name,
+		children: [/* @__PURE__ */ jsx(Combobox.InputGroup, {
+			"data-slot": "multi-select-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((item) => /* @__PURE__ */ jsxs(Combobox.Chip, {
+					"data-slot": "multi-select-chip",
+					className: valueChipClasses,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: item.label
+					}), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+						"aria-label": removeLabel(item.label),
+						className: chipRemoveClasses,
+						children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
+					})]
+				}, item.value)), /* @__PURE__ */ jsx(Combobox.Input, {
+					ref,
+					id,
+					"data-slot": "multi-select-input",
+					placeholder: selected.length > 0 ? "" : placeholder,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					className: cn(bareControlClasses, "h-control-sm w-auto min-w-[6ch]")
+				})] }) })
+			})
+		}), /* @__PURE__ */ jsx(Combobox.Portal, {
+			...portalProps,
+			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+				className: listboxPositionerClasses,
+				sideOffset,
+				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+					"data-slot": "multi-select-popup",
+					className: cn(listboxPopupClasses, popupClassName),
+					children: [/* @__PURE__ */ jsx(Combobox.Empty, {
+						className: listboxEmptyClasses,
+						children: emptyMessage
+					}), /* @__PURE__ */ jsx(Combobox.List, {
+						className: listboxListClasses,
+						children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
+							value: item,
+							disabled: item.disabled,
+							"data-slot": "multi-select-item",
+							className: listboxItemClasses,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: listboxIndicatorClasses,
+								children: /* @__PURE__ */ jsx(Combobox.ItemIndicator, { children: /* @__PURE__ */ jsx(TickGlyph, { className: "size-icon-sm" }) })
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: item.label
+							})]
+						}, item.value)
+					})]
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { MultiSelect };

package/dist/forms/number-field.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/forms/number-field.d.ts
+interface NumberFieldProps extends Omit<NumberField.Root.Props, "className"> {
+  /** Extra classes, merged over the group chassis. */
+  className?: string;
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: "sm" | "md";
+  /** Accessible name for the decrement button. Defaults to `"Decrease"`. */
+  decrementLabel?: string;
+  /** Accessible name for the increment button. Defaults to `"Increase"`. */
+  incrementLabel?: string;
+  /** Placeholder shown while the field is empty. */
+  placeholder?: string;
+  /** Accessible name for the text control, when no {@link FieldLabel} names it. */
+  "aria-label"?: string;
+}
+/**
+ * A numeric control with explicit − / + affordances and no native spinners.
+ *
+ * Native `<input type="number">` spinners are unusable at console density — a
+ * pair of 4px arrows that only appear on hover — so this is a text input with
+ * `inputMode="numeric"` flanked by real buttons, which is also what makes it
+ * touch-usable. Arrow keys step, Shift steps by `largeStep`, Alt by `smallStep`,
+ * and values typed out of range are clamped to `min`/`max` on blur.
+ *
+ * The group owns the rim; the input and both buttons render bare inside it, so
+ * the whole cluster reads as one field and focus feedback moves to
+ * `focus-within`.
+ *
+ * @example
+ * <NumberField aria-label="Fade time" defaultValue={3} min={0} max={600} step={0.5} />
+ * @example
+ * <Field><FieldLabel>Universe</FieldLabel><NumberField min={1} max={512} /></Field>
+ */
+declare const NumberField$1: React.ForwardRefExoticComponent<Omit<NumberFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { NumberField$1 as NumberField, NumberFieldProps };

package/dist/forms/number-field.js

@@ -0,0 +1,64 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { bareControlClasses, controlGroupFocusClasses, controlSurface } from "./_chassis.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/forms/number-field.tsx
+/** The − and + affordances: square, borderless, and quiet until hovered. */
+const stepperClasses = "flex shrink-0 items-center justify-center border-0 bg-transparent p-0 font-mono text-fg-muted leading-none select-none outline-none transition-colors hover:bg-surface-2 hover:text-fg 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";
+/**
+* A numeric control with explicit − / + affordances and no native spinners.
+*
+* Native `<input type="number">` spinners are unusable at console density — a
+* pair of 4px arrows that only appear on hover — so this is a text input with
+* `inputMode="numeric"` flanked by real buttons, which is also what makes it
+* touch-usable. Arrow keys step, Shift steps by `largeStep`, Alt by `smallStep`,
+* and values typed out of range are clamped to `min`/`max` on blur.
+*
+* The group owns the rim; the input and both buttons render bare inside it, so
+* the whole cluster reads as one field and focus feedback moves to
+* `focus-within`.
+*
+* @example
+* <NumberField aria-label="Fade time" defaultValue={3} min={0} max={600} step={0.5} />
+* @example
+* <Field><FieldLabel>Universe</FieldLabel><NumberField min={1} max={512} /></Field>
+*/
+const NumberField$1 = React.forwardRef(function NumberField$2({ className, size = "md", decrementLabel = "Decrease", incrementLabel = "Increase", placeholder, "aria-label": ariaLabel, ...elementProps }, ref) {
+	const rung = size === "sm" ? "sm" : "md";
+	return /* @__PURE__ */ jsx(NumberField.Root, {
+		ref,
+		"data-slot": "number-field",
+		...elementProps,
+		children: /* @__PURE__ */ jsxs(NumberField.Group, {
+			"data-slot": "number-field-group",
+			className: cn(controlSurface, "flex items-stretch overflow-hidden", rung === "sm" ? "h-control-sm text-(length:--cue-text-label)" : "h-control-md text-(length:--cue-text-ui)", controlGroupFocusClasses, className),
+			children: [
+				/* @__PURE__ */ jsx(NumberField.Decrement, {
+					"aria-label": decrementLabel,
+					className: cn(stepperClasses, rung === "sm" ? "w-control-sm" : "w-control-md"),
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "−"
+					})
+				}),
+				/* @__PURE__ */ jsx(NumberField.Input, {
+					"aria-label": ariaLabel,
+					placeholder,
+					className: cn(bareControlClasses, "w-full px-(--cue-space-2) text-center tabular-nums", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none")
+				}),
+				/* @__PURE__ */ jsx(NumberField.Increment, {
+					"aria-label": incrementLabel,
+					className: cn(stepperClasses, rung === "sm" ? "w-control-sm" : "w-control-md"),
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "+"
+					})
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { NumberField$1 as NumberField };

package/dist/forms/otp-field.d.ts

@@ -0,0 +1,54 @@
+import { FormControlSize } from "./_chassis.js";
+import * as React from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/forms/otp-field.d.ts
+interface OTPFieldProps extends Omit<OTPField.Root.Props, "className" | "children" | "length"> {
+  /** How many characters the code has. Defaults to `6`. */
+  length?: number;
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /**
+   * Insert a separator after every `groupSize` slots — `groupSize={3}` renders a
+   * six-character code as `123 456`, which is how people read one off a screen.
+   */
+  groupSize?: number;
+  /** What sits between groups. Defaults to `"–"`. Always `aria-hidden`. */
+  separator?: React.ReactNode;
+  /**
+   * Accessible name for the field. Names the group *and*, through a visually
+   * hidden `<label>`, the first slot — the ARIA pattern for a code field. Leave
+   * it off inside a {@link Field}, which supplies a real label.
+   */
+  "aria-label"?: string;
+  /** Id of the first slot. Generated when omitted, so the hidden label can target it. */
+  id?: string;
+  /**
+   * Accessible name for slot `index` (1-based here, since slot 0 is named by the
+   * field label) of `length`. Defaults to
+   * ``(index, length) => `Character ${index + 1} of ${length}` ``.
+   */
+  slotLabel?: (index: number, length: number) => string;
+  /** Extra classes for the row. */
+  className?: string;
+  /** Extra classes for every slot. */
+  slotClassName?: string;
+}
+/**
+ * A one-time code, one character per box.
+ *
+ * The boxes are not decoration: they tell the user how long the code is before
+ * they start typing, which is the whole reason this pattern beats a plain text
+ * input. Paste, arrow keys, Backspace across slot boundaries and the
+ * `one-time-code` autofill hint all come from Base UI.
+ *
+ * Slots ride the recessed chassis — sunken fill, hairline rim — so a code field
+ * reads as "type here" like every other input in the system, just squared off.
+ *
+ * @example
+ * <OTPField aria-label="Verification code" onValueComplete={submit} />
+ * @example
+ * <OTPField aria-label="Recovery code" length={8} groupSize={4} validationType="alphanumeric" />
+ */
+declare const OTPField$1: React.ForwardRefExoticComponent<Omit<OTPFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { OTPField$1 as OTPField, OTPFieldProps };

package/dist/forms/otp-field.js

@@ -0,0 +1,59 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { controlSurface } from "./_chassis.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/forms/otp-field.tsx
+/** One square slot per rung of the control ladder. */
+const SLOT_SIZES = {
+	sm: "size-control-sm text-(length:--cue-text-ui)",
+	md: "size-control-md text-(length:--cue-text-body)",
+	lg: "size-control-lg text-(length:--cue-text-emphasis)"
+};
+/**
+* A one-time code, one character per box.
+*
+* The boxes are not decoration: they tell the user how long the code is before
+* they start typing, which is the whole reason this pattern beats a plain text
+* input. Paste, arrow keys, Backspace across slot boundaries and the
+* `one-time-code` autofill hint all come from Base UI.
+*
+* Slots ride the recessed chassis — sunken fill, hairline rim — so a code field
+* reads as "type here" like every other input in the system, just squared off.
+*
+* @example
+* <OTPField aria-label="Verification code" onValueComplete={submit} />
+* @example
+* <OTPField aria-label="Recovery code" length={8} groupSize={4} validationType="alphanumeric" />
+*/
+const OTPField$1 = React.forwardRef(function OTPField$2({ length = 6, size = "md", groupSize, separator = "–", "aria-label": ariaLabel, id, slotLabel = (index, total) => `Character ${index + 1} of ${total}`, className, slotClassName, ...elementProps }, ref) {
+	const generatedId = React.useId();
+	const fieldId = id ?? generatedId;
+	const slotClasses = cn(controlSurface, "w-auto p-0 text-center tabular-nums", SLOT_SIZES[size], slotClassName);
+	return /* @__PURE__ */ jsxs(OTPField.Root, {
+		ref,
+		id: fieldId,
+		length,
+		"aria-label": ariaLabel,
+		"data-slot": "otp-field",
+		className: cn("flex items-center gap-(--cue-space-2)", className),
+		...elementProps,
+		children: [ariaLabel === void 0 ? null : /* @__PURE__ */ jsx("label", {
+			htmlFor: fieldId,
+			className: "sr-only",
+			children: ariaLabel
+		}), Array.from({ length }, (_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [groupSize !== void 0 && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "otp-field-separator",
+			"aria-hidden": "true",
+			className: "px-(--cue-space-1) font-mono text-fg-subtle select-none",
+			children: separator
+		}) : null, /* @__PURE__ */ jsx(OTPField.Input, {
+			"data-slot": "otp-field-slot",
+			"aria-label": index === 0 ? void 0 : slotLabel(index, length),
+			className: slotClasses
+		})] }, index))]
+	});
+});
+//#endregion
+export { OTPField$1 as OTPField };

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

@@ -0,0 +1,46 @@
+import { FormControlSize } from "./_chassis.js";
+import { InputProps } from "./input.js";
+import * as React from "react";
+//#region src/forms/password-input.d.ts
+interface PasswordInputProps extends Omit<InputProps, "type" | "size"> {
+  /** Reveal the value. Use with `onRevealedChange` for a controlled toggle. */
+  revealed?: boolean;
+  /** Initially revealed, for an uncontrolled toggle. Defaults to `false`. */
+  defaultRevealed?: boolean;
+  /** Called with the new reveal state. */
+  onRevealedChange?: (revealed: boolean) => void;
+  /**
+   * Offer the reveal affordance at all. Defaults to `true`. Switch it off for a
+   * value the product must never re-display — a stored secret the user is
+   * replacing rather than reading.
+   */
+  showReveal?: boolean;
+  /** Accessible name while masked. Defaults to `"Show password"`. */
+  revealLabel?: string;
+  /** Accessible name while revealed. Defaults to `"Hide password"`. */
+  hideLabel?: string;
+  /** Rung of the control ladder. Defaults to `"md"`. */
+  size?: FormControlSize;
+  /** Extra classes for the group that wraps the input and the reveal button. */
+  className?: string;
+}
+/**
+ * A masked text field with a reveal control.
+ *
+ * The reveal is a **toggle button carrying `aria-pressed`**, not a checkbox and
+ * not a bare icon: a screen-reader user needs to know both what it does and
+ * which way it currently is, and `aria-pressed` is the one attribute that says
+ * both. The label swaps with the state for the same reason.
+ *
+ * Revealing switches `type` between `password` and `text` rather than painting
+ * over the characters, so the browser's own autofill and password managers keep
+ * working.
+ *
+ * @example
+ * <PasswordInput aria-label="Service key" value={key} onValueChange={setKey} />
+ * @example
+ * <Field><FieldLabel>Token</FieldLabel><PasswordInput showReveal={false} /></Field>
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { PasswordInput, PasswordInputProps };

package/dist/forms/password-input.js

@@ -0,0 +1,62 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { InputGroup } from "./input-group.js";
+import { Input } from "./input.js";
+import { EyeGlyph, EyeOffGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/forms/password-input.tsx
+/**
+* A masked text field with a reveal control.
+*
+* The reveal is a **toggle button carrying `aria-pressed`**, not a checkbox and
+* not a bare icon: a screen-reader user needs to know both what it does and
+* which way it currently is, and `aria-pressed` is the one attribute that says
+* both. The label swaps with the state for the same reason.
+*
+* Revealing switches `type` between `password` and `text` rather than painting
+* over the characters, so the browser's own autofill and password managers keep
+* working.
+*
+* @example
+* <PasswordInput aria-label="Service key" value={key} onValueChange={setKey} />
+* @example
+* <Field><FieldLabel>Token</FieldLabel><PasswordInput showReveal={false} /></Field>
+*/
+const PasswordInput = React.forwardRef(function PasswordInput({ className, revealed: revealedProp, defaultRevealed = false, onRevealedChange, showReveal = true, revealLabel = "Show password", hideLabel = "Hide password", size, disabled, ...elementProps }, ref) {
+	const [uncontrolled, setUncontrolled] = React.useState(defaultRevealed);
+	const revealed = revealedProp ?? uncontrolled;
+	const toggle = React.useCallback(() => {
+		const next = !revealed;
+		if (revealedProp === void 0) setUncontrolled(next);
+		onRevealedChange?.(next);
+	}, [
+		onRevealedChange,
+		revealed,
+		revealedProp
+	]);
+	return /* @__PURE__ */ jsx(InputGroup, {
+		size,
+		className,
+		trailing: showReveal ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-pressed": revealed,
+			"aria-label": revealed ? hideLabel : revealLabel,
+			disabled,
+			onClick: toggle,
+			className: "flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 aria-pressed:text-fg",
+			children: /* @__PURE__ */ jsx(revealed ? EyeOffGlyph : EyeGlyph, { className: "size-icon-md" })
+		}) : void 0,
+		children: /* @__PURE__ */ jsx(Input, {
+			ref,
+			type: revealed ? "text" : "password",
+			"data-slot": "password-input",
+			spellCheck: false,
+			disabled,
+			className: cn("[&::-ms-reveal]:hidden"),
+			...elementProps
+		})
+	});
+});
+//#endregion
+export { PasswordInput };

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/forms/radio-group.d.ts
+interface RadioGroupProps extends Omit<RadioGroup.Props, "className"> {
+  /** Extra classes, merged over the stack defaults. */
+  className?: string;
+  /** Lay the options out in a column (default) or a row. */
+  orientation?: "vertical" | "horizontal";
+}
+/**
+ * One-of-many selection: a roving-tabindex group of {@link Radio}s sharing a
+ * single value.
+ *
+ * Arrow keys move *and* select, per the WAI-ARIA radio group pattern that Base
+ * UI implements — so the whole group is one tab stop, which is what keeps a
+ * dense settings panel navigable.
+ *
+ * @example
+ * <RadioGroup aria-label="Blend mode" value={mode} onValueChange={setMode}>
+ *   <Radio value="htp" label="HTP" />
+ *   <Radio value="ltp" label="LTP" />
+ * </RadioGroup>
+ */
+declare const RadioGroup$1: React.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<Radio.Root.Props, "className"> {
+  /** Extra classes, merged over the dot defaults. */
+  className?: string;
+  /**
+   * Inline label rendered beside the dot and wrapped with it in a `<label>`, so
+   * the text is both the accessible name and part of the hit target.
+   */
+  label?: React.ReactNode;
+  /** Rung of the density icon ladder for the dot. Defaults to `"md"`. */
+  size?: "sm" | "md";
+}
+/**
+ * One option inside a {@link RadioGroup}.
+ *
+ * Round, to say "exactly one" the way a square {@link Checkbox} says "any
+ * number". Checked draws an accent rim with an accent core rather than a solid
+ * fill, so the selected option stays legible against the sunken field colour on
+ * every theme.
+ *
+ * @example
+ * <Radio value="htp" label="Highest takes precedence" />
+ */
+declare const Radio$1: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupProps, RadioProps };

package/dist/forms/radio-group.js

@@ -0,0 +1,64 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/forms/radio-group.tsx
+/**
+* One-of-many selection: a roving-tabindex group of {@link Radio}s sharing a
+* single value.
+*
+* Arrow keys move *and* select, per the WAI-ARIA radio group pattern that Base
+* UI implements — so the whole group is one tab stop, which is what keeps a
+* dense settings panel navigable.
+*
+* @example
+* <RadioGroup aria-label="Blend mode" value={mode} onValueChange={setMode}>
+*   <Radio value="htp" label="HTP" />
+*   <Radio value="ltp" label="LTP" />
+* </RadioGroup>
+*/
+const RadioGroup$1 = React.forwardRef(function RadioGroup$2({ className, orientation = "vertical", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		ref,
+		"data-slot": "radio-group",
+		"data-orientation": orientation,
+		className: cn("flex", orientation === "horizontal" ? "flex-row flex-wrap items-center gap-(--cue-space-5)" : "flex-col gap-(--cue-space-2)", className),
+		...elementProps
+	});
+});
+/**
+* One option inside a {@link RadioGroup}.
+*
+* Round, to say "exactly one" the way a square {@link Checkbox} says "any
+* number". Checked draws an accent rim with an accent core rather than a solid
+* fill, so the selected option stays legible against the sunken field colour on
+* every theme.
+*
+* @example
+* <Radio value="htp" label="Highest takes precedence" />
+*/
+const Radio$1 = React.forwardRef(function Radio$2({ className, label, size = "md", ...elementProps }, ref) {
+	const labelId = React.useId();
+	const hasLabel = label !== void 0;
+	const dot = /* @__PURE__ */ jsx(Radio.Root, {
+		ref,
+		"data-slot": "radio",
+		"aria-labelledby": hasLabel ? labelId : void 0,
+		className: cn("flex shrink-0 items-center justify-center rounded-full border border-border bg-sunken text-accent outline-none transition-colors", size === "sm" ? "size-icon-sm" : "size-icon-md", "hover:border-border-strong", "data-[checked]:border-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(Radio.Indicator, { className: "block size-1/2 rounded-full bg-accent data-[unchecked]:hidden" })
+	});
+	if (!hasLabel) return dot;
+	return /* @__PURE__ */ jsxs("label", {
+		"data-slot": "radio-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: [dot, /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			children: label
+		})]
+	});
+});
+//#endregion
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup };