@funstack/ui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/README.md

@@ -21,7 +21,7 @@ Documentation: https://ui.funstack.work
 ## Installation
 
 ```sh
-npm install @funstack/ui
+npm install @funstack/ui@alpha
 ```
 
 React 19.3 or later is required (`react` and `react-dom` are peer dependencies).

package/dist/checkbox-group/checkbox-group-context.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/checkbox-group/checkbox-group-context.ts
+/**
+* The values a Parent over `values` acts on and derives from: those not in `disabledItems`
+* (values with no Item included). When that leaves nothing (every value has only disabled
+* Items), all of `values`: a Parent the consumer left enabled over disabled Items still shows and
+* changes their state (disable the Parent to make it inert).
+*/
+function enabledValues(values, disabledItems) {
+	if (disabledItems.size === 0) return values;
+	const enabled = values.filter((v) => !disabledItems.has(v));
+	return enabled.length > 0 ? enabled : values;
+}
+const CheckboxGroupContext = createContext(null);
+function useCheckboxGroupContext(part) {
+	const context = use(CheckboxGroupContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a CheckboxGroup.Root.`);
+	return context;
+}
+//#endregion
+export { CheckboxGroupContext, enabledValues, useCheckboxGroupContext };
+
+//# sourceMappingURL=checkbox-group-context.mjs.map

package/dist/checkbox-group/checkbox-group-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-context.mjs","names":[],"sources":["../../src/checkbox-group/checkbox-group-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\n/** A change to the group's set of checked values (design/components/checkbox-group.md 5.2). */\nexport interface CheckboxGroupPatch {\n  readonly added: readonly string[];\n  readonly removed: readonly string[];\n}\n\nexport interface CheckboxGroupContextValue {\n  /** The `name` shared by every Item of the group (prop or `useId()`). */\n  readonly name: string;\n  readonly form: string | undefined;\n  /**\n   * The Root's `required` while no value of an enabled Item is checked (design section 7):\n   * rendered as native `required` on every Item. Before the Items have registered (server render,\n   * hydration render) it is `required && optimistic.size === 0`, which is what the server can\n   * compute.\n   */\n  readonly required: boolean;\n  /** Optimistic checked values: Items and Parents render from it. */\n  readonly optimistic: ReadonlySet<string>;\n  /** Committed checked values. For per-part pending and the Parent's restore memory only. */\n  readonly committed: ReadonlySet<string>;\n  readonly pending: boolean;\n  /** `Root disabled` (reaches the boxes natively through `<fieldset disabled>`). */\n  readonly disabled: boolean;\n  /**\n   * Uncontrolled mode: the latest `defaultValue` as a set, mirrored by each Item into\n   * `el.defaultChecked` (and by each Parent, derived) so that a form reset returns to it.\n   * `undefined` in controlled mode, where React's mount-time value stays the reset target\n   * (conventions 3.8 rule 6).\n   */\n  readonly defaultValue: ReadonlySet<string> | undefined;\n  /**\n   * Item click. No-op when `optimistic.has(value) === checked`. Checks neither `disabled` nor\n   * `defaultPrevented` (the Item's `guardCheckableChange` does).\n   */\n  readonly toggle: (value: string, checked: boolean, event: Event) => void;\n  /** Parent click: a whole patch. No-op when it changes nothing against the optimistic set. */\n  readonly apply: (patch: CheckboxGroupPatch, event: Event) => void;\n  /**\n   * Values whose every mounted Item has its own `disabled` prop (`Root disabled` is not counted).\n   * A Parent leaves them alone (design 6.2). Empty until the Items registered.\n   */\n  readonly disabledItems: ReadonlySet<string>;\n  /**\n   * Stable. Each Item calls it from a layout effect with its value and its own `disabled` prop;\n   * returns the unregister function.\n   */\n  readonly registerItem: (value: string, disabled: boolean) => () => void;\n  /** From `useNativeGroupReconciliation`; Items and Parents call it from their mount layout effect. */\n  readonly onItemMounted: (element: HTMLInputElement | null) => void;\n  /**\n   * A Parent mounted with a DOM `checked` that differs from its derivation (a click before\n   * hydration). Folded into the Root's next mount read as \"check all\" / \"uncheck all\" of\n   * `values` (design 8.1). Call before `onItemMounted`.\n   */\n  readonly reportParent: (values: readonly string[], checked: boolean) => void;\n  /**\n   * The optimistic set as the Root state's `value`: an array in the Items' document order as of\n   * the Root's last render (see `CheckboxGroupRootState.value`).\n   */\n  readonly value: readonly string[];\n  /**\n   * Sorts values by the current document order of the group's Items (a DOM read); values with no\n   * Item keep their iteration order, after them. Call from handlers and effects only.\n   */\n  readonly sortByDocument: (values: Iterable<string>) => string[];\n}\n\n/**\n * The values a Parent over `values` acts on and derives from: those not in `disabledItems`\n * (values with no Item included). When that leaves nothing (every value has only disabled\n * Items), all of `values`: a Parent the consumer left enabled over disabled Items still shows and\n * changes their state (disable the Parent to make it inert).\n */\nexport function enabledValues(\n  values: readonly string[],\n  disabledItems: ReadonlySet<string>,\n): readonly string[] {\n  if (disabledItems.size === 0) return values;\n  const enabled = values.filter((v) => !disabledItems.has(v));\n  return enabled.length > 0 ? enabled : values;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);\n\nexport function useCheckboxGroupContext(part: string): CheckboxGroupContextValue {\n  const context = use(CheckboxGroupContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a CheckboxGroup.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;;AA6EA,SAAgB,cACd,QACA,eACmB;CACnB,IAAI,cAAc,SAAS,GAAG,OAAO;CACrC,MAAM,UAAU,OAAO,QAAQ,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC;CAC1D,OAAO,QAAQ,SAAS,IAAI,UAAU;AACxC;AAEA,MAAa,uBAAuB,cAAgD,IAAI;AAExF,SAAgB,wBAAwB,MAAyC;CAC/E,MAAM,UAAU,IAAI,oBAAoB;CACxC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,+CAA+C;CAEzE,OAAO;AACT"}

package/dist/checkbox-group/checkbox-group-item.d.mts

@@ -0,0 +1,55 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ViewTransitionClass } from "react";
+//#region src/checkbox-group/checkbox-group-item.d.ts
+export interface CheckboxGroupItemState {
+  readonly value: string;
+  /** Optimistic: true as soon as the user checks this box, before the action settles. */
+  readonly checked: boolean;
+  /** The Root is pending and this box's optimistic state differs from its committed state. */
+  readonly pending: boolean;
+  /** Disabled by its own prop or by `Root disabled`. */
+  readonly disabled: boolean;
+}
+export interface CheckboxGroupItemProps extends Omit<ComponentPropsWithRef<"input">, "type" | "name" | "value" | "checked" | "defaultChecked" | "defaultValue" | "form" | "required" | "aria-checked" | "onChange" | "className" | "style" | "children"> {
+  /** The value this box contributes when checked. Must be unique within the Root. */
+  value: string;
+  /**
+   * Native `disabled`: unfocusable, never dispatches, barred from constraint validation. A
+   * `Parent` leaves a disabled Item's value alone and derives its state without it; a checked
+   * disabled Item does not satisfy the group's `required`.
+   */
+  disabled?: boolean;
+  /**
+   * Forwarded to the Item's `<ViewTransition default>`. Default: no boundary. Fires only on the
+   * commit that settles the action (or rolls it back), never on the optimistic check; animate the
+   * check itself with CSS on `:checked`.
+   *
+   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between
+   * `undefined` and a value remounts the element. Any value, `"none"` included, makes a mount or
+   * `<Activity>` reveal of this part inside a transition start a document view transition: the
+   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, CheckboxGroupItemState>;
+  style?: StateValue<CSSProperties | undefined, CheckboxGroupItemState>;
+  /** Replace the rendered element. Must keep an `<input>`; the library sets `type="checkbox"`. */
+  render?: RenderProp<ComponentPropsWithRef<"input">, CheckboxGroupItemState>;
+}
+/**
+ * One `<input type="checkbox">` of the group, checked while its `value` is in the group's set.
+ * Its DOM `checked` is the optimistic state (`checked={optimistic.has(value)}`): react-dom
+ * restores a controlled input to its props after every event, and only the sync-lane optimistic
+ * value survives that restore.
+ *
+ * Owned keys (conventions 1.2; a `render` element's value is overridden): `type`, `name`,
+ * `value`, `checked`, `defaultChecked` (never rendered), `disabled`, `form`, `required`
+ * (computed by the Root from its `required` prop), `aria-checked` (removed), `data-checked`,
+ * `data-pending`, `data-disabled`. `onChange` is merged: a `render` element's own handler runs
+ * first, then the library's. `role` passes through.
+ */
+export declare function CheckboxGroupItem({ value, disabled: disabledProp, transition, className, style, render, ...rest }: CheckboxGroupItemProps): import("react").ReactNode;
+export declare namespace CheckboxGroupItem {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=checkbox-group-item.d.mts.map

package/dist/checkbox-group/checkbox-group-item.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-item.d.mts","names":[],"sources":["../../src/checkbox-group/checkbox-group-item.tsx"],"mappings":";;;iBAWiB;WACN;;WAEA;;WAEA;;WAEA;;iBAGM,+BAA+B,KAC9C;;EAgBA;;;;;;EAMA;;;;;;;;;;;EAWA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;;;wBAetC,oBACd,OACA,UAAU,cACV,YACA,WACA,OACA,WACG,QACF,yCAAsB;yBART"}

package/dist/checkbox-group/checkbox-group-item.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
+import { syncPresence } from "../internal/sync-presence.mjs";
+import { useCheckboxGroupContext } from "./checkbox-group-context.mjs";
+import { useLayoutEffect } from "react";
+//#region src/checkbox-group/checkbox-group-item.tsx
+/**
+* One `<input type="checkbox">` of the group, checked while its `value` is in the group's set.
+* Its DOM `checked` is the optimistic state (`checked={optimistic.has(value)}`): react-dom
+* restores a controlled input to its props after every event, and only the sync-lane optimistic
+* value survives that restore.
+*
+* Owned keys (conventions 1.2; a `render` element's value is overridden): `type`, `name`,
+* `value`, `checked`, `defaultChecked` (never rendered), `disabled`, `form`, `required`
+* (computed by the Root from its `required` prop), `aria-checked` (removed), `data-checked`,
+* `data-pending`, `data-disabled`. `onChange` is merged: a `render` element's own handler runs
+* first, then the library's. `role` passes through.
+*/
+function CheckboxGroupItem({ value, disabled: disabledProp = false, transition, className, style, render, ...rest }) {
+	const ctx = useCheckboxGroupContext("CheckboxGroup.Item");
+	const checked = ctx.optimistic.has(value);
+	const pending = ctx.pending && checked !== ctx.committed.has(value);
+	const disabled = ctx.disabled || disabledProp;
+	const required = ctx.required;
+	const { registerItem } = ctx;
+	useLayoutEffect(() => registerItem(value, disabledProp), [
+		registerItem,
+		value,
+		disabledProp
+	]);
+	const inputRef = useNativeChecked({
+		type: "checkbox",
+		component: "CheckboxGroup.Item",
+		checked,
+		group: true,
+		onItemMounted: (el) => {
+			if (el !== null) {
+				syncPresence(el, "data-checked", checked);
+				syncPresence(el, "data-pending", pending);
+				syncPresence(el, "data-disabled", disabled);
+				syncPresence(el, "required", required);
+			}
+			ctx.onItemMounted(el);
+		},
+		defaultChecked: ctx.defaultValue === void 0 ? void 0 : ctx.defaultValue.has(value)
+	});
+	const element = useRender({
+		defaultElement: "input",
+		render,
+		state: {
+			value,
+			checked,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children: void 0,
+		ref: inputRef,
+		props: rest,
+		libraryProps: {
+			type: "checkbox",
+			name: ctx.name,
+			value,
+			checked,
+			defaultChecked: void 0,
+			"aria-checked": void 0,
+			disabled: disabledProp,
+			form: ctx.form,
+			required,
+			"data-checked": dataAttr(checked),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onChange: (event) => {
+				if (disabled) return;
+				const nativeEvent = event.nativeEvent;
+				guardCheckableChange(nativeEvent, () => ctx.toggle(value, !checked, nativeEvent), "CheckboxGroup.Item");
+			}
+		}
+	});
+	return useTransitionBoundary("CheckboxGroup.Item", transition, element);
+}
+CheckboxGroupItem.displayName = "CheckboxGroupItem";
+//#endregion
+export { CheckboxGroupItem };
+
+//# sourceMappingURL=checkbox-group-item.mjs.map

package/dist/checkbox-group/checkbox-group-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-item.mjs","names":[],"sources":["../../src/checkbox-group/checkbox-group-item.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { guardCheckableChange, useNativeChecked } from \"../internal/use-native-checked.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useCheckboxGroupContext } from \"./checkbox-group-context.js\";\nimport { syncPresence } from \"../internal/sync-presence.js\";\n\nexport interface CheckboxGroupItemState {\n  readonly value: string;\n  /** Optimistic: true as soon as the user checks this box, before the action settles. */\n  readonly checked: boolean;\n  /** The Root is pending and this box's optimistic state differs from its committed state. */\n  readonly pending: boolean;\n  /** Disabled by its own prop or by `Root disabled`. */\n  readonly disabled: boolean;\n}\n\nexport interface CheckboxGroupItemProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"name\"\n  | \"value\"\n  | \"checked\"\n  | \"defaultChecked\"\n  | \"defaultValue\"\n  | \"form\"\n  | \"required\"\n  | \"aria-checked\"\n  | \"onChange\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** The value this box contributes when checked. Must be unique within the Root. */\n  value: string;\n  /**\n   * Native `disabled`: unfocusable, never dispatches, barred from constraint validation. A\n   * `Parent` leaves a disabled Item's value alone and derives its state without it; a checked\n   * disabled Item does not satisfy the group's `required`.\n   */\n  disabled?: boolean;\n  /**\n   * Forwarded to the Item's `<ViewTransition default>`. Default: no boundary. Fires only on the\n   * commit that settles the action (or rolls it back), never on the optimistic check; animate the\n   * check itself with CSS on `:checked`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, CheckboxGroupItemState>;\n  style?: StateValue<CSSProperties | undefined, CheckboxGroupItemState>;\n  /** Replace the rendered element. Must keep an `<input>`; the library sets `type=\"checkbox\"`. */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, CheckboxGroupItemState>;\n}\n\n/**\n * One `<input type=\"checkbox\">` of the group, checked while its `value` is in the group's set.\n * Its DOM `checked` is the optimistic state (`checked={optimistic.has(value)}`): react-dom\n * restores a controlled input to its props after every event, and only the sync-lane optimistic\n * value survives that restore.\n *\n * Owned keys (conventions 1.2; a `render` element's value is overridden): `type`, `name`,\n * `value`, `checked`, `defaultChecked` (never rendered), `disabled`, `form`, `required`\n * (computed by the Root from its `required` prop), `aria-checked` (removed), `data-checked`,\n * `data-pending`, `data-disabled`. `onChange` is merged: a `render` element's own handler runs\n * first, then the library's. `role` passes through.\n */\nexport function CheckboxGroupItem({\n  value,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  render,\n  ...rest\n}: CheckboxGroupItemProps) {\n  const ctx = useCheckboxGroupContext(\"CheckboxGroup.Item\");\n  const checked = ctx.optimistic.has(value);\n  const pending = ctx.pending && checked !== ctx.committed.has(value);\n  const disabled = ctx.disabled || disabledProp;\n  const required = ctx.required;\n\n  // The Root needs every Item's own `disabled` for the Parents and `required` (design 6.2, 7).\n  const { registerItem } = ctx;\n  useLayoutEffect(() => registerItem(value, disabledProp), [registerItem, value, disabledProp]);\n\n  // Group mode: element check and re-apply only; the Root reports the residual paths once.\n  const inputRef = useNativeChecked({\n    type: \"checkbox\",\n    component: \"CheckboxGroup.Item\",\n    checked,\n    group: true,\n    onItemMounted: (el) => {\n      // Hydration keeps server attributes that differ from the client render (React only warns).\n      // An Item hydrating after its Root can render a different state than the server did (a\n      // click on an already hydrated box), and stale attributes would stay until the next change.\n      if (el !== null) {\n        syncPresence(el, \"data-checked\", checked);\n        syncPresence(el, \"data-pending\", pending);\n        syncPresence(el, \"data-disabled\", disabled);\n        syncPresence(el, \"required\", required);\n      }\n      ctx.onItemMounted(el);\n    },\n    defaultChecked: ctx.defaultValue === undefined ? undefined : ctx.defaultValue.has(value),\n  });\n\n  const state: CheckboxGroupItemState = { value, checked, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"input\">, CheckboxGroupItemState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    ref: inputRef,\n    // Pass-through layer: a `render` element's own props win over these.\n    props: rest,\n    libraryProps: {\n      type: \"checkbox\",\n      name: ctx.name,\n      value,\n      checked,\n      defaultChecked: undefined,\n      \"aria-checked\": undefined,\n      // Owned (Switch precedent) so that native disabledness, `data-disabled` and the click guard\n      // agree. Only the Item's own prop: `Root disabled` reaches the box through the fieldset.\n      disabled: disabledProp,\n      form: ctx.form,\n      required,\n      \"data-checked\": dataAttr(checked),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        // A natively disabled box fires no click; this covers `render` elements that do not\n        // honour `disabled`.\n        if (disabled) return;\n        const nativeEvent = event.nativeEvent;\n        guardCheckableChange(\n          nativeEvent,\n          () => ctx.toggle(value, !checked, nativeEvent),\n          \"CheckboxGroup.Item\",\n        );\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"CheckboxGroup.Item\", transition, element);\n}\n\nCheckboxGroupItem.displayName = \"CheckboxGroupItem\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0EA,SAAgB,kBAAkB,EAChC,OACA,UAAU,eAAe,OACzB,YACA,WACA,OACA,QACA,GAAG,QACsB;CACzB,MAAM,MAAM,wBAAwB,oBAAoB;CACxD,MAAM,UAAU,IAAI,WAAW,IAAI,KAAK;CACxC,MAAM,UAAU,IAAI,WAAW,YAAY,IAAI,UAAU,IAAI,KAAK;CAClE,MAAM,WAAW,IAAI,YAAY;CACjC,MAAM,WAAW,IAAI;CAGrB,MAAM,EAAE,iBAAiB;CACzB,sBAAsB,aAAa,OAAO,YAAY,GAAG;EAAC;EAAc;EAAO;CAAY,CAAC;CAG5F,MAAM,WAAW,iBAAiB;EAChC,MAAM;EACN,WAAW;EACX;EACA,OAAO;EACP,gBAAgB,OAAO;GAIrB,IAAI,OAAO,MAAM;IACf,aAAa,IAAI,gBAAgB,OAAO;IACxC,aAAa,IAAI,gBAAgB,OAAO;IACxC,aAAa,IAAI,iBAAiB,QAAQ;IAC1C,aAAa,IAAI,YAAY,QAAQ;GACvC;GACA,IAAI,cAAc,EAAE;EACtB;EACA,gBAAgB,IAAI,iBAAiB,KAAA,IAAY,KAAA,IAAY,IAAI,aAAa,IAAI,KAAK;CACzF,CAAC;CAID,MAAM,UAAU,UAAkE;EAChF,gBAAgB;EAChB;EACA,OAAA;GALsC;GAAO;GAAS;GAAS;EAK3D;EACJ;EACA;EACA,UAAU,KAAA;EACV,KAAK;EAEL,OAAO;EACP,cAAc;GACZ,MAAM;GACN,MAAM,IAAI;GACV;GACA;GACA,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GAGhB,UAAU;GACV,MAAM,IAAI;GACV;GACA,gBAAgB,SAAS,OAAO;GAChC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAAyC;IAGlD,IAAI,UAAU;IACd,MAAM,cAAc,MAAM;IAC1B,qBACE,mBACM,IAAI,OAAO,OAAO,CAAC,SAAS,WAAW,GAC7C,oBACF;GACF;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,sBAAsB,YAAY,OAAO;AACxE;AAEA,kBAAkB,cAAc"}

package/dist/checkbox-group/checkbox-group-label.d.mts

@@ -0,0 +1,21 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CheckboxGroupRootState } from "./checkbox-group-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/checkbox-group/checkbox-group-label.d.ts
+export interface CheckboxGroupLabelProps extends Omit<ComponentPropsWithRef<"legend">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, CheckboxGroupRootState>;
+  style?: StateValue<CSSProperties | undefined, CheckboxGroupRootState>;
+  /** Receives the Root's state: a group-level pending indicator goes here. */
+  children?: StateValue<ReactNode, CheckboxGroupRootState>;
+  render?: RenderProp<ComponentPropsWithRef<"legend">, CheckboxGroupRootState>;
+}
+/**
+ * The group's `<legend>`, which names the fieldset natively. Optional; must be the **first child**
+ * of `CheckboxGroup.Root` (HTML content model). Its state is the Root's state. Owns no keys.
+ */
+export declare function CheckboxGroupLabel({ className, style, children, render, ...rest }: CheckboxGroupLabelProps): ReactNode;
+export declare namespace CheckboxGroupLabel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=checkbox-group-label.d.mts.map

package/dist/checkbox-group/checkbox-group-label.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-label.d.mts","names":[],"sources":["../../src/checkbox-group/checkbox-group-label.tsx"],"mappings":";;;;iBAOiB,gCAAgC,KAC/C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;wBAOvC,qBACd,WACA,OACA,UACA,WACG,QACF,0BAAuB;yBANV"}

package/dist/checkbox-group/checkbox-group-label.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useCheckboxGroupContext } from "./checkbox-group-context.mjs";
+//#region src/checkbox-group/checkbox-group-label.tsx
+/**
+* The group's `<legend>`, which names the fieldset natively. Optional; must be the **first child**
+* of `CheckboxGroup.Root` (HTML content model). Its state is the Root's state. Owns no keys.
+*/
+function CheckboxGroupLabel({ className, style, children, render, ...rest }) {
+	const ctx = useCheckboxGroupContext("CheckboxGroup.Label");
+	const state = {
+		value: ctx.value,
+		pending: ctx.pending,
+		disabled: ctx.disabled
+	};
+	return useRender({
+		defaultElement: "legend",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest
+	});
+}
+CheckboxGroupLabel.displayName = "CheckboxGroupLabel";
+//#endregion
+export { CheckboxGroupLabel };
+
+//# sourceMappingURL=checkbox-group-label.mjs.map

package/dist/checkbox-group/checkbox-group-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-label.mjs","names":[],"sources":["../../src/checkbox-group/checkbox-group-label.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useCheckboxGroupContext } from \"./checkbox-group-context.js\";\nimport type { CheckboxGroupRootState } from \"./checkbox-group-root.js\";\n\nexport interface CheckboxGroupLabelProps extends Omit<\n  ComponentPropsWithRef<\"legend\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, CheckboxGroupRootState>;\n  style?: StateValue<CSSProperties | undefined, CheckboxGroupRootState>;\n  /** Receives the Root's state: a group-level pending indicator goes here. */\n  children?: StateValue<ReactNode, CheckboxGroupRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"legend\">, CheckboxGroupRootState>;\n}\n\n/**\n * The group's `<legend>`, which names the fieldset natively. Optional; must be the **first child**\n * of `CheckboxGroup.Root` (HTML content model). Its state is the Root's state. Owns no keys.\n */\nexport function CheckboxGroupLabel({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: CheckboxGroupLabelProps) {\n  const ctx = useCheckboxGroupContext(\"CheckboxGroup.Label\");\n  const state: CheckboxGroupRootState = {\n    value: ctx.value,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  return useRender<ComponentPropsWithRef<\"legend\">, CheckboxGroupRootState>({\n    defaultElement: \"legend\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n  });\n}\n\nCheckboxGroupLabel.displayName = \"CheckboxGroupLabel\";\n"],"mappings":";;;;;;;;AAsBA,SAAgB,mBAAmB,EACjC,WACA,OACA,UACA,QACA,GAAG,QACuB;CAC1B,MAAM,MAAM,wBAAwB,qBAAqB;CACzD,MAAM,QAAgC;EACpC,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,OAAO,UAAmE;EACxE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;CACT,CAAC;AACH;AAEA,mBAAmB,cAAc"}

package/dist/checkbox-group/checkbox-group-parent.d.mts

@@ -0,0 +1,68 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ViewTransitionClass } from "react";
+//#region src/checkbox-group/checkbox-group-parent.d.ts
+export interface CheckboxGroupParentState {
+  readonly values: readonly string[];
+  /** Every value in `values` is optimistically checked (`false` when `values` is empty). */
+  readonly checked: boolean;
+  /**
+   * Some but not all of `values` are optimistically checked. Never true together with
+   * `checked`. Not suspended while pending (it is derived from optimistic state).
+   */
+  readonly indeterminate: boolean;
+  /** The Root is pending and at least one of `values` differs between optimistic and committed. */
+  readonly pending: boolean;
+  /** Disabled by its own prop or by `Root disabled`. */
+  readonly disabled: boolean;
+}
+export interface CheckboxGroupParentProps extends Omit<ComponentPropsWithRef<"input">, "type" | "name" | "value" | "checked" | "defaultChecked" | "defaultValue" | "form" | "required" | "autoComplete" | "aria-checked" | "onChange" | "className" | "style" | "children"> {
+  /**
+   * The Item values this Parent controls (usually every Item of the group). Its checked and
+   * mixed states are derived from them; its click checks or unchecks all of them. Values with
+   * no Item are still added to / removed from the group's value.
+   *
+   * Values whose Items are disabled (their own `disabled` prop) are left alone: the click does
+   * not change them and the derivation ignores them, so the Parent shows checked when every
+   * enabled Item is. When every value has only disabled Items, the Parent acts on all of them
+   * (disable the Parent to make it inert). Before hydration the server-rendered state counts
+   * disabled Items too; it settles when the Items hydrate.
+   */
+  values: string[];
+  /** Native `disabled`: unfocusable, never dispatches. */
+  disabled?: boolean;
+  /**
+   * Forwarded to the Parent's `<ViewTransition default>`. Default: no boundary. Fires only on the
+   * commit that settles the action (or rolls it back), never on the optimistic flip; animate the
+   * flip itself with CSS on `:checked` / `:indeterminate`.
+   *
+   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between
+   * `undefined` and a value remounts the element. Any value, `"none"` included, makes a mount or
+   * `<Activity>` reveal of this part inside a transition start a document view transition: the
+   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, CheckboxGroupParentState>;
+  style?: StateValue<CSSProperties | undefined, CheckboxGroupParentState>;
+  /** Replace the rendered element. Must keep an `<input>`; the library sets `type="checkbox"`. */
+  render?: RenderProp<ComponentPropsWithRef<"input">, CheckboxGroupParentState>;
+}
+/**
+ * The mixed-state "select all" checkbox of a group (WAI-ARIA APG "Checkbox (Mixed-State)"):
+ * `<input type="checkbox">` checked when every value in `values` is in the group's optimistic
+ * set, mixed (`el.indeterminate`, `data-indeterminate`) when some are. A click checks every value
+ * when mixed, unchecks every value when checked, and from unchecked restores the last partial
+ * combination of its values the group committed (seeded at mount), else checks every value. Each
+ * click is one dispatch through the Root's `valueChangeAction`. Never submitted (no `name`).
+ * "Its values" are those whose Items are enabled: disabled Items are left alone (see `values`).
+ *
+ * Owned keys (conventions 1.2): `type`, `name` (removed), `value` (removed), `checked`,
+ * `defaultChecked`, `indeterminate` (stripped; the property is set), `required` (removed), `form`
+ * (removed), `autoComplete` (`"off"`), `disabled`, `aria-checked` (removed), `data-checked`, `data-indeterminate`,
+ * `data-pending`, `data-disabled`. `onChange` is merged.
+ */
+export declare function CheckboxGroupParent({ values, disabled: disabledProp, transition, className, style, render, ...rest }: CheckboxGroupParentProps): import("react").ReactNode;
+export declare namespace CheckboxGroupParent {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=checkbox-group-parent.d.mts.map

package/dist/checkbox-group/checkbox-group-parent.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-parent.d.mts","names":[],"sources":["../../src/checkbox-group/checkbox-group-parent.tsx"],"mappings":";;;iBAaiB;WACN;;WAEA;;;;;WAKA;;WAEA;;WAEA;;iBAGM,iCAAiC,KAChD;;;;;;;;;;;;EA2BA;;EAEA;;;;;;;;;;;EAWA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;;;;;wBA2BtC,sBACd,QACA,UAAU,cACV,YACA,WACA,OACA,WACG,QACF,2CAAwB;yBARX"}

package/dist/checkbox-group/checkbox-group-parent.mjs

@@ -0,0 +1,145 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useFormReset } from "../internal/use-form-reset.mjs";
+import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
+import { syncPresence } from "../internal/sync-presence.mjs";
+import { enabledValues, useCheckboxGroupContext } from "./checkbox-group-context.mjs";
+import { useCallback, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
+//#region src/checkbox-group/checkbox-group-parent.tsx
+const subscribeNothing = () => () => {};
+/** `checked` / `indeterminate` of a Parent over `values` against `set` (design 6.1). */
+function derive(values, set) {
+	let inSet = 0;
+	for (const v of values) if (set.has(v)) inSet += 1;
+	const checked = values.length > 0 && inSet === values.length;
+	return {
+		checked,
+		indeterminate: inSet > 0 && !checked
+	};
+}
+/**
+* The mixed-state "select all" checkbox of a group (WAI-ARIA APG "Checkbox (Mixed-State)"):
+* `<input type="checkbox">` checked when every value in `values` is in the group's optimistic
+* set, mixed (`el.indeterminate`, `data-indeterminate`) when some are. A click checks every value
+* when mixed, unchecks every value when checked, and from unchecked restores the last partial
+* combination of its values the group committed (seeded at mount), else checks every value. Each
+* click is one dispatch through the Root's `valueChangeAction`. Never submitted (no `name`).
+* "Its values" are those whose Items are enabled: disabled Items are left alone (see `values`).
+*
+* Owned keys (conventions 1.2): `type`, `name` (removed), `value` (removed), `checked`,
+* `defaultChecked`, `indeterminate` (stripped; the property is set), `required` (removed), `form`
+* (removed), `autoComplete` (`"off"`), `disabled`, `aria-checked` (removed), `data-checked`, `data-indeterminate`,
+* `data-pending`, `data-disabled`. `onChange` is merged.
+*/
+function CheckboxGroupParent({ values, disabled: disabledProp = false, transition, className, style, render, ...rest }) {
+	const ctx = useCheckboxGroupContext("CheckboxGroup.Parent");
+	const hydrating = useSyncExternalStore(subscribeNothing, () => false, () => true);
+	const { disabledItems } = ctx;
+	const effective = useMemo(() => hydrating ? values : enabledValues(values, disabledItems), [
+		hydrating,
+		values,
+		disabledItems
+	]);
+	const { checked, indeterminate } = derive(effective, ctx.optimistic);
+	const pending = ctx.pending && values.some((v) => ctx.optimistic.has(v) !== ctx.committed.has(v));
+	const disabled = ctx.disabled || disabledProp;
+	const memory = useRef(null);
+	const { committed } = ctx;
+	useLayoutEffect(() => {
+		const inCommitted = effective.filter((v) => committed.has(v));
+		if (inCommitted.length > 0 && inCommitted.length < effective.length) memory.current = inCommitted;
+	}, [committed, effective]);
+	const inputRef = useNativeChecked({
+		type: "checkbox",
+		component: "CheckboxGroup.Parent",
+		checked,
+		indeterminate,
+		group: true,
+		onItemMounted: (el) => {
+			if (el !== null) {
+				if (el.checked !== checked) ctx.reportParent(values, el.checked);
+				syncPresence(el, "data-checked", checked);
+				syncPresence(el, "data-indeterminate", indeterminate);
+				syncPresence(el, "data-pending", pending);
+				syncPresence(el, "data-disabled", disabled);
+			}
+			ctx.onItemMounted(el);
+		},
+		defaultChecked: ctx.defaultValue === void 0 ? void 0 : derive(effective, ctx.defaultValue).checked
+	});
+	const node = useRef(null);
+	const ref = useCallback((el) => {
+		node.current = el;
+		const cleanup = inputRef(el);
+		return () => {
+			node.current = null;
+			if (typeof cleanup === "function") cleanup();
+		};
+	}, [inputRef]);
+	useFormReset(node, () => {
+		const el = node.current;
+		if (el !== null && el.checked !== checked) el.checked = checked;
+	});
+	/** The click cycle of design 6.2. */
+	const cyclePatch = () => {
+		if (checked) return {
+			added: [],
+			removed: [...effective]
+		};
+		if (indeterminate) return {
+			added: effective.filter((v) => !ctx.optimistic.has(v)),
+			removed: []
+		};
+		const restore = memory.current?.filter((v) => effective.includes(v)) ?? [];
+		return {
+			added: restore.length > 0 ? restore : [...effective],
+			removed: []
+		};
+	};
+	const element = useRender({
+		defaultElement: "input",
+		render,
+		state: {
+			values,
+			checked,
+			indeterminate,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children: void 0,
+		ref,
+		props: rest,
+		libraryProps: {
+			type: "checkbox",
+			name: void 0,
+			value: void 0,
+			required: void 0,
+			form: void 0,
+			autoComplete: "off",
+			checked,
+			defaultChecked: void 0,
+			indeterminate: void 0,
+			"aria-checked": void 0,
+			disabled: disabledProp,
+			"data-checked": dataAttr(checked),
+			"data-indeterminate": dataAttr(indeterminate),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onChange: (event) => {
+				if (disabled) return;
+				const nativeEvent = event.nativeEvent;
+				guardCheckableChange(nativeEvent, () => ctx.apply(cyclePatch(), nativeEvent), "CheckboxGroup.Parent");
+			}
+		}
+	});
+	return useTransitionBoundary("CheckboxGroup.Parent", transition, element);
+}
+CheckboxGroupParent.displayName = "CheckboxGroupParent";
+//#endregion
+export { CheckboxGroupParent };
+
+//# sourceMappingURL=checkbox-group-parent.mjs.map

package/dist/checkbox-group/checkbox-group-parent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-parent.mjs","names":[],"sources":["../../src/checkbox-group/checkbox-group-parent.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { guardCheckableChange, useNativeChecked } from \"../internal/use-native-checked.js\";\nimport { useFormReset } from \"../internal/use-form-reset.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { enabledValues, useCheckboxGroupContext } from \"./checkbox-group-context.js\";\nimport type { CheckboxGroupPatch } from \"./checkbox-group-context.js\";\nimport { syncPresence } from \"../internal/sync-presence.js\";\n\nexport interface CheckboxGroupParentState {\n  readonly values: readonly string[];\n  /** Every value in `values` is optimistically checked (`false` when `values` is empty). */\n  readonly checked: boolean;\n  /**\n   * Some but not all of `values` are optimistically checked. Never true together with\n   * `checked`. Not suspended while pending (it is derived from optimistic state).\n   */\n  readonly indeterminate: boolean;\n  /** The Root is pending and at least one of `values` differs between optimistic and committed. */\n  readonly pending: boolean;\n  /** Disabled by its own prop or by `Root disabled`. */\n  readonly disabled: boolean;\n}\n\nexport interface CheckboxGroupParentProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"name\"\n  | \"value\"\n  | \"checked\"\n  | \"defaultChecked\"\n  | \"defaultValue\"\n  | \"form\"\n  | \"required\"\n  | \"autoComplete\"\n  | \"aria-checked\"\n  | \"onChange\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /**\n   * The Item values this Parent controls (usually every Item of the group). Its checked and\n   * mixed states are derived from them; its click checks or unchecks all of them. Values with\n   * no Item are still added to / removed from the group's value.\n   *\n   * Values whose Items are disabled (their own `disabled` prop) are left alone: the click does\n   * not change them and the derivation ignores them, so the Parent shows checked when every\n   * enabled Item is. When every value has only disabled Items, the Parent acts on all of them\n   * (disable the Parent to make it inert). Before hydration the server-rendered state counts\n   * disabled Items too; it settles when the Items hydrate.\n   */\n  values: string[];\n  /** Native `disabled`: unfocusable, never dispatches. */\n  disabled?: boolean;\n  /**\n   * Forwarded to the Parent's `<ViewTransition default>`. Default: no boundary. Fires only on the\n   * commit that settles the action (or rolls it back), never on the optimistic flip; animate the\n   * flip itself with CSS on `:checked` / `:indeterminate`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, CheckboxGroupParentState>;\n  style?: StateValue<CSSProperties | undefined, CheckboxGroupParentState>;\n  /** Replace the rendered element. Must keep an `<input>`; the library sets `type=\"checkbox\"`. */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, CheckboxGroupParentState>;\n}\n\nconst subscribeNothing = () => () => {};\n\n/** `checked` / `indeterminate` of a Parent over `values` against `set` (design 6.1). */\nfunction derive(values: readonly string[], set: ReadonlySet<string>) {\n  let inSet = 0;\n  for (const v of values) if (set.has(v)) inSet += 1;\n  const checked = values.length > 0 && inSet === values.length;\n  return { checked, indeterminate: inSet > 0 && !checked };\n}\n\n/**\n * The mixed-state \"select all\" checkbox of a group (WAI-ARIA APG \"Checkbox (Mixed-State)\"):\n * `<input type=\"checkbox\">` checked when every value in `values` is in the group's optimistic\n * set, mixed (`el.indeterminate`, `data-indeterminate`) when some are. A click checks every value\n * when mixed, unchecks every value when checked, and from unchecked restores the last partial\n * combination of its values the group committed (seeded at mount), else checks every value. Each\n * click is one dispatch through the Root's `valueChangeAction`. Never submitted (no `name`).\n * \"Its values\" are those whose Items are enabled: disabled Items are left alone (see `values`).\n *\n * Owned keys (conventions 1.2): `type`, `name` (removed), `value` (removed), `checked`,\n * `defaultChecked`, `indeterminate` (stripped; the property is set), `required` (removed), `form`\n * (removed), `autoComplete` (`\"off\"`), `disabled`, `aria-checked` (removed), `data-checked`, `data-indeterminate`,\n * `data-pending`, `data-disabled`. `onChange` is merged.\n */\nexport function CheckboxGroupParent({\n  values,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  render,\n  ...rest\n}: CheckboxGroupParentProps) {\n  const ctx = useCheckboxGroupContext(\"CheckboxGroup.Parent\");\n  // The values the Parent acts on: `values` minus disabled Items (design 6.2). A hydration\n  // render uses every value, as the server did (it cannot know which Items are disabled), so\n  // that the DOM `checked` it hydrates can be compared with the derivation for the\n  // pre-hydration report below, also when this Parent hydrates after the Items registered.\n  const hydrating = useSyncExternalStore(\n    subscribeNothing,\n    () => false,\n    () => true,\n  );\n  const { disabledItems } = ctx;\n  const effective = useMemo(\n    () => (hydrating ? values : enabledValues(values, disabledItems)),\n    [hydrating, values, disabledItems],\n  );\n  const { checked, indeterminate } = derive(effective, ctx.optimistic);\n  const pending = ctx.pending && values.some((v) => ctx.optimistic.has(v) !== ctx.committed.has(v));\n  const disabled = ctx.disabled || disabledProp;\n\n  // The APG restore memory: the last partial combination of `values` the group committed\n  // (design 6.2). Committed, not optimistic, so a partial state that only ever rolled back is\n  // never restored. The first run seeds it from the mount-time value.\n  const memory = useRef<readonly string[] | null>(null);\n  const { committed } = ctx;\n  useLayoutEffect(() => {\n    const inCommitted = effective.filter((v) => committed.has(v));\n    if (inCommitted.length > 0 && inCommitted.length < effective.length) {\n      memory.current = inCommitted;\n    }\n  }, [committed, effective]);\n\n  const inputRef = useNativeChecked({\n    type: \"checkbox\",\n    component: \"CheckboxGroup.Parent\",\n    checked,\n    indeterminate,\n    group: true,\n    onItemMounted: (el) => {\n      if (el !== null) {\n        // A click before hydration flipped the box (design 8.1): report it as the Parent's\n        // semantic before the Root reads the group (which leaves disabled Items alone). Firefox's\n        // form-state restoration cannot cause this: the Parent renders `autocomplete=\"off\"`.\n        if (el.checked !== checked) ctx.reportParent(values, el.checked);\n        syncPresence(el, \"data-checked\", checked);\n        syncPresence(el, \"data-indeterminate\", indeterminate);\n        syncPresence(el, \"data-pending\", pending);\n        syncPresence(el, \"data-disabled\", disabled);\n      }\n      ctx.onItemMounted(el);\n    },\n    defaultChecked:\n      ctx.defaultValue === undefined ? undefined : derive(effective, ctx.defaultValue).checked,\n  });\n\n  // A form reset sets the Parent's DOM `checked` to its `defaultChecked`, which in controlled\n  // mode is React's mount-time value and can be stale (its `values` changed, it mounted after the\n  // Items with another value). The Parent re-renders only if the Root dispatches; otherwise put\n  // the derivation back (the Root's own microtask, queued after this one, may still dispatch,\n  // and the re-render re-applies `checked`).\n  const node = useRef<HTMLInputElement | null>(null);\n  const ref = useCallback(\n    (el: HTMLInputElement) => {\n      node.current = el;\n      const cleanup = inputRef(el);\n      return () => {\n        node.current = null;\n        if (typeof cleanup === \"function\") cleanup();\n      };\n    },\n    [inputRef],\n  );\n  useFormReset(node, () => {\n    const el = node.current;\n    if (el !== null && el.checked !== checked) el.checked = checked;\n  });\n\n  /** The click cycle of design 6.2. */\n  const cyclePatch = (): CheckboxGroupPatch => {\n    if (checked) return { added: [], removed: [...effective] };\n    if (indeterminate) {\n      return { added: effective.filter((v) => !ctx.optimistic.has(v)), removed: [] };\n    }\n    const restore = memory.current?.filter((v) => effective.includes(v)) ?? [];\n    return { added: restore.length > 0 ? restore : [...effective], removed: [] };\n  };\n\n  const state: CheckboxGroupParentState = { values, checked, indeterminate, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"input\">, CheckboxGroupParentState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    ref,\n    props: rest,\n    libraryProps: {\n      type: \"checkbox\",\n      // A Parent is not a value: it never posts and is never required.\n      name: undefined,\n      value: undefined,\n      required: undefined,\n      form: undefined,\n      // Nothing to restore (it is not a value): without this, Firefox restores its `checked` on\n      // reload and the mount read would take it for a click before hydration (design 8.1).\n      autoComplete: \"off\",\n      checked,\n      defaultChecked: undefined,\n      // Not a DOM attribute; the hook sets the property. Owned so that a `render` element's own\n      // `indeterminate` prop (which react-dom would warn about) is stripped.\n      ...({ indeterminate: undefined } as object),\n      \"aria-checked\": undefined,\n      disabled: disabledProp,\n      \"data-checked\": dataAttr(checked),\n      \"data-indeterminate\": dataAttr(indeterminate),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) return;\n        const nativeEvent = event.nativeEvent;\n        guardCheckableChange(\n          nativeEvent,\n          () => ctx.apply(cyclePatch(), nativeEvent),\n          \"CheckboxGroup.Parent\",\n        );\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"CheckboxGroup.Parent\", transition, element);\n}\n\nCheckboxGroupParent.displayName = \"CheckboxGroupParent\";\n"],"mappings":"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"}

package/dist/checkbox-group/checkbox-group-root.d.mts

@@ -0,0 +1,100 @@
+import { ActionDetails, ChangeAction, ChangeReason, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/checkbox-group/checkbox-group-root.d.ts
+/** Details passed as the second argument of `valueChangeAction`. */
+export interface CheckboxGroupValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user toggled an Item or a Parent (click, Space, label click; `event` is the
+   * native `click`). `"platform"`: the browser changed the checked boxes itself: a form reset
+   * (`event` is the `reset` event), or clicks before hydration / Firefox form-state restoration
+   * found at mount (`event` is `undefined`).
+   */
+  readonly reason: ChangeReason;
+  /** Values this dispatch checked, in document order of their Items (values with no Item last). */
+  readonly added: readonly string[];
+  /** Values this dispatch unchecked, same order. */
+  readonly removed: readonly string[];
+}
+export interface CheckboxGroupRootState {
+  /**
+   * Optimistic checked values, in document order of the Items as of the Root's last render
+   * (values with no Item last). Items reordered by a component that re-renders without the Root
+   * keep the previous order here until the Root renders again; `next` and `details` of
+   * `valueChangeAction` always read the current DOM order. The server render and the first client
+   * render use the value's own order. Content rendered from it must not suspend.
+   */
+  readonly value: readonly string[];
+  /** An action dispatched through this group is in flight. */
+  readonly pending: boolean;
+  /** The `disabled` prop. */
+  readonly disabled: boolean;
+}
+export interface CheckboxGroupRootProps extends Omit<ComponentPropsWithRef<"fieldset">, "className" | "style" | "children" | "defaultValue" | "defaultChecked" | "name" | "disabled" | "form"> {
+  /**
+   * Controlled checked values. `[]` checks nothing; `undefined` means uncontrolled. Order is not
+   * significant and duplicates are ignored: the value is a set.
+   *
+   * A form reset returns each box to the `checked` it had when *that box* mounted (React sets
+   * `defaultChecked` once, from the initial `checked`). The reset is offered to
+   * `valueChangeAction` as a `"platform"` change; for a stable target use `defaultValue`.
+   */
+  value?: string[];
+  /**
+   * Initial values in uncontrolled mode. Defaults to `[]`. Also the values a form reset returns
+   * to: the latest prop value is mirrored into the boxes' `defaultChecked`.
+   */
+  defaultValue?: string[];
+  /**
+   * Runs inside the Root's transition whenever the set of checked values changes. May be sync
+   * or async (also a Server Function); rejections reach the nearest Error Boundary and roll the
+   * change back.
+   *
+   * `next` is the whole set as a fresh array in document order of the Items; treat it as a set.
+   * `details.added` / `details.removed` say what changed. When controlled and updating after
+   * your own `await`, prefer a functional update keyed by `added` / `removed` over
+   * `setValue(next)`: two overlapping actions completing out of order would otherwise land the
+   * older whole set last. A `setState` placed after your own `await` is not a Transition update;
+   * wrap it in `startTransition` (React limitation). `details.event.preventDefault()` is not a
+   * veto; use controlled mode to veto a change.
+   */
+  valueChangeAction?: ChangeAction<string[], CheckboxGroupValueChangeDetails>;
+  /**
+   * The `name` shared by every Item (form data key: `formData.getAll(name)`). Defaults to a
+   * `useId()` value; pass a real name when the group is inside a `<form>` you submit.
+   */
+  name?: string;
+  /** The `form` attribute, applied to the fieldset and to every Item. */
+  form?: string;
+  /**
+   * "At least one Item must be checked." Rendered as native `required` on every Item while no
+   * enabled Item is checked, and on none once one is: values with no Item and checked disabled
+   * Items (neither is submitted) do not satisfy it. Until the Items have mounted (server HTML,
+   * before hydration) any checked value satisfies it. Not exposed on the fieldset (ARIA does not
+   * allow `aria-required` on role `group`): say it in the `Label` or through `aria-describedby`.
+   */
+  required?: boolean;
+  /** Renders `<fieldset disabled>`: every Item and Parent is disabled and unfocusable. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, CheckboxGroupRootState>;
+  style?: StateValue<CSSProperties | undefined, CheckboxGroupRootState>;
+  children?: StateValue<ReactNode, CheckboxGroupRootState>;
+  /** Replace the rendered element. Must keep a `<fieldset>`. */
+  render?: RenderProp<ComponentPropsWithRef<"fieldset">, CheckboxGroupRootState>;
+}
+/**
+ * `<fieldset>` that owns the group's state (a set of values), the transition, the shared `name`,
+ * the form-reset listener, the mount reconciliation and the group-level `required`
+ * (design/components/checkbox-group.md 14.3). Carries `data-pending` while `valueChangeAction`
+ * is in flight. Its implicit role is `group`; no `role` is written.
+ *
+ * Owned keys (conventions 1.2): `disabled`, `form`, `data-pending`, `data-disabled`.
+ *
+ * Unlike RadioGroup, Items may hydrate after their Root (a Suspense boundary between them): a
+ * click before an Item hydrated is reconciled when it does.
+ */
+export declare function CheckboxGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required, disabled, className, style, children, render, ...rest }: CheckboxGroupRootProps): import("react").JSX.Element;
+export declare namespace CheckboxGroupRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=checkbox-group-root.d.mts.map

package/dist/checkbox-group/checkbox-group-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-root.d.mts","names":[],"sources":["../../src/checkbox-group/checkbox-group-root.tsx"],"mappings":";;;;iBA8BiB,wCAAwC;;;;;;;WAO9C,QAAQ;;WAER;;WAEA;;iBAGM;;;;;;;;WAQN;;WAEA;;WAEA;;iBAGM,+BAA+B,KAC9C;;;;;;;;;EAkBA;;;;;EAKA;;;;;;;;;;;;;;EAcA,oBAAoB,uBAAuB;;;;;EAK3C;;EAEA;;;;;;;;EAQA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;;;;;;;;wBAoFzC,oBACd,OACA,cACA,mBACA,MAAM,UACN,MACA,UACA,UACA,WACA,OACA,UACA,WACG,QACF,yCAAsB,IAAA;yBAbT"}