@skdx/react 0.26.0 → 0.28.0

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

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { CheckboxGroupOption } from './types.js';
+/**
+ * The anatomy a {@link CheckboxGroup} draws from `options`: one `CheckboxGroupItem` per
+ * entry. No `CheckboxGroupSelectAll` — its label is copy only the consumer can write, so it
+ * stays a primitive.
+ *
+ * @internal
+ */
+export declare function CheckboxGroupAnatomy({ options, }: {
+    options?: CheckboxGroupOption[];
+}): React.ReactNode;

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

@@ -7,6 +7,13 @@ import type { CheckboxGroupItemProps } from './types.cjs';
  * driven by whether its `value` is in the group's value, and `name` taken
  * from the group so every checked item submits under the same key.
  *
+ * The group's wiring is applied **after** the caller's props, not before.
+ * Spreading last let a consumer pass `checked`, `name` or `aria-required` on an
+ * individual item and quietly break the group's own model — an item-level
+ * `required` in particular contradicts the group's stated rule that the hidden
+ * inputs are never marked required. The props the type still accepts are the
+ * two the contract declares (`value`, `disabled`) plus ordinary DOM attributes.
+ *
  * @example
  * ```tsx
  * <CheckboxGroupItem value="email">

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

@@ -7,6 +7,13 @@ import type { CheckboxGroupItemProps } from './types.js';
  * driven by whether its `value` is in the group's value, and `name` taken
  * from the group so every checked item submits under the same key.
  *
+ * The group's wiring is applied **after** the caller's props, not before.
+ * Spreading last let a consumer pass `checked`, `name` or `aria-required` on an
+ * individual item and quietly break the group's own model — an item-level
+ * `required` in particular contradicts the group's stated rule that the hidden
+ * inputs are never marked required. The props the type still accepts are the
+ * two the contract declares (`value`, `disabled`) plus ordinary DOM attributes.
+ *
  * @example
  * ```tsx
  * <CheckboxGroupItem value="email">

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

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { CheckboxGroupSelectAllProps } from './types.cjs';
 /**
- * The tri-state "select all" parent of a {@link CheckboxGroup}: checked when
- * every enabled item is checked, `aria-checked="mixed"` when only some are,
- * unchecked when none are. Clicking it checks every enabled item, or clears
- * them when they are already all checked.
- *
- * It lives *inside* the group — it needs the same item registry the items
- * feed, and inside the group is also where a screen reader announces it as
- * part of the set. It carries no `value` and no `name`, so it renders no
- * hidden input and is never submitted.
+ * Tri-state parent: checked (all enabled items checked), indeterminate (some),
+ * or unchecked. Lives inside group for registry access and screen reader
+ * announcement. Needs `aria-controls` naming governed items and accessible name.
  *
  * @example
  * ```tsx

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

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { CheckboxGroupSelectAllProps } from './types.js';
 /**
- * The tri-state "select all" parent of a {@link CheckboxGroup}: checked when
- * every enabled item is checked, `aria-checked="mixed"` when only some are,
- * unchecked when none are. Clicking it checks every enabled item, or clears
- * them when they are already all checked.
- *
- * It lives *inside* the group — it needs the same item registry the items
- * feed, and inside the group is also where a screen reader announces it as
- * part of the set. It carries no `value` and no `name`, so it renders no
- * hidden input and is never submitted.
+ * Tri-state parent: checked (all enabled items checked), indeterminate (some),
+ * or unchecked. Lives inside group for registry access and screen reader
+ * announcement. Needs `aria-controls` naming governed items and accessible name.
  *
  * @example
  * ```tsx

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

@@ -1,4 +1,2 @@
-export * from './CheckboxGroup.cjs';
-export { CheckboxGroupItem } from './CheckboxGroupItem.cjs';
-export { CheckboxGroupSelectAll } from './CheckboxGroupSelectAll.cjs';
-export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupSelectAllProps } from './types.cjs';
+export { CheckboxGroup } from './CheckboxGroup.cjs';
+export type { CheckboxGroupProps, CheckboxGroupOption } from './types.cjs';

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

@@ -1,4 +1,2 @@
-export * from './CheckboxGroup.js';
-export { CheckboxGroupItem } from './CheckboxGroupItem.js';
-export { CheckboxGroupSelectAll } from './CheckboxGroupSelectAll.js';
-export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupSelectAllProps } from './types.js';
+export { CheckboxGroup } from './CheckboxGroup.js';
+export type { CheckboxGroupProps, CheckboxGroupOption } from './types.js';

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

@@ -0,0 +1,18 @@
+/**
+ * Advanced primitives for `CheckboxGroup` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { CheckboxGroup, CheckboxGroupItem, CheckboxGroupSelectAll } from '@skdx/react/primitives/checkbox-group';
+ *
+ * <CheckboxGroup name="notify" defaultValue={['email']}>
+ *   <CheckboxGroupSelectAll>All</CheckboxGroupSelectAll>
+ *   <CheckboxGroupItem value="email">Email</CheckboxGroupItem>
+ *   <CheckboxGroupItem value="sms">SMS</CheckboxGroupItem>
+ * </CheckboxGroup>
+ * ```
+ */
+export { CheckboxGroup } from './CheckboxGroup.cjs';
+export { CheckboxGroupItem } from './CheckboxGroupItem.cjs';
+export { CheckboxGroupSelectAll } from './CheckboxGroupSelectAll.cjs';
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupSelectAllProps, } from './types.cjs';

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

@@ -0,0 +1,18 @@
+/**
+ * Advanced primitives for `CheckboxGroup` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { CheckboxGroup, CheckboxGroupItem, CheckboxGroupSelectAll } from '@skdx/react/primitives/checkbox-group';
+ *
+ * <CheckboxGroup name="notify" defaultValue={['email']}>
+ *   <CheckboxGroupSelectAll>All</CheckboxGroupSelectAll>
+ *   <CheckboxGroupItem value="email">Email</CheckboxGroupItem>
+ *   <CheckboxGroupItem value="sms">SMS</CheckboxGroupItem>
+ * </CheckboxGroup>
+ * ```
+ */
+export { CheckboxGroup } from './CheckboxGroup.js';
+export { CheckboxGroupItem } from './CheckboxGroupItem.js';
+export { CheckboxGroupSelectAll } from './CheckboxGroupSelectAll.js';
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupSelectAllProps, } from './types.js';

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. */
 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. */
 export interface CheckboxGroupContextValue {
     name?: string;
+    /** The group's `form` id, forwarded to every item's hidden input. */
+    form?: string;
     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;
+    /** 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,10 +34,28 @@ 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;
 }
 /** Props for the {@link CheckboxGroup} root. */
 export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
+    /**
+     * The checkboxes the group renders, one derived `CheckboxGroupItem` each. Ignored when
+     * `children` is given, which switches to full manual composition.
+     * @default undefined — nothing is derived; compose the items as `children`.
+     */
+    options?: CheckboxGroupOption[];
     /**
      * Checked item values, for controlled usage. Pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
@@ -54,11 +87,36 @@ export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, '
      * @default false
      */
     required?: boolean;
+    /**
+     * Id of the `<form>` that owns this group, for a group rendered outside it —
+     * inside a `Dialog`'s portal, for instance. Forwarded to every item's hidden
+     * input.
+     * @default undefined — the group belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
     /**
      * Disables every item in the group, and the select-all parent.
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Freezes the selection without freezing the group: every item and the
+     * select-all keep their tab stops and gain `aria-readonly` (the
+     * `role="group"` root may not carry it, the same split `required` makes), the
+     * root gains `data-readonly`, and Space and click change nothing. Nothing
+     * gains `aria-disabled`, and the hidden inputs keep submitting.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Caps how many items may be checked at once. At the cap, every *unchecked*
+     * item gains `aria-disabled="true"` and `data-max-reached` but keeps its tab
+     * stop and its native enabled state, so a user can still focus it and hear
+     * why it will not toggle; checked items are untouched, so the way back under
+     * the cap is always reachable.
+     * @default undefined — no cap.
+     */
+    max?: number;
     /**
      * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
      * the `role="group"` root.
@@ -66,8 +124,12 @@ export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, '
      */
     invalid?: boolean;
 }
-/** 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}. Group-level state like
+ * `required`, `readOnly`, `invalid`, and `form` are omitted; only `value`,
+ * `disabled`, and standard DOM attributes apply.
+ */
+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;
     /**
@@ -78,8 +140,11 @@ export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' |
      */
     disabled?: boolean;
 }
-/** 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. Takes only
+ * `disabled` and standard DOM attributes; 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

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. */
 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. */
 export interface CheckboxGroupContextValue {
     name?: string;
+    /** The group's `form` id, forwarded to every item's hidden input. */
+    form?: string;
     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;
+    /** 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,10 +34,28 @@ 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;
 }
 /** Props for the {@link CheckboxGroup} root. */
 export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
+    /**
+     * The checkboxes the group renders, one derived `CheckboxGroupItem` each. Ignored when
+     * `children` is given, which switches to full manual composition.
+     * @default undefined — nothing is derived; compose the items as `children`.
+     */
+    options?: CheckboxGroupOption[];
     /**
      * Checked item values, for controlled usage. Pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
@@ -54,11 +87,36 @@ export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, '
      * @default false
      */
     required?: boolean;
+    /**
+     * Id of the `<form>` that owns this group, for a group rendered outside it —
+     * inside a `Dialog`'s portal, for instance. Forwarded to every item's hidden
+     * input.
+     * @default undefined — the group belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
     /**
      * Disables every item in the group, and the select-all parent.
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Freezes the selection without freezing the group: every item and the
+     * select-all keep their tab stops and gain `aria-readonly` (the
+     * `role="group"` root may not carry it, the same split `required` makes), the
+     * root gains `data-readonly`, and Space and click change nothing. Nothing
+     * gains `aria-disabled`, and the hidden inputs keep submitting.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Caps how many items may be checked at once. At the cap, every *unchecked*
+     * item gains `aria-disabled="true"` and `data-max-reached` but keeps its tab
+     * stop and its native enabled state, so a user can still focus it and hear
+     * why it will not toggle; checked items are untouched, so the way back under
+     * the cap is always reachable.
+     * @default undefined — no cap.
+     */
+    max?: number;
     /**
      * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
      * the `role="group"` root.
@@ -66,8 +124,12 @@ export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, '
      */
     invalid?: boolean;
 }
-/** 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}. Group-level state like
+ * `required`, `readOnly`, `invalid`, and `form` are omitted; only `value`,
+ * `disabled`, and standard DOM attributes apply.
+ */
+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;
     /**
@@ -78,8 +140,11 @@ export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' |
      */
     disabled?: boolean;
 }
-/** 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. Takes only
+ * `disabled` and standard DOM attributes; 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

package/dist/clipboard/Clipboard.cjs

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

package/dist/clipboard/Clipboard.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ClipboardContextValue, ClipboardProps } from './types.cjs';
+import type { ClipboardContextValue, ClipboardHandle, ClipboardProps } from './types.cjs';
 export declare const ClipboardProvider: {
     (props: ClipboardContextValue & {
         children: React.ReactNode;
@@ -8,31 +8,49 @@ export declare const ClipboardProvider: {
 }, 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`.
+ * copy state, and hands both down to `ClipboardTrigger`, `ClipboardIndicator`
+ * and `ClipboardInput` via context. Renders a `<div>` with
+ * `data-state="copied" | "idle" | "error"` and `data-disabled`.
  *
- * A successful copy flips `data-state` to `"copied"`, calls `onCopy`, and
+ * A successful copy flips `data-state` to `"copied"`, calls `onCopySuccess`, 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.
  *
+ * A **failed** copy is the mirror image: it flips
+ * to `data-state="error"` for the same window, announces `errorLabel`
+ * *assertively*, and calls `onCopyError`. The politeness
+ * differs on purpose — the user is on their way to paste, and a polite failure
+ * arrives after they have pasted the previous clipboard contents.
+ *
  * 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.
+ * it rejects), so a page on plain HTTP still copies. Errors are never thrown
+ * into render and never swallowed.
+ *
+ * The copy state belongs to the **root**, so two Triggers under one root both
+ * confirm when either is pressed — they copy the same value,
+ * and one confirming while its twin stays idle would claim the other button had
+ * not run. For a per-button confirmation, use two roots.
+ *
+ * `copy()` is published on the forwarded ref, so the write can be performed
+ * without a Trigger to press.
+ *
+ * The Trigger carries the accessible name and the Indicators are `aria-hidden`
+ * glyphs. Swapping the button's *text* instead — "Copy" to "Copied!" — renames
+ * the control mid-copy, which moves the target the user was about to click
+ * again and re-announces the whole button on focus; see {@link ClipboardTrigger}.
+ *
+ * Given no `children` it draws the derived anatomy from `label`/`showInput`.
+ * Given children, they are rendered verbatim for full manual composition —
+ * only presence is inspected, never what the children are; reach for
+ * `@skdx/react/primitives/clipboard` for the 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: React.ForwardRefExoticComponent<Omit<ClipboardProps, "ref"> & React.RefAttributes<ClipboardHandle>>;

package/dist/clipboard/Clipboard.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ClipboardContextValue, ClipboardProps } from './types.js';
+import type { ClipboardContextValue, ClipboardHandle, ClipboardProps } from './types.js';
 export declare const ClipboardProvider: {
     (props: ClipboardContextValue & {
         children: React.ReactNode;
@@ -8,31 +8,49 @@ export declare const ClipboardProvider: {
 }, 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`.
+ * copy state, and hands both down to `ClipboardTrigger`, `ClipboardIndicator`
+ * and `ClipboardInput` via context. Renders a `<div>` with
+ * `data-state="copied" | "idle" | "error"` and `data-disabled`.
  *
- * A successful copy flips `data-state` to `"copied"`, calls `onCopy`, and
+ * A successful copy flips `data-state` to `"copied"`, calls `onCopySuccess`, 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.
  *
+ * A **failed** copy is the mirror image: it flips
+ * to `data-state="error"` for the same window, announces `errorLabel`
+ * *assertively*, and calls `onCopyError`. The politeness
+ * differs on purpose — the user is on their way to paste, and a polite failure
+ * arrives after they have pasted the previous clipboard contents.
+ *
  * 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.
+ * it rejects), so a page on plain HTTP still copies. Errors are never thrown
+ * into render and never swallowed.
+ *
+ * The copy state belongs to the **root**, so two Triggers under one root both
+ * confirm when either is pressed — they copy the same value,
+ * and one confirming while its twin stays idle would claim the other button had
+ * not run. For a per-button confirmation, use two roots.
+ *
+ * `copy()` is published on the forwarded ref, so the write can be performed
+ * without a Trigger to press.
+ *
+ * The Trigger carries the accessible name and the Indicators are `aria-hidden`
+ * glyphs. Swapping the button's *text* instead — "Copy" to "Copied!" — renames
+ * the control mid-copy, which moves the target the user was about to click
+ * again and re-announces the whole button on focus; see {@link ClipboardTrigger}.
+ *
+ * Given no `children` it draws the derived anatomy from `label`/`showInput`.
+ * Given children, they are rendered verbatim for full manual composition —
+ * only presence is inspected, never what the children are; reach for
+ * `@skdx/react/primitives/clipboard` for the 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: React.ForwardRefExoticComponent<Omit<ClipboardProps, "ref"> & React.RefAttributes<ClipboardHandle>>;

package/dist/clipboard/Clipboard.js

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

package/dist/clipboard/ClipboardAnatomy.d.cts

@@ -0,0 +1,12 @@
+/**
+ * The anatomy a {@link Clipboard} draws when given no children: an `ClipboardInput`
+ * named by `inputLabel` (when `showInput`), then a `ClipboardTrigger` named by `label`
+ * holding an idle and a copied `ClipboardIndicator`.
+ *
+ * @internal
+ */
+export declare const ClipboardAnatomy: ({ label, showInput, inputLabel, }: {
+    label: string;
+    showInput: boolean;
+    inputLabel: string;
+}) => import("react").JSX.Element;

package/dist/clipboard/ClipboardAnatomy.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The anatomy a {@link Clipboard} draws when given no children: an `ClipboardInput`
+ * named by `inputLabel` (when `showInput`), then a `ClipboardTrigger` named by `label`
+ * holding an idle and a copied `ClipboardIndicator`.
+ *
+ * @internal
+ */
+export declare const ClipboardAnatomy: ({ label, showInput, inputLabel, }: {
+    label: string;
+    showInput: boolean;
+    inputLabel: string;
+}) => import("react").JSX.Element;