@agentero/design-system 0.27.1 → 0.29.0

package/lib/index.d.ts

@@ -1 +1,2 @@
+export * from './merge-props';
 export * from './utils';

package/lib/index.js

@@ -1,2 +1,3 @@
 import { cn as e } from "./utils.js";
-export { e as cn };
+import { chain as t, mergeProps as n, mergeRefs as r, useMergeProps as i } from "./merge-props.js";
+export { t as chain, e as cn, n as mergeProps, r as mergeRefs, i as useMergeProps };

package/lib/merge-props.d.ts

@@ -0,0 +1,42 @@
+import { composeRefs } from '@radix-ui/react-compose-refs';
+type Handler<Args extends unknown[]> = (...args: Args) => void;
+/**
+ * Calls every callback in order with the same arguments. Skips the ones that
+ * are `null` or `undefined`, so optional handlers can be passed straight in.
+ */
+export declare const chain: <Args extends unknown[]>(...callbacks: Array<Handler<Args> | null | undefined>) => (...args: Args) => void;
+/**
+ * Merges several refs into one callback ref that assigns all of them. Radix's
+ * `composeRefs` under the design system's own name, so the whole `lib` surface
+ * reads the same: it honors React 19 cleanup functions — a callback ref that
+ * returns a cleanup gets it called on detach, the others are reset to `null`
+ * the classic way.
+ *
+ * Memoize the result (see `useMergeProps`): React re-runs a callback ref whose
+ * identity changed, so rebuilding it every render detaches and re-attaches
+ * every underlying ref each time.
+ */
+export declare const mergeRefs: typeof composeRefs;
+/**
+ * Merges props a component receives from a context under the props it was
+ * given directly. Own props win; a context is a default, never an override.
+ * Mirrors React Aria's `mergeProps`:
+ *
+ * - `on*` handlers present on both sides are chained, context first.
+ * - `aria-describedby` ids are concatenated (context first, de-duplicated).
+ * - `className` is merged with `cn`.
+ * - `ref`s present on both sides are merged with `mergeRefs`.
+ * - `id` and everything else: the own value wins when it is not `undefined`.
+ *
+ * With no context (`null`/`undefined`) the own props are returned untouched,
+ * so a component reading a context still behaves as before outside of it.
+ */
+export declare const mergeProps: <P extends object>(contextProps: Partial<P> | null | undefined, ownProps: P) => P;
+/**
+ * `mergeProps` for render time: same rules, but the merged `ref` keeps a stable
+ * identity across renders as long as the two underlying refs do, so React does
+ * not detach and re-attach them on every render. This is the hook every
+ * `useXContext(props)` in the design system is built on.
+ */
+export declare const useMergeProps: <P extends object>(contextProps: Partial<P> | null | undefined, ownProps: P) => P;
+export {};

package/lib/merge-props.js

@@ -0,0 +1,24 @@
+import { cn as e } from "./utils.js";
+import { useMemo as t } from "react";
+import { composeRefs as n } from "@radix-ui/react-compose-refs";
+//#region lib/merge-props.ts
+var r = (...e) => (...t) => {
+	for (let n of e) n?.(...t);
+}, i = n, a = (e, t) => [...new Set(`${e} ${t}`.split(/\s+/).filter(Boolean))].join(" "), o = (e) => /^on[A-Z]/.test(e), s = (t, n) => {
+	if (!t) return n;
+	let s = { ...t };
+	for (let [t, c] of Object.entries(n)) {
+		if (c === void 0) continue;
+		let n = s[t];
+		o(t) && typeof n == "function" && typeof c == "function" ? s[t] = r(n, c) : t === "aria-describedby" && typeof n == "string" && typeof c == "string" ? s[t] = a(n, c) : t === "className" && typeof n == "string" ? s[t] = e(n, c) : t === "ref" && n && c ? s[t] = i(n, c) : s[t] = c;
+	}
+	return s;
+}, c = (e, n) => {
+	let r = e?.ref, a = n.ref, o = t(() => r && a ? i(r, a) : void 0, [r, a]), c = s(e, n);
+	return o ? {
+		...c,
+		ref: o
+	} : c;
+};
+//#endregion
+export { r as chain, s as mergeProps, i as mergeRefs, c as useMergeProps };