@skdx/react 0.28.0 → 0.29.0

package/dist/checkbox/Checkbox.d.cts

@@ -1,19 +1,43 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.cjs';
 import type { CheckboxContextValue, CheckboxProps, CheckedState } from './types.cjs';
-export declare const CheckboxProvider: {
-    (props: CheckboxContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useCheckboxContext: (consumerName: string) => CheckboxContextValue;
+export declare const CheckboxProvider: React.FC<CheckboxContextValue & {
+    children: React.ReactNode;
+}>, useCheckboxContext: (consumerName: string) => CheckboxContextValue;
 /** @internal Maps a {@link CheckedState} to the `data-state` string (`'checked'` / `'unchecked'` / `'indeterminate'`). */
-export declare function getState(checked: CheckedState): "indeterminate" | "checked" | "unchecked";
+export declare function getState(checked: CheckedState): 'indeterminate' | 'checked' | 'unchecked';
+/**
+ * @internal The ARIA and `data-*` state a checkbox-style control publishes on its root.
+ * Shared with `Switch`, whose boolean state is a {@link CheckedState} that never goes indeterminate.
+ */
+export declare function checkableStateAttrs(checked: CheckedState, disabled: boolean, readOnly: boolean, invalid: boolean, required: boolean | undefined): {
+    'aria-checked': boolean | 'mixed';
+    'aria-required': true | undefined;
+    'aria-readonly': true | undefined;
+    'aria-invalid': true | undefined;
+    'data-state': 'indeterminate' | 'checked' | 'unchecked';
+    'data-disabled': '' | undefined;
+    'data-readonly': '' | undefined;
+    'data-invalid': '' | undefined;
+};
 /**
- * Tri-state checkbox, renders `role="checkbox"` with `aria-checked` (`'mixed'` when indeterminate).
- * Toggles checked / unchecked on click or Space; indeterminate moves to checked.
- * **readOnly** freezes state without freezing control; keeps tab stop, ignores interactions.
- * With `name`, renders hidden native input for form submission.
- * Forwarded ref carries `checkValidity()` / `reportValidity()`.
+ * @internal The controlled/uncontrolled state, form-validity handle and reset listener a
+ * checkbox-style control needs, shared by `Checkbox` and `Switch`.
+ */
+export declare function useCheckableControl<T extends CheckedState>({ checked: checkedProp, defaultChecked, onCheckedChange, form, ref, }: {
+    checked?: T | undefined;
+    defaultChecked: T;
+    onCheckedChange?: ((checked: T) => void) | undefined;
+    form?: string | undefined;
+    ref?: React.Ref<HTMLButtonElement & FormValidityHandle> | undefined;
+}): {
+    checked: T;
+    setChecked: (next: T) => void;
+    rootRef: React.RefObject<HTMLButtonElement | null>;
+    hiddenInputRef: React.RefObject<HTMLInputElement | null>;
+};
+/**
+ * Tri-state checkbox that renders `role="checkbox"` with `aria-checked` (`'mixed'` when indeterminate), toggling on click or Space.
  *
  * @example
  * ```tsx
@@ -22,4 +46,9 @@ export declare function getState(checked: CheckedState): "indeterminate" | "chec
  * </Checkbox>
  * ```
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Checkbox: {
+    ({ checked: checkedProp, defaultChecked, onCheckedChange, required, name, value, form, disabled, readOnly, invalid, indicator, size, children, ref: forwardedRef, ...props }: Omit<CheckboxProps, "ref"> & {
+        ref?: React.Ref<HTMLButtonElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/checkbox/Checkbox.d.ts

@@ -1,19 +1,43 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.js';
 import type { CheckboxContextValue, CheckboxProps, CheckedState } from './types.js';
-export declare const CheckboxProvider: {
-    (props: CheckboxContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useCheckboxContext: (consumerName: string) => CheckboxContextValue;
+export declare const CheckboxProvider: React.FC<CheckboxContextValue & {
+    children: React.ReactNode;
+}>, useCheckboxContext: (consumerName: string) => CheckboxContextValue;
 /** @internal Maps a {@link CheckedState} to the `data-state` string (`'checked'` / `'unchecked'` / `'indeterminate'`). */
-export declare function getState(checked: CheckedState): "indeterminate" | "checked" | "unchecked";
+export declare function getState(checked: CheckedState): 'indeterminate' | 'checked' | 'unchecked';
+/**
+ * @internal The ARIA and `data-*` state a checkbox-style control publishes on its root.
+ * Shared with `Switch`, whose boolean state is a {@link CheckedState} that never goes indeterminate.
+ */
+export declare function checkableStateAttrs(checked: CheckedState, disabled: boolean, readOnly: boolean, invalid: boolean, required: boolean | undefined): {
+    'aria-checked': boolean | 'mixed';
+    'aria-required': true | undefined;
+    'aria-readonly': true | undefined;
+    'aria-invalid': true | undefined;
+    'data-state': 'indeterminate' | 'checked' | 'unchecked';
+    'data-disabled': '' | undefined;
+    'data-readonly': '' | undefined;
+    'data-invalid': '' | undefined;
+};
 /**
- * Tri-state checkbox, renders `role="checkbox"` with `aria-checked` (`'mixed'` when indeterminate).
- * Toggles checked / unchecked on click or Space; indeterminate moves to checked.
- * **readOnly** freezes state without freezing control; keeps tab stop, ignores interactions.
- * With `name`, renders hidden native input for form submission.
- * Forwarded ref carries `checkValidity()` / `reportValidity()`.
+ * @internal The controlled/uncontrolled state, form-validity handle and reset listener a
+ * checkbox-style control needs, shared by `Checkbox` and `Switch`.
+ */
+export declare function useCheckableControl<T extends CheckedState>({ checked: checkedProp, defaultChecked, onCheckedChange, form, ref, }: {
+    checked?: T | undefined;
+    defaultChecked: T;
+    onCheckedChange?: ((checked: T) => void) | undefined;
+    form?: string | undefined;
+    ref?: React.Ref<HTMLButtonElement & FormValidityHandle> | undefined;
+}): {
+    checked: T;
+    setChecked: (next: T) => void;
+    rootRef: React.RefObject<HTMLButtonElement | null>;
+    hiddenInputRef: React.RefObject<HTMLInputElement | null>;
+};
+/**
+ * Tri-state checkbox that renders `role="checkbox"` with `aria-checked` (`'mixed'` when indeterminate), toggling on click or Space.
  *
  * @example
  * ```tsx
@@ -22,4 +46,9 @@ export declare function getState(checked: CheckedState): "indeterminate" | "chec
  * </Checkbox>
  * ```
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Checkbox: {
+    ({ checked: checkedProp, defaultChecked, onCheckedChange, required, name, value, form, disabled, readOnly, invalid, indicator, size, children, ref: forwardedRef, ...props }: Omit<CheckboxProps, "ref"> & {
+        ref?: React.Ref<HTMLButtonElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/checkbox/Checkbox.js

@@ -1 +1,2 @@
-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};
+'use client';
+import*as u from"react";import{appearanceAttrs as F}from"../utils/appearance.js";import{createSafeContext as w}from"../utils/createContext.js";import{useFormReset as A,useFormValidityHandle as B}from"../utils/formControl.js";import{HiddenInput as D}from"../utils/hiddenInput.js";import{skdxPart as q}from"../utils/part.js";import{composeEventHandlers as R,Primitive as G}from"../utils/primitive.js";import{useControllableState as K}from"../utils/useControllableState.js";import{Glyph as b}from"../utils/Glyph.js";import{skdxPart as L}from"../utils/part.js";import{Primitive as M}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var k=({forceMount:e,ref:t,...o})=>{let n=l("CheckboxIndicator");return e||n.checked!==!1?V(M.span,{"aria-hidden":"true","data-state":s(n.checked),"data-disabled":n.disabled?"":void 0,...o,...L("checkbox","indicator",o.className),ref:t}):null};k.displayName="CheckboxIndicator";import{jsx as h}from"react/jsx-runtime";function g(){let{checked:e}=l("CheckboxIndicator");return e==="indeterminate"?h(b,{name:"dash"}):h(b,{name:"check"})}function C({indicator:e}){return h(k,{children:e??h(g,{})})}import{jsx as p,jsxs as Q}from"react/jsx-runtime";function O(e){let t=u.useRef(null);return u.useEffect(()=>{t.current&&(t.current.indeterminate=e==="indeterminate")},[e]),t}var[J,l]=w("Checkbox");function s(e){return e==="indeterminate"?"indeterminate":e?"checked":"unchecked"}function X(e,t,o,n,r){return{"aria-checked":e==="indeterminate"?"mixed":e,"aria-required":r||void 0,"aria-readonly":o||void 0,"aria-invalid":n?!0:void 0,"data-state":s(e),"data-disabled":t?"":void 0,"data-readonly":o?"":void 0,"data-invalid":n?"":void 0}}function z({checked:e,defaultChecked:t,onCheckedChange:o,form:n,ref:r}){let[m=t,c]=K({prop:e,defaultProp:t,onChange:o}),a=O(m),d=u.useRef(null);return B(r,d,a),A(d,()=>c(t),n),{checked:m,setChecked:c,rootRef:d,hiddenInputRef:a}}var y=({checked:e,defaultChecked:t=!1,onCheckedChange:o,required:n,name:r,value:m="on",form:c,disabled:a=!1,readOnly:d=!1,invalid:I=!1,indicator:v,size:H,children:P,ref:T,...f})=>{let{checked:i,setChecked:S,rootRef:E,hiddenInputRef:N}=z({checked:e,defaultChecked:t,onCheckedChange:o,form:c,ref:T});return Q(J,{checked:i,disabled:a,children:[p(G.button,{type:"button",role:"checkbox",...X(i,a,d,I,n),disabled:a,...f,...F({size:H},f),...q("checkbox","root",f.className),ref:E,onClick:R(f.onClick,()=>{d||S(i==="indeterminate"?!0:!i)}),onKeyDown:R(f.onKeyDown,x=>{x.key==="Enter"&&x.preventDefault()}),children:P??p(C,{indicator:v})}),r?p(D,{ref:N,type:"checkbox",name:r,value:m,form:c,checked:i==="indeterminate"?!1:i,required:n,disabled:a}):null]})};y.displayName="Checkbox";export{y as Checkbox,C as CheckboxAnatomy,k as CheckboxIndicator,J as CheckboxProvider,X as checkableStateAttrs,s as getState,z as useCheckableControl,l as useCheckboxContext};

package/dist/checkbox/CheckboxAnatomy.d.cts

@@ -1,10 +1,8 @@
 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.
- *
+ * The anatomy a {@link Checkbox} draws when given no children: an Indicator holding `indicator`, or the default check/dash glyph.
  * @internal
  */
-export declare function CheckboxAnatomy({ indicator }: {
-    indicator?: React.ReactNode;
+export declare function CheckboxAnatomy({ indicator, }: {
+    indicator?: React.ReactNode | undefined;
 }): React.JSX.Element;

package/dist/checkbox/CheckboxAnatomy.d.ts

@@ -1,10 +1,8 @@
 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.
- *
+ * The anatomy a {@link Checkbox} draws when given no children: an Indicator holding `indicator`, or the default check/dash glyph.
  * @internal
  */
-export declare function CheckboxAnatomy({ indicator }: {
-    indicator?: React.ReactNode;
+export declare function CheckboxAnatomy({ indicator, }: {
+    indicator?: React.ReactNode | undefined;
 }): React.JSX.Element;

package/dist/checkbox/CheckboxIndicator.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxIndicatorProps } from './types.cjs';
 /**
  * Visual mark (e.g. check or dash icon) inside a {@link Checkbox}, mirroring its state. Unmounts when unchecked unless `forceMount` is set.
@@ -10,4 +10,7 @@ import type { CheckboxIndicatorProps } from './types.cjs';
  * </Checkbox>
  * ```
  */
-export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxIndicator: {
+    ({ forceMount, ref: forwardedRef, ...props }: CheckboxIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/checkbox/CheckboxIndicator.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxIndicatorProps } from './types.js';
 /**
  * Visual mark (e.g. check or dash icon) inside a {@link Checkbox}, mirroring its state. Unmounts when unchecked unless `forceMount` is set.
@@ -10,4 +10,7 @@ import type { CheckboxIndicatorProps } from './types.js';
  * </Checkbox>
  * ```
  */
-export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const CheckboxIndicator: {
+    ({ forceMount, ref: forwardedRef, ...props }: CheckboxIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/checkbox/types.d.cts

@@ -4,14 +4,10 @@ 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)`.
+ * The `Checkbox` root `<button>` plus its constraint-validation methods, assigned onto the same node so existing `HTMLButtonElement` ref usage keeps working.
  */
 export type CheckboxHandle = HTMLButtonElement & FormValidityHandle;
-/** @internal Shared state distributed from {@link Checkbox} to its {@link CheckboxIndicator} via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Checkbox} to its {@link CheckboxIndicator} via context. */
 export interface CheckboxContextValue {
     checked: CheckedState;
     disabled: boolean;
@@ -22,66 +18,62 @@ export interface CheckboxProps extends Omit<PrimitivePropsWithRef<'button'>, 'de
      * Checked state, for controlled usage. Pair with `onCheckedChange`.
      * @default undefined — uncontrolled, tracks its own checked state internally.
      */
-    checked?: CheckedState;
+    checked?: CheckedState | undefined;
     /**
      * Initial checked state, for uncontrolled usage.
      * @default false
      */
-    defaultChecked?: CheckedState;
+    defaultChecked?: CheckedState | undefined;
     /**
      * Fires with the new checked state whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onCheckedChange?: (checked: CheckedState) => void;
+    onCheckedChange?: ((checked: CheckedState) => void) | undefined;
     /**
      * Marks the underlying hidden input as required for native form validation.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * Name for native form participation via a hidden input.
      * @default undefined — no hidden input rendered.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Value submitted with the hidden input when checked.
      * @default 'on'
      */
-    value?: string;
+    value?: string | undefined;
     /**
-     * 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.
+     * Id of the `<form>` that owns this checkbox when it renders outside it, forwarded to the hidden input's `form` attribute.
      * @default undefined — the checkbox belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * 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.
+     * Freezes the checked state without freezing the control: keeps focus and `aria-readonly`/`data-readonly`, and ignores click and Space.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Disables the checkbox and excludes it from the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Renders a derived `CheckboxIndicator` holding this content, in place of
-     * the default check glyph. Ignored when `children` is given.
+     * 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;
+    indicator?: React.ReactNode | undefined;
+    /**
+     * Size rung the skin scales the box by, mirrored to `data-size` on the root.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
 /** Props for the {@link CheckboxIndicator}, the visual mark shown when checked or indeterminate. */
 export interface CheckboxIndicatorProps extends PrimitivePropsWithRef<'span'> {
@@ -89,5 +81,5 @@ export interface CheckboxIndicatorProps extends PrimitivePropsWithRef<'span'> {
      * Keep mounted regardless of state (for exit animations).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }

package/dist/checkbox/types.d.ts

@@ -4,14 +4,10 @@ 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)`.
+ * The `Checkbox` root `<button>` plus its constraint-validation methods, assigned onto the same node so existing `HTMLButtonElement` ref usage keeps working.
  */
 export type CheckboxHandle = HTMLButtonElement & FormValidityHandle;
-/** @internal Shared state distributed from {@link Checkbox} to its {@link CheckboxIndicator} via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Checkbox} to its {@link CheckboxIndicator} via context. */
 export interface CheckboxContextValue {
     checked: CheckedState;
     disabled: boolean;
@@ -22,66 +18,62 @@ export interface CheckboxProps extends Omit<PrimitivePropsWithRef<'button'>, 'de
      * Checked state, for controlled usage. Pair with `onCheckedChange`.
      * @default undefined — uncontrolled, tracks its own checked state internally.
      */
-    checked?: CheckedState;
+    checked?: CheckedState | undefined;
     /**
      * Initial checked state, for uncontrolled usage.
      * @default false
      */
-    defaultChecked?: CheckedState;
+    defaultChecked?: CheckedState | undefined;
     /**
      * Fires with the new checked state whenever it changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onCheckedChange?: (checked: CheckedState) => void;
+    onCheckedChange?: ((checked: CheckedState) => void) | undefined;
     /**
      * Marks the underlying hidden input as required for native form validation.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * Name for native form participation via a hidden input.
      * @default undefined — no hidden input rendered.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Value submitted with the hidden input when checked.
      * @default 'on'
      */
-    value?: string;
+    value?: string | undefined;
     /**
-     * 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.
+     * Id of the `<form>` that owns this checkbox when it renders outside it, forwarded to the hidden input's `form` attribute.
      * @default undefined — the checkbox belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * 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.
+     * Freezes the checked state without freezing the control: keeps focus and `aria-readonly`/`data-readonly`, and ignores click and Space.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Marks the checkbox as invalid, exposed as `aria-invalid`/`data-invalid`.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Disables the checkbox and excludes it from the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Renders a derived `CheckboxIndicator` holding this content, in place of
-     * the default check glyph. Ignored when `children` is given.
+     * 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;
+    indicator?: React.ReactNode | undefined;
+    /**
+     * Size rung the skin scales the box by, mirrored to `data-size` on the root.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
 /** Props for the {@link CheckboxIndicator}, the visual mark shown when checked or indeterminate. */
 export interface CheckboxIndicatorProps extends PrimitivePropsWithRef<'span'> {
@@ -89,5 +81,5 @@ export interface CheckboxIndicatorProps extends PrimitivePropsWithRef<'span'> {
      * Keep mounted regardless of state (for exit animations).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }

package/dist/checkbox-card/CheckboxCard.cjs

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

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

@@ -1,47 +1,11 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.cjs';
 import type { CheckboxCardContextValue, CheckboxCardProps, CheckboxCardRootProps } from './types.cjs';
-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;
+};