@mortenbrudvik/waveui 0.7.0 → 0.9.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.mjs","names":["React","DEFAULT_LABELS","clampPercent","value","COARSE_POINTER","ColorArea","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","rest","part","useColorPartState","strings","picker","labels","resolvedShape","shape","color","shown","displayColor","saturation","toPercent","brightness","activeAxis","setActiveAxis","coarsePointer","useMediaQuery","fieldRef","focusToken","setFocusToken","rootRef","saturationRef","brightnessRef","mergedRootRef","useMergedRefs","ref","mergedSaturationRef","controlRef","handledFocusTokenRef","field","useFieldContext","invalid","_ariaRequired","_required","groupProps","useFieldControl","errorMessageId","isRequired","required","form","applyAxis","percent","axis","handleKeyDown","composeEventHandlers","onKeyDown","isOwnEvent","event","step","next","intent","getArrowIntent","getDirection","token","handleInputChange","handleInputFocus","moveToPointer","useEventCallback","fieldElement","rect","x","s","v","focusActiveAxis","handlePointerDown","onPointerDown","handlePointerMove","onPointerMove","textLabels","areaStyle","style","colorAreaGradient","toPosition","hsvToHex","inputProps","tabIndex","cn","colorAreaClassNames","className","COLOR_THUMB_CLASSES","areaValueText","HiddenInput"],"sources":["../../../src/components/input/ColorArea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { colorAreaClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { hsvToHex } from '../../lib/color';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { isOwnEvent } from '../../lib/events';\nimport type { ColorPickerShape, HsvColor } from '../../lib/types';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { useColorPartState } from './ColorPicker.parts';\nimport {\n  COLOR_THUMB_CLASSES,\n  areaValueText,\n  colorAreaGradient,\n  displayColor,\n  toPercent,\n  toPosition,\n} from './colorUtils';\n\n/** Texts of a ColorArea, for localisation. Every key is optional. */\nexport interface ColorAreaLabels {\n  /** Name of the horizontal slider.\n   * @default 'Saturation'\n   */\n  saturation?: string;\n  /** Name of the vertical slider (the `value` channel).\n   * @default 'Brightness'\n   */\n  brightness?: string;\n  /** Role description of both sliders.\n   * @default '2D slider'\n   */\n  roleDescription?: string;\n  /** Names the color at the end of each value text; return `''` to leave it out.\n   * @default an English namer (\"dark blue\")\n   */\n  colorName?: (color: HsvColor) => string;\n  /** Replaces a whole value text, for languages whose order differs. */\n  valueText?: (color: HsvColor, channel: 'saturation' | 'value') => string;\n}\n\n/** Properties for the ColorArea component. */\nexport interface ColorAreaProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * The color (Fluent's `color`). Inside a ColorPicker, leave `value` and `defaultValue` out to\n   * bind the area 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, a pointer move or assistive technology) that\n   * changes it (Fluent's `onChange`). A bound area calls it too.\n   */\n  onValueChange?: (value: HsvColor) => void;\n  /**\n   * `'square'` removes the corner radius (the thumb stays round). Bound to a ColorPicker, the\n   * picker's shape unless you pass one.\n   * @default 'rounded'\n   */\n  shape?: ColorPickerShape;\n  /** Texts of the area; bound to a ColorPicker, the picker's `labels` fill the keys you leave out. */\n  labels?: ColorAreaLabels;\n  /**\n   * Unavailable: both inputs are natively disabled, pointer presses are ignored and the area is\n   * dimmed. A bound area is also 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 area 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 group supports neither, so neither is set on it.\n   */\n  required?: boolean;\n  /** Ref to the saturation `<input type=\"range\">`. */\n  controlRef?: React.Ref<HTMLInputElement>;\n  /** Ref to the root `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** The two axes: saturation (x) and brightness (y, the `value` channel). */\ntype AreaAxis = 'saturation' | 'value';\n\nconst DEFAULT_LABELS = {\n  saturation: 'Saturation',\n  brightness: 'Brightness',\n  roleDescription: '2D slider',\n} as const;\n\n/** A whole percentage clamped to 0–100. */\nfunction clampPercent(value: number): number {\n  return Math.min(100, Math.max(0, value));\n}\n\n/** Touch-primary devices expose both inputs, so a touch screen reader can swipe each (D19). */\nconst COARSE_POINTER = '(pointer: coarse)';\n\n/**\n * A 2-D color field: saturation from left to right (mirrored in right-to-left layouts) and\n * brightness from bottom to top, at the value's hue. ArrowLeft and ArrowRight move saturation by\n * 1 %, ArrowUp and ArrowDown brightness; Shift with an arrow moves by 10, Page Up and Page Down\n * move brightness by 10, and Home and End set saturation to 0 and 100. A press or drag (mouse,\n * touch or pen) moves the thumb to the pointer. It is one Tab stop holding two sliders for\n * assistive technology, \"Saturation\" and \"Brightness\", whose value texts start with their own\n * channel and name the color; focus follows the axis a key moves, and unless the primary pointer\n * is coarse (touch), only the slider with the Tab stop is exposed. Inside a ColorPicker, leave\n * `value` and `defaultValue` out and it binds to the picker. Fluent's\n * `ColorArea`, with `value`/`onValueChange` for its `color`/`onChange`.\n *\n * @example\n * <ColorArea aria-label=\"Accent color\" value={color} onValueChange={setColor} />\n */\nexport const ColorArea = ({\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  autoFocus,\n  tabIndex,\n  onKeyDown,\n  onPointerDown,\n  onPointerMove,\n  ref,\n  ...rest\n}: ColorAreaProps) => {\n  const part = useColorPartState({ value, defaultValue, onValueChange, disabled });\n  const { picker } = part;\n  const strings = {\n    ...DEFAULT_LABELS,\n    ...(picker && {\n      saturation: picker.labels.saturation,\n      brightness: picker.labels.brightness,\n      roleDescription: picker.labels.roleDescription,\n      colorName: picker.labels.colorName,\n      valueText: picker.labels.valueText,\n    }),\n    ...labels,\n  };\n  const resolvedShape = shape ?? picker?.shape ?? 'rounded';\n  const color = part.color;\n  const shown = displayColor(color);\n  const saturation = toPercent(shown.s);\n  const brightness = toPercent(shown.v);\n\n  const [activeAxis, setActiveAxis] = React.useState<AreaAxis>('saturation');\n  const coarsePointer = useMediaQuery(COARSE_POINTER);\n  const fieldRef = React.useRef<HTMLDivElement>(null);\n  // Bumped on every handled key (not only an axis change), so the layout effect below moves focus\n  // to the axis's input even when the key's axis is the one an earlier assistive-technology change\n  // already made the Tab stop, without moving focus; focusing an input that already has focus does\n  // nothing. Never bumped for an AT-driven change (`handleInputChange`) or a real focus event. A\n  // plain counter, not a ref: react-hooks/refs only allows a ref's `current` to be touched from an\n  // effect, a ref callback or a function assigned directly to a JSX handler prop, not one passed\n  // through `composeEventHandlers`.\n  const [focusToken, setFocusToken] = React.useState(0);\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const saturationRef = React.useRef<HTMLInputElement>(null);\n  const brightnessRef = React.useRef<HTMLInputElement>(null);\n  const mergedRootRef = useMergedRefs(ref, rootRef);\n  const mergedSaturationRef = useMergedRefs(saturationRef, controlRef);\n  /** The last `focusToken` this component already moved focus for (read/written in the effect only). */\n  const handledFocusTokenRef = React.useRef(0);\n\n  React.useLayoutEffect(() => {\n    if (handledFocusTokenRef.current === focusToken) return;\n    handledFocusTokenRef.current = focusToken;\n    (activeAxis === 'saturation' ? saturationRef : brightnessRef).current?.focus({\n      preventScroll: true,\n    });\n  }, [activeAxis, focusToken]);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label':\n        ariaLabel ?? (picker && ariaLabelledBy === undefined ? picker.labels.area : undefined),\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 `required` (ARIA 1.2): the invalid\n  // state goes to both inputs and the required state to the hidden input.\n  const {\n    'aria-invalid': invalid,\n    'aria-required': _ariaRequired,\n    required: _required,\n    ...groupProps\n  } = fieldProps;\n  const isInvalid = invalid !== undefined && invalid !== false && invalid !== 'false';\n  const errorMessageId = (isInvalid && ariaErrorMessage) || undefined;\n  const isRequired =\n    required ?? (ariaRequired === true || ariaRequired === 'true' || (field?.required ?? false));\n\n  useFormReset(rootRef, part.reset, form);\n\n  /** Applies a whole percentage to one axis, keeping the other channels as given. */\n  const applyAxis = (axis: AreaAxis, percent: number) => {\n    if (percent === (axis === 'saturation' ? saturation : brightness)) return;\n    part.setColor(\n      axis === 'saturation' ? { ...color, s: percent / 100 } : { ...color, v: percent / 100 },\n    );\n  };\n\n  const handleKeyDown = composeEventHandlers(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (part.disabled || !isOwnEvent(event) || event.nativeEvent.isComposing) return;\n      // A key with Alt, Ctrl or Meta belongs to the browser (Alt+Left is \"back\").\n      if (event.altKey || event.ctrlKey || event.metaKey) return;\n      const step = event.shiftKey ? 10 : 1;\n      let axis: AreaAxis;\n      let next: number;\n      switch (event.key) {\n        case 'ArrowLeft':\n        case 'ArrowRight': {\n          const intent = getArrowIntent(event.key, {\n            orientation: 'horizontal',\n            dir: getDirection(event.currentTarget),\n          });\n          axis = 'saturation';\n          next = saturation + (intent === 'next' ? step : -step);\n          break;\n        }\n        case 'ArrowUp':\n          axis = 'value';\n          next = brightness + step;\n          break;\n        case 'ArrowDown':\n          axis = 'value';\n          next = brightness - step;\n          break;\n        case 'PageUp':\n          axis = 'value';\n          next = brightness + 10;\n          break;\n        case 'PageDown':\n          axis = 'value';\n          next = brightness - 10;\n          break;\n        case 'Home':\n          axis = 'saturation';\n          next = 0;\n          break;\n        case 'End':\n          axis = 'saturation';\n          next = 100;\n          break;\n        default:\n          return;\n      }\n      // Prevented, so the native range input never moves on its own.\n      event.preventDefault();\n      if (axis !== activeAxis) setActiveAxis(axis);\n      // Every handled key moves focus to its axis's input, even when an earlier\n      // assistive-technology change already made that axis the Tab stop.\n      setFocusToken((token) => token + 1);\n      applyAxis(axis, clampPercent(next));\n    },\n  );\n\n  /** A change event from assistive technology (a swipe): that input becomes the Tab stop. */\n  const handleInputChange = (axis: AreaAxis) => (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (part.disabled) return;\n    if (axis !== activeAxis) setActiveAxis(axis);\n    applyAxis(axis, clampPercent(Math.round(Number(event.currentTarget.value))));\n  };\n\n  const handleInputFocus = (axis: AreaAxis) => () => {\n    if (axis !== activeAxis) setActiveAxis(axis);\n  };\n\n  // Both read a ref (`fieldRef`, or `saturationRef`/`brightnessRef`): `useEventCallback` (a custom\n  // hook, opaque to react-hooks/refs) keeps that safe to call from the handler below, unlike a\n  // plain function or `React.useCallback` passed into the generic `composeEventHandlers`.\n  /** Moves the thumb to the pointer: saturation along x (mirrored in RTL), brightness along y. */\n  const moveToPointer = useEventCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    const fieldElement = fieldRef.current;\n    if (!fieldElement) return;\n    const rect = fieldElement.getBoundingClientRect();\n    if (rect.width <= 0 || rect.height <= 0) return;\n    const x = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));\n    const s = getDirection(event.currentTarget) === 'rtl' ? 1 - x : x;\n    const v = Math.min(1, Math.max(0, 1 - (event.clientY - rect.top) / rect.height));\n    if (s === shown.s && v === shown.v) return;\n    part.setColor({ ...color, s, v });\n  });\n  /**\n   * Focuses the input of the active axis (the press moves focus there instead of the point),\n   * without the focus ring: Chromium treats this script focus as keyboard focus, where the\n   * browser's own focus of a pressed control shows none. Browsers without the `focusVisible`\n   * option ignore it.\n   */\n  const focusActiveAxis = useEventCallback(() => {\n    const options: FocusOptions = { preventScroll: true, focusVisible: false };\n    (activeAxis === 'saturation' ? saturationRef : brightnessRef).current?.focus(options);\n  });\n\n  const handlePointerDown = composeEventHandlers(\n    onPointerDown,\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (part.disabled || event.button !== 0 || !event.isPrimary || !isOwnEvent(event)) return;\n      // No text selection and no focus move of the press: focus goes to the Tab stop instead.\n      event.preventDefault();\n      event.currentTarget.setPointerCapture(event.pointerId);\n      moveToPointer(event);\n      focusActiveAxis();\n    },\n  );\n\n  // The drag lasts while the root holds the pointer; losing the capture (pointerup,\n  // lostpointercapture) ends it.\n  const handlePointerMove = composeEventHandlers(\n    onPointerMove,\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (part.disabled || !event.currentTarget.hasPointerCapture(event.pointerId)) return;\n      moveToPointer(event);\n    },\n  );\n\n  const textLabels = {\n    saturation: strings.saturation,\n    brightness: strings.brightness,\n    colorName: strings.colorName,\n    valueText: strings.valueText,\n  };\n\n  const areaStyle = {\n    ...style,\n    '--wave-color-area-gradient': colorAreaGradient(shown.h),\n    '--wave-color-area-x': toPosition(shown.s),\n    '--wave-color-area-y': toPosition(shown.v),\n    '--wave-color-thumb': hsvToHex({ h: shown.h, s: shown.s, v: shown.v }),\n  } as React.CSSProperties;\n\n  const inputProps = (axis: AreaAxis) => ({\n    type: 'range' as const,\n    min: 0,\n    max: 100,\n    step: 1,\n    disabled: part.disabled,\n    'aria-roledescription': strings.roleDescription,\n    'aria-invalid': invalid,\n    'aria-errormessage': errorMessageId,\n    // One Tab stop: the input used last (C-ROUTING: a consumer tabIndex applies to it).\n    tabIndex: axis === activeAxis ? (tabIndex ?? 0) : -1,\n    // Where the primary pointer is not coarse, desktop screen readers meet one 2-D slider: the\n    // input without the Tab stop is hidden (it stays focusable by script, never by Tab).\n    'aria-hidden': axis !== activeAxis && !coarsePointer ? true : undefined,\n    onChange: handleInputChange(axis),\n    onFocus: handleInputFocus(axis),\n    className: 'sr-only',\n  });\n\n  return (\n    <div\n      role=\"group\"\n      data-disabled={part.disabled ? '' : undefined}\n      {...groupProps}\n      className={cn(\n        colorAreaClassNames.root,\n        'group/color-area relative h-40 w-full min-w-40 touch-none select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n        resolvedShape === 'square' ? 'rounded-none' : 'rounded',\n        className,\n      )}\n      style={areaStyle}\n      {...rest}\n      ref={mergedRootRef}\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n    >\n      <div\n        ref={fieldRef}\n        aria-hidden=\"true\"\n        className={cn(\n          colorAreaClassNames.field,\n          'absolute inset-0 rounded-[inherit] bg-(image:--wave-color-area-gradient) wave-rtl:-scale-x-100 forced-colors:forced-color-adjust-none',\n        )}\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          colorAreaClassNames.thumb,\n          COLOR_THUMB_CLASSES,\n          'start-(--wave-color-area-x) bottom-(--wave-color-area-y) -translate-x-1/2 wave-rtl:translate-x-1/2 translate-y-1/2',\n          'group-has-[:focus-visible]/color-area:ring-2 group-has-[:focus-visible]/color-area:ring-background forced-colors:group-has-[:focus-visible]/color-area:ring-[Canvas] group-has-[:focus-visible]/color-area:outline-2 group-has-[:focus-visible]/color-area:outline-offset-2 group-has-[:focus-visible]/color-area:outline-ring forced-colors:group-has-[:focus-visible]/color-area:outline-[Highlight]',\n        )}\n      />\n      <input\n        {...inputProps('saturation')}\n        ref={mergedSaturationRef}\n        value={saturation}\n        aria-label={strings.saturation}\n        aria-valuetext={areaValueText(shown, 'saturation', textLabels)}\n        autoFocus={autoFocus}\n      />\n      <input\n        {...inputProps('value')}\n        ref={brightnessRef}\n        value={brightness}\n        aria-label={strings.brightness}\n        aria-orientation=\"vertical\"\n        aria-valuetext={areaValueText(shown, 'value', textLabels)}\n      />\n      {!picker && (\n        <HiddenInput\n          type=\"text\"\n          name={name}\n          form={form}\n          disabled={part.disabled}\n          value={hsvToHex(color)}\n          required={isRequired}\n          onInvalid={() =>\n            (activeAxis === 'saturation' ? saturationRef : brightnessRef).current?.focus()\n          }\n        />\n      )}\n    </div>\n  );\n};\n\nColorArea.displayName = 'ColorArea';\n"],"mappings":"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"}

package/dist/components/input/ColorPicker.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","names":["parseHexColor","normalizeHexColor","useControllable","alphaToOpacity","formatHexColor","React","isHexDraft","useMergedRefs","useFieldContext","useFieldControl","useId","isInvalidLook","parseHexInput","opacityToAlpha","cn","joinIds","inputFocus","FieldContext","SwatchPicker","HiddenInput","require_runtime","require_cn","require_dev","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_useFieldControl","require_styles","require_Input","require_useFormReset","require_HiddenInput","require_colorUtils","require_SwatchPicker","react","react_jsx_runtime","DEFAULT_COLOR","DEFAULT_LABELS","DEFAULT_PRESETS","resolvePresets","items","invalid","translucent","seen","preset","presets","color","parsed","hasAlpha","stringLabel","isBlankDraft","trimmed","text","hasAlphaDigits","digits","ColorPicker","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","rest","onChange","rawDefault","defaultValue","initialValue","strings","labels","setColor","onValueChange","next","alpha","opacity","commit","rgb","nextAlpha","draft","setDraft","syncedColor","setSyncedColor","hexText","draftInvalid","presetItems","invalidPresets","translucentPresets","invalidPresetKey","translucentPresetKey","invalidValue","rootRef","hexInputRef","mergedRef","ref","field","groupInvalid","_ariaRequired","_required","groupProps","fieldInvalid","isRequired","required","errorMessageId","form","errorId","hexAriaInvalid","hexInvalidLook","handleHexChange","typed","finishHexDraft","handleHexKeyDown","handlePreset","handleOpacityChange","selectedPreset","className","showOpacity"],"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.cjs","names":["parseHexColor","hexToHsv","normalizeHexColor","React","DEFAULT_COLOR_PICKER_LABELS","useControllable","alphaToOpacity","useMergedRefs","useFieldContext","useFieldControl","useEventCallback","formatHexColor","DEFAULT_PART_COLOR","hsvToHex","getFirstTabbable","cn","colorPickerClassNames","ColorPickerContext","FieldContext","slotRendersContent","_Fragment","ColorArea","ColorSlider","ColorPickerPreview","ColorPickerHexField","ColorPickerSwatches","AlphaSlider","HiddenInput","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_color","require_useEventCallback","require_useControllable","require_focus","require_useMergedRefs","require_useFieldControl","require_useFormReset","require_HiddenInput","require_colorUtils","require_ColorPicker_parts","require_AlphaSlider","require_ColorArea","require_ColorSlider","react","react_jsx_runtime","DEFAULT_PRESETS","resolvePresets","items","invalid","translucent","seen","preset","presets","color","parsed","hasAlpha","stringLabel","deriveWorkingColor","next","hex","previous","ColorPickerRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","rest","onChange","rawDefault","defaultValue","initialValue","strings","labels","setColor","onValueChange","alpha","opacity","presetItems","invalidPresets","translucentPresets","invalidPresetKey","translucentPresetKey","invalidValue","rootRef","hexInputRef","mergedRef","ref","registerHexInput","input","draftResetKey","setDraftResetKey","field","groupInvalid","_ariaRequired","_required","groupProps","fieldInvalid","isRequired","required","errorMessageId","key","form","pickPreset","rgb","hsv","setHsvState","normalized","setHsv","context","shape","focusInvalidTarget","root","className","children","showOpacity","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.mjs

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