@arun-dev/headless 4.0.0 → 4.2.0

package/dist/radio-group/index.js

@@ -0,0 +1,157 @@
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/radio-group/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Item: () => RadioGroupItem,
+  Root: () => RadioGroupRoot
+});
+
+// src/radio-group/RadioGroupRoot.tsx
+import { useCallback, useEffect, useId, useMemo, useRef } from "react";
+
+// src/radio-group/RadioGroupRootContext.ts
+import { createContext, useContext } from "react";
+var RadioGroupRootContext = createContext(null);
+function useRadioGroupRootContext() {
+  const context = useContext(RadioGroupRootContext);
+  if (context === null) {
+    throw new Error("<RadioGroup.Item> must be rendered inside <RadioGroup.Root>.");
+  }
+  return context;
+}
+
+// src/radio-group/radioGroupDataAttributes.ts
+function radioGroupItemDataAttributes({ checked, disabled }) {
+  return {
+    "data-checked": checked ? "" : void 0,
+    "data-unchecked": checked ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+function radioGroupDataAttributes({ disabled }) {
+  return {
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
+// src/radio-group/RadioGroupRoot.tsx
+import { jsx } from "react/jsx-runtime";
+function radiosIn(root, name) {
+  if (!root) return [];
+  return [...root.querySelectorAll('input[type="radio"]')].filter(
+    (input) => input.name === name
+  );
+}
+function RadioGroupRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  name: nameProp,
+  disabled = false,
+  required = false,
+  form,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? null,
+    name: "RadioGroup.Root",
+    state: "value"
+  });
+  const generatedName = useId();
+  const name = nameProp ?? generatedName;
+  const commitValue = useCallback(
+    (next) => {
+      setValue(next);
+      onValueChange?.(next);
+    },
+    [setValue, onValueChange]
+  );
+  const elementRef = useRef(null);
+  const { current: initialValue } = useRef(value);
+  useEffect(() => {
+    const owner = radiosIn(elementRef.current, name)[0]?.form;
+    if (!owner) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (event.defaultPrevented) return;
+        for (const input of radiosIn(elementRef.current, name)) {
+          input.checked = input.value === value;
+        }
+        if (value === initialValue) return;
+        commitValue(initialValue);
+      });
+    }
+    owner.addEventListener("reset", onReset);
+    return () => owner.removeEventListener("reset", onReset);
+  }, [name, value, commitValue, initialValue]);
+  const state = useMemo(
+    () => ({ value, disabled, required, name, form, select: commitValue }),
+    [value, disabled, required, name, form, commitValue]
+  );
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "radiogroup",
+      "aria-disabled": disabled || void 0,
+      "aria-required": required || void 0,
+      ...radioGroupDataAttributes(state),
+      className,
+      children,
+      ref: elementRef
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx(RadioGroupRootContext.Provider, { value: state, children: element });
+}
+
+// src/radio-group/RadioGroupItem.tsx
+import { useMemo as useMemo2 } from "react";
+function RadioGroupItem({
+  value,
+  disabled: disabledProp = false,
+  className,
+  render,
+  ...rest
+}) {
+  const group = useRadioGroupRootContext();
+  const disabled = group.disabled || disabledProp;
+  const checked = group.value === value;
+  const state = useMemo2(() => ({ checked, disabled }), [checked, disabled]);
+  return useRender({
+    render,
+    defaultTagName: "input",
+    props: {
+      type: "radio",
+      name: group.name,
+      value,
+      // Controlled from the group's value, so React restores it after any change the
+      // group declines — the platform never gets the last word on what is checked.
+      checked,
+      form: group.form,
+      required: group.required || void 0,
+      disabled: disabled || void 0,
+      ...radioGroupItemDataAttributes(state),
+      className,
+      onChange() {
+        if (disabled) return;
+        group.select(value);
+      }
+    },
+    consumerProps: rest
+  });
+}
+export {
+  index_parts_exports as RadioGroup
+};

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.2.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,26 @@
         "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"
+      }
+    },
+    "./radio-group": {
+      "import": {
+        "types": "./dist/radio-group/index.d.ts",
+        "default": "./dist/radio-group/index.js"
+      },
+      "require": {
+        "types": "./dist/radio-group/index.d.cts",
+        "default": "./dist/radio-group/index.cjs"
+      }
+    },
     "./switch": {
       "import": {
         "types": "./dist/switch/index.d.ts",