@arun-dev/headless 1.0.0 → 2.1.0

package/dist/button/index.cjs

@@ -60,14 +60,33 @@ 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 = () => {
+  const prevent = () => {
     target.componentHandlerPrevented = true;
   };
+  target.preventComponentHandler = prevent;
+  const native = event.nativeEvent;
+  const stopImmediate = native?.stopImmediatePropagation?.bind(native);
+  if (native && stopImmediate) {
+    native.stopImmediatePropagation = () => {
+      stopImmediate();
+      prevent();
+    };
+  }
 }
 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) {
@@ -77,13 +96,7 @@ function mergeProps(...objects) {
       if (value === void 0) continue;
       if (isEventHandler(key) && typeof value === "function") {
         const earlier = merged[key];
-        merged[key] = typeof earlier === "function" ? (...args) => {
-          const event = args[0];
-          if (isSyntheticEvent(event)) makeEventPreventable(event);
-          value(...args);
-          if (isComponentHandlerPrevented(event)) return;
-          earlier(...args);
-        } : value;
+        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") {
@@ -123,11 +136,12 @@ function useRender({
   render,
   defaultTagName,
   props,
+  consumerProps,
   state,
   stateAttributes
 }) {
   const attributes = state ? getStateAttributes(state, stateAttributes) : {};
-  const merged = mergeProps(attributes, ...props);
+  const merged = mergeProps(attributes, props, consumerProps);
   if ((0, import_react.isValidElement)(render)) {
     return (0, import_react.cloneElement)(render, mergeProps(merged, render.props));
   }
@@ -239,7 +253,8 @@ function Button({
   return useRender({
     render: safeRender,
     defaultTagName: "button",
-    props: [{ role, className, children }, elementProps, { ref: buttonRef }]
+    props: { role, className, children, ref: buttonRef },
+    consumerProps: elementProps
   });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/button/index.js

@@ -1,10 +1,10 @@
 import {
   retractActivationProps,
   useButton
-} from "../chunk-2XSRAJHB.js";
+} from "../chunk-TNMGZWHA.js";
 import {
   useRender
-} from "../chunk-HWG3GMTO.js";
+} from "../chunk-PYLPZVWQ.js";
 
 // src/button/Button.tsx
 import { cloneElement } from "react";
@@ -24,7 +24,8 @@ function Button({
   return useRender({
     render: safeRender,
     defaultTagName: "button",
-    props: [{ role, className, children }, elementProps, { ref: buttonRef }]
+    props: { role, className, children, ref: buttonRef },
+    consumerProps: elementProps
   });
 }
 export {

package/dist/{chunk-HWG3GMTO.js → chunk-PYLPZVWQ.js}

@@ -34,14 +34,33 @@ 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 = () => {
+  const prevent = () => {
     target.componentHandlerPrevented = true;
   };
+  target.preventComponentHandler = prevent;
+  const native = event.nativeEvent;
+  const stopImmediate = native?.stopImmediatePropagation?.bind(native);
+  if (native && stopImmediate) {
+    native.stopImmediatePropagation = () => {
+      stopImmediate();
+      prevent();
+    };
+  }
 }
 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) {
@@ -51,13 +70,7 @@ function mergeProps(...objects) {
       if (value === void 0) continue;
       if (isEventHandler(key) && typeof value === "function") {
         const earlier = merged[key];
-        merged[key] = typeof earlier === "function" ? (...args) => {
-          const event = args[0];
-          if (isSyntheticEvent(event)) makeEventPreventable(event);
-          value(...args);
-          if (isComponentHandlerPrevented(event)) return;
-          earlier(...args);
-        } : value;
+        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") {
@@ -98,11 +111,12 @@ function useRender({
   render,
   defaultTagName,
   props,
+  consumerProps,
   state,
   stateAttributes
 }) {
   const attributes = state ? getStateAttributes(state, stateAttributes) : {};
-  const merged = mergeProps(attributes, ...props);
+  const merged = mergeProps(attributes, props, consumerProps);
   if (isValidElement(render)) {
     return cloneElement(render, mergeProps(merged, render.props));
   }

package/dist/{chunk-2XSRAJHB.js → chunk-TNMGZWHA.js}

@@ -1,6 +1,6 @@
 import {
   mergeProps
-} from "./chunk-HWG3GMTO.js";
+} from "./chunk-PYLPZVWQ.js";
 
 // src/useButton.ts
 import { useEffect, useRef } from "react";

package/dist/index.cjs

@@ -59,14 +59,33 @@ 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 = () => {
+  const prevent = () => {
     target.componentHandlerPrevented = true;
   };
+  target.preventComponentHandler = prevent;
+  const native = event.nativeEvent;
+  const stopImmediate = native?.stopImmediatePropagation?.bind(native);
+  if (native && stopImmediate) {
+    native.stopImmediatePropagation = () => {
+      stopImmediate();
+      prevent();
+    };
+  }
 }
 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) {
@@ -76,13 +95,7 @@ function mergeProps(...objects) {
       if (value === void 0) continue;
       if (isEventHandler(key) && typeof value === "function") {
         const earlier = merged[key];
-        merged[key] = typeof earlier === "function" ? (...args) => {
-          const event = args[0];
-          if (isSyntheticEvent(event)) makeEventPreventable(event);
-          value(...args);
-          if (isComponentHandlerPrevented(event)) return;
-          earlier(...args);
-        } : value;
+        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") {
@@ -125,11 +138,12 @@ function useRender({
   render,
   defaultTagName,
   props,
+  consumerProps,
   state,
   stateAttributes
 }) {
   const attributes = state ? getStateAttributes(state, stateAttributes) : {};
-  const merged = mergeProps(attributes, ...props);
+  const merged = mergeProps(attributes, props, consumerProps);
   if ((0, import_react.isValidElement)(render)) {
     return (0, import_react.cloneElement)(render, mergeProps(merged, render.props));
   }

package/dist/index.d.cts

@@ -1,12 +1,6 @@
 import { ReactElement } from 'react';
 
-/**
- * Prop merging for headless components.
- *
- * A component and its consumer both want to put things on the same element. Naive
- * spreading lets whichever runs last silently destroy the other's behaviour, so each
- * kind of prop is combined rather than replaced.
- */
+/** The shape prop objects are handled as here: unknown keys, unknown values. */
 type UnknownProps = Record<string, unknown>;
 /**
  * An event a consumer's handler can use to stop the component's own handler running.
@@ -66,6 +60,17 @@ declare function mergeProps(...objects: (UnknownProps | undefined)[]): UnknownPr
 type StateAttributeMapping<State> = {
     [Key in keyof State]?: (value: State[Key]) => Record<string, string> | null;
 };
+/**
+ * Turns a state object into the `data-*` attributes a mapping declares for it.
+ *
+ * Walks the state's own keys, so a field the mapping does not cover contributes
+ * nothing, and a mapping entry that returns `null` is skipped. Entries may each
+ * emit several attributes; later keys win if two entries name the same attribute.
+ *
+ * @param state - The component's current state.
+ * @param mapping - Which fields become attributes. `undefined` yields `{}`.
+ * @returns The attributes to spread onto the element.
+ */
 declare function getStateAttributes<State extends Record<string, unknown>>(state: State, mapping: StateAttributeMapping<State> | undefined): UnknownProps;
 /**
  * The common case: a boolean that emits one attribute when true and another when
@@ -98,14 +103,22 @@ interface UseRenderParams<State extends Record<string, unknown>> {
     render?: ReactElement | undefined;
     /** Tag rendered when `render` is not supplied. */
     defaultTagName: string;
-    /** Prop objects to merge, in precedence order (later wins). */
-    props: (UnknownProps | undefined)[];
+    /** The component's own props. */
+    props?: UnknownProps;
+    /**
+     * The consumer's props, spread from `...rest`.
+     *
+     * A separate slot rather than a position in a list: precedence is then a property of
+     * this signature rather than a rule each component has to remember. A component
+     * cannot put a consumer's props before its own, because there is nowhere to put them.
+     */
+    consumerProps?: UnknownProps;
     /** The part's state, projected onto the DOM through `stateAttributes`. */
     state?: State;
     /** How each state field becomes `data-*` attributes. */
     stateAttributes?: StateAttributeMapping<State>;
 }
-declare function useRender<State extends Record<string, unknown> = Record<string, never>>({ render, defaultTagName, props, state, stateAttributes, }: UseRenderParams<State>): ReactElement;
+declare function useRender<State extends Record<string, unknown> = Record<string, never>>({ render, defaultTagName, props, consumerProps, state, stateAttributes, }: UseRenderParams<State>): ReactElement;
 
 /**
  * Supports both controlled and uncontrolled use of a single value.

package/dist/index.d.ts

@@ -1,12 +1,6 @@
 import { ReactElement } from 'react';
 
-/**
- * Prop merging for headless components.
- *
- * A component and its consumer both want to put things on the same element. Naive
- * spreading lets whichever runs last silently destroy the other's behaviour, so each
- * kind of prop is combined rather than replaced.
- */
+/** The shape prop objects are handled as here: unknown keys, unknown values. */
 type UnknownProps = Record<string, unknown>;
 /**
  * An event a consumer's handler can use to stop the component's own handler running.
@@ -66,6 +60,17 @@ declare function mergeProps(...objects: (UnknownProps | undefined)[]): UnknownPr
 type StateAttributeMapping<State> = {
     [Key in keyof State]?: (value: State[Key]) => Record<string, string> | null;
 };
+/**
+ * Turns a state object into the `data-*` attributes a mapping declares for it.
+ *
+ * Walks the state's own keys, so a field the mapping does not cover contributes
+ * nothing, and a mapping entry that returns `null` is skipped. Entries may each
+ * emit several attributes; later keys win if two entries name the same attribute.
+ *
+ * @param state - The component's current state.
+ * @param mapping - Which fields become attributes. `undefined` yields `{}`.
+ * @returns The attributes to spread onto the element.
+ */
 declare function getStateAttributes<State extends Record<string, unknown>>(state: State, mapping: StateAttributeMapping<State> | undefined): UnknownProps;
 /**
  * The common case: a boolean that emits one attribute when true and another when
@@ -98,14 +103,22 @@ interface UseRenderParams<State extends Record<string, unknown>> {
     render?: ReactElement | undefined;
     /** Tag rendered when `render` is not supplied. */
     defaultTagName: string;
-    /** Prop objects to merge, in precedence order (later wins). */
-    props: (UnknownProps | undefined)[];
+    /** The component's own props. */
+    props?: UnknownProps;
+    /**
+     * The consumer's props, spread from `...rest`.
+     *
+     * A separate slot rather than a position in a list: precedence is then a property of
+     * this signature rather than a rule each component has to remember. A component
+     * cannot put a consumer's props before its own, because there is nowhere to put them.
+     */
+    consumerProps?: UnknownProps;
     /** The part's state, projected onto the DOM through `stateAttributes`. */
     state?: State;
     /** How each state field becomes `data-*` attributes. */
     stateAttributes?: StateAttributeMapping<State>;
 }
-declare function useRender<State extends Record<string, unknown> = Record<string, never>>({ render, defaultTagName, props, state, stateAttributes, }: UseRenderParams<State>): ReactElement;
+declare function useRender<State extends Record<string, unknown> = Record<string, never>>({ render, defaultTagName, props, consumerProps, state, stateAttributes, }: UseRenderParams<State>): ReactElement;
 
 /**
  * Supports both controlled and uncontrolled use of a single value.

package/dist/index.js

@@ -7,7 +7,7 @@ import {
   getStateAttributes,
   mergeProps,
   useRender
-} from "./chunk-HWG3GMTO.js";
+} from "./chunk-PYLPZVWQ.js";
 export {
   booleanAttribute,
   disabledAttribute,

package/dist/switch/index.cjs

@@ -67,14 +67,33 @@ 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 = () => {
+  const prevent = () => {
     target.componentHandlerPrevented = true;
   };
+  target.preventComponentHandler = prevent;
+  const native = event.nativeEvent;
+  const stopImmediate = native?.stopImmediatePropagation?.bind(native);
+  if (native && stopImmediate) {
+    native.stopImmediatePropagation = () => {
+      stopImmediate();
+      prevent();
+    };
+  }
 }
 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) {
@@ -84,13 +103,7 @@ function mergeProps(...objects) {
       if (value === void 0) continue;
       if (isEventHandler(key) && typeof value === "function") {
         const earlier = merged[key];
-        merged[key] = typeof earlier === "function" ? (...args) => {
-          const event = args[0];
-          if (isSyntheticEvent(event)) makeEventPreventable(event);
-          value(...args);
-          if (isComponentHandlerPrevented(event)) return;
-          earlier(...args);
-        } : value;
+        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") {
@@ -253,11 +266,12 @@ function useRender({
   render,
   defaultTagName,
   props,
+  consumerProps,
   state,
   stateAttributes
 }) {
   const attributes = state ? getStateAttributes(state, stateAttributes) : {};
-  const merged = mergeProps(attributes, ...props);
+  const merged = mergeProps(attributes, props, consumerProps);
   if ((0, import_react3.isValidElement)(render)) {
     return (0, import_react3.cloneElement)(render, mergeProps(merged, render.props));
   }
@@ -286,6 +300,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function SwitchRoot({
   checked: checkedProp,
   defaultChecked,
+  nativeButton,
   onCheckedChange,
   disabled = false,
   name,
@@ -302,7 +317,7 @@ function SwitchRoot({
     state: "checked"
   });
   const state = (0, import_react5.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
-  const isNativeButton = render === void 0 || render.type === "button";
+  const isNativeButton = nativeButton ?? (render === void 0 || render.type === "button");
   const { props: consumerProps, ref: buttonRef } = useButton({
     disabled,
     native: isNativeButton,
@@ -314,22 +329,20 @@ function SwitchRoot({
     defaultTagName: "button",
     state,
     stateAttributes: switchStateAttributes,
-    props: [
-      {
-        role: "switch",
-        "aria-checked": checked,
-        className,
-        children,
-        onClick() {
-          if (disabled) return;
-          const next = !checked;
-          setChecked(next);
-          onCheckedChange?.(next);
-        }
-      },
-      consumerProps,
-      { ref: buttonRef }
-    ]
+    props: {
+      role: "switch",
+      "aria-checked": checked,
+      className,
+      children,
+      ref: buttonRef,
+      onClick() {
+        if (disabled) return;
+        const next = !checked;
+        setChecked(next);
+        onCheckedChange?.(next);
+      }
+    },
+    consumerProps
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SwitchRootContext.Provider, { value: state, children: [
     element,
@@ -350,7 +363,8 @@ function SwitchThumb({
     defaultTagName: "span",
     state,
     stateAttributes: switchStateAttributes,
-    props: [{ "aria-hidden": true, className, children }, rest]
+    props: { "aria-hidden": true, className, children },
+    consumerProps: rest
   });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/switch/index.d.cts

@@ -12,6 +12,15 @@ 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;
     /**
@@ -21,6 +30,16 @@ interface SwitchRootProps {
     name?: string;
     /** Value submitted when checked. Defaults to `"on"`, as a native checkbox does. */
     value?: string;
+    /**
+     * Names the switch when paired with a `<label htmlFor>`.
+     *
+     * Declared rather than left to the prop spread because it is how a switch gets an
+     * accessible name: `Switch.Root` renders a `<button>`, which a wrapping `<label>`
+     * would name implicitly, but `jsx-a11y/label-has-associated-control` rejects a
+     * `<button>` as a nested control. The explicit association keeps the rule quiet
+     * without a disable at the call site.
+     */
+    id?: string;
     className?: string;
     children?: ReactNode;
     /**
@@ -38,11 +57,11 @@ interface SwitchRootProps {
  * activation, and the disabled semantics for free. 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
+ * 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 a headless
  * component should guess.
  */
-declare function SwitchRoot({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;
+declare function SwitchRoot({ checked: checkedProp, defaultChecked, nativeButton, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;
 
 interface SwitchThumbProps {
     className?: string;

package/dist/switch/index.d.ts

@@ -12,6 +12,15 @@ 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;
     /**
@@ -21,6 +30,16 @@ interface SwitchRootProps {
     name?: string;
     /** Value submitted when checked. Defaults to `"on"`, as a native checkbox does. */
     value?: string;
+    /**
+     * Names the switch when paired with a `<label htmlFor>`.
+     *
+     * Declared rather than left to the prop spread because it is how a switch gets an
+     * accessible name: `Switch.Root` renders a `<button>`, which a wrapping `<label>`
+     * would name implicitly, but `jsx-a11y/label-has-associated-control` rejects a
+     * `<button>` as a nested control. The explicit association keeps the rule quiet
+     * without a disable at the call site.
+     */
+    id?: string;
     className?: string;
     children?: ReactNode;
     /**
@@ -38,11 +57,11 @@ interface SwitchRootProps {
  * activation, and the disabled semantics for free. 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
+ * 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 a headless
  * component should guess.
  */
-declare function SwitchRoot({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;
+declare function SwitchRoot({ checked: checkedProp, defaultChecked, nativeButton, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;
 
 interface SwitchThumbProps {
     className?: string;

package/dist/switch/index.js

@@ -4,13 +4,13 @@ import {
 import {
   retractActivationProps,
   useButton
-} from "../chunk-2XSRAJHB.js";
+} from "../chunk-TNMGZWHA.js";
 import {
   __export,
   booleanAttribute,
   disabledAttribute,
   useRender
-} from "../chunk-HWG3GMTO.js";
+} from "../chunk-PYLPZVWQ.js";
 
 // src/switch/index.parts.ts
 var index_parts_exports = {};
@@ -44,6 +44,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function SwitchRoot({
   checked: checkedProp,
   defaultChecked,
+  nativeButton,
   onCheckedChange,
   disabled = false,
   name,
@@ -60,7 +61,7 @@ function SwitchRoot({
     state: "checked"
   });
   const state = useMemo(() => ({ checked, disabled }), [checked, disabled]);
-  const isNativeButton = render === void 0 || render.type === "button";
+  const isNativeButton = nativeButton ?? (render === void 0 || render.type === "button");
   const { props: consumerProps, ref: buttonRef } = useButton({
     disabled,
     native: isNativeButton,
@@ -72,22 +73,20 @@ function SwitchRoot({
     defaultTagName: "button",
     state,
     stateAttributes: switchStateAttributes,
-    props: [
-      {
-        role: "switch",
-        "aria-checked": checked,
-        className,
-        children,
-        onClick() {
-          if (disabled) return;
-          const next = !checked;
-          setChecked(next);
-          onCheckedChange?.(next);
-        }
-      },
-      consumerProps,
-      { ref: buttonRef }
-    ]
+    props: {
+      role: "switch",
+      "aria-checked": checked,
+      className,
+      children,
+      ref: buttonRef,
+      onClick() {
+        if (disabled) return;
+        const next = !checked;
+        setChecked(next);
+        onCheckedChange?.(next);
+      }
+    },
+    consumerProps
   });
   return /* @__PURE__ */ jsxs(SwitchRootContext.Provider, { value: state, children: [
     element,
@@ -108,7 +107,8 @@ function SwitchThumb({
     defaultTagName: "span",
     state,
     stateAttributes: switchStateAttributes,
-    props: [{ "aria-hidden": true, className, children }, rest]
+    props: { "aria-hidden": true, className, children },
+    consumerProps: rest
   });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/headless",
-  "version": "1.0.0",
+  "version": "2.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",