@mortenbrudvik/waveui 0.8.0 → 0.9.0

package/dist/components/input/ColorPicker.parts.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.parts.cjs","names":["React","useControllable","sameColor","isHexDraft","useId","isInvalidLook","useMergedRefs","formatHexColor","parseHexInput","parseHexColor","composeEventHandlers","cn","colorPickerHexFieldClassNames","joinIds","inputFocus","SwatchPicker","colorPickerSwatchesClassNames","colorPickerPreviewClassNames","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_styles","require_Input","require_colorUtils","require_SwatchPicker","react","react_jsx_runtime","DEFAULT_COLOR","DEFAULT_PART_COLOR","DEFAULT_COLOR_PICKER_LABELS","ColorPickerContext","useColorPickerContext","noop","useColorPartState","context","picker","value","defaultValue","initial","own","setOwn","onValueChange","next","disabled","INERT_PICKER_CONTEXT","usePickerPartContext","componentName","isBlankDraft","trimmed","text","hasAlphaDigits","digits","ColorPickerHexField","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaErrorMessage","ariaDetails","ariaRequired","rest","alpha","parsed","draft","setDraft","syncedColor","setSyncedColor","color","seenResetKey","setSeenResetKey","hexText","draftInvalid","fieldInvalid","groupInvalid","errorId","resolvedInvalid","invalidLook","inputRef","mergedInputRef","controlRef","commit","rgb","nextAlpha","handleChange","event","typed","finishDraft","handleBlur","onBlur","handleKeyDown","onKeyDown","className","labels","errorMessageId","field","spellCheck","ColorPickerSwatches","ColorPickerPreview","shown","style"],"sources":["../../../src/components/input/ColorPicker.parts.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useControllable } from '../../hooks/useControllable';\nimport type { FieldContextValue } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { joinIds } from '../../lib/aria';\nimport {\n  colorPickerHexFieldClassNames,\n  colorPickerPreviewClassNames,\n  colorPickerSwatchesClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { reportMissingContext } from '../../lib/dev';\nimport { inputFocus, inputInvalid } from '../../lib/styles';\nimport type { ColorPickerShape, HsvColor } from '../../lib/types';\nimport { isInvalidLook } from './Input';\nimport { SwatchPicker, type SwatchItem, type SwatchPickerProps } from './SwatchPicker';\nimport {\n  formatHexColor,\n  isHexDraft,\n  parseHexColor,\n  parseHexInput,\n  sameColor,\n  type HexColor,\n} from './colorUtils';\n\n/*\n * The picker's labels and context, and how the standalone color parts bind to it (spec P3-05,\n * D21). `ColorArea`, `ColorSlider` and `AlphaSlider` read the context; `ColorPicker.tsx` provides\n * it and renders the picker-only parts. This module never imports `ColorPicker.tsx`.\n */\n\n// wave-allow-color: default color value (user color data, C-TOKENS exception)\nexport const DEFAULT_COLOR = '#0f6cbd';\n\n/** The default color of a standalone part: the default picker color in HSV. */\nexport const DEFAULT_PART_COLOR: HsvColor = { h: 208, s: 0.92, v: 0.74 };\n\n/**\n * Texts of the ColorPicker's own parts and of the color parts bound to it, for localisation.\n * Every key is optional; missing keys use 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 of the opacity row and accessible name of the opacity slider (a bound\n   * `AlphaSlider`).\n   * @default 'Opacity'\n   */\n  opacity?: string;\n  /** Accessible name of a bound `ColorArea`'s group.\n   * @default 'Saturation and brightness'\n   */\n  area?: string;\n  /** Name of a bound area's saturation slider and of a bound `channel=\"saturation\"` slider.\n   * @default 'Saturation'\n   */\n  saturation?: string;\n  /** Name of a bound area's brightness slider and of a bound `channel=\"value\"` slider.\n   * @default 'Brightness'\n   */\n  brightness?: string;\n  /** Role description of a bound area's two sliders.\n   * @default '2D slider'\n   */\n  roleDescription?: string;\n  /** Name of a bound hue slider.\n   * @default 'Hue'\n   */\n  hue?: string;\n  /** Name of a bound `AlphaSlider` with `transparency`.\n   * @default 'Transparency'\n   */\n  transparency?: string;\n  /** Names the color at the end of the bound parts' value texts; return `''` to leave it out.\n   * @default an English namer (\"dark blue\")\n   */\n  colorName?: (color: HsvColor) => string;\n  /** Replaces a whole value text of a bound part, for languages whose order differs. */\n  valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value' | 'alpha') => string;\n}\n\n/** The labels with every string default filled in (the two functions stay optional). */\nexport type ResolvedColorPickerLabels = Required<\n  Omit<ColorPickerLabels, 'colorName' | 'valueText'>\n> &\n  Pick<ColorPickerLabels, 'colorName' | 'valueText'>;\n\nexport const DEFAULT_COLOR_PICKER_LABELS: ResolvedColorPickerLabels = {\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  area: 'Saturation and brightness',\n  saturation: 'Saturation',\n  brightness: 'Brightness',\n  roleDescription: '2D slider',\n  hue: 'Hue',\n  transparency: 'Transparency',\n};\n\n/** What a ColorPicker shares with its parts and with the color parts bound to it. */\nexport interface ColorPickerContextValue {\n  /** The working color: HSV, so hue and saturation survive gray, white and black. */\n  hsv: HsvColor;\n  /** Writes the working color from a bound part and reports its hex (only when the hex changes). */\n  setHsv: (next: HsvColor) => void;\n  /** The picker's value as given: a hex string, or a value that is not one (as given). */\n  color: string;\n  /** The value parsed (`#rrggbb` and the alpha byte), `null` while it is not a hex color. */\n  parsed: HexColor | null;\n  /** Writes the value as hex text (the hex field). */\n  setColor: (next: string) => void;\n  /** Applies a preset's `#rrggbb` at the current opacity and drops the hex field's draft. */\n  pickPreset: (rgb: string) => void;\n  /** The picker's presets as swatch items (values are `#rrggbb`). */\n  presetItems: readonly SwatchItem[];\n  /** The picker's `shape`, inherited by the bound parts and `ColorPicker.Preview`. */\n  shape: ColorPickerShape;\n  /** The picker's labels with every string default filled in. */\n  labels: ResolvedColorPickerLabels;\n  /** `true` while the value is not a hex color: the bound parts are disabled until one arrives. */\n  disabled: boolean;\n  /** Changes whenever the hex field must drop its draft: a form reset or a preset pick. */\n  draftResetKey: number;\n  /** The Field around the picker (its parts render in a `null` Field context). */\n  field: FieldContextValue | null;\n  /** The invalid state set on the picker from outside (its `aria-invalid` or the Field's), as given. */\n  groupInvalid: React.AriaAttributes['aria-invalid'];\n  /** The consumer's `aria-errormessage`, routed to the hex field while that state is set. */\n  errorMessageId: string | undefined;\n  /** The hex field registers its `<input>` here (the hidden input's `onInvalid` focuses it). */\n  registerHexInput: (input: HTMLInputElement | null) => void;\n}\n\nexport const ColorPickerContext = React.createContext<ColorPickerContextValue | null>(null);\nColorPickerContext.displayName = 'ColorPickerContext';\n\n/** The enclosing ColorPicker's context, or `null` outside one (the standalone parts need none). */\nexport function useColorPickerContext(): ColorPickerContextValue | null {\n  return React.useContext(ColorPickerContext);\n}\n\n/** What a color part passes to {@link useColorPartState}. */\nexport interface ColorPartOptions {\n  value: HsvColor | undefined;\n  defaultValue: HsvColor | undefined;\n  onValueChange: ((value: HsvColor) => void) | undefined;\n  disabled: boolean;\n}\n\n/** Where a color part's color lives: in the enclosing picker (bound) or in the part. */\nexport interface ColorPartState {\n  /** The enclosing picker when the part binds to it, else `null`. */\n  picker: ColorPickerContextValue | null;\n  /** The color as given (bound: the picker's working color). */\n  color: HsvColor;\n  /**\n   * Writes a new color. Bound: the picker's working color, then the part's own `onValueChange`\n   * (a part given only the callback listens; C-NAMING). Otherwise the part's state, through\n   * `useControllable`.\n   */\n  setColor: (next: HsvColor) => void;\n  /** Restores `defaultValue` on a form reset, reporting only a real change; nothing while bound. */\n  reset: () => void;\n  /** The part's `disabled`, or the picker's disabled state while bound. */\n  disabled: boolean;\n}\n\nconst noop = () => {};\n\n/**\n * The binding rule of `ColorArea`, `ColorSlider` and `AlphaSlider` (D21): inside a ColorPicker, a\n * part with neither `value` nor `defaultValue` reads and writes the picker's working color;\n * anywhere else, or with either prop, it keeps its own color.\n */\nexport function useColorPartState({\n  value,\n  defaultValue,\n  onValueChange,\n  disabled,\n}: ColorPartOptions): ColorPartState {\n  const context = useColorPickerContext();\n  const picker =\n    context !== null && value === undefined && defaultValue === undefined ? context : null;\n  const initial = defaultValue ?? DEFAULT_PART_COLOR;\n  const [own, setOwn] = useControllable(value, initial, picker ? undefined : onValueChange);\n  if (picker) {\n    return {\n      picker,\n      color: picker.hsv,\n      setColor: (next) => {\n        picker.setHsv(next);\n        onValueChange?.(next);\n      },\n      reset: noop,\n      disabled: disabled || picker.disabled,\n    };\n  }\n  return {\n    picker: null,\n    color: own,\n    setColor: setOwn,\n    reset: () => {\n      if (!sameColor(own, initial)) setOwn(initial);\n    },\n    disabled,\n  };\n}\n\n// ---------------------------------------------------------------------------------------------\n// The picker-only parts: ColorPicker.HexField, ColorPicker.Swatches, ColorPicker.Preview\n// ---------------------------------------------------------------------------------------------\n\n/** The context a misplaced part renders with in production (C-CONTEXT). */\nconst INERT_PICKER_CONTEXT: ColorPickerContextValue = {\n  hsv: DEFAULT_PART_COLOR,\n  setHsv: noop,\n  color: DEFAULT_COLOR,\n  parsed: null,\n  setColor: noop,\n  pickPreset: noop,\n  presetItems: [],\n  shape: 'rounded',\n  labels: DEFAULT_COLOR_PICKER_LABELS,\n  disabled: true,\n  draftResetKey: 0,\n  field: null,\n  groupInvalid: undefined,\n  errorMessageId: undefined,\n  registerHexInput: noop,\n};\n\n/**\n * The context of a picker-only part: throws `[WaveUI] <name> must be used within <ColorPicker>`\n * in development; logs once and returns an inert value in production (C-CONTEXT).\n */\nexport function usePickerPartContext(componentName: string): ColorPickerContextValue {\n  const context = React.useContext(ColorPickerContext);\n  if (context) return context;\n  reportMissingContext(componentName, '<ColorPicker>');\n  return INERT_PICKER_CONTEXT;\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 * Properties for the ColorPickerHexField sub-component. `id`, the labelling and validation\n * `aria-*` (`aria-label`, `aria-labelledby`, `aria-describedby`, `aria-invalid`,\n * `aria-errormessage`, `aria-details`, `aria-required`), `autoFocus`, `tabIndex`, the focus and key\n * handlers and the text-entry attributes (`inputMode`, `enterKeyHint`, `autoCapitalize`,\n * `autoCorrect`, `spellCheck`) go to the `<input>`; everything else stays on the outer label.\n */\nexport interface ColorPickerHexFieldProps extends React.HTMLAttributes<HTMLElement> {\n  /** Ref to the hex `<input>`. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the field's outer element: the label around the caption, the input and the error. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * The hex text field of a ColorPicker: a caption, the input and its error. The text is a draft:\n * complete 6- and 8-digit values apply while typing, text that can never be a hex color is\n * flagged at once, and leaving the field (or Enter) applies a short `#rgb`/`#rgba` and shows the\n * value again; other text stays flagged until it is corrected, cleared, or the value changes from\n * elsewhere (a preset, another part, the parent, a form reset). Inside a Field it carries the\n * Field's invalid state and error. Must be inside a ColorPicker. Also exported as\n * `ColorPickerHexField` (import the flat name in React Server Components).\n */\nexport const ColorPickerHexField = ({\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-required': ariaRequired,\n  autoFocus,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  inputMode,\n  enterKeyHint,\n  autoCapitalize,\n  autoCorrect,\n  spellCheck,\n  controlRef,\n  className,\n  ref,\n  ...rest\n}: ColorPickerHexFieldProps) => {\n  const picker = usePickerPartContext('ColorPicker.HexField');\n  const { color, parsed, field, groupInvalid, errorMessageId, labels } = picker;\n  const alpha = parsed?.alpha ?? 255;\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 replaces a flagged draft (input-pickers#25); while the user\n  // 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  // A form reset or a preset pick drops any draft.\n  const [seenResetKey, setSeenResetKey] = React.useState(picker.draftResetKey);\n  if (picker.draftResetKey !== seenResetKey) {\n    setSeenResetKey(picker.draftResetKey);\n    setDraft(null);\n  }\n  const hexText = draft?.text ?? color;\n  const draftInvalid =\n    draft !== null && !isBlankDraft(draft.text) && (draft.flagged || !isHexDraft(draft.text));\n  // Any invalid state from outside (the picker's prop or the Field) is set on the input as is;\n  // only `true` shows the error look.\n  const fieldInvalid =\n    groupInvalid !== undefined && groupInvalid !== false && groupInvalid !== 'false';\n  const errorId = useId('wave-color-picker-error');\n  const resolvedInvalid =\n    ariaInvalid ?? (draftInvalid ? true : fieldInvalid ? groupInvalid : undefined);\n  const invalidLook = isInvalidLook(false, resolvedInvalid);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef, picker.registerHexInput);\n\n  /** The single commit path: every edit is `#rrggbb` + an alpha byte. */\n  const commit = (rgb: string, nextAlpha: number) =>\n    picker.setColor(formatHexColor(rgb, nextAlpha));\n\n  const handleChange = (event: 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 = event.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 draft when the field is left or Enter is pressed. */\n  const finishDraft = () => {\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 values were\n      // applied while typing, so a rejecting parent is not asked twice. Then the field shows the\n      // 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 thrown away (WCAG 3.3.1).\n    setDraft({ text: draft.text, flagged: true });\n  };\n\n  const handleBlur = composeEventHandlers(onBlur, finishDraft);\n  // Not prevented: Enter still submits the surrounding form, with the color just applied.\n  const handleKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Enter' && !event.nativeEvent.isComposing) finishDraft();\n    },\n  );\n\n  return (\n    <label\n      ref={ref}\n      className={cn(colorPickerHexFieldClassNames.root, 'flex min-w-0 flex-col gap-1', className)}\n      {...rest}\n    >\n      <span\n        className={cn(colorPickerHexFieldClassNames.label, 'text-caption-1 text-muted-foreground')}\n      >\n        {labels.hex}\n      </span>\n      <input\n        ref={mergedInputRef}\n        id={id}\n        type=\"text\"\n        value={hexText}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onKeyUp={onKeyUp}\n        onFocus={onFocus}\n        onBlur={handleBlur}\n        aria-label={ariaLabel ?? (ariaLabelledBy === undefined ? labels.hexInput : undefined)}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={resolvedInvalid}\n        aria-errormessage={ariaErrorMessage ?? errorMessageId}\n        aria-describedby={joinIds(\n          draftInvalid && errorId,\n          field?.validationMessageId ?? (fieldInvalid ? field?.errorId : undefined),\n          errorMessageId,\n          ariaDescribedBy,\n        )}\n        aria-details={ariaDetails}\n        aria-required={ariaRequired}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        inputMode={inputMode}\n        enterKeyHint={enterKeyHint}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        spellCheck={spellCheck ?? false}\n        maxLength={9}\n        autoComplete=\"off\"\n        className={cn(\n          colorPickerHexFieldClassNames.input,\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          invalidLook && inputInvalid,\n        )}\n      />\n      {draftInvalid && (\n        <span\n          id={errorId}\n          className={cn(colorPickerHexFieldClassNames.errorMessage, 'text-caption-1 text-error')}\n        >\n          {labels.hexError}\n        </span>\n      )}\n    </label>\n  );\n};\n\nColorPickerHexField.displayName = 'ColorPickerHexField';\n\n/** Properties for the ColorPickerSwatches sub-component: the picker's `presets` as a SwatchPicker. */\nexport type ColorPickerSwatchesProps = Omit<\n  SwatchPickerProps,\n  'items' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'name' | 'form' | 'required'\n>;\n\n/**\n * The picker's `presets` as swatches (a SwatchPicker named by `labels.presets`, small and rounded\n * unless you pass `size` or `shape`). Picking one keeps the opacity. Renders nothing without\n * presets. Must be inside a ColorPicker. Also exported as `ColorPickerSwatches`.\n */\nexport const ColorPickerSwatches = ({\n  className,\n  'aria-label': ariaLabel,\n  size = 'small',\n  shape = 'rounded',\n  ...rest\n}: ColorPickerSwatchesProps) => {\n  const picker = usePickerPartContext('ColorPicker.Swatches');\n  if (picker.presetItems.length === 0) return null;\n  return (\n    <SwatchPicker\n      aria-label={\n        ariaLabel ?? (rest['aria-labelledby'] === undefined ? picker.labels.presets : undefined)\n      }\n      size={size}\n      shape={shape}\n      {...rest}\n      className={cn(colorPickerSwatchesClassNames.root, className)}\n      items={picker.presetItems}\n      value={picker.parsed ? picker.parsed.rgb : ''}\n      onValueChange={picker.pickPreset}\n    />\n  );\n};\n\nColorPickerSwatches.displayName = 'ColorPickerSwatches';\n\n/** Properties for the ColorPickerPreview sub-component. */\nexport interface ColorPickerPreviewProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * A swatch of the picker's current color (decorative, `aria-hidden`); it keeps its color in forced\n * colors and follows the picker's `shape`. Must be inside a ColorPicker. Also exported as\n * `ColorPickerPreview`.\n */\nexport const ColorPickerPreview = ({ className, style, ref, ...rest }: ColorPickerPreviewProps) => {\n  const picker = usePickerPartContext('ColorPicker.Preview');\n  const shown = picker.parsed\n    ? formatHexColor(picker.parsed.rgb, picker.parsed.alpha)\n    : picker.color;\n  return (\n    <div\n      data-color-preview=\"\"\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        colorPickerPreviewClassNames.root,\n        'h-10 w-10 shrink-0 rounded border border-border forced-colors:forced-color-adjust-none',\n        picker.shape === 'square' && 'rounded-none',\n        className,\n      )}\n      style={{ ...style, backgroundColor: shown }}\n    />\n  );\n};\n\nColorPickerPreview.displayName = 'ColorPickerPreview';\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.parts.cjs","names":["React","useControllable","sameColor","isHexDraft","useId","isInvalidLook","useMergedRefs","formatHexColor","parseHexInput","parseHexColor","composeEventHandlers","cn","colorPickerHexFieldClassNames","joinIds","inputFocus","SwatchPicker","colorPickerSwatchesClassNames","colorPickerPreviewClassNames","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_styles","require_Input","require_colorUtils","require_SwatchPicker","react","react_jsx_runtime","DEFAULT_COLOR","DEFAULT_PART_COLOR","DEFAULT_COLOR_PICKER_LABELS","ColorPickerContext","useColorPickerContext","noop","useColorPartState","context","picker","value","defaultValue","initial","own","setOwn","onValueChange","next","disabled","INERT_PICKER_CONTEXT","usePickerPartContext","componentName","isBlankDraft","trimmed","text","hasAlphaDigits","digits","ColorPickerHexField","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaErrorMessage","ariaDetails","ariaRequired","rest","alpha","parsed","draft","setDraft","syncedColor","setSyncedColor","color","seenResetKey","setSeenResetKey","hexText","draftInvalid","fieldInvalid","groupInvalid","errorId","resolvedInvalid","invalidLook","inputRef","mergedInputRef","controlRef","commit","rgb","nextAlpha","handleChange","event","typed","finishDraft","handleBlur","onBlur","handleKeyDown","onKeyDown","className","labels","errorMessageId","field","spellCheck","ColorPickerSwatches","ColorPickerPreview","shown","style"],"sources":["../../../src/components/input/ColorPicker.parts.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useControllable } from '../../hooks/useControllable';\nimport type { FieldContextValue } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { joinIds } from '../../lib/aria';\nimport {\n  colorPickerHexFieldClassNames,\n  colorPickerPreviewClassNames,\n  colorPickerSwatchesClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { reportMissingContext } from '../../lib/dev';\nimport { inputFocus, inputInvalid } from '../../lib/styles';\nimport type { ColorPickerShape, HsvColor } from '../../lib/types';\nimport { isInvalidLook } from './Input';\nimport { SwatchPicker, type SwatchItem, type SwatchPickerProps } from './SwatchPicker';\nimport {\n  formatHexColor,\n  isHexDraft,\n  parseHexColor,\n  parseHexInput,\n  sameColor,\n  type HexColor,\n} from './colorUtils';\n\n/*\n * The picker's labels and context, and how the standalone color parts bind to it (spec P3-05,\n * D21). `ColorArea`, `ColorSlider` and `AlphaSlider` read the context; `ColorPicker.tsx` provides\n * it and renders the picker-only parts. This module never imports `ColorPicker.tsx`.\n */\n\n// wave-allow-color: default color value (user color data, C-TOKENS exception)\nexport const DEFAULT_COLOR = '#0f6cbd';\n\n/** The default color of a standalone part: the default picker color in HSV. */\nexport const DEFAULT_PART_COLOR: HsvColor = { h: 208, s: 0.92, v: 0.74 };\n\n/**\n * Texts of the ColorPicker's own parts and of the color parts bound to it, for localisation.\n * Every key is optional; missing keys use 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 of the opacity row and accessible name of the opacity slider (a bound\n   * `AlphaSlider`).\n   * @default 'Opacity'\n   */\n  opacity?: string;\n  /** Accessible name of a bound `ColorArea`'s group.\n   * @default 'Saturation and brightness'\n   */\n  area?: string;\n  /** Name of a bound area's saturation slider and of a bound `channel=\"saturation\"` slider.\n   * @default 'Saturation'\n   */\n  saturation?: string;\n  /** Name of a bound area's brightness slider and of a bound `channel=\"value\"` slider.\n   * @default 'Brightness'\n   */\n  brightness?: string;\n  /** Role description of a bound area's two sliders.\n   * @default '2D slider'\n   */\n  roleDescription?: string;\n  /** Name of a bound hue slider.\n   * @default 'Hue'\n   */\n  hue?: string;\n  /** Name of a bound `AlphaSlider` with `transparency`.\n   * @default 'Transparency'\n   */\n  transparency?: string;\n  /** Names the color at the end of the bound parts' value texts; return `''` to leave it out.\n   * @default an English namer (\"dark blue\")\n   */\n  colorName?: (color: HsvColor) => string;\n  /** Replaces a whole value text of a bound part, for languages whose order differs. */\n  valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value' | 'alpha') => string;\n}\n\n/** The labels with every string default filled in (the two functions stay optional). */\nexport type ResolvedColorPickerLabels = Required<\n  Omit<ColorPickerLabels, 'colorName' | 'valueText'>\n> &\n  Pick<ColorPickerLabels, 'colorName' | 'valueText'>;\n\nexport const DEFAULT_COLOR_PICKER_LABELS: ResolvedColorPickerLabels = {\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  area: 'Saturation and brightness',\n  saturation: 'Saturation',\n  brightness: 'Brightness',\n  roleDescription: '2D slider',\n  hue: 'Hue',\n  transparency: 'Transparency',\n};\n\n/** What a ColorPicker shares with its parts and with the color parts bound to it. */\nexport interface ColorPickerContextValue {\n  /** The working color: HSV, so hue and saturation survive gray, white and black. */\n  hsv: HsvColor;\n  /** Writes the working color from a bound part and reports its hex (only when the hex changes). */\n  setHsv: (next: HsvColor) => void;\n  /** The picker's value as given: a hex string, or a value that is not one (as given). */\n  color: string;\n  /** The value parsed (`#rrggbb` and the alpha byte), `null` while it is not a hex color. */\n  parsed: HexColor | null;\n  /** Writes the value as hex text (the hex field). */\n  setColor: (next: string) => void;\n  /** Applies a preset's `#rrggbb` at the current opacity and drops the hex field's draft. */\n  pickPreset: (rgb: string) => void;\n  /** The picker's presets as swatch items (values are `#rrggbb`). */\n  presetItems: readonly SwatchItem[];\n  /** The picker's `shape`, inherited by the bound parts and `ColorPicker.Preview`. */\n  shape: ColorPickerShape;\n  /** The picker's labels with every string default filled in. */\n  labels: ResolvedColorPickerLabels;\n  /** `true` while the value is not a hex color: the bound parts are disabled until one arrives. */\n  disabled: boolean;\n  /** Changes whenever the hex field must drop its draft: a form reset or a preset pick. */\n  draftResetKey: number;\n  /** The Field around the picker (its parts render in a `null` Field context). */\n  field: FieldContextValue | null;\n  /** The invalid state set on the picker from outside (its `aria-invalid` or the Field's), as given. */\n  groupInvalid: React.AriaAttributes['aria-invalid'];\n  /** The consumer's `aria-errormessage`, routed to the hex field while that state is set. */\n  errorMessageId: string | undefined;\n  /** The hex field registers its `<input>` here (the hidden input's `onInvalid` focuses it). */\n  registerHexInput: (input: HTMLInputElement | null) => void;\n}\n\nexport const ColorPickerContext = React.createContext<ColorPickerContextValue | null>(null);\nColorPickerContext.displayName = 'ColorPickerContext';\n\n/** The enclosing ColorPicker's context, or `null` outside one (the standalone parts need none). */\nexport function useColorPickerContext(): ColorPickerContextValue | null {\n  return React.useContext(ColorPickerContext);\n}\n\n/** What a color part passes to {@link useColorPartState}. */\nexport interface ColorPartOptions {\n  value: HsvColor | undefined;\n  defaultValue: HsvColor | undefined;\n  onValueChange: ((value: HsvColor) => void) | undefined;\n  disabled: boolean;\n}\n\n/** Where a color part's color lives: in the enclosing picker (bound) or in the part. */\nexport interface ColorPartState {\n  /** The enclosing picker when the part binds to it, else `null`. */\n  picker: ColorPickerContextValue | null;\n  /** The color as given (bound: the picker's working color). */\n  color: HsvColor;\n  /**\n   * Writes a new color. Bound: the picker's working color, then the part's own `onValueChange`\n   * (a part given only the callback listens; C-NAMING). Otherwise the part's state, through\n   * `useControllable`.\n   */\n  setColor: (next: HsvColor) => void;\n  /** Restores `defaultValue` on a form reset, reporting only a real change; nothing while bound. */\n  reset: () => void;\n  /** The part's `disabled`, or the picker's disabled state while bound. */\n  disabled: boolean;\n}\n\nconst noop = () => {};\n\n/**\n * The binding rule of `ColorArea`, `ColorSlider` and `AlphaSlider` (D21): inside a ColorPicker, a\n * part with neither `value` nor `defaultValue` reads and writes the picker's working color;\n * anywhere else, or with either prop, it keeps its own color.\n */\nexport function useColorPartState({\n  value,\n  defaultValue,\n  onValueChange,\n  disabled,\n}: ColorPartOptions): ColorPartState {\n  const context = useColorPickerContext();\n  const picker =\n    context !== null && value === undefined && defaultValue === undefined ? context : null;\n  const initial = defaultValue ?? DEFAULT_PART_COLOR;\n  const [own, setOwn] = useControllable(value, initial, picker ? undefined : onValueChange);\n  if (picker) {\n    return {\n      picker,\n      color: picker.hsv,\n      setColor: (next) => {\n        picker.setHsv(next);\n        onValueChange?.(next);\n      },\n      reset: noop,\n      disabled: disabled || picker.disabled,\n    };\n  }\n  return {\n    picker: null,\n    color: own,\n    setColor: setOwn,\n    reset: () => {\n      if (!sameColor(own, initial)) setOwn(initial);\n    },\n    disabled,\n  };\n}\n\n// ---------------------------------------------------------------------------------------------\n// The picker-only parts: ColorPicker.HexField, ColorPicker.Swatches, ColorPicker.Preview\n// ---------------------------------------------------------------------------------------------\n\n/** The context a misplaced part renders with in production (C-CONTEXT). */\nconst INERT_PICKER_CONTEXT: ColorPickerContextValue = {\n  hsv: DEFAULT_PART_COLOR,\n  setHsv: noop,\n  color: DEFAULT_COLOR,\n  parsed: null,\n  setColor: noop,\n  pickPreset: noop,\n  presetItems: [],\n  shape: 'rounded',\n  labels: DEFAULT_COLOR_PICKER_LABELS,\n  disabled: true,\n  draftResetKey: 0,\n  field: null,\n  groupInvalid: undefined,\n  errorMessageId: undefined,\n  registerHexInput: noop,\n};\n\n/**\n * The context of a picker-only part: throws `[WaveUI] <name> must be used within <ColorPicker>`\n * in development; logs once and returns an inert value in production (C-CONTEXT).\n */\nexport function usePickerPartContext(componentName: string): ColorPickerContextValue {\n  const context = React.useContext(ColorPickerContext);\n  if (context) return context;\n  reportMissingContext(componentName, '<ColorPicker>');\n  return INERT_PICKER_CONTEXT;\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 * Properties for the ColorPickerHexField sub-component. `id`, the labelling and validation\n * `aria-*` (`aria-label`, `aria-labelledby`, `aria-describedby`, `aria-invalid`,\n * `aria-errormessage`, `aria-details`, `aria-required`), `autoFocus`, `tabIndex`, the focus and key\n * handlers and the text-entry attributes (`inputMode`, `enterKeyHint`, `autoCapitalize`,\n * `autoCorrect`, `spellCheck`) go to the `<input>`; everything else stays on the outer label.\n */\nexport interface ColorPickerHexFieldProps extends React.HTMLAttributes<HTMLElement> {\n  /** Ref to the hex `<input>`. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the field's outer element: the label around the caption, the input and the error. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * The hex text field of a ColorPicker: a caption, the input and its error. The text is a draft:\n * complete 6- and 8-digit values apply while typing, text that can never be a hex color is\n * flagged at once, and leaving the field (or Enter) applies a short `#rgb`/`#rgba` and shows the\n * value again; other text stays flagged until it is corrected, cleared, or the value changes from\n * elsewhere (a preset, another part, the parent, a form reset). Inside a Field it carries the\n * Field's invalid state and error. Must be inside a ColorPicker. Also exported as\n * `ColorPickerHexField` (import the flat name in React Server Components).\n */\nexport const ColorPickerHexField = ({\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-required': ariaRequired,\n  autoFocus,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  inputMode,\n  enterKeyHint,\n  autoCapitalize,\n  autoCorrect,\n  spellCheck,\n  controlRef,\n  className,\n  ref,\n  ...rest\n}: ColorPickerHexFieldProps) => {\n  const picker = usePickerPartContext('ColorPicker.HexField');\n  const { color, parsed, field, groupInvalid, errorMessageId, labels } = picker;\n  const alpha = parsed?.alpha ?? 255;\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 replaces a flagged draft (input-pickers#25); while the user\n  // 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  // A form reset or a preset pick drops any draft.\n  const [seenResetKey, setSeenResetKey] = React.useState(picker.draftResetKey);\n  if (picker.draftResetKey !== seenResetKey) {\n    setSeenResetKey(picker.draftResetKey);\n    setDraft(null);\n  }\n  const hexText = draft?.text ?? color;\n  const draftInvalid =\n    draft !== null && !isBlankDraft(draft.text) && (draft.flagged || !isHexDraft(draft.text));\n  // Any invalid state from outside (the picker's prop or the Field) is set on the input as is;\n  // only `true` shows the error look.\n  const fieldInvalid =\n    groupInvalid !== undefined && groupInvalid !== false && groupInvalid !== 'false';\n  const errorId = useId('wave-color-picker-error');\n  const resolvedInvalid =\n    ariaInvalid ?? (draftInvalid ? true : fieldInvalid ? groupInvalid : undefined);\n  const invalidLook = isInvalidLook(false, resolvedInvalid);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef, picker.registerHexInput);\n\n  /** The single commit path: every edit is `#rrggbb` + an alpha byte. */\n  const commit = (rgb: string, nextAlpha: number) =>\n    picker.setColor(formatHexColor(rgb, nextAlpha));\n\n  const handleChange = (event: 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 = event.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 draft when the field is left or Enter is pressed. */\n  const finishDraft = () => {\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 values were\n      // applied while typing, so a rejecting parent is not asked twice. Then the field shows the\n      // 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 thrown away (WCAG 3.3.1).\n    setDraft({ text: draft.text, flagged: true });\n  };\n\n  const handleBlur = composeEventHandlers(onBlur, finishDraft);\n  // Not prevented: Enter still submits the surrounding form, with the color just applied.\n  const handleKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Enter' && !event.nativeEvent.isComposing) finishDraft();\n    },\n  );\n\n  return (\n    <label\n      ref={ref}\n      className={cn(colorPickerHexFieldClassNames.root, 'flex min-w-0 flex-col gap-1', className)}\n      {...rest}\n    >\n      <span\n        className={cn(colorPickerHexFieldClassNames.label, 'text-caption-1 text-muted-foreground')}\n      >\n        {labels.hex}\n      </span>\n      <input\n        ref={mergedInputRef}\n        id={id}\n        type=\"text\"\n        value={hexText}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onKeyUp={onKeyUp}\n        onFocus={onFocus}\n        onBlur={handleBlur}\n        aria-label={ariaLabel ?? (ariaLabelledBy === undefined ? labels.hexInput : undefined)}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={resolvedInvalid}\n        aria-errormessage={ariaErrorMessage ?? errorMessageId}\n        aria-describedby={joinIds(\n          draftInvalid && errorId,\n          field?.validationMessageId ?? (fieldInvalid ? field?.errorId : undefined),\n          errorMessageId,\n          ariaDescribedBy,\n        )}\n        aria-details={ariaDetails}\n        aria-required={ariaRequired}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        inputMode={inputMode}\n        enterKeyHint={enterKeyHint}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        spellCheck={spellCheck ?? false}\n        maxLength={9}\n        autoComplete=\"off\"\n        className={cn(\n          colorPickerHexFieldClassNames.input,\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          invalidLook && inputInvalid,\n        )}\n      />\n      {draftInvalid && (\n        <span\n          id={errorId}\n          className={cn(colorPickerHexFieldClassNames.errorMessage, 'text-caption-1 text-error')}\n        >\n          {labels.hexError}\n        </span>\n      )}\n    </label>\n  );\n};\n\nColorPickerHexField.displayName = 'ColorPickerHexField';\n\n/** Properties for the ColorPickerSwatches sub-component: the picker's `presets` as a SwatchPicker. */\nexport type ColorPickerSwatchesProps = Omit<\n  SwatchPickerProps,\n  'items' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'name' | 'form' | 'required'\n>;\n\n/**\n * The picker's `presets` as swatches (a SwatchPicker named by `labels.presets`, small and rounded\n * unless you pass `size` or `shape`). Picking one keeps the opacity. Renders nothing without\n * presets. Must be inside a ColorPicker. Also exported as `ColorPickerSwatches`.\n */\nexport const ColorPickerSwatches = ({\n  className,\n  'aria-label': ariaLabel,\n  size = 'small',\n  shape = 'rounded',\n  ...rest\n}: ColorPickerSwatchesProps) => {\n  const picker = usePickerPartContext('ColorPicker.Swatches');\n  if (picker.presetItems.length === 0) return null;\n  return (\n    <SwatchPicker\n      aria-label={\n        ariaLabel ?? (rest['aria-labelledby'] === undefined ? picker.labels.presets : undefined)\n      }\n      size={size}\n      shape={shape}\n      {...rest}\n      className={cn(colorPickerSwatchesClassNames.root, className)}\n      items={picker.presetItems}\n      value={picker.parsed ? picker.parsed.rgb : ''}\n      onValueChange={picker.pickPreset}\n    />\n  );\n};\n\nColorPickerSwatches.displayName = 'ColorPickerSwatches';\n\n/** Properties for the ColorPickerPreview sub-component. */\nexport interface ColorPickerPreviewProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * A swatch of the picker's current color (decorative, `aria-hidden`); it keeps its color in forced\n * colors and follows the picker's `shape`. Must be inside a ColorPicker. Also exported as\n * `ColorPickerPreview`.\n */\nexport const ColorPickerPreview = ({ className, style, ref, ...rest }: ColorPickerPreviewProps) => {\n  const picker = usePickerPartContext('ColorPicker.Preview');\n  const shown = picker.parsed\n    ? formatHexColor(picker.parsed.rgb, picker.parsed.alpha)\n    : picker.color;\n  return (\n    <div\n      data-color-preview=\"\"\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        colorPickerPreviewClassNames.root,\n        'h-10 w-10 shrink-0 rounded border border-border forced-colors:forced-color-adjust-none',\n        picker.shape === 'square' && 'rounded-none',\n        className,\n      )}\n      style={{ ...style, backgroundColor: shown }}\n    />\n  );\n};\n\nColorPickerPreview.displayName = 'ColorPickerPreview';\n"],"mappings":"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"}

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

@@ -146,7 +146,7 @@ var O = ({ id: t, "aria-label": i, "aria-labelledby": a, "aria-describedby": o,
 				spellCheck: M ?? !1,
 				maxLength: 9,
 				autoComplete: "off",
-				className: e(r.input, "w-24 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1 text-body-1 text-foreground", ee, ce && "border-destructive focus:border-b-destructive")
+				className: e(r.input, "w-24 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1 text-body-1 text-foreground", ee, ce && "border-destructive")
 			}),
 			J && /* @__PURE__ */ g("span", {
 				id: X,

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.parts.mjs","names":["useId","useId$1","React","DEFAULT_COLOR","DEFAULT_PART_COLOR","DEFAULT_COLOR_PICKER_LABELS","ColorPickerContext","useColorPickerContext","noop","useColorPartState","context","picker","value","defaultValue","initial","own","setOwn","useControllable","onValueChange","next","disabled","sameColor","INERT_PICKER_CONTEXT","usePickerPartContext","reportMissingContext","componentName","isBlankDraft","trimmed","text","hasAlphaDigits","digits","ColorPickerHexField","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaErrorMessage","ariaDetails","ariaRequired","rest","alpha","parsed","draft","setDraft","syncedColor","setSyncedColor","color","seenResetKey","setSeenResetKey","hexText","draftInvalid","isHexDraft","fieldInvalid","groupInvalid","errorId","resolvedInvalid","invalidLook","isInvalidLook","inputRef","mergedInputRef","useMergedRefs","controlRef","commit","formatHexColor","rgb","nextAlpha","handleChange","event","typed","parseHexInput","finishDraft","parseHexColor","handleBlur","composeEventHandlers","onBlur","handleKeyDown","onKeyDown","cn","colorPickerHexFieldClassNames","className","labels","errorMessageId","joinIds","field","spellCheck","inputFocus","ColorPickerSwatches","SwatchPicker","colorPickerSwatchesClassNames","ColorPickerPreview","shown","colorPickerPreviewClassNames","style"],"sources":["../../../src/components/input/ColorPicker.parts.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useControllable } from '../../hooks/useControllable';\nimport type { FieldContextValue } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { joinIds } from '../../lib/aria';\nimport {\n  colorPickerHexFieldClassNames,\n  colorPickerPreviewClassNames,\n  colorPickerSwatchesClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { reportMissingContext } from '../../lib/dev';\nimport { inputFocus, inputInvalid } from '../../lib/styles';\nimport type { ColorPickerShape, HsvColor } from '../../lib/types';\nimport { isInvalidLook } from './Input';\nimport { SwatchPicker, type SwatchItem, type SwatchPickerProps } from './SwatchPicker';\nimport {\n  formatHexColor,\n  isHexDraft,\n  parseHexColor,\n  parseHexInput,\n  sameColor,\n  type HexColor,\n} from './colorUtils';\n\n/*\n * The picker's labels and context, and how the standalone color parts bind to it (spec P3-05,\n * D21). `ColorArea`, `ColorSlider` and `AlphaSlider` read the context; `ColorPicker.tsx` provides\n * it and renders the picker-only parts. This module never imports `ColorPicker.tsx`.\n */\n\n// wave-allow-color: default color value (user color data, C-TOKENS exception)\nexport const DEFAULT_COLOR = '#0f6cbd';\n\n/** The default color of a standalone part: the default picker color in HSV. */\nexport const DEFAULT_PART_COLOR: HsvColor = { h: 208, s: 0.92, v: 0.74 };\n\n/**\n * Texts of the ColorPicker's own parts and of the color parts bound to it, for localisation.\n * Every key is optional; missing keys use 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 of the opacity row and accessible name of the opacity slider (a bound\n   * `AlphaSlider`).\n   * @default 'Opacity'\n   */\n  opacity?: string;\n  /** Accessible name of a bound `ColorArea`'s group.\n   * @default 'Saturation and brightness'\n   */\n  area?: string;\n  /** Name of a bound area's saturation slider and of a bound `channel=\"saturation\"` slider.\n   * @default 'Saturation'\n   */\n  saturation?: string;\n  /** Name of a bound area's brightness slider and of a bound `channel=\"value\"` slider.\n   * @default 'Brightness'\n   */\n  brightness?: string;\n  /** Role description of a bound area's two sliders.\n   * @default '2D slider'\n   */\n  roleDescription?: string;\n  /** Name of a bound hue slider.\n   * @default 'Hue'\n   */\n  hue?: string;\n  /** Name of a bound `AlphaSlider` with `transparency`.\n   * @default 'Transparency'\n   */\n  transparency?: string;\n  /** Names the color at the end of the bound parts' value texts; return `''` to leave it out.\n   * @default an English namer (\"dark blue\")\n   */\n  colorName?: (color: HsvColor) => string;\n  /** Replaces a whole value text of a bound part, for languages whose order differs. */\n  valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value' | 'alpha') => string;\n}\n\n/** The labels with every string default filled in (the two functions stay optional). */\nexport type ResolvedColorPickerLabels = Required<\n  Omit<ColorPickerLabels, 'colorName' | 'valueText'>\n> &\n  Pick<ColorPickerLabels, 'colorName' | 'valueText'>;\n\nexport const DEFAULT_COLOR_PICKER_LABELS: ResolvedColorPickerLabels = {\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  area: 'Saturation and brightness',\n  saturation: 'Saturation',\n  brightness: 'Brightness',\n  roleDescription: '2D slider',\n  hue: 'Hue',\n  transparency: 'Transparency',\n};\n\n/** What a ColorPicker shares with its parts and with the color parts bound to it. */\nexport interface ColorPickerContextValue {\n  /** The working color: HSV, so hue and saturation survive gray, white and black. */\n  hsv: HsvColor;\n  /** Writes the working color from a bound part and reports its hex (only when the hex changes). */\n  setHsv: (next: HsvColor) => void;\n  /** The picker's value as given: a hex string, or a value that is not one (as given). */\n  color: string;\n  /** The value parsed (`#rrggbb` and the alpha byte), `null` while it is not a hex color. */\n  parsed: HexColor | null;\n  /** Writes the value as hex text (the hex field). */\n  setColor: (next: string) => void;\n  /** Applies a preset's `#rrggbb` at the current opacity and drops the hex field's draft. */\n  pickPreset: (rgb: string) => void;\n  /** The picker's presets as swatch items (values are `#rrggbb`). */\n  presetItems: readonly SwatchItem[];\n  /** The picker's `shape`, inherited by the bound parts and `ColorPicker.Preview`. */\n  shape: ColorPickerShape;\n  /** The picker's labels with every string default filled in. */\n  labels: ResolvedColorPickerLabels;\n  /** `true` while the value is not a hex color: the bound parts are disabled until one arrives. */\n  disabled: boolean;\n  /** Changes whenever the hex field must drop its draft: a form reset or a preset pick. */\n  draftResetKey: number;\n  /** The Field around the picker (its parts render in a `null` Field context). */\n  field: FieldContextValue | null;\n  /** The invalid state set on the picker from outside (its `aria-invalid` or the Field's), as given. */\n  groupInvalid: React.AriaAttributes['aria-invalid'];\n  /** The consumer's `aria-errormessage`, routed to the hex field while that state is set. */\n  errorMessageId: string | undefined;\n  /** The hex field registers its `<input>` here (the hidden input's `onInvalid` focuses it). */\n  registerHexInput: (input: HTMLInputElement | null) => void;\n}\n\nexport const ColorPickerContext = React.createContext<ColorPickerContextValue | null>(null);\nColorPickerContext.displayName = 'ColorPickerContext';\n\n/** The enclosing ColorPicker's context, or `null` outside one (the standalone parts need none). */\nexport function useColorPickerContext(): ColorPickerContextValue | null {\n  return React.useContext(ColorPickerContext);\n}\n\n/** What a color part passes to {@link useColorPartState}. */\nexport interface ColorPartOptions {\n  value: HsvColor | undefined;\n  defaultValue: HsvColor | undefined;\n  onValueChange: ((value: HsvColor) => void) | undefined;\n  disabled: boolean;\n}\n\n/** Where a color part's color lives: in the enclosing picker (bound) or in the part. */\nexport interface ColorPartState {\n  /** The enclosing picker when the part binds to it, else `null`. */\n  picker: ColorPickerContextValue | null;\n  /** The color as given (bound: the picker's working color). */\n  color: HsvColor;\n  /**\n   * Writes a new color. Bound: the picker's working color, then the part's own `onValueChange`\n   * (a part given only the callback listens; C-NAMING). Otherwise the part's state, through\n   * `useControllable`.\n   */\n  setColor: (next: HsvColor) => void;\n  /** Restores `defaultValue` on a form reset, reporting only a real change; nothing while bound. */\n  reset: () => void;\n  /** The part's `disabled`, or the picker's disabled state while bound. */\n  disabled: boolean;\n}\n\nconst noop = () => {};\n\n/**\n * The binding rule of `ColorArea`, `ColorSlider` and `AlphaSlider` (D21): inside a ColorPicker, a\n * part with neither `value` nor `defaultValue` reads and writes the picker's working color;\n * anywhere else, or with either prop, it keeps its own color.\n */\nexport function useColorPartState({\n  value,\n  defaultValue,\n  onValueChange,\n  disabled,\n}: ColorPartOptions): ColorPartState {\n  const context = useColorPickerContext();\n  const picker =\n    context !== null && value === undefined && defaultValue === undefined ? context : null;\n  const initial = defaultValue ?? DEFAULT_PART_COLOR;\n  const [own, setOwn] = useControllable(value, initial, picker ? undefined : onValueChange);\n  if (picker) {\n    return {\n      picker,\n      color: picker.hsv,\n      setColor: (next) => {\n        picker.setHsv(next);\n        onValueChange?.(next);\n      },\n      reset: noop,\n      disabled: disabled || picker.disabled,\n    };\n  }\n  return {\n    picker: null,\n    color: own,\n    setColor: setOwn,\n    reset: () => {\n      if (!sameColor(own, initial)) setOwn(initial);\n    },\n    disabled,\n  };\n}\n\n// ---------------------------------------------------------------------------------------------\n// The picker-only parts: ColorPicker.HexField, ColorPicker.Swatches, ColorPicker.Preview\n// ---------------------------------------------------------------------------------------------\n\n/** The context a misplaced part renders with in production (C-CONTEXT). */\nconst INERT_PICKER_CONTEXT: ColorPickerContextValue = {\n  hsv: DEFAULT_PART_COLOR,\n  setHsv: noop,\n  color: DEFAULT_COLOR,\n  parsed: null,\n  setColor: noop,\n  pickPreset: noop,\n  presetItems: [],\n  shape: 'rounded',\n  labels: DEFAULT_COLOR_PICKER_LABELS,\n  disabled: true,\n  draftResetKey: 0,\n  field: null,\n  groupInvalid: undefined,\n  errorMessageId: undefined,\n  registerHexInput: noop,\n};\n\n/**\n * The context of a picker-only part: throws `[WaveUI] <name> must be used within <ColorPicker>`\n * in development; logs once and returns an inert value in production (C-CONTEXT).\n */\nexport function usePickerPartContext(componentName: string): ColorPickerContextValue {\n  const context = React.useContext(ColorPickerContext);\n  if (context) return context;\n  reportMissingContext(componentName, '<ColorPicker>');\n  return INERT_PICKER_CONTEXT;\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 * Properties for the ColorPickerHexField sub-component. `id`, the labelling and validation\n * `aria-*` (`aria-label`, `aria-labelledby`, `aria-describedby`, `aria-invalid`,\n * `aria-errormessage`, `aria-details`, `aria-required`), `autoFocus`, `tabIndex`, the focus and key\n * handlers and the text-entry attributes (`inputMode`, `enterKeyHint`, `autoCapitalize`,\n * `autoCorrect`, `spellCheck`) go to the `<input>`; everything else stays on the outer label.\n */\nexport interface ColorPickerHexFieldProps extends React.HTMLAttributes<HTMLElement> {\n  /** Ref to the hex `<input>`. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the field's outer element: the label around the caption, the input and the error. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * The hex text field of a ColorPicker: a caption, the input and its error. The text is a draft:\n * complete 6- and 8-digit values apply while typing, text that can never be a hex color is\n * flagged at once, and leaving the field (or Enter) applies a short `#rgb`/`#rgba` and shows the\n * value again; other text stays flagged until it is corrected, cleared, or the value changes from\n * elsewhere (a preset, another part, the parent, a form reset). Inside a Field it carries the\n * Field's invalid state and error. Must be inside a ColorPicker. Also exported as\n * `ColorPickerHexField` (import the flat name in React Server Components).\n */\nexport const ColorPickerHexField = ({\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-required': ariaRequired,\n  autoFocus,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  inputMode,\n  enterKeyHint,\n  autoCapitalize,\n  autoCorrect,\n  spellCheck,\n  controlRef,\n  className,\n  ref,\n  ...rest\n}: ColorPickerHexFieldProps) => {\n  const picker = usePickerPartContext('ColorPicker.HexField');\n  const { color, parsed, field, groupInvalid, errorMessageId, labels } = picker;\n  const alpha = parsed?.alpha ?? 255;\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 replaces a flagged draft (input-pickers#25); while the user\n  // 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  // A form reset or a preset pick drops any draft.\n  const [seenResetKey, setSeenResetKey] = React.useState(picker.draftResetKey);\n  if (picker.draftResetKey !== seenResetKey) {\n    setSeenResetKey(picker.draftResetKey);\n    setDraft(null);\n  }\n  const hexText = draft?.text ?? color;\n  const draftInvalid =\n    draft !== null && !isBlankDraft(draft.text) && (draft.flagged || !isHexDraft(draft.text));\n  // Any invalid state from outside (the picker's prop or the Field) is set on the input as is;\n  // only `true` shows the error look.\n  const fieldInvalid =\n    groupInvalid !== undefined && groupInvalid !== false && groupInvalid !== 'false';\n  const errorId = useId('wave-color-picker-error');\n  const resolvedInvalid =\n    ariaInvalid ?? (draftInvalid ? true : fieldInvalid ? groupInvalid : undefined);\n  const invalidLook = isInvalidLook(false, resolvedInvalid);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef, picker.registerHexInput);\n\n  /** The single commit path: every edit is `#rrggbb` + an alpha byte. */\n  const commit = (rgb: string, nextAlpha: number) =>\n    picker.setColor(formatHexColor(rgb, nextAlpha));\n\n  const handleChange = (event: 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 = event.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 draft when the field is left or Enter is pressed. */\n  const finishDraft = () => {\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 values were\n      // applied while typing, so a rejecting parent is not asked twice. Then the field shows the\n      // 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 thrown away (WCAG 3.3.1).\n    setDraft({ text: draft.text, flagged: true });\n  };\n\n  const handleBlur = composeEventHandlers(onBlur, finishDraft);\n  // Not prevented: Enter still submits the surrounding form, with the color just applied.\n  const handleKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Enter' && !event.nativeEvent.isComposing) finishDraft();\n    },\n  );\n\n  return (\n    <label\n      ref={ref}\n      className={cn(colorPickerHexFieldClassNames.root, 'flex min-w-0 flex-col gap-1', className)}\n      {...rest}\n    >\n      <span\n        className={cn(colorPickerHexFieldClassNames.label, 'text-caption-1 text-muted-foreground')}\n      >\n        {labels.hex}\n      </span>\n      <input\n        ref={mergedInputRef}\n        id={id}\n        type=\"text\"\n        value={hexText}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onKeyUp={onKeyUp}\n        onFocus={onFocus}\n        onBlur={handleBlur}\n        aria-label={ariaLabel ?? (ariaLabelledBy === undefined ? labels.hexInput : undefined)}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={resolvedInvalid}\n        aria-errormessage={ariaErrorMessage ?? errorMessageId}\n        aria-describedby={joinIds(\n          draftInvalid && errorId,\n          field?.validationMessageId ?? (fieldInvalid ? field?.errorId : undefined),\n          errorMessageId,\n          ariaDescribedBy,\n        )}\n        aria-details={ariaDetails}\n        aria-required={ariaRequired}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        inputMode={inputMode}\n        enterKeyHint={enterKeyHint}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        spellCheck={spellCheck ?? false}\n        maxLength={9}\n        autoComplete=\"off\"\n        className={cn(\n          colorPickerHexFieldClassNames.input,\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          invalidLook && inputInvalid,\n        )}\n      />\n      {draftInvalid && (\n        <span\n          id={errorId}\n          className={cn(colorPickerHexFieldClassNames.errorMessage, 'text-caption-1 text-error')}\n        >\n          {labels.hexError}\n        </span>\n      )}\n    </label>\n  );\n};\n\nColorPickerHexField.displayName = 'ColorPickerHexField';\n\n/** Properties for the ColorPickerSwatches sub-component: the picker's `presets` as a SwatchPicker. */\nexport type ColorPickerSwatchesProps = Omit<\n  SwatchPickerProps,\n  'items' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'name' | 'form' | 'required'\n>;\n\n/**\n * The picker's `presets` as swatches (a SwatchPicker named by `labels.presets`, small and rounded\n * unless you pass `size` or `shape`). Picking one keeps the opacity. Renders nothing without\n * presets. Must be inside a ColorPicker. Also exported as `ColorPickerSwatches`.\n */\nexport const ColorPickerSwatches = ({\n  className,\n  'aria-label': ariaLabel,\n  size = 'small',\n  shape = 'rounded',\n  ...rest\n}: ColorPickerSwatchesProps) => {\n  const picker = usePickerPartContext('ColorPicker.Swatches');\n  if (picker.presetItems.length === 0) return null;\n  return (\n    <SwatchPicker\n      aria-label={\n        ariaLabel ?? (rest['aria-labelledby'] === undefined ? picker.labels.presets : undefined)\n      }\n      size={size}\n      shape={shape}\n      {...rest}\n      className={cn(colorPickerSwatchesClassNames.root, className)}\n      items={picker.presetItems}\n      value={picker.parsed ? picker.parsed.rgb : ''}\n      onValueChange={picker.pickPreset}\n    />\n  );\n};\n\nColorPickerSwatches.displayName = 'ColorPickerSwatches';\n\n/** Properties for the ColorPickerPreview sub-component. */\nexport interface ColorPickerPreviewProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * A swatch of the picker's current color (decorative, `aria-hidden`); it keeps its color in forced\n * colors and follows the picker's `shape`. Must be inside a ColorPicker. Also exported as\n * `ColorPickerPreview`.\n */\nexport const ColorPickerPreview = ({ className, style, ref, ...rest }: ColorPickerPreviewProps) => {\n  const picker = usePickerPartContext('ColorPicker.Preview');\n  const shown = picker.parsed\n    ? formatHexColor(picker.parsed.rgb, picker.parsed.alpha)\n    : picker.color;\n  return (\n    <div\n      data-color-preview=\"\"\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        colorPickerPreviewClassNames.root,\n        'h-10 w-10 shrink-0 rounded border border-border forced-colors:forced-color-adjust-none',\n        picker.shape === 'square' && 'rounded-none',\n        className,\n      )}\n      style={{ ...style, backgroundColor: shown }}\n    />\n  );\n};\n\nColorPickerPreview.displayName = 'ColorPickerPreview';\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.parts.mjs","names":["useId","useId$1","React","DEFAULT_COLOR","DEFAULT_PART_COLOR","DEFAULT_COLOR_PICKER_LABELS","ColorPickerContext","useColorPickerContext","noop","useColorPartState","context","picker","value","defaultValue","initial","own","setOwn","useControllable","onValueChange","next","disabled","sameColor","INERT_PICKER_CONTEXT","usePickerPartContext","reportMissingContext","componentName","isBlankDraft","trimmed","text","hasAlphaDigits","digits","ColorPickerHexField","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaErrorMessage","ariaDetails","ariaRequired","rest","alpha","parsed","draft","setDraft","syncedColor","setSyncedColor","color","seenResetKey","setSeenResetKey","hexText","draftInvalid","isHexDraft","fieldInvalid","groupInvalid","errorId","resolvedInvalid","invalidLook","isInvalidLook","inputRef","mergedInputRef","useMergedRefs","controlRef","commit","formatHexColor","rgb","nextAlpha","handleChange","event","typed","parseHexInput","finishDraft","parseHexColor","handleBlur","composeEventHandlers","onBlur","handleKeyDown","onKeyDown","cn","colorPickerHexFieldClassNames","className","labels","errorMessageId","joinIds","field","spellCheck","inputFocus","ColorPickerSwatches","SwatchPicker","colorPickerSwatchesClassNames","ColorPickerPreview","shown","colorPickerPreviewClassNames","style"],"sources":["../../../src/components/input/ColorPicker.parts.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useControllable } from '../../hooks/useControllable';\nimport type { FieldContextValue } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { joinIds } from '../../lib/aria';\nimport {\n  colorPickerHexFieldClassNames,\n  colorPickerPreviewClassNames,\n  colorPickerSwatchesClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { reportMissingContext } from '../../lib/dev';\nimport { inputFocus, inputInvalid } from '../../lib/styles';\nimport type { ColorPickerShape, HsvColor } from '../../lib/types';\nimport { isInvalidLook } from './Input';\nimport { SwatchPicker, type SwatchItem, type SwatchPickerProps } from './SwatchPicker';\nimport {\n  formatHexColor,\n  isHexDraft,\n  parseHexColor,\n  parseHexInput,\n  sameColor,\n  type HexColor,\n} from './colorUtils';\n\n/*\n * The picker's labels and context, and how the standalone color parts bind to it (spec P3-05,\n * D21). `ColorArea`, `ColorSlider` and `AlphaSlider` read the context; `ColorPicker.tsx` provides\n * it and renders the picker-only parts. This module never imports `ColorPicker.tsx`.\n */\n\n// wave-allow-color: default color value (user color data, C-TOKENS exception)\nexport const DEFAULT_COLOR = '#0f6cbd';\n\n/** The default color of a standalone part: the default picker color in HSV. */\nexport const DEFAULT_PART_COLOR: HsvColor = { h: 208, s: 0.92, v: 0.74 };\n\n/**\n * Texts of the ColorPicker's own parts and of the color parts bound to it, for localisation.\n * Every key is optional; missing keys use 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 of the opacity row and accessible name of the opacity slider (a bound\n   * `AlphaSlider`).\n   * @default 'Opacity'\n   */\n  opacity?: string;\n  /** Accessible name of a bound `ColorArea`'s group.\n   * @default 'Saturation and brightness'\n   */\n  area?: string;\n  /** Name of a bound area's saturation slider and of a bound `channel=\"saturation\"` slider.\n   * @default 'Saturation'\n   */\n  saturation?: string;\n  /** Name of a bound area's brightness slider and of a bound `channel=\"value\"` slider.\n   * @default 'Brightness'\n   */\n  brightness?: string;\n  /** Role description of a bound area's two sliders.\n   * @default '2D slider'\n   */\n  roleDescription?: string;\n  /** Name of a bound hue slider.\n   * @default 'Hue'\n   */\n  hue?: string;\n  /** Name of a bound `AlphaSlider` with `transparency`.\n   * @default 'Transparency'\n   */\n  transparency?: string;\n  /** Names the color at the end of the bound parts' value texts; return `''` to leave it out.\n   * @default an English namer (\"dark blue\")\n   */\n  colorName?: (color: HsvColor) => string;\n  /** Replaces a whole value text of a bound part, for languages whose order differs. */\n  valueText?: (color: HsvColor, channel: 'hue' | 'saturation' | 'value' | 'alpha') => string;\n}\n\n/** The labels with every string default filled in (the two functions stay optional). */\nexport type ResolvedColorPickerLabels = Required<\n  Omit<ColorPickerLabels, 'colorName' | 'valueText'>\n> &\n  Pick<ColorPickerLabels, 'colorName' | 'valueText'>;\n\nexport const DEFAULT_COLOR_PICKER_LABELS: ResolvedColorPickerLabels = {\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  area: 'Saturation and brightness',\n  saturation: 'Saturation',\n  brightness: 'Brightness',\n  roleDescription: '2D slider',\n  hue: 'Hue',\n  transparency: 'Transparency',\n};\n\n/** What a ColorPicker shares with its parts and with the color parts bound to it. */\nexport interface ColorPickerContextValue {\n  /** The working color: HSV, so hue and saturation survive gray, white and black. */\n  hsv: HsvColor;\n  /** Writes the working color from a bound part and reports its hex (only when the hex changes). */\n  setHsv: (next: HsvColor) => void;\n  /** The picker's value as given: a hex string, or a value that is not one (as given). */\n  color: string;\n  /** The value parsed (`#rrggbb` and the alpha byte), `null` while it is not a hex color. */\n  parsed: HexColor | null;\n  /** Writes the value as hex text (the hex field). */\n  setColor: (next: string) => void;\n  /** Applies a preset's `#rrggbb` at the current opacity and drops the hex field's draft. */\n  pickPreset: (rgb: string) => void;\n  /** The picker's presets as swatch items (values are `#rrggbb`). */\n  presetItems: readonly SwatchItem[];\n  /** The picker's `shape`, inherited by the bound parts and `ColorPicker.Preview`. */\n  shape: ColorPickerShape;\n  /** The picker's labels with every string default filled in. */\n  labels: ResolvedColorPickerLabels;\n  /** `true` while the value is not a hex color: the bound parts are disabled until one arrives. */\n  disabled: boolean;\n  /** Changes whenever the hex field must drop its draft: a form reset or a preset pick. */\n  draftResetKey: number;\n  /** The Field around the picker (its parts render in a `null` Field context). */\n  field: FieldContextValue | null;\n  /** The invalid state set on the picker from outside (its `aria-invalid` or the Field's), as given. */\n  groupInvalid: React.AriaAttributes['aria-invalid'];\n  /** The consumer's `aria-errormessage`, routed to the hex field while that state is set. */\n  errorMessageId: string | undefined;\n  /** The hex field registers its `<input>` here (the hidden input's `onInvalid` focuses it). */\n  registerHexInput: (input: HTMLInputElement | null) => void;\n}\n\nexport const ColorPickerContext = React.createContext<ColorPickerContextValue | null>(null);\nColorPickerContext.displayName = 'ColorPickerContext';\n\n/** The enclosing ColorPicker's context, or `null` outside one (the standalone parts need none). */\nexport function useColorPickerContext(): ColorPickerContextValue | null {\n  return React.useContext(ColorPickerContext);\n}\n\n/** What a color part passes to {@link useColorPartState}. */\nexport interface ColorPartOptions {\n  value: HsvColor | undefined;\n  defaultValue: HsvColor | undefined;\n  onValueChange: ((value: HsvColor) => void) | undefined;\n  disabled: boolean;\n}\n\n/** Where a color part's color lives: in the enclosing picker (bound) or in the part. */\nexport interface ColorPartState {\n  /** The enclosing picker when the part binds to it, else `null`. */\n  picker: ColorPickerContextValue | null;\n  /** The color as given (bound: the picker's working color). */\n  color: HsvColor;\n  /**\n   * Writes a new color. Bound: the picker's working color, then the part's own `onValueChange`\n   * (a part given only the callback listens; C-NAMING). Otherwise the part's state, through\n   * `useControllable`.\n   */\n  setColor: (next: HsvColor) => void;\n  /** Restores `defaultValue` on a form reset, reporting only a real change; nothing while bound. */\n  reset: () => void;\n  /** The part's `disabled`, or the picker's disabled state while bound. */\n  disabled: boolean;\n}\n\nconst noop = () => {};\n\n/**\n * The binding rule of `ColorArea`, `ColorSlider` and `AlphaSlider` (D21): inside a ColorPicker, a\n * part with neither `value` nor `defaultValue` reads and writes the picker's working color;\n * anywhere else, or with either prop, it keeps its own color.\n */\nexport function useColorPartState({\n  value,\n  defaultValue,\n  onValueChange,\n  disabled,\n}: ColorPartOptions): ColorPartState {\n  const context = useColorPickerContext();\n  const picker =\n    context !== null && value === undefined && defaultValue === undefined ? context : null;\n  const initial = defaultValue ?? DEFAULT_PART_COLOR;\n  const [own, setOwn] = useControllable(value, initial, picker ? undefined : onValueChange);\n  if (picker) {\n    return {\n      picker,\n      color: picker.hsv,\n      setColor: (next) => {\n        picker.setHsv(next);\n        onValueChange?.(next);\n      },\n      reset: noop,\n      disabled: disabled || picker.disabled,\n    };\n  }\n  return {\n    picker: null,\n    color: own,\n    setColor: setOwn,\n    reset: () => {\n      if (!sameColor(own, initial)) setOwn(initial);\n    },\n    disabled,\n  };\n}\n\n// ---------------------------------------------------------------------------------------------\n// The picker-only parts: ColorPicker.HexField, ColorPicker.Swatches, ColorPicker.Preview\n// ---------------------------------------------------------------------------------------------\n\n/** The context a misplaced part renders with in production (C-CONTEXT). */\nconst INERT_PICKER_CONTEXT: ColorPickerContextValue = {\n  hsv: DEFAULT_PART_COLOR,\n  setHsv: noop,\n  color: DEFAULT_COLOR,\n  parsed: null,\n  setColor: noop,\n  pickPreset: noop,\n  presetItems: [],\n  shape: 'rounded',\n  labels: DEFAULT_COLOR_PICKER_LABELS,\n  disabled: true,\n  draftResetKey: 0,\n  field: null,\n  groupInvalid: undefined,\n  errorMessageId: undefined,\n  registerHexInput: noop,\n};\n\n/**\n * The context of a picker-only part: throws `[WaveUI] <name> must be used within <ColorPicker>`\n * in development; logs once and returns an inert value in production (C-CONTEXT).\n */\nexport function usePickerPartContext(componentName: string): ColorPickerContextValue {\n  const context = React.useContext(ColorPickerContext);\n  if (context) return context;\n  reportMissingContext(componentName, '<ColorPicker>');\n  return INERT_PICKER_CONTEXT;\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 * Properties for the ColorPickerHexField sub-component. `id`, the labelling and validation\n * `aria-*` (`aria-label`, `aria-labelledby`, `aria-describedby`, `aria-invalid`,\n * `aria-errormessage`, `aria-details`, `aria-required`), `autoFocus`, `tabIndex`, the focus and key\n * handlers and the text-entry attributes (`inputMode`, `enterKeyHint`, `autoCapitalize`,\n * `autoCorrect`, `spellCheck`) go to the `<input>`; everything else stays on the outer label.\n */\nexport interface ColorPickerHexFieldProps extends React.HTMLAttributes<HTMLElement> {\n  /** Ref to the hex `<input>`. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the field's outer element: the label around the caption, the input and the error. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * The hex text field of a ColorPicker: a caption, the input and its error. The text is a draft:\n * complete 6- and 8-digit values apply while typing, text that can never be a hex color is\n * flagged at once, and leaving the field (or Enter) applies a short `#rgb`/`#rgba` and shows the\n * value again; other text stays flagged until it is corrected, cleared, or the value changes from\n * elsewhere (a preset, another part, the parent, a form reset). Inside a Field it carries the\n * Field's invalid state and error. Must be inside a ColorPicker. Also exported as\n * `ColorPickerHexField` (import the flat name in React Server Components).\n */\nexport const ColorPickerHexField = ({\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-required': ariaRequired,\n  autoFocus,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  inputMode,\n  enterKeyHint,\n  autoCapitalize,\n  autoCorrect,\n  spellCheck,\n  controlRef,\n  className,\n  ref,\n  ...rest\n}: ColorPickerHexFieldProps) => {\n  const picker = usePickerPartContext('ColorPicker.HexField');\n  const { color, parsed, field, groupInvalid, errorMessageId, labels } = picker;\n  const alpha = parsed?.alpha ?? 255;\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 replaces a flagged draft (input-pickers#25); while the user\n  // 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  // A form reset or a preset pick drops any draft.\n  const [seenResetKey, setSeenResetKey] = React.useState(picker.draftResetKey);\n  if (picker.draftResetKey !== seenResetKey) {\n    setSeenResetKey(picker.draftResetKey);\n    setDraft(null);\n  }\n  const hexText = draft?.text ?? color;\n  const draftInvalid =\n    draft !== null && !isBlankDraft(draft.text) && (draft.flagged || !isHexDraft(draft.text));\n  // Any invalid state from outside (the picker's prop or the Field) is set on the input as is;\n  // only `true` shows the error look.\n  const fieldInvalid =\n    groupInvalid !== undefined && groupInvalid !== false && groupInvalid !== 'false';\n  const errorId = useId('wave-color-picker-error');\n  const resolvedInvalid =\n    ariaInvalid ?? (draftInvalid ? true : fieldInvalid ? groupInvalid : undefined);\n  const invalidLook = isInvalidLook(false, resolvedInvalid);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef, picker.registerHexInput);\n\n  /** The single commit path: every edit is `#rrggbb` + an alpha byte. */\n  const commit = (rgb: string, nextAlpha: number) =>\n    picker.setColor(formatHexColor(rgb, nextAlpha));\n\n  const handleChange = (event: 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 = event.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 draft when the field is left or Enter is pressed. */\n  const finishDraft = () => {\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 values were\n      // applied while typing, so a rejecting parent is not asked twice. Then the field shows the\n      // 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 thrown away (WCAG 3.3.1).\n    setDraft({ text: draft.text, flagged: true });\n  };\n\n  const handleBlur = composeEventHandlers(onBlur, finishDraft);\n  // Not prevented: Enter still submits the surrounding form, with the color just applied.\n  const handleKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (event.key === 'Enter' && !event.nativeEvent.isComposing) finishDraft();\n    },\n  );\n\n  return (\n    <label\n      ref={ref}\n      className={cn(colorPickerHexFieldClassNames.root, 'flex min-w-0 flex-col gap-1', className)}\n      {...rest}\n    >\n      <span\n        className={cn(colorPickerHexFieldClassNames.label, 'text-caption-1 text-muted-foreground')}\n      >\n        {labels.hex}\n      </span>\n      <input\n        ref={mergedInputRef}\n        id={id}\n        type=\"text\"\n        value={hexText}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onKeyUp={onKeyUp}\n        onFocus={onFocus}\n        onBlur={handleBlur}\n        aria-label={ariaLabel ?? (ariaLabelledBy === undefined ? labels.hexInput : undefined)}\n        aria-labelledby={ariaLabelledBy}\n        aria-invalid={resolvedInvalid}\n        aria-errormessage={ariaErrorMessage ?? errorMessageId}\n        aria-describedby={joinIds(\n          draftInvalid && errorId,\n          field?.validationMessageId ?? (fieldInvalid ? field?.errorId : undefined),\n          errorMessageId,\n          ariaDescribedBy,\n        )}\n        aria-details={ariaDetails}\n        aria-required={ariaRequired}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        inputMode={inputMode}\n        enterKeyHint={enterKeyHint}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        spellCheck={spellCheck ?? false}\n        maxLength={9}\n        autoComplete=\"off\"\n        className={cn(\n          colorPickerHexFieldClassNames.input,\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          invalidLook && inputInvalid,\n        )}\n      />\n      {draftInvalid && (\n        <span\n          id={errorId}\n          className={cn(colorPickerHexFieldClassNames.errorMessage, 'text-caption-1 text-error')}\n        >\n          {labels.hexError}\n        </span>\n      )}\n    </label>\n  );\n};\n\nColorPickerHexField.displayName = 'ColorPickerHexField';\n\n/** Properties for the ColorPickerSwatches sub-component: the picker's `presets` as a SwatchPicker. */\nexport type ColorPickerSwatchesProps = Omit<\n  SwatchPickerProps,\n  'items' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'name' | 'form' | 'required'\n>;\n\n/**\n * The picker's `presets` as swatches (a SwatchPicker named by `labels.presets`, small and rounded\n * unless you pass `size` or `shape`). Picking one keeps the opacity. Renders nothing without\n * presets. Must be inside a ColorPicker. Also exported as `ColorPickerSwatches`.\n */\nexport const ColorPickerSwatches = ({\n  className,\n  'aria-label': ariaLabel,\n  size = 'small',\n  shape = 'rounded',\n  ...rest\n}: ColorPickerSwatchesProps) => {\n  const picker = usePickerPartContext('ColorPicker.Swatches');\n  if (picker.presetItems.length === 0) return null;\n  return (\n    <SwatchPicker\n      aria-label={\n        ariaLabel ?? (rest['aria-labelledby'] === undefined ? picker.labels.presets : undefined)\n      }\n      size={size}\n      shape={shape}\n      {...rest}\n      className={cn(colorPickerSwatchesClassNames.root, className)}\n      items={picker.presetItems}\n      value={picker.parsed ? picker.parsed.rgb : ''}\n      onValueChange={picker.pickPreset}\n    />\n  );\n};\n\nColorPickerSwatches.displayName = 'ColorPickerSwatches';\n\n/** Properties for the ColorPickerPreview sub-component. */\nexport interface ColorPickerPreviewProps extends React.HTMLAttributes<HTMLDivElement> {\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * A swatch of the picker's current color (decorative, `aria-hidden`); it keeps its color in forced\n * colors and follows the picker's `shape`. Must be inside a ColorPicker. Also exported as\n * `ColorPickerPreview`.\n */\nexport const ColorPickerPreview = ({ className, style, ref, ...rest }: ColorPickerPreviewProps) => {\n  const picker = usePickerPartContext('ColorPicker.Preview');\n  const shown = picker.parsed\n    ? formatHexColor(picker.parsed.rgb, picker.parsed.alpha)\n    : picker.color;\n  return (\n    <div\n      data-color-preview=\"\"\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        colorPickerPreviewClassNames.root,\n        'h-10 w-10 shrink-0 rounded border border-border forced-colors:forced-color-adjust-none',\n        picker.shape === 'square' && 'rounded-none',\n        className,\n      )}\n      style={{ ...style, backgroundColor: shown }}\n    />\n  );\n};\n\nColorPickerPreview.displayName = 'ColorPickerPreview';\n"],"mappings":"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"}

package/dist/components/input/Combobox.cjs

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

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

@@ -1 +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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"}
+{"version":3,"file":"Combobox.cjs","names":["useFieldContext","useFieldControl","isInvalidLook","useInputLook","useControllable","React","collectOptionLabels","useListbox","useListboxPopup","useMergedRefs","showsExpandButton","cn","comboboxClassNames","composeEventHandlers","inputHeightClasses","inputPaddingClasses","inputTextClasses","inputAppearanceClasses","inputFocus","disabledStyles","pickerEndPadding","pickerIconButtonClasses","pickerButtonOffset","DismissIcon","pickerGlyphSize","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_inputLook","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","sizeProp","appearanceProp","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","size","appearance","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 {\n  disabledStyles,\n  focusRing,\n  inputAppearanceClasses,\n  inputFocus,\n  inputHeightClasses,\n  inputInvalid,\n  inputPaddingClasses,\n  inputTextClasses,\n} from '../../lib/styles';\nimport type { CoreSize, InputAppearance } from '../../lib/types';\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 { useInputLook } from './inputLook';\nimport { isInvalidLook } from './Input';\nimport { ListboxSurface, Option, OptionGroup, useListboxPopup } from './Option';\nimport {\n  pickerButtonOffset,\n  pickerEndPadding,\n  pickerGlyphSize,\n  pickerIconButtonClasses,\n} 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   * Size of the field: `small` (24px tall), `medium` (32px) or `large` (40px). Default: the\n   * surrounding Field's `size`, else `WaveProvider inputDefaults.size`, else `'medium'`. The\n   * listbox keeps its size.\n   */\n  size?: CoreSize;\n  /**\n   * Look of the field: `outline` (a full border), `underline` (a bottom stroke only),\n   * `filled-darker` or `filled-lighter` (a fill without a visible stroke: give the field a visible\n   * label). Default: `WaveProvider inputDefaults.appearance`, else `'outline'`.\n   */\n  appearance?: InputAppearance;\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    size: sizeProp,\n    appearance: appearanceProp,\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  const { size, appearance } = useInputLook(sizeProp, appearanceProp);\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      data-size={size}\n      data-appearance={appearance}\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            inputHeightClasses[size],\n            'w-full',\n            inputPaddingClasses[size],\n            inputTextClasses[size],\n            inputAppearanceClasses[appearance],\n            'text-foreground placeholder:text-muted-foreground',\n            inputFocus,\n            disabledStyles,\n            invalidLook && inputInvalid,\n            pickerEndPadding(Number(showClear) + Number(showExpand), size),\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              pickerIconButtonClasses(size, appearance),\n              pickerButtonOffset(size, showExpand ? 2 : 1),\n              focusRing,\n              disabledStyles,\n            )}\n          >\n            <DismissIcon size={pickerGlyphSize(size, 'icon')} />\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            size={size}\n            appearance={appearance}\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 * **Size and appearance**: `size` resolves from its own prop, then the surrounding `Field`'s\n * `size`, then `WaveProvider inputDefaults.size`, else `'medium'`; `appearance` from its own prop,\n * then `WaveProvider inputDefaults.appearance`, else `'outline'`; both render as `data-size` and\n * `data-appearance` on the root `<div>`. The listbox keeps its size.\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

@@ -1,2 +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;
+"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,size:g=`medium`,appearance:_=`outline`,className:v,iconClassName:y})=>{let{glyph:b,button:x}=a.unwrapButtonGlyph(u);c.useEffect(()=>{x&&n.warnOnce(`${e}:expandIcon-button`,`${e}: \`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,e]);let S=b!=null&&r.slotRendersContent(b)?b:(0,l.jsx)(o.ChevronDownIcon,{size:s.pickerGlyphSize(g,`chevron`)});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(v,s.pickerIconButtonClasses(g,_),s.pickerButtonOffset(g,1),i.focusRing,i.disabledStyles),children:r.renderSlot(S,`span`,t.cn(y,`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

@@ -1 +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"}
+{"version":3,"file":"Combobox.expand.cjs","names":["slotRendersContent","unwrapButtonGlyph","ChevronDownIcon","pickerGlyphSize","cn","pickerIconButtonClasses","pickerButtonOffset","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","size","label","expanded","listboxId","event","onToggle","className","appearance","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 type { CoreSize, InputAppearance } from '../../lib/types';\nimport { unwrapButtonGlyph } from '../button/Button.slots';\nimport { pickerButtonOffset, pickerGlyphSize, pickerIconButtonClasses } 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   * Size of the button box and its glyph (Phase 4 D11): the picker's resolved `size`.\n   * @default 'medium'\n   */\n  size?: CoreSize;\n  /**\n   * Appearance of the field the button sits in (Phase 4 D11): `filled-darker` gets a hover fill\n   * one step darker than the field.\n   * @default 'outline'\n   */\n  appearance?: InputAppearance;\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. `size` and\n * `appearance` (Phase 4 D11) default to `'medium'`/`'outline'` for a caller that has not resolved\n * them yet.\n */\nexport const PickerExpandButton = ({\n  component,\n  expandIcon,\n  label,\n  expanded,\n  listboxId,\n  disabled,\n  onToggle,\n  size = 'medium',\n  appearance = 'outline',\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 =\n    content != null && slotRendersContent(content) ? (\n      content\n    ) : (\n      <ChevronDownIcon size={pickerGlyphSize(size, 'chevron')} />\n    );\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(\n        className,\n        pickerIconButtonClasses(size, appearance),\n        pickerButtonOffset(size, 1),\n        focusRing,\n        disabledStyles,\n      )}\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":"wXAgBA,SAAgBoB,EAAkB,EAA+C,CAC/E,OAAOC,GAAc,MAAQrB,EAAAA,mBAAmBqB,CAAU,CAC5D,CA6CA,IAAaC,GAAsB,CACjC,YACA,aACA,QACA,WACA,YACA,WACA,WACA,OAAO,SACP,aAAa,UACb,YACA,mBAC6B,CAE7B,GAAM,CAAE,MAAOC,EAAS,UAAWtB,EAAAA,kBAAkBoB,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,EACJH,GAAW,MAAQvB,EAAAA,mBAAmBuB,CAAO,EAC3CA,GAEA,EAAAJ,EAAA,IAAA,CAACjB,EAAAA,gBAAD,CAAiB,KAAMC,EAAAA,gBAAgBwB,EAAM,SAAS,CAAI,CAAA,EAG9D,OACE,EAAAR,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAYS,EACZ,gBAAeC,EACf,gBAAeA,EAAWC,EAAY,IAAA,GAC5B,WAEV,YAAc,GAAUC,EAAM,eAAe,EAC7C,QAASC,EACT,UAAW5B,EAAAA,GACT6B,EACA5B,EAAAA,wBAAwBsB,EAAMO,CAAU,EACxC5B,EAAAA,mBAAmBqB,EAAM,CAAC,EAC1BpB,EAAAA,UACAC,EAAAA,cACF,EAEC,SAAAC,EAAAA,WACCiB,EACA,OACAtB,EAAAA,GACE+B,EACA,iEACAN,GAAY,YACd,EACA,CAAE,cAAe,EAAK,CACxB,CACM,CAAA,CAEZ,EACA,EAAmB,YAAc"}