@arun-dev/headless 4.0.0 → 4.1.0

package/dist/checkbox/index.cjs

@@ -0,0 +1,302 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/checkbox/index.ts
+var checkbox_exports = {};
+__export(checkbox_exports, {
+  Checkbox: () => index_parts_exports
+});
+module.exports = __toCommonJS(checkbox_exports);
+
+// src/checkbox/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Indicator: () => CheckboxIndicator,
+  Root: () => CheckboxRoot
+});
+
+// src/checkbox/CheckboxRoot.tsx
+var import_react5 = require("react");
+
+// src/core/useControlled.ts
+var import_react = require("react");
+function useControlled({
+  controlled,
+  default: defaultValue,
+  name = "Component",
+  state = "value"
+}) {
+  const { current: isControlled } = (0, import_react.useRef)(controlled !== void 0);
+  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
+  const defaultRef = (0, import_react.useRef)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (controlled !== void 0)) {
+      console.error(
+        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
+      );
+    }
+    if (!isControlled && defaultRef.current !== defaultValue) {
+      console.error(
+        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
+      );
+    }
+  }
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/core/useFormReset.ts
+var import_react2 = require("react");
+function useFormReset({
+  elementRef,
+  inputRef,
+  value,
+  inputChecked,
+  commit
+}) {
+  const { current: initialValue } = (0, import_react2.useRef)(value);
+  (0, import_react2.useEffect)(() => {
+    const form = elementRef.current?.form;
+    if (!form) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (event.defaultPrevented) return;
+        if (inputRef.current) inputRef.current.checked = inputChecked;
+        if (value === initialValue) return;
+        commit(initialValue);
+      });
+    }
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, [elementRef, inputRef, value, inputChecked, commit, initialValue]);
+}
+
+// src/core/useRender.ts
+var import_react3 = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react3.isValidElement)(render)) {
+    return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react3.createElement)(defaultTagName, merged);
+}
+
+// src/checkbox/CheckboxRootContext.ts
+var import_react4 = require("react");
+var CheckboxRootContext = (0, import_react4.createContext)(null);
+function useCheckboxRootContext() {
+  const context = (0, import_react4.useContext)(CheckboxRootContext);
+  if (context === null) {
+    throw new Error("<Checkbox.Indicator> must be rendered inside <Checkbox.Root>.");
+  }
+  return context;
+}
+
+// src/checkbox/checkboxDataAttributes.ts
+function checkboxDataAttributes({ checked, disabled }) {
+  return {
+    "data-checked": checked === true ? "" : void 0,
+    "data-unchecked": checked === false ? "" : void 0,
+    "data-indeterminate": checked === "indeterminate" ? "" : void 0,
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
+// src/checkbox/CheckboxRoot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CheckboxRoot({
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  disabled = false,
+  name,
+  value = "on",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [checked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked ?? false,
+    name: "Checkbox.Root",
+    state: "checked"
+  });
+  const commitChecked = (0, import_react5.useCallback)(
+    (next) => {
+      setChecked(next);
+      onCheckedChange?.(next);
+    },
+    [setChecked, onCheckedChange]
+  );
+  const state = (0, import_react5.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
+  const elementRef = (0, import_react5.useRef)(null);
+  const inputRef = (0, import_react5.useRef)(null);
+  const submitted = checked === true;
+  useFormReset({
+    elementRef,
+    inputRef,
+    value: checked,
+    inputChecked: submitted,
+    commit: commitChecked
+  });
+  const element = useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      // Without this a checkbox inside a form would submit it on every toggle.
+      type: "button",
+      role: "checkbox",
+      // The ARIA spelling of the third state is "mixed", not "indeterminate".
+      "aria-checked": checked === "indeterminate" ? "mixed" : checked,
+      // The platform suppresses activation and focus on a native button.
+      disabled: disabled || void 0,
+      ...checkboxDataAttributes(state),
+      className,
+      children,
+      ref: elementRef,
+      onClick() {
+        if (disabled) return;
+        commitChecked(!submitted);
+      }
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CheckboxRootContext.Provider, { value: state, children: [
+    element,
+    name !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        hidden: true,
+        readOnly: true,
+        name,
+        value,
+        checked: submitted,
+        disabled
+      }
+    ) : null
+  ] });
+}
+
+// src/checkbox/CheckboxIndicator.tsx
+function CheckboxIndicator({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const state = useCheckboxRootContext();
+  return useRender({
+    render,
+    defaultTagName: "span",
+    props: { "aria-hidden": true, ...checkboxDataAttributes(state), className, children },
+    consumerProps: rest
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkbox
+});

package/dist/checkbox/index.d.cts

@@ -0,0 +1,123 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+/**
+ * A checkbox has three states, not two.
+ *
+ * `'indeterminate'` is a state of the checkbox itself, not a separate flag beside
+ * `checked` — a single union makes `checked && indeterminate` unrepresentable, and
+ * keeps one source of state to derive everything else from (decision 10).
+ *
+ * Native HTML splits them, but only because `.indeterminate` is a DOM property with no
+ * attribute behind it: it is purely visual there, is cleared by the first click, and
+ * survives `form.reset()`. None of that is worth reproducing.
+ */
+type CheckedState = boolean | 'indeterminate';
+/** The state Checkbox.Root shares with its parts, and projects as `data-*` attributes. */
+type CheckboxState = {
+    checked: CheckedState;
+    disabled: boolean;
+};
+
+/**
+ * Checkbox.Root's own props. Everything else — `id`, `className`, `children`, `aria-*`,
+ * `data-*`, event handlers — comes from React's own `<button>` props, so it is typed
+ * and checked without being declared here.
+ *
+ * `id` in particular is how a checkbox gets an accessible name, paired with a
+ * `<label htmlFor>`. A wrapping `<label>` names the rendered `<button>` too, but
+ * `jsx-a11y/label-has-associated-control` rejects a button as a nested control, so the
+ * explicit pairing is the one that passes lint.
+ */
+type CheckboxRootOwnProps = {
+    /**
+     * Controlled state. Provide `onCheckedChange` alongside it.
+     *
+     * Never `undefined` once mounted. The mode is latched at mount, so an `undefined`
+     * first render makes the checkbox uncontrolled for good and every value passed later
+     * is ignored. Coalesce at the call site — `checked={x ?? false}`.
+     */
+    checked?: CheckedState;
+    /** Initial state when uncontrolled. Read once, at mount. */
+    defaultChecked?: CheckedState;
+    onCheckedChange?: (checked: CheckedState) => void;
+    disabled?: boolean;
+    /**
+     * Submits with the enclosing form when checked, mirroring a native checkbox:
+     * an unchecked, indeterminate or disabled control contributes nothing.
+     */
+    name?: string;
+    /** Value submitted when checked. Defaults to `"on"`, as a native checkbox does. */
+    value?: string;
+    /**
+     * Component to render instead of the default `<button>`. Props, className, event
+     * handlers and ref are merged onto it.
+     *
+     * The default `<button>` is what supplies focus, Space and Enter activation and
+     * `disabled`; what `render` produces instead is the consumer's choice.
+     */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type CheckboxRootProps = CheckboxRootOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof CheckboxRootOwnProps>;
+/**
+ * A checkbox — a three-state control whose value is read on submit, distinct from a
+ * switch in that it does not take effect at once.
+ *
+ * A `<button role="checkbox">` rather than an `<input type="checkbox">`, because an
+ * input is void and cannot hold an indicator — the content test in decision 7, the same
+ * one Switch.Root fails. Everything the input was still good for, the hidden one below
+ * keeps doing. The platform supplies focusability, Space and Enter activation and
+ * `disabled`, so none of it is synthesised here.
+ *
+ * Inside a form it behaves as a native checkbox would: `form.reset()` returns it to the
+ * state it mounted with, indeterminate included — which a native checkbox does not
+ * manage, since `.indeterminate` is a DOM property the platform never resets.
+ *
+ * It has no accessible name of its own — pair it with a `<label htmlFor>` by `id`, or
+ * pass `aria-label` or `aria-labelledby`. That is the consumer's decision, not one a
+ * headless component should guess.
+ */
+declare function CheckboxRoot({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, name, value, className, children, render, ...rest }: CheckboxRootProps): react.JSX.Element;
+
+/**
+ * Checkbox.Indicator's own props. Everything else — `id`, `className`, `children`,
+ * `aria-*`, `data-*` — comes from React's own `<span>` props.
+ */
+type CheckboxIndicatorOwnProps = {
+    /** Element to render instead of the default `<span>`. */
+    render?: ReactElement;
+    /** Ref to the rendered element, whatever `render` makes it. */
+    ref?: Ref<HTMLElement>;
+};
+type CheckboxIndicatorProps = CheckboxIndicatorOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof CheckboxIndicatorOwnProps>;
+/**
+ * Where the check or the dash goes.
+ *
+ * Ships neither — like every part here it has no glyph, no class and no colour, so a
+ * bare `<Checkbox.Indicator />` renders an empty `<span>`. Supply the mark as children,
+ * or draw it in your own CSS off the `data-*` attributes below. `@arun-dev/ui` is the
+ * layer that has an opinion about what a checkmark looks like.
+ *
+ * Reads state from the Root rather than taking props, so a consumer cannot get the two
+ * out of step. Carries the same `data-*` attributes as the Root, so it can be styled
+ * from either — on the indicator itself, or by descending from the Root:
+ *
+ *   .indicator[data-checked] { opacity: 1; }
+ *   .checkbox[data-checked] .indicator { opacity: 1; }
+ *
+ * Always rendered, in every state. The alternative — unmounting it when unchecked —
+ * would leave nothing for CSS to transition from, and nothing to hold an unchecked
+ * mark for the designs that want one.
+ *
+ * Purely presentational — hidden from assistive technology, since the Root already
+ * announces the state.
+ */
+declare function CheckboxIndicator({ className, children, render, ...rest }: CheckboxIndicatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { CheckboxIndicator as Indicator, CheckboxRoot as Root };
+}
+
+export { index_parts as Checkbox, type CheckboxIndicatorProps, type CheckboxRootProps, type CheckboxState, type CheckedState };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,123 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+/**
+ * A checkbox has three states, not two.
+ *
+ * `'indeterminate'` is a state of the checkbox itself, not a separate flag beside
+ * `checked` — a single union makes `checked && indeterminate` unrepresentable, and
+ * keeps one source of state to derive everything else from (decision 10).
+ *
+ * Native HTML splits them, but only because `.indeterminate` is a DOM property with no
+ * attribute behind it: it is purely visual there, is cleared by the first click, and
+ * survives `form.reset()`. None of that is worth reproducing.
+ */
+type CheckedState = boolean | 'indeterminate';
+/** The state Checkbox.Root shares with its parts, and projects as `data-*` attributes. */
+type CheckboxState = {
+    checked: CheckedState;
+    disabled: boolean;
+};
+
+/**
+ * Checkbox.Root's own props. Everything else — `id`, `className`, `children`, `aria-*`,
+ * `data-*`, event handlers — comes from React's own `<button>` props, so it is typed
+ * and checked without being declared here.
+ *
+ * `id` in particular is how a checkbox gets an accessible name, paired with a
+ * `<label htmlFor>`. A wrapping `<label>` names the rendered `<button>` too, but
+ * `jsx-a11y/label-has-associated-control` rejects a button as a nested control, so the
+ * explicit pairing is the one that passes lint.
+ */
+type CheckboxRootOwnProps = {
+    /**
+     * Controlled state. Provide `onCheckedChange` alongside it.
+     *
+     * Never `undefined` once mounted. The mode is latched at mount, so an `undefined`
+     * first render makes the checkbox uncontrolled for good and every value passed later
+     * is ignored. Coalesce at the call site — `checked={x ?? false}`.
+     */
+    checked?: CheckedState;
+    /** Initial state when uncontrolled. Read once, at mount. */
+    defaultChecked?: CheckedState;
+    onCheckedChange?: (checked: CheckedState) => void;
+    disabled?: boolean;
+    /**
+     * Submits with the enclosing form when checked, mirroring a native checkbox:
+     * an unchecked, indeterminate or disabled control contributes nothing.
+     */
+    name?: string;
+    /** Value submitted when checked. Defaults to `"on"`, as a native checkbox does. */
+    value?: string;
+    /**
+     * Component to render instead of the default `<button>`. Props, className, event
+     * handlers and ref are merged onto it.
+     *
+     * The default `<button>` is what supplies focus, Space and Enter activation and
+     * `disabled`; what `render` produces instead is the consumer's choice.
+     */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type CheckboxRootProps = CheckboxRootOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof CheckboxRootOwnProps>;
+/**
+ * A checkbox — a three-state control whose value is read on submit, distinct from a
+ * switch in that it does not take effect at once.
+ *
+ * A `<button role="checkbox">` rather than an `<input type="checkbox">`, because an
+ * input is void and cannot hold an indicator — the content test in decision 7, the same
+ * one Switch.Root fails. Everything the input was still good for, the hidden one below
+ * keeps doing. The platform supplies focusability, Space and Enter activation and
+ * `disabled`, so none of it is synthesised here.
+ *
+ * Inside a form it behaves as a native checkbox would: `form.reset()` returns it to the
+ * state it mounted with, indeterminate included — which a native checkbox does not
+ * manage, since `.indeterminate` is a DOM property the platform never resets.
+ *
+ * It has no accessible name of its own — pair it with a `<label htmlFor>` by `id`, or
+ * pass `aria-label` or `aria-labelledby`. That is the consumer's decision, not one a
+ * headless component should guess.
+ */
+declare function CheckboxRoot({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, name, value, className, children, render, ...rest }: CheckboxRootProps): react.JSX.Element;
+
+/**
+ * Checkbox.Indicator's own props. Everything else — `id`, `className`, `children`,
+ * `aria-*`, `data-*` — comes from React's own `<span>` props.
+ */
+type CheckboxIndicatorOwnProps = {
+    /** Element to render instead of the default `<span>`. */
+    render?: ReactElement;
+    /** Ref to the rendered element, whatever `render` makes it. */
+    ref?: Ref<HTMLElement>;
+};
+type CheckboxIndicatorProps = CheckboxIndicatorOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof CheckboxIndicatorOwnProps>;
+/**
+ * Where the check or the dash goes.
+ *
+ * Ships neither — like every part here it has no glyph, no class and no colour, so a
+ * bare `<Checkbox.Indicator />` renders an empty `<span>`. Supply the mark as children,
+ * or draw it in your own CSS off the `data-*` attributes below. `@arun-dev/ui` is the
+ * layer that has an opinion about what a checkmark looks like.
+ *
+ * Reads state from the Root rather than taking props, so a consumer cannot get the two
+ * out of step. Carries the same `data-*` attributes as the Root, so it can be styled
+ * from either — on the indicator itself, or by descending from the Root:
+ *
+ *   .indicator[data-checked] { opacity: 1; }
+ *   .checkbox[data-checked] .indicator { opacity: 1; }
+ *
+ * Always rendered, in every state. The alternative — unmounting it when unchecked —
+ * would leave nothing for CSS to transition from, and nothing to hold an unchecked
+ * mark for the designs that want one.
+ *
+ * Purely presentational — hidden from assistive technology, since the Root already
+ * announces the state.
+ */
+declare function CheckboxIndicator({ className, children, render, ...rest }: CheckboxIndicatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { CheckboxIndicator as Indicator, CheckboxRoot as Root };
+}
+
+export { index_parts as Checkbox, type CheckboxIndicatorProps, type CheckboxRootProps, type CheckboxState, type CheckedState };

package/dist/checkbox/index.js

@@ -0,0 +1,138 @@
+import {
+  useFormReset
+} from "../chunk-IWUVUY76.js";
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/checkbox/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Indicator: () => CheckboxIndicator,
+  Root: () => CheckboxRoot
+});
+
+// src/checkbox/CheckboxRoot.tsx
+import { useCallback, useMemo, useRef } from "react";
+
+// src/checkbox/CheckboxRootContext.ts
+import { createContext, useContext } from "react";
+var CheckboxRootContext = createContext(null);
+function useCheckboxRootContext() {
+  const context = useContext(CheckboxRootContext);
+  if (context === null) {
+    throw new Error("<Checkbox.Indicator> must be rendered inside <Checkbox.Root>.");
+  }
+  return context;
+}
+
+// src/checkbox/checkboxDataAttributes.ts
+function checkboxDataAttributes({ checked, disabled }) {
+  return {
+    "data-checked": checked === true ? "" : void 0,
+    "data-unchecked": checked === false ? "" : void 0,
+    "data-indeterminate": checked === "indeterminate" ? "" : void 0,
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
+// src/checkbox/CheckboxRoot.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CheckboxRoot({
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  disabled = false,
+  name,
+  value = "on",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [checked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked ?? false,
+    name: "Checkbox.Root",
+    state: "checked"
+  });
+  const commitChecked = useCallback(
+    (next) => {
+      setChecked(next);
+      onCheckedChange?.(next);
+    },
+    [setChecked, onCheckedChange]
+  );
+  const state = useMemo(() => ({ checked, disabled }), [checked, disabled]);
+  const elementRef = useRef(null);
+  const inputRef = useRef(null);
+  const submitted = checked === true;
+  useFormReset({
+    elementRef,
+    inputRef,
+    value: checked,
+    inputChecked: submitted,
+    commit: commitChecked
+  });
+  const element = useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      // Without this a checkbox inside a form would submit it on every toggle.
+      type: "button",
+      role: "checkbox",
+      // The ARIA spelling of the third state is "mixed", not "indeterminate".
+      "aria-checked": checked === "indeterminate" ? "mixed" : checked,
+      // The platform suppresses activation and focus on a native button.
+      disabled: disabled || void 0,
+      ...checkboxDataAttributes(state),
+      className,
+      children,
+      ref: elementRef,
+      onClick() {
+        if (disabled) return;
+        commitChecked(!submitted);
+      }
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsxs(CheckboxRootContext.Provider, { value: state, children: [
+    element,
+    name !== void 0 ? /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        hidden: true,
+        readOnly: true,
+        name,
+        value,
+        checked: submitted,
+        disabled
+      }
+    ) : null
+  ] });
+}
+
+// src/checkbox/CheckboxIndicator.tsx
+function CheckboxIndicator({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const state = useCheckboxRootContext();
+  return useRender({
+    render,
+    defaultTagName: "span",
+    props: { "aria-hidden": true, ...checkboxDataAttributes(state), className, children },
+    consumerProps: rest
+  });
+}
+export {
+  index_parts_exports as Checkbox
+};

package/dist/chunk-IWUVUY76.js

@@ -0,0 +1,29 @@
+// src/core/useFormReset.ts
+import { useEffect, useRef } from "react";
+function useFormReset({
+  elementRef,
+  inputRef,
+  value,
+  inputChecked,
+  commit
+}) {
+  const { current: initialValue } = useRef(value);
+  useEffect(() => {
+    const form = elementRef.current?.form;
+    if (!form) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (event.defaultPrevented) return;
+        if (inputRef.current) inputRef.current.checked = inputChecked;
+        if (value === initialValue) return;
+        commit(initialValue);
+      });
+    }
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, [elementRef, inputRef, value, inputChecked, commit, initialValue]);
+}
+
+export {
+  useFormReset
+};

package/dist/switch/index.cjs

@@ -32,7 +32,7 @@ __export(index_parts_exports, {
 });
 
 // src/switch/SwitchRoot.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/core/useControlled.ts
 var import_react = require("react");
@@ -67,8 +67,34 @@ function useControlled({
   return [value, setValue];
 }
 
-// src/core/useRender.ts
+// src/core/useFormReset.ts
 var import_react2 = require("react");
+function useFormReset({
+  elementRef,
+  inputRef,
+  value,
+  inputChecked,
+  commit
+}) {
+  const { current: initialValue } = (0, import_react2.useRef)(value);
+  (0, import_react2.useEffect)(() => {
+    const form = elementRef.current?.form;
+    if (!form) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (event.defaultPrevented) return;
+        if (inputRef.current) inputRef.current.checked = inputChecked;
+        if (value === initialValue) return;
+        commit(initialValue);
+      });
+    }
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, [elementRef, inputRef, value, inputChecked, commit, initialValue]);
+}
+
+// src/core/useRender.ts
+var import_react3 = require("react");
 
 // src/core/mergeProps.ts
 function isEventHandler(key) {
@@ -150,17 +176,17 @@ function useRender({
   consumerProps
 }) {
   const merged = mergeProps(props, consumerProps);
-  if ((0, import_react2.isValidElement)(render)) {
-    return (0, import_react2.cloneElement)(render, mergeProps(merged, render.props));
+  if ((0, import_react3.isValidElement)(render)) {
+    return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
   }
-  return (0, import_react2.createElement)(defaultTagName, merged);
+  return (0, import_react3.createElement)(defaultTagName, merged);
 }
 
 // src/switch/SwitchRootContext.ts
-var import_react3 = require("react");
-var SwitchRootContext = (0, import_react3.createContext)(null);
+var import_react4 = require("react");
+var SwitchRootContext = (0, import_react4.createContext)(null);
 function useSwitchRootContext() {
-  const context = (0, import_react3.useContext)(SwitchRootContext);
+  const context = (0, import_react4.useContext)(SwitchRootContext);
   if (context === null) {
     throw new Error("<Switch.Thumb> must be rendered inside <Switch.Root>.");
   }
@@ -196,17 +222,23 @@ function SwitchRoot({
     name: "Switch.Root",
     state: "checked"
   });
-  const commitChecked = (0, import_react4.useCallback)(
+  const commitChecked = (0, import_react5.useCallback)(
     (next) => {
       setChecked(next);
       onCheckedChange?.(next);
     },
     [setChecked, onCheckedChange]
   );
-  const state = (0, import_react4.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
-  const elementRef = (0, import_react4.useRef)(null);
-  const inputRef = (0, import_react4.useRef)(null);
-  useFormReset({ elementRef, inputRef, checked, commitChecked });
+  const state = (0, import_react5.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
+  const elementRef = (0, import_react5.useRef)(null);
+  const inputRef = (0, import_react5.useRef)(null);
+  useFormReset({
+    elementRef,
+    inputRef,
+    value: checked,
+    inputChecked: checked,
+    commit: commitChecked
+  });
   const element = useRender({
     render,
     defaultTagName: "button",
@@ -245,28 +277,6 @@ function SwitchRoot({
     ) : null
   ] });
 }
-function useFormReset({
-  elementRef,
-  inputRef,
-  checked,
-  commitChecked
-}) {
-  const { current: initialChecked } = (0, import_react4.useRef)(checked);
-  (0, import_react4.useEffect)(() => {
-    const form = elementRef.current?.form;
-    if (!form) return;
-    function onReset(event) {
-      queueMicrotask(() => {
-        if (event.defaultPrevented) return;
-        if (inputRef.current) inputRef.current.checked = checked;
-        if (checked === initialChecked) return;
-        commitChecked(initialChecked);
-      });
-    }
-    form.addEventListener("reset", onReset);
-    return () => form.removeEventListener("reset", onReset);
-  }, [elementRef, inputRef, checked, commitChecked, initialChecked]);
-}
 
 // src/switch/SwitchThumb.tsx
 function SwitchThumb({ className, children, render, ...rest }) {

package/dist/switch/index.js

@@ -1,3 +1,6 @@
+import {
+  useFormReset
+} from "../chunk-IWUVUY76.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";
@@ -14,7 +17,7 @@ __export(index_parts_exports, {
 });
 
 // src/switch/SwitchRoot.tsx
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 
 // src/switch/SwitchRootContext.ts
 import { createContext, useContext } from "react";
@@ -66,7 +69,13 @@ function SwitchRoot({
   const state = useMemo(() => ({ checked, disabled }), [checked, disabled]);
   const elementRef = useRef(null);
   const inputRef = useRef(null);
-  useFormReset({ elementRef, inputRef, checked, commitChecked });
+  useFormReset({
+    elementRef,
+    inputRef,
+    value: checked,
+    inputChecked: checked,
+    commit: commitChecked
+  });
   const element = useRender({
     render,
     defaultTagName: "button",
@@ -105,28 +114,6 @@ function SwitchRoot({
     ) : null
   ] });
 }
-function useFormReset({
-  elementRef,
-  inputRef,
-  checked,
-  commitChecked
-}) {
-  const { current: initialChecked } = useRef(checked);
-  useEffect(() => {
-    const form = elementRef.current?.form;
-    if (!form) return;
-    function onReset(event) {
-      queueMicrotask(() => {
-        if (event.defaultPrevented) return;
-        if (inputRef.current) inputRef.current.checked = checked;
-        if (checked === initialChecked) return;
-        commitChecked(initialChecked);
-      });
-    }
-    form.addEventListener("reset", onReset);
-    return () => form.removeEventListener("reset", onReset);
-  }, [elementRef, inputRef, checked, commitChecked, initialChecked]);
-}
 
 // src/switch/SwitchThumb.tsx
 function SwitchThumb({ className, children, render, ...rest }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Unstyled React behaviour primitives — render engine, controlled/uncontrolled state, and data-* state projection. Ships no CSS and no class names.",
   "license": "MIT",
   "type": "module",
@@ -44,6 +44,16 @@
         "default": "./dist/button/index.cjs"
       }
     },
+    "./checkbox": {
+      "import": {
+        "types": "./dist/checkbox/index.d.ts",
+        "default": "./dist/checkbox/index.js"
+      },
+      "require": {
+        "types": "./dist/checkbox/index.d.cts",
+        "default": "./dist/checkbox/index.cjs"
+      }
+    },
     "./switch": {
       "import": {
         "types": "./dist/switch/index.d.ts",