@skdx/react 0.26.0 → 0.28.0

package/dist/collapsible/CollapsibleContent.d.cts

@@ -1,17 +1,21 @@
 import * as React from 'react';
 import type { CollapsibleContentProps } from './types.cjs';
 /**
- * Panel controlled by a {@link Collapsible}. Renders a `<div>` with the
- * `id` referenced by `CollapsibleTrigger`'s `aria-controls`, `data-state`,
- * `data-disabled`, and the `hidden` attribute while closed. Unmounts when
- * closed unless `forceMount` is set.
+ * Panel controlled by a {@link Collapsible}. Renders a `<div>` with `id`,
+ * `data-state`, `data-disabled`, and `hidden` while closed. Unmounts when closed
+ * unless `forceMount` or `hiddenUntilFound` is set.
+ *
+ * Publishes measured size as `--skdx-collapsible-content-height` and `-width` so
+ * open/close transitions work — `height: auto` is not animatable.
  *
  * @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 CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/collapsible/CollapsibleContent.d.ts

@@ -1,17 +1,21 @@
 import * as React from 'react';
 import type { CollapsibleContentProps } from './types.js';
 /**
- * Panel controlled by a {@link Collapsible}. Renders a `<div>` with the
- * `id` referenced by `CollapsibleTrigger`'s `aria-controls`, `data-state`,
- * `data-disabled`, and the `hidden` attribute while closed. Unmounts when
- * closed unless `forceMount` is set.
+ * Panel controlled by a {@link Collapsible}. Renders a `<div>` with `id`,
+ * `data-state`, `data-disabled`, and `hidden` while closed. Unmounts when closed
+ * unless `forceMount` or `hiddenUntilFound` is set.
+ *
+ * Publishes measured size as `--skdx-collapsible-content-height` and `-width` so
+ * open/close transitions work — `height: auto` is not animatable.
  *
  * @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 CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/collapsible/CollapsibleIndicator.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { CollapsibleIndicatorProps } from './types.cjs';
+/**
+ * Disclosure indicator inside {@link CollapsibleTrigger} — renders `<span>` with `data-state` and `data-disabled`. Headless: put icon inside.
+ *
+ * @example
+ * ```tsx
+ * import { CollapsibleIndicator, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleTrigger>
+ *   Toggle
+ *   <CollapsibleIndicator>
+ *     <ChevronDownIcon />
+ *   </CollapsibleIndicator>
+ * </CollapsibleTrigger>
+ * ```
+ */
+export declare const CollapsibleIndicator: React.ForwardRefExoticComponent<Omit<CollapsibleIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/collapsible/CollapsibleIndicator.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { CollapsibleIndicatorProps } from './types.js';
+/**
+ * Disclosure indicator inside {@link CollapsibleTrigger} — renders `<span>` with `data-state` and `data-disabled`. Headless: put icon inside.
+ *
+ * @example
+ * ```tsx
+ * import { CollapsibleIndicator, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleTrigger>
+ *   Toggle
+ *   <CollapsibleIndicator>
+ *     <ChevronDownIcon />
+ *   </CollapsibleIndicator>
+ * </CollapsibleTrigger>
+ * ```
+ */
+export declare const CollapsibleIndicator: React.ForwardRefExoticComponent<Omit<CollapsibleIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/collapsible/CollapsibleTrigger.d.cts

@@ -1,16 +1,17 @@
 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. Renders `<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>>;

package/dist/collapsible/CollapsibleTrigger.d.ts

@@ -1,16 +1,17 @@
 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. Renders `<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>>;

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,3 +1,4 @@
+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 {
@@ -5,9 +6,21 @@ export interface CollapsibleContextValue {
     open: boolean;
     disabled: boolean;
     onOpenToggle: () => 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. The panel reports
+     * itself: `forceMount`/`hiddenUntilFound` live on the panel and the trigger
+     * cannot see them.
+     */
+    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.
@@ -23,22 +36,50 @@ export interface CollapsibleProps extends PrimitivePropsWithRef<'div'> {
      * @default undefined — no-op if omitted.
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Fires with the settled open state after the content panel finishes transitioning,
+     * on `transitionend` or synchronously if no transition is running. Counterpart
+     * to `onOpenChange`, which fires instantly.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
     /**
      * Prevents the trigger from toggling the content when set.
      * @default false
      */
     disabled?: boolean;
 }
+/**
+ * Props for the {@link Collapsible} recipe, which always wraps children in the
+ * derived anatomy. For headless usage, use `primitives/collapsible`'s `CollapsibleRoot` instead.
+ */
+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;
+}
 /** 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;
+    /**
+     * Keeps the panel mounted as `hidden="until-found"` for find-in-page and
+     * fragment navigation instead of plain `hidden=""`, degrading to plain `hidden=""`
+     * on unsupported browsers. Do not apply `display: none` on closed panels
+     * or text becomes unsearchable. Implies `forceMount`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
 }

package/dist/collapsible/types.d.ts

@@ -1,3 +1,4 @@
+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 {
@@ -5,9 +6,21 @@ export interface CollapsibleContextValue {
     open: boolean;
     disabled: boolean;
     onOpenToggle: () => 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. The panel reports
+     * itself: `forceMount`/`hiddenUntilFound` live on the panel and the trigger
+     * cannot see them.
+     */
+    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.
@@ -23,22 +36,50 @@ export interface CollapsibleProps extends PrimitivePropsWithRef<'div'> {
      * @default undefined — no-op if omitted.
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Fires with the settled open state after the content panel finishes transitioning,
+     * on `transitionend` or synchronously if no transition is running. Counterpart
+     * to `onOpenChange`, which fires instantly.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
     /**
      * Prevents the trigger from toggling the content when set.
      * @default false
      */
     disabled?: boolean;
 }
+/**
+ * Props for the {@link Collapsible} recipe, which always wraps children in the
+ * derived anatomy. For headless usage, use `primitives/collapsible`'s `CollapsibleRoot` instead.
+ */
+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;
+}
 /** 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;
+    /**
+     * Keeps the panel mounted as `hidden="until-found"` for find-in-page and
+     * fragment navigation instead of plain `hidden=""`, degrading to plain `hidden=""`
+     * on unsupported browsers. Do not apply `display: none` on closed panels
+     * or text becomes unsearchable. Implies `forceMount`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
 }

package/dist/color-picker/ColorPicker.cjs

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

@@ -40,8 +40,22 @@ export declare const ColorPickerProvider: {
  * 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 four
+ * props are ignored and the children are rendered verbatim, for full manual
+ * composition; reach for `ColorPicker` from `@skdx/react/primitives/color-picker`
+ * for that case.
+ *
  * @example
  * ```tsx
+ * <ColorPicker defaultValue="#d94c4c" onValueCommit={save} swatches={['#e11d48', '#3b82f6']} />
+ * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/color-picker`.
+ * ```tsx
+ * import { ColorPicker, ColorPickerAlphaSlider, ColorPickerAlphaSliderThumb, ColorPickerArea, ColorPickerAreaThumb, ColorPickerEyeDropper, ColorPickerHueSlider, ColorPickerHueSliderThumb, ColorPickerInput } from '@skdx/react/primitives/color-picker';
+ *
  * <ColorPicker defaultValue="#d94c4c" onValueCommit={save}>
  *   <ColorPickerArea>
  *     <ColorPickerAreaThumb />

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

@@ -40,8 +40,22 @@ export declare const ColorPickerProvider: {
  * 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 four
+ * props are ignored and the children are rendered verbatim, for full manual
+ * composition; reach for `ColorPicker` from `@skdx/react/primitives/color-picker`
+ * for that case.
+ *
  * @example
  * ```tsx
+ * <ColorPicker defaultValue="#d94c4c" onValueCommit={save} swatches={['#e11d48', '#3b82f6']} />
+ * ```
+ *
+ * @example Full manual composition, for anything the derived anatomy can't express — `@skdx/react/primitives/color-picker`.
+ * ```tsx
+ * import { ColorPicker, ColorPickerAlphaSlider, ColorPickerAlphaSliderThumb, ColorPickerArea, ColorPickerAreaThumb, ColorPickerEyeDropper, ColorPickerHueSlider, ColorPickerHueSliderThumb, ColorPickerInput } from '@skdx/react/primitives/color-picker';
+ *
  * <ColorPicker defaultValue="#d94c4c" onValueCommit={save}>
  *   <ColorPickerArea>
  *     <ColorPickerAreaThumb />

package/dist/color-picker/ColorPicker.js

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