@mortenbrudvik/waveui 0.7.0 → 0.8.0

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":"mmBA0HA,IAAMoC,EAAgB,UAEhBC,EAA8C,CAClD,IAAK,MACL,SAAU,kBACV,SAAU,6BAA6BD,EAAc,GACrD,QAAS,gBACT,QAAS,SACX,EAEME,GAAgD,CACpD,CAAE,MAAO,UAAW,MAAO,MAAO,EAClC,CAAE,MAAO,UAAW,MAAO,KAAM,EACjC,CAAE,MAAO,UAAW,MAAO,OAAQ,EACnC,CAAE,MAAO,UAAW,MAAO,QAAS,EACpC,CAAE,MAAO,UAAW,MAAO,QAAS,EACpC,CAAE,MAAO,UAAW,MAAO,MAAO,EAClC,CAAE,MAAO,UAAW,MAAO,MAAO,EAClC,CAAE,MAAO,UAAW,MAAO,OAAQ,CACrC,EAWA,SAASC,EAAe,EAAqE,CAC3F,IAAMC,EAAsB,CAAC,EACvBC,EAAoB,CAAC,EACrBC,EAAwB,CAAC,EACzBC,EAAO,IAAI,IACjB,IAAK,IAAMC,KAAUC,EAAS,CAC5B,IAAMC,EAAQ,OAAOF,GAAW,SAAWA,EAASA,EAAO,MACrDG,EAAS/C,EAAAA,cAAc8C,CAAK,EAClC,GAAI,CAACC,EAAQ,CACXN,EAAQ,KAAKK,CAAK,EAClB,QACF,CAEA,IAAME,EAAWD,EAAO,QAAU,IAElC,GADIC,GAAUN,EAAY,KAAKI,CAAK,EAChCH,EAAK,IAAII,EAAO,GAAG,EAAG,SAC1BJ,EAAK,IAAII,EAAO,GAAG,EAEnB,IAAME,EAAcD,EAAWD,EAAO,IAAMD,EAC5CN,EAAM,KAAK,CACT,MAAOO,EAAO,IACd,MAAOA,EAAO,IACd,MAAO,OAAOH,GAAW,SAAWK,EAAcL,EAAO,KAC3D,CAAC,CACH,CACA,MAAO,CAAE,QAAO,UAAS,aAAY,CACvC,CAWA,SAASM,EAAa,EAAuB,CAC3C,IAAMC,EAAUC,EAAK,KAAK,EAC1B,OAAOD,IAAY,IAAMA,IAAY,GACvC,CAGA,SAASE,EAAe,EAAuB,CAC7C,IAAMC,EAASF,EAAK,KAAK,CAAC,CAAC,QAAQ,KAAM,EAAE,CAAC,CAAC,OAC7C,OAAOE,IAAW,GAAKA,IAAW,CACpC,CAgCA,IAAaC,GAAe,CAC1B,MAAOC,EACP,eACA,iBACA,WACA,WAAUlB,GACV,eAAc,GACd,UACA,QACA,YACA,OACA,aACA,MACA,aAAcmB,GACd,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,GAChB,gBAAiBC,EACjB,oBAAqBC,GACrB,OACA,GAAGC,MACmB,CAClBC,IAAa,IAAA,IAAW1C,EAAA,eAAe,cAAe,WAAY,eAAe,EAIrF,IAAM2C,EAAaC,GAAgB9B,EAC7B+B,EAAelE,EAAAA,kBAAkBgE,CAAU,GAAKA,EAChDG,EAAU,CAAE,GAAG/B,EAAgB,GAAGgC,EAAO,EACzC,CAACvB,EAAOwB,GAAYpE,EAAAA,gBAAgBsD,EAAWW,EAAe,GAAiB,CACnFI,KAAgBC,CAAI,EACpBR,IAAWQ,CAAI,CACjB,CAAC,EAEKzB,EAAS/C,EAAAA,cAAc8C,CAAK,EAC5B2B,EAAQ1B,GAAQ,OAAS,IACzB2B,EAAUvE,EAAAA,eAAesE,CAAK,EAG9BE,GAAU,EAAa,IAAsBL,EAASlE,EAAAA,eAAewE,EAAKC,CAAS,CAAC,EAGpF,CAACC,EAAOC,GAAY1E,EAAM,SAA0B,IAAI,EAIxD,CAAC2E,EAAaC,GAAkB5E,EAAM,SAASyC,CAAK,EACtDA,IAAUkC,IACZC,EAAenC,CAAK,EAChBgC,GAAO,SAASC,EAAS,IAAI,GAEnC,IAAMG,EAAUJ,GAAO,MAAQhC,EAGzBqC,EACJL,IAAU,MAAQ,CAAC5B,EAAa4B,EAAM,IAAI,IAAMA,EAAM,SAAW,CAACxE,EAAAA,WAAWwE,EAAM,IAAI,GAEnF,CACJ,MAAOM,EACP,QAASC,GACT,YAAaC,IACX/C,EAAeM,EAAO,EACpB0C,EAAmBF,GAAe,KAAK;CAAI,EAC3CG,EAAuBF,GAAmB,KAAK;CAAI,EACnDG,EAAe1C,EAAS,KAAOD,EAErCZ,EAAM,cAAgB,CAChBuD,IAAiB,MACnBnE,EAAA,SACE,4BACA,iBAAiBmE,EAAa,0GAChC,CAEJ,EAAG,CAACA,CAAY,CAAC,EACjBvD,EAAM,cAAgB,CACpB,GAAKqD,EACL,IAAK,IAAM3C,KAAU2C,EAAiB,MAAM;CAAI,EAC9CjE,EAAA,SACE,8BAA8BsB,IAC9B,wBAAwBA,EAAO,yDACjC,CAEJ,EAAG,CAAC2C,CAAgB,CAAC,EACrBrD,EAAM,cAAgB,CACpB,GAAKsD,EACL,IAAK,IAAM5C,KAAU4C,EAAqB,MAAM;CAAI,EAClDlE,EAAA,SACE,4BAA4BsB,IAC5B,wBAAwBA,EAAO,sHACjC,CAEJ,EAAG,CAAC4C,CAAoB,CAAC,EAEzB,IAAME,EAAUrF,EAAM,OAAuB,IAAI,EAC3CsF,EAActF,EAAM,OAAyB,IAAI,EACjDuF,GAAYrF,EAAAA,cAA8BsF,GAAKH,CAAO,EAEtDI,EAAQtF,EAAAA,gBAAgB,EAaxB,CACJ,eAAgBuF,EAChB,gBAAiBC,GACjB,SAAUC,GACV,GAAGC,IAhBczF,EAAAA,gBACjB,CACE,MACA,aAAcgD,GACd,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAClB,EACA,CAAE,UAAW,EAAM,CASjB,EAGEuC,EACJJ,IAAiB,IAAA,IAAaA,IAAiB,IAASA,IAAiB,QAErEK,EACJC,KAAaxC,IAAiB,IAAQA,IAAiB,SAAWiC,GAAO,UAAY,KAGjFQ,EAAkBH,GAAgBrC,IAAqB,IAAA,GAE7DhC,GAAA,aACE4D,MACM,EAGCzF,EAAAA,kBAAkB6C,CAAK,GAAKA,KAAWqB,GAAcG,EAASH,CAAY,EAC/EY,EAAS,IAAI,CACf,EACAwB,CACF,EAEA,IAAMC,EAAU9F,EAAAA,MAAM,yBAAyB,EAEzC+F,EAAiBtB,EAAe,GAAOgB,EAAeJ,EAAe,IAAA,GACrEW,GAAiB/F,GAAAA,cAAc,GAAO8F,CAAc,EAEpDE,GAAmB,GAA2C,CAGlE,IAAIvD,EAAO,EAAE,OAAO,MAAM,KAAK,EAC3BA,IAAS,IAAM,CAACA,EAAK,WAAW,GAAG,IAAG,EAAO,IAAIA,KACrD2B,EAAS,CAAE,OAAM,QAAS,EAAM,CAAC,EACjC,IAAM6B,EAAQhG,EAAAA,cAAcwC,CAAI,EAE5BwD,GAAOjC,EAAOiC,EAAM,IAAKvD,EAAeD,CAAI,EAAIwD,EAAM,MAAQnC,CAAK,CACzE,EAGMoC,MAAuB,CAC3B,GAAI/B,IAAU,MAAQA,EAAM,QAAS,OACrC,IAAM8B,EAAQ5G,EAAAA,cAAc8E,EAAM,IAAI,EACtC,GAAI8B,GAAS1D,EAAa4B,EAAM,IAAI,EAAG,CAIjC8B,GAAS,CAAChG,EAAAA,cAAckE,EAAM,IAAI,GACpCH,EAAOiC,EAAM,IAAKvD,EAAeyB,EAAM,IAAI,EAAI8B,EAAM,MAAQnC,CAAK,EAEpEM,EAAS,IAAI,EACb,MACF,CAEAA,EAAS,CAAE,KAAMD,EAAM,KAAM,QAAS,EAAK,CAAC,CAC9C,EAEMgC,GAAoB,GAA6C,CAGjE,EAAE,MAAQ,SAAW,CAAC,EAAE,kBAAoB,CAAC,EAAE,YAAY,aAAaD,EAAe,CAC7F,EAEME,GAAgB,GAAgB,CAGpC,IAAMnE,EAAS5C,EAAAA,cAAc4E,CAAG,EAC3BhC,IACLmC,EAAS,IAAI,EACbJ,EAAO/B,EAAO,IAAK6B,CAAK,EAC1B,EAEMuC,GAAuB,GAA2C,CACjEjE,GACL4B,EAAO5B,EAAO,IAAKlC,EAAAA,eAAe,OAAO,EAAE,OAAO,KAAK,CAAC,CAAC,CAC3D,EAEMoG,GAAiBlE,EAASA,EAAO,IAAM,GAE7C,OACE,EAAAZ,EAAA,KAAA,CAAC,MAAD,CACE,KAAK,QACL,GAAI+D,GACJ,UAAWpF,EAAAA,GACT,8FACAoG,EACF,EACA,GAAInD,GACJ,IAAK6B,GARP,SAAA,EAWE,EAAAzD,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,MAAD,CACE,qBAAmB,GACnB,UAAU,kDACV,MAAO,CAAE,gBAAiBY,EAAS3C,EAAAA,eAAe2C,EAAO,IAAKA,EAAO,KAAK,EAAID,CAAM,EACpF,cAAY,MACb,CAAA,GACD,EAAAX,EAAA,KAAA,CAAC,QAAD,CAAO,UAAU,sBAAjB,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,uCAAwC,SAAAiC,EAAQ,GAAU,CAAA,GAC1E,EAAAjC,EAAA,IAAA,CAAC,QAAD,CACE,IAAKwD,EACL,KAAK,OACL,MAAOT,EACP,SAAUyB,GACV,UAAWG,GACX,OAAQD,EACR,aAAYzC,EAAQ,SACpB,eAAcqC,EACd,oBAAmBH,EACnB,mBAAkBvF,EAAAA,QAChBoE,GAAgBqB,EAChBV,GAAO,sBAAwBK,EAAeL,GAAO,QAAU,IAAA,IAC/DQ,CACF,EACA,UAAW,EACX,WAAY,GACZ,aAAa,MACb,UAAWxF,EAAAA,GACT,kHACAE,EAAAA,WACA0F,IAAA,+CACF,CACD,CAAA,CACI,CACJ,CAAA,CAAA,IACJvB,IACC,EAAAhD,EAAA,IAAA,CAAC,OAAD,CAAM,GAAIqE,EAAS,UAAU,4BAC1B,SAAApC,EAAQ,QACL,CAAA,EAKPgB,EAAY,OAAS,IACpB,EAAAjD,EAAA,IAAA,CAAClB,EAAAA,aAAa,SAAd,CAAuB,MAAO,KAC5B,UAAA,EAAAkB,EAAA,IAAA,CAACjB,EAAAA,aAAD,CACE,MAAOkE,EACP,MAAO6B,GACP,cAAeF,GACf,aAAY3C,EAAQ,QACpB,KAAK,QACL,MAAM,SACP,CAAA,CACoB,CAAA,EAIxB+C,KACC,EAAAhF,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,4CAA6C,SAAAiC,EAAQ,OAAc,CAAA,GACnF,EAAAjC,EAAA,IAAA,CAAC,QAAD,CACE,KAAK,QACL,IAAK,EACL,IAAK,IACL,MAAOuC,EACP,SAAUsC,GACV,SAAU,CAACjE,EACX,aAAYqB,EAAQ,QACpB,iBAAgB,GAAGM,EAAQ,GAC3B,UAAW5D,EAAAA,GACT,4EAAA,mFAEF,CACD,CAAA,GACD,EAAAqB,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,qDAAhB,SAAA,CAAsEuC,EAAQ,GAAO,GAClF,KAGP,EAAAvC,EAAA,IAAA,CAAChB,EAAAA,YAAD,CACE,KAAK,OACC,QACA,OACN,MAAO2B,EACP,SAAUsD,EACV,cAAiBT,EAAY,SAAS,MAAM,CAC7C,CAAA,CACE,GAET,EAEA,EAAY,YAAc"}
+{"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