@skdx/react 0.26.0 → 0.28.0

package/dist/checkbox/Checkbox.js

@@ -1 +1 @@
-import*as r from"react";import{useComposedRefs as I}from"../utils/composeRefs.js";import{createSafeContext as S}from"../utils/createContext.js";import{useFormReset as v}from"../utils/formControl.js";import{HiddenInput as E}from"../utils/hiddenInput.js";import{skdxPart as H}from"../utils/part.js";import{composeEventHandlers as k,Primitive as w}from"../utils/primitive.js";import{useControllableState as L}from"../utils/useControllableState.js";import{jsx as l,jsxs as g}from"react/jsx-runtime";function M(e){let t=r.useRef(null);return r.useEffect(()=>{t.current&&(t.current.indeterminate=e==="indeterminate")},[e]),t}var[N,x]=S("Checkbox");function s(e){return e==="indeterminate"?"indeterminate":e?"checked":"unchecked"}var T=r.forwardRef(({checked:e,defaultChecked:t=!1,onCheckedChange:i,required:n,name:d,value:b="on",disabled:a=!1,invalid:m=!1,...c},R)=>{let[o=!1,f]=L({prop:e,defaultProp:t,onChange:i}),y=M(o),p=r.useRef(null),P=I(R,p);return v(p,()=>f(t)),g(N,{checked:o,disabled:a,children:[l(w.button,{type:"button",role:"checkbox","aria-checked":o==="indeterminate"?"mixed":o,"aria-required":n||void 0,"aria-invalid":m?!0:void 0,"data-state":s(o),"data-disabled":a?"":void 0,"data-invalid":m?"":void 0,disabled:a,...c,...H("checkbox","root",c.className),ref:P,onClick:k(c.onClick,()=>{f(o==="indeterminate"?!0:!o)}),onKeyDown:k(c.onKeyDown,u=>{u.key==="Enter"&&u.preventDefault()})}),d&&l(E,{ref:y,type:"checkbox",name:d,value:b,checked:o==="indeterminate"?!1:o,required:n,disabled:a})]})});T.displayName="Checkbox";import*as h from"react";import{skdxPart as D}from"../utils/part.js";import{Primitive as B}from"../utils/primitive.js";import{jsx as K}from"react/jsx-runtime";var C=h.forwardRef(({forceMount:e,...t},i)=>{let n=x("CheckboxIndicator");return e||n.checked!==!1?K(B.span,{"data-state":s(n.checked),"data-disabled":n.disabled?"":void 0,...t,...D("checkbox","indicator",t.className),ref:i}):null});C.displayName="CheckboxIndicator";export{T as Checkbox,C as CheckboxIndicator,N as CheckboxProvider,s as getState,x as useCheckboxContext};
+import*as r from"react";import{createSafeContext as N}from"../utils/createContext.js";import{useFormReset as T,useFormValidityHandle as B}from"../utils/formControl.js";import{HiddenInput as V}from"../utils/hiddenInput.js";import{skdxPart as q}from"../utils/part.js";import{composeEventHandlers as R,Primitive as A}from"../utils/primitive.js";import{useControllableState as F}from"../utils/useControllableState.js";import*as y from"react";import{skdxPart as E}from"../utils/part.js";import{Primitive as L}from"../utils/primitive.js";import{jsx as M}from"react/jsx-runtime";var m=y.forwardRef(({forceMount:e,...t},s)=>{let n=d("CheckboxIndicator");return e||n.checked!==!1?M(L.span,{"data-state":h(n.checked),"data-disabled":n.disabled?"":void 0,...t,...E("checkbox","indicator",t.className),ref:s}):null});m.displayName="CheckboxIndicator";import{jsx as a}from"react/jsx-runtime";function D(){let{checked:e}=d("CheckboxIndicator");return e==="indeterminate"?a("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:a("path",{d:"M4 8h8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})}):a("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:a("path",{d:"M3 8.5l3 3 7-7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function v({indicator:e}){return a(m,{children:e??a(D,{})})}import{jsx as k,jsxs as G}from"react/jsx-runtime";function K(e){let t=r.useRef(null);return r.useEffect(()=>{t.current&&(t.current.indeterminate=e==="indeterminate")},[e]),t}var[W,d]=N("Checkbox");function h(e){return e==="indeterminate"?"indeterminate":e?"checked":"unchecked"}var I=r.forwardRef(({checked:e,defaultChecked:t=!1,onCheckedChange:s,required:n,name:l,value:P="on",form:g,disabled:i=!1,readOnly:u=!1,invalid:p=!1,indicator:w,children:S,...c},H)=>{let[o=!1,x]=F({prop:e,defaultProp:t,onChange:s}),b=K(o),f=r.useRef(null);return B(H,f,b),T(f,()=>x(t)),G(W,{checked:o,disabled:i,children:[k(A.button,{type:"button",role:"checkbox","aria-checked":o==="indeterminate"?"mixed":o,"aria-required":n||void 0,"aria-readonly":u||void 0,"aria-invalid":p?!0:void 0,"data-state":h(o),"data-disabled":i?"":void 0,"data-readonly":u?"":void 0,"data-invalid":p?"":void 0,disabled:i,...c,...q("checkbox","root",c.className),ref:f,onClick:R(c.onClick,()=>{u||x(o==="indeterminate"?!0:!o)}),onKeyDown:R(c.onKeyDown,C=>{C.key==="Enter"&&C.preventDefault()}),children:S??k(v,{indicator:w})}),l&&k(V,{ref:b,type:"checkbox",name:l,value:P,form:g,checked:o==="indeterminate"?!1:o,required:n,disabled:i})]})});I.displayName="Checkbox";export{I as Checkbox,m as CheckboxIndicator,W as CheckboxProvider,h as getState,d as useCheckboxContext};

package/dist/checkbox/CheckboxAnatomy.d.cts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link Checkbox} draws when given no children: an Indicator
+ * holding `indicator`, or the default check/dash glyph when it is absent.
+ *
+ * @internal
+ */
+export declare function CheckboxAnatomy({ indicator }: {
+    indicator?: React.ReactNode;
+}): React.JSX.Element;

package/dist/checkbox/CheckboxAnatomy.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link Checkbox} draws when given no children: an Indicator
+ * holding `indicator`, or the default check/dash glyph when it is absent.
+ *
+ * @internal
+ */
+export declare function CheckboxAnatomy({ indicator }: {
+    indicator?: React.ReactNode;
+}): React.JSX.Element;

package/dist/checkbox/CheckboxIndicator.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { CheckboxIndicatorProps } from './types.cjs';
 /**
- * The visual mark (e.g. a check or dash icon) shown inside a {@link Checkbox}.
- * Renders `<span data-state data-disabled>` mirroring the parent checkbox's
- * state. Unmounts when unchecked unless `forceMount` is set.
+ * Visual mark (e.g. check or dash icon) inside a {@link Checkbox}, mirroring its state. Unmounts when unchecked unless `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/checkbox/CheckboxIndicator.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { CheckboxIndicatorProps } from './types.js';
 /**
- * The visual mark (e.g. a check or dash icon) shown inside a {@link Checkbox}.
- * Renders `<span data-state data-disabled>` mirroring the parent checkbox's
- * state. Unmounts when unchecked unless `forceMount` is set.
+ * Visual mark (e.g. check or dash icon) inside a {@link Checkbox}, mirroring its state. Unmounts when unchecked unless `forceMount` is set.
  *
  * @example
  * ```tsx

package/dist/checkbox/index.d.cts

@@ -1,3 +1,2 @@
-export * from './Checkbox.cjs';
-export { CheckboxIndicator } from './CheckboxIndicator.cjs';
-export type { CheckboxProps, CheckboxIndicatorProps, CheckedState } from './types.cjs';
+export { Checkbox } from './Checkbox.cjs';
+export type { CheckboxHandle, CheckboxProps, CheckedState } from './types.cjs';

package/dist/checkbox/index.d.ts

@@ -1,3 +1,2 @@
-export * from './Checkbox.js';
-export { CheckboxIndicator } from './CheckboxIndicator.js';
-export type { CheckboxProps, CheckboxIndicatorProps, CheckedState } from './types.js';
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxHandle, CheckboxProps, CheckedState } from './types.js';

package/dist/checkbox/primitives.d.cts

@@ -0,0 +1,15 @@
+/**
+ * Advanced primitives for `Checkbox` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox, CheckboxIndicator } from '@skdx/react/primitives/checkbox';
+ *
+ * <Checkbox defaultChecked name="terms">
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ * </Checkbox>
+ * ```
+ */
+export { Checkbox } from './Checkbox.cjs';
+export { CheckboxIndicator } from './CheckboxIndicator.cjs';
+export type { CheckboxProps, CheckboxHandle, CheckedState, CheckboxIndicatorProps } from './types.cjs';

package/dist/checkbox/primitives.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Advanced primitives for `Checkbox` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Checkbox, CheckboxIndicator } from '@skdx/react/primitives/checkbox';
+ *
+ * <Checkbox defaultChecked name="terms">
+ *   <CheckboxIndicator>✓</CheckboxIndicator>
+ * </Checkbox>
+ * ```
+ */
+export { Checkbox } from './Checkbox.js';
+export { CheckboxIndicator } from './CheckboxIndicator.js';
+export type { CheckboxProps, CheckboxHandle, CheckedState, CheckboxIndicatorProps } from './types.js';

package/dist/checkbox/types.d.cts

@@ -1,6 +1,16 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** A checkbox's tri-state value: checked, unchecked, or indeterminate (partially checked). */
 export type CheckedState = boolean | 'indeterminate';
+/**
+ * What `Checkbox`'s forwarded ref actually is: the root `<button>` plus the
+ * constraint-validation methods, which are assigned onto that node rather than
+ * replacing it — so this is additive, and everything an `HTMLButtonElement`
+ * ref already did still works. Type a ref with
+ * `React.useRef<CheckboxHandle>(null)`.
+ */
+export type CheckboxHandle = HTMLButtonElement & FormValidityHandle;
 /** @internal Shared state distributed from {@link Checkbox} to its {@link CheckboxIndicator} via context. Not part of the public API. */
 export interface CheckboxContextValue {
     checked: CheckedState;
@@ -29,7 +39,7 @@ export interface CheckboxProps extends Omit<PrimitivePropsWithRef<'button'>, 'de
      */
     required?: boolean;
     /**
-     * Name for native form participation via a hidden input. Omitted: no hidden input is rendered.
+     * Name for native form participation via a hidden input.
      * @default undefined — no hidden input rendered.
      */
     name?: string;
@@ -38,11 +48,40 @@ export interface CheckboxProps extends Omit<PrimitivePropsWithRef<'button'>, 'de
      * @default 'on'
      */
     value?: string;
+    /**
+     * Id of the `<form>` that owns this checkbox, for a checkbox rendered outside
+     * it — inside a `Dialog`'s portal, for instance. Forwarded to the hidden
+     * input's `form` attribute rather than to the root `<button>`, which is
+     * `type="button"` and submits nothing.
+     * @default undefined — the checkbox belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
+    /**
+     * Freezes the checked state without freezing the control: the root keeps its
+     * tab stop and stays focusable, gains `aria-readonly`/`data-readonly`, and
+     * ignores click and Space. Not `aria-disabled` — a read-only checkbox is
+     * available, only not editable — and the hidden input keeps its `name`/`value`
+     * and never receives the native `readonly` attribute, which would bar it from
+     * constraint validation.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
     invalid?: boolean;
+    /**
+     * Disables the checkbox and excludes it from the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Renders a derived `CheckboxIndicator` holding this content, in place of
+     * the default check glyph. Ignored when `children` is given.
+     * @default undefined — the default check/dash glyph.
+     */
+    indicator?: React.ReactNode;
 }
 /** Props for the {@link CheckboxIndicator}, the visual mark shown when checked or indeterminate. */
 export interface CheckboxIndicatorProps extends PrimitivePropsWithRef<'span'> {

package/dist/checkbox/types.d.ts

@@ -1,6 +1,16 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** A checkbox's tri-state value: checked, unchecked, or indeterminate (partially checked). */
 export type CheckedState = boolean | 'indeterminate';
+/**
+ * What `Checkbox`'s forwarded ref actually is: the root `<button>` plus the
+ * constraint-validation methods, which are assigned onto that node rather than
+ * replacing it — so this is additive, and everything an `HTMLButtonElement`
+ * ref already did still works. Type a ref with
+ * `React.useRef<CheckboxHandle>(null)`.
+ */
+export type CheckboxHandle = HTMLButtonElement & FormValidityHandle;
 /** @internal Shared state distributed from {@link Checkbox} to its {@link CheckboxIndicator} via context. Not part of the public API. */
 export interface CheckboxContextValue {
     checked: CheckedState;
@@ -29,7 +39,7 @@ export interface CheckboxProps extends Omit<PrimitivePropsWithRef<'button'>, 'de
      */
     required?: boolean;
     /**
-     * Name for native form participation via a hidden input. Omitted: no hidden input is rendered.
+     * Name for native form participation via a hidden input.
      * @default undefined — no hidden input rendered.
      */
     name?: string;
@@ -38,11 +48,40 @@ export interface CheckboxProps extends Omit<PrimitivePropsWithRef<'button'>, 'de
      * @default 'on'
      */
     value?: string;
+    /**
+     * Id of the `<form>` that owns this checkbox, for a checkbox rendered outside
+     * it — inside a `Dialog`'s portal, for instance. Forwarded to the hidden
+     * input's `form` attribute rather than to the root `<button>`, which is
+     * `type="button"` and submits nothing.
+     * @default undefined — the checkbox belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string;
+    /**
+     * Freezes the checked state without freezing the control: the root keeps its
+     * tab stop and stays focusable, gains `aria-readonly`/`data-readonly`, and
+     * ignores click and Space. Not `aria-disabled` — a read-only checkbox is
+     * available, only not editable — and the hidden input keeps its `name`/`value`
+     * and never receives the native `readonly` attribute, which would bar it from
+     * constraint validation.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
     invalid?: boolean;
+    /**
+     * Disables the checkbox and excludes it from the tab order.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Renders a derived `CheckboxIndicator` holding this content, in place of
+     * the default check glyph. Ignored when `children` is given.
+     * @default undefined — the default check/dash glyph.
+     */
+    indicator?: React.ReactNode;
 }
 /** Props for the {@link CheckboxIndicator}, the visual mark shown when checked or indeterminate. */
 export interface CheckboxIndicatorProps extends PrimitivePropsWithRef<'span'> {

package/dist/checkbox-card/CheckboxCard.cjs

@@ -1 +1 @@
-"use strict";var j=Object.create;var l=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var te=(o,r)=>{for(var e in r)l(o,e,{get:r[e],enumerable:!0})},H=(o,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of oe(r))!ae.call(o,d)&&d!==e&&l(o,d,{get:()=>r[d],enumerable:!(a=ee(r,d))||a.enumerable});return o};var n=(o,r,e)=>(e=o!=null?j(re(o)):{},H(r||!o||!o.__esModule?l(e,"default",{value:o,enumerable:!0}):e,o)),ce=o=>H(l({},"__esModule",{value:!0}),o);var de={};te(de,{CheckboxCard:()=>w,CheckboxCardControl:()=>x,CheckboxCardDescription:()=>P,CheckboxCardIndicator:()=>k,CheckboxCardLabel:()=>u,CheckboxCardProvider:()=>S,useCheckboxCardContext:()=>c});module.exports=ce(de);var t=n(require("react"),1),I=require("../utils/createContext.cjs"),N=require("../utils/part.cjs"),s=require("../utils/primitive.cjs"),E=require("../utils/useControllableState.cjs"),h=require("react/jsx-runtime"),[S,c]=(0,I.createSafeContext)("CheckboxCard"),w=t.forwardRef(({checked:o,defaultChecked:r=!1,onCheckedChange:e,name:a,value:d="on",required:O=!1,disabled:R=!1,invalid:y=!1,...i},Q)=>{let[L=!1,U]=(0,E.useControllableState)({prop:o,defaultProp:r,onChange:e}),v=t.useId(),[W,X]=t.useState(!1),[Y,Z]=t.useState(!1),[_,D]=t.useState(!1),C=t.useRef(!1);return(0,h.jsx)(S,{checked:L,disabled:R,required:O,invalid:y,name:a,value:d,labelId:`${v}-label`,descriptionId:`${v}-description`,hasLabel:W,hasDescription:Y,setHasLabel:X,setHasDescription:Z,onCheckedChange:U,children:(0,h.jsx)(s.Primitive.label,{"data-state":L?"checked":"unchecked","data-disabled":R?"":void 0,"data-invalid":y?"":void 0,"data-focus-visible":_?"":void 0,...i,...(0,N.skdxPart)("checkbox-card","root",i.className),ref:Q,onPointerDown:(0,s.composeEventHandlers)(i.onPointerDown,()=>{C.current=!0}),onFocus:(0,s.composeEventHandlers)(i.onFocus,()=>{D(!C.current),C.current=!1}),onBlur:(0,s.composeEventHandlers)(i.onBlur,()=>{D(!1),C.current=!1})})})});w.displayName="CheckboxCard";var g=n(require("react"),1),T=require("../utils/part.cjs"),b=require("../utils/primitive.cjs"),V=require("../utils/visuallyHidden.cjs");var m=require("react/jsx-runtime"),x=g.forwardRef((o,r)=>{let e=c("CheckboxCardControl");return(0,m.jsx)(V.VisuallyHidden,{asChild:!0,children:(0,m.jsx)(b.Primitive.input,{type:"checkbox",name:e.name,value:e.value,checked:e.checked,required:e.required,disabled:e.disabled,"aria-invalid":e.invalid?!0:void 0,"aria-labelledby":e.hasLabel?e.labelId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,"data-state":e.checked?"checked":"unchecked",...o,...(0,T.skdxPart)("checkbox-card","control",o.className),ref:r,onChange:(0,b.composeEventHandlers)(o.onChange,a=>{e.onCheckedChange(a.currentTarget.checked)})})})});x.displayName="CheckboxCardControl";var M=n(require("react"),1),q=require("../utils/part.cjs"),F=require("../utils/primitive.cjs");var B=require("react/jsx-runtime"),k=M.forwardRef((o,r)=>{let e=c("CheckboxCardIndicator");return(0,B.jsx)(F.Primitive.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...o,...(0,q.skdxPart)("checkbox-card","indicator",o.className),ref:r})});k.displayName="CheckboxCardIndicator";var p=n(require("react"),1),$=require("../utils/part.cjs"),z=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),u=p.forwardRef((o,r)=>{let e=c("CheckboxCardLabel"),{setHasLabel:a}=e;return p.useEffect(()=>(a(!0),()=>a(!1)),[a]),(0,A.jsx)(z.Primitive.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...o,...(0,$.skdxPart)("checkbox-card","label",o.className),ref:r})});u.displayName="CheckboxCardLabel";var f=n(require("react"),1),G=require("../utils/part.cjs"),J=require("../utils/primitive.cjs");var K=require("react/jsx-runtime"),P=f.forwardRef((o,r)=>{let e=c("CheckboxCardDescription"),{setHasDescription:a}=e;return f.useEffect(()=>(a(!0),()=>a(!1)),[a]),(0,K.jsx)(J.Primitive.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...o,...(0,G.skdxPart)("checkbox-card","description",o.className),ref:r})});P.displayName="CheckboxCardDescription";0&&(module.exports={CheckboxCard,CheckboxCardControl,CheckboxCardDescription,CheckboxCardIndicator,CheckboxCardLabel,CheckboxCardProvider,useCheckboxCardContext});
+"use strict";var Ce=Object.create;var f=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var he=(o,r)=>{for(var e in r)f(o,e,{get:r[e],enumerable:!0})},w=(o,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of fe(r))!pe.call(o,d)&&d!==e&&f(o,d,{get:()=>r[d],enumerable:!(a=me(r,d))||a.enumerable});return o};var C=(o,r,e)=>(e=o!=null?Ce(be(o)):{},w(r||!o||!o.__esModule?f(e,"default",{value:o,enumerable:!0}):e,o)),xe=o=>w(f({},"__esModule",{value:!0}),o);var ue={};he(ue,{CheckboxCard:()=>D,CheckboxCardControl:()=>p,CheckboxCardDescription:()=>x,CheckboxCardIndicator:()=>k,CheckboxCardLabel:()=>R,CheckboxCardProvider:()=>j,CheckboxCardRoot:()=>H,useCheckboxCardContext:()=>c});module.exports=xe(ue);var t=C(require("react"),1),U=require("../utils/cardNesting.cjs"),X=require("../utils/createContext.cjs"),v=require("../utils/declaredChildren.cjs"),L=require("../utils/formControl.cjs"),Y=require("../utils/part.cjs"),s=require("../utils/primitive.cjs"),Z=require("../utils/useControllableState.cjs");var V=C(require("react"),1),q=require("../utils/part.cjs"),b=require("../utils/primitive.cjs"),F=require("../utils/visuallyHidden.cjs");var P=require("react/jsx-runtime"),p=V.forwardRef((o,r)=>{let e=c("CheckboxCardControl");return(0,P.jsx)(F.VisuallyHidden,{asChild:!0,children:(0,P.jsx)(b.Primitive.input,{type:"checkbox",name:e.name,value:e.value,form:e.form,checked:e.checked,required:e.required,disabled:e.disabled,"aria-readonly":e.readOnly||void 0,"aria-invalid":e.invalid?!0:void 0,"aria-labelledby":e.hasLabel?e.labelId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,"data-state":e.checked?"checked":"unchecked",...o,...(0,q.skdxPart)("checkbox-card","control",o.className),ref:r,onChange:(0,b.composeEventHandlers)(o.onChange,a=>{if(e.readOnly){a.currentTarget.checked=e.checked;return}e.onCheckedChange(a.currentTarget.checked)})})})});p.displayName="CheckboxCardControl";var h=C(require("react"),1),O=require("../utils/part.cjs"),A=require("../utils/primitive.cjs");var B=require("react/jsx-runtime"),x=h.forwardRef((o,r)=>{let e=c("CheckboxCardDescription"),{setHasDescription:a}=e;return h.useEffect(()=>(a(!0),()=>a(!1)),[a]),(0,B.jsx)(A.Primitive.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...o,...(0,O.skdxPart)("checkbox-card","description",o.className),ref:r})});x.displayName="CheckboxCardDescription";var $=C(require("react"),1),W=require("../utils/part.cjs"),_=require("../utils/primitive.cjs");var z=require("react/jsx-runtime"),k=$.forwardRef((o,r)=>{let e=c("CheckboxCardIndicator");return(0,z.jsx)(_.Primitive.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...o,...(0,W.skdxPart)("checkbox-card","indicator",o.className),ref:r})});k.displayName="CheckboxCardIndicator";var u=C(require("react"),1),G=require("../utils/part.cjs"),J=require("../utils/primitive.cjs");var K=require("react/jsx-runtime"),R=u.forwardRef((o,r)=>{let e=c("CheckboxCardLabel"),{setHasLabel:a}=e;return u.useEffect(()=>(a(!0),()=>a(!1)),[a]),(0,K.jsx)(J.Primitive.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...o,...(0,G.skdxPart)("checkbox-card","label",o.className),ref:r})});R.displayName="CheckboxCardLabel";var n=require("react/jsx-runtime"),Q=({label:o,description:r})=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(p,{}),(0,n.jsx)(k,{}),o===void 0?null:(0,n.jsx)(R,{children:o}),r===void 0?null:(0,n.jsx)(x,{children:r})]});var y=require("react/jsx-runtime"),ke='input[type="checkbox"]',[j,c]=(0,X.createSafeContext)("CheckboxCard"),H=t.forwardRef(({checked:o,defaultChecked:r=!1,onCheckedChange:e,name:a,value:d="on",form:ee,required:oe=!1,disabled:g=!1,readOnly:I=!1,invalid:E=!1,...i},re)=>{let[N=!1,T]=(0,Z.useControllableState)({prop:o,defaultProp:r,onChange:e}),M=t.useId(),[ae,te]=t.useState(!1),[de,ce]=t.useState(!1),ne=ae||(0,v.hasDeclaredChild)(i.children,"CheckboxCardLabel"),ie=de||(0,v.hasDeclaredChild)(i.children,"CheckboxCardDescription"),[se,S]=t.useState(!1),m=t.useRef(!1),l=t.useRef(null),le=t.useMemo(()=>({get current(){return l.current?.querySelector(ke)??null}}),[]);return(0,L.useFormValidityHandle)(re,l,le),(0,U.useCardNestingWarning)("CheckboxCard",l),(0,L.useFormReset)(l,()=>T(r)),(0,y.jsx)(j,{checked:N,disabled:g,readOnly:I,required:oe,invalid:E,name:a,value:d,form:ee,labelId:`${M}-label`,descriptionId:`${M}-description`,hasLabel:ne,hasDescription:ie,setHasLabel:te,setHasDescription:ce,onCheckedChange:T,children:(0,y.jsx)(s.Primitive.label,{"data-state":N?"checked":"unchecked","data-disabled":g?"":void 0,"data-readonly":I?"":void 0,"data-invalid":E?"":void 0,"data-focus-visible":se?"":void 0,...i,...(0,Y.skdxPart)("checkbox-card","root",i.className),ref:l,onPointerDown:(0,s.composeEventHandlers)(i.onPointerDown,()=>{m.current=!0}),onFocus:(0,s.composeEventHandlers)(i.onFocus,()=>{S(!m.current),m.current=!1}),onBlur:(0,s.composeEventHandlers)(i.onBlur,()=>{S(!1),m.current=!1})})})});H.displayName="CheckboxCardRoot";var D=t.forwardRef(({label:o,description:r,children:e,...a},d)=>(0,y.jsx)(H,{...a,ref:d,children:e??Q({label:o,description:r})}));D.displayName="CheckboxCard";0&&(module.exports={CheckboxCard,CheckboxCardControl,CheckboxCardDescription,CheckboxCardIndicator,CheckboxCardLabel,CheckboxCardProvider,CheckboxCardRoot,useCheckboxCardContext});

package/dist/checkbox-card/CheckboxCard.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CheckboxCardContextValue, CheckboxCardProps } from './types.cjs';
+import type { CheckboxCardContextValue, CheckboxCardProps, CheckboxCardRootProps } from './types.cjs';
 export declare const CheckboxCardProvider: {
     (props: CheckboxCardContextValue & {
         children: React.ReactNode;
@@ -21,19 +21,64 @@ export declare const CheckboxCardProvider: {
  * (`defaultChecked`), and participates in native form submission when `name`
  * is set.
  *
+ * The forwarded ref carries `checkValidity()`/`reportValidity()`/
+ * `setCustomValidity()` as well as everything an `HTMLLabelElement` ref already
+ * did — type it with {@link CheckboxCardHandle}. All three delegate straight to
+ * the {@link CheckboxCardControl} input: unlike `Checkbox`, whose hidden input
+ * only exists once `name` is set, that input is unconditional here, so there is
+ * no "no control, report valid" case to fall back to.
+ *
+ * `readOnly` freezes the selection without freezing the card: the Control keeps
+ * its tab stop, gains `aria-readonly`, the root gains `data-readonly`, and
+ * clicking the surface or pressing Space changes nothing. Not `aria-disabled` —
+ * a read-only card is available, only not editable — and the Control keeps
+ * submitting its `name`/`value`.
+ *
  * **Nothing interactive may be nested inside the card.** The root is a
  * `<label>`, so a link or button in there is both an HTML content-model
  * violation and a real usability bug — clicking the inner control would also
- * toggle the card. Put actions beside the card, never inside it.
+ * toggle the card. Put actions beside the card, never inside it; a card that
+ * does warns in the console.
+ *
+ * Renders `children` verbatim — {@link CheckboxCard} (the recipe, below) is
+ * this root with the anatomy derived from `label`/`description`.
  *
  * @example
  * ```tsx
- * <CheckboxCard defaultChecked name="addons" value="backups">
+ * import { CheckboxCardControl, CheckboxCardDescription, CheckboxCardIndicator, CheckboxCardLabel, CheckboxCardRoot } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot defaultChecked name="addons" value="backups">
  *   <CheckboxCardControl />
  *   <CheckboxCardIndicator />
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
  *   <CheckboxCardDescription>Nightly snapshots, kept for 30 days.</CheckboxCardDescription>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
+ * ```
+ */
+export declare const CheckboxCardRoot: React.ForwardRefExoticComponent<Omit<CheckboxCardRootProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * A selectable card backed by a checkbox: the whole surface is the hit target.
+ *
+ * Given no `children` it draws the derived anatomy — the visually-hidden
+ * `CheckboxCardControl`, the `CheckboxCardIndicator` box, the `CheckboxCardLabel` from `label`, the `CheckboxCardDescription`
+ * from `description`. Given children, they are rendered verbatim for full
+ * manual composition and nothing is derived; only presence is inspected, never
+ * what the children are. The card has no `Content` part, so children are the
+ * parts themselves — reach for `@skdx/react/primitives/checkbox-card`.
+ *
+ * Everything {@link CheckboxCardRoot} owns still applies: the controlled /
+ * uncontrolled checked state, native form submission, `readOnly`, the
+ * `data-state`/`data-disabled`/`data-invalid`/`data-focus-visible` hooks, and
+ * the constraint-validation methods on the forwarded ref.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard
+ *   name="addons"
+ *   value="backups"
+ *   label="Automated backups"
+ *   description="Nightly snapshots, kept for 30 days."
+ * />
  * ```
  */
 export declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/checkbox-card/CheckboxCard.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CheckboxCardContextValue, CheckboxCardProps } from './types.js';
+import type { CheckboxCardContextValue, CheckboxCardProps, CheckboxCardRootProps } from './types.js';
 export declare const CheckboxCardProvider: {
     (props: CheckboxCardContextValue & {
         children: React.ReactNode;
@@ -21,19 +21,64 @@ export declare const CheckboxCardProvider: {
  * (`defaultChecked`), and participates in native form submission when `name`
  * is set.
  *
+ * The forwarded ref carries `checkValidity()`/`reportValidity()`/
+ * `setCustomValidity()` as well as everything an `HTMLLabelElement` ref already
+ * did — type it with {@link CheckboxCardHandle}. All three delegate straight to
+ * the {@link CheckboxCardControl} input: unlike `Checkbox`, whose hidden input
+ * only exists once `name` is set, that input is unconditional here, so there is
+ * no "no control, report valid" case to fall back to.
+ *
+ * `readOnly` freezes the selection without freezing the card: the Control keeps
+ * its tab stop, gains `aria-readonly`, the root gains `data-readonly`, and
+ * clicking the surface or pressing Space changes nothing. Not `aria-disabled` —
+ * a read-only card is available, only not editable — and the Control keeps
+ * submitting its `name`/`value`.
+ *
  * **Nothing interactive may be nested inside the card.** The root is a
  * `<label>`, so a link or button in there is both an HTML content-model
  * violation and a real usability bug — clicking the inner control would also
- * toggle the card. Put actions beside the card, never inside it.
+ * toggle the card. Put actions beside the card, never inside it; a card that
+ * does warns in the console.
+ *
+ * Renders `children` verbatim — {@link CheckboxCard} (the recipe, below) is
+ * this root with the anatomy derived from `label`/`description`.
  *
  * @example
  * ```tsx
- * <CheckboxCard defaultChecked name="addons" value="backups">
+ * import { CheckboxCardControl, CheckboxCardDescription, CheckboxCardIndicator, CheckboxCardLabel, CheckboxCardRoot } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot defaultChecked name="addons" value="backups">
  *   <CheckboxCardControl />
  *   <CheckboxCardIndicator />
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
  *   <CheckboxCardDescription>Nightly snapshots, kept for 30 days.</CheckboxCardDescription>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
+ * ```
+ */
+export declare const CheckboxCardRoot: React.ForwardRefExoticComponent<Omit<CheckboxCardRootProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * A selectable card backed by a checkbox: the whole surface is the hit target.
+ *
+ * Given no `children` it draws the derived anatomy — the visually-hidden
+ * `CheckboxCardControl`, the `CheckboxCardIndicator` box, the `CheckboxCardLabel` from `label`, the `CheckboxCardDescription`
+ * from `description`. Given children, they are rendered verbatim for full
+ * manual composition and nothing is derived; only presence is inspected, never
+ * what the children are. The card has no `Content` part, so children are the
+ * parts themselves — reach for `@skdx/react/primitives/checkbox-card`.
+ *
+ * Everything {@link CheckboxCardRoot} owns still applies: the controlled /
+ * uncontrolled checked state, native form submission, `readOnly`, the
+ * `data-state`/`data-disabled`/`data-invalid`/`data-focus-visible` hooks, and
+ * the constraint-validation methods on the forwarded ref.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxCard
+ *   name="addons"
+ *   value="backups"
+ *   label="Automated backups"
+ *   description="Nightly snapshots, kept for 30 days."
+ * />
  * ```
  */
 export declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/checkbox-card/CheckboxCard.js

@@ -1 +1 @@
-import*as a from"react";import{createSafeContext as T}from"../utils/createContext.js";import{skdxPart as V}from"../utils/part.js";import{composeEventHandlers as C,Primitive as M}from"../utils/primitive.js";import{useControllableState as q}from"../utils/useControllableState.js";import{jsx as m}from"react/jsx-runtime";var[F,c]=T("CheckboxCard"),B=a.forwardRef(({checked:o,defaultChecked:t=!1,onCheckedChange:e,name:r,value:v="on",required:D=!1,disabled:l=!1,invalid:b=!1,...d},H)=>{let[p=!1,I]=q({prop:o,defaultProp:t,onChange:e}),f=a.useId(),[N,E]=a.useState(!1),[S,w]=a.useState(!1),[g,h]=a.useState(!1),s=a.useRef(!1);return m(F,{checked:p,disabled:l,required:D,invalid:b,name:r,value:v,labelId:`${f}-label`,descriptionId:`${f}-description`,hasLabel:N,hasDescription:S,setHasLabel:E,setHasDescription:w,onCheckedChange:I,children:m(M.label,{"data-state":p?"checked":"unchecked","data-disabled":l?"":void 0,"data-invalid":b?"":void 0,"data-focus-visible":g?"":void 0,...d,...V("checkbox-card","root",d.className),ref:H,onPointerDown:C(d.onPointerDown,()=>{s.current=!0}),onFocus:C(d.onFocus,()=>{h(!s.current),s.current=!1}),onBlur:C(d.onBlur,()=>{h(!1),s.current=!1})})})});B.displayName="CheckboxCard";import*as k from"react";import{skdxPart as $}from"../utils/part.js";import{composeEventHandlers as z,Primitive as A}from"../utils/primitive.js";import{VisuallyHidden as G}from"../utils/visuallyHidden.js";import{jsx as x}from"react/jsx-runtime";var u=k.forwardRef((o,t)=>{let e=c("CheckboxCardControl");return x(G,{asChild:!0,children:x(A.input,{type:"checkbox",name:e.name,value:e.value,checked:e.checked,required:e.required,disabled:e.disabled,"aria-invalid":e.invalid?!0:void 0,"aria-labelledby":e.hasLabel?e.labelId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,"data-state":e.checked?"checked":"unchecked",...o,...$("checkbox-card","control",o.className),ref:t,onChange:z(o.onChange,r=>{e.onCheckedChange(r.currentTarget.checked)})})})});u.displayName="CheckboxCardControl";import*as P from"react";import{skdxPart as J}from"../utils/part.js";import{Primitive as K}from"../utils/primitive.js";import{jsx as O}from"react/jsx-runtime";var R=P.forwardRef((o,t)=>{let e=c("CheckboxCardIndicator");return O(K.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...o,...J("checkbox-card","indicator",o.className),ref:t})});R.displayName="CheckboxCardIndicator";import*as i from"react";import{skdxPart as Q}from"../utils/part.js";import{Primitive as U}from"../utils/primitive.js";import{jsx as W}from"react/jsx-runtime";var y=i.forwardRef((o,t)=>{let e=c("CheckboxCardLabel"),{setHasLabel:r}=e;return i.useEffect(()=>(r(!0),()=>r(!1)),[r]),W(U.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...o,...Q("checkbox-card","label",o.className),ref:t})});y.displayName="CheckboxCardLabel";import*as n from"react";import{skdxPart as X}from"../utils/part.js";import{Primitive as Y}from"../utils/primitive.js";import{jsx as Z}from"react/jsx-runtime";var L=n.forwardRef((o,t)=>{let e=c("CheckboxCardDescription"),{setHasDescription:r}=e;return n.useEffect(()=>(r(!0),()=>r(!1)),[r]),Z(Y.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...o,...X("checkbox-card","description",o.className),ref:t})});L.displayName="CheckboxCardDescription";export{B as CheckboxCard,u as CheckboxCardControl,L as CheckboxCardDescription,R as CheckboxCardIndicator,y as CheckboxCardLabel,F as CheckboxCardProvider,c as useCheckboxCardContext};
+import*as t from"react";import{useCardNestingWarning as de}from"../utils/cardNesting.js";import{createSafeContext as ce}from"../utils/createContext.js";import{hasDeclaredChild as N}from"../utils/declaredChildren.js";import{useFormReset as ne,useFormValidityHandle as ie}from"../utils/formControl.js";import{skdxPart as se}from"../utils/part.js";import{composeEventHandlers as x,Primitive as le}from"../utils/primitive.js";import{useControllableState as Ce}from"../utils/useControllableState.js";import*as g from"react";import{skdxPart as z}from"../utils/part.js";import{composeEventHandlers as G,Primitive as J}from"../utils/primitive.js";import{VisuallyHidden as K}from"../utils/visuallyHidden.js";import{jsx as D}from"react/jsx-runtime";var f=g.forwardRef((o,r)=>{let e=d("CheckboxCardControl");return D(K,{asChild:!0,children:D(J.input,{type:"checkbox",name:e.name,value:e.value,form:e.form,checked:e.checked,required:e.required,disabled:e.disabled,"aria-readonly":e.readOnly||void 0,"aria-invalid":e.invalid?!0:void 0,"aria-labelledby":e.hasLabel?e.labelId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,"data-state":e.checked?"checked":"unchecked",...o,...z("checkbox-card","control",o.className),ref:r,onChange:G(o.onChange,a=>{if(e.readOnly){a.currentTarget.checked=e.checked;return}e.onCheckedChange(a.currentTarget.checked)})})})});f.displayName="CheckboxCardControl";import*as s from"react";import{skdxPart as Q}from"../utils/part.js";import{Primitive as U}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var b=s.forwardRef((o,r)=>{let e=d("CheckboxCardDescription"),{setHasDescription:a}=e;return s.useEffect(()=>(a(!0),()=>a(!1)),[a]),X(U.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...o,...Q("checkbox-card","description",o.className),ref:r})});b.displayName="CheckboxCardDescription";import*as I from"react";import{skdxPart as Y}from"../utils/part.js";import{Primitive as Z}from"../utils/primitive.js";import{jsx as j}from"react/jsx-runtime";var p=I.forwardRef((o,r)=>{let e=d("CheckboxCardIndicator");return j(Z.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...o,...Y("checkbox-card","indicator",o.className),ref:r})});p.displayName="CheckboxCardIndicator";import*as l from"react";import{skdxPart as ee}from"../utils/part.js";import{Primitive as oe}from"../utils/primitive.js";import{jsx as re}from"react/jsx-runtime";var h=l.forwardRef((o,r)=>{let e=d("CheckboxCardLabel"),{setHasLabel:a}=e;return l.useEffect(()=>(a(!0),()=>a(!1)),[a]),re(oe.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...o,...ee("checkbox-card","label",o.className),ref:r})});h.displayName="CheckboxCardLabel";import{Fragment as ae,jsx as C,jsxs as te}from"react/jsx-runtime";var E=({label:o,description:r})=>te(ae,{children:[C(f,{}),C(p,{}),o===void 0?null:C(h,{children:o}),r===void 0?null:C(b,{children:r})]});import{jsx as k}from"react/jsx-runtime";var me='input[type="checkbox"]',[fe,d]=ce("CheckboxCard"),T=t.forwardRef(({checked:o,defaultChecked:r=!1,onCheckedChange:e,name:a,value:m="on",form:S,required:w=!1,disabled:u=!1,readOnly:R=!1,invalid:y=!1,...c},V)=>{let[L=!1,P]=Ce({prop:o,defaultProp:r,onChange:e}),v=t.useId(),[q,F]=t.useState(!1),[O,A]=t.useState(!1),B=q||N(c.children,"CheckboxCardLabel"),$=O||N(c.children,"CheckboxCardDescription"),[W,H]=t.useState(!1),i=t.useRef(!1),n=t.useRef(null),_=t.useMemo(()=>({get current(){return n.current?.querySelector(me)??null}}),[]);return ie(V,n,_),de("CheckboxCard",n),ne(n,()=>P(r)),k(fe,{checked:L,disabled:u,readOnly:R,required:w,invalid:y,name:a,value:m,form:S,labelId:`${v}-label`,descriptionId:`${v}-description`,hasLabel:B,hasDescription:$,setHasLabel:F,setHasDescription:A,onCheckedChange:P,children:k(le.label,{"data-state":L?"checked":"unchecked","data-disabled":u?"":void 0,"data-readonly":R?"":void 0,"data-invalid":y?"":void 0,"data-focus-visible":W?"":void 0,...c,...se("checkbox-card","root",c.className),ref:n,onPointerDown:x(c.onPointerDown,()=>{i.current=!0}),onFocus:x(c.onFocus,()=>{H(!i.current),i.current=!1}),onBlur:x(c.onBlur,()=>{H(!1),i.current=!1})})})});T.displayName="CheckboxCardRoot";var M=t.forwardRef(({label:o,description:r,children:e,...a},m)=>k(T,{...a,ref:m,children:e??E({label:o,description:r})}));M.displayName="CheckboxCard";export{M as CheckboxCard,f as CheckboxCardControl,b as CheckboxCardDescription,p as CheckboxCardIndicator,h as CheckboxCardLabel,fe as CheckboxCardProvider,T as CheckboxCardRoot,d as useCheckboxCardContext};

package/dist/checkbox-card/CheckboxCardAnatomy.d.cts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link CheckboxCard} draws from `label`/`description`: the
+ * visually-hidden `CheckboxCardControl`, the `CheckboxCardIndicator` box, the title line, then the
+ * supporting copy.
+ *
+ * @internal
+ */
+export declare const CheckboxCardAnatomy: ({ label, description, }: {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}) => React.JSX.Element;

package/dist/checkbox-card/CheckboxCardAnatomy.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link CheckboxCard} draws from `label`/`description`: the
+ * visually-hidden `CheckboxCardControl`, the `CheckboxCardIndicator` box, the title line, then the
+ * supporting copy.
+ *
+ * @internal
+ */
+export declare const CheckboxCardAnatomy: ({ label, description, }: {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}) => React.JSX.Element;

package/dist/checkbox-card/CheckboxCardControl.d.cts

@@ -1,27 +1,21 @@
 import * as React from 'react';
 import type { CheckboxCardControlProps } from './types.cjs';
 /**
- * The real `<input type="checkbox">` behind a {@link CheckboxCard}. Rendered
- * through {@link VisuallyHidden}, **not** `display: none` or `hidden` — a
- * removed input is out of the accessibility tree and out of the tab order,
- * which would leave the card unusable by keyboard and silent to a screen
- * reader. Clipped to 1×1 it stays focusable, announceable and submittable.
+ * Real `<input type="checkbox">` behind {@link CheckboxCard}, rendered
+ * through {@link VisuallyHidden} (not `display:none`/`hidden`) to stay focusable,
+ * announceable, and submittable. Root `<label>` ancestry makes the whole card clickable.
  *
- * Takes `name`, `value`, `required`, `disabled` and the checked state from the
- * card root, and wires `aria-labelledby`/`aria-describedby` to the
- * {@link CheckboxCardLabel} / {@link CheckboxCardDescription} automatically —
- * only when those parts are actually mounted, so the control never points at
- * an id that does not exist.
- *
- * Exactly one of these belongs in a card, and it must be a descendant of the
- * root `<label>` — that ancestry is what makes the whole card clickable.
+ * Wires `aria-labelledby`/`aria-describedby` to {@link CheckboxCardLabel}/
+ * {@link CheckboxCardDescription} only when those parts are mounted.
  *
  * @example
  * ```tsx
- * <CheckboxCard name="addons" value="backups">
+ * import { CheckboxCardControl, CheckboxCardLabel, CheckboxCardRoot } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot name="addons" value="backups">
  *   <CheckboxCardControl />
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
  * ```
  */
 export declare const CheckboxCardControl: React.ForwardRefExoticComponent<Omit<CheckboxCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/checkbox-card/CheckboxCardControl.d.ts

@@ -1,27 +1,21 @@
 import * as React from 'react';
 import type { CheckboxCardControlProps } from './types.js';
 /**
- * The real `<input type="checkbox">` behind a {@link CheckboxCard}. Rendered
- * through {@link VisuallyHidden}, **not** `display: none` or `hidden` — a
- * removed input is out of the accessibility tree and out of the tab order,
- * which would leave the card unusable by keyboard and silent to a screen
- * reader. Clipped to 1×1 it stays focusable, announceable and submittable.
+ * Real `<input type="checkbox">` behind {@link CheckboxCard}, rendered
+ * through {@link VisuallyHidden} (not `display:none`/`hidden`) to stay focusable,
+ * announceable, and submittable. Root `<label>` ancestry makes the whole card clickable.
  *
- * Takes `name`, `value`, `required`, `disabled` and the checked state from the
- * card root, and wires `aria-labelledby`/`aria-describedby` to the
- * {@link CheckboxCardLabel} / {@link CheckboxCardDescription} automatically —
- * only when those parts are actually mounted, so the control never points at
- * an id that does not exist.
- *
- * Exactly one of these belongs in a card, and it must be a descendant of the
- * root `<label>` — that ancestry is what makes the whole card clickable.
+ * Wires `aria-labelledby`/`aria-describedby` to {@link CheckboxCardLabel}/
+ * {@link CheckboxCardDescription} only when those parts are mounted.
  *
  * @example
  * ```tsx
- * <CheckboxCard name="addons" value="backups">
+ * import { CheckboxCardControl, CheckboxCardLabel, CheckboxCardRoot } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot name="addons" value="backups">
  *   <CheckboxCardControl />
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
  * ```
  */
 export declare const CheckboxCardControl: React.ForwardRefExoticComponent<Omit<CheckboxCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/checkbox-card/CheckboxCardDescription.d.cts

@@ -2,20 +2,20 @@ import * as React from 'react';
 import type { CheckboxCardDescriptionProps } from './types.cjs';
 /**
  * Supporting copy under a {@link CheckboxCardLabel} — price, quota, caveat.
- * Registers itself with the card root on mount, which is what wires the
- * control's `aria-describedby` here, so the description is announced after the
- * name instead of being swallowed into it.
+ * Registers on mount to wire `aria-describedby`, so the description is
+ * announced separately (not merged into the name).
  *
- * Purely additive: leave it out and the control simply has no
- * `aria-describedby`.
+ * Purely additive: omit it and `aria-describedby` is not set.
  *
  * @example
  * ```tsx
- * <CheckboxCard>
+ * import { CheckboxCardControl, CheckboxCardDescription, CheckboxCardLabel, CheckboxCardRoot } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot>
  *   <CheckboxCardControl />
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
  *   <CheckboxCardDescription>Nightly snapshots, kept for 30 days.</CheckboxCardDescription>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
  * ```
  */
 export declare const CheckboxCardDescription: React.ForwardRefExoticComponent<Omit<CheckboxCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;