@arun-dev/headless 0.2.1 → 0.3.0

package/dist/{chunk-DAO4JK6U.js → chunk-LU4ZQE3V.js}

@@ -75,6 +75,7 @@ function booleanAttribute(whenTrue, whenFalse) {
     return whenFalse ? { [whenFalse]: "" } : null;
   };
 }
+var disabledAttribute = booleanAttribute("data-disabled");
 
 // src/core/useRender.ts
 import { cloneElement, createElement, isValidElement } from "react";
@@ -131,6 +132,7 @@ export {
   mergeProps,
   getStateAttributes,
   booleanAttribute,
+  disabledAttribute,
   useRender,
   useControlled
 };

package/dist/index.cjs

@@ -21,8 +21,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   booleanAttribute: () => booleanAttribute,
+  disabledAttribute: () => disabledAttribute,
   getStateAttributes: () => getStateAttributes,
   mergeProps: () => mergeProps,
+  retractActivationProps: () => retractActivationProps,
+  useButton: () => useButton,
   useControlled: () => useControlled,
   useRender: () => useRender
 });
@@ -102,6 +105,7 @@ function booleanAttribute(whenTrue, whenFalse) {
     return whenFalse ? { [whenFalse]: "" } : null;
   };
 }
+var disabledAttribute = booleanAttribute("data-disabled");
 
 // src/core/useRender.ts
 function useRender({
@@ -151,11 +155,52 @@ function useControlled({
   );
   return [value, setValue];
 }
+
+// src/useButton.ts
+var ACTIVATION_HANDLERS = [
+  "onClick",
+  "onDoubleClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onPointerDown",
+  "onPointerUp",
+  "onTouchStart",
+  "onTouchEnd",
+  "onKeyDown",
+  "onKeyUp",
+  "onKeyPress"
+];
+function useButton({ disabled = false, native, props = {} }) {
+  if (!disabled) return props;
+  if (native) return { ...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;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   booleanAttribute,
+  disabledAttribute,
   getStateAttributes,
   mergeProps,
+  retractActivationProps,
+  useButton,
   useControlled,
   useRender
 });

package/dist/index.d.cts

@@ -51,6 +51,12 @@ declare function getStateAttributes<State extends Record<string, unknown>>(state
  *   checked: booleanAttribute('data-checked', 'data-unchecked')
  */
 declare function booleanAttribute(whenTrue: string, whenFalse?: string): (value: unknown) => Record<string, string> | null;
+/**
+ * The shared spelling of the disabled state. Every component uses this rather than
+ * writing the string again, so `[data-disabled]` means the same thing system-wide and
+ * a typo cannot silently split the CSS contract.
+ */
+declare const disabledAttribute: (value: unknown) => Record<string, string> | null;
 
 /**
  * Resolves what a component part actually renders.
@@ -96,4 +102,26 @@ declare function useControlled<T>({ controlled, default: defaultValue, name, sta
     state?: string;
 }): [T, (next: T) => void];
 
-export { type StateAttributeMapping, type UnknownProps, type UseRenderParams, booleanAttribute, getStateAttributes, mergeProps, useControlled, useRender };
+interface UseButtonParams {
+    disabled?: boolean;
+    /** Whether the rendered element is a native `<button>`, which the platform disables for us. */
+    native: boolean;
+    /** Props destined for the element. Returned unchanged unless `disabled`. */
+    props?: UnknownProps;
+}
+declare function useButton({ disabled, native, props }: UseButtonParams): UnknownProps;
+/**
+ * Overrides that neutralise a consumer-supplied `render` element.
+ *
+ * `useButton` sanitises the props a component passes, but a `render` element's own
+ * props merge at the highest precedence inside `useRender`, so a `href` written
+ * directly on it survives. Those have to be retracted on the element itself:
+ *
+ *   cloneElement(render, retractActivationProps(render.props))
+ *
+ * `cloneElement` overwrites with `undefined`, which `mergeProps` cannot do — it skips
+ * `undefined` so an absent prop never clobbers a present one.
+ */
+declare function retractActivationProps(props: UnknownProps): UnknownProps;
+
+export { type StateAttributeMapping, type UnknownProps, type UseButtonParams, type UseRenderParams, booleanAttribute, disabledAttribute, getStateAttributes, mergeProps, retractActivationProps, useButton, useControlled, useRender };

package/dist/index.d.ts

@@ -51,6 +51,12 @@ declare function getStateAttributes<State extends Record<string, unknown>>(state
  *   checked: booleanAttribute('data-checked', 'data-unchecked')
  */
 declare function booleanAttribute(whenTrue: string, whenFalse?: string): (value: unknown) => Record<string, string> | null;
+/**
+ * The shared spelling of the disabled state. Every component uses this rather than
+ * writing the string again, so `[data-disabled]` means the same thing system-wide and
+ * a typo cannot silently split the CSS contract.
+ */
+declare const disabledAttribute: (value: unknown) => Record<string, string> | null;
 
 /**
  * Resolves what a component part actually renders.
@@ -96,4 +102,26 @@ declare function useControlled<T>({ controlled, default: defaultValue, name, sta
     state?: string;
 }): [T, (next: T) => void];
 
-export { type StateAttributeMapping, type UnknownProps, type UseRenderParams, booleanAttribute, getStateAttributes, mergeProps, useControlled, useRender };
+interface UseButtonParams {
+    disabled?: boolean;
+    /** Whether the rendered element is a native `<button>`, which the platform disables for us. */
+    native: boolean;
+    /** Props destined for the element. Returned unchanged unless `disabled`. */
+    props?: UnknownProps;
+}
+declare function useButton({ disabled, native, props }: UseButtonParams): UnknownProps;
+/**
+ * Overrides that neutralise a consumer-supplied `render` element.
+ *
+ * `useButton` sanitises the props a component passes, but a `render` element's own
+ * props merge at the highest precedence inside `useRender`, so a `href` written
+ * directly on it survives. Those have to be retracted on the element itself:
+ *
+ *   cloneElement(render, retractActivationProps(render.props))
+ *
+ * `cloneElement` overwrites with `undefined`, which `mergeProps` cannot do — it skips
+ * `undefined` so an absent prop never clobbers a present one.
+ */
+declare function retractActivationProps(props: UnknownProps): UnknownProps;
+
+export { type StateAttributeMapping, type UnknownProps, type UseButtonParams, type UseRenderParams, booleanAttribute, disabledAttribute, getStateAttributes, mergeProps, retractActivationProps, useButton, useControlled, useRender };

package/dist/index.js

@@ -1,14 +1,56 @@
 import {
   booleanAttribute,
+  disabledAttribute,
   getStateAttributes,
   mergeProps,
   useControlled,
   useRender
-} from "./chunk-DAO4JK6U.js";
+} from "./chunk-LU4ZQE3V.js";
+
+// src/useButton.ts
+var ACTIVATION_HANDLERS = [
+  "onClick",
+  "onDoubleClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onPointerDown",
+  "onPointerUp",
+  "onTouchStart",
+  "onTouchEnd",
+  "onKeyDown",
+  "onKeyUp",
+  "onKeyPress"
+];
+function useButton({ disabled = false, native, props = {} }) {
+  if (!disabled) return props;
+  if (native) return { ...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 {
   booleanAttribute,
+  disabledAttribute,
   getStateAttributes,
   mergeProps,
+  retractActivationProps,
+  useButton,
   useControlled,
   useRender
 };

package/dist/switch/index.cjs

@@ -141,6 +141,7 @@ function booleanAttribute(whenTrue, whenFalse) {
     return whenFalse ? { [whenFalse]: "" } : null;
   };
 }
+var disabledAttribute = booleanAttribute("data-disabled");
 
 // src/core/useRender.ts
 function useRender({
@@ -172,7 +173,7 @@ function useSwitchRootContext() {
 // src/switch/stateAttributes.ts
 var switchStateAttributes = {
   checked: booleanAttribute("data-checked", "data-unchecked"),
-  disabled: booleanAttribute("data-disabled")
+  disabled: disabledAttribute
 };
 
 // src/switch/root/SwitchRoot.tsx

package/dist/switch/index.js

@@ -1,9 +1,10 @@
 import {
   __export,
   booleanAttribute,
+  disabledAttribute,
   useControlled,
   useRender
-} from "../chunk-DAO4JK6U.js";
+} from "../chunk-LU4ZQE3V.js";
 
 // src/switch/index.parts.ts
 var index_parts_exports = {};
@@ -29,7 +30,7 @@ function useSwitchRootContext() {
 // src/switch/stateAttributes.ts
 var switchStateAttributes = {
   checked: booleanAttribute("data-checked", "data-unchecked"),
-  disabled: booleanAttribute("data-disabled")
+  disabled: disabledAttribute
 };
 
 // src/switch/root/SwitchRoot.tsx

package/package.json

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