@mortenbrudvik/waveui 0.4.0 → 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.cjs","names":["useColorPartState","displayColor","toPercent","useFieldContext","useFieldControl","React","useMergedRefs","composeEventHandlers","railKeyTarget","getDirection","colorSliderGradient","toPosition","hsvToHex","cn","colorSliderClassNames","RAIL_ROOT_VERTICAL","RAIL_ROOT_HORIZONTAL","RAIL_GRADIENT","RAIL_TRACK_VERTICAL","RAIL_TRACK_HORIZONTAL","sliderValueText","RAIL_INPUT_CLASSES","RAIL_INPUT_VERTICAL","RAIL_INPUT_HORIZONTAL","THUMB_TRACK_VERTICAL","THUMB_TRACK_HORIZONTAL","COLOR_THUMB_CLASSES","THUMB_POSITION_VERTICAL","THUMB_POSITION_HORIZONTAL","HiddenInput","require_runtime","require_cn","require_composeEventHandlers","require_classNames","require_color","require_direction","require_useMergedRefs","require_useFieldControl","require_useFormReset","require_HiddenInput","require_colorUtils","require_ColorPicker_parts","react","react_jsx_runtime","DEFAULT_LABELS","NAME_KEY","ColorSlider","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","part","strings","picker","labels","resolvedShape","shape","vertical","orientation","shown","max","channel","current","field","_ariaRequired","_required","inputFieldProps","invalid","isInvalid","isRequired","required","inputRef","mergedControlRef","controlRef","form","apply","next","color","handleKeyDown","onKeyDown","event","target","handleChange","sliderStyle","style","className"],"sources":["../../../src/components/input/ColorSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { colorSliderClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { hsvToHex } from '../../lib/color';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { getDirection } from '../../lib/direction';\nimport type { ColorPickerShape, HsvColor, Orientation } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { useColorPartState } from './ColorPicker.parts';\nimport {\n  COLOR_THUMB_CLASSES,\n  RAIL_GRADIENT,\n  RAIL_INPUT_CLASSES,\n  RAIL_INPUT_HORIZONTAL,\n  RAIL_INPUT_VERTICAL,\n  RAIL_ROOT_HORIZONTAL,\n  RAIL_ROOT_VERTICAL,\n  RAIL_TRACK_HORIZONTAL,\n  RAIL_TRACK_VERTICAL,\n  THUMB_POSITION_HORIZONTAL,\n  THUMB_POSITION_VERTICAL,\n  THUMB_TRACK_HORIZONTAL,\n  THUMB_TRACK_VERTICAL,\n  colorSliderGradient,\n  displayColor,\n  railKeyTarget,\n  sliderValueText,\n  toPercent,\n  toPosition,\n} from './colorUtils';\n\n/** Texts of a ColorSlider, for localisation. Every key is optional. */\nexport interface ColorSliderLabels {\n  /** Name of a hue slider.\n   * @default 'Hue'\n   */\n  hue?: string;\n  /** Name of a `channel=\"saturation\"` slider.\n   * @default 'Saturation'\n   */\n  saturation?: string;\n  /** Name of a `channel=\"value\"` slider.\n   * @default 'Brightness'\n   */\n  brightness?: string;\n  /** Names the color at the end of a hue slider's value text; return `''` to leave it out.\n   * @default an English namer (\"blue\")\n   */\n  colorName?: (color: HsvColor) => string;\n  /** Replaces the value text, for languages whose order differs. */\n  valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value') => string;\n}\n\n/** Properties for the ColorSlider component. */\nexport interface ColorSliderProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /** The channel the slider edits.\n   * @default 'hue'\n   */\n  channel?: 'hue' | 'saturation' | 'value';\n  /** `'vertical'` draws the rail from bottom to top (Fluent's `vertical`).\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * The color (Fluent's `color`). Inside a ColorPicker, leave `value` and `defaultValue` out to\n   * bind the slider to the picker.\n   */\n  value?: HsvColor;\n  /**\n   * Initial color for uncontrolled usage (also what a form reset restores).\n   * @default the brand blue, `{ h: 208, s: 0.92, v: 0.74 }` (`#0f6cbd`)\n   */\n  defaultValue?: HsvColor;\n  /**\n   * Called with the new color on every step (a key, the pointer or assistive technology) that\n   * changes it (Fluent's `onChange`). A bound slider calls it too.\n   */\n  onValueChange?: (value: HsvColor) => void;\n  /**\n   * `'square'` removes the corner radius of the rail (the thumb stays round). Bound to a\n   * ColorPicker, the picker's shape unless you pass one.\n   * @default 'rounded'\n   */\n  shape?: ColorPickerShape;\n  /** Texts of the slider; bound to a ColorPicker, the picker's `labels` fill the keys you leave out. */\n  labels?: ColorSliderLabels;\n  /**\n   * Unavailable: the input is natively disabled and the slider dimmed. A bound slider is also\n   * disabled while the picker's value is not a hex color.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Form field name: the color is submitted as hex (`hsvToHex`). Ignored while bound to a ColorPicker. */\n  name?: string;\n  /** Id of the form the slider belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Marks the hidden form input required (a color is always set, so it never blocks). A consumer\n   * `aria-required` does the same: a slider supports neither, so neither is set on it.\n   */\n  required?: boolean;\n  /** Ref to the `<input type=\"range\">`. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_LABELS = { hue: 'Hue', saturation: 'Saturation', brightness: 'Brightness' } as const;\n\n/** The `labels` key that names each channel. */\nconst NAME_KEY = { hue: 'hue', saturation: 'saturation', value: 'brightness' } as const;\n\n/**\n * A slider for one channel of an HSV color: hue (the default), saturation or brightness\n * (`channel=\"value\"`), horizontal (mirrored in right-to-left layouts) or vertical (bottom to top).\n * The arrow keys move by 1 (hue in degrees, the others in percent), Shift with an arrow and Page\n * Up or Page Down by 10, Home and End to the ends. It is named by `aria-label`, else the\n * surrounding Field's label, else \"Hue\", \"Saturation\" or \"Brightness\"; a hue slider's value text\n * names the color (\"210°, blue\"). Inside a ColorPicker, leave `value` and `defaultValue` out and\n * it binds to the picker. Fluent's `ColorSlider`, with `value`/`onValueChange` for its\n * `color`/`onChange` and `orientation` for its `vertical`.\n *\n * @example\n * <ColorSlider value={color} onValueChange={setColor} />\n */\nexport const ColorSlider = ({\n  channel = 'hue',\n  orientation = 'horizontal',\n  value,\n  defaultValue,\n  onValueChange,\n  shape,\n  labels,\n  disabled = false,\n  name,\n  form,\n  required,\n  controlRef,\n  className,\n  style,\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  autoFocus,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  ref,\n  ...rest\n}: ColorSliderProps) => {\n  const part = useColorPartState({ value, defaultValue, onValueChange, disabled });\n  const { picker } = part;\n  const strings = {\n    ...DEFAULT_LABELS,\n    ...(picker && {\n      hue: picker.labels.hue,\n      saturation: picker.labels.saturation,\n      brightness: picker.labels.brightness,\n      colorName: picker.labels.colorName,\n      valueText: picker.labels.valueText,\n    }),\n    ...labels,\n  };\n  const resolvedShape = shape ?? picker?.shape ?? 'rounded';\n  const vertical = orientation === 'vertical';\n  const shown = displayColor(part.color);\n  const max = channel === 'hue' ? 360 : 100;\n  const current =\n    channel === 'hue'\n      ? Math.round(shown.h)\n      : toPercent(channel === 'saturation' ? shown.s : shown.v);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl({\n    id,\n    // The built-in name only without a Field: an aria-label would beat the Field's <label for>.\n    'aria-label':\n      ariaLabel ??\n      (field === null && ariaLabelledBy === undefined ? strings[NAME_KEY[channel]] : undefined),\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n  });\n  // A slider supports neither aria-required nor a native `required`: the hidden input carries it.\n  const { 'aria-required': _ariaRequired, required: _required, ...inputFieldProps } = fieldProps;\n  const invalid = inputFieldProps['aria-invalid'];\n  const isInvalid = invalid !== undefined && invalid !== false && invalid !== 'false';\n  const isRequired =\n    required ?? (ariaRequired === true || ariaRequired === 'true' || (field?.required ?? false));\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedControlRef = useMergedRefs(inputRef, controlRef);\n  useFormReset(inputRef, part.reset, form);\n\n  /** Applies a value of the slider's range (the hue in degrees, the others in percent). */\n  const apply = (next: number) => {\n    if (next === current) return;\n    const color = part.color;\n    part.setColor(\n      channel === 'hue'\n        ? { ...color, h: next }\n        : channel === 'saturation'\n          ? { ...color, s: next / 100 }\n          : { ...color, v: next / 100 },\n    );\n  };\n\n  const handleKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (part.disabled || event.nativeEvent.isComposing) return;\n      const target = railKeyTarget(\n        event.key,\n        event,\n        getDirection(event.currentTarget),\n        current,\n        max,\n      );\n      if (target === null) return;\n      event.preventDefault();\n      apply(target);\n    },\n  );\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (part.disabled) return;\n    apply(Math.min(max, Math.max(0, Math.round(Number(event.currentTarget.value)))));\n  };\n\n  const sliderStyle = {\n    ...style,\n    '--wave-color-slider-gradient': colorSliderGradient(channel, shown, orientation),\n    '--wave-color-slider-position': toPosition(current / max),\n    '--wave-color-thumb':\n      channel === 'hue'\n        ? hsvToHex({ h: shown.h, s: 1, v: 1 })\n        : hsvToHex({ h: shown.h, s: shown.s, v: shown.v }),\n  } as React.CSSProperties;\n\n  return (\n    <div\n      data-orientation={orientation}\n      data-channel={channel}\n      data-disabled={part.disabled ? '' : undefined}\n      className={cn(\n        colorSliderClassNames.root,\n        'group/color-slider relative flex touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        vertical ? RAIL_ROOT_VERTICAL : RAIL_ROOT_HORIZONTAL,\n        className,\n      )}\n      style={sliderStyle}\n      {...rest}\n      ref={ref}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={cn(\n          colorSliderClassNames.rail,\n          'rounded-full forced-colors:forced-color-adjust-none',\n          RAIL_GRADIENT,\n          vertical ? RAIL_TRACK_VERTICAL : RAIL_TRACK_HORIZONTAL,\n          resolvedShape === 'square' && 'rounded-none',\n        )}\n      />\n      <input\n        type=\"range\"\n        {...inputFieldProps}\n        ref={mergedControlRef}\n        min={0}\n        max={max}\n        step={1}\n        value={current}\n        disabled={part.disabled}\n        dir={vertical ? 'ltr' : undefined}\n        aria-orientation={vertical ? 'vertical' : undefined}\n        aria-valuetext={sliderValueText(shown, channel, strings)}\n        aria-errormessage={(isInvalid && ariaErrorMessage) || undefined}\n        aria-details={ariaDetails}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={handleKeyDown}\n        onKeyUp={onKeyUp}\n        onChange={handleChange}\n        className={cn(RAIL_INPUT_CLASSES, vertical ? RAIL_INPUT_VERTICAL : RAIL_INPUT_HORIZONTAL)}\n      />\n      <span aria-hidden=\"true\" className={vertical ? THUMB_TRACK_VERTICAL : THUMB_TRACK_HORIZONTAL}>\n        <span\n          className={cn(\n            colorSliderClassNames.thumb,\n            COLOR_THUMB_CLASSES,\n            vertical ? THUMB_POSITION_VERTICAL : THUMB_POSITION_HORIZONTAL,\n            'group-has-[:focus-visible]/color-slider:ring-2 group-has-[:focus-visible]/color-slider:ring-background forced-colors:group-has-[:focus-visible]/color-slider:ring-[Canvas] group-has-[:focus-visible]/color-slider:outline-2 group-has-[:focus-visible]/color-slider:outline-offset-2 group-has-[:focus-visible]/color-slider:outline-ring forced-colors:group-has-[:focus-visible]/color-slider:outline-[Highlight]',\n          )}\n        />\n      </span>\n      {!picker && (\n        <HiddenInput\n          type=\"text\"\n          name={name}\n          form={form}\n          disabled={part.disabled}\n          value={hsvToHex(part.color)}\n          required={isRequired}\n          onInvalid={() => inputRef.current?.focus()}\n        />\n      )}\n    </div>\n  );\n};\n\nColorSlider.displayName = 'ColorSlider';\n"],"mappings":"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"}

package/dist/components/input/ColorSlider.mjs

@@ -0,0 +1,138 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { composeEventHandlers as t } from "../../lib/composeEventHandlers.mjs";
+import { colorSliderClassNames as n } from "../../lib/classNames.mjs";
+import { hsvToHex as r } from "../../lib/color.mjs";
+import { getDirection as i } from "../../lib/direction.mjs";
+import { useMergedRefs as a } from "../../hooks/useMergedRefs.mjs";
+import { useFieldContext as o, useFieldControl as s } from "../../hooks/useFieldControl.mjs";
+import { useFormReset as c } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as ee } from "../internal/HiddenInput.mjs";
+import { COLOR_THUMB_CLASSES as l, RAIL_GRADIENT as te, RAIL_INPUT_CLASSES as ne, RAIL_INPUT_HORIZONTAL as re, RAIL_INPUT_VERTICAL as ie, RAIL_ROOT_HORIZONTAL as ae, RAIL_ROOT_VERTICAL as oe, RAIL_TRACK_HORIZONTAL as se, RAIL_TRACK_VERTICAL as ce, THUMB_POSITION_HORIZONTAL as le, THUMB_POSITION_VERTICAL as ue, THUMB_TRACK_HORIZONTAL as de, THUMB_TRACK_VERTICAL as fe, colorSliderGradient as u, displayColor as d, railKeyTarget as f, sliderValueText as p, toPercent as m, toPosition as h } from "./colorUtils.mjs";
+import { useColorPartState as g } from "./ColorPicker.parts.mjs";
+import * as _ from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/input/ColorSlider.tsx
+var b = {
+	hue: "Hue",
+	saturation: "Saturation",
+	brightness: "Brightness"
+}, x = {
+	hue: "hue",
+	saturation: "saturation",
+	value: "brightness"
+}, S = ({ channel: S = "hue", orientation: C = "horizontal", value: w, defaultValue: T, onValueChange: E, shape: D, labels: O, disabled: k = !1, name: A, form: j, required: M, controlRef: N, className: P, style: F, id: I, "aria-label": L, "aria-labelledby": R, "aria-describedby": z, "aria-invalid": B, "aria-required": V, "aria-errormessage": pe, "aria-details": me, autoFocus: he, tabIndex: ge, onFocus: _e, onBlur: ve, onKeyDown: ye, onKeyUp: be, ref: xe, ...Se }) => {
+	let H = g({
+		value: w,
+		defaultValue: T,
+		onValueChange: E,
+		disabled: k
+	}), { picker: U } = H, W = {
+		...b,
+		...U && {
+			hue: U.labels.hue,
+			saturation: U.labels.saturation,
+			brightness: U.labels.brightness,
+			colorName: U.labels.colorName,
+			valueText: U.labels.valueText
+		},
+		...O
+	}, Ce = D ?? U?.shape ?? "rounded", G = C === "vertical", K = d(H.color), q = S === "hue" ? 360 : 100, J = S === "hue" ? Math.round(K.h) : m(S === "saturation" ? K.s : K.v), Y = o(), { "aria-required": we, required: Te, ...X } = s({
+		id: I,
+		"aria-label": L ?? (Y === null && R === void 0 ? W[x[S]] : void 0),
+		"aria-labelledby": R,
+		"aria-describedby": z,
+		"aria-invalid": B
+	}), Z = X["aria-invalid"], Ee = Z !== void 0 && Z !== !1 && Z !== "false", De = M ?? (V === !0 || V === "true" || (Y?.required ?? !1)), Q = _.useRef(null), Oe = a(Q, N);
+	c(Q, H.reset, j);
+	let $ = (e) => {
+		if (e === J) return;
+		let t = H.color;
+		H.setColor(S === "hue" ? {
+			...t,
+			h: e
+		} : S === "saturation" ? {
+			...t,
+			s: e / 100
+		} : {
+			...t,
+			v: e / 100
+		});
+	}, ke = t(ye, (e) => {
+		if (H.disabled || e.nativeEvent.isComposing) return;
+		let t = f(e.key, e, i(e.currentTarget), J, q);
+		t !== null && (e.preventDefault(), $(t));
+	}), Ae = (e) => {
+		H.disabled || $(Math.min(q, Math.max(0, Math.round(Number(e.currentTarget.value)))));
+	}, je = {
+		...F,
+		"--wave-color-slider-gradient": u(S, K, C),
+		"--wave-color-slider-position": h(J / q),
+		"--wave-color-thumb": r(S === "hue" ? {
+			h: K.h,
+			s: 1,
+			v: 1
+		} : {
+			h: K.h,
+			s: K.s,
+			v: K.v
+		})
+	};
+	return /* @__PURE__ */ y("div", {
+		"data-orientation": C,
+		"data-channel": S,
+		"data-disabled": H.disabled ? "" : void 0,
+		className: e(n.root, "group/color-slider relative flex touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", G ? oe : ae, P),
+		style: je,
+		...Se,
+		ref: xe,
+		children: [
+			/* @__PURE__ */ v("div", {
+				"aria-hidden": "true",
+				className: e(n.rail, "rounded-full forced-colors:forced-color-adjust-none", te, G ? ce : se, Ce === "square" && "rounded-none")
+			}),
+			/* @__PURE__ */ v("input", {
+				type: "range",
+				...X,
+				ref: Oe,
+				min: 0,
+				max: q,
+				step: 1,
+				value: J,
+				disabled: H.disabled,
+				dir: G ? "ltr" : void 0,
+				"aria-orientation": G ? "vertical" : void 0,
+				"aria-valuetext": p(K, S, W),
+				"aria-errormessage": Ee && pe || void 0,
+				"aria-details": me,
+				autoFocus: he,
+				tabIndex: ge,
+				onFocus: _e,
+				onBlur: ve,
+				onKeyDown: ke,
+				onKeyUp: be,
+				onChange: Ae,
+				className: e(ne, G ? ie : re)
+			}),
+			/* @__PURE__ */ v("span", {
+				"aria-hidden": "true",
+				className: G ? fe : de,
+				children: /* @__PURE__ */ v("span", { className: e(n.thumb, l, G ? ue : le, "group-has-[:focus-visible]/color-slider:ring-2 group-has-[:focus-visible]/color-slider:ring-background forced-colors:group-has-[:focus-visible]/color-slider:ring-[Canvas] group-has-[:focus-visible]/color-slider:outline-2 group-has-[:focus-visible]/color-slider:outline-offset-2 group-has-[:focus-visible]/color-slider:outline-ring forced-colors:group-has-[:focus-visible]/color-slider:outline-[Highlight]") })
+			}),
+			!U && /* @__PURE__ */ v(ee, {
+				type: "text",
+				name: A,
+				form: j,
+				disabled: H.disabled,
+				value: r(H.color),
+				required: De,
+				onInvalid: () => Q.current?.focus()
+			})
+		]
+	});
+};
+S.displayName = "ColorSlider";
+//#endregion
+export { S as ColorSlider };
+
+//# sourceMappingURL=ColorSlider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.mjs","names":["React","DEFAULT_LABELS","NAME_KEY","ColorSlider","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","part","useColorPartState","strings","picker","labels","resolvedShape","shape","vertical","orientation","shown","displayColor","max","channel","current","toPercent","field","useFieldContext","_ariaRequired","_required","inputFieldProps","useFieldControl","invalid","isInvalid","isRequired","required","inputRef","mergedControlRef","useMergedRefs","controlRef","form","apply","next","color","handleKeyDown","composeEventHandlers","onKeyDown","event","target","railKeyTarget","getDirection","handleChange","sliderStyle","style","colorSliderGradient","toPosition","hsvToHex","cn","colorSliderClassNames","RAIL_ROOT_VERTICAL","RAIL_ROOT_HORIZONTAL","className","RAIL_GRADIENT","RAIL_TRACK_VERTICAL","RAIL_TRACK_HORIZONTAL","sliderValueText","RAIL_INPUT_CLASSES","RAIL_INPUT_VERTICAL","RAIL_INPUT_HORIZONTAL","THUMB_TRACK_VERTICAL","THUMB_TRACK_HORIZONTAL","COLOR_THUMB_CLASSES","THUMB_POSITION_VERTICAL","THUMB_POSITION_HORIZONTAL","HiddenInput"],"sources":["../../../src/components/input/ColorSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { colorSliderClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { hsvToHex } from '../../lib/color';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { getDirection } from '../../lib/direction';\nimport type { ColorPickerShape, HsvColor, Orientation } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { useColorPartState } from './ColorPicker.parts';\nimport {\n  COLOR_THUMB_CLASSES,\n  RAIL_GRADIENT,\n  RAIL_INPUT_CLASSES,\n  RAIL_INPUT_HORIZONTAL,\n  RAIL_INPUT_VERTICAL,\n  RAIL_ROOT_HORIZONTAL,\n  RAIL_ROOT_VERTICAL,\n  RAIL_TRACK_HORIZONTAL,\n  RAIL_TRACK_VERTICAL,\n  THUMB_POSITION_HORIZONTAL,\n  THUMB_POSITION_VERTICAL,\n  THUMB_TRACK_HORIZONTAL,\n  THUMB_TRACK_VERTICAL,\n  colorSliderGradient,\n  displayColor,\n  railKeyTarget,\n  sliderValueText,\n  toPercent,\n  toPosition,\n} from './colorUtils';\n\n/** Texts of a ColorSlider, for localisation. Every key is optional. */\nexport interface ColorSliderLabels {\n  /** Name of a hue slider.\n   * @default 'Hue'\n   */\n  hue?: string;\n  /** Name of a `channel=\"saturation\"` slider.\n   * @default 'Saturation'\n   */\n  saturation?: string;\n  /** Name of a `channel=\"value\"` slider.\n   * @default 'Brightness'\n   */\n  brightness?: string;\n  /** Names the color at the end of a hue slider's value text; return `''` to leave it out.\n   * @default an English namer (\"blue\")\n   */\n  colorName?: (color: HsvColor) => string;\n  /** Replaces the value text, for languages whose order differs. */\n  valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value') => string;\n}\n\n/** Properties for the ColorSlider component. */\nexport interface ColorSliderProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /** The channel the slider edits.\n   * @default 'hue'\n   */\n  channel?: 'hue' | 'saturation' | 'value';\n  /** `'vertical'` draws the rail from bottom to top (Fluent's `vertical`).\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * The color (Fluent's `color`). Inside a ColorPicker, leave `value` and `defaultValue` out to\n   * bind the slider to the picker.\n   */\n  value?: HsvColor;\n  /**\n   * Initial color for uncontrolled usage (also what a form reset restores).\n   * @default the brand blue, `{ h: 208, s: 0.92, v: 0.74 }` (`#0f6cbd`)\n   */\n  defaultValue?: HsvColor;\n  /**\n   * Called with the new color on every step (a key, the pointer or assistive technology) that\n   * changes it (Fluent's `onChange`). A bound slider calls it too.\n   */\n  onValueChange?: (value: HsvColor) => void;\n  /**\n   * `'square'` removes the corner radius of the rail (the thumb stays round). Bound to a\n   * ColorPicker, the picker's shape unless you pass one.\n   * @default 'rounded'\n   */\n  shape?: ColorPickerShape;\n  /** Texts of the slider; bound to a ColorPicker, the picker's `labels` fill the keys you leave out. */\n  labels?: ColorSliderLabels;\n  /**\n   * Unavailable: the input is natively disabled and the slider dimmed. A bound slider is also\n   * disabled while the picker's value is not a hex color.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Form field name: the color is submitted as hex (`hsvToHex`). Ignored while bound to a ColorPicker. */\n  name?: string;\n  /** Id of the form the slider belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Marks the hidden form input required (a color is always set, so it never blocks). A consumer\n   * `aria-required` does the same: a slider supports neither, so neither is set on it.\n   */\n  required?: boolean;\n  /** Ref to the `<input type=\"range\">`. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst DEFAULT_LABELS = { hue: 'Hue', saturation: 'Saturation', brightness: 'Brightness' } as const;\n\n/** The `labels` key that names each channel. */\nconst NAME_KEY = { hue: 'hue', saturation: 'saturation', value: 'brightness' } as const;\n\n/**\n * A slider for one channel of an HSV color: hue (the default), saturation or brightness\n * (`channel=\"value\"`), horizontal (mirrored in right-to-left layouts) or vertical (bottom to top).\n * The arrow keys move by 1 (hue in degrees, the others in percent), Shift with an arrow and Page\n * Up or Page Down by 10, Home and End to the ends. It is named by `aria-label`, else the\n * surrounding Field's label, else \"Hue\", \"Saturation\" or \"Brightness\"; a hue slider's value text\n * names the color (\"210°, blue\"). Inside a ColorPicker, leave `value` and `defaultValue` out and\n * it binds to the picker. Fluent's `ColorSlider`, with `value`/`onValueChange` for its\n * `color`/`onChange` and `orientation` for its `vertical`.\n *\n * @example\n * <ColorSlider value={color} onValueChange={setColor} />\n */\nexport const ColorSlider = ({\n  channel = 'hue',\n  orientation = 'horizontal',\n  value,\n  defaultValue,\n  onValueChange,\n  shape,\n  labels,\n  disabled = false,\n  name,\n  form,\n  required,\n  controlRef,\n  className,\n  style,\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  autoFocus,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  ref,\n  ...rest\n}: ColorSliderProps) => {\n  const part = useColorPartState({ value, defaultValue, onValueChange, disabled });\n  const { picker } = part;\n  const strings = {\n    ...DEFAULT_LABELS,\n    ...(picker && {\n      hue: picker.labels.hue,\n      saturation: picker.labels.saturation,\n      brightness: picker.labels.brightness,\n      colorName: picker.labels.colorName,\n      valueText: picker.labels.valueText,\n    }),\n    ...labels,\n  };\n  const resolvedShape = shape ?? picker?.shape ?? 'rounded';\n  const vertical = orientation === 'vertical';\n  const shown = displayColor(part.color);\n  const max = channel === 'hue' ? 360 : 100;\n  const current =\n    channel === 'hue'\n      ? Math.round(shown.h)\n      : toPercent(channel === 'saturation' ? shown.s : shown.v);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl({\n    id,\n    // The built-in name only without a Field: an aria-label would beat the Field's <label for>.\n    'aria-label':\n      ariaLabel ??\n      (field === null && ariaLabelledBy === undefined ? strings[NAME_KEY[channel]] : undefined),\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n  });\n  // A slider supports neither aria-required nor a native `required`: the hidden input carries it.\n  const { 'aria-required': _ariaRequired, required: _required, ...inputFieldProps } = fieldProps;\n  const invalid = inputFieldProps['aria-invalid'];\n  const isInvalid = invalid !== undefined && invalid !== false && invalid !== 'false';\n  const isRequired =\n    required ?? (ariaRequired === true || ariaRequired === 'true' || (field?.required ?? false));\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedControlRef = useMergedRefs(inputRef, controlRef);\n  useFormReset(inputRef, part.reset, form);\n\n  /** Applies a value of the slider's range (the hue in degrees, the others in percent). */\n  const apply = (next: number) => {\n    if (next === current) return;\n    const color = part.color;\n    part.setColor(\n      channel === 'hue'\n        ? { ...color, h: next }\n        : channel === 'saturation'\n          ? { ...color, s: next / 100 }\n          : { ...color, v: next / 100 },\n    );\n  };\n\n  const handleKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (part.disabled || event.nativeEvent.isComposing) return;\n      const target = railKeyTarget(\n        event.key,\n        event,\n        getDirection(event.currentTarget),\n        current,\n        max,\n      );\n      if (target === null) return;\n      event.preventDefault();\n      apply(target);\n    },\n  );\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (part.disabled) return;\n    apply(Math.min(max, Math.max(0, Math.round(Number(event.currentTarget.value)))));\n  };\n\n  const sliderStyle = {\n    ...style,\n    '--wave-color-slider-gradient': colorSliderGradient(channel, shown, orientation),\n    '--wave-color-slider-position': toPosition(current / max),\n    '--wave-color-thumb':\n      channel === 'hue'\n        ? hsvToHex({ h: shown.h, s: 1, v: 1 })\n        : hsvToHex({ h: shown.h, s: shown.s, v: shown.v }),\n  } as React.CSSProperties;\n\n  return (\n    <div\n      data-orientation={orientation}\n      data-channel={channel}\n      data-disabled={part.disabled ? '' : undefined}\n      className={cn(\n        colorSliderClassNames.root,\n        'group/color-slider relative flex touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        vertical ? RAIL_ROOT_VERTICAL : RAIL_ROOT_HORIZONTAL,\n        className,\n      )}\n      style={sliderStyle}\n      {...rest}\n      ref={ref}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={cn(\n          colorSliderClassNames.rail,\n          'rounded-full forced-colors:forced-color-adjust-none',\n          RAIL_GRADIENT,\n          vertical ? RAIL_TRACK_VERTICAL : RAIL_TRACK_HORIZONTAL,\n          resolvedShape === 'square' && 'rounded-none',\n        )}\n      />\n      <input\n        type=\"range\"\n        {...inputFieldProps}\n        ref={mergedControlRef}\n        min={0}\n        max={max}\n        step={1}\n        value={current}\n        disabled={part.disabled}\n        dir={vertical ? 'ltr' : undefined}\n        aria-orientation={vertical ? 'vertical' : undefined}\n        aria-valuetext={sliderValueText(shown, channel, strings)}\n        aria-errormessage={(isInvalid && ariaErrorMessage) || undefined}\n        aria-details={ariaDetails}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={handleKeyDown}\n        onKeyUp={onKeyUp}\n        onChange={handleChange}\n        className={cn(RAIL_INPUT_CLASSES, vertical ? RAIL_INPUT_VERTICAL : RAIL_INPUT_HORIZONTAL)}\n      />\n      <span aria-hidden=\"true\" className={vertical ? THUMB_TRACK_VERTICAL : THUMB_TRACK_HORIZONTAL}>\n        <span\n          className={cn(\n            colorSliderClassNames.thumb,\n            COLOR_THUMB_CLASSES,\n            vertical ? THUMB_POSITION_VERTICAL : THUMB_POSITION_HORIZONTAL,\n            'group-has-[:focus-visible]/color-slider:ring-2 group-has-[:focus-visible]/color-slider:ring-background forced-colors:group-has-[:focus-visible]/color-slider:ring-[Canvas] group-has-[:focus-visible]/color-slider:outline-2 group-has-[:focus-visible]/color-slider:outline-offset-2 group-has-[:focus-visible]/color-slider:outline-ring forced-colors:group-has-[:focus-visible]/color-slider:outline-[Highlight]',\n          )}\n        />\n      </span>\n      {!picker && (\n        <HiddenInput\n          type=\"text\"\n          name={name}\n          form={form}\n          disabled={part.disabled}\n          value={hsvToHex(part.color)}\n          required={isRequired}\n          onInvalid={() => inputRef.current?.focus()}\n        />\n      )}\n    </div>\n  );\n};\n\nColorSlider.displayName = 'ColorSlider';\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("../../lib/classNames.cjs"),i=require("../../hooks/useControllable.cjs"),a=require("../../hooks/useMergedRefs.cjs"),o=require("../../hooks/useFieldControl.cjs"),s=require("../../lib/styles.cjs"),te=require("../../lib/icons.cjs"),ne=require("./Input.cjs"),re=require("../../hooks/useFormReset.cjs"),ie=require("../internal/HiddenInput.cjs"),c=require("../../hooks/useListbox.cjs"),ae=require("./pickerStyles.cjs"),l=require("./Combobox.expand.cjs"),u=require("./Option.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");function oe(e,t){return(e.textValue??e.label).toLowerCase().includes(t.toLowerCase())}var p=e=>{let{value:p,defaultValue:m,onValueChange:h,onOptionSelect:g,open:se,defaultOpen:ce,onOpenChange:le,placeholder:ue,disabled:_=!1,freeform:v=!1,name:de,form:y,required:b,autoComplete:fe=`off`,autoCapitalize:pe,autoCorrect:me,maxLength:he,readOnly:x,clearable:ge=!1,expandIcon:S,labels:C,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":w,"aria-details":T,onFocus:E,onBlur:Oe,onKeyDown:ke,onKeyUp:Ae,controlRef:je,className:Me,children:D,ref:Ne,...Pe}=e;g!==void 0&&ee.warnDeprecated(`Combobox`,`onOptionSelect`,`onValueChange`);let O=o.useFieldContext(),Fe=(b??O?.required??!1)&&!x,k=o.useFieldControl({id:Se,"aria-label":Ce,"aria-labelledby":we,"aria-describedby":Te,"aria-invalid":Ee,"aria-required":De??b}),Ie=ne.isInvalidLook(!1,k[`aria-invalid`]),[A,j]=i.useControllable(p,m??``,h),M=!_&&!x,[N,P]=i.useControllable(se,(ce??!1)&&M,le),F=N&&M,[I,L]=d.useState(null),[Le,Re]=d.useState(M);Le!==M&&(Re(M),M||L(null));let R=!M&&N;d.useEffect(()=>{R&&P(!1)},[R,P]);let[ze,z]=d.useState(null),B=d.useRef(null),V=d.useRef(null),Be=d.useMemo(()=>c.collectOptionLabels(D),[D]),Ve=d.useMemo(()=>I?e=>oe(e,I):void 0,[I]),H=e=>{z(e),j(e),g?.(e)},U=()=>{P(!1),L(null)},W;v?W=()=>{L(null),H(``)}:I&&(W=()=>L(null));let G=c.useListbox({open:F,onOpenChange:e=>{e?P(!0):U()},mode:`editable`,selectedValues:A?[A]:[],onSelect:e=>{j(e),g?.(e),L(null),z(null)},filter:Ve,autoHighlight:!v&&I?`first`:!1,idPrefix:`combobox-listbox`,onClearDraft:W}),K=A?G.getItem(A)?.label??Be.get(A):void 0,q;q=v?A===ze?A:K??A:I??K??``,v&&I!==null&&I!==q&&L(q);let J=F&&G.items.length>0,Y=C?.noMatches??`No matches`,X=F&&(J||!!I),He=X&&!J,{layerId:Ue,setReference:We,surfaceRef:Ge,floatingProps:Ke}=u.useListboxPopup({open:F,surfaceOpen:X,onDismiss:U,rootRef:B,anchorRef:V}),Z=a.useMergedRefs(B,Ne),qe=a.useMergedRefs(V,je,We);re.useFormReset(V,()=>{j(m??``),L(null),z(null)},y);let Je=e=>{if(e.key===`Escape`&&F&&!X&&!e.nativeEvent.isComposing){U(),W&&e.currentTarget.value!==``&&(e.preventDefault(),W());return}G.onKeyDown(e)},Ye=e=>{let t=e.target.value;L(t),F||P(!0),v&&H(t)},Xe=()=>{M&&(F?U():P(!0),V.current?.focus())},Ze=()=>{j(``),z(null),L(null),P(!1),V.current?.focus()},Q=l.showsExpandButton(S),$=ge&&A!==``&&!x,Qe=k[`aria-label`]===void 0?k[`aria-labelledby`]??O?.labelId:k[`aria-labelledby`];return(0,f.jsxs)(`div`,{...Pe,ref:Z,className:t.cn(r.comboboxClassNames.root,`relative inline-flex flex-col`,Me),children:[(0,f.jsxs)(`div`,{className:`relative flex items-center`,children:[(0,f.jsx)(`input`,{type:`text`,autoComplete:fe,...k,...G.getComboboxProps(),"aria-expanded":J,"aria-errormessage":w,"aria-details":T,ref:qe,disabled:_,readOnly:x,placeholder:ue,autoCapitalize:pe,autoCorrect:me,maxLength:he,inputMode:_e,spellCheck:ve,enterKeyHint:ye,autoFocus:be,tabIndex:xe,value:q,onChange:Ye,onClick:()=>{!F&&M&&P(!0)},onKeyDown:n.composeEventHandlers(ke,x?void 0:Je),onKeyUp:n.composeEventHandlers(Ae,G.onKeyUp),onFocus:E,onBlur:n.composeEventHandlers(Oe,()=>L(null),{checkDefaultPrevented:!1}),className:t.cn(r.comboboxClassNames.input,s.inputBase,`border-b-stroke-accessible`,s.inputFocus,s.disabledStyles,Ie&&`border-destructive focus:border-b-destructive`,ae.pickerEndPadding(Number($)+Number(Q)))}),$&&(0,f.jsx)(`button`,{type:`button`,"aria-label":C?.clear??`Clear selection`,disabled:_,onMouseDown:e=>e.preventDefault(),onClick:Ze,className:t.cn(r.comboboxClassNames.clearButton,`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,f.jsx)(te.DismissIcon,{})}),Q&&(0,f.jsx)(l.PickerExpandButton,{component:`Combobox`,expandIcon:S,label:C?.expand??`Show options`,expanded:J,listboxId:G.listboxId,disabled:_||!!x,onToggle:Xe,className:r.comboboxClassNames.expandButton,iconClassName:r.comboboxClassNames.expandIcon})]}),(0,f.jsx)(`span`,{role:`status`,className:`sr-only`,children:He&&Y}),(0,f.jsx)(u.ListboxSurface,{listbox:G,layerId:Ue,surfaceRef:Ge,floatingProps:Ke,open:F,expanded:J,listboxClassName:r.comboboxClassNames.listbox,surfaceClassName:r.comboboxClassNames.surface,emptyContent:I?(0,f.jsx)(`div`,{"aria-hidden":`true`,className:t.cn(r.comboboxClassNames.emptyMessage,`px-3 py-1.5 text-body-1 text-muted-foreground`),children:Y}):void 0,"aria-label":k[`aria-label`],"aria-labelledby":Qe,children:D}),(0,f.jsx)(ie.HiddenInput,{name:de,form:y,disabled:_,value:A,type:`text`,required:Fe,onInvalid:()=>V.current?.focus()})]})};p.displayName=`Combobox`;var m=u.Option,h=u.OptionGroup,g=Object.assign(p,{Option:u.Option,OptionGroup:u.OptionGroup});exports.Combobox=g,exports.ComboboxOption=m,exports.ComboboxOptionGroup=h,exports.Option=u.Option,exports.OptionGroup=u.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","comboboxClassNames","composeEventHandlers","inputBase","inputFocus","disabledStyles","pickerEndPadding","DismissIcon","PickerExpandButton","ListboxSurface","HiddenInput","Option","OptionGroup","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","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 { comboboxClassNames } from '../../lib/classNames';\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\n      {...rest}\n      ref={rootMergedRef}\n      className={cn(comboboxClassNames.root, 'relative inline-flex flex-col', className)}\n    >\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            comboboxClassNames.input,\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              comboboxClassNames.clearButton,\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            className={comboboxClassNames.expandButton}\n            iconClassName={comboboxClassNames.expandIcon}\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        listboxClassName={comboboxClassNames.listbox}\n        surfaceClassName={comboboxClassNames.surface}\n        emptyContent={\n          draft ? (\n            <div\n              aria-hidden=\"true\"\n              className={cn(\n                comboboxClassNames.emptyMessage,\n                'px-3 py-1.5 text-body-1 text-muted-foreground',\n              )}\n            >\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("../button/Button.slots.cjs"),o=require("../../lib/icons.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,className:g,iconClassName:_})=>{let{glyph:v,button:y}=a.unwrapButtonGlyph(u);c.useEffect(()=>{y&&n.warnOnce(`${e}:expandIcon-button`,`${e}: \`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,e]);let b=v!=null&&r.slotRendersContent(v)?v:(0,l.jsx)(o.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(g,s.PICKER_ICON_BUTTON_CLASSES,`end-1`,i.focusRing,i.disabledStyles),children:r.renderSlot(b,`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_Button_slots","require_icons","require_pickerStyles","react","react_jsx_runtime","showsExpandButton","expandIcon","PickerExpandButton","content","button","component","glyph","label","expanded","listboxId","event","onToggle","className","iconClassName"],"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  /** The host's stable class for the button (its `expandButton` part). */\n  className?: string;\n  /** The host's stable class for the glyph `<span>` (its `expandIcon` part). */\n  iconClassName?: string;\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  className,\n  iconClassName,\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(className, PICKER_ICON_BUTTON_CLASSES, 'end-1', focusRing, disabledStyles)}\n    >\n      {renderSlot(\n        glyph,\n        'span',\n        cn(\n          iconClassName,\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,CAgCA,IAAaC,GAAsB,CACjC,YACA,aACA,QACA,WACA,YACA,WACA,WACA,YACA,mBAC6B,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,GAAG2B,EAAW1B,EAAAA,2BAA4B,QAASC,EAAAA,UAAWC,EAAAA,cAAc,EAEtF,SAAAC,EAAAA,WACCiB,EACA,OACArB,EAAAA,GACE4B,EACA,iEACAL,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 { unwrapButtonGlyph as o } from "../button/Button.slots.mjs";
+import { ChevronDownIcon as s } from "../../lib/icons.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: _, className: v, iconClassName: y }) => {
+	let { glyph: b, button: x } = o(f);
+	l.useEffect(() => {
+		x && t(`${d}:expandIcon-button`, `${d}: \`expandIcon\` received ${x}; 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 />}\`.`);
+	}, [x, d]);
+	let S = b != null && r(b) ? b : /* @__PURE__ */ u(s, {});
+	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(v, c, "end-1", a, i),
+		children: n(S, "span", e(y, "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","className","PICKER_ICON_BUTTON_CLASSES","focusRing","disabledStyles","renderSlot","iconClassName"],"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  /** The host's stable class for the button (its `expandButton` part). */\n  className?: string;\n  /** The host's stable class for the glyph `<span>` (its `expandIcon` part). */\n  iconClassName?: string;\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  className,\n  iconClassName,\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(className, PICKER_ICON_BUTTON_CLASSES, 'end-1', focusRing, disabledStyles)}\n    >\n      {renderSlot(\n        glyph,\n        'span',\n        cn(\n          iconClassName,\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;AAgCA,IAAaE,KAAsB,EACjC,cACA,eACA,UACA,aACA,cACA,aACA,aACA,cACA,uBAC6B;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,GAAWC,GAA4B,SAASC,GAAWC,CAAc;EAEtF,UAAAC,EACCZ,GACA,QACAO,EACEM,GACA,kEACAV,KAAY,YACd,GACA,EAAE,eAAe,GAAK,CACxB;CACM,CAAA;AAEZ;AACA,EAAmB,cAAc"}

package/dist/components/input/Combobox.mjs

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