@skdx/react 0.26.0 → 0.28.0

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

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

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

@@ -1,22 +1,17 @@
 import * as React from 'react';
 import type { CheckboxCardIndicatorProps } from './types.cjs';
 /**
- * The decorative check mark (or empty box) drawn on a {@link CheckboxCard}.
- * Mirrors the card's `data-state` and `data-disabled`.
- *
- * Unlike `CheckboxIndicator` this stays mounted when unchecked, because on a
- * card the indicator is the *box*, not just the tick — unmounting it would
- * collapse the card's layout on every deselect. It is `aria-hidden`: the real
- * `<input>` already announces the checked state, and a second copy would make
- * a screen reader say it twice.
+ * Decorative check mark on {@link CheckboxCard} — stays mounted when unchecked (indicator is the box, not just tick). `aria-hidden` (real input announces state).
  *
  * @example
  * ```tsx
- * <CheckboxCard defaultChecked>
+ * import { CheckboxCardRoot, CheckboxCardControl, CheckboxCardIndicator, CheckboxCardLabel } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot defaultChecked>
  *   <CheckboxCardControl />
  *   <CheckboxCardIndicator>✓</CheckboxCardIndicator>
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
  * ```
  */
 export declare const CheckboxCardIndicator: React.ForwardRefExoticComponent<Omit<CheckboxCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,22 +1,17 @@
 import * as React from 'react';
 import type { CheckboxCardIndicatorProps } from './types.js';
 /**
- * The decorative check mark (or empty box) drawn on a {@link CheckboxCard}.
- * Mirrors the card's `data-state` and `data-disabled`.
- *
- * Unlike `CheckboxIndicator` this stays mounted when unchecked, because on a
- * card the indicator is the *box*, not just the tick — unmounting it would
- * collapse the card's layout on every deselect. It is `aria-hidden`: the real
- * `<input>` already announces the checked state, and a second copy would make
- * a screen reader say it twice.
+ * Decorative check mark on {@link CheckboxCard} — stays mounted when unchecked (indicator is the box, not just tick). `aria-hidden` (real input announces state).
  *
  * @example
  * ```tsx
- * <CheckboxCard defaultChecked>
+ * import { CheckboxCardRoot, CheckboxCardControl, CheckboxCardIndicator, CheckboxCardLabel } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot defaultChecked>
  *   <CheckboxCardControl />
  *   <CheckboxCardIndicator>✓</CheckboxCardIndicator>
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
  * ```
  */
 export declare const CheckboxCardIndicator: React.ForwardRefExoticComponent<Omit<CheckboxCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import type { CheckboxCardLabelProps } from './types.cjs';
 /**
- * The card's title line, and the control's accessible name via
- * `aria-labelledby`.
+ * The card's title line and the control's `aria-labelledby` target.
  *
- * Renders a `<span>`, not a `<label>`: the card root is already the label, and
- * nesting a second one is invalid HTML. It registers itself with the root on
- * mount so the control only points `aria-labelledby` here while this part
- * exists — omit it and the control falls back to the native implicit label,
- * naming itself from the card's whole text content (description included).
+ * Renders `<span>` (not `<label>`—root is already the label). Registers on
+ * mount so the control's `aria-labelledby` points here; omit it and the control
+ * falls back to implicit labeling from the card's whole text.
  *
  * @example
  * ```tsx
- * <CheckboxCard>
+ * import { CheckboxCardControl, CheckboxCardLabel, CheckboxCardRoot } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot>
  *   <CheckboxCardControl />
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
  * ```
  */
 export declare const CheckboxCardLabel: React.ForwardRefExoticComponent<Omit<CheckboxCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import type { CheckboxCardLabelProps } from './types.js';
 /**
- * The card's title line, and the control's accessible name via
- * `aria-labelledby`.
+ * The card's title line and the control's `aria-labelledby` target.
  *
- * Renders a `<span>`, not a `<label>`: the card root is already the label, and
- * nesting a second one is invalid HTML. It registers itself with the root on
- * mount so the control only points `aria-labelledby` here while this part
- * exists — omit it and the control falls back to the native implicit label,
- * naming itself from the card's whole text content (description included).
+ * Renders `<span>` (not `<label>`—root is already the label). Registers on
+ * mount so the control's `aria-labelledby` points here; omit it and the control
+ * falls back to implicit labeling from the card's whole text.
  *
  * @example
  * ```tsx
- * <CheckboxCard>
+ * import { CheckboxCardControl, CheckboxCardLabel, CheckboxCardRoot } from '@skdx/react/primitives/checkbox-card';
+ *
+ * <CheckboxCardRoot>
  *   <CheckboxCardControl />
  *   <CheckboxCardLabel>Automated backups</CheckboxCardLabel>
- * </CheckboxCard>
+ * </CheckboxCardRoot>
  * ```
  */
 export declare const CheckboxCardLabel: React.ForwardRefExoticComponent<Omit<CheckboxCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,6 +1,2 @@
-export * from './CheckboxCard.cjs';
-export { CheckboxCardControl } from './CheckboxCardControl.cjs';
-export { CheckboxCardIndicator } from './CheckboxCardIndicator.cjs';
-export { CheckboxCardLabel } from './CheckboxCardLabel.cjs';
-export { CheckboxCardDescription } from './CheckboxCardDescription.cjs';
-export type { CheckboxCardProps, CheckboxCardControlProps, CheckboxCardIndicatorProps, CheckboxCardLabelProps, CheckboxCardDescriptionProps, } from './types.cjs';
+export { CheckboxCard } from './CheckboxCard.cjs';
+export type { CheckboxCardProps, CheckboxCardHandle } from './types.cjs';

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

@@ -1,6 +1,2 @@
-export * 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 { CheckboxCardProps, CheckboxCardControlProps, CheckboxCardIndicatorProps, CheckboxCardLabelProps, CheckboxCardDescriptionProps, } from './types.js';
+export { CheckboxCard } from './CheckboxCard.js';
+export type { CheckboxCardProps, CheckboxCardHandle } from './types.js';

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

@@ -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.cjs';
+export { CheckboxCardControl } from './CheckboxCardControl.cjs';
+export { CheckboxCardIndicator } from './CheckboxCardIndicator.cjs';
+export { CheckboxCardLabel } from './CheckboxCardLabel.cjs';
+export { CheckboxCardDescription } from './CheckboxCardDescription.cjs';
+export type { CheckboxCardRootProps, CheckboxCardControlProps, CheckboxCardIndicatorProps, CheckboxCardLabelProps, CheckboxCardDescriptionProps, } from './types.cjs';

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,20 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/**
+ * Root `<label>` plus FormValidityHandle methods, assigned additively.
+ */
+export type CheckboxCardHandle = HTMLLabelElement & FormValidityHandle;
 /** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. Not part of the public API. */
 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,8 +25,8 @@ 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`.
      * @default undefined — uncontrolled, tracks its own checked state internally.
@@ -35,10 +43,8 @@ export interface CheckboxCardProps extends Omit<PrimitivePropsWithRef<'label'>,
      */
     onCheckedChange?: (checked: boolean) => void;
     /**
-     * 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;
@@ -48,25 +54,52 @@ export interface CheckboxCardProps extends Omit<PrimitivePropsWithRef<'label'>,
      */
     value?: string;
     /**
-     * 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;
     /**
-     * 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;
+    /**
+     * Disable control and remove from tab order; emit `data-disabled`.
+     * Card surface and keyboard can't change it.
      * @default false
      */
     disabled?: boolean;
     /**
-     * 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.
+     * Freeze selection: control keeps tab stop, gains `aria-readonly`,
+     * submits name/value; clicking and Space do nothing.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the card invalid, exposed as `aria-invalid` on the control and `data-invalid` on the root.
      * @default false
      */
     invalid?: boolean;
 }
+/**
+ * Derived checkbox-card props; no `asChild` (renders sibling parts).
+ * Use headless `primitives/checkbox-card/CheckboxCardRoot` for that.
+ */
+export interface CheckboxCardProps extends Omit<CheckboxCardRootProps, 'asChild'> {
+    /**
+     * Card title line, rendered into derived label. Control names itself via
+     * `aria-labelledby`; ignored when `children` is given.
+     * @default undefined — no label is rendered, and the control falls back to the card's whole text content.
+     */
+    label?: React.ReactNode;
+    /**
+     * Supporting copy under title, rendered into derived description.
+     * Joined to control's `aria-describedby`; ignored when `children` is given.
+     * @default undefined — no description is rendered.
+     */
+    description?: React.ReactNode;
+}
 /** 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,20 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/**
+ * Root `<label>` plus FormValidityHandle methods, assigned additively.
+ */
+export type CheckboxCardHandle = HTMLLabelElement & FormValidityHandle;
 /** @internal Shared state distributed from {@link CheckboxCard} to its parts via context. Not part of the public API. */
 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,8 +25,8 @@ 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`.
      * @default undefined — uncontrolled, tracks its own checked state internally.
@@ -35,10 +43,8 @@ export interface CheckboxCardProps extends Omit<PrimitivePropsWithRef<'label'>,
      */
     onCheckedChange?: (checked: boolean) => void;
     /**
-     * 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;
@@ -48,25 +54,52 @@ export interface CheckboxCardProps extends Omit<PrimitivePropsWithRef<'label'>,
      */
     value?: string;
     /**
-     * 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;
     /**
-     * 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;
+    /**
+     * Disable control and remove from tab order; emit `data-disabled`.
+     * Card surface and keyboard can't change it.
      * @default false
      */
     disabled?: boolean;
     /**
-     * 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.
+     * Freeze selection: control keeps tab stop, gains `aria-readonly`,
+     * submits name/value; clicking and Space do nothing.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the card invalid, exposed as `aria-invalid` on the control and `data-invalid` on the root.
      * @default false
      */
     invalid?: boolean;
 }
+/**
+ * Derived checkbox-card props; no `asChild` (renders sibling parts).
+ * Use headless `primitives/checkbox-card/CheckboxCardRoot` for that.
+ */
+export interface CheckboxCardProps extends Omit<CheckboxCardRootProps, 'asChild'> {
+    /**
+     * Card title line, rendered into derived label. Control names itself via
+     * `aria-labelledby`; ignored when `children` is given.
+     * @default undefined — no label is rendered, and the control falls back to the card's whole text content.
+     */
+    label?: React.ReactNode;
+    /**
+     * Supporting copy under title, rendered into derived description.
+     * Joined to control's `aria-describedby`; ignored when `children` is given.
+     * @default undefined — no description is rendered.
+     */
+    description?: React.ReactNode;
+}
 /** 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 @@
-"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 strict";var ue=Object.create;var C=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var xe=(e,o)=>{for(var r in o)C(e,r,{get:o[r],enumerable:!0})},w=(e,o,r,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of he(o))!ke.call(e,t)&&t!==r&&C(e,t,{get:()=>o[t],enumerable:!(a=fe(o,t))||a.enumerable});return e};var A=(e,o,r)=>(r=e!=null?ue(be(e)):{},w(o||!e||!e.__esModule?C(r,"default",{value:e,enumerable:!0}):r,e)),Ce=e=>w(C({},"__esModule",{value:!0}),e);var ge={};xe(ge,{CheckboxGroup:()=>N,CheckboxGroupItem:()=>u,CheckboxGroupProvider:()=>U,CheckboxGroupSelectAll:()=>oe,checkboxGroupItemId:()=>G,getSelectAllChecked:()=>X,useCheckboxGroupContext:()=>b});module.exports=Ce(ge);var c=A(require("react"),1),Y=require("../utils/composeRefs.cjs"),_=require("../utils/createContext.cjs"),z=require("../utils/formControl.cjs"),J=require("../utils/part.cjs"),K=require("../utils/primitive.cjs"),Q=require("../utils/useControllableState.cjs");var g=A(require("react"),1),B=require("../checkbox/Checkbox.cjs"),F=require("../utils/part.cjs");var $=require("react/jsx-runtime"),u=g.forwardRef(({value:e,disabled:o,...r},a)=>{let t=b("CheckboxGroupItem"),n=t.value.includes(e),p=t.disabled||o||!1,d=t.maxReached&&!n,i=r.id??G(t.baseId,e),{registerItem:f}=t;return g.useEffect(()=>f(e,p,i),[f,e,p,i]),(0,$.jsx)(B.Checkbox,{...r,id:i,checked:n,onCheckedChange:I=>t.toggleItem(e,I===!0),disabled:p,readOnly:t.readOnly,name:t.name,value:e,form:t.form,"aria-required":t.required||void 0,"aria-disabled":d||void 0,"data-value":e,"data-max-reached":d?"":void 0,"data-skdx-checkbox-group-item":"",...(0,F.skdxPart)("checkbox-group","item",r.className),ref:a})});u.displayName="CheckboxGroupItem";var V=require("react/jsx-runtime");function D({options:e=[]}){return e.map(o=>(0,V.jsx)(u,{value:o.value,disabled:o.disabled,children:o.label},o.value))}var E=require("react/jsx-runtime"),[U,b]=(0,_.createSafeContext)("CheckboxGroup");function W(e,o,r){let a=[];return c.Children.forEach(e,t=>{if(c.isValidElement(t)){if(t.type===u){let{value:n,disabled:p,id:d}=t.props;a.push({value:n,disabled:o||p||!1,id:d??G(r,n)});return}(t.type===c.Fragment||typeof t.type=="string")&&a.push(...W(t.props.children,o,r))}}),a}function G(e,o){return`${e}-${o.replace(/\s+/g,"-")}`}function X(e,o){return e.length>0&&e.every(r=>o.includes(r))?!0:e.some(r=>o.includes(r))?"indeterminate":!1}var N=c.forwardRef(({value:e,defaultValue:o,onValueChange:r,name:a,form:t,max:n,required:p=!1,disabled:d=!1,readOnly:i=!1,invalid:f=!1,options:I,children:re,...S},ce)=>{let v=c.useId(),q=re??D({options:I}),[R=[],h]=(0,Q.useControllableState)({prop:e,defaultProp:o??[],onChange:r}),[T,M]=c.useState([]),ae=c.useCallback((s,m,l)=>{let x={value:s,disabled:m,id:l};return M(P=>[...P,x]),()=>M(P=>P.filter(me=>me!==x))},[]),se=W(q,d,v),y=T.length>0?T:se,k=c.useMemo(()=>y.filter(s=>!s.disabled).map(s=>s.value),[y]),H=X(k,R),ne=n!==void 0&&R.length>=n,ie=c.useCallback((s,m)=>{i||h((l=[])=>m?l.includes(s)||n!==void 0&&l.length>=n?l:[...l,s]:l.filter(x=>x!==s))},[h,i,n]),L=c.useRef(null),de=(0,Y.useComposedRefs)(ce,L);(0,z.useFormReset)(L,()=>h(o??[]),t);let O=H===!0,le=c.useCallback(()=>{i||h((s=[])=>O?s.filter(m=>!k.includes(m)):[...s,...k.filter(m=>!s.includes(m))].slice(0,n??Number.POSITIVE_INFINITY))},[h,O,k,i,n]),pe=y.map(s=>s.id).join(" ");return(0,E.jsx)(U,{name:a,form:t,value:R,disabled:d,readOnly:i,required:p,max:n,maxReached:ne,baseId:v,itemIds:pe,selectAllChecked:H,toggleItem:ie,toggleAll:le,registerItem:ae,children:(0,E.jsx)(K.Primitive.div,{role:"group","aria-invalid":f?!0:void 0,"data-disabled":d?"":void 0,"data-readonly":i?"":void 0,"data-invalid":f?"":void 0,...S,...(0,J.skdxPart)("checkbox-group","root",S.className),ref:de,children:q})})});N.displayName="CheckboxGroup";var Z=A(require("react"),1),j=require("../checkbox/Checkbox.cjs"),ee=require("../utils/part.cjs");var te=require("react/jsx-runtime"),oe=Z.forwardRef(({disabled:e,...o},r)=>{let a=b("CheckboxGroupSelectAll");return(0,te.jsx)(j.Checkbox,{...o,checked:a.selectAllChecked,onCheckedChange:()=>a.toggleAll(),disabled:a.disabled||e||!1,readOnly:a.readOnly,"aria-controls":a.itemIds||void 0,...(0,ee.skdxPart)("checkbox-group","select-all",o.className),ref:r})});oe.displayName="CheckboxGroupSelectAll";0&&(module.exports={CheckboxGroup,CheckboxGroupItem,CheckboxGroupProvider,CheckboxGroupSelectAll,checkboxGroupItemId,getSelectAllChecked,useCheckboxGroupContext});

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

@@ -8,35 +8,39 @@ export declare const CheckboxGroupProvider: {
     displayName: string;
 }, 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 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).
+ * @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.
  * @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).
+ * 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.
  *
- * 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.
+ * Without `children`, derives items from `options`. With children, renders them verbatim;
+ * manual composition is the only way to add `CheckboxGroupSelectAll`.
  *
  * @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>
  * ```
  */

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

@@ -8,35 +8,39 @@ export declare const CheckboxGroupProvider: {
     displayName: string;
 }, 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 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).
+ * @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.
  * @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).
+ * 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.
  *
- * 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.
+ * Without `children`, derives items from `options`. With children, renders them verbatim;
+ * manual composition is the only way to add `CheckboxGroupSelectAll`.
  *
  * @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>
  * ```
  */

package/dist/checkbox-group/CheckboxGroup.js

@@ -1 +1 @@
-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};
+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};

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

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { 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
+ */
+export declare function CheckboxGroupAnatomy({ options, }: {
+    options?: CheckboxGroupOption[];
+}): React.ReactNode;