@arun-dev/headless 2.1.0 → 3.0.1

package/dist/index.cjs

@@ -20,9 +20,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  booleanAttribute: () => booleanAttribute,
-  disabledAttribute: () => disabledAttribute,
-  getStateAttributes: () => getStateAttributes,
   mergeProps: () => mergeProps,
   useControlled: () => useControlled,
   useRender: () => useRender
@@ -61,18 +58,9 @@ function isSyntheticEvent(event) {
 function makeEventPreventable(event) {
   if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
   const target = event;
-  const prevent = () => {
+  target.preventComponentHandler = () => {
     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;
@@ -112,38 +100,13 @@ function mergeProps(...objects) {
 
 // src/core/useRender.ts
 var import_react = require("react");
-
-// src/core/stateAttributes.ts
-function getStateAttributes(state, mapping) {
-  if (!mapping) return {};
-  const attributes = {};
-  for (const key of Object.keys(state)) {
-    const toAttributes = mapping[key];
-    if (!toAttributes) continue;
-    const result = toAttributes(state[key]);
-    if (result) Object.assign(attributes, result);
-  }
-  return attributes;
-}
-function booleanAttribute(whenTrue, whenFalse) {
-  return (value) => {
-    if (value) return { [whenTrue]: "" };
-    return whenFalse ? { [whenFalse]: "" } : null;
-  };
-}
-var disabledAttribute = booleanAttribute("data-disabled");
-
-// src/core/useRender.ts
 function useRender({
   render,
   defaultTagName,
   props,
-  consumerProps,
-  state,
-  stateAttributes
+  consumerProps
 }) {
-  const attributes = state ? getStateAttributes(state, stateAttributes) : {};
-  const merged = mergeProps(attributes, props, consumerProps);
+  const merged = mergeProps(props, consumerProps);
   if ((0, import_react.isValidElement)(render)) {
     return (0, import_react.cloneElement)(render, mergeProps(merged, render.props));
   }
@@ -184,9 +147,6 @@ function useControlled({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  booleanAttribute,
-  disabledAttribute,
-  getStateAttributes,
   mergeProps,
   useControlled,
   useRender

package/dist/index.d.cts

@@ -24,6 +24,11 @@ type ComponentEvent<E = unknown> = E & {
  * `undefined` values are skipped, so an absent key on a later object never
  * clobbers a value set by an earlier one.
  *
+ * `children` is deliberately not special-cased: it is a plain value, so the last
+ * object to declare it wins. That is what lets a `render` element either inherit the
+ * component's children (it declares none, so the key is absent and skipped) or supply
+ * its own (it declares them, and they win like any other value).
+ *
  * **Event handlers run right to left** — the last object's handler first, the first
  * object's last. Since a component passes its own props first and the consumer's last,
  * the consumer's handler runs before the component's and can stop it:
@@ -37,73 +42,29 @@ type ComponentEvent<E = unknown> = E & {
  */
 declare function mergeProps(...objects: (UnknownProps | undefined)[]): UnknownProps;
 
-/**
- * Projects a component's state onto the DOM as `data-*` attributes.
- *
- * This is the contract between behaviour and styling. A headless component owns no
- * class names, so the only way CSS can react to `checked` or `disabled` is for the
- * state to be visible in the DOM:
- *
- *   .switch[data-checked] { background: var(--switch-track-bg-checked); }
- *
- * Doing it through a declared mapping rather than by hand keeps the attributes
- * consistent across components — Base UI's Checkbox emits eleven of them, which is
- * not something anyone maintains by hand — and makes the state a component exposes
- * a single readable object rather than scattered JSX.
- */
-/**
- * Maps one state value to the attributes it should produce. Return `null` for
- * "no attribute". A single value may produce several, and mutually exclusive
- * attributes are how a third state stays addressable: with only `data-checked`,
- * `:not([data-checked])` would match both unchecked *and* indeterminate.
- */
-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
- * false, so both sides are addressable at equal specificity.
- *
- *   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.
  *
  * Every part goes through here, which is what makes the whole library consistent:
- * one place decides how props merge, how state reaches the DOM, and what element
- * comes out. A part supplies its default element, its state, and the props it wants;
- * the consumer can replace the element entirely via `render` without losing any of it.
+ * one place decides how props merge and what element comes out. A part supplies its
+ * default element and the props it wants; the consumer can replace the element
+ * entirely via `render` without losing any of it.
  *
  * Currently uses no hooks. The `use` prefix matches the API it will grow into
  * (memoised merging, so parts stop re-rendering their children needlessly) and keeps
  * call sites stable when that lands.
  */
-interface UseRenderParams<State extends Record<string, unknown>> {
-    /** Element to render instead of the default. Props, className and ref are merged onto it. */
+interface UseRenderParams {
+    /**
+     * Element to render instead of the default. Props, className and ref are merged onto it.
+     *
+     * Its own props are the last word, `children` included: an element with no children of
+     * its own takes the component's, and one with children keeps them.
+     */
     render?: ReactElement | undefined;
     /** Tag rendered when `render` is not supplied. */
     defaultTagName: string;
-    /** The component's own props. */
+    /** The component's own props, including any `data-*` state attributes it emits. */
     props?: UnknownProps;
     /**
      * The consumer's props, spread from `...rest`.
@@ -113,12 +74,8 @@ interface UseRenderParams<State extends Record<string, unknown>> {
      * 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, consumerProps, state, stateAttributes, }: UseRenderParams<State>): ReactElement;
+declare function useRender({ render, defaultTagName, props, consumerProps, }: UseRenderParams): ReactElement;
 
 /**
  * Supports both controlled and uncontrolled use of a single value.
@@ -138,4 +95,4 @@ declare function useControlled<T>({ controlled, default: defaultValue, name, sta
     state?: string;
 }): [T, (next: T) => void];
 
-export { type ComponentEvent, type StateAttributeMapping, type UnknownProps, type UseRenderParams, booleanAttribute, disabledAttribute, getStateAttributes, mergeProps, useControlled, useRender };
+export { type ComponentEvent, type UnknownProps, type UseRenderParams, mergeProps, useControlled, useRender };

package/dist/index.d.ts

@@ -24,6 +24,11 @@ type ComponentEvent<E = unknown> = E & {
  * `undefined` values are skipped, so an absent key on a later object never
  * clobbers a value set by an earlier one.
  *
+ * `children` is deliberately not special-cased: it is a plain value, so the last
+ * object to declare it wins. That is what lets a `render` element either inherit the
+ * component's children (it declares none, so the key is absent and skipped) or supply
+ * its own (it declares them, and they win like any other value).
+ *
  * **Event handlers run right to left** — the last object's handler first, the first
  * object's last. Since a component passes its own props first and the consumer's last,
  * the consumer's handler runs before the component's and can stop it:
@@ -37,73 +42,29 @@ type ComponentEvent<E = unknown> = E & {
  */
 declare function mergeProps(...objects: (UnknownProps | undefined)[]): UnknownProps;
 
-/**
- * Projects a component's state onto the DOM as `data-*` attributes.
- *
- * This is the contract between behaviour and styling. A headless component owns no
- * class names, so the only way CSS can react to `checked` or `disabled` is for the
- * state to be visible in the DOM:
- *
- *   .switch[data-checked] { background: var(--switch-track-bg-checked); }
- *
- * Doing it through a declared mapping rather than by hand keeps the attributes
- * consistent across components — Base UI's Checkbox emits eleven of them, which is
- * not something anyone maintains by hand — and makes the state a component exposes
- * a single readable object rather than scattered JSX.
- */
-/**
- * Maps one state value to the attributes it should produce. Return `null` for
- * "no attribute". A single value may produce several, and mutually exclusive
- * attributes are how a third state stays addressable: with only `data-checked`,
- * `:not([data-checked])` would match both unchecked *and* indeterminate.
- */
-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
- * false, so both sides are addressable at equal specificity.
- *
- *   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.
  *
  * Every part goes through here, which is what makes the whole library consistent:
- * one place decides how props merge, how state reaches the DOM, and what element
- * comes out. A part supplies its default element, its state, and the props it wants;
- * the consumer can replace the element entirely via `render` without losing any of it.
+ * one place decides how props merge and what element comes out. A part supplies its
+ * default element and the props it wants; the consumer can replace the element
+ * entirely via `render` without losing any of it.
  *
  * Currently uses no hooks. The `use` prefix matches the API it will grow into
  * (memoised merging, so parts stop re-rendering their children needlessly) and keeps
  * call sites stable when that lands.
  */
-interface UseRenderParams<State extends Record<string, unknown>> {
-    /** Element to render instead of the default. Props, className and ref are merged onto it. */
+interface UseRenderParams {
+    /**
+     * Element to render instead of the default. Props, className and ref are merged onto it.
+     *
+     * Its own props are the last word, `children` included: an element with no children of
+     * its own takes the component's, and one with children keeps them.
+     */
     render?: ReactElement | undefined;
     /** Tag rendered when `render` is not supplied. */
     defaultTagName: string;
-    /** The component's own props. */
+    /** The component's own props, including any `data-*` state attributes it emits. */
     props?: UnknownProps;
     /**
      * The consumer's props, spread from `...rest`.
@@ -113,12 +74,8 @@ interface UseRenderParams<State extends Record<string, unknown>> {
      * 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, consumerProps, state, stateAttributes, }: UseRenderParams<State>): ReactElement;
+declare function useRender({ render, defaultTagName, props, consumerProps, }: UseRenderParams): ReactElement;
 
 /**
  * Supports both controlled and uncontrolled use of a single value.
@@ -138,4 +95,4 @@ declare function useControlled<T>({ controlled, default: defaultValue, name, sta
     state?: string;
 }): [T, (next: T) => void];
 
-export { type ComponentEvent, type StateAttributeMapping, type UnknownProps, type UseRenderParams, booleanAttribute, disabledAttribute, getStateAttributes, mergeProps, useControlled, useRender };
+export { type ComponentEvent, type UnknownProps, type UseRenderParams, mergeProps, useControlled, useRender };

package/dist/index.js

@@ -2,16 +2,10 @@ import {
   useControlled
 } from "./chunk-UEIB3I3T.js";
 import {
-  booleanAttribute,
-  disabledAttribute,
-  getStateAttributes,
   mergeProps,
   useRender
-} from "./chunk-PYLPZVWQ.js";
+} from "./chunk-OQTWWZ4B.js";
 export {
-  booleanAttribute,
-  disabledAttribute,
-  getStateAttributes,
   mergeProps,
   useControlled,
   useRender