@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/input/ColorPicker.mjs

@@ -0,0 +1,236 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
+import { useControllable as r } from "../../hooks/useControllable.mjs";
+import { useId as i } from "../../hooks/useId.mjs";
+import { useMergedRefs as a } from "../../hooks/useMergedRefs.mjs";
+import { joinIds as o } from "../../lib/aria.mjs";
+import { FieldContext as s, useFieldContext as c, useFieldControl as l } from "../../hooks/useFieldControl.mjs";
+import { inputFocus as ee } from "../../lib/styles.mjs";
+import { isInvalidLook as te } from "./Input.mjs";
+import { useFormReset as ne } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as re } from "../internal/HiddenInput.mjs";
+import { alphaToOpacity as u, formatHexColor as d, isHexDraft as f, normalizeHexColor as p, opacityToAlpha as ie, parseHexColor as m, parseHexInput as h } from "./colorUtils.mjs";
+import { SwatchPicker as ae } from "./SwatchPicker.mjs";
+import * as g from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/input/ColorPicker.tsx
+var y = "#0f6cbd", b = {
+	hex: "Hex",
+	hexInput: "Hex color value",
+	hexError: `Enter a hex color such as ${y}.`,
+	presets: "Preset colors",
+	opacity: "Opacity"
+}, oe = [
+	{
+		color: "#0f6cbd",
+		label: "Blue"
+	},
+	{
+		color: "#d13438",
+		label: "Red"
+	},
+	{
+		color: "#107c10",
+		label: "Green"
+	},
+	{
+		color: "#ffb900",
+		label: "Yellow"
+	},
+	{
+		color: "#5c2d91",
+		label: "Purple"
+	},
+	{
+		color: "#008272",
+		label: "Teal"
+	},
+	{
+		color: "#e3008c",
+		label: "Pink"
+	},
+	{
+		color: "#242424",
+		label: "Black"
+	}
+];
+function se(e) {
+	let t = [], n = [], r = [], i = /* @__PURE__ */ new Set();
+	for (let a of e) {
+		let e = typeof a == "string" ? a : a.color, o = m(e);
+		if (!o) {
+			n.push(e);
+			continue;
+		}
+		let s = o.alpha !== 255;
+		if (s && r.push(e), i.has(o.rgb)) continue;
+		i.add(o.rgb);
+		let c = s ? o.rgb : e;
+		t.push({
+			value: o.rgb,
+			color: o.rgb,
+			label: typeof a == "string" ? c : a.label
+		});
+	}
+	return {
+		items: t,
+		invalid: n,
+		translucent: r
+	};
+}
+function x(e) {
+	let t = e.trim();
+	return t === "" || t === "#";
+}
+function S(e) {
+	let t = e.trim().replace(/^#/, "").length;
+	return t === 4 || t === 8;
+}
+var C = ({ value: C, defaultValue: ce, onValueChange: le, onChange: w, presets: ue = oe, showOpacity: de = !1, labels: fe, name: pe, required: me, form: T, className: he, id: ge, "aria-label": _e, "aria-labelledby": ve, "aria-describedby": ye, "aria-invalid": be, "aria-required": E, "aria-errormessage": xe, ref: Se, ...D }) => {
+	w !== void 0 && t("ColorPicker", "onChange", "onValueChange");
+	let O = ce ?? y, k = p(O) ?? O, A = {
+		...b,
+		...fe
+	}, [j, M] = r(C, k, (e) => {
+		le?.(e), w?.(e);
+	}), N = m(j), P = N?.alpha ?? 255, F = u(P), I = (e, t) => M(d(e, t)), [L, R] = g.useState(null), [Ce, we] = g.useState(j);
+	j !== Ce && (we(j), L?.flagged && R(null));
+	let Te = L?.text ?? j, z = L !== null && !x(L.text) && (L.flagged || !f(L.text)), { items: B, invalid: Ee, translucent: De } = se(ue), V = Ee.join("\n"), H = De.join("\n"), U = N ? null : j;
+	g.useEffect(() => {
+		U !== null && n("ColorPicker:invalid-value", `ColorPicker: "${U}" is not a hex color (#rrggbb or #rrggbbaa). Pass a hex value; the opacity slider is disabled until then.`);
+	}, [U]), g.useEffect(() => {
+		if (V) for (let e of V.split("\n")) n(`ColorPicker:invalid-preset:${e}`, `ColorPicker: preset "${e}" is not a hex color (#rgb or #rrggbb) and is not shown.`);
+	}, [V]), g.useEffect(() => {
+		if (H) for (let e of H.split("\n")) n(`ColorPicker:alpha-preset:${e}`, `ColorPicker: preset "${e}" has an alpha byte, which is ignored: picking a preset keeps the current opacity. Pass the color as #rgb or #rrggbb.`);
+	}, [H]);
+	let W = g.useRef(null), G = g.useRef(null), Oe = a(Se, W), K = c(), { "aria-invalid": q, "aria-required": ke, required: Ae, ...je } = l({
+		id: ge,
+		"aria-label": _e,
+		"aria-labelledby": ve,
+		"aria-describedby": ye,
+		"aria-invalid": be
+	}, { labelable: !1 }), J = q !== void 0 && q !== !1 && q !== "false", Y = me ?? (E === !0 || E === "true" || (K?.required ?? !1)), X = J && xe || void 0;
+	ne(W, () => {
+		(p(j) ?? j) !== k && M(k), R(null);
+	}, T);
+	let Z = i("wave-color-picker-error"), Q = z ? !0 : J ? q : void 0, Me = te(!1, Q), Ne = (e) => {
+		let t = e.target.value.trim();
+		t !== "" && !t.startsWith("#") && (t = `#${t}`), R({
+			text: t,
+			flagged: !1
+		});
+		let n = h(t);
+		n && I(n.rgb, S(t) ? n.alpha : P);
+	}, $ = () => {
+		if (L === null || L.flagged) return;
+		let e = m(L.text);
+		if (e || x(L.text)) {
+			e && !h(L.text) && I(e.rgb, S(L.text) ? e.alpha : P), R(null);
+			return;
+		}
+		R({
+			text: L.text,
+			flagged: !0
+		});
+	}, Pe = (e) => {
+		e.key === "Enter" && !e.defaultPrevented && !e.nativeEvent.isComposing && $();
+	}, Fe = (e) => {
+		let t = m(e);
+		t && (R(null), I(t.rgb, P));
+	}, Ie = (e) => {
+		N && I(N.rgb, ie(Number(e.target.value)));
+	}, Le = N ? N.rgb : "";
+	return /* @__PURE__ */ v("div", {
+		role: "group",
+		...je,
+		className: e("relative inline-flex flex-col gap-3 rounded border border-border bg-background p-3 shadow-4", he),
+		...D,
+		ref: Oe,
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ _("div", {
+					"data-color-preview": "",
+					className: "h-10 w-10 shrink-0 rounded border border-border",
+					style: { backgroundColor: N ? d(N.rgb, N.alpha) : j },
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ v("label", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ _("span", {
+						className: "text-caption-1 text-muted-foreground",
+						children: A.hex
+					}), /* @__PURE__ */ _("input", {
+						ref: G,
+						type: "text",
+						value: Te,
+						onChange: Ne,
+						onKeyDown: Pe,
+						onBlur: $,
+						"aria-label": A.hexInput,
+						"aria-invalid": Q,
+						"aria-errormessage": X,
+						"aria-describedby": o(z && Z, K?.validationMessageId ?? (J ? K?.errorId : void 0), X),
+						maxLength: 9,
+						spellCheck: !1,
+						autoComplete: "off",
+						className: e("w-24 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1 text-body-1 text-foreground", ee, Me && "border-destructive focus:border-b-destructive")
+					})]
+				})]
+			}),
+			z && /* @__PURE__ */ _("span", {
+				id: Z,
+				className: "text-caption-1 text-error",
+				children: A.hexError
+			}),
+			B.length > 0 && /* @__PURE__ */ _(s.Provider, {
+				value: null,
+				children: /* @__PURE__ */ _(ae, {
+					items: B,
+					value: Le,
+					onValueChange: Fe,
+					"aria-label": A.presets,
+					size: "small",
+					shape: "rounded"
+				})
+			}),
+			de && /* @__PURE__ */ v("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ _("span", {
+						className: "w-14 text-caption-1 text-muted-foreground",
+						children: A.opacity
+					}),
+					/* @__PURE__ */ _("input", {
+						type: "range",
+						min: 0,
+						max: 100,
+						value: F,
+						onChange: Ie,
+						disabled: !N,
+						"aria-label": A.opacity,
+						"aria-valuetext": `${F}%`,
+						className: e("h-1 flex-1 accent-primary disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring")
+					}),
+					/* @__PURE__ */ v("span", {
+						className: "w-10 text-end text-caption-1 text-muted-foreground",
+						children: [F, "%"]
+					})
+				]
+			}),
+			/* @__PURE__ */ _(re, {
+				type: "text",
+				name: pe,
+				form: T,
+				value: j,
+				required: Y,
+				onInvalid: () => G.current?.focus()
+			})
+		]
+	});
+};
+C.displayName = "ColorPicker";
+//#endregion
+export { C as ColorPicker };
+
+//# sourceMappingURL=ColorPicker.mjs.map

package/dist/components/input/ColorPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.mjs","names":["useId","useId$1","React","DEFAULT_COLOR","DEFAULT_LABELS","DEFAULT_PRESETS","resolvePresets","items","invalid","translucent","seen","preset","presets","color","parsed","parseHexColor","hasAlpha","stringLabel","isBlankDraft","trimmed","text","hasAlphaDigits","digits","ColorPicker","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","rest","onChange","warnDeprecated","rawDefault","defaultValue","initialValue","normalizeHexColor","strings","labels","setColor","useControllable","onValueChange","next","alpha","opacity","alphaToOpacity","commit","formatHexColor","rgb","nextAlpha","draft","setDraft","syncedColor","setSyncedColor","hexText","draftInvalid","isHexDraft","presetItems","invalidPresets","translucentPresets","invalidPresetKey","translucentPresetKey","invalidValue","warnOnce","rootRef","hexInputRef","mergedRef","useMergedRefs","ref","field","useFieldContext","groupInvalid","_ariaRequired","_required","groupProps","useFieldControl","fieldInvalid","isRequired","required","errorMessageId","form","errorId","hexAriaInvalid","hexInvalidLook","isInvalidLook","handleHexChange","typed","parseHexInput","finishHexDraft","handleHexKeyDown","handlePreset","handleOpacityChange","opacityToAlpha","selectedPreset","cn","className","joinIds","inputFocus","FieldContext","SwatchPicker","showOpacity","HiddenInput"],"sources":["../../../src/components/input/ColorPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { joinIds } from '../../lib/aria';\nimport { focusRing, inputFocus, inputInvalid } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { FieldContext, useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { isInvalidLook } from './Input';\nimport { SwatchPicker } from './SwatchPicker';\nimport type { SwatchItem } from './SwatchPicker';\nimport {\n  alphaToOpacity,\n  formatHexColor,\n  isHexDraft,\n  normalizeHexColor,\n  opacityToAlpha,\n  parseHexColor,\n  parseHexInput,\n} from './colorUtils';\n\n/** A named preset color. */\nexport interface ColorPickerPreset {\n  /**\n   * Hex color (`#rrggbb`; `#rgb` is expanded). A preset has no opacity of its own: picking it keeps\n   * the current opacity, so its alpha digits (`#rgba`, `#rrggbbaa`) are ignored. An alpha below\n   * `f`/`ff` logs a development warning; an opaque one (`#rgbf`, `#rrggbbff`) changes nothing.\n   */\n  color: string;\n  /** Accessible name of the preset swatch, e.g. `'Cranberry'`. */\n  label: string;\n}\n\n/**\n * Texts of the ColorPicker's own parts, for localisation. Every key is optional; missing keys use\n * the English default.\n */\nexport interface ColorPickerLabels {\n  /** Visible caption above the hex field.\n   * @default 'Hex'\n   */\n  hex?: string;\n  /** Accessible name of the hex text field.\n   * @default 'Hex color value'\n   */\n  hexInput?: string;\n  /** Error text shown (and used as the hex field's description) while the typed text can never be\n   * a hex color, or when the field is left with text that is not one (such as `#12345`).\n   * @default 'Enter a hex color such as #0f6cbd.'\n   */\n  hexError?: string;\n  /** Accessible name of the preset swatches radiogroup.\n   * @default 'Preset colors'\n   */\n  presets?: string;\n  /** Visible label and accessible name of the opacity slider.\n   * @default 'Opacity'\n   */\n  opacity?: string;\n}\n\n/** Properties for the ColorPicker component. */\nexport interface ColorPickerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * Controlled hex color: `#rrggbb`, or `#rrggbbaa` with an alpha byte (e.g. `'#0f6cbd80'` for\n   * 50% opacity). Other formats are not supported (development warning).\n   */\n  value?: string;\n  /**\n   * Initial hex color for uncontrolled usage (also what a form reset restores). Like every edit it\n   * is shown, submitted and reported as a lowercase `#rrggbb`, or `#rrggbbaa` when it is not fully\n   * opaque (`'#ABC'` becomes `'#aabbcc'`).\n   * @default '#0f6cbd'\n   */\n  defaultValue?: string;\n  /**\n   * Called with the new color when it changes: a lowercase `#rrggbb`, or `#rrggbbaa` when the color\n   * is not fully opaque.\n   */\n  onValueChange?: (color: string) => void;\n  /**\n   * Called with the new color when it changes.\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (color: string) => void;\n  /**\n   * Preset colors shown as quick-select swatches. Pass `{ color, label }` objects so screen reader\n   * users hear a name; a plain hex string is announced by its hex code. Non-hex presets are\n   * skipped (development warning). Picking a preset keeps the current opacity, so a preset's alpha\n   * digits are ignored. With an alpha below `f`/`ff` (`#rgba`, `#rrggbbaa`) there is a development\n   * warning, and a string preset is announced by the `#rrggbb` color it applies; an opaque alpha\n   * (`#rgbf`, `#rrggbbff`) changes nothing, and the string stays the name as written.\n   * @default Blue, Red, Green, Yellow, Purple, Teal, Pink and Black (Fluent brand colors)\n   */\n  presets?: ReadonlyArray<string | ColorPickerPreset>;\n  /** Whether to show the opacity slider. The opacity is the alpha byte of `value`.\n   * @default false\n   */\n  showOpacity?: boolean;\n  /** Texts of the picker's own parts (hex field, error, presets, opacity), for localisation. */\n  labels?: ColorPickerLabels;\n  /** Form field name. With a name, the current color is submitted with the form. */\n  name?: string;\n  /**\n   * Marks the hidden form input as required (a color is always chosen, so it never blocks). A\n   * consumer `aria-required` has the same effect: `role=\"group\"` does not support it, so it is not\n   * rendered on the group.\n   */\n  required?: boolean;\n  /** Id of the form the picker belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Ref to the root `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// wave-allow-color: default color value (user color data, C-TOKENS exception)\nconst DEFAULT_COLOR = '#0f6cbd';\n\nconst DEFAULT_LABELS: Required<ColorPickerLabels> = {\n  hex: 'Hex',\n  hexInput: 'Hex color value',\n  hexError: `Enter a hex color such as ${DEFAULT_COLOR}.`,\n  presets: 'Preset colors',\n  opacity: 'Opacity',\n};\n\nconst DEFAULT_PRESETS: readonly ColorPickerPreset[] = [\n  { color: '#0f6cbd', label: 'Blue' }, // wave-allow-color: preset swatch data\n  { color: '#d13438', label: 'Red' }, // wave-allow-color: preset swatch data\n  { color: '#107c10', label: 'Green' }, // wave-allow-color: preset swatch data\n  { color: '#ffb900', label: 'Yellow' }, // wave-allow-color: preset swatch data\n  { color: '#5c2d91', label: 'Purple' }, // wave-allow-color: preset swatch data\n  { color: '#008272', label: 'Teal' }, // wave-allow-color: preset swatch data\n  { color: '#e3008c', label: 'Pink' }, // wave-allow-color: preset swatch data\n  { color: '#242424', label: 'Black' }, // wave-allow-color: preset swatch data\n];\n\ninterface ResolvedPresets {\n  items: SwatchItem[];\n  /** Presets that are not hex colors (skipped). */\n  invalid: string[];\n  /** Presets with an alpha byte below 255, which a preset cannot apply (ignored). */\n  translucent: string[];\n}\n\n/** Normalises presets to swatch items keyed by their lowercase `#rrggbb` (duplicates dropped). */\nfunction resolvePresets(presets: ReadonlyArray<string | ColorPickerPreset>): ResolvedPresets {\n  const items: SwatchItem[] = [];\n  const invalid: string[] = [];\n  const translucent: string[] = [];\n  const seen = new Set<string>();\n  for (const preset of presets) {\n    const color = typeof preset === 'string' ? preset : preset.color;\n    const parsed = parseHexColor(color);\n    if (!parsed) {\n      invalid.push(color);\n      continue;\n    }\n    // Picking a preset keeps the current opacity, so its own alpha never applies.\n    const hasAlpha = parsed.alpha !== 255;\n    if (hasAlpha) translucent.push(color);\n    if (seen.has(parsed.rgb)) continue;\n    seen.add(parsed.rgb);\n    // A string preset is announced by its hex code: the color it applies, without the alpha.\n    const stringLabel = hasAlpha ? parsed.rgb : color;\n    items.push({\n      value: parsed.rgb,\n      color: parsed.rgb,\n      label: typeof preset === 'string' ? stringLabel : preset.label,\n    });\n  }\n  return { items, invalid, translucent };\n}\n\n/** The hex field's text while the user edits it (`null` state = the field shows the value). */\ninterface HexDraft {\n  /** The typed text. */\n  text: string;\n  /** Kept after leaving the field because it is not a hex color, so it is flagged as invalid. */\n  flagged: boolean;\n}\n\n/** A hex draft without digits (`''` or a lone `#`): leaving the field shows the value again. */\nfunction isBlankDraft(text: string): boolean {\n  const trimmed = text.trim();\n  return trimmed === '' || trimmed === '#';\n}\n\n/** Whether typed hex text carries its own alpha digits (`#rgba` or `#rrggbbaa`). */\nfunction hasAlphaDigits(text: string): boolean {\n  const digits = text.trim().replace(/^#/, '').length;\n  return digits === 4 || digits === 8;\n}\n\n/**\n * A color picker: a preview, a hex text field, optional preset swatches and an optional opacity\n * slider, grouped as a named `role=\"group\"`.\n *\n * - **Value**: a hex color, `#rrggbb` or `#rrggbbaa`. The opacity slider shows and edits the\n *   value's alpha byte; picking a preset or typing a 6-digit hex keeps the current opacity.\n * - **Hex field**: the text is a draft (surrounding whitespace is dropped). Complete 6- or 8-digit\n *   values are applied while typing; text that can never be a hex color is flagged at once\n *   (`aria-invalid` plus the `hexError` description). Leaving the field or pressing Enter applies\n *   a short `#rgb` (keeping the current opacity) or `#rgba`, then shows the current value again\n *   (also when a controlled parent rejected the typed color); an empty field (or a lone `#`) also\n *   shows the current value again. Any other text is kept and flagged instead of being thrown\n *   away, until it is corrected, cleared, or the value changes from elsewhere (a preset, the\n *   opacity slider, the parent, a form reset). Enter still submits the surrounding form, with the\n *   color just applied; while the text is flagged, the form submits the last applied color.\n * - **Presets** render as a SwatchPicker radiogroup (\"Preset colors\"): one tab stop, arrow keys\n *   move and pick, and the selected preset shows a ring and a check glyph.\n * - **Naming**: `aria-label`/`aria-labelledby` name the group; inside a `Field` its label does, and\n *   the Field's hint and error describe the group. The invalid state (`aria-invalid`, from the\n *   Field or the prop) is set on the hex field, since `role=\"group\"` does not support it, and the\n *   hex field is then also described by the Field's error and by a consumer `aria-errormessage`\n *   (which is routed to the hex field too). A consumer `aria-required` makes the hidden form input\n *   required instead of reaching the group. The texts of the picker's own parts are localised with\n *   `labels`.\n * - **Forms**: with `name` the color is submitted with the form; a form reset restores\n *   `defaultValue` and reports it through `onValueChange` only when the color changes.\n *\n * @example\n * <ColorPicker aria-label=\"Accent color\" showOpacity value={color} onValueChange={setColor} />\n */\nexport const ColorPicker = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  presets = DEFAULT_PRESETS,\n  showOpacity = false,\n  labels,\n  name,\n  required,\n  form,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  ref,\n  ...rest\n}: ColorPickerProps) => {\n  if (onChange !== undefined) warnDeprecated('ColorPicker', 'onChange', 'onValueChange');\n  // The default is written like every edit (C-FORMS): the picker shows, submits and restores it as\n  // a lowercase `#rrggbb`/`#rrggbbaa`. A value that is not a hex color stays as given (warning\n  // below).\n  const rawDefault = defaultValue ?? DEFAULT_COLOR;\n  const initialValue = normalizeHexColor(rawDefault) ?? rawDefault;\n  const strings = { ...DEFAULT_LABELS, ...labels };\n  const [color, setColor] = useControllable(valueProp, initialValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const parsed = parseHexColor(color);\n  const alpha = parsed?.alpha ?? 255;\n  const opacity = alphaToOpacity(alpha);\n\n  /** The single commit path: every edit is `#rrggbb` + an alpha byte. */\n  const commit = (rgb: string, nextAlpha: number) => setColor(formatHexColor(rgb, nextAlpha));\n\n  // The hex text is a draft over `color` while the user edits it (null = show `color`).\n  const [draft, setDraft] = React.useState<HexDraft | null>(null);\n  // A value change from elsewhere (a preset, the opacity slider, the parent, a form reset) replaces\n  // a flagged draft, so the field never shows stale text next to the new preview (input-pickers#25).\n  // While the user types, the draft is not flagged and stays.\n  const [syncedColor, setSyncedColor] = React.useState(color);\n  if (color !== syncedColor) {\n    setSyncedColor(color);\n    if (draft?.flagged) setDraft(null);\n  }\n  const hexText = draft?.text ?? color;\n  // Text that can never be a hex color is flagged while typing; an incomplete one once the user\n  // leaves the field with it (`flagged`).\n  const draftInvalid =\n    draft !== null && !isBlankDraft(draft.text) && (draft.flagged || !isHexDraft(draft.text));\n\n  const {\n    items: presetItems,\n    invalid: invalidPresets,\n    translucent: translucentPresets,\n  } = resolvePresets(presets);\n  const invalidPresetKey = invalidPresets.join('\\n');\n  const translucentPresetKey = translucentPresets.join('\\n');\n  const invalidValue = parsed ? null : color;\n\n  React.useEffect(() => {\n    if (invalidValue !== null) {\n      warnOnce(\n        'ColorPicker:invalid-value',\n        `ColorPicker: \"${invalidValue}\" is not a hex color (#rrggbb or #rrggbbaa). Pass a hex value; the opacity slider is disabled until then.`,\n      );\n    }\n  }, [invalidValue]);\n  React.useEffect(() => {\n    if (!invalidPresetKey) return;\n    for (const preset of invalidPresetKey.split('\\n')) {\n      warnOnce(\n        `ColorPicker:invalid-preset:${preset}`,\n        `ColorPicker: preset \"${preset}\" is not a hex color (#rgb or #rrggbb) and is not shown.`,\n      );\n    }\n  }, [invalidPresetKey]);\n  React.useEffect(() => {\n    if (!translucentPresetKey) return;\n    for (const preset of translucentPresetKey.split('\\n')) {\n      warnOnce(\n        `ColorPicker:alpha-preset:${preset}`,\n        `ColorPicker: preset \"${preset}\" has an alpha byte, which is ignored: picking a preset keeps the current opacity. Pass the color as #rgb or #rrggbb.`,\n      );\n    }\n  }, [translucentPresetKey]);\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const hexInputRef = React.useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, rootRef);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n    },\n    { labelable: false },\n  );\n  // A group supports neither aria-invalid, aria-required nor a native `required` (ARIA 1.2): the\n  // invalid state goes to the hex field and the required state to the hidden form input.\n  const {\n    'aria-invalid': groupInvalid,\n    'aria-required': _ariaRequired,\n    required: _required,\n    ...groupProps\n  } = fieldProps;\n  // Any invalid state from outside (the prop or the Field, `grammar`/`spelling` included) is set on\n  // the hex field as is; only `true` shows the error look.\n  const fieldInvalid =\n    groupInvalid !== undefined && groupInvalid !== false && groupInvalid !== 'false';\n  // A consumer aria-required is not supported on the group either: it requires the hidden input.\n  const isRequired =\n    required ?? (ariaRequired === true || ariaRequired === 'true' || (field?.required ?? false));\n  // The consumer's error message belongs to the invalid state set from outside (the prop or the\n  // Field), so it is routed to the hex field only while that state is set.\n  const errorMessageId = (fieldInvalid && ariaErrorMessage) || undefined;\n\n  useFormReset(\n    rootRef,\n    () => {\n      // Only a real change is reported: the same color in another spelling (a controlled `#ABC`\n      // against the default `#aabbcc`) is not one.\n      if ((normalizeHexColor(color) ?? color) !== initialValue) setColor(initialValue);\n      setDraft(null);\n    },\n    form,\n  );\n\n  const errorId = useId('wave-color-picker-error');\n  // The hex field carries the picker's invalid state: its own flagged text, or the Field's/prop's.\n  const hexAriaInvalid = draftInvalid ? true : fieldInvalid ? groupInvalid : undefined;\n  const hexInvalidLook = isInvalidLook(false, hexAriaInvalid);\n\n  const handleHexChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    // Surrounding whitespace (a pasted `'#abcdef '`) is dropped, so the text that is checked,\n    // committed and shown is the same.\n    let text = e.target.value.trim();\n    if (text !== '' && !text.startsWith('#')) text = `#${text}`;\n    setDraft({ text, flagged: false });\n    const typed = parseHexInput(text);\n    // A 6-digit hex keeps the current opacity; an 8-digit one brings its own alpha.\n    if (typed) commit(typed.rgb, hasAlphaDigits(text) ? typed.alpha : alpha);\n  };\n\n  /** Finishes the hex draft when the field is left or Enter is pressed. */\n  const finishHexDraft = () => {\n    if (draft === null || draft.flagged) return;\n    const typed = parseHexColor(draft.text);\n    if (typed || isBlankDraft(draft.text)) {\n      // A short `#rgb` (current opacity) or `#rgba` is applied here; complete 6- and 8-digit\n      // values were applied while typing, so a rejecting parent is not asked twice. Then the field\n      // shows the current value (also when a controlled parent rejected it).\n      if (typed && !parseHexInput(draft.text)) {\n        commit(typed.rgb, hasAlphaDigits(draft.text) ? typed.alpha : alpha);\n      }\n      setDraft(null);\n      return;\n    }\n    // Text that is not a hex color is kept and flagged instead of silently thrown away (WCAG 3.3.1).\n    setDraft({ text: draft.text, flagged: true });\n  };\n\n  const handleHexKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    // Not prevented: Enter still submits the surrounding form, which then carries the color just\n    // applied (the submit follows the keydown, after React has rendered the new value).\n    if (e.key === 'Enter' && !e.defaultPrevented && !e.nativeEvent.isComposing) finishHexDraft();\n  };\n\n  const handlePreset = (rgb: string) => {\n    // Only a preset color is committed. The presets' own form reset reports `''` (no swatch): it\n    // is ignored here, and the picker's reset restores `defaultValue` (input-basic#12).\n    const preset = parseHexColor(rgb);\n    if (!preset) return;\n    setDraft(null);\n    commit(preset.rgb, alpha);\n  };\n\n  const handleOpacityChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!parsed) return;\n    commit(parsed.rgb, opacityToAlpha(Number(e.target.value)));\n  };\n\n  const selectedPreset = parsed ? parsed.rgb : '';\n\n  return (\n    <div\n      role=\"group\"\n      {...groupProps}\n      className={cn(\n        'relative inline-flex flex-col gap-3 rounded border border-border bg-background p-3 shadow-4',\n        className,\n      )}\n      {...rest}\n      ref={mergedRef}\n    >\n      {/* Color preview and hex input */}\n      <div className=\"flex items-center gap-2\">\n        <div\n          data-color-preview=\"\"\n          className=\"h-10 w-10 shrink-0 rounded border border-border\"\n          style={{ backgroundColor: parsed ? formatHexColor(parsed.rgb, parsed.alpha) : color }}\n          aria-hidden=\"true\"\n        />\n        <label className=\"flex flex-col gap-1\">\n          <span className=\"text-caption-1 text-muted-foreground\">{strings.hex}</span>\n          <input\n            ref={hexInputRef}\n            type=\"text\"\n            value={hexText}\n            onChange={handleHexChange}\n            onKeyDown={handleHexKeyDown}\n            onBlur={finishHexDraft}\n            aria-label={strings.hexInput}\n            aria-invalid={hexAriaInvalid}\n            aria-errormessage={errorMessageId}\n            aria-describedby={joinIds(\n              draftInvalid && errorId,\n              field?.validationMessageId ?? (fieldInvalid ? field?.errorId : undefined),\n              errorMessageId,\n            )}\n            maxLength={9}\n            spellCheck={false}\n            autoComplete=\"off\"\n            className={cn(\n              'w-24 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1 text-body-1 text-foreground',\n              inputFocus,\n              hexInvalidLook && inputInvalid,\n            )}\n          />\n        </label>\n      </div>\n      {draftInvalid && (\n        <span id={errorId} className=\"text-caption-1 text-error\">\n          {strings.hexError}\n        </span>\n      )}\n\n      {/* Preset swatches: the Field wiring (id, label, hint/error, invalid, required) stays on the\n          group, so the nested radiogroup does not read the surrounding FieldContext. */}\n      {presetItems.length > 0 && (\n        <FieldContext.Provider value={null}>\n          <SwatchPicker\n            items={presetItems}\n            value={selectedPreset}\n            onValueChange={handlePreset}\n            aria-label={strings.presets}\n            size=\"small\"\n            shape=\"rounded\"\n          />\n        </FieldContext.Provider>\n      )}\n\n      {/* Opacity slider */}\n      {showOpacity && (\n        <div className=\"flex items-center gap-2\">\n          <span className=\"w-14 text-caption-1 text-muted-foreground\">{strings.opacity}</span>\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            value={opacity}\n            onChange={handleOpacityChange}\n            disabled={!parsed}\n            aria-label={strings.opacity}\n            aria-valuetext={`${opacity}%`}\n            className={cn(\n              'h-1 flex-1 accent-primary disabled:cursor-not-allowed disabled:opacity-50',\n              focusRing,\n            )}\n          />\n          <span className=\"w-10 text-end text-caption-1 text-muted-foreground\">{opacity}%</span>\n        </div>\n      )}\n\n      <HiddenInput\n        type=\"text\"\n        name={name}\n        form={form}\n        value={color}\n        required={isRequired}\n        onInvalid={() => hexInputRef.current?.focus()}\n      />\n    </div>\n  );\n};\n\nColorPicker.displayName = 'ColorPicker';\n"],"mappings":"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"}

package/dist/components/input/Combobox.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),ee=require("../../lib/dev.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../hooks/useControllable.cjs"),i=require("../../hooks/useMergedRefs.cjs"),a=require("../../hooks/useFieldControl.cjs"),o=require("../../lib/styles.cjs"),te=require("../../lib/icons.cjs"),ne=require("./Input.cjs"),re=require("../../hooks/useFormReset.cjs"),ie=require("../internal/HiddenInput.cjs"),s=require("../../hooks/useListbox.cjs"),ae=require("./pickerStyles.cjs"),c=require("./Combobox.expand.cjs"),l=require("./Option.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");function oe(e,t){return(e.textValue??e.label).toLowerCase().includes(t.toLowerCase())}var f=e=>{let{value:f,defaultValue:p,onValueChange:m,onOptionSelect:h,open:se,defaultOpen:ce,onOpenChange:le,placeholder:ue,disabled:g=!1,freeform:_=!1,name:de,form:v,required:y,autoComplete:fe=`off`,autoCapitalize:pe,autoCorrect:me,maxLength:he,readOnly:b,clearable:ge=!1,expandIcon:x,labels:S,inputMode:_e,spellCheck:ve,enterKeyHint:ye,autoFocus:be,tabIndex:xe,id:Se,"aria-label":Ce,"aria-labelledby":we,"aria-describedby":Te,"aria-invalid":Ee,"aria-required":De,"aria-errormessage":C,"aria-details":w,onFocus:T,onBlur:E,onKeyDown:Oe,onKeyUp:ke,controlRef:Ae,className:je,children:D,ref:Me,...Ne}=e;h!==void 0&&ee.warnDeprecated(`Combobox`,`onOptionSelect`,`onValueChange`);let O=a.useFieldContext(),Pe=(y??O?.required??!1)&&!b,k=a.useFieldControl({id:Se,"aria-label":Ce,"aria-labelledby":we,"aria-describedby":Te,"aria-invalid":Ee,"aria-required":De??y}),Fe=ne.isInvalidLook(!1,k[`aria-invalid`]),[A,j]=r.useControllable(f,p??``,m),M=!g&&!b,[N,P]=r.useControllable(se,(ce??!1)&&M,le),F=N&&M,[I,L]=u.useState(null),[Ie,Le]=u.useState(M);Ie!==M&&(Le(M),M||L(null));let R=!M&&N;u.useEffect(()=>{R&&P(!1)},[R,P]);let[Re,z]=u.useState(null),B=u.useRef(null),V=u.useRef(null),ze=u.useMemo(()=>s.collectOptionLabels(D),[D]),Be=u.useMemo(()=>I?e=>oe(e,I):void 0,[I]),H=e=>{z(e),j(e),h?.(e)},U=()=>{P(!1),L(null)},W;_?W=()=>{L(null),H(``)}:I&&(W=()=>L(null));let G=s.useListbox({open:F,onOpenChange:e=>{e?P(!0):U()},mode:`editable`,selectedValues:A?[A]:[],onSelect:e=>{j(e),h?.(e),L(null),z(null)},filter:Be,autoHighlight:!_&&I?`first`:!1,idPrefix:`combobox-listbox`,onClearDraft:W}),K=A?G.getItem(A)?.label??ze.get(A):void 0,q;q=_?A===Re?A:K??A:I??K??``,_&&I!==null&&I!==q&&L(q);let J=F&&G.items.length>0,Y=S?.noMatches??`No matches`,X=F&&(J||!!I),Ve=X&&!J,{layerId:He,setReference:Ue,surfaceRef:We,floatingProps:Ge}=l.useListboxPopup({open:F,surfaceOpen:X,onDismiss:U,rootRef:B,anchorRef:V}),Ke=i.useMergedRefs(B,Me),Z=i.useMergedRefs(V,Ae,Ue);re.useFormReset(V,()=>{j(p??``),L(null),z(null)},v);let qe=e=>{if(e.key===`Escape`&&F&&!X&&!e.nativeEvent.isComposing){U(),W&&e.currentTarget.value!==``&&(e.preventDefault(),W());return}G.onKeyDown(e)},Je=e=>{let t=e.target.value;L(t),F||P(!0),_&&H(t)},Ye=()=>{M&&(F?U():P(!0),V.current?.focus())},Xe=()=>{j(``),z(null),L(null),P(!1),V.current?.focus()},Q=c.showsExpandButton(x),$=ge&&A!==``&&!b,Ze=k[`aria-label`]===void 0?k[`aria-labelledby`]??O?.labelId:k[`aria-labelledby`];return(0,d.jsxs)(`div`,{...Ne,ref:Ke,className:t.cn(`relative inline-flex flex-col`,je),children:[(0,d.jsxs)(`div`,{className:`relative flex items-center`,children:[(0,d.jsx)(`input`,{type:`text`,autoComplete:fe,...k,...G.getComboboxProps(),"aria-expanded":J,"aria-errormessage":C,"aria-details":w,ref:Z,disabled:g,readOnly:b,placeholder:ue,autoCapitalize:pe,autoCorrect:me,maxLength:he,inputMode:_e,spellCheck:ve,enterKeyHint:ye,autoFocus:be,tabIndex:xe,value:q,onChange:Je,onClick:()=>{!F&&M&&P(!0)},onKeyDown:n.composeEventHandlers(Oe,b?void 0:qe),onKeyUp:n.composeEventHandlers(ke,G.onKeyUp),onFocus:T,onBlur:n.composeEventHandlers(E,()=>L(null),{checkDefaultPrevented:!1}),className:t.cn(o.inputBase,`border-b-stroke-accessible`,o.inputFocus,o.disabledStyles,Fe&&`border-destructive focus:border-b-destructive`,ae.pickerEndPadding(Number($)+Number(Q)))}),$&&(0,d.jsx)(`button`,{type:`button`,"aria-label":S?.clear??`Clear selection`,disabled:g,onMouseDown:e=>e.preventDefault(),onClick:Xe,className:t.cn(`absolute flex h-6 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground`,Q?`end-7`:`end-1`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,`disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`),children:(0,d.jsx)(te.DismissIcon,{})}),Q&&(0,d.jsx)(c.PickerExpandButton,{component:`Combobox`,expandIcon:x,label:S?.expand??`Show options`,expanded:J,listboxId:G.listboxId,disabled:g||!!b,onToggle:Ye})]}),(0,d.jsx)(`span`,{role:`status`,className:`sr-only`,children:Ve&&Y}),(0,d.jsx)(l.ListboxSurface,{listbox:G,layerId:He,surfaceRef:We,floatingProps:Ge,open:F,expanded:J,emptyContent:I?(0,d.jsx)(`div`,{"aria-hidden":`true`,className:`px-3 py-1.5 text-body-1 text-muted-foreground`,children:Y}):void 0,"aria-label":k[`aria-label`],"aria-labelledby":Ze,children:D}),(0,d.jsx)(ie.HiddenInput,{name:de,form:v,disabled:g,value:A,type:`text`,required:Pe,onInvalid:()=>V.current?.focus()})]})};f.displayName=`Combobox`;var p=l.Option,m=l.OptionGroup,h=Object.assign(f,{Option:l.Option,OptionGroup:l.OptionGroup});exports.Combobox=h,exports.ComboboxOption=p,exports.ComboboxOptionGroup=m,exports.Option=l.Option,exports.OptionGroup=l.OptionGroup;
+//# sourceMappingURL=Combobox.cjs.map

package/dist/components/input/Combobox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.cjs","names":["useFieldContext","useFieldControl","isInvalidLook","useControllable","React","collectOptionLabels","useListbox","useListboxPopup","useMergedRefs","showsExpandButton","cn","composeEventHandlers","inputBase","inputFocus","disabledStyles","pickerEndPadding","DismissIcon","PickerExpandButton","ListboxSurface","HiddenInput","Option","OptionGroup","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_useControllable","require_useMergedRefs","require_useFieldControl","require_styles","require_icons","require_Input","require_useFormReset","require_HiddenInput","require_useListbox","require_pickerStyles","require_Combobox_expand","require_Option","react","react_jsx_runtime","matchesText","item","text","ComboboxRoot","valueProp","openProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","props","onOptionSelect","field","validates","required","readOnly","fieldProps","invalidLook","value","setValue","defaultValue","onValueChange","interactive","disabled","openState","setOpen","defaultOpen","onOpenChange","open","draft","setDraft","wasInteractive","setWasInteractive","lockedOpen","typedValue","setTypedValue","rootRef","inputRef","optionLabels","children","filter","commitText","close","clearDraft","freeform","listbox","next","optionLabel","inputText","expanded","noMatchesText","labels","surfaceOpen","noMatches","rootMergedRef","ref","inputMergedRef","controlRef","setReference","form","handleKeyDown","event","handleChange","handleExpandClick","handleClear","showExpand","expandIcon","showClear","clearable","listLabelledBy","className","onKeyDown","onKeyUp","onBlur","ComboboxOption","ComboboxOptionGroup","Combobox"],"sources":["../../../src/components/input/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport type { Slot } from '../../lib/slot';\nimport { disabledStyles, focusRing, inputBase, inputFocus, inputInvalid } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { collectOptionLabels, useListbox, type ListboxItem } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { PickerExpandButton, showsExpandButton } from './Combobox.expand';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, OptionGroup, useListboxPopup } from './Option';\nimport { PICKER_ICON_BUTTON_CLASSES, pickerEndPadding } from './pickerStyles';\nimport type { RoutedHandlers } from './routedHandlers';\n\nexport { Option, OptionGroup } from './Option';\nexport type { OptionProps, OptionGroupProps } from './Option';\n\n/* ------------------------------------------------------------------ */\n/*  Combobox                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Combobox's built-in texts, for localization. Each member is optional and falls back to its\n * English default.\n */\nexport interface ComboboxLabels {\n  /** Status text (announced, and shown in the popup) when the typed text matches no option.\n   * @default 'No matches'\n   */\n  noMatches?: string;\n  /** Name of the clear button (`clearable`).\n   * @default 'Clear selection'\n   */\n  clear?: string;\n  /** Name of the expand button at the end of the input.\n   * @default 'Show options'\n   */\n  expand?: string;\n}\n\n/** Properties for the Combobox component. */\nexport interface ComboboxProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | RoutedHandlers\n> {\n  /** Controlled selected value (`''` for none). */\n  value?: string;\n  /**\n   * Initial selected value for uncontrolled usage.\n   * @default ''\n   */\n  defaultValue?: string;\n  /**\n   * Called with the new value when it changes: an option is selected, or (with `freeform`) the\n   * text changes. Not called when the current option is selected again.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called on every option activation, also when the current option is selected again (and, with\n   * `freeform`, on every text change).\n   * @deprecated Use `onValueChange`.\n   */\n  onOptionSelect?: (value: string) => void;\n  /**\n   * Controlled open state of the listbox. The list renders only in the browser: an open combobox\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Initial open state for uncontrolled usage. A combobox that starts disabled or read-only\n   * starts closed. The list renders only in the browser: it is closed in the server HTML and opens\n   * once the combobox has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Called when the listbox opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /**\n   * Whether the combobox is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the typed text is itself the value. Without it, typing only filters the options (the\n   * first match becomes active, so Enter selects it) and the input shows the selected option's\n   * label again when the listbox closes or loses focus. With it, the input shows typed text as\n   * typed (also when it equals an option's value), a selected option's label, and a controlled\n   * `value` as soon as the parent sets it (a parent that normalizes or rejects the text).\n   * @default false\n   */\n  freeform?: boolean;\n  /** Name of the value in form submissions (renders a hidden input). */\n  name?: string;\n  /** Id of the form the value belongs to, when the Combobox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation). Like a native readonly\n   * input, a `readOnly` Combobox does not block submission.\n   */\n  required?: boolean;\n  /**\n   * The `autocomplete` attribute of the `<input role=\"combobox\">`. Browser autofill is off unless\n   * you set it (for example `'on'`).\n   * @default 'off'\n   */\n  autoComplete?: string;\n  /** The maximum length of the typed text (`maxlength` of the `<input role=\"combobox\">`). */\n  maxLength?: number;\n  /**\n   * The value cannot be changed: the input is read-only and the listbox neither opens (click,\n   * keyboard, a controlled `open`) nor commits; Escape is left to the page. Turning it (or\n   * `disabled`) on while the listbox is open closes it (`onOpenChange(false)`).\n   */\n  readOnly?: boolean;\n  /**\n   * Shows a clear button while a value is selected (not while `readOnly`; while `disabled` it is\n   * shown disabled, as in DatePicker and TimePicker). It clears the value\n   * (`onValueChange('')`), drops typed text, closes the list and moves focus to the input. It is\n   * a tab stop after the input.\n   * @default false\n   */\n  clearable?: boolean;\n  /**\n   * The glyph of the expand button at the end of the input (default: a chevron). The button\n   * opens and closes the list without moving focus out of the input and is not a tab stop\n   * (Alt+ArrowDown opens the list from the keyboard). `null` or `undefined` keep the chevron;\n   * `false`, or a value that renders nothing, hides the button. Decorative content rendered\n   * inside the built-in button: a `<button>` or `Button` passed here is not nested (its children\n   * become the glyph, with a development warning).\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * The built-in texts (the \"No matches\" status and the names of the clear and expand buttons),\n   * for localization. Unset members keep their English defaults.\n   */\n  labels?: ComboboxLabels;\n  /** Called when the `<input role=\"combobox\">` receives focus (the root keeps other handlers). */\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  /** Called when the `<input role=\"combobox\">` loses focus. */\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  /**\n   * Called on a key press in the `<input role=\"combobox\">`, before the built-in listbox keys;\n   * `event.preventDefault()` skips them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Called when a key is released in the `<input role=\"combobox\">`. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;\n  /** Ref to the `<input role=\"combobox\">` (the focusable element). */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nfunction matchesText(item: ListboxItem, text: string): boolean {\n  return (item.textValue ?? item.label).toLowerCase().includes(text.toLowerCase());\n}\n\nconst ComboboxRoot = (props: ComboboxProps) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onOptionSelect,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    placeholder,\n    disabled = false,\n    freeform = false,\n    name,\n    form,\n    required,\n    autoComplete = 'off',\n    autoCapitalize,\n    autoCorrect,\n    maxLength,\n    readOnly,\n    clearable = false,\n    expandIcon,\n    labels,\n    inputMode,\n    spellCheck,\n    enterKeyHint,\n    autoFocus,\n    tabIndex,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-details': ariaDetails,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    controlRef,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  if (onOptionSelect !== undefined) warnDeprecated('Combobox', 'onOptionSelect', 'onValueChange');\n\n  const field = useFieldContext();\n  const isRequired = required ?? field?.required ?? false;\n  const validates = isRequired && !readOnly;\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required matches\n    // `isRequired`.\n    'aria-required': ariaRequired ?? required,\n  });\n  // The error look follows the resolved state: the consumer's `aria-invalid` or the Field's.\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  const [value, setValue] = useControllable(valueProp, defaultValue ?? '', onValueChange);\n  const interactive = !disabled && !readOnly;\n  // A combobox that starts disabled or read-only never shows its list, so it starts closed (no\n  // close to report later).\n  const [openState, setOpen] = useControllable(\n    openProp,\n    (defaultOpen ?? false) && interactive,\n    onOpenChange,\n  );\n  const open = openState && interactive;\n  // Text typed since the last commit, the filter; `null` shows the committed value's label\n  // (input-pickers#7). Freeform: the input shows the value, and the draft follows that text.\n  const [draft, setDraft] = React.useState<string | null>(null);\n  // Locking the control (readOnly/disabled) while typing drops the draft, so the input shows the\n  // committed value again (adjust-during-render pattern, C-HOOKS).\n  const [wasInteractive, setWasInteractive] = React.useState(interactive);\n  if (wasInteractive !== interactive) {\n    setWasInteractive(interactive);\n    if (!interactive) setDraft(null);\n  }\n  // Locking also closes the list itself, not only the derived `open`, so unlocking does not reopen\n  // it without a user action. The close is reported through onOpenChange (a consumer callback from\n  // an effect, C-HOOKS); a controlled `open` that stays true is still not shown while locked.\n  const lockedOpen = !interactive && openState;\n  React.useEffect(() => {\n    if (lockedOpen) setOpen(false);\n  }, [lockedOpen, setOpen]);\n\n  // Freeform: the value the user typed last. While the value still equals it, the input shows it\n  // as typed, even when it equals an option's value (not that option's label).\n  const [typedValue, setTypedValue] = React.useState<string | null>(null);\n\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n  const optionLabels = React.useMemo(() => collectOptionLabels(children), [children]);\n  const filter = React.useMemo(\n    () => (draft ? (item: ListboxItem) => matchesText(item, draft) : undefined),\n    [draft],\n  );\n\n  const commitText = (text: string) => {\n    setTypedValue(text);\n    setValue(text);\n    onOptionSelect?.(text);\n  };\n\n  const close = () => {\n    setOpen(false);\n    setDraft(null);\n  };\n\n  // APG: Escape on a closed listbox clears the textbox. Freeform: the text is the value, so it is\n  // cleared. Otherwise only a typed filter is dropped (the input shows the selected label again);\n  // without one there is nothing to clear and Escape is left to the page.\n  let clearDraft: (() => void) | undefined;\n  if (freeform) {\n    clearDraft = () => {\n      setDraft(null);\n      commitText('');\n    };\n  } else if (draft) {\n    clearDraft = () => setDraft(null);\n  }\n\n  const listbox = useListbox({\n    open,\n    onOpenChange: (next) => {\n      if (next) setOpen(true);\n      else close();\n    },\n    mode: 'editable',\n    selectedValues: value ? [value] : [],\n    onSelect: (next) => {\n      setValue(next);\n      onOptionSelect?.(next);\n      setDraft(null);\n      setTypedValue(null);\n    },\n    filter,\n    // Typing a filter makes its first match active (like Fluent's Combobox), so Enter selects what\n    // the list shows instead of submitting the form. Nothing is active on open or with the text\n    // cleared. Freeform: the text is the value, so Enter keeps it unless the user moved to an\n    // option.\n    autoHighlight: !freeform && draft ? 'first' : false,\n    idPrefix: 'combobox-listbox',\n    onClearDraft: clearDraft,\n  });\n\n  // The input text. Freeform: the value as typed while it is the value the user typed last, else\n  // the label of the option with that value, else the value itself — so the text follows a\n  // controlled parent that normalizes or rejects what was typed while the input still has focus.\n  // Otherwise: the typed filter, else the selected option's label.\n  const optionLabel = value\n    ? (listbox.getItem(value)?.label ?? optionLabels.get(value))\n    : undefined;\n  let inputText: string;\n  if (freeform) inputText = value === typedValue ? value : (optionLabel ?? value);\n  else inputText = draft ?? optionLabel ?? '';\n  // Freeform: the filter follows the text (adjust-during-render pattern, C-HOOKS; the text does not\n  // depend on the filter, so this settles in one pass).\n  if (freeform && draft !== null && draft !== inputText) setDraft(inputText);\n\n  const expanded = open && listbox.items.length > 0;\n  const noMatchesText = labels?.noMatches ?? 'No matches';\n  // The popup shows the list, or \"No matches\" for a draft.\n  const surfaceOpen = open && (expanded || !!draft);\n  const noMatches = surfaceOpen && !expanded;\n  const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n    open,\n    surfaceOpen,\n    onDismiss: close,\n    rootRef,\n    anchorRef: inputRef,\n  });\n\n  const rootMergedRef = useMergedRefs<HTMLDivElement>(rootRef, ref);\n  const inputMergedRef = useMergedRefs<HTMLInputElement>(inputRef, controlRef, setReference);\n\n  useFormReset(\n    inputRef,\n    () => {\n      setValue(defaultValue ?? '');\n      setDraft(null);\n      setTypedValue(null);\n    },\n    form,\n  );\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Escape' && open && !surfaceOpen && !event.nativeEvent.isComposing) {\n      // Open with nothing shown (no options): close as a closed list would handle Escape — clear\n      // the text if there is any, otherwise leave the key to an enclosing layer (overlays#1).\n      close();\n      if (clearDraft && event.currentTarget.value !== '') {\n        event.preventDefault();\n        clearDraft();\n      }\n      return;\n    }\n    listbox.onKeyDown(event);\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const text = event.target.value;\n    setDraft(text);\n    if (!open) setOpen(true);\n    if (freeform) commitText(text);\n  };\n\n  // The expand button opens and closes the list like the input's own keys; focus stays in (or\n  // returns to) the input.\n  const handleExpandClick = () => {\n    if (!interactive) return;\n    if (open) close();\n    else setOpen(true);\n    inputRef.current?.focus();\n  };\n\n  // Clearing is not an option activation: the state is set directly, not through `commitText`\n  // (which calls the deprecated `onOptionSelect` in freeform mode). The button disappears with the\n  // value, so focus moves to the input explicitly (C-DISABLED).\n  const handleClear = () => {\n    setValue('');\n    setTypedValue(null);\n    setDraft(null);\n    setOpen(false);\n    inputRef.current?.focus();\n  };\n\n  const showExpand = showsExpandButton(expandIcon);\n  // Read-only comboboxes offer no clear action (the value cannot change).\n  const showClear = clearable && value !== '' && !readOnly;\n\n  const listLabelledBy =\n    fieldProps['aria-label'] === undefined\n      ? (fieldProps['aria-labelledby'] ?? field?.labelId)\n      : fieldProps['aria-labelledby'];\n\n  return (\n    <div {...rest} ref={rootMergedRef} className={cn('relative inline-flex flex-col', className)}>\n      <div className=\"relative flex items-center\">\n        <input\n          type=\"text\"\n          autoComplete={autoComplete}\n          {...fieldProps}\n          {...listbox.getComboboxProps()}\n          aria-expanded={expanded}\n          aria-errormessage={ariaErrorMessage}\n          aria-details={ariaDetails}\n          ref={inputMergedRef}\n          disabled={disabled}\n          readOnly={readOnly}\n          placeholder={placeholder}\n          autoCapitalize={autoCapitalize}\n          autoCorrect={autoCorrect}\n          maxLength={maxLength}\n          inputMode={inputMode}\n          spellCheck={spellCheck}\n          enterKeyHint={enterKeyHint}\n          autoFocus={autoFocus}\n          tabIndex={tabIndex}\n          value={inputText}\n          onChange={handleChange}\n          onClick={() => {\n            if (!open && interactive) setOpen(true);\n          }}\n          // Read-only: no listbox keys at all (they would open, commit or clear the value).\n          onKeyDown={composeEventHandlers(onKeyDown, readOnly ? undefined : handleKeyDown)}\n          onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n          onFocus={onFocus}\n          onBlur={composeEventHandlers(onBlur, () => setDraft(null), {\n            checkDefaultPrevented: false,\n          })}\n          className={cn(\n            inputBase,\n            'border-b-stroke-accessible',\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n            pickerEndPadding(Number(showClear) + Number(showExpand)),\n          )}\n        />\n        {showClear && (\n          <button\n            type=\"button\"\n            aria-label={labels?.clear ?? 'Clear selection'}\n            disabled={disabled}\n            // Keeps focus in the input, so its blur does not act on a draft before the clear.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            className={cn(\n              PICKER_ICON_BUTTON_CLASSES,\n              showExpand ? 'end-7' : 'end-1',\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            <DismissIcon />\n          </button>\n        )}\n        {showExpand && (\n          <PickerExpandButton\n            component=\"Combobox\"\n            expandIcon={expandIcon}\n            label={labels?.expand ?? 'Show options'}\n            expanded={expanded}\n            listboxId={listbox.listboxId}\n            disabled={disabled || !!readOnly}\n            onToggle={handleExpandClick}\n          />\n        )}\n      </div>\n      {/* Mounted before its text: a live region added together with its text is not announced by\n          every screen reader. The row in the popup is the visible copy. */}\n      <span role=\"status\" className=\"sr-only\">\n        {noMatches && noMatchesText}\n      </span>\n      <ListboxSurface\n        listbox={listbox}\n        layerId={layerId}\n        surfaceRef={surfaceRef}\n        floatingProps={floatingProps}\n        open={open}\n        expanded={expanded}\n        emptyContent={\n          draft ? (\n            <div aria-hidden=\"true\" className=\"px-3 py-1.5 text-body-1 text-muted-foreground\">\n              {noMatchesText}\n            </div>\n          ) : undefined\n        }\n        aria-label={fieldProps['aria-label']}\n        aria-labelledby={listLabelledBy}\n      >\n        {children}\n      </ListboxSurface>\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={value}\n        type=\"text\"\n        // Like a native readonly input, a read-only Combobox is barred from constraint validation\n        // (the user could not fix it); its value is still submitted.\n        required={validates}\n        onInvalid={() => inputRef.current?.focus()}\n      />\n    </div>\n  );\n};\nComboboxRoot.displayName = 'Combobox';\n\n/** Flat name of `Combobox.Option` for React Server Components. */\nexport const ComboboxOption = Option;\n/** Flat name of `Combobox.OptionGroup` for React Server Components. */\nexport const ComboboxOptionGroup = OptionGroup;\n\n/**\n * An editable combobox: a text input with a filterable listbox of `Option`s (APG combobox with\n * list autocomplete). Typing filters the options; ArrowDown/ArrowUp move the highlight\n * (`aria-activedescendant`), Enter selects, Escape closes. Without `freeform` the text is only a\n * filter: its first match becomes active while typing, and the input shows the selected option's\n * label again when the listbox closes. With `freeform` the text itself is the value. Text that\n * matches no option shows \"No matches\" (`labels.noMatches`), announced through a status region.\n * The expand button at the end of the input (a chevron, see `expandIcon`) opens and closes the\n * list without taking focus from the input and is not a tab stop; `clearable` adds a clear button,\n * a tab stop after the input. Both sit with the input in a wrapper `<div>` inside the root.\n *\n * The `<input>` receives `id`, `aria-label`, `aria-labelledby`, `aria-describedby`,\n * `aria-invalid`, `aria-required`, `aria-errormessage`, `aria-details`, `tabIndex`, `autoFocus`,\n * `onFocus`/`onBlur`/`onKeyDown`/`onKeyUp` and the text input attributes `autoComplete`,\n * `autoCapitalize`, `autoCorrect`, `maxLength`, `inputMode`, `spellCheck` and `enterKeyHint`.\n * `ref`, `className`, `style`, other `aria-*` attributes and the remaining props stay on the root\n * `<div>`. Inside a `Field` the input is labelled and described by it. It shows the error look\n * whenever it ends up `aria-invalid` (its own `aria-invalid` or a `Field` error). With\n * `name`/`required` the value takes part in form submission, validation and reset. The open\n * listbox renders in a portal; while closed it stays in the DOM, hidden.\n *\n * Sub-components: `Combobox.Option`, `Combobox.OptionGroup`. React Server Components import the\n * flat names `ComboboxOption` / `ComboboxOptionGroup` (dotted access needs a client file).\n */\nexport const Combobox = /* @__PURE__ */ Object.assign(ComboboxRoot, {\n  Option,\n  OptionGroup,\n});\n"],"mappings":"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"}

package/dist/components/input/Combobox.expand.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/styles.cjs"),a=require("../../lib/icons.cjs"),o=require("../button/Button.slots.cjs"),s=require("./pickerStyles.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u(e){return e==null||r.slotRendersContent(e)}var d=({component:e,expandIcon:u,label:d,expanded:f,listboxId:p,disabled:m,onToggle:h})=>{let{glyph:g,button:_}=o.unwrapButtonGlyph(u);c.useEffect(()=>{_&&n.warnOnce(`${e}:expandIcon-button`,`${e}: \`expandIcon\` received ${_}; its children render as the glyph of the built-in expand button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`expandIcon={<MyIcon />}\`.`)},[_,e]);let v=g!=null&&r.slotRendersContent(g)?g:(0,l.jsx)(a.ChevronDownIcon,{});return(0,l.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-label":d,"aria-expanded":f,"aria-controls":f?p:void 0,disabled:m,onMouseDown:e=>e.preventDefault(),onClick:h,className:t.cn(s.PICKER_ICON_BUTTON_CLASSES,`end-1`,i.focusRing,i.disabledStyles),children:r.renderSlot(v,`span`,t.cn(`inline-flex transition-transform motion-reduce:transition-none`,f&&`rotate-180`),{"aria-hidden":!0})})};d.displayName=`PickerExpandButton`,exports.PickerExpandButton=d,exports.showsExpandButton=u;
+//# sourceMappingURL=Combobox.expand.cjs.map

package/dist/components/input/Combobox.expand.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.expand.cjs","names":["slotRendersContent","unwrapButtonGlyph","ChevronDownIcon","cn","PICKER_ICON_BUTTON_CLASSES","focusRing","disabledStyles","renderSlot","require_runtime","require_cn","require_dev","require_slot","require_styles","require_icons","require_Button_slots","require_pickerStyles","react","react_jsx_runtime","showsExpandButton","expandIcon","PickerExpandButton","content","button","component","glyph","label","expanded","listboxId","event","onToggle"],"sources":["../../../src/components/input/Combobox.expand.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport { disabledStyles, focusRing } from '../../lib/styles';\nimport { unwrapButtonGlyph } from '../button/Button.slots';\nimport { PICKER_ICON_BUTTON_CLASSES } from './pickerStyles';\n\n/**\n * Whether an `expandIcon` value shows the expand button (the rule of optional indicator glyphs):\n * `null` and `undefined` keep the chevron; `false` and any other value that renders nothing\n * (`true`, `''`, an empty array or Fragment) hide the button.\n */\nexport function showsExpandButton(expandIcon: Slot<'span'> | undefined): boolean {\n  return expandIcon == null || slotRendersContent(expandIcon);\n}\n\n/** Properties of {@link PickerExpandButton}. */\nexport interface PickerExpandButtonProps {\n  /** The picker's public name, used in the development warning. */\n  component: string;\n  /** The picker's `expandIcon`; render the button only when {@link showsExpandButton} allows. */\n  expandIcon: Slot<'span'> | undefined;\n  /** The accessible name of the button. */\n  label: string;\n  /** Whether the list is shown with options (`aria-expanded`). */\n  expanded: boolean;\n  /** Id of the listbox, referenced by `aria-controls` while the list is expanded. */\n  listboxId: string;\n  /** Natively disables the button (a disabled or read-only picker). */\n  disabled: boolean;\n  /** Opens or closes the list and returns focus to the input. */\n  onToggle: () => void;\n}\n\n/**\n * The expand button of an editable combobox (Combobox, TimePicker): the APG \"open\" button at the\n * end of the input. It is not a tab stop (Alt+ArrowDown opens the list from the keyboard) and a\n * press keeps focus in the input. Its glyph is decorative (`aria-hidden`) and turns while the list\n * is expanded. A `<button>` or `Button` element passed as `expandIcon`, or a slot object whose\n * `as` is one, is not nested: its children become the glyph (the chevron when they render\n * nothing), its props are dropped and a one-time development warning names the slot.\n */\nexport const PickerExpandButton = ({\n  component,\n  expandIcon,\n  label,\n  expanded,\n  listboxId,\n  disabled,\n  onToggle,\n}: PickerExpandButtonProps) => {\n  // The glyph slot rule shared with SplitButton and MenuButton `menuIcon` (C-SLOTS).\n  const { glyph: content, button } = unwrapButtonGlyph(expandIcon);\n  React.useEffect(() => {\n    if (button) {\n      warnOnce(\n        `${component}:expandIcon-button`,\n        `${component}: \\`expandIcon\\` received ${button}; its children render as the glyph of ` +\n          'the built-in expand button and its props were dropped (buttons cannot be nested). ' +\n          'Pass icon content instead, e.g. `expandIcon={<MyIcon />}`.',\n      );\n    }\n  }, [button, component]);\n\n  const glyph = content != null && slotRendersContent(content) ? content : <ChevronDownIcon />;\n\n  return (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      aria-label={label}\n      aria-expanded={expanded}\n      aria-controls={expanded ? listboxId : undefined}\n      disabled={disabled}\n      // Keeps focus in the input: a press must not blur it (a blur commits typed text).\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={onToggle}\n      className={cn(PICKER_ICON_BUTTON_CLASSES, 'end-1', focusRing, disabledStyles)}\n    >\n      {renderSlot(\n        glyph,\n        'span',\n        cn(\n          'inline-flex transition-transform motion-reduce:transition-none',\n          expanded && 'rotate-180',\n        ),\n        { 'aria-hidden': true },\n      )}\n    </button>\n  );\n};\nPickerExpandButton.displayName = 'PickerExpandButton';\n"],"mappings":"wXAeA,SAAgBkB,EAAkB,EAA+C,CAC/E,OAAOC,GAAc,MAAQnB,EAAAA,mBAAmBmB,CAAU,CAC5D,CA4BA,IAAaC,GAAsB,CACjC,YACA,aACA,QACA,WACA,YACA,WACA,cAC6B,CAE7B,GAAM,CAAE,MAAOC,EAAS,UAAWpB,EAAAA,kBAAkBkB,CAAU,EAC/DH,EAAM,cAAgB,CAChBM,GACFZ,EAAA,SACE,GAAGa,EAAU,oBACb,GAAGA,EAAU,4BAA4BD,EAAO,qLAGlD,CAEJ,EAAG,CAACA,EAAQC,CAAS,CAAC,EAEtB,IAAMC,EAAQH,GAAW,MAAQrB,EAAAA,mBAAmBqB,CAAO,EAAIA,GAAU,EAAAJ,EAAA,IAAA,CAACf,EAAAA,gBAAD,CAAkB,CAAA,EAE3F,OACE,EAAAe,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAYQ,EACZ,gBAAeC,EACf,gBAAeA,EAAWC,EAAY,IAAA,GAC5B,WAEV,YAAc,GAAUC,EAAM,eAAe,EAC7C,QAASC,EACT,UAAW1B,EAAAA,GAAGC,EAAAA,2BAA4B,QAASC,EAAAA,UAAWC,EAAAA,cAAc,EAE3E,SAAAC,EAAAA,WACCiB,EACA,OACArB,EAAAA,GACE,iEACAuB,GAAY,YACd,EACA,CAAE,cAAe,EAAK,CACxB,CACM,CAAA,CAEZ,EACA,EAAmB,YAAc"}

package/dist/components/input/Combobox.expand.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnOnce as t } from "../../lib/dev.mjs";
+import { renderSlot as n, slotRendersContent as r } from "../../lib/slot.mjs";
+import { disabledStyles as i, focusRing as a } from "../../lib/styles.mjs";
+import { ChevronDownIcon as o } from "../../lib/icons.mjs";
+import { unwrapButtonGlyph as s } from "../button/Button.slots.mjs";
+import { PICKER_ICON_BUTTON_CLASSES as c } from "./pickerStyles.mjs";
+import * as l from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/components/input/Combobox.expand.tsx
+function d(e) {
+	return e == null || r(e);
+}
+var f = ({ component: d, expandIcon: f, label: p, expanded: m, listboxId: h, disabled: g, onToggle: _ }) => {
+	let { glyph: v, button: y } = s(f);
+	l.useEffect(() => {
+		y && t(`${d}:expandIcon-button`, `${d}: \`expandIcon\` received ${y}; its children render as the glyph of the built-in expand button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`expandIcon={<MyIcon />}\`.`);
+	}, [y, d]);
+	let b = v != null && r(v) ? v : /* @__PURE__ */ u(o, {});
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-label": p,
+		"aria-expanded": m,
+		"aria-controls": m ? h : void 0,
+		disabled: g,
+		onMouseDown: (e) => e.preventDefault(),
+		onClick: _,
+		className: e(c, "end-1", a, i),
+		children: n(b, "span", e("inline-flex transition-transform motion-reduce:transition-none", m && "rotate-180"), { "aria-hidden": !0 })
+	});
+};
+f.displayName = "PickerExpandButton";
+//#endregion
+export { f as PickerExpandButton, d as showsExpandButton };
+
+//# sourceMappingURL=Combobox.expand.mjs.map

package/dist/components/input/Combobox.expand.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.expand.mjs","names":["React","showsExpandButton","expandIcon","slotRendersContent","PickerExpandButton","content","unwrapButtonGlyph","button","warnOnce","component","glyph","ChevronDownIcon","label","expanded","listboxId","event","onToggle","cn","PICKER_ICON_BUTTON_CLASSES","focusRing","disabledStyles","renderSlot"],"sources":["../../../src/components/input/Combobox.expand.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot } from '../../lib/slot';\nimport { disabledStyles, focusRing } from '../../lib/styles';\nimport { unwrapButtonGlyph } from '../button/Button.slots';\nimport { PICKER_ICON_BUTTON_CLASSES } from './pickerStyles';\n\n/**\n * Whether an `expandIcon` value shows the expand button (the rule of optional indicator glyphs):\n * `null` and `undefined` keep the chevron; `false` and any other value that renders nothing\n * (`true`, `''`, an empty array or Fragment) hide the button.\n */\nexport function showsExpandButton(expandIcon: Slot<'span'> | undefined): boolean {\n  return expandIcon == null || slotRendersContent(expandIcon);\n}\n\n/** Properties of {@link PickerExpandButton}. */\nexport interface PickerExpandButtonProps {\n  /** The picker's public name, used in the development warning. */\n  component: string;\n  /** The picker's `expandIcon`; render the button only when {@link showsExpandButton} allows. */\n  expandIcon: Slot<'span'> | undefined;\n  /** The accessible name of the button. */\n  label: string;\n  /** Whether the list is shown with options (`aria-expanded`). */\n  expanded: boolean;\n  /** Id of the listbox, referenced by `aria-controls` while the list is expanded. */\n  listboxId: string;\n  /** Natively disables the button (a disabled or read-only picker). */\n  disabled: boolean;\n  /** Opens or closes the list and returns focus to the input. */\n  onToggle: () => void;\n}\n\n/**\n * The expand button of an editable combobox (Combobox, TimePicker): the APG \"open\" button at the\n * end of the input. It is not a tab stop (Alt+ArrowDown opens the list from the keyboard) and a\n * press keeps focus in the input. Its glyph is decorative (`aria-hidden`) and turns while the list\n * is expanded. A `<button>` or `Button` element passed as `expandIcon`, or a slot object whose\n * `as` is one, is not nested: its children become the glyph (the chevron when they render\n * nothing), its props are dropped and a one-time development warning names the slot.\n */\nexport const PickerExpandButton = ({\n  component,\n  expandIcon,\n  label,\n  expanded,\n  listboxId,\n  disabled,\n  onToggle,\n}: PickerExpandButtonProps) => {\n  // The glyph slot rule shared with SplitButton and MenuButton `menuIcon` (C-SLOTS).\n  const { glyph: content, button } = unwrapButtonGlyph(expandIcon);\n  React.useEffect(() => {\n    if (button) {\n      warnOnce(\n        `${component}:expandIcon-button`,\n        `${component}: \\`expandIcon\\` received ${button}; its children render as the glyph of ` +\n          'the built-in expand button and its props were dropped (buttons cannot be nested). ' +\n          'Pass icon content instead, e.g. `expandIcon={<MyIcon />}`.',\n      );\n    }\n  }, [button, component]);\n\n  const glyph = content != null && slotRendersContent(content) ? content : <ChevronDownIcon />;\n\n  return (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      aria-label={label}\n      aria-expanded={expanded}\n      aria-controls={expanded ? listboxId : undefined}\n      disabled={disabled}\n      // Keeps focus in the input: a press must not blur it (a blur commits typed text).\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={onToggle}\n      className={cn(PICKER_ICON_BUTTON_CLASSES, 'end-1', focusRing, disabledStyles)}\n    >\n      {renderSlot(\n        glyph,\n        'span',\n        cn(\n          'inline-flex transition-transform motion-reduce:transition-none',\n          expanded && 'rotate-180',\n        ),\n        { 'aria-hidden': true },\n      )}\n    </button>\n  );\n};\nPickerExpandButton.displayName = 'PickerExpandButton';\n"],"mappings":";;;;;;;;;;;AAeA,SAAgBC,EAAkB,GAA+C;CAC/E,OAAOC,KAAc,QAAQC,EAAmBD,CAAU;AAC5D;AA4BA,IAAaE,KAAsB,EACjC,cACA,eACA,UACA,aACA,cACA,aACA,kBAC6B;CAE7B,IAAM,EAAE,OAAOC,GAAS,cAAWC,EAAkBJ,CAAU;CAC/D,EAAM,gBAAgB;EACpB,AAAIK,KACFC,EACE,GAAGC,EAAU,qBACb,GAAGA,EAAU,4BAA4BF,EAAO,qLAGlD;CAEJ,GAAG,CAACA,GAAQE,CAAS,CAAC;CAEtB,IAAMC,IAAQL,KAAW,QAAQF,EAAmBE,CAAO,IAAIA,IAAU,kBAACM,GAAD,CAAkB,CAAA;CAE3F,OACE,kBAAC,UAAD;EACE,MAAK;EACL,UAAU;EACV,cAAYC;EACZ,iBAAeC;EACf,iBAAeA,IAAWC,IAAY,KAAA;EAC5B;EAEV,cAAc,MAAUC,EAAM,eAAe;EAC7C,SAASC;EACT,WAAWC,EAAGC,GAA4B,SAASC,GAAWC,CAAc;EAE3E,UAAAC,EACCX,GACA,QACAO,EACE,kEACAJ,KAAY,YACd,GACA,EAAE,eAAe,GAAK,CACxB;CACM,CAAA;AAEZ;AACA,EAAmB,cAAc"}