@skdx/react 0.27.0 → 0.29.0

package/dist/color-picker/ColorPicker.js

@@ -1 +1,2 @@
-import*as x from"react";import{formatColor as M,parseColor as Y}from"../utils/color.js";import{createSafeContext as Ae}from"../utils/createContext.js";import{announce as Le}from"../utils/liveAnnouncer.js";import{skdxPart as Me}from"../utils/part.js";import{Primitive as Ne}from"../utils/primitive.js";import{useCallbackRef as Oe}from"../utils/useCallbackRef.js";import{useControllableState as J}from"../utils/useControllableState.js";import{jsx as Q}from"react/jsx-runtime";var Fe={h:0,s:0,b:0,a:1};function g(e){return Math.round(e*1e3)/1e3}var[Ve,d]=Ae("ColorPicker"),Z=x.forwardRef((e,o)=>{let{value:t,defaultValue:a="#000000",onValueChange:r,onValueCommit:n,onValueChangeEnd:l,format:s,defaultFormat:c="hex",onFormatChange:i,alpha:u=!0,step:C=1,disabled:f=!1,readOnly:m=!1,...p}=e,[b="hex",P]=J({prop:s,defaultProp:c,onChange:i}),[h=a,v]=J({prop:t,defaultProp:a,onChange:r}),[k,G]=x.useState(()=>Y(t??a)??Fe),[L,T]=x.useState(h);if(h!==L){T(h);let y=Y(h);y&&G(y)}let _=x.useRef(h);_.current=h;let X=x.useRef(k);X.current=k;let A=!f&&!m,$=x.useCallback(y=>{let S=M(y,"hex",!1);return u&&y.a<1?`${S}, ${Math.round(y.a*100)}% opaque`:S},[u]),De=x.useCallback((y,S)=>{if(!A)return;let q=M(y,b,u);G(y),T(q),v(q),S?.announce&&Le($(y))},[A,b,u,v,$]),He=x.useCallback(y=>{if(!A)return;P(y);let S=M(X.current,y,u);T(S),v(S)},[A,u,P,v]),Te=Oe(()=>(n??l)?.(_.current));return Q(Ve,{color:k,value:h,format:b,alpha:u,step:C,disabled:f,readOnly:m,interactive:A,describe:$,setColor:De,commit:Te,setFormat:He,children:Q(Ne.div,{"data-value":h,"data-format":b,"data-disabled":f?"":void 0,"data-readonly":m?"":void 0,...p,...Me("color-picker","root",p.className),ref:o,style:{"--skdx-color-picker-hue":`${g(k.h)}deg`,"--skdx-color-picker-hue-position":`${g(k.h/360*100)}%`,"--skdx-color-picker-saturation":`${g(k.s)}%`,"--skdx-color-picker-brightness":`${g(k.b)}%`,"--skdx-color-picker-alpha":g(k.a),"--skdx-color-picker-alpha-position":`${g(k.a*100)}%`,"--skdx-color-picker-value":M(k,"hex",u),...p.style}})})});Z.displayName="ColorPicker";import*as F from"react";import{skdxPart as Be}from"../utils/part.js";import{composeEventHandlers as Ue,Primitive as We}from"../utils/primitive.js";import{clamp as Ke}from"../utils/clamp.js";import{directionalKey as Ie,useDirection as Ge}from"../utils/direction.js";import*as w from"react";import{clamp as j}from"../utils/clamp.js";function N(e){let o=w.useRef(e);w.useEffect(()=>{o.current=e});let[t,a]=w.useState(!1),r=w.useRef(null),n=(s,c)=>{let i=c.getBoundingClientRect();return{x:i.width?j((s.clientX-i.left)/i.width,0,1):0,y:i.height?j((s.clientY-i.top)/i.height,0,1):0}},l=s=>{if(r.current)return;let c=s.currentTarget,{pointerId:i}=s;c.setPointerCapture?.(i);let u=n(s,c);a(!0),o.current.onRatioChange(u,s.nativeEvent);let C=p=>{if(p.pointerId!==i)return;let b=n(p,c);b.x===u.x&&b.y===u.y||(u=b,o.current.onRatioChange(b,p))},f=p=>{p.pointerId===i&&(r.current?.(),a(!1),o.current.onRatioChangeEnd?.(p))},m=c.ownerDocument;m.addEventListener("pointermove",C),m.addEventListener("pointerup",f),m.addEventListener("pointercancel",f),r.current=()=>{m.removeEventListener("pointermove",C),m.removeEventListener("pointerup",f),m.removeEventListener("pointercancel",f),r.current=null}};return w.useEffect(()=>()=>r.current?.(),[]),{onPointerDown:l,dragging:t}}var $e=10;function R(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 Ke(a,0,t)}function B(e){return e>0?e:1}function O(e){let{channel:o,consumerName:t,max:a,value:r,orientation:n,defaultLabel:l,valueText:s,onChange:c}=e,i=d(t),u=Ge(),C=e.limit??a,f=P=>E(P,i.step,C),{onPointerDown:m,dragging:p}=N({onRatioChange:P=>{let h=n==="horizontal"?P.x:1-P.y;c(f(h*a))},onRatioChangeEnd:()=>i.commit()}),b=P=>{if(!i.interactive)return;let h=Ie(P.key,P.currentTarget,u);if(h==="Home"||h==="End"){P.preventDefault(),c(h==="Home"?0:C);return}let v=B(i.step),k=Math.max(a/10,v),L={ArrowRight:v,ArrowUp:v,ArrowLeft:-v,ArrowDown:-v,PageUp:k,PageDown:-k}[h];if(L===void 0)return;P.preventDefault();let T=P.shiftKey&&h.startsWith("Arrow")?$e:1;c(f(r+L*T))};return{props:{role:"slider","aria-label":l,"aria-valuemin":0,"aria-valuemax":a,"aria-valuenow":R(r),"aria-valuetext":s(r),"aria-orientation":n,"aria-disabled":i.disabled||void 0,"aria-readonly":i.readOnly||void 0,tabIndex:i.disabled?-1:0,"data-channel":o,"data-orientation":n,"data-value":R(r),"data-disabled":i.disabled?"":void 0,"data-readonly":i.readOnly?"":void 0,"data-dragging":p?"":void 0},onKeyDown:b,onPointerDown:P=>{i.interactive&&m(P)},style:{touchAction:"none"},dragging:p}}import{jsx as ze}from"react/jsx-runtime";var ee=F.forwardRef((e,o)=>{let t=d("ColorPickerArea"),a=F.useRef(t.color);a.current=t.color;let{onPointerDown:r,dragging:n}=N({onRatioChange:({x:l,y:s})=>t.setColor({...a.current,s:E(l*100,t.step,100),b:E((1-s)*100,t.step,100)}),onRatioChangeEnd:()=>t.commit()});return ze(We.div,{"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,"data-dragging":n?"":void 0,...e,...Be("color-picker","area",e.className),ref:o,onPointerDown:Ue(e.onPointerDown,l=>{t.interactive&&r(l)}),style:{touchAction:"none",...e.style}})});ee.displayName="ColorPickerArea";import*as re from"react";import{directionalKey as _e,useDirection as Xe}from"../utils/direction.js";import{skdxPart as qe}from"../utils/part.js";import{Primitive as te}from"../utils/primitive.js";import{jsx as U,jsxs as Je}from"react/jsx-runtime";var Ye=10;function oe({axis:e,label:o}){let t=d("ColorPickerAreaThumb"),a=Xe(),{color:r,step:n}=t,l=e==="saturation"?r.s:r.b,s=c=>{if(!t.interactive)return;let i=_e(c.key,c.currentTarget,a),u=B(n),C=c.shiftKey?u*Ye:u,f=(p,b)=>E(p+b,n,100),m=null;if(i==="ArrowRight")m={...r,s:f(r.s,C)};else if(i==="ArrowLeft")m={...r,s:f(r.s,-C)};else if(i==="ArrowUp")m={...r,b:f(r.b,C)};else if(i==="ArrowDown")m={...r,b:f(r.b,-C)};else if(i==="Home"||i==="End"){let p=i==="Home"?0:100;m=e==="saturation"?{...r,s:p}:{...r,b:p}}m&&(c.preventDefault(),t.setColor(m))};return U(te.span,{role:"slider","aria-label":o,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":R(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":R(l),"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,onKeyDown:s})}var ae=re.forwardRef(({saturationLabel:e="Saturation",brightnessLabel:o="Brightness",children:t,...a},r)=>{let n=d("ColorPickerAreaThumb");return Je(te.div,{"data-value":n.value,"data-disabled":n.disabled?"":void 0,"data-readonly":n.readOnly?"":void 0,...a,...qe("color-picker","area-thumb",a.className),ref:r,children:[U(oe,{axis:"saturation",label:e}),U(oe,{axis:"brightness",label:o}),t]})});ae.displayName="ColorPickerAreaThumb";import*as ie from"react";import{skdxPart as Qe}from"../utils/part.js";import{composeEventHandlers as ne,Primitive as Ze}from"../utils/primitive.js";import{jsx as je}from"react/jsx-runtime";var le=ie.forwardRef(({orientation:e="horizontal",...o},t)=>{let a=d("ColorPickerHueSlider"),{color:r,step:n}=a,l=n>0?Math.floor(359/n)*n:359,s=O({channel:"hue",consumerName:"ColorPickerHueSlider",max:360,limit:l,value:r.h,orientation:e,defaultLabel:"Hue",valueText:c=>`${Math.round(c)} degrees, ${a.describe(r)}`,onChange:c=>a.setColor({...r,h:c})});return je(Ze.div,{...s.props,...o,...Qe("color-picker","hue-slider",o.className),ref:t,onKeyDown:ne(o.onKeyDown,s.onKeyDown),onPointerDown:ne(o.onPointerDown,s.onPointerDown),style:{...s.style,...o.style}})});le.displayName="ColorPickerHueSlider";import*as se from"react";import{skdxPart as eo}from"../utils/part.js";import{Primitive as oo}from"../utils/primitive.js";import{jsx as ro}from"react/jsx-runtime";var ce=se.forwardRef((e,o)=>{let t=d("ColorPickerHueSliderThumb");return ro(oo.div,{"aria-hidden":!0,"data-channel":"hue","data-value":R(t.color.h),"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,...e,...eo("color-picker","hue-slider-thumb",e.className),ref:o})});ce.displayName="ColorPickerHueSliderThumb";import*as ue from"react";import{formatColor as to}from"../utils/color.js";import{skdxPart as ao}from"../utils/part.js";import{composeEventHandlers as de,Primitive as no}from"../utils/primitive.js";import{jsx as io}from"react/jsx-runtime";var me=ue.forwardRef(({orientation:e="horizontal",...o},t)=>{let a=d("ColorPickerAlphaSlider"),{color:r}=a,n=O({channel:"alpha",consumerName:"ColorPickerAlphaSlider",max:100,value:r.a*100,orientation:e,defaultLabel:"Opacity",valueText:l=>`${Math.round(l)}% opaque, ${to(r,"hex",!1)}`,onChange:l=>a.setColor({...r,a:l/100})});return a.alpha?io(no.div,{...n.props,...o,...ao("color-picker","alpha-slider",o.className),ref:t,onKeyDown:de(o.onKeyDown,n.onKeyDown),onPointerDown:de(o.onPointerDown,n.onPointerDown),style:{...n.style,...o.style}}):null});me.displayName="ColorPickerAlphaSlider";import*as pe from"react";import{skdxPart as lo}from"../utils/part.js";import{Primitive as so}from"../utils/primitive.js";import{jsx as co}from"react/jsx-runtime";var fe=pe.forwardRef((e,o)=>{let t=d("ColorPickerAlphaSliderThumb");return co(so.div,{"aria-hidden":!0,"data-channel":"alpha","data-value":R(t.color.a*100),"data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,...e,...lo("color-picker","alpha-slider-thumb",e.className),ref:o})});fe.displayName="ColorPickerAlphaSliderThumb";import*as D from"react";import{useComposedRefs as uo}from"../utils/composeRefs.js";import{createSafeContext as mo}from"../utils/createContext.js";import{skdxPart as po}from"../utils/part.js";import{composeEventHandlers as fo,Primitive as ho}from"../utils/primitive.js";import{useRovingFocus as Co,useRovingTabStop as Po}from"../utils/useRovingFocus.js";import{jsx as Ce}from"react/jsx-runtime";var he="[data-skdx-color-picker-swatch]",[bo,Pe]=mo("ColorPickerSwatchGroup"),be=D.forwardRef(({loop:e=!0,...o},t)=>{let a=d("ColorPickerSwatchGroup"),r=D.useRef(null),n=uo(t,r),[l,s]=D.useState(null),c=Co({orientation:"both",loop:e,itemSelector:he});return Po(r,he,"data-value",l,s),Ce(bo,{activeValue:l,setActiveValue:s,children:Ce(ho.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,...o,...po("color-picker","swatch-group",o.className),ref:n,onKeyDown:fo(o.onKeyDown,c)})})});be.displayName="ColorPickerSwatchGroup";import*as V from"react";import{formatColor as ke,parseColor as ko}from"../utils/color.js";import{skdxPart as yo}from"../utils/part.js";import{composeEventHandlers as ye,Primitive as xo}from"../utils/primitive.js";import{rovingTabIndex as vo}from"../utils/useRovingFocus.js";import{jsx as Ro}from"react/jsx-runtime";var xe=V.forwardRef(({value:e,disabled:o,...t},a)=>{let r=d("ColorPickerSwatch"),n=Pe("ColorPickerSwatch"),l=ko(e),s=r.disabled||o||l===null,c=l?ke(l,"hex",r.alpha):e,i=l!==null&&c===ke(r.color,"hex",r.alpha);V.useLayoutEffect(()=>{i&&n.setActiveValue(e)},[i,e,n]);let u={"--skdx-color-picker-swatch-value":c,...t.style};return Ro(xo.button,{type:"button",role:"radio","aria-checked":i,"aria-label":c,"aria-disabled":s||void 0,tabIndex:vo(n.activeValue!==null,n.activeValue===e,s),"data-skdx-color-picker-swatch":"","data-value":e,"data-state":i?"checked":"unchecked","data-disabled":s?"":void 0,"data-readonly":r.readOnly?"":void 0,disabled:s,...t,...yo("color-picker","swatch",t.className),ref:a,onFocus:ye(t.onFocus,()=>n.setActiveValue(e)),onClick:ye(t.onClick,()=>{l&&r.setColor(l,{announce:!0})}),style:u})});xe.displayName="ColorPickerSwatch";import*as K from"react";import{clamp as wo}from"../utils/clamp.js";import{formatColor as So,hsbToHsl as ve,hsbToRgb as H,hslToHsb as go,parseColor as Eo,rgbToHsb as W}from"../utils/color.js";import{skdxPart as Do}from"../utils/part.js";import{composeEventHandlers as z,Primitive as Ho}from"../utils/primitive.js";import{jsx as Ao}from"react/jsx-runtime";var To={red:{max:255,label:"Red",read:e=>H(e).r,write:(e,o)=>W({...H(e),r:o})},green:{max:255,label:"Green",read:e=>H(e).g,write:(e,o)=>W({...H(e),g:o})},blue:{max:255,label:"Blue",read:e=>H(e).b,write:(e,o)=>W({...H(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=>ve(e).l,write:(e,o)=>go({...ve(e),l:o})},alpha:{max:100,label:"Opacity",read:e=>e.a*100,write:(e,o)=>({...e,a:o/100})}},Re=K.forwardRef(({channel:e,...o},t)=>{let a=d("ColorPickerInput"),[r,n]=K.useState(null),l=e&&e!=="hex"?To[e]:null,s=l?String(Math.round(l.read(a.color))):e==="hex"?So(a.color,"hex",a.alpha):a.value,c=i=>{if(!a.interactive)return!1;if(l){let C=Number(i.trim());return i.trim()===""||!Number.isFinite(C)?!1:(a.setColor(l.write(a.color,wo(C,0,l.max)),{announce:!0}),!0)}let u=Eo(i);return u?(a.setColor(u,{announce:!0}),!0):!1};return Ao(Ho.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,...o,...Do("color-picker","input",o.className),ref:t,value:r??s,onChange:z(o.onChange,i=>n(i.target.value)),onKeyDown:z(o.onKeyDown,i=>{i.key==="Enter"?(i.preventDefault(),c(r??s),n(null)):i.key==="Escape"&&n(null)}),onBlur:z(o.onBlur,()=>{r!==null&&c(r),n(null)})})});Re.displayName="ColorPickerInput";import*as Se from"react";import{skdxPart as Lo}from"../utils/part.js";import{composeEventHandlers as Mo}from"../utils/primitive.js";import{jsx as we}from"react/jsx-runtime";var No=["hex","rgb","hsl","hsb"],Oo={hex:"HEX",rgb:"RGB",hsl:"HSL",hsb:"HSB"},ge=Se.forwardRef(({formats:e=No,children:o,...t},a)=>{let r=d("ColorPickerFormatSelect");return we("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,...t,...Lo("color-picker","format-select",t.className),ref:a,value:r.format,onChange:Mo(t.onChange,n=>r.setFormat(n.target.value)),children:o??e.map(n=>we("option",{value:n,children:Oo[n]},n))})});ge.displayName="ColorPickerFormatSelect";import*as I from"react";import{parseColor as Fo}from"../utils/color.js";import{skdxPart as Vo}from"../utils/part.js";import{composeEventHandlers as Ko,Primitive as Io}from"../utils/primitive.js";import{jsx as Uo}from"react/jsx-runtime";var Go=()=>()=>{},$o=()=>typeof window<"u"&&"EyeDropper"in window,Bo=()=>!1,Ee=I.forwardRef((e,o)=>{let t=d("ColorPickerEyeDropper"),a=I.useSyncExternalStore(Go,$o,Bo),r=()=>{let n=window.EyeDropper;n&&new n().open().then(({sRGBHex:l})=>{let s=Fo(l);s&&t.setColor({...s,a:t.color.a},{announce:!0})}).catch(()=>{})};return a?Uo(Io.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,...e,...Vo("color-picker","eye-dropper",e.className),ref:o,onClick:Ko(e.onClick,()=>{t.interactive&&r()})}):null});Ee.displayName="ColorPickerEyeDropper";export{Z as ColorPicker,me as ColorPickerAlphaSlider,fe as ColorPickerAlphaSliderThumb,ee as ColorPickerArea,ae as ColorPickerAreaThumb,Ee as ColorPickerEyeDropper,ge as ColorPickerFormatSelect,le as ColorPickerHueSlider,ce as ColorPickerHueSliderThumb,Re as ColorPickerInput,xe as ColorPickerSwatch,be as ColorPickerSwatchGroup};
+'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,25 +1,11 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAlphaSliderProps } from './types.cjs';
 /**
- * The opacity track: a linear `role="slider"` over 0–100%, reported and
- * stepped in whole percentage points even though the colour stores alpha as
- * `0–1` — "50%" is what a user reads and types, `0.5` is what CSS wants, and
- * only one of those belongs in an announcement.
- *
- * **Renders nothing when the root has `alpha={false}`.** A picker that cannot
- * express transparency should not show a control that appears to set it; the
- * part is left in the tree so a layout does not have to be conditionally
- * authored twice.
- *
- * Ships no CSS. The checkerboard behind the gradient and the gradient itself
- * are yours, and `--skdx-color-picker-value` gives you the current colour to
- * fade out to:
+ * Opacity track, 0-100%; renders nothing when the root has `alpha={false}`.
  *
  * ```css
  * .my-alpha {
- *   background:
- *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
- *     var(--my-checkerboard);
+ *   background: linear-gradient(to right, transparent, var(--skdx-color-picker-value)), var(--my-checkerboard);
  * }
  * .my-alpha-thumb {
  *   position: absolute;
@@ -34,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,25 +1,11 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAlphaSliderProps } from './types.js';
 /**
- * The opacity track: a linear `role="slider"` over 0–100%, reported and
- * stepped in whole percentage points even though the colour stores alpha as
- * `0–1` — "50%" is what a user reads and types, `0.5` is what CSS wants, and
- * only one of those belongs in an announcement.
- *
- * **Renders nothing when the root has `alpha={false}`.** A picker that cannot
- * express transparency should not show a control that appears to set it; the
- * part is left in the tree so a layout does not have to be conditionally
- * authored twice.
- *
- * Ships no CSS. The checkerboard behind the gradient and the gradient itself
- * are yours, and `--skdx-color-picker-value` gives you the current colour to
- * fade out to:
+ * Opacity track, 0-100%; renders nothing when the root has `alpha={false}`.
  *
  * ```css
  * .my-alpha {
- *   background:
- *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
- *     var(--my-checkerboard);
+ *   background: linear-gradient(to right, transparent, var(--skdx-color-picker-value)), var(--my-checkerboard);
  * }
  * .my-alpha-thumb {
  *   position: absolute;
@@ -34,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,12 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAlphaSliderThumbProps } from './types.cjs';
 /**
- * The handle on a {@link ColorPickerAlphaSlider}. Purely visual: `aria-hidden`
- * and out of the tab order, because the track carries the `role="slider"`
- * semantics and takes the tab stop.
- *
- * It ships **no positioning**. The root publishes
- * `--skdx-color-picker-alpha-position` as a percentage:
+ * Visual-only alpha slider thumb, `aria-hidden`; position it with `--skdx-color-picker-alpha-position`.
  *
  * ```css
  * .my-alpha-thumb {
@@ -15,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
@@ -26,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,12 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerAlphaSliderThumbProps } from './types.js';
 /**
- * The handle on a {@link ColorPickerAlphaSlider}. Purely visual: `aria-hidden`
- * and out of the tab order, because the track carries the `role="slider"`
- * semantics and takes the tab stop.
- *
- * It ships **no positioning**. The root publishes
- * `--skdx-color-picker-alpha-position` as a percentage:
+ * Visual-only alpha slider thumb, `aria-hidden`; position it with `--skdx-color-picker-alpha-position`.
  *
  * ```css
  * .my-alpha-thumb {
@@ -15,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
@@ -26,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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+/** @internal */
+export declare const ColorPickerAnatomy: ({ showInput, showSwatches, showEyeDropper, swatches, }: {
+    showInput?: boolean | undefined;
+    showSwatches?: boolean | undefined;
+    showEyeDropper?: boolean | undefined;
+    swatches?: string[] | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+/** @internal */
+export declare const ColorPickerAnatomy: ({ showInput, showSwatches, showEyeDropper, swatches, }: {
+    showInput?: boolean | undefined;
+    showSwatches?: boolean | undefined;
+    showEyeDropper?: boolean | undefined;
+    swatches?: string[] | undefined;
+}) => JSX.Element;

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

@@ -1,36 +1,7 @@
 import * as React from 'react';
 import type { ColorPickerAreaProps } from './types.cjs';
 /**
- * The 2D saturation/brightness surface: **saturation runs left-to-right,
- * brightness bottom-to-top**, at whatever hue the picker currently holds.
- * Pointer down anywhere inside it seeks straight to that colour, and dragging
- * keeps updating until release — the drag survives leaving the element and the
- * window, and a cancelled drag still commits rather than hanging.
- *
- * It carries **no ARIA of its own and no `role="application"`**. The
- * accessibility lives in `ColorPickerAreaThumb`, which renders one
- * `role="slider"` per axis; a `role="application"` here would hand the whole
- * surface to the browser as an opaque box and take the screen reader's own
- * navigation away from the user. See `ColorPicker.md`.
- *
- * Ships no CSS. The hue backdrop and the black/white gradients on top of it
- * are the consumer's, driven by `--skdx-color-picker-hue`; the thumb is placed
- * from `--skdx-color-picker-saturation` and `--skdx-color-picker-brightness`,
- * both already percentages:
- *
- * ```css
- * .my-area {
- *   background:
- *     linear-gradient(to top, #000, transparent),
- *     linear-gradient(to right, #fff, transparent),
- *     hsl(var(--skdx-color-picker-hue) 100% 50%);
- * }
- * .my-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * ```
+ * 2D saturation/brightness surface at the current hue; pointer down seeks to a colour, drag updates until release.
  *
  * @example
  * ```tsx
@@ -39,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,36 +1,7 @@
 import * as React from 'react';
 import type { ColorPickerAreaProps } from './types.js';
 /**
- * The 2D saturation/brightness surface: **saturation runs left-to-right,
- * brightness bottom-to-top**, at whatever hue the picker currently holds.
- * Pointer down anywhere inside it seeks straight to that colour, and dragging
- * keeps updating until release — the drag survives leaving the element and the
- * window, and a cancelled drag still commits rather than hanging.
- *
- * It carries **no ARIA of its own and no `role="application"`**. The
- * accessibility lives in `ColorPickerAreaThumb`, which renders one
- * `role="slider"` per axis; a `role="application"` here would hand the whole
- * surface to the browser as an opaque box and take the screen reader's own
- * navigation away from the user. See `ColorPicker.md`.
- *
- * Ships no CSS. The hue backdrop and the black/white gradients on top of it
- * are the consumer's, driven by `--skdx-color-picker-hue`; the thumb is placed
- * from `--skdx-color-picker-saturation` and `--skdx-color-picker-brightness`,
- * both already percentages:
- *
- * ```css
- * .my-area {
- *   background:
- *     linear-gradient(to top, #000, transparent),
- *     linear-gradient(to right, #fff, transparent),
- *     hsl(var(--skdx-color-picker-hue) 100% 50%);
- * }
- * .my-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * ```
+ * 2D saturation/brightness surface at the current hue; pointer down seeks to a colour, drag updates until release.
  *
  * @example
  * ```tsx
@@ -39,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,32 +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}, and the area's entire
- * accessibility surface: it renders **two nested `role="slider"` elements**,
- * one for saturation and one for brightness, each with its own accessible name
- * and its own truthful `aria-valuenow`.
- *
- * Two sliders rather than one: `role="slider"` requires `aria-valuenow`, and a
- * 2D colour has no single number to put there — a lone slider would have to
- * report one axis and lie about the other, which is the failure mode
- * `aria-valuetext` cannot paper over. Two axes each report a number that is
- * true. The cost is two tab stops inside one visual thumb, which is the same
- * trade every shipped 2D colour area makes.
- *
- * The two axes are the focus targets, not the wrapper, so give them size in
- * CSS — typically by filling the thumb:
- *
- * ```css
- * .my-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * .my-area-thumb [role='slider'] {
- *   position: absolute;
- *   inset: 0;
- * }
- * ```
+ * Handle on {@link ColorPickerArea}: two nested `role="slider"` elements, one per axis, each with a truthful `aria-valuenow`.
  *
  * @example
  * ```tsx
@@ -35,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,32 +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}, and the area's entire
- * accessibility surface: it renders **two nested `role="slider"` elements**,
- * one for saturation and one for brightness, each with its own accessible name
- * and its own truthful `aria-valuenow`.
- *
- * Two sliders rather than one: `role="slider"` requires `aria-valuenow`, and a
- * 2D colour has no single number to put there — a lone slider would have to
- * report one axis and lie about the other, which is the failure mode
- * `aria-valuetext` cannot paper over. Two axes each report a number that is
- * true. The cost is two tab stops inside one visual thumb, which is the same
- * trade every shipped 2D colour area makes.
- *
- * The two axes are the focus targets, not the wrapper, so give them size in
- * CSS — typically by filling the thumb:
- *
- * ```css
- * .my-area-thumb {
- *   position: absolute;
- *   inset-inline-start: var(--skdx-color-picker-saturation);
- *   inset-block-end: var(--skdx-color-picker-brightness);
- * }
- * .my-area-thumb [role='slider'] {
- *   position: absolute;
- *   inset: 0;
- * }
- * ```
+ * Handle on {@link ColorPickerArea}: two nested `role="slider"` elements, one per axis, each with a truthful `aria-valuenow`.
  *
  * @example
  * ```tsx
@@ -35,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,24 +1,7 @@
 import * as React from 'react';
 import type { ColorPickerEyeDropperProps } from './types.cjs';
 /**
- * Opens the browser's screen colour picker and applies whatever the user
- * clicks — the one way to sample a colour that is not already inside this
- * widget.
- *
- * **It renders `null` where `window.EyeDropper` does not exist**, which today
- * is Firefox and Safari. Feature-detected through `useSyncExternalStore` rather
- * than a mount effect, so the server and the client's first render agree that
- * it is absent and hydration never mismatches; the button appears on the
- * client's second pass, where it is supported.
- *
- * The sampled colour is always opaque, so the picker's **current alpha is
- * kept** — sampling a colour off the screen is not a statement about
- * transparency, and resetting opacity to 100% would quietly undo the user's
- * last decision. Dismissing the picker (Escape) is a cancellation, not an
- * error, and changes nothing.
- *
- * The result **is announced**: a button press tells a screen-reader user
- * nothing about the colour it produced.
+ * Opens the browser's screen colour picker; renders `null` where `EyeDropper` is unsupported.
  *
  * @example
  * ```tsx
@@ -27,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,24 +1,7 @@
 import * as React from 'react';
 import type { ColorPickerEyeDropperProps } from './types.js';
 /**
- * Opens the browser's screen colour picker and applies whatever the user
- * clicks — the one way to sample a colour that is not already inside this
- * widget.
- *
- * **It renders `null` where `window.EyeDropper` does not exist**, which today
- * is Firefox and Safari. Feature-detected through `useSyncExternalStore` rather
- * than a mount effect, so the server and the client's first render agree that
- * it is absent and hydration never mismatches; the button appears on the
- * client's second pass, where it is supported.
- *
- * The sampled colour is always opaque, so the picker's **current alpha is
- * kept** — sampling a colour off the screen is not a statement about
- * transparency, and resetting opacity to 100% would quietly undo the user's
- * last decision. Dismissing the picker (Escape) is a cancellation, not an
- * error, and changes nothing.
- *
- * The result **is announced**: a button press tells a screen-reader user
- * nothing about the colour it produced.
+ * Opens the browser's screen colour picker; renders `null` where `EyeDropper` is unsupported.
  *
  * @example
  * ```tsx
@@ -27,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,20 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerFormatSelectProps } from './types.cjs';
 /**
- * Switches the notation `value` is written in. Renders a **native
- * `<select>`** — a listbox, its keyboard, its typeahead and its mobile
- * presentation all come free and correct from the platform, and there is
- * nothing about four fixed options that a custom popup would do better.
- *
- * It is the one part of the family that is not a `Primitive`, and so takes no
- * `asChild`: `Primitive` has no `select` node, and a slotted `<div>` pretending
- * to be a listbox is exactly the trade this part exists to avoid. Want a styled
- * popup instead? Drive `format` / `onFormatChange` from the `Select` family and
- * leave this part out.
- *
- * Switching format does **not** change the colour, but it does change `value`,
- * so `onValueChange` fires alongside `onFormatChange` with the re-spelled
- * string. A `readOnly` picker refuses the switch for that reason.
+ * Switches colour notation (`hex`, `rgb`, `hsl`, `hsb`) via a native `<select>`.
  *
  * @example
  * ```tsx
@@ -22,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,20 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerFormatSelectProps } from './types.js';
 /**
- * Switches the notation `value` is written in. Renders a **native
- * `<select>`** — a listbox, its keyboard, its typeahead and its mobile
- * presentation all come free and correct from the platform, and there is
- * nothing about four fixed options that a custom popup would do better.
- *
- * It is the one part of the family that is not a `Primitive`, and so takes no
- * `asChild`: `Primitive` has no `select` node, and a slotted `<div>` pretending
- * to be a listbox is exactly the trade this part exists to avoid. Want a styled
- * popup instead? Drive `format` / `onFormatChange` from the `Select` family and
- * leave this part out.
- *
- * Switching format does **not** change the colour, but it does change `value`,
- * so `onValueChange` fires alongside `onFormatChange` with the re-spelled
- * string. A `readOnly` picker refuses the switch for that reason.
+ * Switches colour notation (`hex`, `rgb`, `hsl`, `hsb`) via a native `<select>`.
  *
  * @example
  * ```tsx
@@ -22,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,26 +1,11 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ColorPickerHueSliderProps } from './types.cjs';
 /**
- * The hue track: a linear `role="slider"` over 0–360°, independent of the
- * saturation and brightness the 2D area holds.
- *
- * **It has ends and does not wrap.** Hue is circular, but a linear control
- * reporting `aria-valuemin={0}`/`aria-valuemax={360}` that teleported from one
- * end to the other would be lying to assistive tech — so the track stops at
- * the last hue on the step grid below 360, since 360° *is* 0° and folding
- * would throw the thumb back to the left edge mid-drag. Reach for
- * `AngleSlider` when you want a hue control that genuinely wraps.
- *
- * Pointer geometry is physical — left-to-right when horizontal,
- * bottom-to-top when vertical, matching `Slider` — while the arrow **keys**
- * mirror under `dir="rtl"`. The gradient is yours, and so is its direction.
+ * Linear hue slider, 0-360 degrees; not wrapping (use `AngleSlider` for that).
  *
  * ```css
  * .my-hue {
- *   background: linear-gradient(
- *     to right,
- *     #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
- *   );
+ *   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  * }
  * .my-hue-thumb {
  *   position: absolute;
@@ -35,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;
+};