@skdx/react 0.28.0 → 0.30.0

package/dist/color-picker/ColorPicker.d.cts

@@ -1,74 +1,31 @@
 import * as React from 'react';
 import type { ColorPickerContextValue, ColorPickerProps } from './types.cjs';
-export declare const ColorPickerProvider: {
-    (props: ColorPickerContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useColorPickerContext: (consumerName: string) => ColorPickerContextValue;
+export declare const ColorPickerProvider: React.FC<ColorPickerContextValue & {
+    children: React.ReactNode;
+}>, useColorPickerContext: (consumerName: string) => ColorPickerContextValue;
 /**
- * Root of a colour picker: owns the colour, owns the notation it is spelled
- * in, and publishes both to every part through context and to CSS through
- * custom properties. Renders a plain `<div>` with no role of its own — each
- * interactive part carries its own semantics, so a role here would only add an
- * unnamed group between the user and them.
- *
- * **The colour is stored as HSB, not as the string.** RGB and hex cannot
- * represent the hue of a black, so a picker that re-parsed its own string on
- * every change would lose the user's hue the moment they dragged brightness to
- * zero and hand them red on the way back up. `value` is the *serialisation*;
- * the canonical colour lives beside it and only re-syncs when a string arrives
- * that this picker did not produce. See `utils/color.md`.
- *
- * Positioning is entirely CSS. The root publishes:
+ * Root of a colour picker: owns the colour and its notation, publishing both to every part through context and to CSS through custom properties.
  *
  * | Property | Example | For |
  * | --- | --- | --- |
- * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop, `hsl(var(--…-hue) 100% 50%)` |
+ * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop |
  * | `--skdx-color-picker-hue-position` | `58.333%` | the hue thumb's offset along its track |
  * | `--skdx-color-picker-saturation` | `65%` | the area thumb's horizontal offset |
  * | `--skdx-color-picker-brightness` | `85%` | the area thumb's vertical offset |
  * | `--skdx-color-picker-alpha` | `0.5` | an opacity, directly |
  * | `--skdx-color-picker-alpha-position` | `50%` | the alpha thumb's offset along its track |
- * | `--skdx-color-picker-value` | `#d94c4c` | the current colour as a swatch fill |
- *
- * `--skdx-color-picker-value` is **always hex**, never the active format: `hsb()`
- * is this library's own notation and not a CSS colour, so publishing the raw
- * `value` would silently break every `background: var(--skdx-color-picker-value)`
- * the moment a user switched format.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`),
- * and the same for `format` / `defaultFormat` / `onFormatChange`.
+ * | `--skdx-color-picker-value` | `#d94c4c` | the current colour as a swatch fill, always hex |
  *
- * Given no children, it derives its own area, hue and alpha tracks, plus an
- * optional input, preset swatches and an eyedropper trigger from `showInput`,
- * `showSwatches`, `showEyeDropper` and `swatches`. Given children, those four
- * props are ignored and the children are rendered verbatim, for full manual
- * composition; reach for `ColorPicker` from `@skdx/react/primitives/color-picker`
- * for that case.
+ * Given no children, it derives its own area, hue and alpha tracks plus an optional
+ * input, preset swatches and an eyedropper trigger from `showInput`, `showSwatches`,
+ * `showEyeDropper` and `swatches`; given children, those props are ignored.
  *
  * @example
  * ```tsx
  * <ColorPicker defaultValue="#d94c4c" onValueCommit={save} swatches={['#e11d48', '#3b82f6']} />
  * ```
- *
- * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/color-picker`.
- * ```tsx
- * import { ColorPicker, ColorPickerAlphaSlider, ColorPickerAlphaSliderThumb, ColorPickerArea, ColorPickerAreaThumb, ColorPickerEyeDropper, ColorPickerHueSlider, ColorPickerHueSliderThumb, ColorPickerInput } from '@skdx/react/primitives/color-picker';
- *
- * <ColorPicker defaultValue="#d94c4c" onValueCommit={save}>
- *   <ColorPickerArea>
- *     <ColorPickerAreaThumb />
- *   </ColorPickerArea>
- *   <ColorPickerHueSlider>
- *     <ColorPickerHueSliderThumb />
- *   </ColorPickerHueSlider>
- *   <ColorPickerAlphaSlider>
- *     <ColorPickerAlphaSliderThumb />
- *   </ColorPickerAlphaSlider>
- *   <ColorPickerInput aria-label="Hex value" />
- *   <ColorPickerEyeDropper aria-label="Pick a colour from the screen" />
- * </ColorPicker>
- * ```
  */
-export declare const ColorPicker: React.ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPicker: {
+    ({ ref: forwardedRef, ...props }: ColorPickerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPicker.d.ts

@@ -1,74 +1,31 @@
 import * as React from 'react';
 import type { ColorPickerContextValue, ColorPickerProps } from './types.js';
-export declare const ColorPickerProvider: {
-    (props: ColorPickerContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useColorPickerContext: (consumerName: string) => ColorPickerContextValue;
+export declare const ColorPickerProvider: React.FC<ColorPickerContextValue & {
+    children: React.ReactNode;
+}>, useColorPickerContext: (consumerName: string) => ColorPickerContextValue;
 /**
- * Root of a colour picker: owns the colour, owns the notation it is spelled
- * in, and publishes both to every part through context and to CSS through
- * custom properties. Renders a plain `<div>` with no role of its own — each
- * interactive part carries its own semantics, so a role here would only add an
- * unnamed group between the user and them.
- *
- * **The colour is stored as HSB, not as the string.** RGB and hex cannot
- * represent the hue of a black, so a picker that re-parsed its own string on
- * every change would lose the user's hue the moment they dragged brightness to
- * zero and hand them red on the way back up. `value` is the *serialisation*;
- * the canonical colour lives beside it and only re-syncs when a string arrives
- * that this picker did not produce. See `utils/color.md`.
- *
- * Positioning is entirely CSS. The root publishes:
+ * Root of a colour picker: owns the colour and its notation, publishing both to every part through context and to CSS through custom properties.
  *
  * | Property | Example | For |
  * | --- | --- | --- |
- * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop, `hsl(var(--…-hue) 100% 50%)` |
+ * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop |
  * | `--skdx-color-picker-hue-position` | `58.333%` | the hue thumb's offset along its track |
  * | `--skdx-color-picker-saturation` | `65%` | the area thumb's horizontal offset |
  * | `--skdx-color-picker-brightness` | `85%` | the area thumb's vertical offset |
  * | `--skdx-color-picker-alpha` | `0.5` | an opacity, directly |
  * | `--skdx-color-picker-alpha-position` | `50%` | the alpha thumb's offset along its track |
- * | `--skdx-color-picker-value` | `#d94c4c` | the current colour as a swatch fill |
- *
- * `--skdx-color-picker-value` is **always hex**, never the active format: `hsb()`
- * is this library's own notation and not a CSS colour, so publishing the raw
- * `value` would silently break every `background: var(--skdx-color-picker-value)`
- * the moment a user switched format.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`),
- * and the same for `format` / `defaultFormat` / `onFormatChange`.
+ * | `--skdx-color-picker-value` | `#d94c4c` | the current colour as a swatch fill, always hex |
  *
- * Given no children, it derives its own area, hue and alpha tracks, plus an
- * optional input, preset swatches and an eyedropper trigger from `showInput`,
- * `showSwatches`, `showEyeDropper` and `swatches`. Given children, those four
- * props are ignored and the children are rendered verbatim, for full manual
- * composition; reach for `ColorPicker` from `@skdx/react/primitives/color-picker`
- * for that case.
+ * Given no children, it derives its own area, hue and alpha tracks plus an optional
+ * input, preset swatches and an eyedropper trigger from `showInput`, `showSwatches`,
+ * `showEyeDropper` and `swatches`; given children, those props are ignored.
  *
  * @example
  * ```tsx
  * <ColorPicker defaultValue="#d94c4c" onValueCommit={save} swatches={['#e11d48', '#3b82f6']} />
  * ```
- *
- * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/color-picker`.
- * ```tsx
- * import { ColorPicker, ColorPickerAlphaSlider, ColorPickerAlphaSliderThumb, ColorPickerArea, ColorPickerAreaThumb, ColorPickerEyeDropper, ColorPickerHueSlider, ColorPickerHueSliderThumb, ColorPickerInput } from '@skdx/react/primitives/color-picker';
- *
- * <ColorPicker defaultValue="#d94c4c" onValueCommit={save}>
- *   <ColorPickerArea>
- *     <ColorPickerAreaThumb />
- *   </ColorPickerArea>
- *   <ColorPickerHueSlider>
- *     <ColorPickerHueSliderThumb />
- *   </ColorPickerHueSlider>
- *   <ColorPickerAlphaSlider>
- *     <ColorPickerAlphaSliderThumb />
- *   </ColorPickerAlphaSlider>
- *   <ColorPickerInput aria-label="Hex value" />
- *   <ColorPickerEyeDropper aria-label="Pick a colour from the screen" />
- * </ColorPicker>
- * ```
  */
-export declare const ColorPicker: React.ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPicker: {
+    ({ ref: forwardedRef, ...props }: ColorPickerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPicker.js

@@ -1 +1,2 @@
-import*as C from"react";import{formatColor as $,parseColor as De}from"../utils/color.js";import{createSafeContext as $o}from"../utils/createContext.js";import{announce as Bo}from"../utils/liveAnnouncer.js";import{skdxPart as Uo}from"../utils/part.js";import{Primitive as Wo}from"../utils/primitive.js";import{useCallbackRef as zo}from"../utils/useCallbackRef.js";import{useControllableState as He}from"../utils/useControllableState.js";import*as pe from"react";import{formatColor as $e}from"../utils/color.js";import{skdxPart as Be}from"../utils/part.js";import{composeEventHandlers as me,Primitive as Ue}from"../utils/primitive.js";import{clamp as Ve}from"../utils/clamp.js";import{directionalKey as Ie,useDirection as Ke}from"../utils/direction.js";import*as E from"react";import{clamp as ue}from"../utils/clamp.js";function O(e){let t=E.useRef(e);E.useEffect(()=>{t.current=e});let[o,n]=E.useState(!1),r=E.useRef(null),i=(s,c)=>{let a=c.getBoundingClientRect();return{x:a.width?ue((s.clientX-a.left)/a.width,0,1):0,y:a.height?ue((s.clientY-a.top)/a.height,0,1):0}},l=s=>{if(r.current)return;let c=s.currentTarget,{pointerId:a}=s;c.setPointerCapture?.(a);let m=i(s,c);n(!0),t.current.onRatioChange(m,s.nativeEvent);let f=b=>{if(b.pointerId!==a)return;let w=i(b,c);w.x===m.x&&w.y===m.y||(m=w,t.current.onRatioChange(w,b))},P=b=>{b.pointerId===a&&(r.current?.(),n(!1),t.current.onRatioChangeEnd?.(b))},h=c.ownerDocument;h.addEventListener("pointermove",f),h.addEventListener("pointerup",P),h.addEventListener("pointercancel",P),r.current=()=>{h.removeEventListener("pointermove",f),h.removeEventListener("pointerup",P),h.removeEventListener("pointercancel",P),r.current=null}};return E.useEffect(()=>()=>r.current?.(),[]),{onPointerDown:l,dragging:o}}var Ge=10;function g(e){return Math.round(e*100)/100}function H(e,t,o){let n=t>0?Math.round(Math.round(e/t)*t*1e6)/1e6:e;return Ve(n,0,o)}function _(e){return e>0?e:1}function F(e){let{channel:t,consumerName:o,max:n,value:r,orientation:i,defaultLabel:l,valueText:s,onChange:c}=e,a=d(o),m=Ke(),f=e.limit??n,P=u=>H(u,a.step,f),{onPointerDown:h,dragging:b}=O({onRatioChange:u=>{let y=i==="horizontal"?u.x:1-u.y;c(P(y*n))},onRatioChangeEnd:()=>a.commit()}),w=u=>{if(!a.interactive)return;let y=Ie(u.key,u.currentTarget,m);if(y==="Home"||y==="End"){u.preventDefault(),c(y==="Home"?0:f);return}let S=_(a.step),k=Math.max(n/10,S),x={ArrowRight:S,ArrowUp:S,ArrowLeft:-S,ArrowDown:-S,PageUp:k,PageDown:-k}[y];if(x===void 0)return;u.preventDefault();let D=u.shiftKey&&y.startsWith("Arrow")?Ge:1;c(P(r+x*D))};return{props:{role:"slider","aria-label":l,"aria-valuemin":0,"aria-valuemax":n,"aria-valuenow":g(r),"aria-valuetext":s(r),"aria-orientation":i,"aria-disabled":a.disabled||void 0,"aria-readonly":a.readOnly||void 0,tabIndex:a.disabled?-1:0,"data-channel":t,"data-orientation":i,"data-value":g(r),"data-disabled":a.disabled?"":void 0,"data-readonly":a.readOnly?"":void 0,"data-dragging":b?"":void 0},onKeyDown:w,onPointerDown:u=>{a.interactive&&h(u)},style:{touchAction:"none"},dragging:b}}import{jsx as We}from"react/jsx-runtime";var X=pe.forwardRef(({orientation:e="horizontal",label:t="Opacity",...o},n)=>{let r=d("ColorPickerAlphaSlider"),{color:i}=r,l=F({channel:"alpha",consumerName:"ColorPickerAlphaSlider",max:100,value:i.a*100,orientation:e,defaultLabel:t,valueText:s=>`${Math.round(s)}% opaque, ${$e(i,"hex",!1)}`,onChange:s=>r.setColor({...i,a:s/100})});return r.alpha?We(Ue.div,{...l.props,...o,...Be("color-picker","alpha-slider",o.className),ref:n,onKeyDown:me(o.onKeyDown,l.onKeyDown),onPointerDown:me(o.onPointerDown,l.onPointerDown),style:{...l.style,...o.style}}):null});X.displayName="ColorPickerAlphaSlider";import*as fe from"react";import{skdxPart as ze}from"../utils/part.js";import{Primitive as _e}from"../utils/primitive.js";import{jsx as Xe}from"react/jsx-runtime";var q=fe.forwardRef((e,t)=>{let o=d("ColorPickerAlphaSliderThumb");return Xe(_e.div,{"aria-hidden":!0,"data-channel":"alpha","data-value":g(o.color.a*100),"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...e,...ze("color-picker","alpha-slider-thumb",e.className),ref:t})});q.displayName="ColorPickerAlphaSliderThumb";import*as V from"react";import{skdxPart as qe}from"../utils/part.js";import{composeEventHandlers as Ye,Primitive as Je}from"../utils/primitive.js";import{jsx as Qe}from"react/jsx-runtime";var Y=V.forwardRef((e,t)=>{let o=d("ColorPickerArea"),n=V.useRef(o.color);n.current=o.color;let{onPointerDown:r,dragging:i}=O({onRatioChange:({x:l,y:s})=>o.setColor({...n.current,s:H(l*100,o.step,100),b:H((1-s)*100,o.step,100)}),onRatioChangeEnd:()=>o.commit()});return Qe(Je.div,{"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,"data-dragging":i?"":void 0,...e,...qe("color-picker","area",e.className),ref:t,onPointerDown:Ye(e.onPointerDown,l=>{o.interactive&&r(l)}),style:{touchAction:"none",...e.style}})});Y.displayName="ColorPickerArea";import*as Ce from"react";import{directionalKey as Ze,useDirection as je}from"../utils/direction.js";import{skdxPart as eo}from"../utils/part.js";import{Primitive as Pe}from"../utils/primitive.js";import{jsx as J,jsxs as ro}from"react/jsx-runtime";var oo=10;function he({axis:e,label:t}){let o=d("ColorPickerAreaThumb"),n=je(),{color:r,step:i}=o,l=e==="saturation"?r.s:r.b,s=c=>{if(!o.interactive)return;let a=Ze(c.key,c.currentTarget,n),m=_(i),f=c.shiftKey?m*oo:m,P=(u,y)=>H(u+y,i,100),h=null,b=a==="ArrowRight"||a==="ArrowUp";if(b||(a==="ArrowLeft"||a==="ArrowDown")){let u=b?f:-f;h=e==="saturation"?{...r,s:P(r.s,u)}:{...r,b:P(r.b,u)}}else if(a==="Home"||a==="End"){let u=a==="Home"?0:100;h=e==="saturation"?{...r,s:u}:{...r,b:u}}h&&(c.preventDefault(),o.setColor(h))};return J(Pe.span,{role:"slider","aria-label":t,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":g(l),"aria-valuetext":`${Math.round(r.s)}% saturation, ${Math.round(r.b)}% brightness, ${o.describe(r)}`,"aria-orientation":e==="saturation"?"horizontal":"vertical","aria-disabled":o.disabled||void 0,"aria-readonly":o.readOnly||void 0,tabIndex:o.disabled?-1:0,"data-channel":e,"data-value":g(l),"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,onKeyDown:s})}var Q=Ce.forwardRef(({saturationLabel:e="Saturation",brightnessLabel:t="Brightness",children:o,...n},r)=>{let i=d("ColorPickerAreaThumb");return ro(Pe.div,{"data-value":i.value,"data-disabled":i.disabled?"":void 0,"data-readonly":i.readOnly?"":void 0,...n,...eo("color-picker","area-thumb",n.className),ref:r,children:[J(he,{axis:"saturation",label:e}),J(he,{axis:"brightness",label:t}),o]})});Q.displayName="ColorPickerAreaThumb";import*as I from"react";import{parseColor as to}from"../utils/color.js";import{skdxPart as ao}from"../utils/part.js";import{composeEventHandlers as no,Primitive as io}from"../utils/primitive.js";import{jsx as uo}from"react/jsx-runtime";var lo=()=>()=>{},so=()=>typeof window<"u"&&"EyeDropper"in window,co=()=>!1,Z=I.forwardRef((e,t)=>{let o=d("ColorPickerEyeDropper"),n=I.useSyncExternalStore(lo,so,co),r=()=>{let i=window.EyeDropper;i&&new i().open().then(({sRGBHex:l})=>{let s=to(l);s&&o.setColor({...s,a:o.color.a},{announce:!0})}).catch(()=>{})};return n?uo(io.button,{type:"button","aria-label":"Pick a colour from the screen","data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,disabled:o.disabled,...e,...ao("color-picker","eye-dropper",e.className),ref:t,onClick:no(e.onClick,()=>{o.interactive&&r()})}):null});Z.displayName="ColorPickerEyeDropper";import*as ke from"react";import{skdxPart as mo}from"../utils/part.js";import{composeEventHandlers as be,Primitive as po}from"../utils/primitive.js";import{jsx as fo}from"react/jsx-runtime";var j=ke.forwardRef(({orientation:e="horizontal",label:t="Hue",...o},n)=>{let r=d("ColorPickerHueSlider"),{color:i,step:l}=r,s=l>0?Math.floor(359/l)*l:359,c=F({channel:"hue",consumerName:"ColorPickerHueSlider",max:360,limit:s,value:i.h,orientation:e,defaultLabel:t,valueText:a=>`${Math.round(a)} degrees, ${r.describe(i)}`,onChange:a=>r.setColor({...i,h:a})});return fo(po.div,{...c.props,...o,...mo("color-picker","hue-slider",o.className),ref:n,onKeyDown:be(o.onKeyDown,c.onKeyDown),onPointerDown:be(o.onPointerDown,c.onPointerDown),style:{...c.style,...o.style}})});j.displayName="ColorPickerHueSlider";import*as ye from"react";import{skdxPart as ho}from"../utils/part.js";import{Primitive as Co}from"../utils/primitive.js";import{jsx as Po}from"react/jsx-runtime";var ee=ye.forwardRef((e,t)=>{let o=d("ColorPickerHueSliderThumb");return Po(Co.div,{"aria-hidden":!0,"data-channel":"hue","data-value":g(o.color.h),"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...e,...ho("color-picker","hue-slider-thumb",e.className),ref:t})});ee.displayName="ColorPickerHueSliderThumb";import*as K from"react";import{clamp as bo}from"../utils/clamp.js";import{formatColor as ko,hsbToHsl as xe,hsbToRgb as T,hslToHsb as yo,parseColor as xo,rgbToHsb as oe}from"../utils/color.js";import{skdxPart as vo}from"../utils/part.js";import{composeEventHandlers as re,Primitive as Ro}from"../utils/primitive.js";import{jsx as So}from"react/jsx-runtime";var wo={red:{max:255,label:"Red",read:e=>T(e).r,write:(e,t)=>oe({...T(e),r:t})},green:{max:255,label:"Green",read:e=>T(e).g,write:(e,t)=>oe({...T(e),g:t})},blue:{max:255,label:"Blue",read:e=>T(e).b,write:(e,t)=>oe({...T(e),b:t})},hue:{max:360,label:"Hue",read:e=>e.h,write:(e,t)=>({...e,h:t})},saturation:{max:100,label:"Saturation",read:e=>e.s,write:(e,t)=>({...e,s:t})},brightness:{max:100,label:"Brightness",read:e=>e.b,write:(e,t)=>({...e,b:t})},lightness:{max:100,label:"Lightness",read:e=>xe(e).l,write:(e,t)=>yo({...xe(e),l:t})},alpha:{max:100,label:"Opacity",read:e=>e.a*100,write:(e,t)=>({...e,a:t/100})}},te=K.forwardRef(({channel:e,...t},o)=>{let n=d("ColorPickerInput"),[r,i]=K.useState(null),l=e&&e!=="hex"?wo[e]:null,s=l?String(Math.round(l.read(n.color))):e==="hex"?ko(n.color,"hex",n.alpha):n.value,c=a=>{if(!n.interactive)return!1;if(l){let f=Number(a.trim());return a.trim()===""||!Number.isFinite(f)?!1:(n.setColor(l.write(n.color,bo(f,0,l.max)),{announce:!0}),!0)}let m=xo(a);return m?(n.setColor(m,{announce:!0}),!0):!1};return So(Ro.input,{type:"text",inputMode:l?"numeric":"text",autoComplete:"off",spellCheck:!1,"aria-label":l?l.label:"Colour value","data-channel":e??"value","data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0,disabled:n.disabled,readOnly:n.readOnly,...t,...vo("color-picker","input",t.className),ref:o,value:r??s,onChange:re(t.onChange,a=>i(a.target.value)),onKeyDown:re(t.onKeyDown,a=>{a.key==="Enter"?(a.preventDefault(),c(r??s),i(null)):a.key==="Escape"&&i(null)}),onBlur:re(t.onBlur,()=>{r!==null&&c(r),i(null)})})});te.displayName="ColorPickerInput";import*as G from"react";import{formatColor as Se,parseColor as No}from"../utils/color.js";import{skdxPart as Oo}from"../utils/part.js";import{composeEventHandlers as ge,Primitive as Fo}from"../utils/primitive.js";import{rovingTabIndex as Vo}from"../utils/useRovingFocus.js";import*as A from"react";import{useComposedRefs as go}from"../utils/composeRefs.js";import{createSafeContext as Eo}from"../utils/createContext.js";import{skdxPart as Do}from"../utils/part.js";import{composeEventHandlers as Ho,Primitive as To}from"../utils/primitive.js";import{useRovingFocus as Ao,useRovingTabStop as Lo}from"../utils/useRovingFocus.js";import{jsx as Re}from"react/jsx-runtime";var ve="[data-skdx-color-picker-swatch]",[Mo,we]=Eo("ColorPickerSwatchGroup"),ae=A.forwardRef(({loop:e=!0,...t},o)=>{let n=d("ColorPickerSwatchGroup"),r=A.useRef(null),i=go(o,r),[l,s]=A.useState(null),c=Ao({orientation:"both",loop:e,itemSelector:ve});return Lo(r,ve,"data-value",l,s),Re(Mo,{activeValue:l,setActiveValue:s,children:Re(To.div,{role:"radiogroup","aria-disabled":n.disabled||void 0,"aria-readonly":n.readOnly||void 0,"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0,...t,...Do("color-picker","swatch-group",t.className),ref:i,onKeyDown:Ho(t.onKeyDown,c)})})});ae.displayName="ColorPickerSwatchGroup";import{jsx as Io}from"react/jsx-runtime";var ne=G.forwardRef(({value:e,disabled:t,...o},n)=>{let r=d("ColorPickerSwatch"),i=we("ColorPickerSwatch"),l=No(e),s=r.disabled||t||l===null,c=l?Se(l,"hex",r.alpha):e,a=l!==null&&c===Se(r.color,"hex",r.alpha);G.useLayoutEffect(()=>{a&&i.setActiveValue(e)},[a,e,i]);let m={"--skdx-color-picker-swatch-value":c,...o.style};return Io(Fo.button,{type:"button",role:"radio","aria-checked":a,"aria-label":c,"aria-disabled":s||void 0,tabIndex:Vo(i.activeValue!==null,i.activeValue===e,s),"data-skdx-color-picker-swatch":"","data-value":e,"data-state":a?"checked":"unchecked","data-disabled":s?"":void 0,"data-readonly":r.readOnly?"":void 0,disabled:s,...o,...Oo("color-picker","swatch",o.className),ref:n,onFocus:ge(o.onFocus,()=>i.setActiveValue(e)),onClick:ge(o.onClick,()=>{l&&r.setColor(l,{announce:!0})}),style:m})});ne.displayName="ColorPickerSwatch";import{Fragment as Ko,jsx as R,jsxs as Go}from"react/jsx-runtime";var Ee=({showInput:e,showSwatches:t,showEyeDropper:o,swatches:n=[]})=>Go(Ko,{children:[R(Y,{children:R(Q,{})}),R(j,{children:R(ee,{})}),R(X,{children:R(q,{})}),e?R(te,{}):null,t&&n.length>0?R(ae,{"aria-label":"Preset colours",children:n.map(r=>R(ne,{value:r},r))}):null,o?R(Z,{}):null]});import{jsx as ie}from"react/jsx-runtime";var _o={h:0,s:0,b:0,a:1};function L(e){return Math.round(e*1e3)/1e3}var[Xo,d]=$o("ColorPicker"),Te=C.forwardRef((e,t)=>{let{value:o,defaultValue:n="#000000",onValueChange:r,onValueCommit:i,format:l,defaultFormat:s="hex",onFormatChange:c,alpha:a=!0,step:m=1,disabled:f=!1,readOnly:P=!1,showInput:h=!0,showSwatches:b=!0,showEyeDropper:w=!0,swatches:u=[],children:y,...S}=e,[k="hex",B]=He({prop:l,defaultProp:s,onChange:c}),[x=n,D]=He({prop:o,defaultProp:n,onChange:r}),[v,le]=C.useState(()=>De(o??n)??_o),[Me,U]=C.useState(x);if(x!==Me){U(x);let p=De(x);p&&le(p)}let W=C.useRef(x);W.current=x;let se=C.useRef(v);se.current=v;let M=!f&&!P,z=C.useCallback(p=>{let N=$(p,"hex",!1);return a&&p.a<1?`${N}, ${Math.round(p.a*100)}% opaque`:N},[a]),Ne=C.useCallback((p,N)=>{if(!M)return;let de=$(p,k,a);le(p),U(de),D(de),N?.announce&&Bo(z(p))},[M,k,a,D,z]),Oe=C.useCallback(p=>{M&&B(p)},[M,B]),ce=C.useRef(k);C.useEffect(()=>{if(ce.current===k)return;ce.current=k;let p=$(se.current,k,a);p!==W.current&&(U(p),D(p))},[k,a,D]);let Fe=zo(()=>i?.(W.current));return ie(Xo,{color:v,value:x,format:k,alpha:a,step:m,disabled:f,readOnly:P,interactive:M,describe:z,setColor:Ne,commit:Fe,setFormat:Oe,children:ie(Wo.div,{"data-value":x,"data-format":k,"data-disabled":f?"":void 0,"data-readonly":P?"":void 0,...S,...Uo("color-picker","root",S.className),ref:t,style:{"--skdx-color-picker-hue":`${L(v.h)}deg`,"--skdx-color-picker-hue-position":`${L(v.h/360*100)}%`,"--skdx-color-picker-saturation":`${L(v.s)}%`,"--skdx-color-picker-brightness":`${L(v.b)}%`,"--skdx-color-picker-alpha":L(v.a),"--skdx-color-picker-alpha-position":`${L(v.a*100)}%`,"--skdx-color-picker-value":$(v,"hex",a),...S.style},children:y??ie(Ee,{showInput:h,showSwatches:b,showEyeDropper:w,swatches:u})})})});Te.displayName="ColorPicker";import*as Le from"react";import{skdxPart as qo}from"../utils/part.js";import{composeEventHandlers as Yo}from"../utils/primitive.js";import{jsx as Ae}from"react/jsx-runtime";var Jo=["hex","rgb","hsl","hsb"],Qo={hex:"HEX",rgb:"RGB",hsl:"HSL",hsb:"HSB"},Zo=Le.forwardRef(({formats:e=Jo,children:t,...o},n)=>{let r=d("ColorPickerFormatSelect");return Ae("select",{"aria-label":"Colour format","aria-readonly":r.readOnly||void 0,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,disabled:r.disabled,...o,...qo("color-picker","format-select",o.className),ref:n,value:r.format,onChange:Yo(o.onChange,i=>r.setFormat(i.target.value)),children:t??e.map(i=>Ae("option",{value:i,children:Qo[i]},i))})});Zo.displayName="ColorPickerFormatSelect";export{Te as ColorPicker,X as ColorPickerAlphaSlider,q as ColorPickerAlphaSliderThumb,Y as ColorPickerArea,Q as ColorPickerAreaThumb,Z as ColorPickerEyeDropper,Zo as ColorPickerFormatSelect,j as ColorPickerHueSlider,ee as ColorPickerHueSliderThumb,te as ColorPickerInput,Xo as ColorPickerProvider,ne as ColorPickerSwatch,ae as ColorPickerSwatchGroup,Mo as ColorPickerSwatchGroupProvider,ve as SWATCH_SELECTOR,d as useColorPickerContext,we as useColorPickerSwatchGroupContext};
+'use client';
+import*as P from"react";import{appearanceAttrs as Lo}from"../utils/appearance.js";import{formatColor as $,parseColor as we}from"../utils/color.js";import{createSafeContext as Io}from"../utils/createContext.js";import{announce as Ko}from"../utils/liveAnnouncer.js";import{skdxPart as Mo}from"../utils/part.js";import{Primitive as Go}from"../utils/primitive.js";import{useCallbackRef as $o}from"../utils/useCallbackRef.js";import{useControllableState as ge}from"../utils/useControllableState.js";import{formatColor as Le}from"../utils/color.js";import{skdxPart as Ie}from"../utils/part.js";import{composeEventHandlers as ue,Primitive as Ke}from"../utils/primitive.js";import{clamp as Ne}from"../utils/clamp.js";import{directionalKey as Fe,useDirection as Oe}from"../utils/direction.js";import*as w from"react";import{clamp as de}from"../utils/clamp.js";function I(e){let o=w.useRef(e);w.useEffect(()=>{o.current=e});let[t,a]=w.useState(!1),r=w.useRef(null),i=(c,s)=>{let n=s.getBoundingClientRect();return{x:n.width?de((c.clientX-n.left)/n.width,0,1):0,y:n.height?de((c.clientY-n.top)/n.height,0,1):0}},l=c=>{if(r.current)return;let s=c.currentTarget,{pointerId:n}=c;s.setPointerCapture?.(n);let m=i(c,s);a(!0),o.current.onRatioChange(m,c.nativeEvent);let p=C=>{if(C.pointerId!==n)return;let k=i(C,s);k.x===m.x&&k.y===m.y||(m=k,o.current.onRatioChange(k,C))},h=C=>{C.pointerId===n&&(r.current?.(),a(!1),o.current.onRatioChangeEnd?.(C))},f=s.ownerDocument;f.addEventListener("pointermove",p),f.addEventListener("pointerup",h),f.addEventListener("pointercancel",h),r.current=()=>{f.removeEventListener("pointermove",p),f.removeEventListener("pointerup",h),f.removeEventListener("pointercancel",h),r.current=null}};return w.useEffect(()=>()=>r.current?.(),[]),{onPointerDown:l,dragging:t}}var Ve=10;function v(e){return Math.round(e*100)/100}function E(e,o,t){let a=o>0?Math.round(Math.round(e/o)*o*1e6)/1e6:e;return Ne(a,0,t)}function W(e){return e>0?e:1}function K(e){let{channel:o,consumerName:t,max:a,value:r,orientation:i,defaultLabel:l,valueText:c,onChange:s}=e,n=u(t),m=Oe(),p=e.limit??a,h=d=>E(d,n.step,p),{onPointerDown:f,dragging:C}=I({onRatioChange:d=>{let x=i==="horizontal"?d.x:1-d.y;s(h(x*a))},onRatioChangeEnd:()=>n.commit()}),k=d=>{if(!n.interactive)return;let x=Fe(d.key,d.currentTarget,m);if(x==="Home"||x==="End"){d.preventDefault(),s(x==="Home"?0:p);return}let g=W(n.step),N=Math.max(a/10,g),y={ArrowRight:g,ArrowUp:g,ArrowLeft:-g,ArrowDown:-g,PageUp:N,PageDown:-N}[x];if(y===void 0)return;d.preventDefault();let F=d.shiftKey&&x.startsWith("Arrow")?Ve:1;s(h(r+y*F))};return{props:{role:"slider","aria-label":l,"aria-valuemin":0,"aria-valuemax":a,"aria-valuenow":v(r),"aria-valuetext":c(r),"aria-orientation":i,"aria-disabled":n.disabled||void 0,"aria-readonly":n.readOnly||void 0,tabIndex:n.disabled?-1:0,"data-channel":o,"data-orientation":i,"data-value":v(r),"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0,"data-dragging":C?"":void 0},onKeyDown:k,onPointerDown:d=>{n.interactive&&f(d)},style:{touchAction:"none"},dragging:C}}import{jsx as Me}from"react/jsx-runtime";var z=({orientation:e="horizontal",label:o="Opacity",ref:t,...a})=>{let r=u("ColorPickerAlphaSlider"),{color:i}=r,l=K({channel:"alpha",consumerName:"ColorPickerAlphaSlider",max:100,value:i.a*100,orientation:e,defaultLabel:o,valueText:c=>`${Math.round(c)}% opaque, ${Le(i,"hex",!1)}`,onChange:c=>r.setColor({...i,a:c/100})});return r.alpha?Me(Ke.div,{...l.props,...a,...Ie("color-picker","alpha-slider",a.className),ref:t,onKeyDown:ue(a.onKeyDown,l.onKeyDown),onPointerDown:ue(a.onPointerDown,l.onPointerDown),style:{...l.style,...a.style}}):null};z.displayName="ColorPickerAlphaSlider";import{skdxPart as Ge}from"../utils/part.js";import{Primitive as $e}from"../utils/primitive.js";import{jsx as Ue}from"react/jsx-runtime";var X=({ref:e,...o})=>{let t=u("ColorPickerAlphaSliderThumb");return Ue($e.div,{"aria-hidden":!0,"data-channel":"alpha","data-value":v(t.color.a*100),"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,...o,...Ge("color-picker","alpha-slider-thumb",o.className),ref:e})};X.displayName="ColorPickerAlphaSliderThumb";import*as M from"react";import{skdxPart as Be}from"../utils/part.js";import{composeEventHandlers as We,Primitive as ze}from"../utils/primitive.js";import{jsx as Xe}from"react/jsx-runtime";var _=({ref:e,...o})=>{let t=u("ColorPickerArea"),a=M.useRef(t.color);M.useInsertionEffect(()=>{a.current=t.color});let{onPointerDown:r,dragging:i}=I({onRatioChange:({x:l,y:c})=>t.setColor({...a.current,s:E(l*100,t.step,100),b:E((1-c)*100,t.step,100)}),onRatioChangeEnd:()=>t.commit()});return Xe(ze.div,{"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,"data-dragging":i?"":void 0,...o,...Be("color-picker","area",o.className),ref:e,onPointerDown:We(o.onPointerDown,l=>{t.interactive&&r(l)}),style:{touchAction:"none",...o.style}})};_.displayName="ColorPickerArea";import{directionalKey as _e,useDirection as qe}from"../utils/direction.js";import{skdxPart as Je}from"../utils/part.js";import{Primitive as pe}from"../utils/primitive.js";import{jsx as q,jsxs as Qe}from"react/jsx-runtime";var Ye=10;function me({axis:e,label:o}){let t=u("ColorPickerAreaThumb"),a=qe(),{color:r,step:i}=t,l=e==="saturation"?r.s:r.b,c=s=>{if(!t.interactive)return;let n=_e(s.key,s.currentTarget,a),m=W(i),p=s.shiftKey?m*Ye:m,h=(d,x)=>E(d+x,i,100),f=null,C=n==="ArrowRight"||n==="ArrowUp";if(C||(n==="ArrowLeft"||n==="ArrowDown")){let d=C?p:-p;f=e==="saturation"?{...r,s:h(r.s,d)}:{...r,b:h(r.b,d)}}else if(n==="Home"||n==="End"){let d=n==="Home"?0:100;f=e==="saturation"?{...r,s:d}:{...r,b:d}}f&&(s.preventDefault(),t.setColor(f))};return q(pe.span,{role:"slider","aria-label":o,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":v(l),"aria-valuetext":`${Math.round(r.s)}% saturation, ${Math.round(r.b)}% brightness, ${t.describe(r)}`,"aria-orientation":e==="saturation"?"horizontal":"vertical","aria-disabled":t.disabled||void 0,"aria-readonly":t.readOnly||void 0,tabIndex:t.disabled?-1:0,"data-channel":e,"data-value":v(l),"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,onKeyDown:c})}var J=({saturationLabel:e="Saturation",brightnessLabel:o="Brightness",children:t,ref:a,...r})=>{let i=u("ColorPickerAreaThumb");return Qe(pe.div,{"data-value":i.value,"data-disabled":i.disabled?"":void 0,"data-readonly":i.readOnly?"":void 0,...r,...Je("color-picker","area-thumb",r.className),ref:a,children:[q(me,{axis:"saturation",label:e}),q(me,{axis:"brightness",label:o}),t]})};J.displayName="ColorPickerAreaThumb";import*as fe from"react";import{parseColor as Ze}from"../utils/color.js";import{skdxPart as je}from"../utils/part.js";import{composeEventHandlers as eo,Primitive as oo}from"../utils/primitive.js";import{jsx as no}from"react/jsx-runtime";var ro=()=>()=>{},to=()=>typeof window<"u"&&"EyeDropper"in window,ao=()=>!1,Y=({ref:e,...o})=>{let t=u("ColorPickerEyeDropper"),a=fe.useSyncExternalStore(ro,to,ao),r=()=>{let i=window.EyeDropper;i&&new i().open().then(({sRGBHex:l})=>{let c=Ze(l);c&&t.setColor({...c,a:t.color.a},{announce:!0})}).catch(()=>{})};return a?no(oo.button,{type:"button","aria-label":"Pick a colour from the screen","data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,disabled:t.disabled,...o,...je("color-picker","eye-dropper",o.className),ref:e,onClick:eo(o.onClick,()=>{t.interactive&&r()})}):null};Y.displayName="ColorPickerEyeDropper";import{skdxPart as io}from"../utils/part.js";import{composeEventHandlers as Ce,Primitive as lo}from"../utils/primitive.js";import{jsx as co}from"react/jsx-runtime";var Q=({orientation:e="horizontal",label:o="Hue",ref:t,...a})=>{let r=u("ColorPickerHueSlider"),{color:i,step:l}=r,c=l>0?Math.floor(359/l)*l:359,s=K({channel:"hue",consumerName:"ColorPickerHueSlider",max:360,limit:c,value:i.h,orientation:e,defaultLabel:o,valueText:n=>`${Math.round(n)} degrees, ${r.describe(i)}`,onChange:n=>r.setColor({...i,h:n})});return co(lo.div,{...s.props,...a,...io("color-picker","hue-slider",a.className),ref:t,onKeyDown:Ce(a.onKeyDown,s.onKeyDown),onPointerDown:Ce(a.onPointerDown,s.onPointerDown),style:{...s.style,...a.style}})};Q.displayName="ColorPickerHueSlider";import{skdxPart as so}from"../utils/part.js";import{Primitive as uo}from"../utils/primitive.js";import{jsx as mo}from"react/jsx-runtime";var Z=({ref:e,...o})=>{let t=u("ColorPickerHueSliderThumb");return mo(uo.div,{"aria-hidden":!0,"data-channel":"hue","data-value":v(t.color.h),"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,...o,...so("color-picker","hue-slider-thumb",o.className),ref:e})};Z.displayName="ColorPickerHueSliderThumb";import*as Pe from"react";import{clamp as po}from"../utils/clamp.js";import{formatColor as fo,hsbToHsl as he,hsbToRgb as D,hslToHsb as Co,parseColor as ho,rgbToHsb as j}from"../utils/color.js";import{skdxPart as Po}from"../utils/part.js";import{composeEventHandlers as ee,Primitive as bo}from"../utils/primitive.js";import{jsx as yo}from"react/jsx-runtime";var ko={red:{max:255,label:"Red",read:e=>D(e).r,write:(e,o)=>j({...D(e),r:o})},green:{max:255,label:"Green",read:e=>D(e).g,write:(e,o)=>j({...D(e),g:o})},blue:{max:255,label:"Blue",read:e=>D(e).b,write:(e,o)=>j({...D(e),b:o})},hue:{max:360,label:"Hue",read:e=>e.h,write:(e,o)=>({...e,h:o})},saturation:{max:100,label:"Saturation",read:e=>e.s,write:(e,o)=>({...e,s:o})},brightness:{max:100,label:"Brightness",read:e=>e.b,write:(e,o)=>({...e,b:o})},lightness:{max:100,label:"Lightness",read:e=>he(e).l,write:(e,o)=>Co({...he(e),l:o})},alpha:{max:100,label:"Opacity",read:e=>e.a*100,write:(e,o)=>({...e,a:o/100})}},oe=({channel:e,ref:o,...t})=>{let a=u("ColorPickerInput"),[r,i]=Pe.useState(null),l=e&&e!=="hex"?ko[e]:null,c=a.value;l?c=String(Math.round(l.read(a.color))):e==="hex"&&(c=fo(a.color,"hex",a.alpha));let s=n=>{if(!a.interactive)return!1;if(l){let p=Number(n.trim());return n.trim()===""||!Number.isFinite(p)?!1:(a.setColor(l.write(a.color,po(p,0,l.max)),{announce:!0}),!0)}let m=ho(n);return m?(a.setColor(m,{announce:!0}),!0):!1};return yo(bo.input,{type:"text",inputMode:l?"numeric":"text",autoComplete:"off",spellCheck:!1,"aria-label":l?l.label:"Colour value","data-channel":e??"value","data-disabled":a.disabled?"":void 0,"data-readonly":a.readOnly?"":void 0,disabled:a.disabled,readOnly:a.readOnly,...t,...Po("color-picker","input",t.className),ref:o,value:r??c,onChange:ee(t.onChange,n=>i(n.target.value)),onKeyDown:ee(t.onKeyDown,n=>{n.key==="Enter"?(n.preventDefault(),s(r??c),i(null)):n.key==="Escape"&&i(null)}),onBlur:ee(t.onBlur,()=>{r!==null&&s(r),i(null)})})};oe.displayName="ColorPickerInput";import*as ve from"react";import{formatColor as xe,parseColor as Ao}from"../utils/color.js";import{skdxPart as Ho}from"../utils/part.js";import{composeEventHandlers as Re,Primitive as To}from"../utils/primitive.js";import{rovingTabIndex as No}from"../utils/useRovingFocus.js";import*as G from"react";import{useComposedRefs as xo}from"../utils/composeRefs.js";import{createSafeContext as Ro}from"../utils/createContext.js";import{skdxPart as vo}from"../utils/part.js";import{composeEventHandlers as So,Primitive as wo}from"../utils/primitive.js";import{useRovingFocus as go,useRovingTabStop as Eo}from"../utils/useRovingFocus.js";import{jsx as ke}from"react/jsx-runtime";var be="[data-skdx-color-picker-swatch]",[Do,ye]=Ro("ColorPickerSwatchGroup"),re=({loop:e=!0,ref:o,...t})=>{let a=u("ColorPickerSwatchGroup"),r=G.useRef(null),i=xo(o,r),[l,c]=G.useState(null),s=go({orientation:"both",loop:e,itemSelector:be});return Eo(r,be,"data-value",l,c),ke(Do,{activeValue:l,setActiveValue:c,children:ke(wo.div,{role:"radiogroup","aria-disabled":a.disabled||void 0,"aria-readonly":a.readOnly||void 0,"data-disabled":a.disabled?"":void 0,"data-readonly":a.readOnly?"":void 0,...t,...vo("color-picker","swatch-group",t.className),ref:i,onKeyDown:So(t.onKeyDown,s)})})};re.displayName="ColorPickerSwatchGroup";import{jsx as Fo}from"react/jsx-runtime";var te=({value:e,disabled:o,ref:t,...a})=>{let r=u("ColorPickerSwatch"),i=ye("ColorPickerSwatch"),l=Ao(e),c=r.disabled||o||l===null,s=l?xe(l,"hex",r.alpha):e,n=l!==null&&s===xe(r.color,"hex",r.alpha);ve.useLayoutEffect(()=>{n&&i.setActiveValue(e)},[n,e,i]);let m={"--skdx-color-picker-swatch-value":s,...a.style};return Fo(To.button,{type:"button",role:"radio","aria-checked":n,"aria-label":s,"aria-disabled":c||void 0,tabIndex:No(i.activeValue!==null,i.activeValue===e,c),"data-skdx-color-picker-swatch":"","data-value":e,"data-state":n?"checked":"unchecked","data-disabled":c?"":void 0,"data-readonly":r.readOnly?"":void 0,disabled:c,...a,...Ho("color-picker","swatch",a.className),ref:t,onFocus:Re(a.onFocus,()=>{i.setActiveValue(e),!n&&l&&r.setColor(l,{announce:!0})}),onClick:Re(a.onClick,()=>{l&&r.setColor(l,{announce:!0})}),style:m})};te.displayName="ColorPickerSwatch";import{Fragment as Oo,jsx as R,jsxs as Vo}from"react/jsx-runtime";var Se=({showInput:e,showSwatches:o,showEyeDropper:t,swatches:a=[]})=>Vo(Oo,{children:[R(_,{children:R(J,{})}),R(Q,{children:R(Z,{})}),R(z,{children:R(X,{})}),e?R(oe,{}):null,o&&a.length>0?R(re,{"aria-label":"Preset colours",children:a.map(r=>R(te,{value:r},r))}):null,t?R(Y,{}):null]});import{jsx as ae}from"react/jsx-runtime";var Uo={h:0,s:0,b:0,a:1};function A(e){return Math.round(e*1e3)/1e3}var[Bo,u]=Io("ColorPicker");function Wo(e,o){return{"data-disabled":e?"":void 0,"data-readonly":o?"":void 0}}function zo({value:e,defaultValue:o,onValueChange:t,format:a,defaultFormat:r,onFormatChange:i}){let[l="hex",c]=ge({prop:a,defaultProp:r,onChange:i}),[s=o,n]=ge({prop:e,defaultProp:o,onChange:t}),[m,p]=P.useState(()=>we(e??o)??Uo),[h,f]=P.useState(s);if(s!==h){f(s);let d=we(s);d&&p(d)}let C=P.useRef(s);P.useInsertionEffect(()=>{C.current=s});let k=P.useRef(m);return P.useInsertionEffect(()=>{k.current=m}),{format:l,setFormatState:c,value:s,setValue:n,color:m,setColorState:p,setOwnValue:f,valueRef:C,colorRef:k}}var Ee=({ref:e,...o})=>{let{value:t,defaultValue:a="#000000",onValueChange:r,onValueCommit:i,format:l,defaultFormat:c="hex",onFormatChange:s,alpha:n=!0,step:m=1,disabled:p=!1,readOnly:h=!1,showInput:f=!0,showSwatches:C=!0,showEyeDropper:k=!0,swatches:d=[],children:x,fullWidth:g,size:N,...H}=o,{format:y,setFormatState:F,value:ne,setValue:O,color:S,setColorState:ie,setOwnValue:V,valueRef:U,colorRef:le}=zo({value:t,defaultValue:a,onValueChange:r,format:l,defaultFormat:c,onFormatChange:s}),T=!p&&!h,B=P.useCallback(b=>{let L=$(b,"hex",!1);return n&&b.a<1?`${L}, ${Math.round(b.a*100)}% opaque`:L},[n]),Ae=P.useCallback((b,L)=>{if(!T)return;let se=$(b,y,n);ie(b),V(se),O(se),L?.announce&&Ko(B(b))},[T,y,n,O,B,ie,V]),He=P.useCallback(b=>{T&&F(b)},[T,F]),ce=P.useRef(y);P.useEffect(()=>{if(ce.current===y)return;ce.current=y;let b=$(le.current,y,n);b!==U.current&&(V(b),O(b))},[y,n,O,le,U,V]);let Te=$o(()=>i?.(U.current));return ae(Bo,{color:S,value:ne,format:y,alpha:n,step:m,disabled:p,readOnly:h,interactive:T,describe:B,setColor:Ae,commit:Te,setFormat:He,children:ae(Go.div,{"data-value":ne,"data-format":y,...Wo(p,h),...H,...Lo({fullWidth:g,size:N},H),...Mo("color-picker","root",H.className),ref:e,style:{"--skdx-color-picker-hue":`${A(S.h)}deg`,"--skdx-color-picker-hue-position":`${A(S.h/360*100)}%`,"--skdx-color-picker-saturation":`${A(S.s)}%`,"--skdx-color-picker-brightness":`${A(S.b)}%`,"--skdx-color-picker-alpha":A(S.a),"--skdx-color-picker-alpha-position":`${A(S.a*100)}%`,"--skdx-color-picker-value":$(S,"hex",n),...H.style},children:x??ae(Se,{showInput:f,showSwatches:C,showEyeDropper:k,swatches:d})})})};Ee.displayName="ColorPicker";import{skdxPart as Xo}from"../utils/part.js";import{composeEventHandlers as _o}from"../utils/primitive.js";import{jsx as De}from"react/jsx-runtime";var qo=["hex","rgb","hsl","hsb"],Jo={hex:"HEX",rgb:"RGB",hsl:"HSL",hsb:"HSB"},Yo=({formats:e=qo,children:o,ref:t,...a})=>{let r=u("ColorPickerFormatSelect");return De("select",{"aria-label":"Colour format","aria-readonly":r.readOnly||void 0,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,disabled:r.disabled,...a,...Xo("color-picker","format-select",a.className),ref:t,value:r.format,onChange:_o(a.onChange,i=>r.setFormat(i.target.value)),children:o??e.map(i=>De("option",{value:i,children:Jo[i]},i))})};Yo.displayName="ColorPickerFormatSelect";export{Ee as ColorPicker,z as ColorPickerAlphaSlider,X as ColorPickerAlphaSliderThumb,_ as ColorPickerArea,J as ColorPickerAreaThumb,Y as ColorPickerEyeDropper,Yo as ColorPickerFormatSelect,Q as ColorPickerHueSlider,Z as ColorPickerHueSliderThumb,oe as ColorPickerInput,Bo as ColorPickerProvider,te as ColorPickerSwatch,re as ColorPickerSwatchGroup,Do as ColorPickerSwatchGroupProvider,be as SWATCH_SELECTOR,u as useColorPickerContext,ye as useColorPickerSwatchGroupContext};

package/dist/color-picker/ColorPickerAlphaSlider.d.cts

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAlphaSliderProps } from './types.cjs';
 /**
- * Opacity track, 0–100% (reports in percent, stores as 0–1 alpha).
- * Renders nothing when root has `alpha={false}`.
+ * Opacity track, 0-100%; renders nothing when the root has `alpha={false}`.
  *
  * ```css
  * .my-alpha {
@@ -21,4 +20,7 @@ import type { ColorPickerAlphaSliderProps } from './types.cjs';
  * </ColorPickerAlphaSlider>
  * ```
  */
-export declare const ColorPickerAlphaSlider: React.ForwardRefExoticComponent<Omit<ColorPickerAlphaSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerAlphaSlider: {
+    ({ orientation, label, ref: forwardedRef, ...props }: ColorPickerAlphaSliderProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerAlphaSlider.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAlphaSliderProps } from './types.js';
 /**
- * Opacity track, 0–100% (reports in percent, stores as 0–1 alpha).
- * Renders nothing when root has `alpha={false}`.
+ * Opacity track, 0-100%; renders nothing when the root has `alpha={false}`.
  *
  * ```css
  * .my-alpha {
@@ -21,4 +20,7 @@ import type { ColorPickerAlphaSliderProps } from './types.js';
  * </ColorPickerAlphaSlider>
  * ```
  */
-export declare const ColorPickerAlphaSlider: React.ForwardRefExoticComponent<Omit<ColorPickerAlphaSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerAlphaSlider: {
+    ({ orientation, label, ref: forwardedRef, ...props }: ColorPickerAlphaSliderProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerAlphaSliderThumb.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAlphaSliderThumbProps } from './types.cjs';
 /**
- * Visual-only alpha slider thumb, `aria-hidden` since track carries slider semantics.
- *
- * Ships no positioning — use `--skdx-color-picker-alpha-position` CSS variable.
+ * Visual-only alpha slider thumb, `aria-hidden`; position it with `--skdx-color-picker-alpha-position`.
  *
  * ```css
  * .my-alpha-thumb {
@@ -12,9 +10,7 @@ import type { ColorPickerAlphaSliderThumbProps } from './types.cjs';
  * }
  * ```
  *
- * `data-value` is the opacity in **percent**, matching what the track reports,
- * not the `0–1` alpha the colour stores. `data-dragging` lives on the track;
- * reach it with `[data-channel='alpha'][data-dragging] .my-alpha-thumb`.
+ * `data-value` reports the opacity in percent, not the `0-1` alpha the colour stores.
  *
  * @example
  * ```tsx
@@ -23,4 +19,7 @@ import type { ColorPickerAlphaSliderThumbProps } from './types.cjs';
  * </ColorPickerAlphaSlider>
  * ```
  */
-export declare const ColorPickerAlphaSliderThumb: React.ForwardRefExoticComponent<Omit<ColorPickerAlphaSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerAlphaSliderThumb: {
+    ({ ref: forwardedRef, ...props }: ColorPickerAlphaSliderThumbProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerAlphaSliderThumb.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAlphaSliderThumbProps } from './types.js';
 /**
- * Visual-only alpha slider thumb, `aria-hidden` since track carries slider semantics.
- *
- * Ships no positioning — use `--skdx-color-picker-alpha-position` CSS variable.
+ * Visual-only alpha slider thumb, `aria-hidden`; position it with `--skdx-color-picker-alpha-position`.
  *
  * ```css
  * .my-alpha-thumb {
@@ -12,9 +10,7 @@ import type { ColorPickerAlphaSliderThumbProps } from './types.js';
  * }
  * ```
  *
- * `data-value` is the opacity in **percent**, matching what the track reports,
- * not the `0–1` alpha the colour stores. `data-dragging` lives on the track;
- * reach it with `[data-channel='alpha'][data-dragging] .my-alpha-thumb`.
+ * `data-value` reports the opacity in percent, not the `0-1` alpha the colour stores.
  *
  * @example
  * ```tsx
@@ -23,4 +19,7 @@ import type { ColorPickerAlphaSliderThumbProps } from './types.js';
  * </ColorPickerAlphaSlider>
  * ```
  */
-export declare const ColorPickerAlphaSliderThumb: React.ForwardRefExoticComponent<Omit<ColorPickerAlphaSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerAlphaSliderThumb: {
+    ({ ref: forwardedRef, ...props }: ColorPickerAlphaSliderThumbProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerAnatomy.d.cts

@@ -1,11 +1,8 @@
-/**
- * Default anatomy for {@link ColorPicker}: 2D area, hue and alpha tracks, optional input, swatches, and eyedropper. `ColorPickerAlphaSlider` auto-gates on the root's `alpha` prop.
- *
- * @internal
- */
+import type { JSX } from 'react';
+/** @internal */
 export declare const ColorPickerAnatomy: ({ showInput, showSwatches, showEyeDropper, swatches, }: {
-    showInput?: boolean;
-    showSwatches?: boolean;
-    showEyeDropper?: boolean;
-    swatches?: string[];
-}) => import("react").JSX.Element;
+    showInput?: boolean | undefined;
+    showSwatches?: boolean | undefined;
+    showEyeDropper?: boolean | undefined;
+    swatches?: string[] | undefined;
+}) => JSX.Element;

package/dist/color-picker/ColorPickerAnatomy.d.ts

@@ -1,11 +1,8 @@
-/**
- * Default anatomy for {@link ColorPicker}: 2D area, hue and alpha tracks, optional input, swatches, and eyedropper. `ColorPickerAlphaSlider` auto-gates on the root's `alpha` prop.
- *
- * @internal
- */
+import type { JSX } from 'react';
+/** @internal */
 export declare const ColorPickerAnatomy: ({ showInput, showSwatches, showEyeDropper, swatches, }: {
-    showInput?: boolean;
-    showSwatches?: boolean;
-    showEyeDropper?: boolean;
-    swatches?: string[];
-}) => import("react").JSX.Element;
+    showInput?: boolean | undefined;
+    showSwatches?: boolean | undefined;
+    showEyeDropper?: boolean | undefined;
+    swatches?: string[] | undefined;
+}) => JSX.Element;

package/dist/color-picker/ColorPickerArea.d.cts

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import type { ColorPickerAreaProps } from './types.cjs';
 /**
- * 2D saturation/brightness surface: saturation runs left-to-right,
- * brightness bottom-to-top at the current hue. Pointer down seeks to color; drag updates until release.
- *
- * No ARIA of its own; accessibility lives in `ColorPickerAreaThumb` (`role="slider"` per axis).
- * Drag persists across window leaving. Ships no CSS — use `--skdx-color-picker-hue`,
- * `--skdx-color-picker-saturation`, `--skdx-color-picker-brightness` custom properties.
+ * 2D saturation/brightness surface at the current hue; pointer down seeks to a colour, drag updates until release.
  *
  * @example
  * ```tsx
@@ -15,4 +10,7 @@ import type { ColorPickerAreaProps } from './types.cjs';
  * </ColorPickerArea>
  * ```
  */
-export declare const ColorPickerArea: React.ForwardRefExoticComponent<Omit<ColorPickerAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerArea: {
+    ({ ref: forwardedRef, ...props }: ColorPickerAreaProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerArea.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import type { ColorPickerAreaProps } from './types.js';
 /**
- * 2D saturation/brightness surface: saturation runs left-to-right,
- * brightness bottom-to-top at the current hue. Pointer down seeks to color; drag updates until release.
- *
- * No ARIA of its own; accessibility lives in `ColorPickerAreaThumb` (`role="slider"` per axis).
- * Drag persists across window leaving. Ships no CSS — use `--skdx-color-picker-hue`,
- * `--skdx-color-picker-saturation`, `--skdx-color-picker-brightness` custom properties.
+ * 2D saturation/brightness surface at the current hue; pointer down seeks to a colour, drag updates until release.
  *
  * @example
  * ```tsx
@@ -15,4 +10,7 @@ import type { ColorPickerAreaProps } from './types.js';
  * </ColorPickerArea>
  * ```
  */
-export declare const ColorPickerArea: React.ForwardRefExoticComponent<Omit<ColorPickerAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerArea: {
+    ({ ref: forwardedRef, ...props }: ColorPickerAreaProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerAreaThumb.d.cts

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAreaThumbProps } from './types.cjs';
 /**
- * The handle on the {@link ColorPickerArea}: two nested `role="slider"`
- * elements for saturation and brightness, each with truthful `aria-valuenow`.
- *
- * Two sliders: `role="slider"` requires `aria-valuenow` per number. 2D colour
- * has no single number, so one slider would lie. Two axes each report truth.
- * Cost: two tab stops in one visual thumb (standard trade in 2D pickers).
- *
- * Axes are focus targets; size them in CSS (typically fill the thumb).
+ * Handle on {@link ColorPickerArea}: two nested `role="slider"` elements, one per axis, each with a truthful `aria-valuenow`.
  *
  * @example
  * ```tsx
@@ -17,4 +10,7 @@ import type { ColorPickerAreaThumbProps } from './types.cjs';
  * </ColorPickerArea>
  * ```
  */
-export declare const ColorPickerAreaThumb: React.ForwardRefExoticComponent<Omit<ColorPickerAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerAreaThumb: {
+    ({ saturationLabel, brightnessLabel, children, ref: forwardedRef, ...props }: ColorPickerAreaThumbProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerAreaThumb.d.ts

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAreaThumbProps } from './types.js';
 /**
- * The handle on the {@link ColorPickerArea}: two nested `role="slider"`
- * elements for saturation and brightness, each with truthful `aria-valuenow`.
- *
- * Two sliders: `role="slider"` requires `aria-valuenow` per number. 2D colour
- * has no single number, so one slider would lie. Two axes each report truth.
- * Cost: two tab stops in one visual thumb (standard trade in 2D pickers).
- *
- * Axes are focus targets; size them in CSS (typically fill the thumb).
+ * Handle on {@link ColorPickerArea}: two nested `role="slider"` elements, one per axis, each with a truthful `aria-valuenow`.
  *
  * @example
  * ```tsx
@@ -17,4 +10,7 @@ import type { ColorPickerAreaThumbProps } from './types.js';
  * </ColorPickerArea>
  * ```
  */
-export declare const ColorPickerAreaThumb: React.ForwardRefExoticComponent<Omit<ColorPickerAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerAreaThumb: {
+    ({ saturationLabel, brightnessLabel, children, ref: forwardedRef, ...props }: ColorPickerAreaThumbProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerEyeDropper.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { ColorPickerEyeDropperProps } from './types.cjs';
 /**
- * Opens browser's screen colour picker. Renders `null` where `EyeDropper` is unsupported (Firefox, Safari),
- * feature-detected through `useSyncExternalStore` so hydration doesn't mismatch.
- * Sampled colour is opaque; current alpha is preserved. Result is announced to screen readers.
+ * Opens the browser's screen colour picker; renders `null` where `EyeDropper` is unsupported.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { ColorPickerEyeDropperProps } from './types.cjs';
  * </ColorPickerEyeDropper>
  * ```
  */
-export declare const ColorPickerEyeDropper: React.ForwardRefExoticComponent<Omit<ColorPickerEyeDropperProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ColorPickerEyeDropper: {
+    ({ ref: forwardedRef, ...props }: ColorPickerEyeDropperProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerEyeDropper.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { ColorPickerEyeDropperProps } from './types.js';
 /**
- * Opens browser's screen colour picker. Renders `null` where `EyeDropper` is unsupported (Firefox, Safari),
- * feature-detected through `useSyncExternalStore` so hydration doesn't mismatch.
- * Sampled colour is opaque; current alpha is preserved. Result is announced to screen readers.
+ * Opens the browser's screen colour picker; renders `null` where `EyeDropper` is unsupported.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { ColorPickerEyeDropperProps } from './types.js';
  * </ColorPickerEyeDropper>
  * ```
  */
-export declare const ColorPickerEyeDropper: React.ForwardRefExoticComponent<Omit<ColorPickerEyeDropperProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ColorPickerEyeDropper: {
+    ({ ref: forwardedRef, ...props }: ColorPickerEyeDropperProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerFormatSelect.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerFormatSelectProps } from './types.cjs';
 /**
- * Switches notation (`hex`, `rgb`, `hsl`, `hsb`) via native `<select>`.
- * Format change doesn't alter color but re-spells `value`, firing
- * `onValueChange` alongside `onFormatChange`.
+ * Switches colour notation (`hex`, `rgb`, `hsl`, `hsb`) via a native `<select>`.
  *
  * @example
  * ```tsx
@@ -11,4 +9,7 @@ import type { ColorPickerFormatSelectProps } from './types.cjs';
  * <ColorPickerFormatSelect formats={['hex', 'rgb']} aria-label="Notation" />
  * ```
  */
-export declare const ColorPickerFormatSelect: React.ForwardRefExoticComponent<Omit<ColorPickerFormatSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const ColorPickerFormatSelect: {
+    ({ formats, children, ref: forwardedRef, ...props }: ColorPickerFormatSelectProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerFormatSelect.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerFormatSelectProps } from './types.js';
 /**
- * Switches notation (`hex`, `rgb`, `hsl`, `hsb`) via native `<select>`.
- * Format change doesn't alter color but re-spells `value`, firing
- * `onValueChange` alongside `onFormatChange`.
+ * Switches colour notation (`hex`, `rgb`, `hsl`, `hsb`) via a native `<select>`.
  *
  * @example
  * ```tsx
@@ -11,4 +9,7 @@ import type { ColorPickerFormatSelectProps } from './types.js';
  * <ColorPickerFormatSelect formats={['hex', 'rgb']} aria-label="Notation" />
  * ```
  */
-export declare const ColorPickerFormatSelect: React.ForwardRefExoticComponent<Omit<ColorPickerFormatSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const ColorPickerFormatSelect: {
+    ({ formats, children, ref: forwardedRef, ...props }: ColorPickerFormatSelectProps): React.ReactNode;
+    displayName: string;
+};

package/dist/color-picker/ColorPickerHueSlider.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerHueSliderProps } from './types.cjs';
 /**
- * Linear hue slider, 0–360° (not wrapping; use `AngleSlider` for wrapping).
- * Pointer moves left-to-right when horizontal, bottom-to-top when vertical.
- * Arrow keys mirror under `dir="rtl"`.
+ * Linear hue slider, 0-360 degrees; not wrapping (use `AngleSlider` for that).
  *
  * ```css
  * .my-hue {
@@ -22,4 +20,7 @@ import type { ColorPickerHueSliderProps } from './types.cjs';
  * </ColorPickerHueSlider>
  * ```
  */
-export declare const ColorPickerHueSlider: React.ForwardRefExoticComponent<Omit<ColorPickerHueSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerHueSlider: {
+    ({ orientation, label, ref: forwardedRef, ...props }: ColorPickerHueSliderProps): React.ReactNode;
+    displayName: string;
+};