@skdx/react 0.26.0

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

@@ -0,0 +1,60 @@
+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;
+/**
+ * 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:
+ *
+ * | Property | Example | For |
+ * | --- | --- | --- |
+ * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop, `hsl(var(--…-hue) 100% 50%)` |
+ * | `--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`.
+ *
+ * @example
+ * ```tsx
+ * <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>>;

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

@@ -0,0 +1,60 @@
+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;
+/**
+ * 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:
+ *
+ * | Property | Example | For |
+ * | --- | --- | --- |
+ * | `--skdx-color-picker-hue` | `210deg` | the area's hue backdrop, `hsl(var(--…-hue) 100% 50%)` |
+ * | `--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`.
+ *
+ * @example
+ * ```tsx
+ * <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>>;

package/dist/color-picker/ColorPicker.js

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

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

@@ -0,0 +1,37 @@
+import * 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:
+ *
+ * ```css
+ * .my-alpha {
+ *   background:
+ *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
+ *     var(--my-checkerboard);
+ * }
+ * .my-alpha-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerAlphaSlider className="my-alpha">
+ *   <ColorPickerAlphaSliderThumb className="my-alpha-thumb" />
+ * </ColorPickerAlphaSlider>
+ * ```
+ */
+export declare const ColorPickerAlphaSlider: React.ForwardRefExoticComponent<Omit<ColorPickerAlphaSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+import * 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:
+ *
+ * ```css
+ * .my-alpha {
+ *   background:
+ *     linear-gradient(to right, transparent, var(--skdx-color-picker-value)),
+ *     var(--my-checkerboard);
+ * }
+ * .my-alpha-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerAlphaSlider className="my-alpha">
+ *   <ColorPickerAlphaSliderThumb className="my-alpha-thumb" />
+ * </ColorPickerAlphaSlider>
+ * ```
+ */
+export declare const ColorPickerAlphaSlider: React.ForwardRefExoticComponent<Omit<ColorPickerAlphaSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,29 @@
+import * 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:
+ *
+ * ```css
+ * .my-alpha-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * `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`.
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerAlphaSlider>
+ *   <ColorPickerAlphaSliderThumb className="my-alpha-thumb" />
+ * </ColorPickerAlphaSlider>
+ * ```
+ */
+export declare const ColorPickerAlphaSliderThumb: React.ForwardRefExoticComponent<Omit<ColorPickerAlphaSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,29 @@
+import * 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:
+ *
+ * ```css
+ * .my-alpha-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-alpha-position);
+ * }
+ * ```
+ *
+ * `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`.
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerAlphaSlider>
+ *   <ColorPickerAlphaSliderThumb className="my-alpha-thumb" />
+ * </ColorPickerAlphaSlider>
+ * ```
+ */
+export declare const ColorPickerAlphaSliderThumb: React.ForwardRefExoticComponent<Omit<ColorPickerAlphaSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,42 @@
+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);
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerArea className="my-area">
+ *   <ColorPickerAreaThumb className="my-area-thumb" />
+ * </ColorPickerArea>
+ * ```
+ */
+export declare const ColorPickerArea: React.ForwardRefExoticComponent<Omit<ColorPickerAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,42 @@
+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);
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerArea className="my-area">
+ *   <ColorPickerAreaThumb className="my-area-thumb" />
+ * </ColorPickerArea>
+ * ```
+ */
+export declare const ColorPickerArea: React.ForwardRefExoticComponent<Omit<ColorPickerAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,38 @@
+import * 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;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerArea>
+ *   <ColorPickerAreaThumb saturationLabel="Saturation" brightnessLabel="Brightness" />
+ * </ColorPickerArea>
+ * ```
+ */
+export declare const ColorPickerAreaThumb: React.ForwardRefExoticComponent<Omit<ColorPickerAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,38 @@
+import * 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;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerArea>
+ *   <ColorPickerAreaThumb saturationLabel="Saturation" brightnessLabel="Brightness" />
+ * </ColorPickerArea>
+ * ```
+ */
+export declare const ColorPickerAreaThumb: React.ForwardRefExoticComponent<Omit<ColorPickerAreaThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,30 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerEyeDropper aria-label="Pick a colour from the screen">
+ *   <PipetteIcon />
+ * </ColorPickerEyeDropper>
+ * ```
+ */
+export declare const ColorPickerEyeDropper: React.ForwardRefExoticComponent<Omit<ColorPickerEyeDropperProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,30 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerEyeDropper aria-label="Pick a colour from the screen">
+ *   <PipetteIcon />
+ * </ColorPickerEyeDropper>
+ * ```
+ */
+export declare const ColorPickerEyeDropper: React.ForwardRefExoticComponent<Omit<ColorPickerEyeDropperProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,25 @@
+import * 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.
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerFormatSelect />
+ * <ColorPickerFormatSelect formats={['hex', 'rgb']} aria-label="Notation" />
+ * ```
+ */
+export declare const ColorPickerFormatSelect: React.ForwardRefExoticComponent<Omit<ColorPickerFormatSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;

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

@@ -0,0 +1,25 @@
+import * 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.
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerFormatSelect />
+ * <ColorPickerFormatSelect formats={['hex', 'rgb']} aria-label="Notation" />
+ * ```
+ */
+export declare const ColorPickerFormatSelect: React.ForwardRefExoticComponent<Omit<ColorPickerFormatSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;

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

@@ -0,0 +1,38 @@
+import * 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.
+ *
+ * ```css
+ * .my-hue {
+ *   background: linear-gradient(
+ *     to right,
+ *     #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
+ *   );
+ * }
+ * .my-hue-thumb {
+ *   position: absolute;
+ *   inset-inline-start: var(--skdx-color-picker-hue-position);
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ColorPickerHueSlider className="my-hue">
+ *   <ColorPickerHueSliderThumb className="my-hue-thumb" />
+ * </ColorPickerHueSlider>
+ * ```
+ */
+export declare const ColorPickerHueSlider: React.ForwardRefExoticComponent<Omit<ColorPickerHueSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;