@arun-dev/headless 2.0.0 → 3.0.0

package/dist/switch/index.d.cts

@@ -1,7 +1,16 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, Ref } from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
 
-interface SwitchRootProps {
+/**
+ * Switch.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 switch gets an accessible name, paired with a
+ * `<label htmlFor>`: the rendered `<button>` is not named implicitly by a wrapping
+ * `<label>`, and `jsx-a11y/label-has-associated-control` rejects it as a nested control.
+ */
+type SwitchRootOwnProps = {
     /**
      * Controlled state. Provide `onCheckedChange` alongside it.
      *
@@ -12,15 +21,6 @@ interface SwitchRootProps {
     checked?: boolean;
     /** Initial state when uncontrolled. Read once, at mount. */
     defaultChecked?: boolean;
-    /**
-     * Whether the rendered element is a native `<button>`.
-     *
-     * Inferred from `render`, which is right for an element literal. Set it explicitly
-     * when rendering a *component* — `render={<Tooltip.Trigger />}` cannot be inspected,
-     * so it is treated as non-native and picks up attributes it does not need. A mismatch
-     * logs a development warning.
-     */
-    nativeButton?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     /**
@@ -30,36 +30,44 @@ interface SwitchRootProps {
     name?: string;
     /** Value submitted when checked. Defaults to `"on"`, as a native checkbox does. */
     value?: string;
-    className?: string;
-    children?: ReactNode;
     /**
-     * Element to render instead of the default `<button>`. Props, className, event
+     * Component to render instead of the default `<button>`. Props, className, event
      * handlers and ref are merged onto it.
+     *
+     * It must render a native `<button>` — a wrapper such as `<Tooltip.Trigger />` that
+     * forwards its props to one. Anything else is reported in development.
      */
     render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
     ref?: Ref<HTMLElement>;
-}
+};
+type SwitchRootProps = SwitchRootOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof SwitchRootOwnProps>;
 /**
  * A switch — an immediate on/off control, distinct from a checkbox in that it takes
  * effect at once rather than on submit.
  *
- * Renders a native `<button>`, which supplies focusability, Space and Enter
- * activation, and the disabled semantics for free. Per the WAI-ARIA switch pattern
- * it carries `role="switch"` and `aria-checked`.
+ * Always a native `<button>`, which is the whole reason this component is short: the
+ * platform supplies focusability, Space and Enter activation, and `disabled`, so none
+ * of it is synthesised here. Per the WAI-ARIA switch pattern it carries `role="switch"`
+ * and `aria-checked`.
  *
- * It has no accessible name of its own — wrap it in a `<label>`, or pass `aria-label`
- * or `aria-labelledby`. That is the consumer's decision, not something a headless
- * component should guess.
+ * 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 SwitchRoot({ checked: checkedProp, defaultChecked, nativeButton, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;
+declare function SwitchRoot({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps): react.JSX.Element;
 
-interface SwitchThumbProps {
-    className?: string;
-    children?: ReactNode;
+/**
+ * Switch.Thumb's own props. Everything else — `id`, `className`, `children`, `aria-*`,
+ * `data-*` — comes from React's own `<span>` props.
+ */
+type SwitchThumbOwnProps = {
     /** Element to render instead of the default `<span>`. */
     render?: ReactElement;
+    /** Ref to the rendered element, whatever `render` makes it. */
     ref?: Ref<HTMLElement>;
-}
+};
+type SwitchThumbProps = SwitchThumbOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof SwitchThumbOwnProps>;
 /**
  * The moving part of the switch.
  *
@@ -73,7 +81,7 @@ interface SwitchThumbProps {
  * Purely presentational — hidden from assistive technology, since the Root already
  * announces the state.
  */
-declare function SwitchThumb({ className, children, render, ...rest }: SwitchThumbProps & Record<string, unknown>): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function SwitchThumb({ className, children, render, ...rest }: SwitchThumbProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare namespace index_parts {
   export { SwitchRoot as Root, SwitchThumb as Thumb };

package/dist/switch/index.d.ts

@@ -1,7 +1,16 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, Ref } from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
 
-interface SwitchRootProps {
+/**
+ * Switch.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 switch gets an accessible name, paired with a
+ * `<label htmlFor>`: the rendered `<button>` is not named implicitly by a wrapping
+ * `<label>`, and `jsx-a11y/label-has-associated-control` rejects it as a nested control.
+ */
+type SwitchRootOwnProps = {
     /**
      * Controlled state. Provide `onCheckedChange` alongside it.
      *
@@ -12,15 +21,6 @@ interface SwitchRootProps {
     checked?: boolean;
     /** Initial state when uncontrolled. Read once, at mount. */
     defaultChecked?: boolean;
-    /**
-     * Whether the rendered element is a native `<button>`.
-     *
-     * Inferred from `render`, which is right for an element literal. Set it explicitly
-     * when rendering a *component* — `render={<Tooltip.Trigger />}` cannot be inspected,
-     * so it is treated as non-native and picks up attributes it does not need. A mismatch
-     * logs a development warning.
-     */
-    nativeButton?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     /**
@@ -30,36 +30,44 @@ interface SwitchRootProps {
     name?: string;
     /** Value submitted when checked. Defaults to `"on"`, as a native checkbox does. */
     value?: string;
-    className?: string;
-    children?: ReactNode;
     /**
-     * Element to render instead of the default `<button>`. Props, className, event
+     * Component to render instead of the default `<button>`. Props, className, event
      * handlers and ref are merged onto it.
+     *
+     * It must render a native `<button>` — a wrapper such as `<Tooltip.Trigger />` that
+     * forwards its props to one. Anything else is reported in development.
      */
     render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
     ref?: Ref<HTMLElement>;
-}
+};
+type SwitchRootProps = SwitchRootOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof SwitchRootOwnProps>;
 /**
  * A switch — an immediate on/off control, distinct from a checkbox in that it takes
  * effect at once rather than on submit.
  *
- * Renders a native `<button>`, which supplies focusability, Space and Enter
- * activation, and the disabled semantics for free. Per the WAI-ARIA switch pattern
- * it carries `role="switch"` and `aria-checked`.
+ * Always a native `<button>`, which is the whole reason this component is short: the
+ * platform supplies focusability, Space and Enter activation, and `disabled`, so none
+ * of it is synthesised here. Per the WAI-ARIA switch pattern it carries `role="switch"`
+ * and `aria-checked`.
  *
- * It has no accessible name of its own — wrap it in a `<label>`, or pass `aria-label`
- * or `aria-labelledby`. That is the consumer's decision, not something a headless
- * component should guess.
+ * 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 SwitchRoot({ checked: checkedProp, defaultChecked, nativeButton, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;
+declare function SwitchRoot({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps): react.JSX.Element;
 
-interface SwitchThumbProps {
-    className?: string;
-    children?: ReactNode;
+/**
+ * Switch.Thumb's own props. Everything else — `id`, `className`, `children`, `aria-*`,
+ * `data-*` — comes from React's own `<span>` props.
+ */
+type SwitchThumbOwnProps = {
     /** Element to render instead of the default `<span>`. */
     render?: ReactElement;
+    /** Ref to the rendered element, whatever `render` makes it. */
     ref?: Ref<HTMLElement>;
-}
+};
+type SwitchThumbProps = SwitchThumbOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof SwitchThumbOwnProps>;
 /**
  * The moving part of the switch.
  *
@@ -73,7 +81,7 @@ interface SwitchThumbProps {
  * Purely presentational — hidden from assistive technology, since the Root already
  * announces the state.
  */
-declare function SwitchThumb({ className, children, render, ...rest }: SwitchThumbProps & Record<string, unknown>): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function SwitchThumb({ className, children, render, ...rest }: SwitchThumbProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare namespace index_parts {
   export { SwitchRoot as Root, SwitchThumb as Thumb };

package/dist/switch/index.js

@@ -1,16 +1,10 @@
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";
-import {
-  retractActivationProps,
-  useButton
-} from "../chunk-ER7IAVR5.js";
 import {
   __export,
-  booleanAttribute,
-  disabledAttribute,
   useRender
-} from "../chunk-IGKX2XWC.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,54 @@ 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 = useNativeButtonWarning();
   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", { type: "checkbox", hidden: true, readOnly: true, name, value, checked }) : null
   ] });
 }
+function useNativeButtonWarning() {
+  const elementRef = useRef(null);
+  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.`
+    );
+  }, []);
+  return elementRef;
+}
 
-// src/switch/thumb/SwitchThumb.tsx
-function SwitchThumb({
-  className,
-  children,
-  render,
-  ...rest
-}) {
+// 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.0.0",
+  "version": "3.0.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",

package/dist/chunk-ER7IAVR5.js

@@ -1,96 +0,0 @@
-import {
-  mergeProps
-} from "./chunk-IGKX2XWC.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
-};