@skdx/react 0.28.0 → 0.30.0

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

@@ -1,37 +1,21 @@
 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;
 /**
- * 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;
+};

package/dist/checkbox-group/CheckboxGroup.js

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

@@ -1,12 +1,9 @@
 import type * as React from 'react';
-import type { CheckboxGroupOption } from './types.cjs';
+import type { CheckboxGroupItemProps, CheckboxGroupOption } from './types.cjs';
 /**
- * The anatomy a {@link CheckboxGroup} draws from `options`: one `CheckboxGroupItem` per
- * entry. No `CheckboxGroupSelectAll` — its label is copy only the consumer can write, so it
- * stays a primitive.
- *
- * @internal
+ * @internal The anatomy a {@link CheckboxGroup} draws from `options`, one `CheckboxGroupItem` per entry holding its glyph and label text.
  */
-export declare function CheckboxGroupAnatomy({ options, }: {
-    options?: CheckboxGroupOption[];
+export declare function CheckboxGroupAnatomy({ options, size, }: {
+    options?: CheckboxGroupOption[] | undefined;
+    size?: CheckboxGroupItemProps['size'] | undefined;
 }): React.ReactNode;

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

@@ -1,12 +1,9 @@
 import type * as React from 'react';
-import type { CheckboxGroupOption } from './types.js';
+import type { CheckboxGroupItemProps, CheckboxGroupOption } from './types.js';
 /**
- * The anatomy a {@link CheckboxGroup} draws from `options`: one `CheckboxGroupItem` per
- * entry. No `CheckboxGroupSelectAll` — its label is copy only the consumer can write, so it
- * stays a primitive.
- *
- * @internal
+ * @internal The anatomy a {@link CheckboxGroup} draws from `options`, one `CheckboxGroupItem` per entry holding its glyph and label text.
  */
-export declare function CheckboxGroupAnatomy({ options, }: {
-    options?: CheckboxGroupOption[];
+export declare function CheckboxGroupAnatomy({ options, size, }: {
+    options?: CheckboxGroupOption[] | undefined;
+    size?: CheckboxGroupItemProps['size'] | undefined;
 }): React.ReactNode;

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

@@ -1,18 +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.
- *
- * The group's wiring is applied **after** the caller's props, not before.
- * Spreading last let a consumer pass `checked`, `name` or `aria-required` on an
- * individual item and quietly break the group's own model — an item-level
- * `required` in particular contradicts the group's stated rule that the hidden
- * inputs are never marked required. The props the type still accepts are the
- * two the contract declares (`value`, `disabled`) plus ordinary DOM attributes.
+ * One checkbox in a {@link CheckboxGroup}, wrapping {@link Checkbox} with `checked` driven by whether its `value` is in the group's value.
  *
  * @example
  * ```tsx
@@ -22,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,18 +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.
- *
- * The group's wiring is applied **after** the caller's props, not before.
- * Spreading last let a consumer pass `checked`, `name` or `aria-required` on an
- * individual item and quietly break the group's own model — an item-level
- * `required` in particular contradicts the group's stated rule that the hidden
- * inputs are never marked required. The props the type still accepts are the
- * two the contract declares (`value`, `disabled`) plus ordinary DOM attributes.
+ * One checkbox in a {@link CheckboxGroup}, wrapping {@link Checkbox} with `checked` driven by whether its `value` is in the group's value.
  *
  * @example
  * ```tsx
@@ -22,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,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxGroupSelectAllProps } from './types.cjs';
 /**
- * Tri-state parent: checked (all enabled items checked), indeterminate (some),
- * or unchecked. Lives inside group for registry access and screen reader
- * announcement. Needs `aria-controls` naming governed items and accessible name.
+ * Tri-state parent checkbox: checked when every enabled item is checked, indeterminate when some are, unchecked otherwise.
  *
  * @example
  * ```tsx
@@ -13,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,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { CheckboxGroupSelectAllProps } from './types.js';
 /**
- * Tri-state parent: checked (all enabled items checked), indeterminate (some),
- * or unchecked. Lives inside group for registry access and screen reader
- * announcement. Needs `aria-controls` naming governed items and accessible name.
+ * Tri-state parent checkbox: checked when every enabled item is checked, indeterminate when some are, unchecked otherwise.
  *
  * @example
  * ```tsx
@@ -13,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/types.d.cts

@@ -1,18 +1,18 @@
 import type * as React from 'react';
 import type { CheckboxProps, CheckedState } from '../checkbox/types.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. Not part of the public API. */
+/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. */
 export interface CheckboxGroupItemEntry {
     value: string;
     disabled: boolean;
     /** The item's DOM id — the consumer's own when they set one — for the select-all's `aria-controls`. */
     id: string;
 }
-/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. */
 export interface CheckboxGroupContextValue {
-    name?: string;
+    name?: string | undefined;
     /** The group's `form` id, forwarded to every item's hidden input. */
-    form?: string;
+    form?: string | undefined;
     value: string[];
     disabled: boolean;
     /** Group-level `readOnly`, carried by each item as `aria-readonly`. */
@@ -20,7 +20,7 @@ export interface CheckboxGroupContextValue {
     /** Group-level `required`, carried by each item as `aria-required`. */
     required: boolean;
     /** Cap on how many items may be checked, or `undefined` for no cap. */
-    max?: number;
+    max?: number | undefined;
     /** Whether the cap is reached, so unchecked items announce `aria-disabled` without leaving the tab order. */
     maxReached: boolean;
     /** The group's `useId`, from which an item with no id of its own derives one. */
@@ -46,108 +46,92 @@ export interface CheckboxGroupOption {
      * Disables this item alone, and excludes it from select-all.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for the {@link CheckboxGroup} root. */
 export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
     /**
-     * The checkboxes the group renders, one derived `CheckboxGroupItem` each. Ignored when
-     * `children` is given, which switches to full manual composition.
+     * The checkboxes the group renders, one derived `CheckboxGroupItem` per entry, ignored when `children` is given.
      * @default undefined — nothing is derived; compose the items as `children`.
      */
-    options?: CheckboxGroupOption[];
+    options?: CheckboxGroupOption[] | undefined;
     /**
-     * Checked item values, for controlled usage. Pair with `onValueChange`.
+     * Checked item values for controlled usage, paired with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string[];
+    value?: string[] | undefined;
     /**
      * Initially checked item values, for uncontrolled usage.
      * @default [] — nothing checked.
      */
-    defaultValue?: string[];
+    defaultValue?: string[] | undefined;
     /**
      * Fires with the new value array whenever the selection changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string[]) => void;
+    onValueChange?: ((value: string[]) => void) | undefined;
     /**
      * Name for native form participation: each item renders a hidden input
      * under this name, so `formData.getAll(name)` returns every checked value.
      * @default undefined — no hidden inputs rendered.
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Marks the group as required — at least one item must be checked. Exposed
-     * as `aria-required` on every {@link CheckboxGroupItem}, *not* on the
-     * `role="group"` root: `aria-required` is not a global ARIA attribute and
-     * `role="group"` does not support it. The items' hidden inputs stay
-     * un-required — marking them would demand every box — so the "at least
-     * one" rule itself is a `Fieldset` validator's job.
+     * Marks the group as required — at least one item must be checked — exposed as `aria-required` on every {@link CheckboxGroupItem} rather than the `role="group"` root.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
-     * Id of the `<form>` that owns this group, for a group rendered outside it —
-     * inside a `Dialog`'s portal, for instance. Forwarded to every item's hidden
-     * input.
+     * Id of the `<form>` that owns this group, forwarded to every item's hidden input, for a group rendered outside that form.
      * @default undefined — the group belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * Disables every item in the group, and the select-all parent.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Freezes the selection without freezing the group: every item and the
-     * select-all keep their tab stops and gain `aria-readonly` (the
-     * `role="group"` root may not carry it, the same split `required` makes), the
-     * root gains `data-readonly`, and Space and click change nothing. Nothing
-     * gains `aria-disabled`, and the hidden inputs keep submitting.
+     * Freezes the selection without freezing the group: every item keeps its tab stop and gains `aria-readonly`, and nothing responds to Space or click.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
-     * Caps how many items may be checked at once. At the cap, every *unchecked*
-     * item gains `aria-disabled="true"` and `data-max-reached` but keeps its tab
-     * stop and its native enabled state, so a user can still focus it and hear
-     * why it will not toggle; checked items are untouched, so the way back under
-     * the cap is always reachable.
+     * Caps how many items may be checked at once; unchecked items past the cap gain `aria-disabled` and `data-max-reached` but keep their tab stop.
      * @default undefined — no cap.
      */
-    max?: number;
+    max?: number | undefined;
     /**
      * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
      * the `role="group"` root.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
+    /**
+     * Size rung the skin scales the boxes by, fed to every derived item.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
 /**
- * Props for a single {@link CheckboxGroupItem}. Group-level state like
- * `required`, `readOnly`, `invalid`, and `form` are omitted; only `value`,
- * `disabled`, and standard DOM attributes apply.
+ * Props for a single {@link CheckboxGroupItem}, omitting group-level state like `required`, `readOnly`, `invalid`, and `form`.
  */
 export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'onCheckedChange' | 'required' | 'readOnly' | 'invalid' | 'form'> {
     /** Unique identifier added to or removed from the group's `value`. */
     value: string;
     /**
-     * Disables this item alone, and excludes it from select-all: it is neither
-     * counted when deriving the parent's state nor changed when the parent is
-     * toggled.
+     * Disables this item alone, excluding it from select-all's counting and toggling.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /**
- * Props for the {@link CheckboxGroupSelectAll} tri-state parent. Takes only
- * `disabled` and standard DOM attributes; state is entirely derived from the group.
+ * Props for the {@link CheckboxGroupSelectAll} tri-state parent, taking only `disabled` since its state is entirely derived from the group.
  */
 export interface CheckboxGroupSelectAllProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'value' | 'onCheckedChange' | 'required' | 'readOnly' | 'invalid' | 'form'> {
     /**
      * Disables the parent alone; the group-level `disabled` also disables it.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

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

@@ -1,18 +1,18 @@
 import type * as React from 'react';
 import type { CheckboxProps, CheckedState } from '../checkbox/types.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. Not part of the public API. */
+/** @internal One registered {@link CheckboxGroupItem}, as the root sees it. */
 export interface CheckboxGroupItemEntry {
     value: string;
     disabled: boolean;
     /** The item's DOM id — the consumer's own when they set one — for the select-all's `aria-controls`. */
     id: string;
 }
-/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link CheckboxGroup} to its parts via context. */
 export interface CheckboxGroupContextValue {
-    name?: string;
+    name?: string | undefined;
     /** The group's `form` id, forwarded to every item's hidden input. */
-    form?: string;
+    form?: string | undefined;
     value: string[];
     disabled: boolean;
     /** Group-level `readOnly`, carried by each item as `aria-readonly`. */
@@ -20,7 +20,7 @@ export interface CheckboxGroupContextValue {
     /** Group-level `required`, carried by each item as `aria-required`. */
     required: boolean;
     /** Cap on how many items may be checked, or `undefined` for no cap. */
-    max?: number;
+    max?: number | undefined;
     /** Whether the cap is reached, so unchecked items announce `aria-disabled` without leaving the tab order. */
     maxReached: boolean;
     /** The group's `useId`, from which an item with no id of its own derives one. */
@@ -46,108 +46,92 @@ export interface CheckboxGroupOption {
      * Disables this item alone, and excludes it from select-all.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for the {@link CheckboxGroup} root. */
 export interface CheckboxGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
     /**
-     * The checkboxes the group renders, one derived `CheckboxGroupItem` each. Ignored when
-     * `children` is given, which switches to full manual composition.
+     * The checkboxes the group renders, one derived `CheckboxGroupItem` per entry, ignored when `children` is given.
      * @default undefined — nothing is derived; compose the items as `children`.
      */
-    options?: CheckboxGroupOption[];
+    options?: CheckboxGroupOption[] | undefined;
     /**
-     * Checked item values, for controlled usage. Pair with `onValueChange`.
+     * Checked item values for controlled usage, paired with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string[];
+    value?: string[] | undefined;
     /**
      * Initially checked item values, for uncontrolled usage.
      * @default [] — nothing checked.
      */
-    defaultValue?: string[];
+    defaultValue?: string[] | undefined;
     /**
      * Fires with the new value array whenever the selection changes, controlled or not.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string[]) => void;
+    onValueChange?: ((value: string[]) => void) | undefined;
     /**
      * Name for native form participation: each item renders a hidden input
      * under this name, so `formData.getAll(name)` returns every checked value.
      * @default undefined — no hidden inputs rendered.
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Marks the group as required — at least one item must be checked. Exposed
-     * as `aria-required` on every {@link CheckboxGroupItem}, *not* on the
-     * `role="group"` root: `aria-required` is not a global ARIA attribute and
-     * `role="group"` does not support it. The items' hidden inputs stay
-     * un-required — marking them would demand every box — so the "at least
-     * one" rule itself is a `Fieldset` validator's job.
+     * Marks the group as required — at least one item must be checked — exposed as `aria-required` on every {@link CheckboxGroupItem} rather than the `role="group"` root.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
-     * Id of the `<form>` that owns this group, for a group rendered outside it —
-     * inside a `Dialog`'s portal, for instance. Forwarded to every item's hidden
-     * input.
+     * Id of the `<form>` that owns this group, forwarded to every item's hidden input, for a group rendered outside that form.
      * @default undefined — the group belongs to its nearest ancestor `<form>`, if any.
      */
-    form?: string;
+    form?: string | undefined;
     /**
      * Disables every item in the group, and the select-all parent.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
-     * Freezes the selection without freezing the group: every item and the
-     * select-all keep their tab stops and gain `aria-readonly` (the
-     * `role="group"` root may not carry it, the same split `required` makes), the
-     * root gains `data-readonly`, and Space and click change nothing. Nothing
-     * gains `aria-disabled`, and the hidden inputs keep submitting.
+     * Freezes the selection without freezing the group: every item keeps its tab stop and gains `aria-readonly`, and nothing responds to Space or click.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
-     * Caps how many items may be checked at once. At the cap, every *unchecked*
-     * item gains `aria-disabled="true"` and `data-max-reached` but keeps its tab
-     * stop and its native enabled state, so a user can still focus it and hear
-     * why it will not toggle; checked items are untouched, so the way back under
-     * the cap is always reachable.
+     * Caps how many items may be checked at once; unchecked items past the cap gain `aria-disabled` and `data-max-reached` but keep their tab stop.
      * @default undefined — no cap.
      */
-    max?: number;
+    max?: number | undefined;
     /**
      * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
      * the `role="group"` root.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
+    /**
+     * Size rung the skin scales the boxes by, fed to every derived item.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
 }
 /**
- * Props for a single {@link CheckboxGroupItem}. Group-level state like
- * `required`, `readOnly`, `invalid`, and `form` are omitted; only `value`,
- * `disabled`, and standard DOM attributes apply.
+ * Props for a single {@link CheckboxGroupItem}, omitting group-level state like `required`, `readOnly`, `invalid`, and `form`.
  */
 export interface CheckboxGroupItemProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'onCheckedChange' | 'required' | 'readOnly' | 'invalid' | 'form'> {
     /** Unique identifier added to or removed from the group's `value`. */
     value: string;
     /**
-     * Disables this item alone, and excludes it from select-all: it is neither
-     * counted when deriving the parent's state nor changed when the parent is
-     * toggled.
+     * Disables this item alone, excluding it from select-all's counting and toggling.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /**
- * Props for the {@link CheckboxGroupSelectAll} tri-state parent. Takes only
- * `disabled` and standard DOM attributes; state is entirely derived from the group.
+ * Props for the {@link CheckboxGroupSelectAll} tri-state parent, taking only `disabled` since its state is entirely derived from the group.
  */
 export interface CheckboxGroupSelectAllProps extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'name' | 'value' | 'onCheckedChange' | 'required' | 'readOnly' | 'invalid' | 'form'> {
     /**
      * Disables the parent alone; the group-level `disabled` also disables it.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }

package/dist/clipboard/Clipboard.cjs

@@ -1 +1,2 @@
-"use strict";var j=Object.create;var s=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var re=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},A=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of te(t))!ae.call(e,a)&&a!==o&&s(e,a,{get:()=>t[a],enumerable:!(i=ee(t,a))||i.enumerable});return e};var c=(e,t,o)=>(o=e!=null?j(oe(e)):{},A(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),ie=e=>A(s({},"__esModule",{value:!0}),e);var le={};re(le,{Clipboard:()=>T,ClipboardIndicator:()=>p,ClipboardInput:()=>b,ClipboardProvider:()=>U,ClipboardTrigger:()=>u,useClipboardContext:()=>d});module.exports=ie(le);var r=c(require("react"),1),J=require("../utils/createContext.cjs"),R=require("../utils/liveAnnouncer.cjs"),K=require("../utils/part.cjs"),Q=require("../utils/primitive.cjs"),P=require("../utils/useCallbackRef.cjs");var M=c(require("react"),1),O=require("../utils/part.cjs"),F=require("../utils/presence.cjs"),L=require("../utils/primitive.cjs");var w=require("react/jsx-runtime"),p=M.forwardRef(({match:e="copied",...t},o)=>{let a=d("ClipboardIndicator").state;return(0,w.jsx)(F.Presence,{present:a===e,children:(0,w.jsx)(L.Primitive.span,{"aria-hidden":!0,"data-state":a,...t,...(0,O.skdxPart)("clipboard","indicator",t.className),ref:o})})});p.displayName="ClipboardIndicator";var V=c(require("react"),1),q=require("../utils/part.cjs"),m=require("../utils/primitive.cjs");var B=require("react/jsx-runtime"),b=V.forwardRef((e,t)=>{let o=d("ClipboardInput");return(0,B.jsx)(m.Primitive.input,{type:"text","data-state":o.state,"data-disabled":o.disabled?"":void 0,"aria-disabled":o.disabled||void 0,...e,value:o.value,readOnly:!0,...(0,q.skdxPart)("clipboard","input",e.className),ref:t,onFocus:(0,m.composeEventHandlers)(e.onFocus,i=>i.currentTarget.select())})});b.displayName="ClipboardInput";var D=c(require("react"),1),G=require("../utils/part.cjs"),f=require("../utils/primitive.cjs");var W=require("react/jsx-runtime"),u=D.forwardRef(({disabled:e,...t},o)=>{let i=d("ClipboardTrigger"),a=i.disabled||e||!1;return(0,W.jsx)(f.Primitive.button,{type:"button","data-state":i.state,"data-disabled":a?"":void 0,disabled:a,...t,...(0,G.skdxPart)("clipboard","trigger",t.className),ref:o,onClick:(0,f.composeEventHandlers)(t.onClick,()=>i.copy())})});u.displayName="ClipboardTrigger";var n=require("react/jsx-runtime"),z=({label:e,showInput:t,inputLabel:o})=>(0,n.jsxs)(n.Fragment,{children:[t?(0,n.jsx)(b,{"aria-label":o}):null,(0,n.jsxs)(u,{"aria-label":e,children:[(0,n.jsx)(p,{match:"idle",children:"Copy"}),(0,n.jsx)(p,{match:"copied",children:"Copied"})]})]});var C=require("react/jsx-runtime"),[U,d]=(0,J.createSafeContext)("Clipboard");function ne(e){let t=document.activeElement,o=document.createElement("textarea");o.value=e,o.setAttribute("readonly",""),o.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(o);try{if(o.select(),typeof document.execCommand!="function"||!document.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{o.remove(),t?.focus()}}async function de(e){if(navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(e);return}catch{}ne(e)}var T=r.forwardRef(({value:e,timeout:t=2e3,onCopySuccess:o,onCopyError:i,disabled:a=!1,copiedLabel:y="Copied to clipboard",errorLabel:h="Copy failed",label:X="Copy",showInput:Y=!1,inputLabel:Z="Value to copy",children:_,...I},$)=>{let[E,k]=r.useState("idle"),x=r.useRef(void 0),g=r.useRef(null),H=(0,P.useCallbackRef)(o),N=(0,P.useCallbackRef)(i);r.useEffect(()=>()=>clearTimeout(x.current),[]);let S=r.useCallback(()=>{if(a)return;let l=v=>{k(v),clearTimeout(x.current),t!==null&&(x.current=setTimeout(()=>k("idle"),t))};de(e).then(()=>{l("copied"),y&&(0,R.announce)(y),H(e)},v=>{l("error"),h&&(0,R.announce)(h,"assertive"),N(v)})},[a,e,t,y,h,H,N]);return r.useImperativeHandle($,()=>{let l={copy:S};return g.current?Object.assign(g.current,l):l}),(0,C.jsx)(U,{value:e,state:E,disabled:a,copy:S,children:(0,C.jsx)(Q.Primitive.div,{"data-state":E,"data-disabled":a?"":void 0,...I,...(0,K.skdxPart)("clipboard","root",I.className),ref:g,children:_??(0,C.jsx)(z,{label:X,showInput:Y,inputLabel:Z})})})});T.displayName="Clipboard";0&&(module.exports={Clipboard,ClipboardIndicator,ClipboardInput,ClipboardProvider,ClipboardTrigger,useClipboardContext});
+'use client';
+"use strict";var _=Object.create;var c=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var oe=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},S=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of j(o))!te.call(e,r)&&r!==t&&c(e,r,{get:()=>o[r],enumerable:!(a=$(o,r))||a.enumerable});return e};var re=(e,o,t)=>(t=e!=null?_(ee(e)):{},S(o||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),ae=e=>S(c({},"__esModule",{value:!0}),e);var de={};oe(de,{Clipboard:()=>I,ClipboardIndicator:()=>p,ClipboardInput:()=>m,ClipboardProvider:()=>z,ClipboardTrigger:()=>b,useClipboardContext:()=>d});module.exports=ae(de);var i=re(require("react"),1),X=require("../utils/appearance.cjs"),q=require("../utils/createContext.cjs"),P=require("../utils/liveAnnouncer.cjs"),B=require("../utils/part.cjs"),W=require("../utils/primitive.cjs"),T=require("../utils/useCallbackRef.cjs");var A=require("../utils/part.cjs"),D=require("../utils/presence.cjs"),O=require("../utils/primitive.cjs");var h=require("react/jsx-runtime"),p=({match:e="copied",ref:o,...t})=>{let r=d("ClipboardIndicator").state;return(0,h.jsx)(D.Presence,{present:r===e,children:(0,h.jsx)(O.Primitive.span,{"aria-hidden":!0,"data-state":r,...t,...(0,A.skdxPart)("clipboard","indicator",t.className),ref:o})})};p.displayName="ClipboardIndicator";var F=require("../utils/part.cjs"),s=require("../utils/primitive.cjs");var V=require("react/jsx-runtime"),m=({ref:e,...o})=>{let t=d("ClipboardInput");return(0,V.jsx)(s.Primitive.input,{type:"text","data-state":t.state,"data-disabled":t.disabled?"":void 0,"aria-disabled":t.disabled||void 0,...o,value:t.value,readOnly:!0,...(0,F.skdxPart)("clipboard","input",o.className),ref:e,onFocus:(0,s.composeEventHandlers)(o.onFocus,a=>a.currentTarget.select())})};m.displayName="ClipboardInput";var J=require("../utils/part.cjs"),f=require("../utils/primitive.cjs");var L=require("react/jsx-runtime"),b=({disabled:e,ref:o,...t})=>{let a=d("ClipboardTrigger"),r=a.disabled||e||!1;return(0,L.jsx)(f.Primitive.button,{type:"button","data-state":a.state,"data-disabled":r?"":void 0,disabled:r,...t,...(0,J.skdxPart)("clipboard","trigger",t.className),ref:o,onClick:(0,f.composeEventHandlers)(t.onClick,()=>a.copy())})};b.displayName="ClipboardTrigger";var n=require("react/jsx-runtime"),M=({label:e,showInput:o,inputLabel:t})=>(0,n.jsxs)(n.Fragment,{children:[o?(0,n.jsx)(m,{"aria-label":t}):null,(0,n.jsxs)(b,{"aria-label":e,children:[(0,n.jsx)(p,{match:"idle",children:"Copy"}),(0,n.jsx)(p,{match:"copied",children:"Copied"}),(0,n.jsx)(p,{match:"error",children:"Error"})]})]});var u=require("react/jsx-runtime"),[z,d]=(0,q.createSafeContext)("Clipboard");function ie(e){let o=document.activeElement,t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:-9999px;opacity:0;",document.body.appendChild(t);let a=document;try{if(t.select(),typeof a.execCommand!="function"||!a.execCommand("copy"))throw new Error('[skandadx] `document.execCommand("copy")` is unavailable or was rejected.')}finally{t.remove(),o?.focus()}}async function ne(e){if(navigator.clipboard?.writeText)try{await navigator.clipboard.writeText(e);return}catch{}ie(e)}var I=({value:e,timeout:o=2e3,onCopySuccess:t,onCopyError:a,disabled:r=!1,copiedLabel:C="Copied to clipboard",errorLabel:y="Copy failed",label:G="Copy",showInput:K=!1,inputLabel:Q="Value to copy",children:U,ref:Y,size:Z,...x})=>{let[w,E]=i.useState("idle"),g=i.useRef(void 0),v=i.useRef(null),N=(0,T.useCallbackRef)(t),k=(0,T.useCallbackRef)(a);i.useEffect(()=>()=>clearTimeout(g.current),[]);let H=i.useCallback(()=>{if(r)return;let l=R=>{E(R),clearTimeout(g.current),o!==null&&(g.current=setTimeout(()=>E("idle"),o))};ne(e).then(()=>{l("copied"),C&&(0,P.announce)(C),N(e)},R=>{l("error"),y&&(0,P.announce)(y,"assertive"),k(R)})},[r,e,o,C,y,N,k]);return i.useImperativeHandle(Y,()=>{let l={copy:H};return v.current?Object.assign(v.current,l):l}),(0,u.jsx)(z,{value:e,state:w,disabled:r,copy:H,children:(0,u.jsx)(W.Primitive.div,{"data-state":w,"data-disabled":r?"":void 0,...x,...(0,X.appearanceAttrs)({size:Z},x),...(0,B.skdxPart)("clipboard","root",x.className),ref:v,children:U??(0,u.jsx)(M,{label:G,showInput:K,inputLabel:Q})})})};I.displayName="Clipboard";0&&(module.exports={Clipboard,ClipboardIndicator,ClipboardInput,ClipboardProvider,ClipboardTrigger,useClipboardContext});