@skdx/react 0.27.0 → 0.29.0

package/dist/collapsible/CollapsibleIndicator.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CollapsibleIndicatorProps } from './types.cjs';
+/**
+ * Disclosure indicator inside {@link CollapsibleTrigger} — renders `<span>` with `data-state` and `data-disabled`; the glyph is your child.
+ *
+ * @example
+ * ```tsx
+ * import { CollapsibleIndicator, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleTrigger>
+ *   Toggle
+ *   <CollapsibleIndicator>
+ *     <ChevronDownIcon />
+ *   </CollapsibleIndicator>
+ * </CollapsibleTrigger>
+ * ```
+ */
+export declare const CollapsibleIndicator: {
+    ({ ref: forwardedRef, ...props }: CollapsibleIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/CollapsibleIndicator.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CollapsibleIndicatorProps } from './types.js';
+/**
+ * Disclosure indicator inside {@link CollapsibleTrigger} — renders `<span>` with `data-state` and `data-disabled`; the glyph is your child.
+ *
+ * @example
+ * ```tsx
+ * import { CollapsibleIndicator, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleTrigger>
+ *   Toggle
+ *   <CollapsibleIndicator>
+ *     <ChevronDownIcon />
+ *   </CollapsibleIndicator>
+ * </CollapsibleTrigger>
+ * ```
+ */
+export declare const CollapsibleIndicator: {
+    ({ ref: forwardedRef, ...props }: CollapsibleIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/CollapsibleTrigger.d.cts

@@ -1,16 +1,19 @@
 import * as React from 'react';
 import type { CollapsibleTriggerProps } from './types.cjs';
 /**
- * Toggle button for a {@link Collapsible}. Renders a `<button type="button">`
- * with `aria-controls` pointing at the content, `aria-expanded`, `data-state`
- * and `data-disabled`. Clicking it flips the open state.
+ * Toggle button rendering `<button type="button">` with `aria-controls`, `aria-expanded`, `data-state`, and `data-disabled`.
  *
  * @example
  * ```tsx
- * <Collapsible>
+ * import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleRoot>
  *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
- * </Collapsible>
+ * </CollapsibleRoot>
  * ```
  */
-export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CollapsibleTrigger: {
+    ({ ref: forwardedRef, ...props }: CollapsibleTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/CollapsibleTrigger.d.ts

@@ -1,16 +1,19 @@
 import * as React from 'react';
 import type { CollapsibleTriggerProps } from './types.js';
 /**
- * Toggle button for a {@link Collapsible}. Renders a `<button type="button">`
- * with `aria-controls` pointing at the content, `aria-expanded`, `data-state`
- * and `data-disabled`. Clicking it flips the open state.
+ * Toggle button rendering `<button type="button">` with `aria-controls`, `aria-expanded`, `data-state`, and `data-disabled`.
  *
  * @example
  * ```tsx
- * <Collapsible>
+ * import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleRoot>
  *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
- * </Collapsible>
+ * </CollapsibleRoot>
  * ```
  */
-export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CollapsibleTrigger: {
+    ({ ref: forwardedRef, ...props }: CollapsibleTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/index.d.cts

@@ -1,4 +1,2 @@
-export * from './Collapsible.cjs';
-export { CollapsibleTrigger } from './CollapsibleTrigger.cjs';
-export { CollapsibleContent } from './CollapsibleContent.cjs';
-export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps } from './types.cjs';
+export { Collapsible } from './Collapsible.cjs';
+export type { CollapsibleProps } from './types.cjs';

package/dist/collapsible/index.d.ts

@@ -1,4 +1,2 @@
-export * from './Collapsible.js';
-export { CollapsibleTrigger } from './CollapsibleTrigger.js';
-export { CollapsibleContent } from './CollapsibleContent.js';
-export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps } from './types.js';
+export { Collapsible } from './Collapsible.js';
+export type { CollapsibleProps } from './types.js';

package/dist/collapsible/primitives.d.cts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `Collapsible` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { CollapsibleContent, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleRoot defaultOpen>
+ *   <CollapsibleTrigger>
+ *     Delivery options
+ *     <CollapsibleIndicator />
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent hiddenUntilFound>Ships in 2 days.</CollapsibleContent>
+ * </CollapsibleRoot>
+ * ```
+ */
+export { CollapsibleRoot } from './Collapsible.cjs';
+export { CollapsibleTrigger } from './CollapsibleTrigger.cjs';
+export { CollapsibleIndicator } from './CollapsibleIndicator.cjs';
+export { CollapsibleContent } from './CollapsibleContent.cjs';
+export type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleIndicatorProps, CollapsibleContentProps, } from './types.cjs';

package/dist/collapsible/primitives.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `Collapsible` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { CollapsibleContent, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleRoot defaultOpen>
+ *   <CollapsibleTrigger>
+ *     Delivery options
+ *     <CollapsibleIndicator />
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent hiddenUntilFound>Ships in 2 days.</CollapsibleContent>
+ * </CollapsibleRoot>
+ * ```
+ */
+export { CollapsibleRoot } from './Collapsible.js';
+export { CollapsibleTrigger } from './CollapsibleTrigger.js';
+export { CollapsibleIndicator } from './CollapsibleIndicator.js';
+export { CollapsibleContent } from './CollapsibleContent.js';
+export type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleIndicatorProps, CollapsibleContentProps, } from './types.js';

package/dist/collapsible/types.d.cts

@@ -1,44 +1,77 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** @internal Shared state distributed from {@link Collapsible} to its parts via context. Not part of the public API. */
 export interface CollapsibleContextValue {
     contentId: string;
     open: boolean;
     disabled: boolean;
-    onOpenToggle: () => void;
+    /** Flips the panel; the click event reaches it so a family can tell a keyboard activation from a pointer one. */
+    onOpenToggle: (event?: {
+        detail: number;
+    }) => void;
+    /** Opens the collapsible without toggling it — the `beforematch` path, where the browser has already revealed the panel. */
+    onOpen: () => void;
+    /** Reports that the panel has settled into `open`. See {@link CollapsibleProps.onOpenChangeComplete}. */
+    onOpenChangeComplete: (open: boolean) => void;
+    /** Whether the content element is currently in the DOM, so the trigger only publishes `aria-controls` for a panel that exists. */
+    contentMounted: boolean;
+    setContentMounted: (mounted: boolean) => void;
 }
-/** Props for the {@link Collapsible} root. */
-export interface CollapsibleProps extends PrimitivePropsWithRef<'div'> {
+/** Props for the {@link CollapsibleRoot}. */
+export interface CollapsibleRootProps extends PrimitivePropsWithRef<'div'> {
     /**
      * Open state, for controlled usage. Pair with `onOpenChange`.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Initial open state, for uncontrolled usage.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires with the settled open state after the content panel finishes transitioning.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
      * Prevents the trigger from toggling the content when set.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+}
+/** Props for the {@link Collapsible} recipe, which always wraps children in the derived anatomy. */
+export interface CollapsibleProps extends Omit<CollapsibleRootProps, 'asChild' | 'title'> {
+    /**
+     * Text of the derived `CollapsibleTrigger` — the button that toggles the panel.
+     * @default undefined — no trigger is rendered.
+     */
+    title?: React.ReactNode | undefined;
 }
 /** Props for {@link CollapsibleTrigger}, the button that toggles the content open/closed. */
 export interface CollapsibleTriggerProps extends PrimitivePropsWithRef<'button'> {
 }
+/** Props for {@link CollapsibleIndicator}, the chevron inside the trigger. */
+export interface CollapsibleIndicatorProps extends PrimitivePropsWithRef<'span'> {
+}
 /** Props for {@link CollapsibleContent}, the panel revealed when open. */
 export interface CollapsibleContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this panel mounted (hidden via the `hidden` attribute) even while
-     * closed, instead of unmounting it. Useful for animation libraries that
-     * need the content present in the DOM during an exit transition.
+     * Keeps the panel mounted (hidden via the `hidden` attribute) while closed
+     * instead of unmounting it, for animation libraries needing it during exit transitions.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+    /**
+     * Keeps the panel mounted as `hidden="until-found"` for find-in-page and fragment
+     * navigation instead of plain `hidden=""`. Implies `forceMount`; do not apply
+     * `display: none` on closed panels or the text becomes unsearchable.
      * @default false
      */
-    forceMount?: boolean;
+    hiddenUntilFound?: boolean | undefined;
 }

package/dist/collapsible/types.d.ts

@@ -1,44 +1,77 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** @internal Shared state distributed from {@link Collapsible} to its parts via context. Not part of the public API. */
 export interface CollapsibleContextValue {
     contentId: string;
     open: boolean;
     disabled: boolean;
-    onOpenToggle: () => void;
+    /** Flips the panel; the click event reaches it so a family can tell a keyboard activation from a pointer one. */
+    onOpenToggle: (event?: {
+        detail: number;
+    }) => void;
+    /** Opens the collapsible without toggling it — the `beforematch` path, where the browser has already revealed the panel. */
+    onOpen: () => void;
+    /** Reports that the panel has settled into `open`. See {@link CollapsibleProps.onOpenChangeComplete}. */
+    onOpenChangeComplete: (open: boolean) => void;
+    /** Whether the content element is currently in the DOM, so the trigger only publishes `aria-controls` for a panel that exists. */
+    contentMounted: boolean;
+    setContentMounted: (mounted: boolean) => void;
 }
-/** Props for the {@link Collapsible} root. */
-export interface CollapsibleProps extends PrimitivePropsWithRef<'div'> {
+/** Props for the {@link CollapsibleRoot}. */
+export interface CollapsibleRootProps extends PrimitivePropsWithRef<'div'> {
     /**
      * Open state, for controlled usage. Pair with `onOpenChange`.
      * @default undefined — uncontrolled, tracks its own open state internally.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Initial open state, for uncontrolled usage.
      * @default false
      */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /**
      * Fires with the new open state whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires with the settled open state after the content panel finishes transitioning.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /**
      * Prevents the trigger from toggling the content when set.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+}
+/** Props for the {@link Collapsible} recipe, which always wraps children in the derived anatomy. */
+export interface CollapsibleProps extends Omit<CollapsibleRootProps, 'asChild' | 'title'> {
+    /**
+     * Text of the derived `CollapsibleTrigger` — the button that toggles the panel.
+     * @default undefined — no trigger is rendered.
+     */
+    title?: React.ReactNode | undefined;
 }
 /** Props for {@link CollapsibleTrigger}, the button that toggles the content open/closed. */
 export interface CollapsibleTriggerProps extends PrimitivePropsWithRef<'button'> {
 }
+/** Props for {@link CollapsibleIndicator}, the chevron inside the trigger. */
+export interface CollapsibleIndicatorProps extends PrimitivePropsWithRef<'span'> {
+}
 /** Props for {@link CollapsibleContent}, the panel revealed when open. */
 export interface CollapsibleContentProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Keep this panel mounted (hidden via the `hidden` attribute) even while
-     * closed, instead of unmounting it. Useful for animation libraries that
-     * need the content present in the DOM during an exit transition.
+     * Keeps the panel mounted (hidden via the `hidden` attribute) while closed
+     * instead of unmounting it, for animation libraries needing it during exit transitions.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
+    /**
+     * Keeps the panel mounted as `hidden="until-found"` for find-in-page and fragment
+     * navigation instead of plain `hidden=""`. Implies `forceMount`; do not apply
+     * `display: none` on closed panels or the text becomes unsearchable.
      * @default false
      */
-    forceMount?: boolean;
+    hiddenUntilFound?: boolean | undefined;
 }

package/dist/color-picker/ColorPicker.cjs

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

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

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

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

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