@arun-dev/headless 1.0.0 → 2.0.0

package/dist/button/index.cjs

@@ -68,6 +68,15 @@ function makeEventPreventable(event) {
 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 +86,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 +126,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 +243,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-ER7IAVR5.js";
 import {
   useRender
-} from "../chunk-HWG3GMTO.js";
+} from "../chunk-IGKX2XWC.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-2XSRAJHB.js → chunk-ER7IAVR5.js}

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

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

@@ -42,6 +42,15 @@ function makeEventPreventable(event) {
 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 +60,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 +101,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/index.cjs

@@ -67,6 +67,15 @@ function makeEventPreventable(event) {
 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 +85,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 +128,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

@@ -98,14 +98,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

@@ -98,14 +98,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-IGKX2XWC.js";
 export {
   booleanAttribute,
   disabledAttribute,

package/dist/switch/index.cjs

@@ -75,6 +75,15 @@ function makeEventPreventable(event) {
 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 +93,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 +256,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 +290,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function SwitchRoot({
   checked: checkedProp,
   defaultChecked,
+  nativeButton,
   onCheckedChange,
   disabled = false,
   name,
@@ -302,7 +307,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 +319,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 +353,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;
     /**
@@ -42,7 +51,7 @@ interface SwitchRootProps {
  * or `aria-labelledby`. That is the consumer's decision, not something 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;
     /**
@@ -42,7 +51,7 @@ interface SwitchRootProps {
  * or `aria-labelledby`. That is the consumer's decision, not something 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-ER7IAVR5.js";
 import {
   __export,
   booleanAttribute,
   disabledAttribute,
   useRender
-} from "../chunk-HWG3GMTO.js";
+} from "../chunk-IGKX2XWC.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.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",