@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/inputs/RadioInput.d.ts

@@ -1,30 +1,93 @@
-import { InputSize, InputVariant } from "./Input";
-export interface RadioInputProps {
+import { type AriaAttributes, type ChangeEvent, type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
+/** Rung of the radio (Constitution III-A.4). The circle is the rung's icon size. */
+export declare enum RadioInputSize {
+    /** 12px circle, caption label. */
+    X_SMALL = "X_SMALL",
+    /** 14px circle, body_sm label. */
+    SMALL = "SMALL",
+    /** 16px circle, body_md label. The default; the 1.x MEDIUM circle. */
+    MEDIUM = "MEDIUM",
+    /** 16px circle, body_lg label. */
+    LARGE = "LARGE",
+    /** 18px circle, body_lg label. */
+    X_LARGE = "X_LARGE"
+}
+/** Fill of the unselected circle (Constitution V-A surface set; 1.x InputVariant unchanged). */
+export declare enum RadioInputVariant {
+    /** `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 RadioInputNativeProps {
+    /** Native group name. Radios with the same `name` form one arrow-key group; RadioGroup sets it. */
+    name?: NativeInputAttributes["name"];
+    /** Focus the radio on mount. */
+    autoFocus?: NativeInputAttributes["autoFocus"];
+    /** Focus handler on the `<input>`. */
+    onFocus?: NativeInputAttributes["onFocus"];
+    /** Blur handler on the `<input>`. */
+    onBlur?: NativeInputAttributes["onBlur"];
+}
+export interface RadioInputProps extends AriaAttributes, RadioInputNativeProps {
     /**
-     * Unselected fill color. The selected fill is a state color and stays
-     * `background.primaryAlt` so the dot keeps its contrast. Unlike the field
-     * inputs, `TRANSPARENT` keeps the hairline border here — without it the
-     * circle would be invisible. @default InputVariant.PRIMARY
+     * Whether this option is the chosen one. Controlled: update it from `onChange`.
+     * @default false
      */
-    variant?: InputVariant;
-    /** Circle size — a hit target, so it steps 12 / 16 / 20px, not off the type scale.
-     * @default InputSize.MEDIUM */
-    size?: InputSize;
-    /** Controlled state. The radio holds none of its own. */
-    isSelected: boolean;
-    /** Text beside the circle. */
+    isSelected?: boolean;
+    /** Called with `true` when the user selects this radio (click, Space, Enter or an arrow key); the native change event is second. */
+    onChange?: (isSelected: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /** Text beside the circle. Clicking it selects the radio. */
     label?: string;
-    /** Adds an info icon beside the label with this content on hover. */
-    labelTooltip?: string | React.ReactNode;
-    isRequired?: boolean;
+    /** Help copy under the label. Text and inline `Link`s only. */
+    description?: ReactNode;
+    /**
+     * Rung: sets the circle, the type steps and the gap.
+     * @default RadioInputSize.MEDIUM
+     */
+    size?: RadioInputSize;
+    /**
+     * Fill of the unselected circle, from the surface set. Ignored with `isGhost`.
+     * @default RadioInputVariant.PRIMARY
+     */
+    variant?: RadioInputVariant;
+    /**
+     * Ghost unselected circle: no fill, the hairline kept (1.x `TRANSPARENT`). For radios on a
+     * surface whose own fill should show through, such as a selected table row.
+     * @default false
+     */
+    isGhost?: boolean;
+    /**
+     * Error border. The group carries `aria-invalid` (RadioGroup).
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Not focusable or selectable. Shows the disabled look.
+     * @default false
+     */
     isDisabled?: boolean;
-    onChange: (selected: boolean) => void;
+    /** Accessible name when there is no `label`. */
+    ariaLabel?: string;
+    /**
+     * DOM id of the `<input>`.
+     * @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 single radio button with an optional label. Fully controlled.
- *
- * There is no group component — render several and enforce single-selection in
- * your own state.
- */
-declare const RadioInput: ({ variant, size, isSelected, label, labelTooltip, isRequired, isDisabled, onChange, }: RadioInputProps) => import("react").JSX.Element;
+/** One labelled option of a radio set: a native `<input type="radio">` drawn as a circle, selected by the whole row. */
+declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default RadioInput;

package/dist/inputs/RadioInput.js

@@ -1,105 +1,192 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextVariant } from "../text/Text.js";
-import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
-import Icon, { IconVariant } from "../icons/Icon.js";
-import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
-import RequiredMarker from "../text/RequiredMarker.js";
-import Spacing from "../containers/Spacing.js";
-import { InputSize, InputVariant, getInputControlSize, getInputSurfaceColor } from "./Input.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { hasContent, isFilled } from "./internal/predicates.js";
+import { joinIds } from "./internal/fieldWiring.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
+import { forwardRef, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { InfoIcon } from "@phosphor-icons/react";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
 //#region src/inputs/RadioInput.tsx
-var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var RadioContainer = /*#__PURE__*/ styled("div")({
-	name: "RadioContainer",
-	class: "r1pzr59l",
-	propsAsIs: false,
-	vars: {
-		"r1pzr59l-0": [_exp()],
-		"r1pzr59l-1": [_exp2()]
-	}
-});
-var _exp4 = () => ({ $size }) => getInputControlSize($size);
-var _exp5 = () => ({ theme }) => theme.color.border.primary;
-var _exp6 = () => ({ theme, $variant, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : getInputSurfaceColor(theme, $variant);
-var RadioWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "RadioWrapper",
-	class: "r1mwwvky",
-	propsAsIs: false,
-	vars: {
-		"r1mwwvky-0": [_exp4()],
-		"r1mwwvky-1": [_exp5()],
-		"r1mwwvky-2": [_exp6()]
-	}
-}));
-/** The dot is half the circle it sits in — see `getInputControlSize`. */
-function getRadioDotSize(size) {
-	return match(size).returnType().with(InputSize.SMALL, () => "6px").with(InputSize.MEDIUM, () => "8px").with(InputSize.LARGE, () => "10px").exhaustive();
-}
-var _exp8 = () => ({ $size }) => getRadioDotSize($size);
-var _exp9 = () => ({ theme }) => theme.color.background.primary;
-var _exp0 = () => ({ $isSelected }) => $isSelected ? 1 : 0;
-var _exp1 = () => ({ $isSelected }) => $isSelected ? "scale(1)" : "scale(0)";
-var RadioDot = withTheme(/*#__PURE__*/ styled("div")({
-	name: "RadioDot",
-	class: "r137y8ev",
-	propsAsIs: false,
-	vars: {
-		"r137y8ev-0": [_exp8()],
-		"r137y8ev-1": [_exp9()],
-		"r137y8ev-2": [_exp0()],
-		"r137y8ev-3": [_exp1()]
-	}
-}));
 /**
-* A single radio button with an optional label. Fully controlled.
+* One option in a set where exactly one can be chosen. A native `<input type="radio">` drawn as a
+* small circle (`appearance: none`), with an optional `label` and `description` beside it; the
+* whole row is a `<label>`, so clicking the text selects. It is controlled: `isSelected` comes
+* from the app or a `RadioGroup`, and `onChange(true, event)` reports a selection. Radios that
+* share a `name` get the browser's radio keyboard pattern (one tab stop, arrow keys select).
+* Selected is the monochrome `solid.primary` fill with an on-solid dot.
 *
-* There is no group component — render several and enforce single-selection in
-* your own state.
+* It does not hold the group's value, name the question or validate: that is `RadioGroup`, which
+* renders one RadioInput per option. Use RadioInput alone only for a custom layout (a radio in
+* each row of a table). Replaces 1.x `RadioInput` (`InputSize` / `InputVariant` →
+* `RadioInputSize` / `RadioInputVariant`; native input instead of a clickable `div`;
+* `labelTooltip` → `description`; `isRequired` moves to `RadioGroup`; `onChange` fires only on
+* selection, with `true`).
+*/
+/** Rung of the radio (Constitution III-A.4). The circle is the rung's icon size. */
+var RadioInputSize = /* @__PURE__ */ function(RadioInputSize) {
+	/** 12px circle, caption label. */
+	RadioInputSize["X_SMALL"] = "X_SMALL";
+	/** 14px circle, body_sm label. */
+	RadioInputSize["SMALL"] = "SMALL";
+	/** 16px circle, body_md label. The default; the 1.x MEDIUM circle. */
+	RadioInputSize["MEDIUM"] = "MEDIUM";
+	/** 16px circle, body_lg label. */
+	RadioInputSize["LARGE"] = "LARGE";
+	/** 18px circle, body_lg label. */
+	RadioInputSize["X_LARGE"] = "X_LARGE";
+	return RadioInputSize;
+}({});
+/** Fill of the unselected circle (Constitution V-A surface set; 1.x InputVariant unchanged). */
+var RadioInputVariant = /* @__PURE__ */ function(RadioInputVariant) {
+	/** `background.base`. */
+	RadioInputVariant["BASE"] = "BASE";
+	/** `background.primary`. The default. */
+	RadioInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary`. */
+	RadioInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary`. */
+	RadioInputVariant["TERTIARY"] = "TERTIARY";
+	return RadioInputVariant;
+}({});
+/** The row: circle column, then label and description. State lives in custom properties set here, so hovering anywhere lights the circle. */
+var Root = /*#__PURE__*/ styled("label")({
+	name: "Root",
+	class: "gx-RadioInput-r1pzr59l",
+	propsAsIs: false
+});
+/** As tall as the label's first line, so the circle centers on it. */
+var Indicator = /*#__PURE__*/ styled("span")({
+	name: "Indicator",
+	class: "gx-RadioInput-Indicator-i1mwwvky",
+	propsAsIs: false
+});
+/** The circle's footprint; positions the dot over the input. */
+var BoxWrap = /*#__PURE__*/ styled("span")({
+	name: "BoxWrap",
+	class: "gx-RadioInput-BoxWrap-b137y8ev",
+	propsAsIs: false
+});
+/** The native radio, drawn as the circle. It is the focused element, so `FOCUS_RING` applies as written. */
+var Control = /*#__PURE__*/ styled("input")({
+	name: "Control",
+	class: "gx-RadioInput-Control-c1c8ijkb",
+	propsAsIs: false
+});
+/** The dot, centered over the circle; scales in when selected. Decorative and click-through. */
+var Dot = /*#__PURE__*/ styled("span")({
+	name: "Dot",
+	class: "gx-RadioInput-Dot-d1wh1wjm",
+	propsAsIs: false
+});
+/** Label over description, Field's label-to-description gap. */
+var Content = /*#__PURE__*/ styled("span")({
+	name: "Content",
+	class: "gx-RadioInput-Content-clety7y",
+	propsAsIs: false
+});
+/** Circle, dot, first-line height and gap per rung: the circle is the rung's icon size, the gap the rung's gap. */
+var RADIO_INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-RadioInput-X_SMALL-x190ba3z",
+	["SMALL"]: "gx-RadioInput-SMALL-sdil791",
+	["MEDIUM"]: "gx-RadioInput-MEDIUM-mox9tg9",
+	["LARGE"]: "gx-RadioInput-LARGE-l1pffvb6",
+	["X_LARGE"]: "gx-RadioInput-X_LARGE-x12lumk7"
+};
+/** Rest look of the unselected circle (Input's table). */
+var RADIO_INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-RadioInput-BASE-b1h3kcqp",
+	["PRIMARY"]: "gx-RadioInput-PRIMARY-ptrdag8",
+	["SECONDARY"]: "gx-RadioInput-SECONDARY-s1x9nxv1",
+	["TERTIARY"]: "gx-RadioInput-TERTIARY-twyki5h"
+};
+/** `isGhost`: no fill, the hairline kept. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-RadioInput-GHOST_CSS-g1xdbhty";
+/** The label and description column beside the circle. */
+var HAS_CONTENT_CSS = "gx-RadioInput-HAS_CONTENT_CSS-hqnpcbl";
+/** Hover and press on an enabled circle: `border.hovered`, the field-frame hover (2026-10-03 resolution). */
+var INTERACTIVE_CSS = "gx-RadioInput-INTERACTIVE_CSS-i14sv8xb";
+/** Selected: the `solid.primary` fill and an on-solid dot, scaled in. */
+var SELECTED_CSS = "gx-RadioInput-SELECTED_CSS-s1025v6a";
+/** Hover and press on an enabled selected circle; declared after `INTERACTIVE_CSS` so it wins. */
+var SELECTED_INTERACTIVE_CSS = "gx-RadioInput-SELECTED_INTERACTIVE_CSS-s1g1ek83";
+/** Red hairline at rest, on hover and on press; a selected circle keeps its `solid.primary` fill. */
+var ERROR_CSS = "gx-RadioInput-ERROR_CSS-ezk6lpr";
+/**
+* Disabled, unselected: the disabled fill (`background.pressed`, as disabled-selected) over
+* the resting hairline, so a circle with no label still reads as disabled; the label and cursor too.
 */
-var RadioInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, isSelected, label, labelTooltip, isRequired = false, isDisabled = false, onChange }) => {
-	const handleClick = () => {
-		if (!isDisabled) onChange(!isSelected);
+var DISABLED_CSS = "gx-RadioInput-DISABLED_CSS-dsz9xw9";
+/** Disabled, selected: Button's disabled `PRIMARY` fill, the resting hairline and a disabled dot. */
+var DISABLED_SELECTED_CSS = "gx-RadioInput-DISABLED_SELECTED_CSS-dtueym8";
+/** Label step per rung (the canonical control text). */
+var RADIO_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 RADIO_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
+};
+/** One labelled option of a radio set: a native `<input type="radio">` drawn as a circle, selected by the whole row. */
+var RadioInput = forwardRef(function RadioInput(props, ref) {
+	const { isSelected = false, onChange, label, description, size = "MEDIUM", variant = "PRIMARY", isGhost = false, isError = false, isDisabled = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = props;
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	const labelId = `${inputId}-label`;
+	const descriptionId = `${inputId}-description`;
+	const mergedRef = useMergeRefs([useRef(null), ref]);
+	const hasLabel = isFilled(label);
+	const hasDescription = hasContent(description);
+	const describedBy = joinIds([hasDescription && descriptionId, ariaDescribedBy]);
+	useDevWarning(!(hasLabel || isFilled(ariaLabel) || isFilled(rest["aria-labelledby"]) || isFilled(rest["aria-label"])), "[@galaxy-io/dls] RadioInput has no accessible name. Pass `label` or set `ariaLabel`.");
+	const handleChange = (event) => {
+		if (event.currentTarget.checked) onChange?.(true, event);
+	};
+	/** Enter selects too, through the native click so `onChange` runs once, as for a mouse click. */
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		event.currentTarget.click();
 	};
-	return /* @__PURE__ */ jsxs(RadioContainer, {
-		$isDisabled: isDisabled,
-		onClick: handleClick,
-		children: [/* @__PURE__ */ jsx(RadioWrapper, {
-			$variant: variant,
-			$size: size,
-			$isSelected: isSelected,
-			children: /* @__PURE__ */ jsx(RadioDot, {
-				$size: size,
-				$isSelected: isSelected
-			})
-		}), label && /* @__PURE__ */ jsxs(FlexWrapper, {
-			alignItems: AlignItems.CENTER,
-			gap: 1,
-			children: [
-				/* @__PURE__ */ jsx(Text, {
-					variant: TextVariant.PRIMARY,
-					children: label
-				}),
-				isRequired && /* @__PURE__ */ jsx(RequiredMarker, {}),
-				labelTooltip && /* @__PURE__ */ jsx(Spacing, {
-					left: 4,
-					children: /* @__PURE__ */ jsx(Tooltip, {
-						body: labelTooltip,
-						position: TooltipPosition.RIGHT,
-						children: /* @__PURE__ */ jsx(Icon, {
-							component: InfoIcon,
-							variant: IconVariant.SECONDARY,
-							size: 12
-						})
-					})
-				})
-			]
-		})]
+	return /* @__PURE__ */ jsxs(Root, {
+		className: cx(RADIO_INPUT_SIZE_TO_CSS_MAP[size], isGhost ? GHOST_CSS : RADIO_INPUT_VARIANT_TO_CSS_MAP[variant], (hasLabel || hasDescription) && HAS_CONTENT_CSS, !isDisabled && INTERACTIVE_CSS, isSelected && SELECTED_CSS, isSelected && !isDisabled && SELECTED_INTERACTIVE_CSS, isError && ERROR_CSS, isDisabled && (isSelected ? DISABLED_SELECTED_CSS : DISABLED_CSS), className),
+		...style === void 0 ? {} : { style },
+		children: [/* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsxs(BoxWrap, { children: [/* @__PURE__ */ jsx(Control, {
+			ref: mergedRef,
+			type: "radio",
+			id: inputId,
+			checked: isSelected,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			disabled: isDisabled,
+			"aria-label": ariaLabel,
+			"aria-labelledby": hasLabel ? labelId : void 0,
+			"aria-describedby": describedBy,
+			...rest
+		}), /* @__PURE__ */ jsx(Dot, { "aria-hidden": true })] }) }), (hasLabel || hasDescription) && /* @__PURE__ */ jsxs(Content, { children: [hasLabel && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			id: labelId,
+			size: RADIO_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+			variant: isDisabled ? TextVariant.DISABLED : TextVariant.PRIMARY,
+			children: label
+		}), hasDescription && /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			id: descriptionId,
+			size: RADIO_INPUT_SIZE_TO_HELP_TEXT_SIZE_MAP[size],
+			variant: isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY,
+			children: description
+		})] })]
 	});
-};
+});
+RadioInput.displayName = "RadioInput";
 //#endregion
-export { RadioInput as default };
+export { RadioInputSize, RadioInputVariant, RadioInput as default };

package/dist/inputs/SearchInput.d.ts

@@ -0,0 +1,66 @@
+import { type InputProps } from "./Input.js";
+/** Every `Input` prop except those the search field fixes or owns, plus its own. */
+export type SearchInputProps = Omit<InputProps, "type" | "icon" | "leading" | "prefix" | "suffix" | "isClearable" | "onEnter" | "inputMode" | "enterKeyHint" | "placeholder" | "ariaLabel"> & {
+    /**
+     * Hint shown while the value is empty.
+     * @default "Search"
+     */
+    placeholder?: string;
+    /**
+     * Accessible name when there is no visible label. Defaults to "Search" when there is no `label` and no enclosing `Field`.
+     * @default "Search"
+     */
+    ariaLabel?: string;
+    /** Called with the text once typing pauses for `debounceMs`, at once on Enter, and at once when emptied. Never twice in a row with the same term, never on mount. */
+    onSearch?: (term: string) => void;
+    /**
+     * Quiet period before `onSearch` fires while typing. `0` searches on every change.
+     * @default 150
+     */
+    debounceMs?: number;
+    /** Focus shortcut in `useHotkey` grammar (`["mod", "k"]`, `["/"]`), shown as `Kbd` caps while empty and not focused. Display only unless `shouldBindHotKey`. */
+    hotKeys?: string[];
+    /**
+     * Also bind `hotKeys`: the shortcut focuses the field and selects its text.
+     * @default false
+     */
+    shouldBindHotKey?: boolean;
+    /**
+     * Shows a `Spinner` at the end of the field while the app's search runs. The field stays editable.
+     * @default false
+     */
+    isLoading?: boolean;
+};
+/** A search field: `Input` with `type="search"`, a magnifier, clearing, a debounced `onSearch` and a focus shortcut. */
+declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<InputProps, "icon" | "ariaLabel" | "enterKeyHint" | "prefix" | "inputMode" | "type" | "leading" | "placeholder" | "onEnter" | "suffix" | "isClearable"> & {
+    /**
+     * Hint shown while the value is empty.
+     * @default "Search"
+     */
+    placeholder?: string;
+    /**
+     * Accessible name when there is no visible label. Defaults to "Search" when there is no `label` and no enclosing `Field`.
+     * @default "Search"
+     */
+    ariaLabel?: string;
+    /** Called with the text once typing pauses for `debounceMs`, at once on Enter, and at once when emptied. Never twice in a row with the same term, never on mount. */
+    onSearch?: (term: string) => void;
+    /**
+     * Quiet period before `onSearch` fires while typing. `0` searches on every change.
+     * @default 150
+     */
+    debounceMs?: number;
+    /** Focus shortcut in `useHotkey` grammar (`["mod", "k"]`, `["/"]`), shown as `Kbd` caps while empty and not focused. Display only unless `shouldBindHotKey`. */
+    hotKeys?: string[];
+    /**
+     * Also bind `hotKeys`: the shortcut focuses the field and selects its text.
+     * @default false
+     */
+    shouldBindHotKey?: boolean;
+    /**
+     * Shows a `Spinner` at the end of the field while the app's search runs. The field stays editable.
+     * @default false
+     */
+    isLoading?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default SearchInput;

package/dist/inputs/SearchInput.js

@@ -0,0 +1,156 @@
+import { useControlledState } from "../hooks/useControlledState.js";
+import Flex, { AlignItems } from "../layout/Flex.js";
+import Kbd, { KbdSize } from "../text/Kbd.js";
+import { parseHotkey, useHotkey } from "../hooks/useHotkey.js";
+import { useField } from "../hooks/useField.js";
+import Spinner, { SpinnerSize } from "../feedback/Spinner.js";
+import { useDebouncedValue } from "../hooks/useDebouncedValue.js";
+import Input, { INPUT_SIZE_TO_GAP_MAP, InputSize } from "./Input.js";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMergeRefs } from "@floating-ui/react";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+//#region src/inputs/SearchInput.tsx
+/**
+* The field for searching or filtering: a text field with a magnifier at its start, a clear button
+* once it has text (Escape clears too), an optional focus shortcut (`hotKeys`, shown as `Kbd` caps
+* while empty and not focused; bound with `shouldBindHotKey`), and `onSearch`, which fires once
+* typing pauses for `debounceMs`, at once on Enter, and at once when the field is emptied.
+* `onChange` still reports every keystroke for a controlled value.
+*
+* A preset over `Input` (base) with `type="search"`; `InputSize` / `InputVariant` are imported
+* from `inputs/Input`. It never fetches, filters or routes: the app does that in `onSearch` and
+* passes `isLoading` while it runs. New in 2.0 (1.x built searches from `TextInput` by hand).
+*/
+/** The spinner takes the field's rung (Spinner's identity-map rule). */
+var INPUT_SIZE_TO_SPINNER_SIZE_MAP = {
+	[InputSize.X_SMALL]: SpinnerSize.X_SMALL,
+	[InputSize.SMALL]: SpinnerSize.SMALL,
+	[InputSize.MEDIUM]: SpinnerSize.MEDIUM,
+	[InputSize.LARGE]: SpinnerSize.LARGE,
+	[InputSize.X_LARGE]: SpinnerSize.X_LARGE
+};
+/** The caps match the rung of the control they sit in. */
+var INPUT_SIZE_TO_KBD_SIZE_MAP = {
+	[InputSize.X_SMALL]: KbdSize.X_SMALL,
+	[InputSize.SMALL]: KbdSize.SMALL,
+	[InputSize.MEDIUM]: KbdSize.MEDIUM,
+	[InputSize.LARGE]: KbdSize.LARGE,
+	[InputSize.X_LARGE]: KbdSize.X_LARGE
+};
+/** Tokens that make a combo safe to fire while typing (Button's rule; Shift alone is not). */
+var MODIFIER_TOKENS = new Set([
+	"mod",
+	"ctrl",
+	"meta",
+	"cmd",
+	"alt",
+	"option"
+]);
+/** A search field: `Input` with `type="search"`, a magnifier, clearing, a debounced `onSearch` and a focus shortcut. */
+var SearchInput = forwardRef(function SearchInput(props, ref) {
+	const { value: valueProp, defaultValue, onChange, onSearch, debounceMs = 150, hotKeys, shouldBindHotKey = false, isLoading = false, placeholder = "Search", ariaLabel, label, trailing, size = InputSize.MEDIUM, isDisabled = false, isReadOnly = false, onFocus, onBlur, onKeyDown, ...rest } = props;
+	const field = useField();
+	const innerRef = useRef(null);
+	const mergedRef = useMergeRefs([innerRef, ref]);
+	const [isFocused, setIsFocused] = useState(false);
+	const [value, setValue] = useControlledState({
+		value: valueProp,
+		defaultValue: defaultValue ?? "",
+		onChange
+	});
+	const lastSearchedRef = useRef(value);
+	const onSearchRef = useRef(onSearch);
+	useEffect(() => {
+		onSearchRef.current = onSearch;
+	});
+	const search = useCallback((term) => {
+		if (term === lastSearchedRef.current) return;
+		lastSearchedRef.current = term;
+		onSearchRef.current?.(term);
+	}, []);
+	const debouncedValue = useDebouncedValue(value, debounceMs, debounceMs > 0);
+	useEffect(() => {
+		search(debouncedValue);
+	}, [debouncedValue, search]);
+	/** Every edit; an emptied field searches at once. */
+	const handleChange = (next) => {
+		setValue(next);
+		if (next === "") search("");
+	};
+	const handleFocus = (event) => {
+		onFocus?.(event);
+		setIsFocused(true);
+	};
+	const handleBlur = (event) => {
+		onBlur?.(event);
+		setIsFocused(false);
+	};
+	/** Escape clears a non-empty editable field and stops there; an empty field lets it through. */
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Escape") return;
+		if (value === "" || isDisabled || isReadOnly) return;
+		event.preventDefault();
+		event.stopPropagation();
+		handleChange("");
+	};
+	const hasHotKeys = hotKeys !== void 0 && hotKeys.length > 0;
+	const combo = hasHotKeys ? hotKeys.join("+") : "";
+	const hasModifier = hasHotKeys && hotKeys.some((entry) => MODIFIER_TOKENS.has(entry.trim().toLowerCase()));
+	useHotkey(combo, () => {
+		innerRef.current?.focus();
+		innerRef.current?.select();
+	}, {
+		isEnabled: shouldBindHotKey && hasHotKeys && !isDisabled && parseHotkey(combo) !== null,
+		shouldPreventDefault: true,
+		shouldIgnoreInputs: !hasModifier
+	});
+	const showsCaps = hasHotKeys && value === "" && !isFocused;
+	const hasTrailing = trailing !== void 0 && trailing !== null && trailing !== false;
+	const trailingNode = isLoading || showsCaps || hasTrailing ? /* @__PURE__ */ jsxs(Flex, {
+		as: "span",
+		alignItems: AlignItems.CENTER,
+		gap: INPUT_SIZE_TO_GAP_MAP[size],
+		children: [
+			isLoading && /* @__PURE__ */ jsx(Spinner, {
+				size: INPUT_SIZE_TO_SPINNER_SIZE_MAP[size],
+				ariaLabel: "Searching"
+			}),
+			showsCaps && /* @__PURE__ */ jsx(Kbd, {
+				hotKeys,
+				size: INPUT_SIZE_TO_KBD_SIZE_MAP[size],
+				isDisabled,
+				"aria-hidden": true
+			}),
+			hasTrailing && trailing
+		]
+	}) : void 0;
+	const resolvedAriaLabel = ariaLabel ?? (!(label !== void 0 && label !== "") && field === null ? "Search" : void 0);
+	return /* @__PURE__ */ jsx(Input, {
+		ref: mergedRef,
+		...rest,
+		...label === void 0 ? {} : { label },
+		...resolvedAriaLabel === void 0 ? {} : { ariaLabel: resolvedAriaLabel },
+		...isLoading ? { "aria-busy": true } : {},
+		size,
+		isDisabled,
+		isReadOnly,
+		type: "search",
+		inputMode: "search",
+		enterKeyHint: "search",
+		icon: MagnifyingGlassIcon,
+		isClearable: true,
+		placeholder,
+		value,
+		onChange: handleChange,
+		onEnter: search,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown,
+		trailing: trailingNode
+	});
+});
+SearchInput.displayName = "SearchInput";
+//#endregion
+export { SearchInput as default };