@skdx/react 0.28.0 → 0.30.0

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

@@ -1,47 +1,11 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.js';
 import type { CheckboxCardContextValue, CheckboxCardProps, CheckboxCardRootProps } from './types.js';
-export declare const CheckboxCardProvider: {
-    (props: CheckboxCardContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useCheckboxCardContext: (consumerName: string) => CheckboxCardContextValue;
+export declare const CheckboxCardProvider: React.FC<CheckboxCardContextValue & {
+    children: React.ReactNode;
+}>, useCheckboxCardContext: (consumerName: string) => CheckboxCardContextValue;
 /**
- * Root of a selectable card backed by a checkbox: a `<label>` wrapping a real,
- * visually hidden `<input type="checkbox">` ({@link CheckboxCardControl}), so
- * the **entire card surface** is the hit target with no click handler, no
- * `onKeyDown` and no `role` of its own — native label activation does it.
- *
- * Emits `data-state="checked" | "unchecked"`, `data-disabled`, `data-invalid`
- * and `data-focus-visible` on the root, which is the whole styling contract:
- * the card paints its selected, disabled, error and keyboard-focus rings from
- * the input's state without the input ever being visible.
- *
- * Works controlled (`checked` + `onCheckedChange`) or uncontrolled
- * (`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; 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`.
+ * Root of a selectable card backed by a checkbox: a `<label>` wrapping a visually-hidden `<input type="checkbox">` ({@link CheckboxCardControl}) so the entire card surface is the hit target.
  *
  * @example
  * ```tsx
@@ -55,21 +19,14 @@ export declare const CheckboxCardProvider: {
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardRoot: React.ForwardRefExoticComponent<Omit<CheckboxCardRootProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export declare const CheckboxCardRoot: {
+    ({ checked: checkedProp, defaultChecked, onCheckedChange, name, value, form, required, disabled, readOnly, invalid, ref: forwardedRef, size, ...props }: Omit<CheckboxCardRootProps, "ref"> & {
+        ref?: React.Ref<HTMLLabelElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};
 /**
- * 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.
+ * A selectable card backed by a checkbox that draws its label and description from `label`/`description`, or renders `children` verbatim.
  *
  * @example
  * ```tsx
@@ -81,4 +38,9 @@ export declare const CheckboxCardRoot: React.ForwardRefExoticComponent<Omit<Chec
  * />
  * ```
  */
-export declare const CheckboxCard: React.ForwardRefExoticComponent<Omit<CheckboxCardProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export declare const CheckboxCard: {
+    ({ label, description, children, ref: forwardedRef, ...rest }: Omit<CheckboxCardProps, "ref"> & {
+        ref?: React.Ref<HTMLLabelElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/checkbox-card/CheckboxCard.js

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

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

@@ -1,12 +1,6 @@
 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
- */
+/** @internal Anatomy a {@link CheckboxCard} draws from `label`/`description`. */
 export declare const CheckboxCardAnatomy: ({ label, description, }: {
-    label?: React.ReactNode;
-    description?: React.ReactNode;
+    label?: React.ReactNode | undefined;
+    description?: React.ReactNode | undefined;
 }) => React.JSX.Element;

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

@@ -1,12 +1,6 @@
 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
- */
+/** @internal Anatomy a {@link CheckboxCard} draws from `label`/`description`. */
 export declare const CheckboxCardAnatomy: ({ label, description, }: {
-    label?: React.ReactNode;
-    description?: React.ReactNode;
+    label?: React.ReactNode | undefined;
+    description?: React.ReactNode | undefined;
 }) => React.JSX.Element;

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

@@ -1,12 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxCardControlProps } from './types.cjs';
 /**
- * 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.
- *
- * Wires `aria-labelledby`/`aria-describedby` to {@link CheckboxCardLabel}/
- * {@link CheckboxCardDescription} only when those parts are mounted.
+ * Real `<input type="checkbox">` behind {@link CheckboxCard}, rendered through {@link VisuallyHidden} to stay focusable, announceable, and submittable.
  *
  * @example
  * ```tsx
@@ -18,4 +13,7 @@ import type { CheckboxCardControlProps } from './types.cjs';
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardControl: React.ForwardRefExoticComponent<Omit<CheckboxCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const CheckboxCardControl: {
+    ({ ref: forwardedRef, ...props }: CheckboxCardControlProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,12 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxCardControlProps } from './types.js';
 /**
- * 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.
- *
- * Wires `aria-labelledby`/`aria-describedby` to {@link CheckboxCardLabel}/
- * {@link CheckboxCardDescription} only when those parts are mounted.
+ * Real `<input type="checkbox">` behind {@link CheckboxCard}, rendered through {@link VisuallyHidden} to stay focusable, announceable, and submittable.
  *
  * @example
  * ```tsx
@@ -18,4 +13,7 @@ import type { CheckboxCardControlProps } from './types.js';
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardControl: React.ForwardRefExoticComponent<Omit<CheckboxCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const CheckboxCardControl: {
+    ({ ref: forwardedRef, ...props }: CheckboxCardControlProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { CheckboxCardDescriptionProps } from './types.cjs';
 /**
- * Supporting copy under a {@link CheckboxCardLabel} — price, quota, caveat.
- * Registers on mount to wire `aria-describedby`, so the description is
- * announced separately (not merged into the name).
- *
- * Purely additive: omit it and `aria-describedby` is not set.
+ * Supporting copy under a {@link CheckboxCardLabel} that registers on mount to wire the control's `aria-describedby`.
  *
  * @example
  * ```tsx
@@ -18,4 +14,7 @@ import type { CheckboxCardDescriptionProps } from './types.cjs';
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardDescription: React.ForwardRefExoticComponent<Omit<CheckboxCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxCardDescription: {
+    ({ ref: forwardedRef, ...props }: CheckboxCardDescriptionProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { CheckboxCardDescriptionProps } from './types.js';
 /**
- * Supporting copy under a {@link CheckboxCardLabel} — price, quota, caveat.
- * Registers on mount to wire `aria-describedby`, so the description is
- * announced separately (not merged into the name).
- *
- * Purely additive: omit it and `aria-describedby` is not set.
+ * Supporting copy under a {@link CheckboxCardLabel} that registers on mount to wire the control's `aria-describedby`.
  *
  * @example
  * ```tsx
@@ -18,4 +14,7 @@ import type { CheckboxCardDescriptionProps } from './types.js';
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardDescription: React.ForwardRefExoticComponent<Omit<CheckboxCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxCardDescription: {
+    ({ ref: forwardedRef, ...props }: CheckboxCardDescriptionProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxCardIndicatorProps } from './types.cjs';
 /**
  * Decorative check mark on {@link CheckboxCard} — stays mounted when unchecked (indicator is the box, not just tick). `aria-hidden` (real input announces state).
@@ -14,4 +14,7 @@ import type { CheckboxCardIndicatorProps } from './types.cjs';
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardIndicator: React.ForwardRefExoticComponent<Omit<CheckboxCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxCardIndicator: {
+    ({ ref: forwardedRef, ...props }: CheckboxCardIndicatorProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxCardIndicatorProps } from './types.js';
 /**
  * Decorative check mark on {@link CheckboxCard} — stays mounted when unchecked (indicator is the box, not just tick). `aria-hidden` (real input announces state).
@@ -14,4 +14,7 @@ import type { CheckboxCardIndicatorProps } from './types.js';
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardIndicator: React.ForwardRefExoticComponent<Omit<CheckboxCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxCardIndicator: {
+    ({ ref: forwardedRef, ...props }: CheckboxCardIndicatorProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { CheckboxCardLabelProps } from './types.cjs';
 /**
- * The card's title line and the control's `aria-labelledby` target.
- *
- * Renders `<span>` (not `<label>`—root is already the label). Registers on
- * mount so the control's `aria-labelledby` points here; omit it and the control
- * falls back to implicit labeling from the card's whole text.
+ * The card's title line, rendered as a `<span>` that registers on mount to wire the control's `aria-labelledby`.
  *
  * @example
  * ```tsx
@@ -17,4 +13,7 @@ import type { CheckboxCardLabelProps } from './types.cjs';
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardLabel: React.ForwardRefExoticComponent<Omit<CheckboxCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxCardLabel: {
+    ({ ref: forwardedRef, ...props }: CheckboxCardLabelProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { CheckboxCardLabelProps } from './types.js';
 /**
- * The card's title line and the control's `aria-labelledby` target.
- *
- * Renders `<span>` (not `<label>`—root is already the label). Registers on
- * mount so the control's `aria-labelledby` points here; omit it and the control
- * falls back to implicit labeling from the card's whole text.
+ * The card's title line, rendered as a `<span>` that registers on mount to wire the control's `aria-labelledby`.
  *
  * @example
  * ```tsx
@@ -17,4 +13,7 @@ import type { CheckboxCardLabelProps } from './types.js';
  * </CheckboxCardRoot>
  * ```
  */
-export declare const CheckboxCardLabel: React.ForwardRefExoticComponent<Omit<CheckboxCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxCardLabel: {
+    ({ ref: forwardedRef, ...props }: CheckboxCardLabelProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,11 +1,9 @@
 import type * as React from 'react';
 import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/**
- * Root `<label>` plus FormValidityHandle methods, assigned additively.
- */
+/** Root `<label>` plus FormValidityHandle methods, assigned additively. */
 export type CheckboxCardHandle = HTMLLabelElement & FormValidityHandle;
-/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. */
 export interface CheckboxCardContextValue {
     checked: boolean;
     disabled: boolean;
@@ -28,77 +26,76 @@ export interface CheckboxCardContextValue {
 /** Props for the {@link CheckboxCardRoot}, the `<label>` whose whole surface is the hit target. */
 export interface CheckboxCardRootProps extends Omit<PrimitivePropsWithRef<'label'>, 'defaultChecked'> {
     /**
-     * Checked state, for controlled usage. Pair with `onCheckedChange`.
+     * Checked state, for controlled usage, paired with `onCheckedChange`.
      * @default undefined — uncontrolled, tracks its own checked state internally.
      */
-    checked?: boolean;
+    checked?: boolean | undefined;
     /**
      * Initial checked state, for uncontrolled usage, seeding the first render.
      * @default false — the card starts unselected.
      */
-    defaultChecked?: boolean;
+    defaultChecked?: boolean | undefined;
     /**
      * Fires with the new checked state whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onCheckedChange?: (checked: boolean) => void;
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
     /**
      * Name on native checkbox input for form submission; input always exists,
      * making the card clickable.
      * @default undefined — the control is unnamed and contributes nothing to form data.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Value submitted with the control when checked.
      * @default 'on' — the same default the HTML checkbox itself uses.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Marks the control required for native form validation; an unchecked card blocks submission with `valueMissing`.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * Form ID for this card when rendered outside it; forwarded to input's
      * `form` attribute since root doesn't submit.
      * @default undefined — the card belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Disable control and remove from tab order; emit `data-disabled`.
-     * Card surface and keyboard can't change it.
+     * Disables the control, removes it from tab order, and emits `data-disabled`.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Freeze selection: control keeps tab stop, gains `aria-readonly`,
      * submits name/value; clicking and Space do nothing.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Marks the card invalid, exposed as `aria-invalid` on the control and `data-invalid` on the root.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
+    /**
+     * Size rung the skin scales the card by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
-/**
- * Derived checkbox-card props; no `asChild` (renders sibling parts).
- * Use headless `primitives/checkbox-card/CheckboxCardRoot` for that.
- */
+/** Derived checkbox-card props; no `asChild`, since the recipe renders sibling parts. */
 export interface CheckboxCardProps extends Omit<CheckboxCardRootProps, 'asChild'> {
     /**
-     * Card title line, rendered into derived label. Control names itself via
-     * `aria-labelledby`; ignored when `children` is given.
+     * Card title line, rendered into the derived label; ignored when `children` is given.
      * @default undefined — no label is rendered, and the control falls back to the card's whole text content.
      */
-    label?: React.ReactNode;
+    label?: React.ReactNode | undefined;
     /**
-     * Supporting copy under title, rendered into derived description.
-     * Joined to control's `aria-describedby`; ignored when `children` is given.
+     * Supporting copy under the title, rendered into the derived description; ignored when `children` is given.
      * @default undefined — no description is rendered.
      */
-    description?: React.ReactNode;
+    description?: React.ReactNode | undefined;
 }
 /** Props for the {@link CheckboxCardControl}, the real (visually hidden, still focusable) checkbox input. */
 export interface CheckboxCardControlProps extends Omit<PrimitivePropsWithRef<'input'>, 'checked' | 'defaultChecked' | 'type' | 'value'> {

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

@@ -1,11 +1,9 @@
 import type * as React from 'react';
 import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/**
- * Root `<label>` plus FormValidityHandle methods, assigned additively.
- */
+/** Root `<label>` plus FormValidityHandle methods, assigned additively. */
 export type CheckboxCardHandle = HTMLLabelElement & FormValidityHandle;
-/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. */
 export interface CheckboxCardContextValue {
     checked: boolean;
     disabled: boolean;
@@ -28,77 +26,76 @@ export interface CheckboxCardContextValue {
 /** Props for the {@link CheckboxCardRoot}, the `<label>` whose whole surface is the hit target. */
 export interface CheckboxCardRootProps extends Omit<PrimitivePropsWithRef<'label'>, 'defaultChecked'> {
     /**
-     * Checked state, for controlled usage. Pair with `onCheckedChange`.
+     * Checked state, for controlled usage, paired with `onCheckedChange`.
      * @default undefined — uncontrolled, tracks its own checked state internally.
      */
-    checked?: boolean;
+    checked?: boolean | undefined;
     /**
      * Initial checked state, for uncontrolled usage, seeding the first render.
      * @default false — the card starts unselected.
      */
-    defaultChecked?: boolean;
+    defaultChecked?: boolean | undefined;
     /**
      * Fires with the new checked state whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onCheckedChange?: (checked: boolean) => void;
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
     /**
      * Name on native checkbox input for form submission; input always exists,
      * making the card clickable.
      * @default undefined — the control is unnamed and contributes nothing to form data.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Value submitted with the control when checked.
      * @default 'on' — the same default the HTML checkbox itself uses.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Marks the control required for native form validation; an unchecked card blocks submission with `valueMissing`.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * Form ID for this card when rendered outside it; forwarded to input's
      * `form` attribute since root doesn't submit.
      * @default undefined — the card belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Disable control and remove from tab order; emit `data-disabled`.
-     * Card surface and keyboard can't change it.
+     * Disables the control, removes it from tab order, and emits `data-disabled`.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Freeze selection: control keeps tab stop, gains `aria-readonly`,
      * submits name/value; clicking and Space do nothing.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Marks the card invalid, exposed as `aria-invalid` on the control and `data-invalid` on the root.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
+    /**
+     * Size rung the skin scales the card by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
-/**
- * Derived checkbox-card props; no `asChild` (renders sibling parts).
- * Use headless `primitives/checkbox-card/CheckboxCardRoot` for that.
- */
+/** Derived checkbox-card props; no `asChild`, since the recipe renders sibling parts. */
 export interface CheckboxCardProps extends Omit<CheckboxCardRootProps, 'asChild'> {
     /**
-     * Card title line, rendered into derived label. Control names itself via
-     * `aria-labelledby`; ignored when `children` is given.
+     * Card title line, rendered into the derived label; ignored when `children` is given.
      * @default undefined — no label is rendered, and the control falls back to the card's whole text content.
      */
-    label?: React.ReactNode;
+    label?: React.ReactNode | undefined;
     /**
-     * Supporting copy under title, rendered into derived description.
-     * Joined to control's `aria-describedby`; ignored when `children` is given.
+     * Supporting copy under the title, rendered into the derived description; ignored when `children` is given.
      * @default undefined — no description is rendered.
      */
-    description?: React.ReactNode;
+    description?: React.ReactNode | undefined;
 }
 /** Props for the {@link CheckboxCardControl}, the real (visually hidden, still focusable) checkbox input. */
 export interface CheckboxCardControlProps extends Omit<PrimitivePropsWithRef<'input'>, 'checked' | 'defaultChecked' | 'type' | 'value'> {

package/dist/checkbox-group/CheckboxGroup.cjs

@@ -1 +1,2 @@
-"use strict";var ue=Object.create;var C=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var xe=(e,o)=>{for(var r in o)C(e,r,{get:o[r],enumerable:!0})},w=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of he(o))!ke.call(e,t)&&t!==r&&C(e,t,{get:()=>o[t],enumerable:!(a=fe(o,t))||a.enumerable});return e};var A=(e,o,r)=>(r=e!=null?ue(be(e)):{},w(o||!e||!e.__esModule?C(r,"default",{value:e,enumerable:!0}):r,e)),Ce=e=>w(C({},"__esModule",{value:!0}),e);var ge={};xe(ge,{CheckboxGroup:()=>N,CheckboxGroupItem:()=>u,CheckboxGroupProvider:()=>U,CheckboxGroupSelectAll:()=>oe,checkboxGroupItemId:()=>G,getSelectAllChecked:()=>X,useCheckboxGroupContext:()=>b});module.exports=Ce(ge);var c=A(require("react"),1),Y=require("../utils/composeRefs.cjs"),_=require("../utils/createContext.cjs"),z=require("../utils/formControl.cjs"),J=require("../utils/part.cjs"),K=require("../utils/primitive.cjs"),Q=require("../utils/useControllableState.cjs");var g=A(require("react"),1),B=require("../checkbox/Checkbox.cjs"),F=require("../utils/part.cjs");var $=require("react/jsx-runtime"),u=g.forwardRef(({value:e,disabled:o,...r},a)=>{let t=b("CheckboxGroupItem"),n=t.value.includes(e),p=t.disabled||o||!1,d=t.maxReached&&!n,i=r.id??G(t.baseId,e),{registerItem:f}=t;return g.useEffect(()=>f(e,p,i),[f,e,p,i]),(0,$.jsx)(B.Checkbox,{...r,id:i,checked:n,onCheckedChange:I=>t.toggleItem(e,I===!0),disabled:p,readOnly:t.readOnly,name:t.name,value:e,form:t.form,"aria-required":t.required||void 0,"aria-disabled":d||void 0,"data-value":e,"data-max-reached":d?"":void 0,"data-skdx-checkbox-group-item":"",...(0,F.skdxPart)("checkbox-group","item",r.className),ref:a})});u.displayName="CheckboxGroupItem";var V=require("react/jsx-runtime");function D({options:e=[]}){return e.map(o=>(0,V.jsx)(u,{value:o.value,disabled:o.disabled,children:o.label},o.value))}var E=require("react/jsx-runtime"),[U,b]=(0,_.createSafeContext)("CheckboxGroup");function W(e,o,r){let a=[];return c.Children.forEach(e,t=>{if(c.isValidElement(t)){if(t.type===u){let{value:n,disabled:p,id:d}=t.props;a.push({value:n,disabled:o||p||!1,id:d??G(r,n)});return}(t.type===c.Fragment||typeof t.type=="string")&&a.push(...W(t.props.children,o,r))}}),a}function G(e,o){return`${e}-${o.replace(/\s+/g,"-")}`}function X(e,o){return e.length>0&&e.every(r=>o.includes(r))?!0:e.some(r=>o.includes(r))?"indeterminate":!1}var N=c.forwardRef(({value:e,defaultValue:o,onValueChange:r,name:a,form:t,max:n,required:p=!1,disabled:d=!1,readOnly:i=!1,invalid:f=!1,options:I,children:re,...S},ce)=>{let v=c.useId(),q=re??D({options:I}),[R=[],h]=(0,Q.useControllableState)({prop:e,defaultProp:o??[],onChange:r}),[T,M]=c.useState([]),ae=c.useCallback((s,m,l)=>{let x={value:s,disabled:m,id:l};return M(P=>[...P,x]),()=>M(P=>P.filter(me=>me!==x))},[]),se=W(q,d,v),y=T.length>0?T:se,k=c.useMemo(()=>y.filter(s=>!s.disabled).map(s=>s.value),[y]),H=X(k,R),ne=n!==void 0&&R.length>=n,ie=c.useCallback((s,m)=>{i||h((l=[])=>m?l.includes(s)||n!==void 0&&l.length>=n?l:[...l,s]:l.filter(x=>x!==s))},[h,i,n]),L=c.useRef(null),de=(0,Y.useComposedRefs)(ce,L);(0,z.useFormReset)(L,()=>h(o??[]),t);let O=H===!0,le=c.useCallback(()=>{i||h((s=[])=>O?s.filter(m=>!k.includes(m)):[...s,...k.filter(m=>!s.includes(m))].slice(0,n??Number.POSITIVE_INFINITY))},[h,O,k,i,n]),pe=y.map(s=>s.id).join(" ");return(0,E.jsx)(U,{name:a,form:t,value:R,disabled:d,readOnly:i,required:p,max:n,maxReached:ne,baseId:v,itemIds:pe,selectAllChecked:H,toggleItem:ie,toggleAll:le,registerItem:ae,children:(0,E.jsx)(K.Primitive.div,{role:"group","aria-invalid":f?!0:void 0,"data-disabled":d?"":void 0,"data-readonly":i?"":void 0,"data-invalid":f?"":void 0,...S,...(0,J.skdxPart)("checkbox-group","root",S.className),ref:de,children:q})})});N.displayName="CheckboxGroup";var Z=A(require("react"),1),j=require("../checkbox/Checkbox.cjs"),ee=require("../utils/part.cjs");var te=require("react/jsx-runtime"),oe=Z.forwardRef(({disabled:e,...o},r)=>{let a=b("CheckboxGroupSelectAll");return(0,te.jsx)(j.Checkbox,{...o,checked:a.selectAllChecked,onCheckedChange:()=>a.toggleAll(),disabled:a.disabled||e||!1,readOnly:a.readOnly,"aria-controls":a.itemIds||void 0,...(0,ee.skdxPart)("checkbox-group","select-all",o.className),ref:r})});oe.displayName="CheckboxGroupSelectAll";0&&(module.exports={CheckboxGroup,CheckboxGroupItem,CheckboxGroupProvider,CheckboxGroupSelectAll,checkboxGroupItemId,getSelectAllChecked,useCheckboxGroupContext});
+'use client';
+"use strict";var he=Object.create;var C=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var Ge=(e,o)=>{for(var t in o)C(e,t,{get:o[t],enumerable:!0})},M=(e,o,t,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of ke(o))!Ce.call(e,r)&&r!==t&&C(e,r,{get:()=>o[r],enumerable:!(c=be(o,r))||c.enumerable});return e};var $=(e,o,t)=>(t=e!=null?he(xe(e)):{},M(o||!e||!e.__esModule?C(t,"default",{value:e,enumerable:!0}):t,e)),ge=e=>M(C({},"__esModule",{value:!0}),e);var Ie={};Ge(Ie,{CheckboxGroup:()=>S,CheckboxGroupItem:()=>m,CheckboxGroupProvider:()=>X,CheckboxGroupSelectAll:()=>te,checkboxGroupItemId:()=>G,getSelectAllChecked:()=>j,useCheckboxGroupContext:()=>b});module.exports=ge(Ie);var a=$(require("react"),1),w=require("../utils/composeRefs.cjs"),D=require("../utils/createContext.cjs"),J=require("../utils/formControl.cjs"),K=require("../utils/part.cjs"),Q=require("../utils/primitive.cjs"),U=require("../utils/recipeAxis.cjs"),W=require("../utils/useControllableState.cjs");var Y=require("../checkbox/Checkbox.cjs");var B=$(require("react"),1),H=require("../checkbox/Checkbox.cjs"),L=require("../utils/part.cjs");var V=require("react/jsx-runtime"),m=({value:e,disabled:o,ref:t,...c})=>{let r=b("CheckboxGroupItem"),s=r.value.includes(e),l=r.disabled||o||!1,d=r.maxReached&&!s,i=c.id??G(r.baseId,e),{registerItem:f}=r;return B.useEffect(()=>f(e,l,i),[f,e,l,i]),(0,V.jsx)(H.Checkbox,{...c,id:i,checked:s,onCheckedChange:I=>r.toggleItem(e,I===!0),disabled:l,readOnly:r.readOnly,name:r.name,value:e,form:r.form,"aria-required":r.required||void 0,"aria-disabled":d||void 0,"data-value":e,"data-max-reached":d?"":void 0,"data-skdx-checkbox-group-item":"",...(0,L.skdxPart)("checkbox-group","item",c.className),ref:t})};m.displayName="CheckboxGroupItem";var g=require("react/jsx-runtime");function _({options:e=[],size:o}){return e.map(t=>(0,g.jsxs)(m,{value:t.value,disabled:t.disabled,size:o,children:[(0,g.jsx)(Y.CheckboxAnatomy,{}),t.label]},t.value))}var N=require("react/jsx-runtime"),[X,b]=(0,D.createSafeContext)("CheckboxGroup");function Z(e,o,t){let c=[];return a.Children.forEach(e,r=>{if(a.isValidElement(r)){if(r.type===m){let{value:s,disabled:l,id:d}=r.props;c.push({value:s,disabled:o||l||!1,id:d??G(t,s)});return}(r.type===a.Fragment||typeof r.type=="string")&&c.push(...Z(r.props.children,o,t))}}),c}function G(e,o){return`${e}-${o.replace(/\s+/g,"-")}`}function j(e,o){return e.length>0&&e.every(t=>o.includes(t))?!0:e.some(t=>o.includes(t))?"indeterminate":!1}var S=({value:e,defaultValue:o,onValueChange:t,name:c,form:r,max:s,required:l=!1,disabled:d=!1,readOnly:i=!1,invalid:f=!1,options:I,children:ce,size:ae,ref:ne,...y})=>{let E=a.useId(),v=ce??_({options:I,size:(0,U.recipeAxis)(ae,y,"data-size")}),[R=[],h]=(0,W.useControllableState)({prop:e,defaultProp:o??[],onChange:t}),[q,z]=a.useState([]),se=a.useCallback((n,u,p)=>{let x={value:n,disabled:u,id:p};return z(A=>[...A,x]),()=>z(A=>A.filter(fe=>fe!==x))},[]),ie=Z(v,d,E),P=q.length>0?q:ie,k=a.useMemo(()=>P.filter(n=>!n.disabled).map(n=>n.value),[P]),O=j(k,R),de=s!==void 0&&R.length>=s,pe=a.useCallback((n,u)=>{i||h((p=[])=>u?p.includes(n)||s!==void 0&&p.length>=s?p:[...p,n]:p.filter(x=>x!==n))},[h,i,s]),F=a.useRef(null),le=(0,w.useComposedRefs)(ne,F);(0,J.useFormReset)(F,()=>h(o??[]),r);let T=O===!0,ue=a.useCallback(()=>{i||h((n=[])=>T?n.filter(u=>!k.includes(u)):[...n,...k.filter(u=>!n.includes(u))].slice(0,s??Number.POSITIVE_INFINITY))},[h,T,k,i,s]),me=P.map(n=>n.id).join(" ");return(0,N.jsx)(X,{name:c,form:r,value:R,disabled:d,readOnly:i,required:l,max:s,maxReached:de,baseId:E,itemIds:me,selectAllChecked:O,toggleItem:pe,toggleAll:ue,registerItem:se,children:(0,N.jsx)(Q.Primitive.div,{role:"group","aria-invalid":f?!0:void 0,"data-disabled":d?"":void 0,"data-readonly":i?"":void 0,"data-invalid":f?"":void 0,...y,"data-size":void 0,...(0,K.skdxPart)("checkbox-group","root",y.className),ref:le,children:v})})};S.displayName="CheckboxGroup";var ee=require("../checkbox/Checkbox.cjs"),oe=require("../utils/part.cjs");var re=require("react/jsx-runtime"),te=({disabled:e,ref:o,...t})=>{let c=b("CheckboxGroupSelectAll");return(0,re.jsx)(ee.Checkbox,{...t,checked:c.selectAllChecked,onCheckedChange:()=>c.toggleAll(),disabled:c.disabled||e||!1,readOnly:c.readOnly,"aria-controls":c.itemIds||void 0,...(0,oe.skdxPart)("checkbox-group","select-all",t.className),ref:o})};te.displayName="CheckboxGroupSelectAll";0&&(module.exports={CheckboxGroup,CheckboxGroupItem,CheckboxGroupProvider,CheckboxGroupSelectAll,checkboxGroupItemId,getSelectAllChecked,useCheckboxGroupContext});

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

@@ -1,37 +1,21 @@
 import * as React from 'react';
 import type { CheckedState } from '../checkbox/types.cjs';
 import type { CheckboxGroupContextValue, CheckboxGroupProps } from './types.cjs';
-export declare const CheckboxGroupProvider: {
-    (props: CheckboxGroupContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useCheckboxGroupContext: (consumerName: string) => CheckboxGroupContextValue;
+export declare const CheckboxGroupProvider: React.FC<CheckboxGroupContextValue & {
+    children: React.ReactNode;
+}>, useCheckboxGroupContext: (consumerName: string) => CheckboxGroupContextValue;
 /**
- * DOM id for one item so select-all can name them in `aria-controls`.
- * Derived from group id + item value (not a separate useId) so the parent
- * can compute it without waiting for registration. Whitespace collapsed (aria-controls is space-separated).
+ * DOM id for one item, derived from the group id and item value, so select-all can name it in `aria-controls`.
  * @internal
  */
 export declare function checkboxGroupItemId(baseId: string, value: string): string;
 /**
- * Select-all tri-state from enabled items only (disabled items aren't counted,
- * else the parent would be permanently indeterminate). Empty group reads unchecked.
+ * Select-all tri-state derived from enabled items only; an empty group reads unchecked.
  * @internal
  */
 export declare function getSelectAllChecked(enabledValues: string[], value: string[]): CheckedState;
 /**
- * Multi-selection checkbox group. Renders `role="group"` with `data-disabled`/
- * `aria-invalid`/`data-invalid`. Each {@link CheckboxGroupItem} is its own tab stop
- * (no roving tabindex like RadioGroup). Items are `Checkbox`es for tri-state and keyboard behavior.
- *
- * `required` sets `aria-required` on items only (native constraint validation can't express
- * "at least one"). Wrap in {@link Fieldset} for server validation. `readOnly` keeps items
- * focusable with `aria-readonly` but prevents changes. `max` caps selections,
- * marking unchecked items `aria-disabled` / `data-max-reached` while keeping them focusable.
- *
- * Without `children`, derives items from `options`. With children, renders them verbatim;
- * manual composition is the only way to add `CheckboxGroupSelectAll`.
+ * Multi-selection checkbox group rendering `role="group"` with `data-disabled`/`aria-invalid`/`data-invalid`, each item its own tab stop.
  *
  * @example
  * ```tsx
@@ -44,4 +28,7 @@ export declare function getSelectAllChecked(enabledValues: string[], value: stri
  * </Fieldset>
  * ```
  */
-export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CheckboxGroup: {
+    ({ value: valueProp, defaultValue, onValueChange, name, form, max, required, disabled, readOnly, invalid, options, children, size, ref: forwardedRef, ...props }: CheckboxGroupProps): React.ReactNode;
+    displayName: string;
+};