@skdx/react 0.27.0 → 0.29.0

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

@@ -0,0 +1,22 @@
+/**
+ * Primitives for `CheckboxCard` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { CheckboxCardRoot, CheckboxCardControl, CheckboxCardIndicator, CheckboxCardLabel, CheckboxCardDescription } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot name="addons" value="backups">
+ *   <CheckboxCardControl />
+ *   <img src="/backups.svg" alt="" />
+ *   <CheckboxCardIndicator>✓</CheckboxCardIndicator>
+ *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
+ *   <CheckboxCardDescription>Nightly snapshots, kept for 30 days.</CheckboxCardDescription>
+ * </CheckboxCardRoot>
+ * ```
+ */
+export { CheckboxCardRoot } from './CheckboxCard.js';
+export { CheckboxCardControl } from './CheckboxCardControl.js';
+export { CheckboxCardIndicator } from './CheckboxCardIndicator.js';
+export { CheckboxCardLabel } from './CheckboxCardLabel.js';
+export { CheckboxCardDescription } from './CheckboxCardDescription.js';
+export type { CheckboxCardRootProps, CheckboxCardControlProps, CheckboxCardIndicatorProps, CheckboxCardLabelProps, CheckboxCardDescriptionProps, } from './types.js';

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

@@ -1,12 +1,18 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. Not part of the public API. */
+/** Root `<label>` plus FormValidityHandle methods, assigned additively. */
+export type CheckboxCardHandle = HTMLLabelElement & FormValidityHandle;
+/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. */
 export interface CheckboxCardContextValue {
     checked: boolean;
     disabled: boolean;
+    readOnly: boolean;
     required: boolean;
     invalid: boolean;
     name: string | undefined;
     value: string;
+    form: string | undefined;
     labelId: string;
     descriptionId: string;
     /** Whether a `CheckboxCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
@@ -17,55 +23,79 @@ export interface CheckboxCardContextValue {
     setHasDescription: (present: boolean) => void;
     onCheckedChange: (checked: boolean) => void;
 }
-/** Props for the {@link CheckboxCard} root, the `<label>` whose whole surface is the hit target. */
-export interface CheckboxCardProps extends Omit<PrimitivePropsWithRef<'label'>, 'defaultChecked'> {
+/** 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 put on the underlying native `<input type="checkbox">` for form
-     * submission. Unlike `Checkbox`, the input always exists here (it is what
-     * makes the card clickable), so omitting `name` only means the value is not
-     * submitted.
+     * 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, so an unchecked
-     * card blocks submission with `valueMissing`.
+     * Marks the control required for native form validation; an unchecked card blocks submission with `valueMissing`.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
-     * Disables the control, so neither the card surface nor the keyboard can
-     * change it and it leaves the tab order. Also emitted as `data-disabled` on
-     * the root.
+     * 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 | undefined;
+    /**
+     * Disables the control, removes it from tab order, and emits `data-disabled`.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Freeze selection: control keeps tab stop, gains `aria-readonly`,
+     * submits name/value; clicking and Space do nothing.
      * @default false
      */
-    disabled?: boolean;
+    readOnly?: boolean | undefined;
     /**
-     * Marks the card invalid, exposed as `aria-invalid` on the control and
-     * `data-invalid` on the root so the card can paint an error state.
+     * 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`, since the recipe renders sibling parts. */
+export interface CheckboxCardProps extends Omit<CheckboxCardRootProps, 'asChild'> {
+    /**
+     * 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 | undefined;
+    /**
+     * Supporting copy under the title, rendered into the derived description; ignored when `children` is given.
+     * @default undefined — no description is rendered.
+     */
+    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,12 +1,18 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. Not part of the public API. */
+/** Root `<label>` plus FormValidityHandle methods, assigned additively. */
+export type CheckboxCardHandle = HTMLLabelElement & FormValidityHandle;
+/** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. */
 export interface CheckboxCardContextValue {
     checked: boolean;
     disabled: boolean;
+    readOnly: boolean;
     required: boolean;
     invalid: boolean;
     name: string | undefined;
     value: string;
+    form: string | undefined;
     labelId: string;
     descriptionId: string;
     /** Whether a `CheckboxCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
@@ -17,55 +23,79 @@ export interface CheckboxCardContextValue {
     setHasDescription: (present: boolean) => void;
     onCheckedChange: (checked: boolean) => void;
 }
-/** Props for the {@link CheckboxCard} root, the `<label>` whose whole surface is the hit target. */
-export interface CheckboxCardProps extends Omit<PrimitivePropsWithRef<'label'>, 'defaultChecked'> {
+/** 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 put on the underlying native `<input type="checkbox">` for form
-     * submission. Unlike `Checkbox`, the input always exists here (it is what
-     * makes the card clickable), so omitting `name` only means the value is not
-     * submitted.
+     * 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, so an unchecked
-     * card blocks submission with `valueMissing`.
+     * Marks the control required for native form validation; an unchecked card blocks submission with `valueMissing`.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
-     * Disables the control, so neither the card surface nor the keyboard can
-     * change it and it leaves the tab order. Also emitted as `data-disabled` on
-     * the root.
+     * 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 | undefined;
+    /**
+     * Disables the control, removes it from tab order, and emits `data-disabled`.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Freeze selection: control keeps tab stop, gains `aria-readonly`,
+     * submits name/value; clicking and Space do nothing.
      * @default false
      */
-    disabled?: boolean;
+    readOnly?: boolean | undefined;
     /**
-     * Marks the card invalid, exposed as `aria-invalid` on the control and
-     * `data-invalid` on the root so the card can paint an error state.
+     * 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`, since the recipe renders sibling parts. */
+export interface CheckboxCardProps extends Omit<CheckboxCardRootProps, 'asChild'> {
+    /**
+     * 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 | undefined;
+    /**
+     * Supporting copy under the title, rendered into the derived description; ignored when `children` is given.
+     * @default undefined — no description is rendered.
+     */
+    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 $=Object.create;var k=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var te=(e,o)=>{for(var t in o)k(e,t,{get:o[t],enumerable:!0})},v=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of j(o))!oe.call(e,r)&&r!==t&&k(e,r,{get:()=>o[r],enumerable:!(a=V(o,r))||a.enumerable});return e};var C=(e,o,t)=>(t=e!=null?$(ee(e)):{},v(o||!e||!e.__esModule?k(t,"default",{value:e,enumerable:!0}):t,e)),re=e=>v(k({},"__esModule",{value:!0}),e);var ce={};te(ce,{CheckboxGroup:()=>D,CheckboxGroupItem:()=>G,CheckboxGroupProvider:()=>L,CheckboxGroupSelectAll:()=>y,getSelectAllChecked:()=>B,useCheckboxGroupContext:()=>m});module.exports=re(ce);var s=C(require("react"),1),E=require("../utils/composeRefs.cjs"),w=require("../utils/createContext.cjs"),N=require("../utils/formControl.cjs"),M=require("../utils/part.cjs"),T=require("../utils/primitive.cjs"),H=require("../utils/useControllableState.cjs"),g=require("react/jsx-runtime"),[L,m]=(0,w.createSafeContext)("CheckboxGroup");function B(e,o){return e.length>0&&e.every(t=>o.includes(t))?!0:e.some(t=>o.includes(t))?"indeterminate":!1}var D=s.forwardRef(({value:e,defaultValue:o,onValueChange:t,name:a,required:r=!1,disabled:h=!1,invalid:n=!1,...p},f)=>{let[R=[],u]=(0,H.useControllableState)({prop:e,defaultProp:o??[],onChange:t}),[I,P]=s.useState([]),W=s.useCallback((c,l)=>{let i={value:c,disabled:l};return P(d=>[...d,i]),()=>P(d=>d.filter(_=>_!==i))},[]),b=s.useMemo(()=>I.filter(c=>!c.disabled).map(c=>c.value),[I]),A=B(b,R),X=s.useCallback((c,l)=>{u((i=[])=>l?i.includes(c)?i:[...i,c]:i.filter(d=>d!==c))},[u]),S=s.useRef(null),Y=(0,E.useComposedRefs)(f,S);(0,N.useFormReset)(S,()=>u(o??[]));let q=A===!0,Z=s.useCallback(()=>{u((c=[])=>q?c.filter(l=>!b.includes(l)):[...c,...b.filter(l=>!c.includes(l))])},[u,q,b]);return(0,g.jsx)(L,{name:a,value:R,disabled:h,required:r,selectAllChecked:A,toggleItem:X,toggleAll:Z,registerItem:W,children:(0,g.jsx)(T.Primitive.div,{role:"group","aria-invalid":n?!0:void 0,"data-disabled":h?"":void 0,"data-invalid":n?"":void 0,...p,...(0,M.skdxPart)("checkbox-group","root",p.className),ref:Y})})});D.displayName="CheckboxGroup";var x=C(require("react"),1),F=require("../checkbox/Checkbox.cjs"),O=require("../utils/part.cjs");var z=require("react/jsx-runtime"),G=x.forwardRef(({value:e,disabled:o,...t},a)=>{let r=m("CheckboxGroupItem"),h=r.value.includes(e),n=r.disabled||o||!1,{registerItem:p}=r;return x.useEffect(()=>p(e,n),[p,e,n]),(0,z.jsx)(F.Checkbox,{checked:h,onCheckedChange:f=>r.toggleItem(e,f===!0),disabled:n,name:r.name,value:e,"aria-required":r.required||void 0,"data-value":e,"data-skdx-checkbox-group-item":"",...t,...(0,O.skdxPart)("checkbox-group","item",t.className),ref:a})});G.displayName="CheckboxGroupItem";var J=C(require("react"),1),K=require("../checkbox/Checkbox.cjs"),Q=require("../utils/part.cjs");var U=require("react/jsx-runtime"),y=J.forwardRef(({disabled:e,...o},t)=>{let a=m("CheckboxGroupSelectAll");return(0,U.jsx)(K.Checkbox,{checked:a.selectAllChecked,onCheckedChange:()=>a.toggleAll(),disabled:a.disabled||e||!1,...o,...(0,Q.skdxPart)("checkbox-group","select-all",o.className),ref:t})});y.displayName="CheckboxGroupSelectAll";0&&(module.exports={CheckboxGroup,CheckboxGroupItem,CheckboxGroupProvider,CheckboxGroupSelectAll,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,43 +1,34 @@
 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;
 /**
- * The select-all parent's tri-state, derived from the *enabled* items only:
- * a disabled item can neither be checked nor cleared by the parent, so
- * counting it would leave the parent permanently indeterminate. An empty
- * group reads as unchecked rather than "all of nothing is checked".
- *
+ * 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 derived from enabled items only; an empty group reads unchecked.
  * @internal
  */
 export declare function getSelectAllChecked(enabledValues: string[], value: string[]): CheckedState;
 /**
- * A multi-selection group of checkboxes owning one `string[]` value. Renders
- * `role="group"` with `data-disabled`, and `aria-invalid`/`data-invalid`
- * when `invalid` is set — the role a {@link Fieldset} discovers as its
- * control, which is how the group gets its `<legend>` name and its error
- * wiring. `required` rides on the items instead (see below).
- *
- * Unlike `RadioGroup` there is no roving tabindex: every
- * {@link CheckboxGroupItem} is its own tab stop, as native checkboxes are.
- * Items and {@link CheckboxGroupSelectAll} are `Checkbox`es, so all the
- * tri-state, keyboard and hidden-input behavior comes from there.
+ * Multi-selection checkbox group rendering `role="group"` with `data-disabled`/`aria-invalid`/`data-invalid`, each item its own tab stop.
  *
  * @example
  * ```tsx
  * <Fieldset>
  *   <FieldLabel>Notifications</FieldLabel>
- *   <CheckboxGroup name="notify" defaultValue={['email']}>
- *     <CheckboxGroupSelectAll>All</CheckboxGroupSelectAll>
- *     <CheckboxGroupItem value="email">Email</CheckboxGroupItem>
- *     <CheckboxGroupItem value="sms">SMS</CheckboxGroupItem>
- *   </CheckboxGroup>
+ *   <CheckboxGroup name="notify" defaultValue={['email']} options={[
+ *     { value: 'email', label: 'Email' },
+ *     { value: 'sms', label: 'SMS' },
+ *   ]} />
  * </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;
+};

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

@@ -1,43 +1,34 @@
 import * as React from 'react';
 import type { CheckedState } from '../checkbox/types.js';
 import type { CheckboxGroupContextValue, CheckboxGroupProps } from './types.js';
-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;
 /**
- * The select-all parent's tri-state, derived from the *enabled* items only:
- * a disabled item can neither be checked nor cleared by the parent, so
- * counting it would leave the parent permanently indeterminate. An empty
- * group reads as unchecked rather than "all of nothing is checked".
- *
+ * 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 derived from enabled items only; an empty group reads unchecked.
  * @internal
  */
 export declare function getSelectAllChecked(enabledValues: string[], value: string[]): CheckedState;
 /**
- * A multi-selection group of checkboxes owning one `string[]` value. Renders
- * `role="group"` with `data-disabled`, and `aria-invalid`/`data-invalid`
- * when `invalid` is set — the role a {@link Fieldset} discovers as its
- * control, which is how the group gets its `<legend>` name and its error
- * wiring. `required` rides on the items instead (see below).
- *
- * Unlike `RadioGroup` there is no roving tabindex: every
- * {@link CheckboxGroupItem} is its own tab stop, as native checkboxes are.
- * Items and {@link CheckboxGroupSelectAll} are `Checkbox`es, so all the
- * tri-state, keyboard and hidden-input behavior comes from there.
+ * Multi-selection checkbox group rendering `role="group"` with `data-disabled`/`aria-invalid`/`data-invalid`, each item its own tab stop.
  *
  * @example
  * ```tsx
  * <Fieldset>
  *   <FieldLabel>Notifications</FieldLabel>
- *   <CheckboxGroup name="notify" defaultValue={['email']}>
- *     <CheckboxGroupSelectAll>All</CheckboxGroupSelectAll>
- *     <CheckboxGroupItem value="email">Email</CheckboxGroupItem>
- *     <CheckboxGroupItem value="sms">SMS</CheckboxGroupItem>
- *   </CheckboxGroup>
+ *   <CheckboxGroup name="notify" defaultValue={['email']} options={[
+ *     { value: 'email', label: 'Email' },
+ *     { value: 'sms', label: 'SMS' },
+ *   ]} />
  * </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;
+};

package/dist/checkbox-group/CheckboxGroup.js

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

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

@@ -0,0 +1,9 @@
+import type * as React from 'react';
+import type { CheckboxGroupItemProps, CheckboxGroupOption } from './types.cjs';
+/**
+ * @internal The anatomy a {@link CheckboxGroup} draws from `options`, one `CheckboxGroupItem` per entry holding its glyph and label text.
+ */
+export declare function CheckboxGroupAnatomy({ options, size, }: {
+    options?: CheckboxGroupOption[] | undefined;
+    size?: CheckboxGroupItemProps['size'] | undefined;
+}): React.ReactNode;

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

@@ -0,0 +1,9 @@
+import type * as React from 'react';
+import type { CheckboxGroupItemProps, CheckboxGroupOption } from './types.js';
+/**
+ * @internal The anatomy a {@link CheckboxGroup} draws from `options`, one `CheckboxGroupItem` per entry holding its glyph and label text.
+ */
+export declare function CheckboxGroupAnatomy({ options, size, }: {
+    options?: CheckboxGroupOption[] | undefined;
+    size?: CheckboxGroupItemProps['size'] | undefined;
+}): React.ReactNode;

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

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { CheckboxGroupItemProps } from './types.cjs';
 /**
- * One checkbox in a {@link CheckboxGroup}. It *is* a {@link Checkbox} — the
- * role, `aria-checked`, `data-state`, the Space/Enter handling and the
- * hidden `<input type="checkbox">` all come from there — with `checked`
- * driven by whether its `value` is in the group's value, and `name` taken
- * from the group so every checked item submits under the same key.
+ * One checkbox in a {@link CheckboxGroup}, wrapping {@link Checkbox} with `checked` driven by whether its `value` is in the group's value.
  *
  * @example
  * ```tsx
@@ -15,4 +11,7 @@ import type { CheckboxGroupItemProps } from './types.cjs';
  * </CheckboxGroupItem>
  * ```
  */
-export declare const CheckboxGroupItem: React.ForwardRefExoticComponent<Omit<CheckboxGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CheckboxGroupItem: {
+    ({ value, disabled: disabledProp, ref: forwardedRef, ...props }: CheckboxGroupItemProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { CheckboxGroupItemProps } from './types.js';
 /**
- * One checkbox in a {@link CheckboxGroup}. It *is* a {@link Checkbox} — the
- * role, `aria-checked`, `data-state`, the Space/Enter handling and the
- * hidden `<input type="checkbox">` all come from there — with `checked`
- * driven by whether its `value` is in the group's value, and `name` taken
- * from the group so every checked item submits under the same key.
+ * One checkbox in a {@link CheckboxGroup}, wrapping {@link Checkbox} with `checked` driven by whether its `value` is in the group's value.
  *
  * @example
  * ```tsx
@@ -15,4 +11,7 @@ import type { CheckboxGroupItemProps } from './types.js';
  * </CheckboxGroupItem>
  * ```
  */
-export declare const CheckboxGroupItem: React.ForwardRefExoticComponent<Omit<CheckboxGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CheckboxGroupItem: {
+    ({ value, disabled: disabledProp, ref: forwardedRef, ...props }: CheckboxGroupItemProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,15 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxGroupSelectAllProps } from './types.cjs';
 /**
- * The tri-state "select all" parent of a {@link CheckboxGroup}: checked when
- * every enabled item is checked, `aria-checked="mixed"` when only some are,
- * unchecked when none are. Clicking it checks every enabled item, or clears
- * them when they are already all checked.
- *
- * It lives *inside* the group — it needs the same item registry the items
- * feed, and inside the group is also where a screen reader announces it as
- * part of the set. It carries no `value` and no `name`, so it renders no
- * hidden input and is never submitted.
+ * Tri-state parent checkbox: checked when every enabled item is checked, indeterminate when some are, unchecked otherwise.
  *
  * @example
  * ```tsx
@@ -19,4 +11,7 @@ import type { CheckboxGroupSelectAllProps } from './types.cjs';
  * </CheckboxGroupSelectAll>
  * ```
  */
-export declare const CheckboxGroupSelectAll: React.ForwardRefExoticComponent<Omit<CheckboxGroupSelectAllProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CheckboxGroupSelectAll: {
+    ({ disabled: disabledProp, ref: forwardedRef, ...props }: CheckboxGroupSelectAllProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,15 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxGroupSelectAllProps } from './types.js';
 /**
- * The tri-state "select all" parent of a {@link CheckboxGroup}: checked when
- * every enabled item is checked, `aria-checked="mixed"` when only some are,
- * unchecked when none are. Clicking it checks every enabled item, or clears
- * them when they are already all checked.
- *
- * It lives *inside* the group — it needs the same item registry the items
- * feed, and inside the group is also where a screen reader announces it as
- * part of the set. It carries no `value` and no `name`, so it renders no
- * hidden input and is never submitted.
+ * Tri-state parent checkbox: checked when every enabled item is checked, indeterminate when some are, unchecked otherwise.
  *
  * @example
  * ```tsx
@@ -19,4 +11,7 @@ import type { CheckboxGroupSelectAllProps } from './types.js';
  * </CheckboxGroupSelectAll>
  * ```
  */
-export declare const CheckboxGroupSelectAll: React.ForwardRefExoticComponent<Omit<CheckboxGroupSelectAllProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CheckboxGroupSelectAll: {
+    ({ disabled: disabledProp, ref: forwardedRef, ...props }: CheckboxGroupSelectAllProps): React.ReactNode;
+    displayName: string;
+};

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

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

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

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

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

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

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

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