@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/inputs/CheckboxInput.d.ts

@@ -1,35 +1,105 @@
-import { InputSize, InputVariant } from "./Input";
-export interface CheckboxInputProps {
-    /**
-     * Unchecked fill color. The checked fill is a state color and stays
-     * `background.primaryAlt` so the tick keeps its contrast. Unlike the field
-     * inputs, `TRANSPARENT` keeps the hairline border here — without it the box
-     * would be invisible. @default InputVariant.PRIMARY
-     */
-    variant?: InputVariant;
-    /** Box size — a hit target, so it steps 12 / 16 / 20px, not off the type scale.
-     * @default InputSize.MEDIUM */
-    size?: InputSize;
-    /** Controlled state. The checkbox holds none of its own. */
-    isChecked: boolean;
-    /** Draw a dash instead of a tick — for a partially-selected group. */
+import { type AriaAttributes, type ChangeEvent, type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
+/** Rung of the checkbox (Constitution III-A.4). The box is the rung's icon size. */
+export declare enum CheckboxInputSize {
+    /** 12px box, caption label. */
+    X_SMALL = "X_SMALL",
+    /** 14px box, body_sm label. */
+    SMALL = "SMALL",
+    /** 16px box, body_md label. The default; the 1.x MEDIUM box. */
+    MEDIUM = "MEDIUM",
+    /** 16px box, body_lg label. */
+    LARGE = "LARGE",
+    /** 18px box, body_lg label. */
+    X_LARGE = "X_LARGE"
+}
+/** Fill of the unchecked box (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+export declare enum CheckboxInputVariant {
+    /** `background.base`. */
+    BASE = "BASE",
+    /** `background.primary`. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary`. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary`. */
+    TERTIARY = "TERTIARY"
+}
+/** Native `<input>` attributes, typed as React types them. */
+type NativeInputAttributes = InputHTMLAttributes<HTMLInputElement>;
+/** The native passthrough allowlist, each documented. */
+interface CheckboxInputNativeProps {
+    /** Form field name, passed to the `<input>`. */
+    name?: NativeInputAttributes["name"];
+    /** Focus the checkbox on mount. */
+    autoFocus?: NativeInputAttributes["autoFocus"];
+    /** Focus handler on the `<input>`. */
+    onFocus?: NativeInputAttributes["onFocus"];
+    /** Blur handler on the `<input>`. */
+    onBlur?: NativeInputAttributes["onBlur"];
+}
+export interface CheckboxInputProps extends AriaAttributes, CheckboxInputNativeProps {
+    /** Controlled checked state. Pass it with `onChange`. */
+    isChecked?: boolean;
+    /**
+     * Initial checked state while uncontrolled.
+     * @default false
+     */
+    defaultIsChecked?: boolean;
+    /** Called with the new state when the user toggles the box; the native change event is second (for a click, `event.nativeEvent` is the `MouseEvent`). */
+    onChange?: (isChecked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Shows a dash and reports "mixed", for a parent of a partly selected group. Visual only: the next toggle still flips `isChecked`.
+     * @default false
+     */
     isIndeterminate?: boolean;
-    /** Text beside the box. Omit it and set `ariaLabel` instead. */
+    /** Text beside the box. Clicking it toggles the box. */
     label?: string;
+    /** Help copy under the label. Text and inline `Link`s only. */
+    description?: ReactNode;
+    /**
+     * Rung: sets the box, the type steps and the gap.
+     * @default CheckboxInputSize.MEDIUM
+     */
+    size?: CheckboxInputSize;
+    /**
+     * Fill of the unchecked box, from the surface set. Ignored with `isGhost`.
+     * @default CheckboxInputVariant.PRIMARY
+     */
+    variant?: CheckboxInputVariant;
+    /**
+     * Ghost unchecked box: no fill, the hairline kept (1.x `TRANSPARENT`). For checkboxes on a
+     * surface whose own fill should show through, such as a selected table row.
+     * @default false
+     */
+    isGhost?: boolean;
+    /**
+     * Asterisk after the label and `aria-required`. It does no validation.
+     * @default false
+     */
     isRequired?: boolean;
+    /**
+     * Error border and `aria-invalid`. For a message, wrap the checkbox in `Field error`.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Not focusable or toggleable. Shows the disabled look.
+     * @default false
+     */
     isDisabled?: boolean;
-    /** The originating event is passed through so callers can read modifiers. */
-    onChange: (checked: boolean, event?: React.MouseEvent | React.KeyboardEvent) => void;
-    /** Accessible name — required when the checkbox renders without a `label`. */
+    /** Accessible name when there is no `label` and no wrapping `Field` label. */
     ariaLabel?: string;
-    /** Stops the click from bubbling, e.g. into a clickable table row. */
-    stopClickPropagation?: boolean;
+    /**
+     * DOM id of the `<input>`. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the `<input>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<label>`. */
+    className?: string;
+    /** Inline style on the root `<label>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * A checkbox with an optional label. Fully controlled — you own `isChecked`.
- *
- * `isIndeterminate` is purely visual and does not change what `onChange`
- * reports; the callback still flips against `isChecked`.
- */
-declare const CheckboxInput: ({ variant, size, isChecked, isIndeterminate, label, isRequired, isDisabled, onChange, ariaLabel, stopClickPropagation, }: CheckboxInputProps) => import("react").JSX.Element;
+/** A labelled checkbox row: a native `<input type="checkbox">` drawn as a box, toggled by the whole row. */
+declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default CheckboxInput;

package/dist/inputs/CheckboxInput.js

@@ -1,104 +1,234 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextVariant } from "../text/Text.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
-import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { useField } from "../hooks/useField.js";
 import RequiredMarker from "../text/RequiredMarker.js";
-import { InputSize, InputVariant, getInputControlSize, getInputSurfaceColor } from "./Input.js";
+import { hasContent, isFilled } from "./internal/predicates.js";
+import { joinIds } from "./internal/fieldWiring.js";
 /* empty css                        */
 import { styled } from "@linaria/react";
+import { forwardRef, useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
 import { CheckIcon, MinusIcon } from "@phosphor-icons/react";
 //#region src/inputs/CheckboxInput.tsx
-var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var _exp3 = () => ({ theme }) => theme.color.border.selected;
-var CheckboxContainer = withTheme(/*#__PURE__*/ styled("div")({
-	name: "CheckboxContainer",
-	class: "cythikj",
-	propsAsIs: false,
-	vars: {
-		"cythikj-0": [_exp()],
-		"cythikj-1": [_exp2()],
-		"cythikj-2": [_exp3()]
-	}
-}));
-var _exp5 = () => ({ $size }) => getInputControlSize($size);
-var _exp6 = () => ({ theme }) => theme.color.border.primary;
-var _exp7 = () => ({ theme, $variant, $isChecked, $isIndeterminate }) => $isChecked || $isIndeterminate ? theme.color.background.primaryAlt : getInputSurfaceColor(theme, $variant);
-var CheckboxWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "CheckboxWrapper",
-	class: "c1f4v2sg",
-	propsAsIs: false,
-	vars: {
-		"c1f4v2sg-0": [_exp5()],
-		"c1f4v2sg-1": [_exp6()],
-		"c1f4v2sg-2": [_exp7()]
-	}
-}));
-/** The tick sits inside the box, so it runs a step under `getInputIconSize`. */
-var CHECKBOX_INPUT_SIZE_TO_ICON_SIZE_MAP = {
-	[InputSize.SMALL]: 10,
-	[InputSize.MEDIUM]: 12,
-	[InputSize.LARGE]: 14
-};
 /**
-* A checkbox with an optional label. Fully controlled — you own `isChecked`.
+* One on/off choice the user confirms later, usually by submitting a form ("Email me when a sync
+* fails", "I accept the terms", one row of a table selection). A native
+* `<input type="checkbox">` drawn as a small box (`appearance: none`), with an optional `label`
+* and `description` beside it; the whole row is a `<label>`, so clicking the text toggles. It holds
+* a boolean with `isChecked` / `defaultIsChecked` / `onChange(isChecked, event)` and shows a dash
+* for a partly selected group (`isIndeterminate`, also set on the native element so it reads
+* "mixed"). Checked is the monochrome `solid.primary` fill with an on-solid tick.
 *
-* `isIndeterminate` is purely visual and does not change what `onChange`
-* reports; the callback still flips against `isChecked`.
+* It never validates and renders no message: wrap it in `Field error` for one. An immediate on/off
+* setting is `SwitchInput`. Replaces 1.x `CheckboxInput` (`InputSize` / `InputVariant` →
+* `CheckboxInputSize` / `CheckboxInputVariant`; controlled or uncontrolled; native input instead
+* of a `div role="checkbox"`; `stopClickPropagation` removed).
+*/
+/** Rung of the checkbox (Constitution III-A.4). The box is the rung's icon size. */
+var CheckboxInputSize = /* @__PURE__ */ function(CheckboxInputSize) {
+	/** 12px box, caption label. */
+	CheckboxInputSize["X_SMALL"] = "X_SMALL";
+	/** 14px box, body_sm label. */
+	CheckboxInputSize["SMALL"] = "SMALL";
+	/** 16px box, body_md label. The default; the 1.x MEDIUM box. */
+	CheckboxInputSize["MEDIUM"] = "MEDIUM";
+	/** 16px box, body_lg label. */
+	CheckboxInputSize["LARGE"] = "LARGE";
+	/** 18px box, body_lg label. */
+	CheckboxInputSize["X_LARGE"] = "X_LARGE";
+	return CheckboxInputSize;
+}({});
+/** Fill of the unchecked box (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+var CheckboxInputVariant = /* @__PURE__ */ function(CheckboxInputVariant) {
+	/** `background.base`. */
+	CheckboxInputVariant["BASE"] = "BASE";
+	/** `background.primary`. The default. */
+	CheckboxInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary`. */
+	CheckboxInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary`. */
+	CheckboxInputVariant["TERTIARY"] = "TERTIARY";
+	return CheckboxInputVariant;
+}({});
+/** The row: box column, then label and description. State lives in custom properties set here, so hovering anywhere lights the box. */
+var Root = /*#__PURE__*/ styled("label")({
+	name: "Root",
+	class: "gx-CheckboxInput-rythikj",
+	propsAsIs: false
+});
+/** As tall as the label's first line, so the box centers on it. */
+var Indicator = /*#__PURE__*/ styled("span")({
+	name: "Indicator",
+	class: "gx-CheckboxInput-Indicator-i1f4v2sg",
+	propsAsIs: false
+});
+/** The box's footprint; positions the mark over the input. */
+var BoxWrap = /*#__PURE__*/ styled("span")({
+	name: "BoxWrap",
+	class: "gx-CheckboxInput-BoxWrap-b1t4qwib",
+	propsAsIs: false
+});
+/** The native checkbox, drawn as the box. It is the focused element, so `FOCUS_RING` applies as written. */
+var Control = /*#__PURE__*/ styled("input")({
+	name: "Control",
+	class: "gx-CheckboxInput-Control-cig7nlw",
+	propsAsIs: false
+});
+/** The tick or dash, over the box; decorative and click-through. */
+var Mark = /*#__PURE__*/ styled("span")({
+	name: "Mark",
+	class: "gx-CheckboxInput-Mark-m15cg9sy",
+	propsAsIs: false
+});
+/** Label over description, Field's label-to-description gap. */
+var Content = /*#__PURE__*/ styled("span")({
+	name: "Content",
+	class: "gx-CheckboxInput-Content-c1o0d5kr",
+	propsAsIs: false
+});
+/** Box, first-line height and gap per rung: the box is the rung's icon size, the gap the rung's gap. */
+var CHECKBOX_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-CheckboxInput-X_SMALL-xdordyk",
+	["SMALL"]: "gx-CheckboxInput-SMALL-s1gpfkea",
+	["MEDIUM"]: "gx-CheckboxInput-MEDIUM-m57f3d1",
+	["LARGE"]: "gx-CheckboxInput-LARGE-l1vo2cvz",
+	["X_LARGE"]: "gx-CheckboxInput-X_LARGE-xi8bh6d"
+};
+/** Rest look of the unchecked box (Input's table). */
+var CHECKBOX_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-CheckboxInput-BASE-b14nzuna",
+	["PRIMARY"]: "gx-CheckboxInput-PRIMARY-p1r4vxw9",
+	["SECONDARY"]: "gx-CheckboxInput-SECONDARY-s1a5o682",
+	["TERTIARY"]: "gx-CheckboxInput-TERTIARY-t1kopjc4"
+};
+/** `isGhost`: no fill, the hairline kept. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-CheckboxInput-GHOST_CSS-gkp93fg";
+/** The label and description column beside the box. */
+var HAS_CONTENT_CSS = "gx-CheckboxInput-HAS_CONTENT_CSS-hp7bog7";
+/** Hover and press on an enabled box: `border.hovered`, the field-frame hover (2026-10-03 resolution). */
+var INTERACTIVE_CSS = "gx-CheckboxInput-INTERACTIVE_CSS-i1f2o1m9";
+/** Checked or indeterminate: the `solid.primary` fill and an on-solid mark. */
+var CHECKED_CSS = "gx-CheckboxInput-CHECKED_CSS-cnxcewa";
+/** Hover and press on an enabled checked box; declared after `INTERACTIVE_CSS` so it wins. */
+var CHECKED_INTERACTIVE_CSS = "gx-CheckboxInput-CHECKED_INTERACTIVE_CSS-c13ytekx";
+/** Red hairline at rest, on hover and on press; a checked box keeps its `solid.primary` fill. */
+var ERROR_CSS = "gx-CheckboxInput-ERROR_CSS-ef4a1f0";
+/**
+* Disabled, unchecked: the disabled fill (`background.pressed`, as disabled-checked) over
+* the resting hairline, so a box with no label still reads as disabled; the label and cursor too.
 */
-var CheckboxInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, isChecked, isIndeterminate = false, label, isRequired = false, isDisabled = false, onChange, ariaLabel, stopClickPropagation = false }) => {
-	const handleClick = (event) => {
-		if (stopClickPropagation) event.stopPropagation();
-		if (!isDisabled) onChange(!isChecked, event);
+var DISABLED_CSS = "gx-CheckboxInput-DISABLED_CSS-d1mz9pun";
+/** Disabled, checked: Button's disabled `PRIMARY` fill, the resting hairline and a disabled mark. */
+var DISABLED_CHECKED_CSS = "gx-CheckboxInput-DISABLED_CHECKED_CSS-dhn7d2h";
+/** Tick and dash px per rung: whole-pixel insets inside the box. */
+var CHECKBOX_INPUT_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 10,
+	["SMALL"]: 10,
+	["MEDIUM"]: 12,
+	["LARGE"]: 12,
+	["X_LARGE"]: 14
+};
+/** Label step per rung (the canonical control text). */
+var CHECKBOX_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** Description step per rung (Field's help steps). */
+var CHECKBOX_INPUT_SIZE_TO_HELP_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_SM,
+	["X_LARGE"]: TextSize.BODY_MD
+};
+/** A labelled checkbox row: a native `<input type="checkbox">` drawn as a box, toggled by the whole row. */
+var CheckboxInput = forwardRef(function CheckboxInput(props, ref) {
+	const { isChecked, defaultIsChecked = false, onChange, isIndeterminate = false, label, description, size = "MEDIUM", variant = "PRIMARY", isGhost = false, isRequired = false, isError = false, isDisabled = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = props;
+	const field = useField();
+	const generatedId = useId();
+	const inputId = field?.controlId ?? id ?? generatedId;
+	const labelId = `${inputId}-label`;
+	const descriptionId = `${inputId}-description`;
+	const innerRef = useRef(null);
+	const mergedRef = useMergeRefs([innerRef, ref]);
+	const [checked, setChecked] = useControlledState({
+		value: isChecked,
+		defaultValue: defaultIsChecked
+	});
+	const hasLabel = isFilled(label);
+	const hasDescription = hasContent(description);
+	const isOn = checked || isIndeterminate;
+	const isInvalid = isError || field?.isError === true;
+	const isRequiredState = isRequired || field?.isRequired === true;
+	const describedBy = joinIds([
+		hasDescription && descriptionId,
+		field?.describedBy,
+		ariaDescribedBy
+	]);
+	useDevWarning(!(hasLabel || field?.labelId !== void 0 || isFilled(ariaLabel) || isFilled(rest["aria-labelledby"]) || isFilled(rest["aria-label"])), "[@galaxy-io/dls] CheckboxInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	useEffect(() => {
+		if (innerRef.current !== null) innerRef.current.indeterminate = isIndeterminate;
+	});
+	const handleChange = (event) => {
+		const next = event.currentTarget.checked;
+		setChecked(next);
+		onChange?.(next, event);
 	};
+	/** Enter toggles too (1.x), through the native click so `onChange` runs once, as for a mouse click. */
 	const handleKeyDown = (event) => {
-		if (event.key !== " " && event.key !== "Enter") return;
+		if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
 		event.preventDefault();
-		if (stopClickPropagation) event.stopPropagation();
-		if (!isDisabled) onChange(!isChecked, event);
-	};
-	const renderIcon = () => {
-		if (isIndeterminate) return /* @__PURE__ */ jsx(Icon, {
-			component: MinusIcon,
-			size: CHECKBOX_INPUT_SIZE_TO_ICON_SIZE_MAP[size],
-			weight: IconWeight.BOLD,
-			variant: IconVariant.PRIMARY_ALT
-		});
-		if (isChecked) return /* @__PURE__ */ jsx(Icon, {
-			component: CheckIcon,
-			size: CHECKBOX_INPUT_SIZE_TO_ICON_SIZE_MAP[size],
-			weight: IconWeight.BOLD,
-			variant: IconVariant.PRIMARY_ALT
-		});
-		return null;
+		event.currentTarget.click();
 	};
-	return /* @__PURE__ */ jsxs(CheckboxContainer, {
-		$isDisabled: isDisabled,
-		$isRequired: isRequired,
-		onClick: handleClick,
-		onKeyDown: handleKeyDown,
-		role: "checkbox",
-		"aria-checked": isIndeterminate ? "mixed" : isChecked,
-		"aria-disabled": isDisabled || void 0,
-		"aria-label": ariaLabel,
-		"aria-required": isRequired || void 0,
-		tabIndex: isDisabled ? -1 : 0,
-		children: [/* @__PURE__ */ jsx(CheckboxWrapper, {
-			$variant: variant,
-			$size: size,
-			$isChecked: isChecked,
-			$isIndeterminate: isIndeterminate,
-			children: renderIcon()
-		}), label && /* @__PURE__ */ jsxs(FlexWrapper, {
-			alignItems: AlignItems.CENTER,
-			gap: 1,
-			children: [/* @__PURE__ */ jsx(Text, {
-				variant: TextVariant.PRIMARY,
-				children: label
-			}), isRequired && /* @__PURE__ */ jsx(RequiredMarker, {})]
-		})]
+	const iconPx = CHECKBOX_INPUT_SIZE_TO_ICON_PX_MAP[size];
+	const markIcon = isIndeterminate ? MinusIcon : checked ? CheckIcon : void 0;
+	return /* @__PURE__ */ jsxs(Root, {
+		className: cx(CHECKBOX_INPUT_SIZE_TO_CSS_MAP[size], isGhost ? GHOST_CSS : CHECKBOX_INPUT_VARIANT_TO_CSS_MAP[variant], (hasLabel || hasDescription) && HAS_CONTENT_CSS, !isDisabled && INTERACTIVE_CSS, isOn && CHECKED_CSS, isOn && !isDisabled && CHECKED_INTERACTIVE_CSS, isInvalid && ERROR_CSS, isDisabled && (isOn ? DISABLED_CHECKED_CSS : DISABLED_CSS), className),
+		...style === void 0 ? {} : { style },
+		children: [/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsxs(BoxWrap, { children: [/* @__PURE__ */ jsx(Control, {
+			ref: mergedRef,
+			type: "checkbox",
+			id: inputId,
+			checked,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			disabled: isDisabled,
+			"aria-label": ariaLabel,
+			"aria-labelledby": hasLabel ? labelId : void 0,
+			"aria-describedby": describedBy,
+			"aria-invalid": isInvalid ? true : void 0,
+			"aria-required": isRequiredState ? true : void 0,
+			...rest
+		}), /* @__PURE__ */ jsx(Mark, {
+			"aria-hidden": true,
+			children: markIcon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+				component: markIcon,
+				size: iconPx,
+				weight: IconWeight.BOLD,
+				variant: IconVariant.INHERIT
+			})
+		})] }) }), (hasLabel || hasDescription) && /* @__PURE__ */ jsxs(Content, { children: [hasLabel && /* @__PURE__ */ jsxs(Text, {
+			as: "span",
+			id: labelId,
+			size: CHECKBOX_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+			variant: isDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY,
+			children: [label, isRequiredState && /* @__PURE__ */ jsx(RequiredMarker, {})]
+		}), hasDescription && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			id: descriptionId,
+			size: CHECKBOX_INPUT_SIZE_TO_HELP_TEXT_SIZE_MAP[size],
+			variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+			children: description
+		})] })]
 	});
-};
+});
+CheckboxInput.displayName = "CheckboxInput";
 //#endregion
-export { CheckboxInput as default };
+export { CheckboxInputSize, CheckboxInputVariant, CheckboxInput as default };

package/dist/inputs/ColorInput.d.ts

@@ -1,37 +1,123 @@
-import { InputSize, InputVariant } from "./Input";
-export interface ColorInputProps {
+import { type AriaAttributes, type CSSProperties, type ReactElement } from "react";
+import { type Hex } from "../utils/colors.js";
+/** Canonical rungs; ColorInput supports all five (the Input rung table). */
+export declare enum ColorInputSize {
+    /** 20px field, caption text, 12px swatch and icons, 10px caret. */
+    X_SMALL = "X_SMALL",
+    /** 24px field, body_sm text, 12px swatch and icons, 10px caret. */
+    SMALL = "SMALL",
+    /** 32px field, body_md text, 14px swatch and icons, 12px caret. The default (1.x `MEDIUM` was 28px). */
+    MEDIUM = "MEDIUM",
+    /** 36px field, body_lg text, 14px swatch and icons, 12px caret. */
+    LARGE = "LARGE",
+    /** 40px field, body_lg text, 16px swatch and icons, 12px caret. */
+    X_LARGE = "X_LARGE"
+}
+/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+export declare enum ColorInputVariant {
+    /** `background.base` fill. */
+    BASE = "BASE",
+    /** `background.primary` fill. The default. */
+    PRIMARY = "PRIMARY",
+    /** `background.secondary` fill. */
+    SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill. */
+    TERTIARY = "TERTIARY"
+}
+export interface ColorInputProps extends AriaAttributes {
+    /** Controlled color, `#rrggbb` (or `#rgb`). `null` shows the placeholder. Pass it with `onChange`. */
+    value?: Hex | null;
+    /**
+     * Initial color while uncontrolled.
+     * @default null
+     */
+    defaultValue?: Hex | null;
+    /** Called with lowercase `#rrggbb` when a color is committed (a drag ends, a key steps, a code is entered, a swatch is picked), and with `null` when cleared. */
+    onChange?: (value: Hex | null) => void;
+    /** Called on every change of the picked color, including mid-drag. Use it for a live preview; save from `onChange`. */
+    onPreviewChange?: (value: Hex) => void;
+    /** Swatches shown under the picker. Picking one commits it and closes the panel. */
+    presets?: Hex[];
+    /**
+     * Control rung: 20 / 24 / 32 / 36 / 40px tall. The picker panel is the same size at every rung.
+     * @default ColorInputSize.MEDIUM
+     */
+    size?: ColorInputSize;
+    /**
+     * Resting fill of the field, from the surface set. Ignored with `isGhost`.
+     * @default ColorInputVariant.PRIMARY
+     */
+    variant?: ColorInputVariant;
+    /**
+     * Ghost field: no fill and no hairline at rest; the frame appears on hover, focus and open (1.x
+     * `TRANSPARENT`). For colors set into a toolbar or a table cell. The panel is `PopoverVariant.BASE`.
+     * @default false
+     */
+    isGhost?: boolean;
+    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
     label?: string;
-    /** Trigger surface color. @default InputVariant.PRIMARY */
-    variant?: InputVariant;
-    /** @default InputSize.MEDIUM */
-    size?: InputSize;
-    /** Controlled hex value, e.g. `"#1a1a1a"`. */
-    value?: string | null;
+    /**
+     * Shown in the field while there is no value. Never the label.
+     * @default Select color…
+     */
     placeholder?: string;
-    /** Called once the choice is committed. */
-    onChange?: (value: string | null) => void;
-    /** Called continuously while the user drags in the picker — for live preview. */
-    onPreviewChange?: (value: string | null) => void;
-    /** A number is px. */
-    width?: number | string;
-    fillWidth?: boolean;
+    /** Message from the app, shown under the field through `Field`. Also turns the border red and sets `aria-invalid`. */
+    error?: string;
+    /**
+     * Error border and `aria-invalid` without a message. `error` implies it.
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Shows a clear button while there is a value and the field is editable. It calls `onChange(null)`.
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Not focusable, never opens. Shows the disabled look.
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * Focusable and announced, shows the color, but never opens and has no clear button.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Required marker on the `label` (via `Field`) and `aria-required`. No validation.
+     * @default false
+     */
     isRequired?: boolean;
-    /** Message under the field; also switches the border to the error color. */
-    error?: string;
-    /** Preset swatches shown above the picker. */
-    pinnedHex?: string[];
-    /** Controlled open state. Pair it with `onOpenChange`. */
+    /**
+     * Stretch to the parent's width. Without it, the field is 160px wide.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /** Accessible name when there is no visible label (no `label` and no wrapping `Field`). Required with `children`. */
+    ariaLabel?: string;
+    /** Controlled open state of the picker panel. When set, ColorInput calls `onOpenChange` and lets the caller decide. */
     isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the requested state on click, the keyboard, a swatch, Escape, an outside press and focus leaving the panel. */
     onOpenChange?: (isOpen: boolean) => void;
-    /** Replaces the default trigger. The picker still opens on click. */
-    children?: React.ReactNode;
+    /** Custom trigger in place of the field: one focusable element that forwards its `ref` (a `Button`). The field's look props then do not apply. */
+    children?: ReactElement;
+    /**
+     * DOM id of the combobox element (or the custom trigger). A wrapping `Field`'s id wins.
+     * @default useId()
+     */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the combobox element (or the custom trigger). */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root: the `Field` wrapper when ColorInput renders one, otherwise the field wrapper. Not applied with `children`. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. Not applied with `children`. */
+    style?: CSSProperties;
 }
-/**
- * A hex color field with a picker popover. Fully controlled.
- *
- * `onPreviewChange` fires throughout the drag while `onChange` fires on commit —
- * drive a live preview from the first and persist from the second.
- */
-declare const ColorInput: ({ label, variant, size, value, placeholder, onChange, onPreviewChange, width, fillWidth, isDisabled, isRequired, error, pinnedHex, isOpen: controlledIsOpen, onOpenChange, children, }: ColorInputProps) => import("react").JSX.Element;
+/** Choose one solid color as a hex value, in a field (or a custom trigger) that opens a picker. */
+declare const ColorInput: import("react").ForwardRefExoticComponent<ColorInputProps & import("react").RefAttributes<HTMLElement>>;
 export default ColorInput;