@skdx/react 0.28.0 → 0.30.0

package/dist/collapsible/Collapsible.d.cts

@@ -1,19 +1,15 @@
 import * as React from 'react';
 import type { CollapsibleContextValue, CollapsibleProps, CollapsibleRootProps } from './types.cjs';
-export declare const CollapsibleProvider: {
-    (props: CollapsibleContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useCollapsibleContext: (consumerName: string) => CollapsibleContextValue;
+export declare const CollapsibleProvider: React.FC<CollapsibleContextValue & {
+    children: React.ReactNode;
+}>, useCollapsibleContext: (consumerName: string) => CollapsibleContextValue;
 /**
- * Root of a show/hide interface: owns open state, hands it down via context.
- * Renders plain `<div>` with `data-state` (`"open"` | `"closed"`) and `data-disabled`.
- *
- * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
- *
- * Renders `children` verbatim. {@link Collapsible} (the recipe, below) is
- * this root with `CollapsibleTrigger` derived from `title` and `CollapsibleContent` wrapped around children.
+ * @internal Class-name stem the disclosure parts publish, so the same parts serve a
+ * standalone collapsible and an accordion's item without either owning a second copy.
+ */
+export declare const CollapsibleFamilyContext: React.Context<"collapsible" | "accordion">;
+/**
+ * Root of a show/hide panel; owns open state and shares it with descendants via context, rendering a `<div>` with `data-state` and `data-disabled`.
  *
  * @example
  * ```tsx
@@ -28,15 +24,12 @@ export declare const CollapsibleProvider: {
  * </CollapsibleRoot>
  * ```
  */
-export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleRoot: {
+    ({ open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, disabled, ref: forwardedRef, ...props }: CollapsibleRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * A show/hide panel with its own toggle. Always draws derived anatomy: `CollapsibleTrigger`
- * holding `title` and chevron `CollapsibleIndicator`, then `CollapsibleContent` panel wrapped
- * around `children` (the panel body). Never a switch; doesn't inspect what it was given.
- * For `forceMount` or `hiddenUntilFound`, compose {@link CollapsibleRoot}.
- *
- * Everything the root owns applies: `open`/`defaultOpen`/`onOpenChange`,
- * `onOpenChangeComplete`, `disabled`, `data-state`/`data-disabled` hooks.
+ * A show/hide panel with a derived trigger and indicator wrapped around `children`.
  *
  * @example
  * ```tsx
@@ -45,4 +38,7 @@ export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<Colla
  * </Collapsible>
  * ```
  */
-export declare const Collapsible: React.ForwardRefExoticComponent<Omit<CollapsibleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Collapsible: {
+    ({ title, children, ref: forwardedRef, ...rest }: CollapsibleProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/Collapsible.d.ts

@@ -1,19 +1,15 @@
 import * as React from 'react';
 import type { CollapsibleContextValue, CollapsibleProps, CollapsibleRootProps } from './types.js';
-export declare const CollapsibleProvider: {
-    (props: CollapsibleContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useCollapsibleContext: (consumerName: string) => CollapsibleContextValue;
+export declare const CollapsibleProvider: React.FC<CollapsibleContextValue & {
+    children: React.ReactNode;
+}>, useCollapsibleContext: (consumerName: string) => CollapsibleContextValue;
 /**
- * Root of a show/hide interface: owns open state, hands it down via context.
- * Renders plain `<div>` with `data-state` (`"open"` | `"closed"`) and `data-disabled`.
- *
- * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
- *
- * Renders `children` verbatim. {@link Collapsible} (the recipe, below) is
- * this root with `CollapsibleTrigger` derived from `title` and `CollapsibleContent` wrapped around children.
+ * @internal Class-name stem the disclosure parts publish, so the same parts serve a
+ * standalone collapsible and an accordion's item without either owning a second copy.
+ */
+export declare const CollapsibleFamilyContext: React.Context<"collapsible" | "accordion">;
+/**
+ * Root of a show/hide panel; owns open state and shares it with descendants via context, rendering a `<div>` with `data-state` and `data-disabled`.
  *
  * @example
  * ```tsx
@@ -28,15 +24,12 @@ export declare const CollapsibleProvider: {
  * </CollapsibleRoot>
  * ```
  */
-export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleRoot: {
+    ({ open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, disabled, ref: forwardedRef, ...props }: CollapsibleRootProps): React.ReactNode;
+    displayName: string;
+};
 /**
- * A show/hide panel with its own toggle. Always draws derived anatomy: `CollapsibleTrigger`
- * holding `title` and chevron `CollapsibleIndicator`, then `CollapsibleContent` panel wrapped
- * around `children` (the panel body). Never a switch; doesn't inspect what it was given.
- * For `forceMount` or `hiddenUntilFound`, compose {@link CollapsibleRoot}.
- *
- * Everything the root owns applies: `open`/`defaultOpen`/`onOpenChange`,
- * `onOpenChangeComplete`, `disabled`, `data-state`/`data-disabled` hooks.
+ * A show/hide panel with a derived trigger and indicator wrapped around `children`.
  *
  * @example
  * ```tsx
@@ -45,4 +38,7 @@ export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<Colla
  * </Collapsible>
  * ```
  */
-export declare const Collapsible: React.ForwardRefExoticComponent<Omit<CollapsibleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Collapsible: {
+    ({ title, children, ref: forwardedRef, ...rest }: CollapsibleProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/Collapsible.js

@@ -1 +1,2 @@
-import*as n from"react";import{createSafeContext as G}from"../utils/createContext.js";import{skdxPart as J}from"../utils/part.js";import{Primitive as K}from"../utils/primitive.js";import{useControllableState as Q}from"../utils/useControllableState.js";import*as s from"react";import{useComposedRefs as A}from"../utils/composeRefs.js";import{skdxPart as H}from"../utils/part.js";import{Primitive as w}from"../utils/primitive.js";import{jsx as D}from"react/jsx-runtime";var P=s.forwardRef(({forceMount:l,hiddenUntilFound:r,...t},m)=>{let f=R("CollapsibleContent"),c=s.useRef(null),x=A(m,c),{open:o,onOpen:d,onOpenChangeComplete:g,setContentMounted:y}=f,u=!!(l||r||o);s.useEffect(()=>(y(u),()=>y(!1)),[y,u]),s.useLayoutEffect(()=>{let e=c.current;if(!r||!e)return;o?e.removeAttribute("hidden"):e.setAttribute("hidden","until-found");let p=()=>d();return e.addEventListener("beforematch",p),()=>e.removeEventListener("beforematch",p)},[r,o,d]),s.useLayoutEffect(()=>{let e=c.current;if(!e)return;let p=e.hasAttribute("hidden"),b=e.getAttribute("hidden");p&&e.removeAttribute("hidden");let{scrollHeight:i,scrollWidth:a}=e;p&&e.setAttribute("hidden",b??""),e.style.setProperty("--skdx-collapsible-content-height",`${i}px`),e.style.setProperty("--skdx-collapsible-content-width",`${a}px`)},[o,u]);let C=s.useRef(o);return s.useEffect(()=>{let e=c.current;if(C.current===o)return;C.current=o;let b=(e?getComputedStyle(e).transitionDuration:"").split(",").some(a=>Number.parseFloat(a)>0&&!Number.isNaN(Number.parseFloat(a)));if(!e||!b){g(o);return}let i=a=>{a.target===e&&g(o)};return e.addEventListener("transitionend",i),e.addEventListener("transitioncancel",i),()=>{e.removeEventListener("transitionend",i),e.removeEventListener("transitioncancel",i)}},[o,g]),u?D(w.div,{id:f.contentId,"data-state":o?"open":"closed","data-disabled":f.disabled?"":void 0,hidden:!o,...t,...H("collapsible","content",t.className),ref:x}):null});P.displayName="CollapsibleContent";import*as N from"react";import{skdxPart as S}from"../utils/part.js";import{Primitive as B}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var h=N.forwardRef((l,r)=>{let t=R("CollapsibleIndicator");return V(B.span,{"aria-hidden":"true","data-state":t.open?"open":"closed","data-disabled":t.disabled?"":void 0,...l,...S("collapsible","indicator",l.className),ref:r})});h.displayName="CollapsibleIndicator";import*as T from"react";import{skdxPart as $}from"../utils/part.js";import{composeEventHandlers as W,Primitive as q}from"../utils/primitive.js";import{jsx as z}from"react/jsx-runtime";var E=T.forwardRef((l,r)=>{let t=R("CollapsibleTrigger");return z(q.button,{type:"button","aria-controls":t.open||t.contentMounted?t.contentId:void 0,"aria-expanded":t.open,"data-state":t.open?"open":"closed","data-disabled":t.disabled?"":void 0,disabled:t.disabled,...l,...$("collapsible","trigger",l.className),ref:r,onClick:W(l.onClick,t.onOpenToggle)})});E.displayName="CollapsibleTrigger";import{Fragment as F,jsx as L,jsxs as k}from"react/jsx-runtime";var M=({title:l,children:r})=>k(F,{children:[l===void 0?null:k(E,{children:[l,L(h,{})]}),L(P,{children:r})]});import{jsx as v}from"react/jsx-runtime";var[X,R]=G("Collapsible"),I=n.forwardRef(({open:l,defaultOpen:r=!1,onOpenChange:t,onOpenChangeComplete:m,disabled:f=!1,...c},x)=>{let[o=!1,d]=Q({prop:l,defaultProp:r,onChange:t}),g=n.useId(),y=n.useCallback(()=>d(a=>!a),[d]),u=n.useCallback(()=>d(!0),[d]),[C,e]=n.useState(!1),p=n.useRef(m);n.useEffect(()=>{p.current=m});let b=n.useRef(o),i=n.useCallback(a=>{b.current!==a&&(b.current=a,p.current?.(a))},[]);return n.useEffect(()=>{C||i(o)},[C,o,i]),v(X,{contentId:g,open:o,disabled:f,onOpenToggle:y,onOpen:u,onOpenChangeComplete:i,contentMounted:C,setContentMounted:e,children:v(K.div,{"data-state":o?"open":"closed","data-disabled":f?"":void 0,...c,...J("collapsible","root",c.className),ref:x})})});I.displayName="CollapsibleRoot";var O=n.forwardRef(({title:l,children:r,...t},m)=>v(I,{...t,ref:m,children:v(M,{title:l,children:r})}));O.displayName="Collapsible";export{O as Collapsible,P as CollapsibleContent,h as CollapsibleIndicator,X as CollapsibleProvider,I as CollapsibleRoot,E as CollapsibleTrigger,R as useCollapsibleContext};
+'use client';
+import*as l from"react";import{createSafeContext as G}from"../utils/createContext.js";import{skdxPart as K}from"../utils/part.js";import{Primitive as Q}from"../utils/primitive.js";import{useControllableState as Y}from"../utils/useControllableState.js";import*as i from"react";import{useComposedRefs as F}from"../utils/composeRefs.js";import{skdxPart as H}from"../utils/part.js";import{Primitive as $}from"../utils/primitive.js";import{jsx as w}from"react/jsx-runtime";var N=({forceMount:r,hiddenUntilFound:n,ref:t,...s})=>{let C=R("CollapsibleContent"),u=i.useContext(y),d=i.useRef(null),m=F(t,d),{open:o,onOpen:P,onOpenChangeComplete:x,setContentMounted:g}=C,c=!!(r||n||o);i.useEffect(()=>(g(c),()=>g(!1)),[g,c]),i.useLayoutEffect(()=>{let e=d.current;if(!n||!e)return;o?e.removeAttribute("hidden"):e.setAttribute("hidden","until-found");let p=()=>P();return e.addEventListener("beforematch",p),()=>e.removeEventListener("beforematch",p)},[n,o,P]),i.useLayoutEffect(()=>{let e=d.current;if(!e)return;let p=e.hasAttribute("hidden"),f=e.getAttribute("hidden");p&&e.removeAttribute("hidden");let{scrollHeight:a,scrollWidth:b}=e;p&&e.setAttribute("hidden",f??""),e.style.setProperty(`--skdx-${u}-content-height`,`${a}px`),e.style.setProperty(`--skdx-${u}-content-width`,`${b}px`)},[o,c,u]);let v=i.useRef(o);return i.useEffect(()=>{let e=d.current;if(v.current===o)return;v.current=o;let f=(e?getComputedStyle(e).transitionDuration:"").split(",").some(b=>Number.parseFloat(b)>0&&!Number.isNaN(Number.parseFloat(b)));if(!e||!f){x(o);return}let a=b=>{b.target===e&&x(o)};return e.addEventListener("transitionend",a),e.addEventListener("transitioncancel",a),()=>{e.removeEventListener("transitionend",a),e.removeEventListener("transitioncancel",a)}},[o,x]),c?w($.div,{id:C.contentId,"data-state":o?"open":"closed","data-disabled":C.disabled?"":void 0,hidden:!o,...s,...H(u,"content",s.className),ref:m}):null};N.displayName="CollapsibleContent";import*as I from"react";import{skdxPart as D}from"../utils/part.js";import{Primitive as V}from"../utils/primitive.js";import{jsx as B}from"react/jsx-runtime";var E=({ref:r,...n})=>{let t=R("CollapsibleIndicator"),s=I.useContext(y);return B(V.span,{"aria-hidden":"true","data-state":t.open?"open":"closed","data-disabled":t.disabled?"":void 0,...n,...D(s,"indicator",n.className),ref:r})};E.displayName="CollapsibleIndicator";import*as O from"react";import{skdxPart as J}from"../utils/part.js";import{composeEventHandlers as W,Primitive as X}from"../utils/primitive.js";import{jsx as q}from"react/jsx-runtime";var k=({ref:r,...n})=>{let t=R("CollapsibleTrigger"),s=O.useContext(y);return q(X.button,{type:"button","aria-controls":t.open||t.contentMounted?t.contentId:void 0,"aria-expanded":t.open,"data-state":t.open?"open":"closed","data-disabled":t.disabled?"":void 0,disabled:t.disabled,...n,...J(s,"trigger",n.className),ref:r,onClick:W(n.onClick,t.onOpenToggle)})};k.displayName="CollapsibleTrigger";import{Fragment as z,jsx as T,jsxs as A}from"react/jsx-runtime";var L=({title:r,children:n})=>A(z,{children:[r?A(k,{children:[r,T(E,{})]}):null,T(N,{children:n})]});import{jsx as h}from"react/jsx-runtime";var[Z,R]=G("Collapsible"),y=l.createContext("collapsible"),M=({open:r,defaultOpen:n=!1,onOpenChange:t,onOpenChangeComplete:s,disabled:C=!1,ref:u,...d})=>{let[m=!1,o]=Y({prop:r,defaultProp:n,onChange:t}),P=l.useId(),x=l.useCallback(()=>o(a=>!a),[o]),g=l.useCallback(()=>o(!0),[o]),[c,v]=l.useState(!1),e=l.useRef(s);l.useEffect(()=>{e.current=s});let p=l.useRef(m),f=l.useCallback(a=>{p.current!==a&&(p.current=a,e.current?.(a))},[]);return l.useEffect(()=>{c||f(m)},[c,m,f]),h(Z,{contentId:P,open:m,disabled:C,onOpenToggle:x,onOpen:g,onOpenChangeComplete:f,contentMounted:c,setContentMounted:v,children:h(Q.div,{"data-state":m?"open":"closed","data-disabled":C?"":void 0,...d,...K("collapsible","root",d.className),ref:u})})};M.displayName="CollapsibleRoot";var S=({title:r,children:n,ref:t,...s})=>h(M,{...s,ref:t,children:h(L,{title:r,children:n})});S.displayName="Collapsible";export{S as Collapsible,N as CollapsibleContent,y as CollapsibleFamilyContext,E as CollapsibleIndicator,Z as CollapsibleProvider,M as CollapsibleRoot,k as CollapsibleTrigger,R as useCollapsibleContext};

package/dist/collapsible/CollapsibleAnatomy.d.cts

@@ -1,11 +1,6 @@
 import type * as React from 'react';
-/**
- * The anatomy a {@link Collapsible} draws from `title`: the `CollapsibleTrigger` with its
- * `CollapsibleIndicator`, then the `CollapsibleContent` panel around `children`.
- *
- * @internal
- */
+/** @internal */
 export declare const CollapsibleAnatomy: ({ title, children, }: {
-    title?: React.ReactNode;
-    children?: React.ReactNode;
+    title?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;

package/dist/collapsible/CollapsibleAnatomy.d.ts

@@ -1,11 +1,6 @@
 import type * as React from 'react';
-/**
- * The anatomy a {@link Collapsible} draws from `title`: the `CollapsibleTrigger` with its
- * `CollapsibleIndicator`, then the `CollapsibleContent` panel around `children`.
- *
- * @internal
- */
+/** @internal */
 export declare const CollapsibleAnatomy: ({ title, children, }: {
-    title?: React.ReactNode;
-    children?: React.ReactNode;
+    title?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
 }) => React.JSX.Element;

package/dist/collapsible/CollapsibleContent.d.cts

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import type { CollapsibleContentProps } from './types.cjs';
 /**
- * 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.
+ * Panel controlled by a {@link Collapsible}, rendering a `<div>` with `id`, `data-state`, `data-disabled`, and `hidden` while closed.
  *
  * @example
  * ```tsx
@@ -18,4 +13,7 @@ import type { CollapsibleContentProps } from './types.cjs';
  * </CollapsibleRoot>
  * ```
  */
-export declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleContent: {
+    ({ forceMount, hiddenUntilFound, ref: forwardedRef, ...props }: CollapsibleContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/CollapsibleContent.d.ts

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import type { CollapsibleContentProps } from './types.js';
 /**
- * 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.
+ * Panel controlled by a {@link Collapsible}, rendering a `<div>` with `id`, `data-state`, `data-disabled`, and `hidden` while closed.
  *
  * @example
  * ```tsx
@@ -18,4 +13,7 @@ import type { CollapsibleContentProps } from './types.js';
  * </CollapsibleRoot>
  * ```
  */
-export declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleContent: {
+    ({ forceMount, hiddenUntilFound, ref: forwardedRef, ...props }: CollapsibleContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/CollapsibleIndicator.d.cts

@@ -1,7 +1,7 @@
 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.
+ * Disclosure indicator inside {@link CollapsibleTrigger} — renders `<span>` with `data-state` and `data-disabled`; the glyph is your child.
  *
  * @example
  * ```tsx
@@ -15,4 +15,7 @@ import type { CollapsibleIndicatorProps } from './types.cjs';
  * </CollapsibleTrigger>
  * ```
  */
-export declare const CollapsibleIndicator: React.ForwardRefExoticComponent<Omit<CollapsibleIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CollapsibleIndicator: {
+    ({ ref: forwardedRef, ...props }: CollapsibleIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/CollapsibleIndicator.d.ts

@@ -1,7 +1,7 @@
 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.
+ * Disclosure indicator inside {@link CollapsibleTrigger} — renders `<span>` with `data-state` and `data-disabled`; the glyph is your child.
  *
  * @example
  * ```tsx
@@ -15,4 +15,7 @@ import type { CollapsibleIndicatorProps } from './types.js';
  * </CollapsibleTrigger>
  * ```
  */
-export declare const CollapsibleIndicator: React.ForwardRefExoticComponent<Omit<CollapsibleIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CollapsibleIndicator: {
+    ({ ref: forwardedRef, ...props }: CollapsibleIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/collapsible/CollapsibleTrigger.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { CollapsibleTriggerProps } from './types.cjs';
 /**
- * Toggle button. Renders `<button type="button">` with `aria-controls`,
- * `aria-expanded`, `data-state`, and `data-disabled`.
+ * Toggle button rendering `<button type="button">` with `aria-controls`, `aria-expanded`, `data-state`, and `data-disabled`.
  *
  * @example
  * ```tsx
@@ -14,4 +13,7 @@ import type { CollapsibleTriggerProps } from './types.cjs';
  * </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,8 +1,7 @@
 import * as React from 'react';
 import type { CollapsibleTriggerProps } from './types.js';
 /**
- * Toggle button. Renders `<button type="button">` with `aria-controls`,
- * `aria-expanded`, `data-state`, and `data-disabled`.
+ * Toggle button rendering `<button type="button">` with `aria-controls`, `aria-expanded`, `data-state`, and `data-disabled`.
  *
  * @example
  * ```tsx
@@ -14,4 +13,7 @@ import type { CollapsibleTriggerProps } from './types.js';
  * </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/types.d.cts

@@ -5,17 +5,15 @@ 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. The panel reports
-     * itself: `forceMount`/`hiddenUntilFound` live on the panel and the trigger
-     * cannot see them.
-     */
+    /** 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;
 }
@@ -25,40 +23,35 @@ 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,
-     * on `transitionend` or synchronously if no transition is running. Counterpart
-     * to `onOpenChange`, which fires instantly.
+     * Fires with the settled open state after the content panel finishes transitioning.
      * @default undefined — no-op if omitted.
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    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. For headless usage, use `primitives/collapsible`'s `CollapsibleRoot` instead.
- */
+/** 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;
+    title?: React.ReactNode | undefined;
 }
 /** Props for {@link CollapsibleTrigger}, the button that toggles the content open/closed. */
 export interface CollapsibleTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -73,13 +66,12 @@ export interface CollapsibleContentProps extends PrimitivePropsWithRef<'div'> {
      * instead of unmounting it, for animation libraries needing it during exit transitions.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * 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`.
+     * 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
      */
-    hiddenUntilFound?: boolean;
+    hiddenUntilFound?: boolean | undefined;
 }

package/dist/collapsible/types.d.ts

@@ -5,17 +5,15 @@ 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. The panel reports
-     * itself: `forceMount`/`hiddenUntilFound` live on the panel and the trigger
-     * cannot see them.
-     */
+    /** 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;
 }
@@ -25,40 +23,35 @@ 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,
-     * on `transitionend` or synchronously if no transition is running. Counterpart
-     * to `onOpenChange`, which fires instantly.
+     * Fires with the settled open state after the content panel finishes transitioning.
      * @default undefined — no-op if omitted.
      */
-    onOpenChangeComplete?: (open: boolean) => void;
+    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. For headless usage, use `primitives/collapsible`'s `CollapsibleRoot` instead.
- */
+/** 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;
+    title?: React.ReactNode | undefined;
 }
 /** Props for {@link CollapsibleTrigger}, the button that toggles the content open/closed. */
 export interface CollapsibleTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -73,13 +66,12 @@ export interface CollapsibleContentProps extends PrimitivePropsWithRef<'div'> {
      * instead of unmounting it, for animation libraries needing it during exit transitions.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * 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`.
+     * 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
      */
-    hiddenUntilFound?: boolean;
+    hiddenUntilFound?: boolean | undefined;
 }

package/dist/color-picker/ColorPicker.cjs

@@ -1 +1,2 @@
-"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});
+'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});