@arun-dev/headless 2.0.0 → 2.1.0

package/dist/button/index.cjs

@@ -60,10 +60,20 @@ 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;

package/dist/button/index.js

@@ -1,10 +1,10 @@
 import {
   retractActivationProps,
   useButton
-} from "../chunk-ER7IAVR5.js";
+} from "../chunk-TNMGZWHA.js";
 import {
   useRender
-} from "../chunk-IGKX2XWC.js";
+} from "../chunk-PYLPZVWQ.js";
 
 // src/button/Button.tsx
 import { cloneElement } from "react";

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

@@ -34,10 +34,20 @@ 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;

package/dist/{chunk-ER7IAVR5.js → chunk-TNMGZWHA.js}

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

package/dist/index.cjs

@@ -59,10 +59,20 @@ 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;

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

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

package/dist/index.js

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

package/dist/switch/index.cjs

@@ -67,10 +67,20 @@ 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;

package/dist/switch/index.d.cts

@@ -30,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;
     /**
@@ -47,8 +57,8 @@ 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, nativeButton, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;

package/dist/switch/index.d.ts

@@ -30,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;
     /**
@@ -47,8 +57,8 @@ 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, nativeButton, onCheckedChange, disabled, name, value, className, children, render, ...rest }: SwitchRootProps & Record<string, unknown>): react.JSX.Element;

package/dist/switch/index.js

@@ -4,13 +4,13 @@ import {
 import {
   retractActivationProps,
   useButton
-} from "../chunk-ER7IAVR5.js";
+} from "../chunk-TNMGZWHA.js";
 import {
   __export,
   booleanAttribute,
   disabledAttribute,
   useRender
-} from "../chunk-IGKX2XWC.js";
+} from "../chunk-PYLPZVWQ.js";
 
 // src/switch/index.parts.ts
 var index_parts_exports = {};

package/package.json

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