@mortenbrudvik/waveui 0.7.0 → 0.8.0

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

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

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

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../lib/aria.cjs"),l=require("../../lib/styles.cjs"),u=require("./Input.cjs"),d=require("./colorUtils.cjs"),f=require("./SwatchPicker.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=`#0f6cbd`,g={h:208,s:.92,v:.74},_={hex:`Hex`,hexInput:`Hex color value`,hexError:`Enter a hex color such as ${h}.`,presets:`Preset colors`,opacity:`Opacity`,area:`Saturation and brightness`,saturation:`Saturation`,brightness:`Brightness`,roleDescription:`2D slider`,hue:`Hue`,transparency:`Transparency`},v=p.createContext(null);v.displayName=`ColorPickerContext`;function y(){return p.useContext(v)}var b=()=>{};function x({value:e,defaultValue:t,onValueChange:n,disabled:r}){let i=y(),o=i!==null&&e===void 0&&t===void 0?i:null,s=t??g,[c,l]=a.useControllable(e,s,o?void 0:n);return o?{picker:o,color:o.hsv,setColor:e=>{o.setHsv(e),n?.(e)},reset:b,disabled:r||o.disabled}:{picker:null,color:c,setColor:l,reset:()=>{d.sameColor(c,s)||l(s)},disabled:r}}var S={hsv:g,setHsv:b,color:h,parsed:null,setColor:b,pickPreset:b,presetItems:[],shape:`rounded`,labels:_,disabled:!0,draftResetKey:0,field:null,groupInvalid:void 0,errorMessageId:void 0,registerHexInput:b};function C(e){return p.useContext(v)||(n.reportMissingContext(e,`<ColorPicker>`),S)}function w(e){let t=e.trim();return t===``||t===`#`}function T(e){let t=e.trim().replace(/^#/,``).length;return t===4||t===8}var E=({id:e,"aria-label":n,"aria-labelledby":a,"aria-describedby":f,"aria-invalid":h,"aria-errormessage":g,"aria-details":_,"aria-required":v,autoFocus:y,tabIndex:b,onFocus:x,onBlur:S,onKeyDown:E,onKeyUp:D,inputMode:O,enterKeyHint:k,autoCapitalize:ee,autoCorrect:te,spellCheck:ne,controlRef:re,className:A,ref:j,...M})=>{let N=C(`ColorPicker.HexField`),{color:P,parsed:ie,field:F,groupInvalid:I,errorMessageId:L,labels:R}=N,z=ie?.alpha??255,[B,V]=p.useState(null),[H,U]=p.useState(P);P!==H&&(U(P),B?.flagged&&V(null));let[W,G]=p.useState(N.draftResetKey);N.draftResetKey!==W&&(G(N.draftResetKey),V(null));let K=B?.text??P,q=B!==null&&!w(B.text)&&(B.flagged||!d.isHexDraft(B.text)),J=I!==void 0&&I!==!1&&I!==`false`,Y=o.useId(`wave-color-picker-error`),X=h??(q?!0:J?I:void 0),ae=u.isInvalidLook(!1,X),oe=p.useRef(null),se=s.useMergedRefs(oe,re,N.registerHexInput),Z=(e,t)=>N.setColor(d.formatHexColor(e,t)),Q=e=>{let t=e.target.value.trim();t!==``&&!t.startsWith(`#`)&&(t=`#${t}`),V({text:t,flagged:!1});let n=d.parseHexInput(t);n&&Z(n.rgb,T(t)?n.alpha:z)},$=()=>{if(B===null||B.flagged)return;let e=d.parseHexColor(B.text);if(e||w(B.text)){e&&!d.parseHexInput(B.text)&&Z(e.rgb,T(B.text)?e.alpha:z),V(null);return}V({text:B.text,flagged:!0})},ce=r.composeEventHandlers(S,$),le=r.composeEventHandlers(E,e=>{e.key===`Enter`&&!e.nativeEvent.isComposing&&$()});return(0,m.jsxs)(`label`,{ref:j,className:t.cn(i.colorPickerHexFieldClassNames.root,`flex min-w-0 flex-col gap-1`,A),...M,children:[(0,m.jsx)(`span`,{className:t.cn(i.colorPickerHexFieldClassNames.label,`text-caption-1 text-muted-foreground`),children:R.hex}),(0,m.jsx)(`input`,{ref:se,id:e,type:`text`,value:K,onChange:Q,onKeyDown:le,onKeyUp:D,onFocus:x,onBlur:ce,"aria-label":n??(a===void 0?R.hexInput:void 0),"aria-labelledby":a,"aria-invalid":X,"aria-errormessage":g??L,"aria-describedby":c.joinIds(q&&Y,F?.validationMessageId??(J?F?.errorId:void 0),L,f),"aria-details":_,"aria-required":v,autoFocus:y,tabIndex:b,inputMode:O,enterKeyHint:k,autoCapitalize:ee,autoCorrect:te,spellCheck:ne??!1,maxLength:9,autoComplete:`off`,className:t.cn(i.colorPickerHexFieldClassNames.input,`w-24 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1 text-body-1 text-foreground`,l.inputFocus,ae&&`border-destructive focus:border-b-destructive`)}),q&&(0,m.jsx)(`span`,{id:Y,className:t.cn(i.colorPickerHexFieldClassNames.errorMessage,`text-caption-1 text-error`),children:R.hexError})]})};E.displayName=`ColorPickerHexField`;var D=({className:e,"aria-label":n,size:r=`small`,shape:a=`rounded`,...o})=>{let s=C(`ColorPicker.Swatches`);return s.presetItems.length===0?null:(0,m.jsx)(f.SwatchPicker,{"aria-label":n??(o[`aria-labelledby`]===void 0?s.labels.presets:void 0),size:r,shape:a,...o,className:t.cn(i.colorPickerSwatchesClassNames.root,e),items:s.presetItems,value:s.parsed?s.parsed.rgb:``,onValueChange:s.pickPreset})};D.displayName=`ColorPickerSwatches`;var O=({className:e,style:n,ref:r,...a})=>{let o=C(`ColorPicker.Preview`),s=o.parsed?d.formatHexColor(o.parsed.rgb,o.parsed.alpha):o.color;return(0,m.jsx)(`div`,{"data-color-preview":``,"aria-hidden":`true`,...a,ref:r,className:t.cn(i.colorPickerPreviewClassNames.root,`h-10 w-10 shrink-0 rounded border border-border forced-colors:forced-color-adjust-none`,o.shape===`square`&&`rounded-none`,e),style:{...n,backgroundColor:s}})};O.displayName=`ColorPickerPreview`,exports.ColorPickerContext=v,exports.ColorPickerHexField=E,exports.ColorPickerPreview=O,exports.ColorPickerSwatches=D,exports.DEFAULT_COLOR=h,exports.DEFAULT_COLOR_PICKER_LABELS=_,exports.DEFAULT_PART_COLOR=g,exports.useColorPartState=x,exports.useColorPickerContext=y,exports.usePickerPartContext=C;
+//# sourceMappingURL=ColorPicker.parts.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,192 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { reportMissingContext as t } from "../../lib/dev.mjs";
+import { composeEventHandlers as n } from "../../lib/composeEventHandlers.mjs";
+import { colorPickerHexFieldClassNames as r, colorPickerPreviewClassNames as i, colorPickerSwatchesClassNames as a } from "../../lib/classNames.mjs";
+import { useControllable as o } from "../../hooks/useControllable.mjs";
+import { useId as s } from "../../hooks/useId.mjs";
+import { useMergedRefs as c } from "../../hooks/useMergedRefs.mjs";
+import { joinIds as l } from "../../lib/aria.mjs";
+import { inputFocus as ee } from "../../lib/styles.mjs";
+import { isInvalidLook as u } from "./Input.mjs";
+import { formatHexColor as d, isHexDraft as te, parseHexColor as ne, parseHexInput as f, sameColor as p } from "./colorUtils.mjs";
+import { SwatchPicker as m } from "./SwatchPicker.mjs";
+import * as h from "react";
+import { jsx as g, jsxs as re } from "react/jsx-runtime";
+//#region src/components/input/ColorPicker.parts.tsx
+var _ = "#0f6cbd", v = {
+	h: 208,
+	s: .92,
+	v: .74
+}, y = {
+	hex: "Hex",
+	hexInput: "Hex color value",
+	hexError: `Enter a hex color such as ${_}.`,
+	presets: "Preset colors",
+	opacity: "Opacity",
+	area: "Saturation and brightness",
+	saturation: "Saturation",
+	brightness: "Brightness",
+	roleDescription: "2D slider",
+	hue: "Hue",
+	transparency: "Transparency"
+}, b = h.createContext(null);
+b.displayName = "ColorPickerContext";
+function x() {
+	return h.useContext(b);
+}
+var S = () => {};
+function C({ value: e, defaultValue: t, onValueChange: n, disabled: r }) {
+	let i = x(), a = i !== null && e === void 0 && t === void 0 ? i : null, s = t ?? v, [c, l] = o(e, s, a ? void 0 : n);
+	return a ? {
+		picker: a,
+		color: a.hsv,
+		setColor: (e) => {
+			a.setHsv(e), n?.(e);
+		},
+		reset: S,
+		disabled: r || a.disabled
+	} : {
+		picker: null,
+		color: c,
+		setColor: l,
+		reset: () => {
+			p(c, s) || l(s);
+		},
+		disabled: r
+	};
+}
+var w = {
+	hsv: v,
+	setHsv: S,
+	color: _,
+	parsed: null,
+	setColor: S,
+	pickPreset: S,
+	presetItems: [],
+	shape: "rounded",
+	labels: y,
+	disabled: !0,
+	draftResetKey: 0,
+	field: null,
+	groupInvalid: void 0,
+	errorMessageId: void 0,
+	registerHexInput: S
+};
+function T(e) {
+	return h.useContext(b) || (t(e, "<ColorPicker>"), w);
+}
+function E(e) {
+	let t = e.trim();
+	return t === "" || t === "#";
+}
+function D(e) {
+	let t = e.trim().replace(/^#/, "").length;
+	return t === 4 || t === 8;
+}
+var O = ({ id: t, "aria-label": i, "aria-labelledby": a, "aria-describedby": o, "aria-invalid": p, "aria-errormessage": m, "aria-details": _, "aria-required": v, autoFocus: y, tabIndex: b, onFocus: x, onBlur: S, onKeyDown: C, onKeyUp: w, inputMode: O, enterKeyHint: k, autoCapitalize: A, autoCorrect: j, spellCheck: M, controlRef: N, className: P, ref: F, ...ie }) => {
+	let I = T("ColorPicker.HexField"), { color: L, parsed: ae, field: R, groupInvalid: z, errorMessageId: B, labels: V } = I, H = ae?.alpha ?? 255, [U, W] = h.useState(null), [G, K] = h.useState(L);
+	L !== G && (K(L), U?.flagged && W(null));
+	let [q, oe] = h.useState(I.draftResetKey);
+	I.draftResetKey !== q && (oe(I.draftResetKey), W(null));
+	let se = U?.text ?? L, J = U !== null && !E(U.text) && (U.flagged || !te(U.text)), Y = z !== void 0 && z !== !1 && z !== "false", X = s("wave-color-picker-error"), Z = p ?? (J ? !0 : Y ? z : void 0), ce = u(!1, Z), le = h.useRef(null), ue = c(le, N, I.registerHexInput), Q = (e, t) => I.setColor(d(e, t)), de = (e) => {
+		let t = e.target.value.trim();
+		t !== "" && !t.startsWith("#") && (t = `#${t}`), W({
+			text: t,
+			flagged: !1
+		});
+		let n = f(t);
+		n && Q(n.rgb, D(t) ? n.alpha : H);
+	}, $ = () => {
+		if (U === null || U.flagged) return;
+		let e = ne(U.text);
+		if (e || E(U.text)) {
+			e && !f(U.text) && Q(e.rgb, D(U.text) ? e.alpha : H), W(null);
+			return;
+		}
+		W({
+			text: U.text,
+			flagged: !0
+		});
+	}, fe = n(S, $), pe = n(C, (e) => {
+		e.key === "Enter" && !e.nativeEvent.isComposing && $();
+	});
+	return /* @__PURE__ */ re("label", {
+		ref: F,
+		className: e(r.root, "flex min-w-0 flex-col gap-1", P),
+		...ie,
+		children: [
+			/* @__PURE__ */ g("span", {
+				className: e(r.label, "text-caption-1 text-muted-foreground"),
+				children: V.hex
+			}),
+			/* @__PURE__ */ g("input", {
+				ref: ue,
+				id: t,
+				type: "text",
+				value: se,
+				onChange: de,
+				onKeyDown: pe,
+				onKeyUp: w,
+				onFocus: x,
+				onBlur: fe,
+				"aria-label": i ?? (a === void 0 ? V.hexInput : void 0),
+				"aria-labelledby": a,
+				"aria-invalid": Z,
+				"aria-errormessage": m ?? B,
+				"aria-describedby": l(J && X, R?.validationMessageId ?? (Y ? R?.errorId : void 0), B, o),
+				"aria-details": _,
+				"aria-required": v,
+				autoFocus: y,
+				tabIndex: b,
+				inputMode: O,
+				enterKeyHint: k,
+				autoCapitalize: A,
+				autoCorrect: j,
+				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")
+			}),
+			J && /* @__PURE__ */ g("span", {
+				id: X,
+				className: e(r.errorMessage, "text-caption-1 text-error"),
+				children: V.hexError
+			})
+		]
+	});
+};
+O.displayName = "ColorPickerHexField";
+var k = ({ className: t, "aria-label": n, size: r = "small", shape: i = "rounded", ...o }) => {
+	let s = T("ColorPicker.Swatches");
+	return s.presetItems.length === 0 ? null : /* @__PURE__ */ g(m, {
+		"aria-label": n ?? (o["aria-labelledby"] === void 0 ? s.labels.presets : void 0),
+		size: r,
+		shape: i,
+		...o,
+		className: e(a.root, t),
+		items: s.presetItems,
+		value: s.parsed ? s.parsed.rgb : "",
+		onValueChange: s.pickPreset
+	});
+};
+k.displayName = "ColorPickerSwatches";
+var A = ({ className: t, style: n, ref: r, ...a }) => {
+	let o = T("ColorPicker.Preview"), s = o.parsed ? d(o.parsed.rgb, o.parsed.alpha) : o.color;
+	return /* @__PURE__ */ g("div", {
+		"data-color-preview": "",
+		"aria-hidden": "true",
+		...a,
+		ref: r,
+		className: e(i.root, "h-10 w-10 shrink-0 rounded border border-border forced-colors:forced-color-adjust-none", o.shape === "square" && "rounded-none", t),
+		style: {
+			...n,
+			backgroundColor: s
+		}
+	});
+};
+A.displayName = "ColorPickerPreview";
+//#endregion
+export { b as ColorPickerContext, O as ColorPickerHexField, A as ColorPickerPreview, k as ColorPickerSwatches, _ as DEFAULT_COLOR, y as DEFAULT_COLOR_PICKER_LABELS, v as DEFAULT_PART_COLOR, C as useColorPartState, x as useColorPickerContext, T as usePickerPartContext };
+
+//# sourceMappingURL=ColorPicker.parts.mjs.map

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

@@ -0,0 +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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"}

package/dist/components/input/ColorSlider.cjs

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

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

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