@skdx/react 0.26.0

package/dist/clipboard/Clipboard.js

@@ -0,0 +1 @@
+import*as a from"react";import{createSafeContext as I}from"../utils/createContext.js";import{announce as E}from"../utils/liveAnnouncer.js";import{skdxPart as k}from"../utils/part.js";import{Primitive as N}from"../utils/primitive.js";import{useCallbackRef as b}from"../utils/useCallbackRef.js";import{jsx as u}from"react/jsx-runtime";var[H,d]=I("Clipboard");function M(e){let o=document.activeElement,t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(t);try{if(t.select(),typeof document.execCommand!="function"||!document.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{t.remove(),o?.focus()}}async function S(e){if(navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(e);return}catch{}M(e)}var F=a.forwardRef(({value:e,timeout:o=2e3,onCopy:t,onCopyError:i,disabled:r=!1,copiedLabel:n="Copied to clipboard",...s},T)=>{let[l,c]=a.useState(!1),p=a.useRef(void 0),m=b(t),f=b(i);a.useEffect(()=>()=>clearTimeout(p.current),[]);let w=a.useCallback(()=>{r||S(e).then(()=>{c(!0),n&&E(n),m(e),clearTimeout(p.current),o!==null&&(p.current=setTimeout(()=>c(!1),o))},R=>f(R))},[r,e,o,n,m,f]);return u(H,{value:e,copied:l,disabled:r,copy:w,children:u(N.div,{"data-state":l?"copied":"idle","data-disabled":r?"":void 0,...s,...k("clipboard","root",s.className),ref:T})})});F.displayName="Clipboard";import*as y from"react";import{skdxPart as L}from"../utils/part.js";import{Presence as O}from"../utils/presence.js";import{Primitive as A}from"../utils/primitive.js";import{jsx as C}from"react/jsx-runtime";var x=y.forwardRef(({match:e="copied",...o},t)=>{let r=d("ClipboardIndicator").copied?"copied":"idle";return C(O,{present:r===e,children:C(A.span,{"data-state":r,...o,...L("clipboard","indicator",o.className),ref:t})})});x.displayName="ClipboardIndicator";import*as h from"react";import{skdxPart as V}from"../utils/part.js";import{composeEventHandlers as q,Primitive as B}from"../utils/primitive.js";import{jsx as D}from"react/jsx-runtime";var g=h.forwardRef((e,o)=>{let t=d("ClipboardInput");return D(B.input,{type:"text","data-state":t.copied?"copied":"idle","data-disabled":t.disabled?"":void 0,"aria-disabled":t.disabled||void 0,...e,value:t.value,readOnly:!0,...V("clipboard","input",e.className),ref:o,onFocus:q(e.onFocus,i=>i.currentTarget.select())})});g.displayName="ClipboardInput";import*as v from"react";import{skdxPart as G}from"../utils/part.js";import{composeEventHandlers as W,Primitive as z}from"../utils/primitive.js";import{jsx as J}from"react/jsx-runtime";var P=v.forwardRef(({disabled:e,...o},t)=>{let i=d("ClipboardTrigger"),r=i.disabled||e||!1;return J(z.button,{type:"button","data-state":i.copied?"copied":"idle","data-disabled":r?"":void 0,disabled:r,...o,...G("clipboard","trigger",o.className),ref:t,onClick:W(o.onClick,()=>i.copy())})});P.displayName="ClipboardTrigger";export{F as Clipboard,x as ClipboardIndicator,g as ClipboardInput,H as ClipboardProvider,P as ClipboardTrigger,d as useClipboardContext};

package/dist/clipboard/ClipboardIndicator.d.cts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { ClipboardIndicatorProps } from './types.cjs';
+/**
+ * Renders its children only while the {@link Clipboard} root is in the state
+ * named by `match` — `"copied"` by default, `"idle"` for the icon it replaces.
+ * Wrapped in {@link Presence}, so a CSS exit animation on
+ * `[data-state='idle']` gets to finish before the node leaves the DOM; with no
+ * animation declared it unmounts immediately and costs nothing.
+ *
+ * It renders a plain `<span>` and stays out of the accessibility tree's way:
+ * the announcement of a successful copy comes from the root's live-region
+ * message, not from this node appearing. If the indicator is an icon with no
+ * text, mark it `aria-hidden` and name the trigger instead — an unlabelled
+ * swap is silence to a screen-reader user.
+ *
+ * @example
+ * ```tsx
+ * <ClipboardIndicator match="idle">Copy</ClipboardIndicator>
+ * <ClipboardIndicator>Copied!</ClipboardIndicator>
+ * ```
+ */
+export declare const ClipboardIndicator: React.ForwardRefExoticComponent<Omit<ClipboardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/clipboard/ClipboardIndicator.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { ClipboardIndicatorProps } from './types.js';
+/**
+ * Renders its children only while the {@link Clipboard} root is in the state
+ * named by `match` — `"copied"` by default, `"idle"` for the icon it replaces.
+ * Wrapped in {@link Presence}, so a CSS exit animation on
+ * `[data-state='idle']` gets to finish before the node leaves the DOM; with no
+ * animation declared it unmounts immediately and costs nothing.
+ *
+ * It renders a plain `<span>` and stays out of the accessibility tree's way:
+ * the announcement of a successful copy comes from the root's live-region
+ * message, not from this node appearing. If the indicator is an icon with no
+ * text, mark it `aria-hidden` and name the trigger instead — an unlabelled
+ * swap is silence to a screen-reader user.
+ *
+ * @example
+ * ```tsx
+ * <ClipboardIndicator match="idle">Copy</ClipboardIndicator>
+ * <ClipboardIndicator>Copied!</ClipboardIndicator>
+ * ```
+ */
+export declare const ClipboardIndicator: React.ForwardRefExoticComponent<Omit<ClipboardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/clipboard/ClipboardInput.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { ClipboardInputProps } from './types.cjs';
+/**
+ * Optional read-only `<input>` showing the {@link Clipboard} root's `value` —
+ * the "here is exactly what you are about to copy" field next to the button.
+ * Renders `readOnly` (not `disabled`, which would take it out of the tab order
+ * and grey the text out) with `data-state="copied" | "idle"`, and selects its
+ * whole contents on focus so the manual Ctrl+C path is one keystroke rather
+ * than a drag.
+ *
+ * `value` and `defaultValue` are deliberately not accepted: the root owns the
+ * text, and a field showing something other than what the button copies is a
+ * bug with a UI. Give it an `aria-label` — a bare read-only field announces
+ * only its contents.
+ *
+ * @example
+ * ```tsx
+ * <Clipboard value="npm i @skdx/react">
+ *   <ClipboardInput aria-label="Install command" />
+ *   <ClipboardTrigger>Copy</ClipboardTrigger>
+ * </Clipboard>
+ * ```
+ */
+export declare const ClipboardInput: React.ForwardRefExoticComponent<Omit<ClipboardInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/clipboard/ClipboardInput.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { ClipboardInputProps } from './types.js';
+/**
+ * Optional read-only `<input>` showing the {@link Clipboard} root's `value` —
+ * the "here is exactly what you are about to copy" field next to the button.
+ * Renders `readOnly` (not `disabled`, which would take it out of the tab order
+ * and grey the text out) with `data-state="copied" | "idle"`, and selects its
+ * whole contents on focus so the manual Ctrl+C path is one keystroke rather
+ * than a drag.
+ *
+ * `value` and `defaultValue` are deliberately not accepted: the root owns the
+ * text, and a field showing something other than what the button copies is a
+ * bug with a UI. Give it an `aria-label` — a bare read-only field announces
+ * only its contents.
+ *
+ * @example
+ * ```tsx
+ * <Clipboard value="npm i @skdx/react">
+ *   <ClipboardInput aria-label="Install command" />
+ *   <ClipboardTrigger>Copy</ClipboardTrigger>
+ * </Clipboard>
+ * ```
+ */
+export declare const ClipboardInput: React.ForwardRefExoticComponent<Omit<ClipboardInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/clipboard/ClipboardTrigger.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ClipboardTriggerProps } from './types.cjs';
+/**
+ * The button that copies the {@link Clipboard} root's `value`. Renders a real
+ * `<button type="button">` — so Enter and Space work for free — with
+ * `data-state="copied" | "idle"` and `data-disabled`, and is `disabled` when
+ * either it or the root is.
+ *
+ * It carries no built-in label: give it text, or an icon plus `aria-label`.
+ * Keep that label stable across the copy ("Copy npm command"), and let
+ * `ClipboardIndicator` swap the *visual* — renaming the button under the user's
+ * pointer moves the target they were about to click again, and re-announces
+ * the whole control on focus.
+ *
+ * @example
+ * ```tsx
+ * <ClipboardTrigger aria-label="Copy install command">
+ *   <ClipboardIndicator match="idle"><CopyIcon /></ClipboardIndicator>
+ *   <ClipboardIndicator><CheckIcon /></ClipboardIndicator>
+ * </ClipboardTrigger>
+ * ```
+ */
+export declare const ClipboardTrigger: React.ForwardRefExoticComponent<Omit<ClipboardTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/clipboard/ClipboardTrigger.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ClipboardTriggerProps } from './types.js';
+/**
+ * The button that copies the {@link Clipboard} root's `value`. Renders a real
+ * `<button type="button">` — so Enter and Space work for free — with
+ * `data-state="copied" | "idle"` and `data-disabled`, and is `disabled` when
+ * either it or the root is.
+ *
+ * It carries no built-in label: give it text, or an icon plus `aria-label`.
+ * Keep that label stable across the copy ("Copy npm command"), and let
+ * `ClipboardIndicator` swap the *visual* — renaming the button under the user's
+ * pointer moves the target they were about to click again, and re-announces
+ * the whole control on focus.
+ *
+ * @example
+ * ```tsx
+ * <ClipboardTrigger aria-label="Copy install command">
+ *   <ClipboardIndicator match="idle"><CopyIcon /></ClipboardIndicator>
+ *   <ClipboardIndicator><CheckIcon /></ClipboardIndicator>
+ * </ClipboardTrigger>
+ * ```
+ */
+export declare const ClipboardTrigger: React.ForwardRefExoticComponent<Omit<ClipboardTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/clipboard/index.d.cts

@@ -0,0 +1,5 @@
+export * from './Clipboard.cjs';
+export { ClipboardIndicator } from './ClipboardIndicator.cjs';
+export { ClipboardInput } from './ClipboardInput.cjs';
+export { ClipboardTrigger } from './ClipboardTrigger.cjs';
+export type { ClipboardProps, ClipboardTriggerProps, ClipboardIndicatorProps, ClipboardInputProps, ClipboardState, } from './types.cjs';

package/dist/clipboard/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Clipboard.js';
+export { ClipboardIndicator } from './ClipboardIndicator.js';
+export { ClipboardInput } from './ClipboardInput.js';
+export { ClipboardTrigger } from './ClipboardTrigger.js';
+export type { ClipboardProps, ClipboardTriggerProps, ClipboardIndicatorProps, ClipboardInputProps, ClipboardState, } from './types.js';

package/dist/clipboard/types.d.cts

@@ -0,0 +1,79 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** The two states a {@link Clipboard} can be in, mirrored onto `data-state` on every part. */
+export type ClipboardState = 'copied' | 'idle';
+/** @internal Shared state distributed from {@link Clipboard} to its parts via context. Not part of the public API. */
+export interface ClipboardContextValue {
+    value: string;
+    copied: boolean;
+    disabled: boolean;
+    copy: () => void;
+}
+/**
+ * Props for the {@link Clipboard} root.
+ *
+ * The native `onCopy` is omitted because this component's own `onCopy` shadows
+ * it: React's is the DOM `copy` event fired when the user copies a selection
+ * *inside* the element, which is a different thing from "the trigger wrote the
+ * value to the clipboard". Keeping both under one name is what the type error
+ * was; a consumer who wants the DOM event can still listen for it on a wrapper.
+ */
+export interface ClipboardProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCopy'> {
+    /** The text written to the system clipboard when a `ClipboardTrigger` is activated. */
+    value: string;
+    /**
+     * How long the `copied` state lasts, in milliseconds, before it falls back to
+     * `idle`. Pass `null` to keep `copied` until the next copy — for a flow where
+     * the confirmation should persist until the user does something else.
+     * @default 2000 — long enough to read the confirmation, short enough that a second copy still feels like it did something.
+     */
+    timeout?: number | null;
+    /**
+     * Fires with the copied text after the write succeeds — never on failure, so
+     * it is safe to hang analytics or a toast off it.
+     * @default undefined — no-op if omitted.
+     */
+    onCopy?: (value: string) => void;
+    /**
+     * Fires with the failure when both the async Clipboard API and the
+     * `execCommand` fallback fail — a denied permission, a page with no user
+     * gesture, a locked-down browser. Errors are reported here and nowhere else:
+     * nothing is thrown into render and nothing is swallowed silently, so a
+     * consumer can show "Press Ctrl+C to copy" instead of a dead button.
+     * @default undefined — the error is reported nowhere if omitted, and the `copied` state simply never turns on.
+     */
+    onCopyError?: (error: unknown) => void;
+    /**
+     * Disables the trigger and blocks copying entirely.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The polite live-region message announced after a successful copy — the
+     * only feedback a screen-reader user gets, since swapping a
+     * `ClipboardIndicator` changes nothing an assistive technology reads. Pass
+     * `''` to announce nothing.
+     * @default 'Copied to clipboard'
+     */
+    copiedLabel?: string;
+}
+/** Props for the {@link ClipboardTrigger} button. */
+export interface ClipboardTriggerProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Disables just this trigger. A disabled root disables every trigger
+     * regardless of this prop.
+     * @default false — the trigger follows the root's `disabled`.
+     */
+    disabled?: boolean;
+}
+/** Props for a {@link ClipboardIndicator}, the mark shown in one copy state. */
+export interface ClipboardIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Which state this indicator renders in — `'copied'` for the checkmark,
+     * `'idle'` for the copy icon it replaces.
+     * @default 'copied' — the confirmation, which is the one that needs mounting logic.
+     */
+    match?: ClipboardState;
+}
+/** Props for the optional {@link ClipboardInput}. */
+export interface ClipboardInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+}

package/dist/clipboard/types.d.ts

@@ -0,0 +1,79 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** The two states a {@link Clipboard} can be in, mirrored onto `data-state` on every part. */
+export type ClipboardState = 'copied' | 'idle';
+/** @internal Shared state distributed from {@link Clipboard} to its parts via context. Not part of the public API. */
+export interface ClipboardContextValue {
+    value: string;
+    copied: boolean;
+    disabled: boolean;
+    copy: () => void;
+}
+/**
+ * Props for the {@link Clipboard} root.
+ *
+ * The native `onCopy` is omitted because this component's own `onCopy` shadows
+ * it: React's is the DOM `copy` event fired when the user copies a selection
+ * *inside* the element, which is a different thing from "the trigger wrote the
+ * value to the clipboard". Keeping both under one name is what the type error
+ * was; a consumer who wants the DOM event can still listen for it on a wrapper.
+ */
+export interface ClipboardProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCopy'> {
+    /** The text written to the system clipboard when a `ClipboardTrigger` is activated. */
+    value: string;
+    /**
+     * How long the `copied` state lasts, in milliseconds, before it falls back to
+     * `idle`. Pass `null` to keep `copied` until the next copy — for a flow where
+     * the confirmation should persist until the user does something else.
+     * @default 2000 — long enough to read the confirmation, short enough that a second copy still feels like it did something.
+     */
+    timeout?: number | null;
+    /**
+     * Fires with the copied text after the write succeeds — never on failure, so
+     * it is safe to hang analytics or a toast off it.
+     * @default undefined — no-op if omitted.
+     */
+    onCopy?: (value: string) => void;
+    /**
+     * Fires with the failure when both the async Clipboard API and the
+     * `execCommand` fallback fail — a denied permission, a page with no user
+     * gesture, a locked-down browser. Errors are reported here and nowhere else:
+     * nothing is thrown into render and nothing is swallowed silently, so a
+     * consumer can show "Press Ctrl+C to copy" instead of a dead button.
+     * @default undefined — the error is reported nowhere if omitted, and the `copied` state simply never turns on.
+     */
+    onCopyError?: (error: unknown) => void;
+    /**
+     * Disables the trigger and blocks copying entirely.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The polite live-region message announced after a successful copy — the
+     * only feedback a screen-reader user gets, since swapping a
+     * `ClipboardIndicator` changes nothing an assistive technology reads. Pass
+     * `''` to announce nothing.
+     * @default 'Copied to clipboard'
+     */
+    copiedLabel?: string;
+}
+/** Props for the {@link ClipboardTrigger} button. */
+export interface ClipboardTriggerProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Disables just this trigger. A disabled root disables every trigger
+     * regardless of this prop.
+     * @default false — the trigger follows the root's `disabled`.
+     */
+    disabled?: boolean;
+}
+/** Props for a {@link ClipboardIndicator}, the mark shown in one copy state. */
+export interface ClipboardIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Which state this indicator renders in — `'copied'` for the checkmark,
+     * `'idle'` for the copy icon it replaces.
+     * @default 'copied' — the confirmation, which is the one that needs mounting logic.
+     */
+    match?: ClipboardState;
+}
+/** Props for the optional {@link ClipboardInput}. */
+export interface ClipboardInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+}

package/dist/collapsible/Collapsible.cjs

@@ -0,0 +1 @@
+"use strict";var h=Object.create;var s=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var q=(e,l)=>{for(var o in l)s(e,o,{get:l[o],enumerable:!0})},c=(e,l,o,t)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of S(l))!B.call(e,a)&&a!==o&&s(e,a,{get:()=>l[a],enumerable:!(t=D(l,a))||t.enumerable});return e};var n=(e,l,o)=>(o=e!=null?h(V(e)):{},c(l||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),z=e=>c(s({},"__esModule",{value:!0}),e);var A={};q(A,{Collapsible:()=>y,CollapsibleContent:()=>C,CollapsibleProvider:()=>T,CollapsibleTrigger:()=>m,useCollapsibleContext:()=>p});module.exports=z(A);var r=n(require("react"),1),g=require("../utils/createContext.cjs"),P=require("../utils/part.cjs"),x=require("../utils/primitive.cjs"),u=require("../utils/useControllableState.cjs"),d=require("react/jsx-runtime"),[T,p]=(0,g.createSafeContext)("Collapsible"),y=r.forwardRef(({open:e,defaultOpen:l=!1,onOpenChange:o,disabled:t=!1,...a},O)=>{let[b=!1,f]=(0,u.useControllableState)({prop:e,defaultProp:l,onChange:o}),w=r.useId(),L=r.useCallback(()=>f(M=>!M),[f]);return(0,d.jsx)(T,{contentId:w,open:b,disabled:t,onOpenToggle:L,children:(0,d.jsx)(x.Primitive.div,{"data-state":b?"open":"closed","data-disabled":t?"":void 0,...a,...(0,P.skdxPart)("collapsible","root",a.className),ref:O})})});y.displayName="Collapsible";var R=n(require("react"),1),v=require("../utils/part.cjs"),i=require("../utils/primitive.cjs");var k=require("react/jsx-runtime"),m=R.forwardRef((e,l)=>{let o=p("CollapsibleTrigger");return(0,k.jsx)(i.Primitive.button,{type:"button","aria-controls":o.contentId,"aria-expanded":o.open,"data-state":o.open?"open":"closed","data-disabled":o.disabled?"":void 0,disabled:o.disabled,...e,...(0,v.skdxPart)("collapsible","trigger",e.className),ref:l,onClick:(0,i.composeEventHandlers)(e.onClick,o.onOpenToggle)})});m.displayName="CollapsibleTrigger";var N=n(require("react"),1),I=require("../utils/part.cjs"),E=require("../utils/primitive.cjs");var H=require("react/jsx-runtime"),C=N.forwardRef(({forceMount:e,...l},o)=>{let t=p("CollapsibleContent");return e||t.open?(0,H.jsx)(E.Primitive.div,{id:t.contentId,"data-state":t.open?"open":"closed","data-disabled":t.disabled?"":void 0,hidden:!t.open,...l,...(0,I.skdxPart)("collapsible","content",l.className),ref:o}):null});C.displayName="CollapsibleContent";0&&(module.exports={Collapsible,CollapsibleContent,CollapsibleProvider,CollapsibleTrigger,useCollapsibleContext});

package/dist/collapsible/Collapsible.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { CollapsibleContextValue, CollapsibleProps } from './types.cjs';
+export declare const CollapsibleProvider: {
+    (props: CollapsibleContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCollapsibleContext: (consumerName: string) => CollapsibleContextValue;
+/**
+ * Root of a show/hide interface: owns the open state and hands it down to
+ * `CollapsibleTrigger` / `CollapsibleContent` via context. Renders a plain
+ * `<div>` with `data-state` (`"open"` | `"closed"`) and `data-disabled`.
+ *
+ * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <Collapsible defaultOpen={false}>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export declare const Collapsible: React.ForwardRefExoticComponent<Omit<CollapsibleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/collapsible/Collapsible.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { CollapsibleContextValue, CollapsibleProps } from './types.js';
+export declare const CollapsibleProvider: {
+    (props: CollapsibleContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCollapsibleContext: (consumerName: string) => CollapsibleContextValue;
+/**
+ * Root of a show/hide interface: owns the open state and hands it down to
+ * `CollapsibleTrigger` / `CollapsibleContent` via context. Renders a plain
+ * `<div>` with `data-state` (`"open"` | `"closed"`) and `data-disabled`.
+ *
+ * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <Collapsible defaultOpen={false}>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export declare const Collapsible: React.ForwardRefExoticComponent<Omit<CollapsibleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/collapsible/Collapsible.js

@@ -0,0 +1 @@
+import*as a from"react";import{createSafeContext as x}from"../utils/createContext.js";import{skdxPart as u}from"../utils/part.js";import{Primitive as T}from"../utils/primitive.js";import{useControllableState as y}from"../utils/useControllableState.js";import{jsx as n}from"react/jsx-runtime";var[R,r]=x("Collapsible"),v=a.forwardRef(({open:l,defaultOpen:t=!1,onOpenChange:e,disabled:o=!1,...p},f)=>{let[s=!1,i]=y({prop:l,defaultProp:t,onChange:e}),c=a.useId(),g=a.useCallback(()=>i(P=>!P),[i]);return n(R,{contentId:c,open:s,disabled:o,onOpenToggle:g,children:n(T.div,{"data-state":s?"open":"closed","data-disabled":o?"":void 0,...p,...u("collapsible","root",p.className),ref:f})})});v.displayName="Collapsible";import*as d from"react";import{skdxPart as k}from"../utils/part.js";import{composeEventHandlers as N,Primitive as I}from"../utils/primitive.js";import{jsx as E}from"react/jsx-runtime";var m=d.forwardRef((l,t)=>{let e=r("CollapsibleTrigger");return E(I.button,{type:"button","aria-controls":e.contentId,"aria-expanded":e.open,"data-state":e.open?"open":"closed","data-disabled":e.disabled?"":void 0,disabled:e.disabled,...l,...k("collapsible","trigger",l.className),ref:t,onClick:N(l.onClick,e.onOpenToggle)})});m.displayName="CollapsibleTrigger";import*as C from"react";import{skdxPart as H}from"../utils/part.js";import{Primitive as O}from"../utils/primitive.js";import{jsx as w}from"react/jsx-runtime";var b=C.forwardRef(({forceMount:l,...t},e)=>{let o=r("CollapsibleContent");return l||o.open?w(O.div,{id:o.contentId,"data-state":o.open?"open":"closed","data-disabled":o.disabled?"":void 0,hidden:!o.open,...t,...H("collapsible","content",t.className),ref:e}):null});b.displayName="CollapsibleContent";export{v as Collapsible,b as CollapsibleContent,R as CollapsibleProvider,m as CollapsibleTrigger,r as useCollapsibleContext};

package/dist/collapsible/CollapsibleContent.d.cts

@@ -0,0 +1,17 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/collapsible/CollapsibleContent.d.ts

@@ -0,0 +1,17 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/collapsible/CollapsibleTrigger.d.cts

@@ -0,0 +1,16 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/collapsible/CollapsibleTrigger.d.ts

@@ -0,0 +1,16 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/collapsible/index.d.cts

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

package/dist/collapsible/index.d.ts

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

package/dist/collapsible/types.d.cts

@@ -0,0 +1,44 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared state distributed from {@link Collapsible} to its parts via context. Not part of the public API. */
+export interface CollapsibleContextValue {
+    contentId: string;
+    open: boolean;
+    disabled: boolean;
+    onOpenToggle: () => void;
+}
+/** Props for the {@link Collapsible} root. */
+export interface CollapsibleProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Open state, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Prevents the trigger from toggling the content when set.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for {@link CollapsibleTrigger}, the button that toggles the content open/closed. */
+export interface CollapsibleTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** 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.
+     * @default false
+     */
+    forceMount?: boolean;
+}

package/dist/collapsible/types.d.ts

@@ -0,0 +1,44 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared state distributed from {@link Collapsible} to its parts via context. Not part of the public API. */
+export interface CollapsibleContextValue {
+    contentId: string;
+    open: boolean;
+    disabled: boolean;
+    onOpenToggle: () => void;
+}
+/** Props for the {@link Collapsible} root. */
+export interface CollapsibleProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Open state, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Initial open state, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever it changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Prevents the trigger from toggling the content when set.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for {@link CollapsibleTrigger}, the button that toggles the content open/closed. */
+export interface CollapsibleTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** 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.
+     * @default false
+     */
+    forceMount?: boolean;
+}

package/dist/color-picker/ColorPicker.cjs

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