@skdx/react 0.27.0 → 0.29.0

package/dist/checkbox-group/types.d.cts

@@ -1,17 +1,32 @@
+import type * as React from 'react';
 import type { CheckboxProps, CheckedState } from '../checkbox/types.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. Not part of the public API. */
+/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. */
 export interface CheckboxGroupItemEntry {
     value: string;
     disabled: boolean;
+    /** The item's DOM id — the consumer's own when they set one — for the select-all's `aria-controls`. */
+    id: string;
 }
-/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. */
 export interface CheckboxGroupContextValue {
-    name?: string;
+    name?: string | undefined;
+    /** The group's `form` id, forwarded to every item's hidden input. */
+    form?: string | undefined;
     value: string[];
     disabled: boolean;
+    /** Group-level `readOnly`, carried by each item as `aria-readonly`. */
+    readOnly: boolean;
     /** Group-level `required`, carried by each item as `aria-required`. */
     required: boolean;
+    /** Cap on how many items may be checked, or `undefined` for no cap. */
+    max?: number | undefined;
+    /** Whether the cap is reached, so unchecked items announce `aria-disabled` without leaving the tab order. */
+    maxReached: boolean;
+    /** The group's `useId`, from which an item with no id of its own derives one. */
+    baseId: string;
+    /** Space-separated ids of every item, for the select-all's `aria-controls`. */
+    itemIds: string;
     /** Tri-state of the select-all parent, derived from the enabled items. */
     selectAllChecked: CheckedState;
     /** Adds or removes one item's value. */
@@ -19,70 +34,104 @@ export interface CheckboxGroupContextValue {
     /** Checks every enabled item, or clears them all when they already are. */
     toggleAll: () => void;
     /** Registers an item for the whole duration of its mount; returns its unregister. */
-    registerItem: (value: string, disabled: boolean) => () => void;
+    registerItem: (value: string, disabled: boolean, id: string) => () => void;
+}
+/** One entry of {@link CheckboxGroupProps.options} — a single checkbox. */
+export interface CheckboxGroupOption {
+    /** Unique identifier added to or removed from the group's `value`. */
+    value: string;
+    /** Text rendered inside the derived `CheckboxGroupItem`. */
+    label: React.ReactNode;
+    /**
+     * Disables this item alone, and excludes it from select-all.
+     * @default false
+     */
+    disabled?: boolean | undefined;
 }
 /** Props for the {@link CheckboxGroup} root. */
 export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
     /**
-     * Checked item values, for controlled usage. Pair with `onValueChange`.
+     * The checkboxes the group renders, one derived `CheckboxGroupItem` per entry, ignored when `children` is given.
+     * @default undefined — nothing is derived; compose the items as `children`.
+     */
+    options?: CheckboxGroupOption[] | undefined;
+    /**
+     * Checked item values for controlled usage, paired with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string[];
+    value?: string[] | undefined;
     /**
      * Initially checked item values, for uncontrolled usage.
      * @default [] — nothing checked.
      */
-    defaultValue?: string[];
+    defaultValue?: string[] | undefined;
     /**
      * Fires with the new value array whenever the selection changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string[]) => void;
+    onValueChange?: ((value: string[]) => void) | undefined;
     /**
      * Name for native form participation: each item renders a hidden input
      * under this name, so `formData.getAll(name)` returns every checked value.
      * @default undefined — no hidden inputs rendered.
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Marks the group as required — at least one item must be checked. Exposed
-     * as `aria-required` on every {@link CheckboxGroupItem}, *not* on the
-     * `role="group"` root: `aria-required` is not a global ARIA attribute and
-     * `role="group"` does not support it. The items' hidden inputs stay
-     * un-required — marking them would demand every box — so the "at least
-     * one" rule itself is a `Fieldset` validator's job.
+     * Marks the group as required — at least one item must be checked — exposed as `aria-required` on every {@link CheckboxGroupItem} rather than the `role="group"` root.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
+    /**
+     * Id of the `<form>` that owns this group, forwarded to every item's hidden input, for a group rendered outside that form.
+     * @default undefined — the group belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string | undefined;
     /**
      * Disables every item in the group, and the select-all parent.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+    /**
+     * Freezes the selection without freezing the group: every item keeps its tab stop and gains `aria-readonly`, and nothing responds to Space or click.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Caps how many items may be checked at once; unchecked items past the cap gain `aria-disabled` and `data-max-reached` but keep their tab stop.
+     * @default undefined — no cap.
+     */
+    max?: number | undefined;
     /**
      * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
      * the `role="group"` root.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
+    /**
+     * Size rung the skin scales the boxes by, fed to every derived item.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
-/** Props for a single {@link CheckboxGroupItem}. The group owns `checked` and `name`, so neither is accepted. */
-export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'onCheckedChange'> {
+/**
+ * Props for a single {@link CheckboxGroupItem}, omitting group-level state like `required`, `readOnly`, `invalid`, and `form`.
+ */
+export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'onCheckedChange' | 'required' | 'readOnly' | 'invalid' | 'form'> {
     /** Unique identifier added to or removed from the group's `value`. */
     value: string;
     /**
-     * Disables this item alone, and excludes it from select-all: it is neither
-     * counted when deriving the parent's state nor changed when the parent is
-     * toggled.
+     * Disables this item alone, excluding it from select-all's counting and toggling.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
-/** Props for the {@link CheckboxGroupSelectAll} tri-state parent. Its state is entirely derived, so it takes no value. */
-export interface CheckboxGroupSelectAllProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'value' | 'onCheckedChange'> {
+/**
+ * Props for the {@link CheckboxGroupSelectAll} tri-state parent, taking only `disabled` since its state is entirely derived from the group.
+ */
+export interface CheckboxGroupSelectAllProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'value' | 'onCheckedChange' | 'required' | 'readOnly' | 'invalid' | 'form'> {
     /**
      * Disables the parent alone; the group-level `disabled` also disables it.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/checkbox-group/types.d.ts

@@ -1,17 +1,32 @@
+import type * as React from 'react';
 import type { CheckboxProps, CheckedState } from '../checkbox/types.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. Not part of the public API. */
+/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. */
 export interface CheckboxGroupItemEntry {
     value: string;
     disabled: boolean;
+    /** The item's DOM id — the consumer's own when they set one — for the select-all's `aria-controls`. */
+    id: string;
 }
-/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. */
 export interface CheckboxGroupContextValue {
-    name?: string;
+    name?: string | undefined;
+    /** The group's `form` id, forwarded to every item's hidden input. */
+    form?: string | undefined;
     value: string[];
     disabled: boolean;
+    /** Group-level `readOnly`, carried by each item as `aria-readonly`. */
+    readOnly: boolean;
     /** Group-level `required`, carried by each item as `aria-required`. */
     required: boolean;
+    /** Cap on how many items may be checked, or `undefined` for no cap. */
+    max?: number | undefined;
+    /** Whether the cap is reached, so unchecked items announce `aria-disabled` without leaving the tab order. */
+    maxReached: boolean;
+    /** The group's `useId`, from which an item with no id of its own derives one. */
+    baseId: string;
+    /** Space-separated ids of every item, for the select-all's `aria-controls`. */
+    itemIds: string;
     /** Tri-state of the select-all parent, derived from the enabled items. */
     selectAllChecked: CheckedState;
     /** Adds or removes one item's value. */
@@ -19,70 +34,104 @@ export interface CheckboxGroupContextValue {
     /** Checks every enabled item, or clears them all when they already are. */
     toggleAll: () => void;
     /** Registers an item for the whole duration of its mount; returns its unregister. */
-    registerItem: (value: string, disabled: boolean) => () => void;
+    registerItem: (value: string, disabled: boolean, id: string) => () => void;
+}
+/** One entry of {@link CheckboxGroupProps.options} — a single checkbox. */
+export interface CheckboxGroupOption {
+    /** Unique identifier added to or removed from the group's `value`. */
+    value: string;
+    /** Text rendered inside the derived `CheckboxGroupItem`. */
+    label: React.ReactNode;
+    /**
+     * Disables this item alone, and excludes it from select-all.
+     * @default false
+     */
+    disabled?: boolean | undefined;
 }
 /** Props for the {@link CheckboxGroup} root. */
 export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
     /**
-     * Checked item values, for controlled usage. Pair with `onValueChange`.
+     * The checkboxes the group renders, one derived `CheckboxGroupItem` per entry, ignored when `children` is given.
+     * @default undefined — nothing is derived; compose the items as `children`.
+     */
+    options?: CheckboxGroupOption[] | undefined;
+    /**
+     * Checked item values for controlled usage, paired with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string[];
+    value?: string[] | undefined;
     /**
      * Initially checked item values, for uncontrolled usage.
      * @default [] — nothing checked.
      */
-    defaultValue?: string[];
+    defaultValue?: string[] | undefined;
     /**
      * Fires with the new value array whenever the selection changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string[]) => void;
+    onValueChange?: ((value: string[]) => void) | undefined;
     /**
      * Name for native form participation: each item renders a hidden input
      * under this name, so `formData.getAll(name)` returns every checked value.
      * @default undefined — no hidden inputs rendered.
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Marks the group as required — at least one item must be checked. Exposed
-     * as `aria-required` on every {@link CheckboxGroupItem}, *not* on the
-     * `role="group"` root: `aria-required` is not a global ARIA attribute and
-     * `role="group"` does not support it. The items' hidden inputs stay
-     * un-required — marking them would demand every box — so the "at least
-     * one" rule itself is a `Fieldset` validator's job.
+     * Marks the group as required — at least one item must be checked — exposed as `aria-required` on every {@link CheckboxGroupItem} rather than the `role="group"` root.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
+    /**
+     * Id of the `<form>` that owns this group, forwarded to every item's hidden input, for a group rendered outside that form.
+     * @default undefined — the group belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string | undefined;
     /**
      * Disables every item in the group, and the select-all parent.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+    /**
+     * Freezes the selection without freezing the group: every item keeps its tab stop and gains `aria-readonly`, and nothing responds to Space or click.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Caps how many items may be checked at once; unchecked items past the cap gain `aria-disabled` and `data-max-reached` but keep their tab stop.
+     * @default undefined — no cap.
+     */
+    max?: number | undefined;
     /**
      * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
      * the `role="group"` root.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
+    /**
+     * Size rung the skin scales the boxes by, fed to every derived item.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
-/** Props for a single {@link CheckboxGroupItem}. The group owns `checked` and `name`, so neither is accepted. */
-export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'onCheckedChange'> {
+/**
+ * Props for a single {@link CheckboxGroupItem}, omitting group-level state like `required`, `readOnly`, `invalid`, and `form`.
+ */
+export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'onCheckedChange' | 'required' | 'readOnly' | 'invalid' | 'form'> {
     /** Unique identifier added to or removed from the group's `value`. */
     value: string;
     /**
-     * Disables this item alone, and excludes it from select-all: it is neither
-     * counted when deriving the parent's state nor changed when the parent is
-     * toggled.
+     * Disables this item alone, excluding it from select-all's counting and toggling.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
-/** Props for the {@link CheckboxGroupSelectAll} tri-state parent. Its state is entirely derived, so it takes no value. */
-export interface CheckboxGroupSelectAllProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'value' | 'onCheckedChange'> {
+/**
+ * Props for the {@link CheckboxGroupSelectAll} tri-state parent, taking only `disabled` since its state is entirely derived from the group.
+ */
+export interface CheckboxGroupSelectAllProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'value' | 'onCheckedChange' | 'required' | 'readOnly' | 'invalid' | 'form'> {
     /**
      * Disables the parent alone; the group-level `disabled` also disables it.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/clipboard/Clipboard.cjs

@@ -1 +1,2 @@
-"use strict";var J=Object.create;var n=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},w=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Q(t))!X.call(e,r)&&r!==o&&n(e,r,{get:()=>t[r],enumerable:!(a=K(t,r))||a.enumerable});return e};var p=(e,t,o)=>(o=e!=null?J(U(e)):{},w(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),Z=e=>w(n({},"__esModule",{value:!0}),e);var j={};Y(j,{Clipboard:()=>H,ClipboardIndicator:()=>C,ClipboardInput:()=>y,ClipboardProvider:()=>N,ClipboardTrigger:()=>x,useClipboardContext:()=>d});module.exports=Z(j);var i=p(require("react"),1),R=require("../utils/createContext.cjs"),I=require("../utils/liveAnnouncer.cjs"),E=require("../utils/part.cjs"),k=require("../utils/primitive.cjs"),f=require("../utils/useCallbackRef.cjs"),b=require("react/jsx-runtime"),[N,d]=(0,R.createSafeContext)("Clipboard");function _(e){let t=document.activeElement,o=document.createElement("textarea");o.value=e,o.setAttribute("readonly",""),o.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(o);try{if(o.select(),typeof document.execCommand!="function"||!document.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{o.remove(),t?.focus()}}async function $(e){if(navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(e);return}catch{}_(e)}var H=i.forwardRef(({value:e,timeout:t=2e3,onCopy:o,onCopyError:a,disabled:r=!1,copiedLabel:c="Copied to clipboard",...h},G)=>{let[g,v]=i.useState(!1),m=i.useRef(void 0),P=(0,f.useCallbackRef)(o),T=(0,f.useCallbackRef)(a);i.useEffect(()=>()=>clearTimeout(m.current),[]);let W=i.useCallback(()=>{r||$(e).then(()=>{v(!0),c&&(0,I.announce)(c),P(e),clearTimeout(m.current),t!==null&&(m.current=setTimeout(()=>v(!1),t))},z=>T(z))},[r,e,t,c,P,T]);return(0,b.jsx)(N,{value:e,copied:g,disabled:r,copy:W,children:(0,b.jsx)(k.Primitive.div,{"data-state":g?"copied":"idle","data-disabled":r?"":void 0,...h,...(0,E.skdxPart)("clipboard","root",h.className),ref:G})})});H.displayName="Clipboard";var M=p(require("react"),1),S=require("../utils/part.cjs"),F=require("../utils/presence.cjs"),L=require("../utils/primitive.cjs");var u=require("react/jsx-runtime"),C=M.forwardRef(({match:e="copied",...t},o)=>{let r=d("ClipboardIndicator").copied?"copied":"idle";return(0,u.jsx)(F.Presence,{present:r===e,children:(0,u.jsx)(L.Primitive.span,{"data-state":r,...t,...(0,S.skdxPart)("clipboard","indicator",t.className),ref:o})})});C.displayName="ClipboardIndicator";var O=p(require("react"),1),A=require("../utils/part.cjs"),s=require("../utils/primitive.cjs");var V=require("react/jsx-runtime"),y=O.forwardRef((e,t)=>{let o=d("ClipboardInput");return(0,V.jsx)(s.Primitive.input,{type:"text","data-state":o.copied?"copied":"idle","data-disabled":o.disabled?"":void 0,"aria-disabled":o.disabled||void 0,...e,value:o.value,readOnly:!0,...(0,A.skdxPart)("clipboard","input",e.className),ref:t,onFocus:(0,s.composeEventHandlers)(e.onFocus,a=>a.currentTarget.select())})});y.displayName="ClipboardInput";var q=p(require("react"),1),B=require("../utils/part.cjs"),l=require("../utils/primitive.cjs");var D=require("react/jsx-runtime"),x=q.forwardRef(({disabled:e,...t},o)=>{let a=d("ClipboardTrigger"),r=a.disabled||e||!1;return(0,D.jsx)(l.Primitive.button,{type:"button","data-state":a.copied?"copied":"idle","data-disabled":r?"":void 0,disabled:r,...t,...(0,B.skdxPart)("clipboard","trigger",t.className),ref:o,onClick:(0,l.composeEventHandlers)(t.onClick,()=>a.copy())})});x.displayName="ClipboardTrigger";0&&(module.exports={Clipboard,ClipboardIndicator,ClipboardInput,ClipboardProvider,ClipboardTrigger,useClipboardContext});
+'use client';
+"use strict";var _=Object.create;var c=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var oe=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},S=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of j(o))!te.call(e,r)&&r!==t&&c(e,r,{get:()=>o[r],enumerable:!(a=$(o,r))||a.enumerable});return e};var re=(e,o,t)=>(t=e!=null?_(ee(e)):{},S(o||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),ae=e=>S(c({},"__esModule",{value:!0}),e);var de={};oe(de,{Clipboard:()=>I,ClipboardIndicator:()=>p,ClipboardInput:()=>m,ClipboardProvider:()=>z,ClipboardTrigger:()=>b,useClipboardContext:()=>d});module.exports=ae(de);var i=re(require("react"),1),X=require("../utils/appearance.cjs"),q=require("../utils/createContext.cjs"),P=require("../utils/liveAnnouncer.cjs"),B=require("../utils/part.cjs"),W=require("../utils/primitive.cjs"),T=require("../utils/useCallbackRef.cjs");var A=require("../utils/part.cjs"),D=require("../utils/presence.cjs"),O=require("../utils/primitive.cjs");var h=require("react/jsx-runtime"),p=({match:e="copied",ref:o,...t})=>{let r=d("ClipboardIndicator").state;return(0,h.jsx)(D.Presence,{present:r===e,children:(0,h.jsx)(O.Primitive.span,{"aria-hidden":!0,"data-state":r,...t,...(0,A.skdxPart)("clipboard","indicator",t.className),ref:o})})};p.displayName="ClipboardIndicator";var F=require("../utils/part.cjs"),s=require("../utils/primitive.cjs");var V=require("react/jsx-runtime"),m=({ref:e,...o})=>{let t=d("ClipboardInput");return(0,V.jsx)(s.Primitive.input,{type:"text","data-state":t.state,"data-disabled":t.disabled?"":void 0,"aria-disabled":t.disabled||void 0,...o,value:t.value,readOnly:!0,...(0,F.skdxPart)("clipboard","input",o.className),ref:e,onFocus:(0,s.composeEventHandlers)(o.onFocus,a=>a.currentTarget.select())})};m.displayName="ClipboardInput";var J=require("../utils/part.cjs"),f=require("../utils/primitive.cjs");var L=require("react/jsx-runtime"),b=({disabled:e,ref:o,...t})=>{let a=d("ClipboardTrigger"),r=a.disabled||e||!1;return(0,L.jsx)(f.Primitive.button,{type:"button","data-state":a.state,"data-disabled":r?"":void 0,disabled:r,...t,...(0,J.skdxPart)("clipboard","trigger",t.className),ref:o,onClick:(0,f.composeEventHandlers)(t.onClick,()=>a.copy())})};b.displayName="ClipboardTrigger";var n=require("react/jsx-runtime"),M=({label:e,showInput:o,inputLabel:t})=>(0,n.jsxs)(n.Fragment,{children:[o?(0,n.jsx)(m,{"aria-label":t}):null,(0,n.jsxs)(b,{"aria-label":e,children:[(0,n.jsx)(p,{match:"idle",children:"Copy"}),(0,n.jsx)(p,{match:"copied",children:"Copied"}),(0,n.jsx)(p,{match:"error",children:"Error"})]})]});var u=require("react/jsx-runtime"),[z,d]=(0,q.createSafeContext)("Clipboard");function ie(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);let a=document;try{if(t.select(),typeof a.execCommand!="function"||!a.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{t.remove(),o?.focus()}}async function ne(e){if(navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(e);return}catch{}ie(e)}var I=({value:e,timeout:o=2e3,onCopySuccess:t,onCopyError:a,disabled:r=!1,copiedLabel:C="Copied to clipboard",errorLabel:y="Copy failed",label:G="Copy",showInput:K=!1,inputLabel:Q="Value to copy",children:U,ref:Y,size:Z,...x})=>{let[w,E]=i.useState("idle"),g=i.useRef(void 0),v=i.useRef(null),N=(0,T.useCallbackRef)(t),k=(0,T.useCallbackRef)(a);i.useEffect(()=>()=>clearTimeout(g.current),[]);let H=i.useCallback(()=>{if(r)return;let l=R=>{E(R),clearTimeout(g.current),o!==null&&(g.current=setTimeout(()=>E("idle"),o))};ne(e).then(()=>{l("copied"),C&&(0,P.announce)(C),N(e)},R=>{l("error"),y&&(0,P.announce)(y,"assertive"),k(R)})},[r,e,o,C,y,N,k]);return i.useImperativeHandle(Y,()=>{let l={copy:H};return v.current?Object.assign(v.current,l):l}),(0,u.jsx)(z,{value:e,state:w,disabled:r,copy:H,children:(0,u.jsx)(W.Primitive.div,{"data-state":w,"data-disabled":r?"":void 0,...x,...(0,X.appearanceAttrs)({size:Z},x),...(0,B.skdxPart)("clipboard","root",x.className),ref:v,children:U??(0,u.jsx)(M,{label:G,showInput:K,inputLabel:Q})})})};I.displayName="Clipboard";0&&(module.exports={Clipboard,ClipboardIndicator,ClipboardInput,ClipboardProvider,ClipboardTrigger,useClipboardContext});

package/dist/clipboard/Clipboard.d.cts

@@ -1,38 +1,19 @@
 import * as React from 'react';
-import type { ClipboardContextValue, ClipboardProps } from './types.cjs';
-export declare const ClipboardProvider: {
-    (props: ClipboardContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useClipboardContext: (consumerName: string) => ClipboardContextValue;
+import type { ClipboardContextValue, ClipboardHandle, ClipboardProps } from './types.cjs';
+export declare const ClipboardProvider: React.FC<ClipboardContextValue & {
+    children: React.ReactNode;
+}>, useClipboardContext: (consumerName: string) => ClipboardContextValue;
 /**
- * Root of a copy-to-clipboard widget: owns the text to copy and the transient
- * `copied` state, and hands both down to `ClipboardTrigger`,
- * `ClipboardIndicator` and `ClipboardInput` via context. Renders a `<div>`
- * with `data-state="copied" | "idle"` and `data-disabled`.
- *
- * A successful copy flips `data-state` to `"copied"`, calls `onCopy`, and
- * announces politely through the shared live region — a checkmark that swaps
- * in silently is invisible to a screen-reader user, who otherwise has no way
- * to know the button did anything. The state falls back to `"idle"` after
- * `timeout` ms; a second copy restarts that timer rather than inheriting the
- * remainder of the first one, and unmounting cancels it.
- *
- * Copying goes through `navigator.clipboard.writeText` where available and
- * through a hidden-textarea + `execCommand` fallback where it is not (or where
- * it rejects), so a page on plain HTTP still copies. Failures surface through
- * `onCopyError` only: nothing is thrown into render, nothing is swallowed.
+ * Root of a copy-to-clipboard widget that owns the value and transient copy state, rendering a `<div>` with `data-state="copied"|"idle"|"error"` and `data-disabled` for its parts.
  *
  * @example
  * ```tsx
- * <Clipboard value="npm i @skdx/react">
- *   <ClipboardInput />
- *   <ClipboardTrigger>
- *     <ClipboardIndicator match="idle">Copy</ClipboardIndicator>
- *     <ClipboardIndicator>Copied!</ClipboardIndicator>
- *   </ClipboardTrigger>
- * </Clipboard>
+ * <Clipboard value="npm i @skdx/react" label="Copy install command" showInput />
  * ```
  */
-export declare const Clipboard: React.ForwardRefExoticComponent<Omit<ClipboardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Clipboard: {
+    ({ value, timeout, onCopySuccess, onCopyError, disabled, copiedLabel, errorLabel, label, showInput, inputLabel, children, ref: forwardedRef, size, ...props }: Omit<ClipboardProps, "ref"> & {
+        ref?: React.Ref<ClipboardHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/clipboard/Clipboard.d.ts

@@ -1,38 +1,19 @@
 import * as React from 'react';
-import type { ClipboardContextValue, ClipboardProps } from './types.js';
-export declare const ClipboardProvider: {
-    (props: ClipboardContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useClipboardContext: (consumerName: string) => ClipboardContextValue;
+import type { ClipboardContextValue, ClipboardHandle, ClipboardProps } from './types.js';
+export declare const ClipboardProvider: React.FC<ClipboardContextValue & {
+    children: React.ReactNode;
+}>, useClipboardContext: (consumerName: string) => ClipboardContextValue;
 /**
- * Root of a copy-to-clipboard widget: owns the text to copy and the transient
- * `copied` state, and hands both down to `ClipboardTrigger`,
- * `ClipboardIndicator` and `ClipboardInput` via context. Renders a `<div>`
- * with `data-state="copied" | "idle"` and `data-disabled`.
- *
- * A successful copy flips `data-state` to `"copied"`, calls `onCopy`, and
- * announces politely through the shared live region — a checkmark that swaps
- * in silently is invisible to a screen-reader user, who otherwise has no way
- * to know the button did anything. The state falls back to `"idle"` after
- * `timeout` ms; a second copy restarts that timer rather than inheriting the
- * remainder of the first one, and unmounting cancels it.
- *
- * Copying goes through `navigator.clipboard.writeText` where available and
- * through a hidden-textarea + `execCommand` fallback where it is not (or where
- * it rejects), so a page on plain HTTP still copies. Failures surface through
- * `onCopyError` only: nothing is thrown into render, nothing is swallowed.
+ * Root of a copy-to-clipboard widget that owns the value and transient copy state, rendering a `<div>` with `data-state="copied"|"idle"|"error"` and `data-disabled` for its parts.
  *
  * @example
  * ```tsx
- * <Clipboard value="npm i @skdx/react">
- *   <ClipboardInput />
- *   <ClipboardTrigger>
- *     <ClipboardIndicator match="idle">Copy</ClipboardIndicator>
- *     <ClipboardIndicator>Copied!</ClipboardIndicator>
- *   </ClipboardTrigger>
- * </Clipboard>
+ * <Clipboard value="npm i @skdx/react" label="Copy install command" showInput />
  * ```
  */
-export declare const Clipboard: React.ForwardRefExoticComponent<Omit<ClipboardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Clipboard: {
+    ({ value, timeout, onCopySuccess, onCopyError, disabled, copiedLabel, errorLabel, label, showInput, inputLabel, children, ref: forwardedRef, size, ...props }: Omit<ClipboardProps, "ref"> & {
+        ref?: React.Ref<ClipboardHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/clipboard/Clipboard.js

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

package/dist/clipboard/ClipboardAnatomy.d.cts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+/** @internal The anatomy a {@link Clipboard} draws when given no children: an input (when `showInput`) followed by a trigger with idle/copied indicators. */
+export declare const ClipboardAnatomy: ({ label, showInput, inputLabel, }: {
+    label: string;
+    showInput: boolean;
+    inputLabel: string;
+}) => JSX.Element;

package/dist/clipboard/ClipboardAnatomy.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+/** @internal The anatomy a {@link Clipboard} draws when given no children: an input (when `showInput`) followed by a trigger with idle/copied indicators. */
+export declare const ClipboardAnatomy: ({ label, showInput, inputLabel, }: {
+    label: string;
+    showInput: boolean;
+    inputLabel: string;
+}) => JSX.Element;

package/dist/clipboard/ClipboardIndicator.d.cts

@@ -1,22 +1,17 @@
-import * as React from 'react';
+import type * 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.
+ * Renders children while the {@link Clipboard} root's state matches `match` (`"copied"` by default), hidden from assistive tech since the root's live region already announces the copy.
  *
  * @example
  * ```tsx
- * <ClipboardIndicator match="idle">Copy</ClipboardIndicator>
- * <ClipboardIndicator>Copied!</ClipboardIndicator>
+ * <ClipboardTrigger aria-label="Copy install command">
+ *   <ClipboardIndicator match="idle"><CopyIcon /></ClipboardIndicator>
+ *   <ClipboardIndicator><CheckIcon /></ClipboardIndicator>
+ * </ClipboardTrigger>
  * ```
  */
-export declare const ClipboardIndicator: React.ForwardRefExoticComponent<Omit<ClipboardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ClipboardIndicator: {
+    ({ match, ref: forwardedRef, ...props }: ClipboardIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/clipboard/ClipboardIndicator.d.ts

@@ -1,22 +1,17 @@
-import * as React from 'react';
+import type * 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.
+ * Renders children while the {@link Clipboard} root's state matches `match` (`"copied"` by default), hidden from assistive tech since the root's live region already announces the copy.
  *
  * @example
  * ```tsx
- * <ClipboardIndicator match="idle">Copy</ClipboardIndicator>
- * <ClipboardIndicator>Copied!</ClipboardIndicator>
+ * <ClipboardTrigger aria-label="Copy install command">
+ *   <ClipboardIndicator match="idle"><CopyIcon /></ClipboardIndicator>
+ *   <ClipboardIndicator><CheckIcon /></ClipboardIndicator>
+ * </ClipboardTrigger>
  * ```
  */
-export declare const ClipboardIndicator: React.ForwardRefExoticComponent<Omit<ClipboardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ClipboardIndicator: {
+    ({ match, ref: forwardedRef, ...props }: ClipboardIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/clipboard/ClipboardInput.d.cts

@@ -1,17 +1,7 @@
-import * as React from 'react';
+import type * 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.
+ * Read-only field showing the clipboard value, with `data-state="copied"|"idle"` and select-all on focus; requires `aria-label`.
  *
  * @example
  * ```tsx
@@ -21,4 +11,7 @@ import type { ClipboardInputProps } from './types.cjs';
  * </Clipboard>
  * ```
  */
-export declare const ClipboardInput: React.ForwardRefExoticComponent<Omit<ClipboardInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const ClipboardInput: {
+    ({ ref: forwardedRef, ...props }: ClipboardInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/clipboard/ClipboardInput.d.ts

@@ -1,17 +1,7 @@
-import * as React from 'react';
+import type * 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.
+ * Read-only field showing the clipboard value, with `data-state="copied"|"idle"` and select-all on focus; requires `aria-label`.
  *
  * @example
  * ```tsx
@@ -21,4 +11,7 @@ import type { ClipboardInputProps } from './types.js';
  * </Clipboard>
  * ```
  */
-export declare const ClipboardInput: React.ForwardRefExoticComponent<Omit<ClipboardInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const ClipboardInput: {
+    ({ ref: forwardedRef, ...props }: ClipboardInputProps): React.ReactNode;
+    displayName: string;
+};