@arun-dev/headless 2.1.0 → 3.0.1

package/dist/switch/index.js

@@ -1,16 +1,10 @@
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";
-import {
-  retractActivationProps,
-  useButton
-} from "../chunk-TNMGZWHA.js";
 import {
   __export,
-  booleanAttribute,
-  disabledAttribute,
   useRender
-} from "../chunk-PYLPZVWQ.js";
+} from "../chunk-OQTWWZ4B.js";
 
 // src/switch/index.parts.ts
 var index_parts_exports = {};
@@ -19,8 +13,8 @@ __export(index_parts_exports, {
   Thumb: () => SwitchThumb
 });
 
-// src/switch/root/SwitchRoot.tsx
-import { cloneElement, useMemo } from "react";
+// src/switch/SwitchRoot.tsx
+import { useEffect, useMemo, useRef } from "react";
 
 // src/switch/SwitchRootContext.ts
 import { createContext, useContext } from "react";
@@ -33,18 +27,20 @@ function useSwitchRootContext() {
   return context;
 }
 
-// src/switch/stateAttributes.ts
-var switchStateAttributes = {
-  checked: booleanAttribute("data-checked", "data-unchecked"),
-  disabled: disabledAttribute
-};
+// src/switch/switchDataAttributes.ts
+function switchDataAttributes({ checked, disabled }) {
+  return {
+    "data-checked": checked ? "" : void 0,
+    "data-unchecked": checked ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
 
-// src/switch/root/SwitchRoot.tsx
+// src/switch/SwitchRoot.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function SwitchRoot({
   checked: checkedProp,
   defaultChecked,
-  nativeButton,
   onCheckedChange,
   disabled = false,
   name,
@@ -61,53 +57,91 @@ function SwitchRoot({
     state: "checked"
   });
   const state = useMemo(() => ({ checked, disabled }), [checked, disabled]);
-  const isNativeButton = nativeButton ?? (render === void 0 || render.type === "button");
-  const { props: consumerProps, ref: buttonRef } = useButton({
-    disabled,
-    native: isNativeButton,
-    props: rest
-  });
-  const safeRender = disabled && !isNativeButton && render !== void 0 ? cloneElement(render, retractActivationProps(render.props)) : render;
+  const elementRef = useRef(null);
+  const inputRef = useRef(null);
+  useNativeButtonWarning(elementRef);
+  useFormReset({ elementRef, inputRef, checked, setChecked, onCheckedChange });
   const element = useRender({
-    render: safeRender,
+    render,
     defaultTagName: "button",
-    state,
-    stateAttributes: switchStateAttributes,
     props: {
+      // Without this a switch inside a form would submit it on every toggle.
+      type: "button",
       role: "switch",
       "aria-checked": checked,
+      // The platform suppresses activation, focus and the click handler below.
+      disabled: disabled || void 0,
+      ...switchDataAttributes(state),
       className,
       children,
-      ref: buttonRef,
+      ref: elementRef,
       onClick() {
-        if (disabled) return;
         const next = !checked;
         setChecked(next);
         onCheckedChange?.(next);
       }
     },
-    consumerProps
+    consumerProps: rest
   });
   return /* @__PURE__ */ jsxs(SwitchRootContext.Provider, { value: state, children: [
     element,
-    name !== void 0 && checked ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value }) : null
+    name !== void 0 ? /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        hidden: true,
+        readOnly: true,
+        name,
+        value,
+        checked,
+        disabled
+      }
+    ) : null
   ] });
 }
-
-// src/switch/thumb/SwitchThumb.tsx
-function SwitchThumb({
-  className,
-  children,
-  render,
-  ...rest
+function useFormReset({
+  elementRef,
+  inputRef,
+  checked,
+  setChecked,
+  onCheckedChange
 }) {
+  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;
+        setChecked(initialChecked);
+        onCheckedChange?.(initialChecked);
+      });
+    }
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, [elementRef, inputRef, checked, setChecked, onCheckedChange, initialChecked]);
+}
+function useNativeButtonWarning(elementRef) {
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") return;
+    const element = elementRef.current;
+    if (!element || element.tagName === "BUTTON") return;
+    console.error(
+      `Switch.Root rendered <${element.tagName.toLowerCase()}> instead of <button>. Focus, Space and Enter activation and \`disabled\` all come from the button element; pass a \`render\` component that forwards its props to one.`
+    );
+  }, [elementRef]);
+}
+
+// src/switch/SwitchThumb.tsx
+function SwitchThumb({ className, children, render, ...rest }) {
   const state = useSwitchRootContext();
   return useRender({
     render,
     defaultTagName: "span",
-    state,
-    stateAttributes: switchStateAttributes,
-    props: { "aria-hidden": true, className, children },
+    props: { "aria-hidden": true, ...switchDataAttributes(state), className, children },
     consumerProps: rest
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "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",
@@ -79,7 +79,7 @@
     "react-dom": "19.2.8",
     "tsup": "8.5.1",
     "typescript": "5.9.3",
-    "vitest": "3.2.6",
+    "vitest": "4.1.11",
     "@arun-dev/config": "0.0.0"
   },
   "scripts": {

package/dist/chunk-TNMGZWHA.js

@@ -1,96 +0,0 @@
-import {
-  mergeProps
-} from "./chunk-PYLPZVWQ.js";
-
-// src/useButton.ts
-import { useEffect, useRef } from "react";
-var ACTIVATION_HANDLERS = [
-  "onClick",
-  "onDoubleClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onPointerDown",
-  "onPointerUp",
-  "onTouchStart",
-  "onTouchEnd",
-  "onKeyDown",
-  "onKeyUp",
-  "onKeyPress"
-];
-function activationHandlers() {
-  return {
-    onKeyDown(event) {
-      if (event.target !== event.currentTarget || event.defaultPrevented) return;
-      if (event.key === " ") {
-        event.preventDefault();
-        return;
-      }
-      if (event.key === "Enter") {
-        event.preventDefault();
-        click(event.currentTarget);
-      }
-    },
-    onKeyUp(event) {
-      if (event.target !== event.currentTarget || event.defaultPrevented) return;
-      if (event.key === " ") click(event.currentTarget);
-    }
-  };
-}
-function click(element) {
-  if (element && typeof element.click === "function") {
-    element.click();
-  }
-}
-function useButton({
-  disabled = false,
-  native,
-  props = {}
-}) {
-  const elementRef = useRef(null);
-  useEffect(() => {
-    if (process.env.NODE_ENV === "production") return;
-    const element = elementRef.current;
-    if (!element) return;
-    const isButtonTag = element.tagName === "BUTTON";
-    if (native && !isButtonTag) {
-      console.error(
-        `A component expected a native <button> but rendered <${element.tagName.toLowerCase()}>. Focus, keyboard activation and \`disabled\` will not behave natively.`
-      );
-    } else if (!native && isButtonTag) {
-      console.error(
-        "A component rendered a native <button> while treating it as a non-native element, so it carries synthesised attributes it does not need."
-      );
-    }
-  }, [native]);
-  return { props: buttonProps({ disabled, native, props }), ref: elementRef };
-}
-function buttonProps({ disabled, native, props }) {
-  if (!disabled) {
-    return native ? mergeProps({ type: "button" }, props) : mergeProps({ tabIndex: 0 }, activationHandlers(), props);
-  }
-  if (native) return mergeProps({ type: "button" }, props, { disabled: true, "data-disabled": "" });
-  const sanitised = {};
-  for (const key of Object.keys(props)) {
-    if (key === "href" || ACTIVATION_HANDLERS.includes(key)) continue;
-    sanitised[key] = props[key];
-  }
-  return {
-    ...sanitised,
-    "aria-disabled": true,
-    "data-disabled": "",
-    // Mirrors a native disabled button, which is not focusable.
-    tabIndex: -1
-  };
-}
-function retractActivationProps(props) {
-  const overrides = {};
-  for (const key of Object.keys(props)) {
-    if (key === "href" || ACTIVATION_HANDLERS.includes(key)) overrides[key] = void 0;
-  }
-  return overrides;
-}
-
-export {
-  useButton,
-  retractActivationProps
-};