@skdx/react 0.26.0 → 0.28.0

package/dist/clipboard/ClipboardIndicator.d.cts

@@ -1,22 +1,17 @@
 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.
+ * Renders children while {@link Clipboard} root is in the state named by `match` (`"copied"` by default).
+ * Wrapped in {@link Presence} for CSS exit animations. `aria-hidden="true"` by default because the root's
+ * live-region message announces the copy; avoid screen-reader duplication. Name the enclosing
+ * {@link ClipboardTrigger} with a stable label instead.
  *
  * @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>>;

package/dist/clipboard/ClipboardIndicator.d.ts

@@ -1,22 +1,17 @@
 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.
+ * Renders children while {@link Clipboard} root is in the state named by `match` (`"copied"` by default).
+ * Wrapped in {@link Presence} for CSS exit animations. `aria-hidden="true"` by default because the root's
+ * live-region message announces the copy; avoid screen-reader duplication. Name the enclosing
+ * {@link ClipboardTrigger} with a stable label instead.
  *
  * @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>>;

package/dist/clipboard/ClipboardInput.d.cts

@@ -1,17 +1,8 @@
 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.
+ * Read-only field showing clipboard value with `data-state="copied" | "idle"`.
+ * Selects all on focus. Root owns the text; no `value` prop. Requires `aria-label`.
  *
  * @example
  * ```tsx

package/dist/clipboard/ClipboardInput.d.ts

@@ -1,17 +1,8 @@
 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.
+ * Read-only field showing clipboard value with `data-state="copied" | "idle"`.
+ * Selects all on focus. Root owns the text; no `value` prop. Requires `aria-label`.
  *
  * @example
  * ```tsx

package/dist/clipboard/ClipboardTrigger.d.cts

@@ -1,16 +1,7 @@
 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.
+ * Copy button for {@link Clipboard} root's `value` — `<button>` with `data-state="copied"|"idle"`. No built-in label; keep stable across copy.
  *
  * @example
  * ```tsx

package/dist/clipboard/ClipboardTrigger.d.ts

@@ -1,16 +1,7 @@
 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.
+ * Copy button for {@link Clipboard} root's `value` — `<button>` with `data-state="copied"|"idle"`. No built-in label; keep stable across copy.
  *
  * @example
  * ```tsx

package/dist/clipboard/index.d.cts

@@ -1,5 +1,2 @@
-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';
+export { Clipboard } from './Clipboard.cjs';
+export type { ClipboardHandle, ClipboardProps, ClipboardState } from './types.cjs';

package/dist/clipboard/index.d.ts

@@ -1,5 +1,2 @@
-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';
+export { Clipboard } from './Clipboard.js';
+export type { ClipboardHandle, ClipboardProps, ClipboardState } from './types.js';

package/dist/clipboard/primitives.d.cts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `Clipboard` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Clipboard, ClipboardIndicator, ClipboardInput, ClipboardTrigger } from '@skdx/react/primitives/clipboard';
+ *
+ * <Clipboard value="npm i @skdx/react">
+ *   <ClipboardInput aria-label="Install command" />
+ *   <ClipboardTrigger aria-label="Copy install command">
+ *     <ClipboardIndicator match="idle"><CopyIcon /></ClipboardIndicator>
+ *     <ClipboardIndicator><CheckIcon /></ClipboardIndicator>
+ *   </ClipboardTrigger>
+ * </Clipboard>
+ * ```
+ */
+export { Clipboard } from './Clipboard.cjs';
+export { ClipboardIndicator } from './ClipboardIndicator.cjs';
+export { ClipboardInput } from './ClipboardInput.cjs';
+export { ClipboardTrigger } from './ClipboardTrigger.cjs';
+export type { ClipboardHandle, ClipboardProps, ClipboardTriggerProps, ClipboardIndicatorProps, ClipboardInputProps, } from './types.cjs';

package/dist/clipboard/primitives.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Advanced primitives for `Clipboard` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Clipboard, ClipboardIndicator, ClipboardInput, ClipboardTrigger } from '@skdx/react/primitives/clipboard';
+ *
+ * <Clipboard value="npm i @skdx/react">
+ *   <ClipboardInput aria-label="Install command" />
+ *   <ClipboardTrigger aria-label="Copy install command">
+ *     <ClipboardIndicator match="idle"><CopyIcon /></ClipboardIndicator>
+ *     <ClipboardIndicator><CheckIcon /></ClipboardIndicator>
+ *   </ClipboardTrigger>
+ * </Clipboard>
+ * ```
+ */
+export { Clipboard } from './Clipboard.js';
+export { ClipboardIndicator } from './ClipboardIndicator.js';
+export { ClipboardInput } from './ClipboardInput.js';
+export { ClipboardTrigger } from './ClipboardTrigger.js';
+export type { ClipboardHandle, ClipboardProps, ClipboardTriggerProps, ClipboardIndicatorProps, ClipboardInputProps, } from './types.js';

package/dist/clipboard/types.d.cts

@@ -1,23 +1,35 @@
 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';
+/**
+ * The three states a {@link Clipboard} can be in, mirrored onto `data-state` on
+ * every part: copied, idle, or error after a failed copy.
+ */
+export type ClipboardState = 'copied' | 'idle' | 'error';
+/**
+ * The handle a {@link Clipboard}'s forwarded ref carries: the root `<div>` with
+ * `copy()` method assigned, preserving all standard HTMLDivElement methods.
+ */
+export interface ClipboardHandle extends HTMLDivElement {
+    /**
+     * Performs the copy a `ClipboardTrigger` would, from outside the component —
+     * a keyboard shortcut, a menu item elsewhere on the page, a retry after
+     * `onCopyError`. Same write, same state, same announcement, same callbacks.
+     * A no-op while the root is `disabled`.
+     */
+    copy(): void;
+}
 /** @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;
+    /** The root's current state, which every part mirrors onto its own `data-state`. */
+    state: ClipboardState;
     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.
+ * Props for the {@link Clipboard} root. Success callback is `onCopySuccess`
+ * (copy trigger fired), distinct from React's `onCopy` (user selection copied).
  */
-export interface ClipboardProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCopy'> {
+export interface ClipboardProps extends PrimitivePropsWithRef<'div'> {
     /** The text written to the system clipboard when a `ClipboardTrigger` is activated. */
     value: string;
     /**
@@ -28,11 +40,11 @@ export interface ClipboardProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCo
      */
     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.
+     * Fires with the copied text after the write succeeds — never on failure,
+     * safe for analytics or toasts.
      * @default undefined — no-op if omitted.
      */
-    onCopy?: (value: string) => void;
+    onCopySuccess?: (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
@@ -55,6 +67,40 @@ export interface ClipboardProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCo
      * @default 'Copied to clipboard'
      */
     copiedLabel?: string;
+    /**
+     * The live-region message announced when the copy *fails* — when both the
+     * async Clipboard API and the `execCommand` fallback are refused.
+     *
+     * Announced **assertively**, unlike `copiedLabel`, and the difference is
+     * deliberate: the user is on their way to paste, and a polite message queues
+     * behind whatever is being read and arrives after they have already pasted
+     * the *previous* clipboard contents. Politely-announced failure is
+     * unannounced failure.
+     *
+     * Pass `''` to announce nothing — the `data-state="error"` hook and
+     * `onCopyError` still fire.
+     * @default 'Copy failed'
+     */
+    errorLabel?: string;
+    /**
+     * The derived `ClipboardTrigger`'s accessible name. Ignored when `children`
+     * is given, where the trigger's `aria-label` is yours to set.
+     * @default 'Copy'
+     */
+    label?: string;
+    /**
+     * Renders a derived, read-only `ClipboardInput` showing `value` ahead of the
+     * trigger. Ignored when `children` is given.
+     * @default false
+     */
+    showInput?: boolean;
+    /**
+     * The derived `ClipboardInput`'s accessible name — a separate prop from
+     * `label` because that one names the trigger, a different control. Only
+     * rendered while `showInput` is set; ignored when `children` is given.
+     * @default 'Value to copy'
+     */
+    inputLabel?: string;
 }
 /** Props for the {@link ClipboardTrigger} button. */
 export interface ClipboardTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -69,7 +115,11 @@ export interface ClipboardTriggerProps extends PrimitivePropsWithRef<'button'> {
 export interface ClipboardIndicatorProps extends PrimitivePropsWithRef<'span'> {
     /**
      * Which state this indicator renders in — `'copied'` for the checkmark,
-     * `'idle'` for the copy icon it replaces.
+     * `'idle'` for the copy icon it replaces, `'error'` for a failure glyph.
+     *
+     * An `'error'` indicator is optional: the assertive announcement carries the
+     * meaning on its own, and a composition without one simply shows the idle
+     * icon again once the error window elapses.
      * @default 'copied' — the confirmation, which is the one that needs mounting logic.
      */
     match?: ClipboardState;

package/dist/clipboard/types.d.ts

@@ -1,23 +1,35 @@
 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';
+/**
+ * The three states a {@link Clipboard} can be in, mirrored onto `data-state` on
+ * every part: copied, idle, or error after a failed copy.
+ */
+export type ClipboardState = 'copied' | 'idle' | 'error';
+/**
+ * The handle a {@link Clipboard}'s forwarded ref carries: the root `<div>` with
+ * `copy()` method assigned, preserving all standard HTMLDivElement methods.
+ */
+export interface ClipboardHandle extends HTMLDivElement {
+    /**
+     * Performs the copy a `ClipboardTrigger` would, from outside the component —
+     * a keyboard shortcut, a menu item elsewhere on the page, a retry after
+     * `onCopyError`. Same write, same state, same announcement, same callbacks.
+     * A no-op while the root is `disabled`.
+     */
+    copy(): void;
+}
 /** @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;
+    /** The root's current state, which every part mirrors onto its own `data-state`. */
+    state: ClipboardState;
     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.
+ * Props for the {@link Clipboard} root. Success callback is `onCopySuccess`
+ * (copy trigger fired), distinct from React's `onCopy` (user selection copied).
  */
-export interface ClipboardProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCopy'> {
+export interface ClipboardProps extends PrimitivePropsWithRef<'div'> {
     /** The text written to the system clipboard when a `ClipboardTrigger` is activated. */
     value: string;
     /**
@@ -28,11 +40,11 @@ export interface ClipboardProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCo
      */
     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.
+     * Fires with the copied text after the write succeeds — never on failure,
+     * safe for analytics or toasts.
      * @default undefined — no-op if omitted.
      */
-    onCopy?: (value: string) => void;
+    onCopySuccess?: (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
@@ -55,6 +67,40 @@ export interface ClipboardProps extends Omit<PrimitivePropsWithRef<'div'>, 'onCo
      * @default 'Copied to clipboard'
      */
     copiedLabel?: string;
+    /**
+     * The live-region message announced when the copy *fails* — when both the
+     * async Clipboard API and the `execCommand` fallback are refused.
+     *
+     * Announced **assertively**, unlike `copiedLabel`, and the difference is
+     * deliberate: the user is on their way to paste, and a polite message queues
+     * behind whatever is being read and arrives after they have already pasted
+     * the *previous* clipboard contents. Politely-announced failure is
+     * unannounced failure.
+     *
+     * Pass `''` to announce nothing — the `data-state="error"` hook and
+     * `onCopyError` still fire.
+     * @default 'Copy failed'
+     */
+    errorLabel?: string;
+    /**
+     * The derived `ClipboardTrigger`'s accessible name. Ignored when `children`
+     * is given, where the trigger's `aria-label` is yours to set.
+     * @default 'Copy'
+     */
+    label?: string;
+    /**
+     * Renders a derived, read-only `ClipboardInput` showing `value` ahead of the
+     * trigger. Ignored when `children` is given.
+     * @default false
+     */
+    showInput?: boolean;
+    /**
+     * The derived `ClipboardInput`'s accessible name — a separate prop from
+     * `label` because that one names the trigger, a different control. Only
+     * rendered while `showInput` is set; ignored when `children` is given.
+     * @default 'Value to copy'
+     */
+    inputLabel?: string;
 }
 /** Props for the {@link ClipboardTrigger} button. */
 export interface ClipboardTriggerProps extends PrimitivePropsWithRef<'button'> {
@@ -69,7 +115,11 @@ export interface ClipboardTriggerProps extends PrimitivePropsWithRef<'button'> {
 export interface ClipboardIndicatorProps extends PrimitivePropsWithRef<'span'> {
     /**
      * Which state this indicator renders in — `'copied'` for the checkmark,
-     * `'idle'` for the copy icon it replaces.
+     * `'idle'` for the copy icon it replaces, `'error'` for a failure glyph.
+     *
+     * An `'error'` indicator is optional: the assertive announcement carries the
+     * meaning on its own, and a composition without one simply shows the idle
+     * icon again once the error window elapses.
      * @default 'copied' — the confirmation, which is the one that needs mounting logic.
      */
     match?: ClipboardState;

package/dist/collapsible/Collapsible.cjs

@@ -1 +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});
+"use strict";var Y=Object.create;var P=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var ee=(e,o)=>{for(var t in o)P(e,t,{get:o[t],enumerable:!0})},O=(e,o,t,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of _(o))!j.call(e,a)&&a!==t&&P(e,a,{get:()=>o[a],enumerable:!(c=Z(o,a))||c.enumerable});return e};var h=(e,o,t)=>(t=e!=null?Y(U(e)):{},O(o||!e||!e.__esModule?P(t,"default",{value:e,enumerable:!0}):t,e)),te=e=>O(P({},"__esModule",{value:!0}),e);var oe={};ee(oe,{Collapsible:()=>I,CollapsibleContent:()=>E,CollapsibleIndicator:()=>N,CollapsibleProvider:()=>X,CollapsibleRoot:()=>M,CollapsibleTrigger:()=>L,useCollapsibleContext:()=>C});module.exports=te(oe);var r=h(require("react"),1),G=require("../utils/createContext.cjs"),J=require("../utils/part.cjs"),K=require("../utils/primitive.cjs"),Q=require("../utils/useControllableState.cjs");var i=h(require("react"),1),A=require("../utils/composeRefs.cjs"),H=require("../utils/part.cjs"),w=require("../utils/primitive.cjs");var D=require("react/jsx-runtime"),E=i.forwardRef(({forceMount:e,hiddenUntilFound:o,...t},c)=>{let a=C("CollapsibleContent"),f=i.useRef(null),k=(0,A.useComposedRefs)(c,f),{open:l,onOpen:u,onOpenChangeComplete:y,setContentMounted:v}=a,b=!!(e||o||l);i.useEffect(()=>(v(b),()=>v(!1)),[v,b]),i.useLayoutEffect(()=>{let n=f.current;if(!o||!n)return;l?n.removeAttribute("hidden"):n.setAttribute("hidden","until-found");let d=()=>u();return n.addEventListener("beforematch",d),()=>n.removeEventListener("beforematch",d)},[o,l,u]),i.useLayoutEffect(()=>{let n=f.current;if(!n)return;let d=n.hasAttribute("hidden"),g=n.getAttribute("hidden");d&&n.removeAttribute("hidden");let{scrollHeight:p,scrollWidth:s}=n;d&&n.setAttribute("hidden",g??""),n.style.setProperty("--skdx-collapsible-content-height",`${p}px`),n.style.setProperty("--skdx-collapsible-content-width",`${s}px`)},[l,b]);let R=i.useRef(l);return i.useEffect(()=>{let n=f.current;if(R.current===l)return;R.current=l;let g=(n?getComputedStyle(n).transitionDuration:"").split(",").some(s=>Number.parseFloat(s)>0&&!Number.isNaN(Number.parseFloat(s)));if(!n||!g){y(l);return}let p=s=>{s.target===n&&y(l)};return n.addEventListener("transitionend",p),n.addEventListener("transitioncancel",p),()=>{n.removeEventListener("transitionend",p),n.removeEventListener("transitioncancel",p)}},[l,y]),b?(0,D.jsx)(w.Primitive.div,{id:a.contentId,"data-state":l?"open":"closed","data-disabled":a.disabled?"":void 0,hidden:!l,...t,...(0,H.skdxPart)("collapsible","content",t.className),ref:k}):null});E.displayName="CollapsibleContent";var S=h(require("react"),1),B=require("../utils/part.cjs"),V=require("../utils/primitive.cjs");var $=require("react/jsx-runtime"),N=S.forwardRef((e,o)=>{let t=C("CollapsibleIndicator");return(0,$.jsx)(V.Primitive.span,{"aria-hidden":"true","data-state":t.open?"open":"closed","data-disabled":t.disabled?"":void 0,...e,...(0,B.skdxPart)("collapsible","indicator",e.className),ref:o})});N.displayName="CollapsibleIndicator";var W=h(require("react"),1),q=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");var z=require("react/jsx-runtime"),L=W.forwardRef((e,o)=>{let t=C("CollapsibleTrigger");return(0,z.jsx)(T.Primitive.button,{type:"button","aria-controls":t.open||t.contentMounted?t.contentId:void 0,"aria-expanded":t.open,"data-state":t.open?"open":"closed","data-disabled":t.disabled?"":void 0,disabled:t.disabled,...e,...(0,q.skdxPart)("collapsible","trigger",e.className),ref:o,onClick:(0,T.composeEventHandlers)(e.onClick,t.onOpenToggle)})});L.displayName="CollapsibleTrigger";var m=require("react/jsx-runtime"),F=({title:e,children:o})=>(0,m.jsxs)(m.Fragment,{children:[e===void 0?null:(0,m.jsxs)(L,{children:[e,(0,m.jsx)(N,{})]}),(0,m.jsx)(E,{children:o})]});var x=require("react/jsx-runtime"),[X,C]=(0,G.createSafeContext)("Collapsible"),M=r.forwardRef(({open:e,defaultOpen:o=!1,onOpenChange:t,onOpenChangeComplete:c,disabled:a=!1,...f},k)=>{let[l=!1,u]=(0,Q.useControllableState)({prop:e,defaultProp:o,onChange:t}),y=r.useId(),v=r.useCallback(()=>u(s=>!s),[u]),b=r.useCallback(()=>u(!0),[u]),[R,n]=r.useState(!1),d=r.useRef(c);r.useEffect(()=>{d.current=c});let g=r.useRef(l),p=r.useCallback(s=>{g.current!==s&&(g.current=s,d.current?.(s))},[]);return r.useEffect(()=>{R||p(l)},[R,l,p]),(0,x.jsx)(X,{contentId:y,open:l,disabled:a,onOpenToggle:v,onOpen:b,onOpenChangeComplete:p,contentMounted:R,setContentMounted:n,children:(0,x.jsx)(K.Primitive.div,{"data-state":l?"open":"closed","data-disabled":a?"":void 0,...f,...(0,J.skdxPart)("collapsible","root",f.className),ref:k})})});M.displayName="CollapsibleRoot";var I=r.forwardRef(({title:e,children:o,...t},c)=>(0,x.jsx)(M,{...t,ref:c,children:(0,x.jsx)(F,{title:e,children:o})}));I.displayName="Collapsible";0&&(module.exports={Collapsible,CollapsibleContent,CollapsibleIndicator,CollapsibleProvider,CollapsibleRoot,CollapsibleTrigger,useCollapsibleContext});

package/dist/collapsible/Collapsible.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CollapsibleContextValue, CollapsibleProps } from './types.cjs';
+import type { CollapsibleContextValue, CollapsibleProps, CollapsibleRootProps } from './types.cjs';
 export declare const CollapsibleProvider: {
     (props: CollapsibleContextValue & {
         children: React.ReactNode;
@@ -7,17 +7,41 @@ export declare const CollapsibleProvider: {
     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`.
+ * Root of a show/hide interface: owns open state, hands it down via context.
+ * Renders plain `<div>` with `data-state` (`"open"` | `"closed"`) and `data-disabled`.
  *
  * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
  *
+ * Renders `children` verbatim. {@link Collapsible} (the recipe, below) is
+ * this root with `CollapsibleTrigger` derived from `title` and `CollapsibleContent` wrapped around children.
+ *
+ * @example
+ * ```tsx
+ * import { CollapsibleContent, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleRoot defaultOpen={false}>
+ *   <CollapsibleTrigger>
+ *     Toggle
+ *     <CollapsibleIndicator />
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent hiddenUntilFound>Revealed on toggle.</CollapsibleContent>
+ * </CollapsibleRoot>
+ * ```
+ */
+export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A show/hide panel with its own toggle. Always draws derived anatomy: `CollapsibleTrigger`
+ * holding `title` and chevron `CollapsibleIndicator`, then `CollapsibleContent` panel wrapped
+ * around `children` (the panel body). Never a switch; doesn't inspect what it was given.
+ * For `forceMount` or `hiddenUntilFound`, compose {@link CollapsibleRoot}.
+ *
+ * Everything the root owns applies: `open`/`defaultOpen`/`onOpenChange`,
+ * `onOpenChangeComplete`, `disabled`, `data-state`/`data-disabled` hooks.
+ *
  * @example
  * ```tsx
- * <Collapsible defaultOpen={false}>
- *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
- *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
+ * <Collapsible title="Delivery options">
+ *   <p>Ships in 2 days.</p>
  * </Collapsible>
  * ```
  */

package/dist/collapsible/Collapsible.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CollapsibleContextValue, CollapsibleProps } from './types.js';
+import type { CollapsibleContextValue, CollapsibleProps, CollapsibleRootProps } from './types.js';
 export declare const CollapsibleProvider: {
     (props: CollapsibleContextValue & {
         children: React.ReactNode;
@@ -7,17 +7,41 @@ export declare const CollapsibleProvider: {
     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`.
+ * Root of a show/hide interface: owns open state, hands it down via context.
+ * Renders plain `<div>` with `data-state` (`"open"` | `"closed"`) and `data-disabled`.
  *
  * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
  *
+ * Renders `children` verbatim. {@link Collapsible} (the recipe, below) is
+ * this root with `CollapsibleTrigger` derived from `title` and `CollapsibleContent` wrapped around children.
+ *
+ * @example
+ * ```tsx
+ * import { CollapsibleContent, CollapsibleIndicator, CollapsibleRoot, CollapsibleTrigger } from '@skdx/react/primitives/collapsible';
+ *
+ * <CollapsibleRoot defaultOpen={false}>
+ *   <CollapsibleTrigger>
+ *     Toggle
+ *     <CollapsibleIndicator />
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent hiddenUntilFound>Revealed on toggle.</CollapsibleContent>
+ * </CollapsibleRoot>
+ * ```
+ */
+export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A show/hide panel with its own toggle. Always draws derived anatomy: `CollapsibleTrigger`
+ * holding `title` and chevron `CollapsibleIndicator`, then `CollapsibleContent` panel wrapped
+ * around `children` (the panel body). Never a switch; doesn't inspect what it was given.
+ * For `forceMount` or `hiddenUntilFound`, compose {@link CollapsibleRoot}.
+ *
+ * Everything the root owns applies: `open`/`defaultOpen`/`onOpenChange`,
+ * `onOpenChangeComplete`, `disabled`, `data-state`/`data-disabled` hooks.
+ *
  * @example
  * ```tsx
- * <Collapsible defaultOpen={false}>
- *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
- *   <CollapsibleContent>Hidden content revealed on toggle.</CollapsibleContent>
+ * <Collapsible title="Delivery options">
+ *   <p>Ships in 2 days.</p>
  * </Collapsible>
  * ```
  */

package/dist/collapsible/Collapsible.js

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

package/dist/collapsible/CollapsibleAnatomy.d.cts

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

package/dist/collapsible/CollapsibleAnatomy.d.ts

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