@j2-health/design-system 0.6.1 → 0.6.3

package/dist/src/components/swatchStrip/SwatchStrip.cjs

@@ -1,45 +1,84 @@
 const require_Swatch = require("../swatch/Swatch.cjs");
+const require_useRender = require("../../utils/useRender.cjs");
 const require_Tooltip = require("../tooltip/Tooltip.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/swatchStrip/SwatchStrip.tsx
+var Item = ({ item, group, size, render }) => require_useRender.useRender({
+	render,
+	state: {
+		item,
+		group
+	},
+	defaultTagName: "span",
+	props: require_useRender.mergeProps({
+		className: "block",
+		"aria-label": item.label ?? item.tooltip,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Swatch.Swatch, {
+			...item.swatch,
+			size
+		})
+	}, render ? void 0 : { role: "img" })
+});
+var Overflow = ({ render, ...state }) => require_useRender.useRender({
+	render,
+	state,
+	defaultTagName: "span",
+	props: {
+		className: "pl-1 text-xs tabular-nums text-j2-text-secondary",
+		children: `+${state.count}`
+	}
+});
 /**
 * A compact run of swatches in groups, e.g. one square per affected item,
 * grouped by kind. Groups are separated by a thin rule rather than a wider
 * gap, so a group ending in `+N` doesn't read as farther from the next.
 */
-var SwatchStrip = ({ groups, max = 5, size = 12 }) => {
+var SwatchStrip = ({ groups, max = 5, size = 12, groupGap = 17, rowGap = 4, renderItem, renderOverflow }) => {
 	const visibleGroups = groups.filter((group) => group.items.length > 0);
 	if (visibleGroups.length === 0) return null;
+	const inset = Math.max(0, Math.min(4, Math.floor((groupGap - 1) / 2)));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "inline-flex flex-wrap items-center gap-y-1",
+		className: "inline-flex flex-wrap items-center overflow-clip",
+		style: {
+			columnGap: groupGap,
+			rowGap,
+			padding: inset,
+			margin: -inset
+		},
 		children: visibleGroups.map((group, index) => {
-			const shown = group.items.slice(0, max);
-			const overflow = group.items.length - shown.length;
+			const shown = group.items.slice(0, group.max ?? max);
+			const overflow = group.overflow ?? group.items.length - shown.length;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "inline-flex items-center",
-				children: [index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					"aria-hidden": true,
-					className: "mx-2 inline-block w-px bg-[var(--j2-color-border-secondary)]",
-					style: { height: 12 }
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "inline-flex items-center",
-					style: { gap: 2 },
-					children: [shown.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
-						title: item.label,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "block",
-							"aria-label": item.label,
-							role: "img",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Swatch.Swatch, {
-								...item.swatch,
-								size
-							})
-						})
-					}, item.key)), overflow > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "px-1 text-xs tabular-nums text-j2-text-secondary",
-						children: ["+", overflow]
-					})]
-				})]
+				className: "relative inline-flex items-center",
+				style: { gap: 2 },
+				children: [
+					index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "absolute top-1/2 w-px -translate-y-1/2 bg-[var(--j2-color-border-secondary)]",
+						style: {
+							height: 12,
+							left: -(groupGap + 1) / 2
+						}
+					}),
+					shown.map((item) => {
+						const swatch = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item, {
+							item,
+							group,
+							size,
+							render: renderItem
+						}, item.key);
+						const tooltip = item.tooltip ?? item.label;
+						return tooltip === false ? swatch : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+							title: tooltip,
+							children: swatch
+						}, item.key);
+					}),
+					overflow > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Overflow, {
+						group,
+						count: overflow,
+						render: renderOverflow
+					})
+				]
 			}, group.key);
 		})
 	});

package/dist/src/components/swatchStrip/SwatchStrip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchStrip.cjs","names":["Tooltip","Swatch"],"sources":["../../../../src/components/swatchStrip/SwatchStrip.tsx"],"sourcesContent":["import { Tooltip } from '../tooltip'\nimport { Swatch, type SwatchProps } from '../swatch'\n\nexport type SwatchStripItem = {\n  key: string\n  /** Shown in a tooltip and read by assistive tech. */\n  label: string\n  swatch: Omit<SwatchProps, 'size'>\n}\n\nexport type SwatchStripGroup = {\n  key: string\n  items: SwatchStripItem[]\n}\n\nexport type SwatchStripProps = {\n  /** Groups in display order; empty groups are skipped. */\n  groups: SwatchStripGroup[]\n  /** Swatches shown per group before a `+N` takes over. */\n  max?: number\n  /** Swatch side in px. */\n  size?: number\n}\n\n/**\n * A compact run of swatches in groups, e.g. one square per affected item,\n * grouped by kind. Groups are separated by a thin rule rather than a wider\n * gap, so a group ending in `+N` doesn't read as farther from the next.\n */\nexport const SwatchStrip = ({\n  groups,\n  max = 5,\n  size = 12,\n}: SwatchStripProps) => {\n  const visibleGroups = groups.filter((group) => group.items.length > 0)\n  if (visibleGroups.length === 0) return null\n\n  return (\n    <div className=\"inline-flex flex-wrap items-center gap-y-1\">\n      {visibleGroups.map((group, index) => {\n        const shown = group.items.slice(0, max)\n        const overflow = group.items.length - shown.length\n        return (\n          <span key={group.key} className=\"inline-flex items-center\">\n            {index > 0 && (\n              <span\n                aria-hidden\n                className=\"mx-2 inline-block w-px bg-[var(--j2-color-border-secondary)]\"\n                style={{ height: 12 }}\n              />\n            )}\n            <span className=\"inline-flex items-center\" style={{ gap: 2 }}>\n              {shown.map((item) => (\n                <Tooltip key={item.key} title={item.label}>\n                  <span className=\"block\" aria-label={item.label} role=\"img\">\n                    <Swatch {...item.swatch} size={size} />\n                  </span>\n                </Tooltip>\n              ))}\n              {overflow > 0 && (\n                <span className=\"px-1 text-xs tabular-nums text-j2-text-secondary\">\n                  +{overflow}\n                </span>\n              )}\n            </span>\n          </span>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AA6BA,IAAa,eAAe,EAC1B,QACA,MAAM,GACN,OAAO,SACe;CACtB,MAAM,gBAAgB,OAAO,QAAQ,UAAU,MAAM,MAAM,SAAS,CAAC;CACrE,IAAI,cAAc,WAAW,GAAG,OAAO;CAEvC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAU;EACZ,UAAA,cAAc,KAAK,OAAO,UAAU;GACnC,MAAM,QAAQ,MAAM,MAAM,MAAM,GAAG,GAAG;GACtC,MAAM,WAAW,MAAM,MAAM,SAAS,MAAM;GAC5C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAAsB,WAAU;IAAhC,UAAA,CACG,QAAQ,KACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KACE,eAAA;KACA,WAAU;KACV,OAAO,EAAE,QAAQ,GAAG;IACrB,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KAAM,WAAU;KAA2B,OAAO,EAAE,KAAK,EAAE;KAA3D,UAAA,CACG,MAAM,KAAK,SACV,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,SAAD;MAAwB,OAAO,KAAK;MAClC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;OAAM,WAAU;OAAQ,cAAY,KAAK;OAAO,MAAK;OACnD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;QAAQ,GAAI,KAAK;QAAc;OAAO,CAAA;MAClC,CAAA;KACC,GAJK,KAAK,GAIV,CACV,GACA,WAAW,KACV,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CAAmE,KAC/D,QACE;KAEJ,CAAA,CAAA;IACF,CAAA,CAAA;GAtBK,GAAA,MAAM,GAsBX;EAEV,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"SwatchStrip.cjs","names":["useRender","mergeProps","Swatch","Tooltip"],"sources":["../../../../src/components/swatchStrip/SwatchStrip.tsx"],"sourcesContent":["import { Tooltip } from '../tooltip'\nimport { Swatch, type SwatchVisualProps } from '../swatch'\nimport { mergeProps, useRender, type RenderProp } from '../../utils/useRender'\n\n/**\n * Every item has an accessible name: a `label`, or failing that a string\n * `tooltip`.\n */\nexport type SwatchStripItem = {\n  key: string\n  swatch: Omit<SwatchVisualProps, 'size'>\n} & (\n  | {\n      /** Read by assistive tech, and shown on hover unless `tooltip` is set. */\n      label: string\n      /** Shown on hover instead of `label`; `false` shows no tooltip. */\n      tooltip?: React.ReactNode | false\n    }\n  | {\n      label?: undefined\n      /** Shown on hover and read by assistive tech. */\n      tooltip: string\n    }\n)\n\nexport type SwatchStripGroup = {\n  key: string\n  items: SwatchStripItem[]\n  /** Overrides the strip's `max` for this group, e.g. `Infinity` to expand it. */\n  max?: number\n  /**\n   * The count shown as `+N` after the items, in place of how many `max`\n   * hides. `+N` shows whenever it's above 0, even with nothing hidden, so a\n   * group showing a subset can report how many it leaves out; `0` hides it.\n   */\n  overflow?: number\n}\n\nexport type SwatchStripItemState = {\n  item: SwatchStripItem\n  group: SwatchStripGroup\n}\n\nexport type SwatchStripOverflowState = {\n  group: SwatchStripGroup\n  /** The group's `overflow`, or else how many of its items are hidden. */\n  count: number\n}\n\nexport type SwatchStripProps = {\n  /** Groups in display order; empty groups are skipped. */\n  groups: SwatchStripGroup[]\n  /** Swatches shown per group before a `+N` takes over. */\n  max?: number\n  /** Swatch side in px. */\n  size?: number\n  /**\n   * Space in px between two groups on a line. The divider sits in the middle\n   * of it.\n   */\n  groupGap?: number\n  /** Space in px between wrapped lines. */\n  rowGap?: number\n  /**\n   * Replaces each swatch's element, e.g. to make it a button. The props carry\n   * the label and the swatch; spread them:\n   * `(props, { item }) => <BareButton {...props} onClick={…} />`.\n   * The default element is `role=\"img\"`; a replacement keeps its own role.\n   * Clicks are not stopped, so they reach a wrapping popover trigger unless\n   * the handler calls `event.stopPropagation()`.\n   */\n  renderItem?: RenderProp<SwatchStripItemState>\n  /**\n   * Replaces the `+N` element. Same contract as `renderItem`; pass children\n   * to change its text. To restyle it completely, leave out `className` when\n   * spreading: `({ className, ...props }) => <span {...props} className=\"…\" />`.\n   */\n  renderOverflow?: RenderProp<SwatchStripOverflowState>\n}\n\nconst Item = ({\n  item,\n  group,\n  size,\n  render,\n}: SwatchStripItemState & {\n  size: number\n  render?: RenderProp<SwatchStripItemState>\n}) =>\n  useRender({\n    render,\n    state: { item, group },\n    defaultTagName: 'span',\n    props: mergeProps(\n      {\n        className: 'block',\n        // The type guarantees a string tooltip when there's no label.\n        'aria-label': item.label ?? (item.tooltip as string),\n        children: <Swatch {...item.swatch} size={size} />,\n      },\n      // An image only by default: a replacement element keeps its own role.\n      render ? undefined : { role: 'img' }\n    ),\n  })\n\nconst Overflow = ({\n  render,\n  ...state\n}: SwatchStripOverflowState & {\n  render?: RenderProp<SwatchStripOverflowState>\n}) =>\n  useRender({\n    render,\n    state,\n    defaultTagName: 'span',\n    props: {\n      className: 'pl-1 text-xs tabular-nums text-j2-text-secondary',\n      children: `+${state.count}`,\n    },\n  })\n\n/**\n * A compact run of swatches in groups, e.g. one square per affected item,\n * grouped by kind. Groups are separated by a thin rule rather than a wider\n * gap, so a group ending in `+N` doesn't read as farther from the next.\n */\nexport const SwatchStrip = ({\n  groups,\n  max = 5,\n  size = 12,\n  groupGap = 17,\n  rowGap = 4,\n  renderItem,\n  renderOverflow,\n}: SwatchStripProps) => {\n  const visibleGroups = groups.filter((group) => group.items.length > 0)\n  if (visibleGroups.length === 0) return null\n\n  // Each divider hangs in the gap before its group. On a group that starts a\n  // wrapped line, it falls left of the root and the clip hides it. The\n  // padding, cancelled by the margin, keeps the clip off the focus rings of\n  // items at the edges, and stays narrow enough to hide a wrapped divider.\n  const inset = Math.max(0, Math.min(4, Math.floor((groupGap - 1) / 2)))\n\n  return (\n    <div\n      className=\"inline-flex flex-wrap items-center overflow-clip\"\n      style={{ columnGap: groupGap, rowGap, padding: inset, margin: -inset }}\n    >\n      {visibleGroups.map((group, index) => {\n        const shown = group.items.slice(0, group.max ?? max)\n        const overflow = group.overflow ?? group.items.length - shown.length\n        return (\n          <span\n            key={group.key}\n            className=\"relative inline-flex items-center\"\n            style={{ gap: 2 }}\n          >\n            {index > 0 && (\n              <span\n                aria-hidden\n                className=\"absolute top-1/2 w-px -translate-y-1/2 bg-[var(--j2-color-border-secondary)]\"\n                style={{ height: 12, left: -(groupGap + 1) / 2 }}\n              />\n            )}\n            {shown.map((item) => {\n              const swatch = (\n                <Item\n                  key={item.key}\n                  item={item}\n                  group={group}\n                  size={size}\n                  render={renderItem}\n                />\n              )\n              const tooltip = item.tooltip ?? item.label\n              return tooltip === false ? (\n                swatch\n              ) : (\n                <Tooltip key={item.key} title={tooltip}>\n                  {swatch}\n                </Tooltip>\n              )\n            })}\n            {overflow > 0 && (\n              <Overflow\n                group={group}\n                count={overflow}\n                render={renderOverflow}\n              />\n            )}\n          </span>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAgFA,IAAM,QAAQ,EACZ,MACA,OACA,MACA,aAKAA,kBAAAA,UAAU;CACR;CACA,OAAO;EAAE;EAAM;CAAM;CACrB,gBAAgB;CAChB,OAAOC,kBAAAA,WACL;EACE,WAAW;EAEX,cAAc,KAAK,SAAU,KAAK;EAClC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GAAQ,GAAI,KAAK;GAAc;EAAO,CAAA;CAClD,GAEA,SAAS,KAAA,IAAY,EAAE,MAAM,MAAM,CACrC;AACF,CAAC;AAEH,IAAM,YAAY,EAChB,QACA,GAAG,YAIHF,kBAAAA,UAAU;CACR;CACA;CACA,gBAAgB;CAChB,OAAO;EACL,WAAW;EACX,UAAU,IAAI,MAAM;CACtB;AACF,CAAC;;;;;;AAOH,IAAa,eAAe,EAC1B,QACA,MAAM,GACN,OAAO,IACP,WAAW,IACX,SAAS,GACT,YACA,qBACsB;CACtB,MAAM,gBAAgB,OAAO,QAAQ,UAAU,MAAM,MAAM,SAAS,CAAC;CACrE,IAAI,cAAc,WAAW,GAAG,OAAO;CAMvC,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,OAAO,WAAW,KAAK,CAAC,CAAC,CAAC;CAErE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAU;EACV,OAAO;GAAE,WAAW;GAAU;GAAQ,SAAS;GAAO,QAAQ,CAAC;EAAM;EAEpE,UAAA,cAAc,KAAK,OAAO,UAAU;GACnC,MAAM,QAAQ,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,GAAG;GACnD,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,SAAS,MAAM;GAC9D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAEE,WAAU;IACV,OAAO,EAAE,KAAK,EAAE;IAHlB,UAAA;KAKG,QAAQ,KACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MACE,eAAA;MACA,WAAU;MACV,OAAO;OAAE,QAAQ;OAAI,MAAM,EAAE,WAAW,KAAK;MAAE;KAChD,CAAA;KAEF,MAAM,KAAK,SAAS;MACnB,MAAM,SACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;OAEQ;OACC;OACD;OACN,QAAQ;MACT,GALM,KAAK,GAKX;MAEH,MAAM,UAAU,KAAK,WAAW,KAAK;MACrC,OAAO,YAAY,QACjB,SAEA,iBAAA,GAAA,kBAAA,IAAA,CAACG,gBAAAA,SAAD;OAAwB,OAAO;OAC5B,UAAA;MACM,GAFK,KAAK,GAEV;KAEb,CAAC;KACA,WAAW,KACV,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;MACS;MACP,OAAO;MACP,QAAQ;KACT,CAAA;IAEC;GArCC,GAAA,MAAM,GAqCP;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/src/components/swatchStrip/SwatchStrip.d.ts

@@ -1,13 +1,42 @@
-import { SwatchProps } from '../swatch/index.js';
+import { SwatchVisualProps } from '../swatch/index.js';
+import { RenderProp } from '../../utils/useRender.js';
+/**
+ * Every item has an accessible name: a `label`, or failing that a string
+ * `tooltip`.
+ */
 export type SwatchStripItem = {
     key: string;
-    /** Shown in a tooltip and read by assistive tech. */
+    swatch: Omit<SwatchVisualProps, 'size'>;
+} & ({
+    /** Read by assistive tech, and shown on hover unless `tooltip` is set. */
     label: string;
-    swatch: Omit<SwatchProps, 'size'>;
-};
+    /** Shown on hover instead of `label`; `false` shows no tooltip. */
+    tooltip?: React.ReactNode | false;
+} | {
+    label?: undefined;
+    /** Shown on hover and read by assistive tech. */
+    tooltip: string;
+});
 export type SwatchStripGroup = {
     key: string;
     items: SwatchStripItem[];
+    /** Overrides the strip's `max` for this group, e.g. `Infinity` to expand it. */
+    max?: number;
+    /**
+     * The count shown as `+N` after the items, in place of how many `max`
+     * hides. `+N` shows whenever it's above 0, even with nothing hidden, so a
+     * group showing a subset can report how many it leaves out; `0` hides it.
+     */
+    overflow?: number;
+};
+export type SwatchStripItemState = {
+    item: SwatchStripItem;
+    group: SwatchStripGroup;
+};
+export type SwatchStripOverflowState = {
+    group: SwatchStripGroup;
+    /** The group's `overflow`, or else how many of its items are hidden. */
+    count: number;
 };
 export type SwatchStripProps = {
     /** Groups in display order; empty groups are skipped. */
@@ -16,10 +45,32 @@ export type SwatchStripProps = {
     max?: number;
     /** Swatch side in px. */
     size?: number;
+    /**
+     * Space in px between two groups on a line. The divider sits in the middle
+     * of it.
+     */
+    groupGap?: number;
+    /** Space in px between wrapped lines. */
+    rowGap?: number;
+    /**
+     * Replaces each swatch's element, e.g. to make it a button. The props carry
+     * the label and the swatch; spread them:
+     * `(props, { item }) => <BareButton {...props} onClick={…} />`.
+     * The default element is `role="img"`; a replacement keeps its own role.
+     * Clicks are not stopped, so they reach a wrapping popover trigger unless
+     * the handler calls `event.stopPropagation()`.
+     */
+    renderItem?: RenderProp<SwatchStripItemState>;
+    /**
+     * Replaces the `+N` element. Same contract as `renderItem`; pass children
+     * to change its text. To restyle it completely, leave out `className` when
+     * spreading: `({ className, ...props }) => <span {...props} className="…" />`.
+     */
+    renderOverflow?: RenderProp<SwatchStripOverflowState>;
 };
 /**
  * A compact run of swatches in groups, e.g. one square per affected item,
  * grouped by kind. Groups are separated by a thin rule rather than a wider
  * gap, so a group ending in `+N` doesn't read as farther from the next.
  */
-export declare const SwatchStrip: ({ groups, max, size, }: SwatchStripProps) => import('react').JSX.Element | null;
+export declare const SwatchStrip: ({ groups, max, size, groupGap, rowGap, renderItem, renderOverflow, }: SwatchStripProps) => import('react').JSX.Element | null;

package/dist/src/components/swatchStrip/SwatchStrip.js

@@ -1,45 +1,84 @@
 import { Swatch } from "../swatch/Swatch.js";
+import { mergeProps, useRender } from "../../utils/useRender.js";
 import { Tooltip } from "../tooltip/Tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/swatchStrip/SwatchStrip.tsx
+var Item = ({ item, group, size, render }) => useRender({
+	render,
+	state: {
+		item,
+		group
+	},
+	defaultTagName: "span",
+	props: mergeProps({
+		className: "block",
+		"aria-label": item.label ?? item.tooltip,
+		children: /* @__PURE__ */ jsx(Swatch, {
+			...item.swatch,
+			size
+		})
+	}, render ? void 0 : { role: "img" })
+});
+var Overflow = ({ render, ...state }) => useRender({
+	render,
+	state,
+	defaultTagName: "span",
+	props: {
+		className: "pl-1 text-xs tabular-nums text-j2-text-secondary",
+		children: `+${state.count}`
+	}
+});
 /**
 * A compact run of swatches in groups, e.g. one square per affected item,
 * grouped by kind. Groups are separated by a thin rule rather than a wider
 * gap, so a group ending in `+N` doesn't read as farther from the next.
 */
-var SwatchStrip = ({ groups, max = 5, size = 12 }) => {
+var SwatchStrip = ({ groups, max = 5, size = 12, groupGap = 17, rowGap = 4, renderItem, renderOverflow }) => {
 	const visibleGroups = groups.filter((group) => group.items.length > 0);
 	if (visibleGroups.length === 0) return null;
+	const inset = Math.max(0, Math.min(4, Math.floor((groupGap - 1) / 2)));
 	return /* @__PURE__ */ jsx("div", {
-		className: "inline-flex flex-wrap items-center gap-y-1",
+		className: "inline-flex flex-wrap items-center overflow-clip",
+		style: {
+			columnGap: groupGap,
+			rowGap,
+			padding: inset,
+			margin: -inset
+		},
 		children: visibleGroups.map((group, index) => {
-			const shown = group.items.slice(0, max);
-			const overflow = group.items.length - shown.length;
+			const shown = group.items.slice(0, group.max ?? max);
+			const overflow = group.overflow ?? group.items.length - shown.length;
 			return /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center",
-				children: [index > 0 && /* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: "mx-2 inline-block w-px bg-[var(--j2-color-border-secondary)]",
-					style: { height: 12 }
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "inline-flex items-center",
-					style: { gap: 2 },
-					children: [shown.map((item) => /* @__PURE__ */ jsx(Tooltip, {
-						title: item.label,
-						children: /* @__PURE__ */ jsx("span", {
-							className: "block",
-							"aria-label": item.label,
-							role: "img",
-							children: /* @__PURE__ */ jsx(Swatch, {
-								...item.swatch,
-								size
-							})
-						})
-					}, item.key)), overflow > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "px-1 text-xs tabular-nums text-j2-text-secondary",
-						children: ["+", overflow]
-					})]
-				})]
+				className: "relative inline-flex items-center",
+				style: { gap: 2 },
+				children: [
+					index > 0 && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "absolute top-1/2 w-px -translate-y-1/2 bg-[var(--j2-color-border-secondary)]",
+						style: {
+							height: 12,
+							left: -(groupGap + 1) / 2
+						}
+					}),
+					shown.map((item) => {
+						const swatch = /* @__PURE__ */ jsx(Item, {
+							item,
+							group,
+							size,
+							render: renderItem
+						}, item.key);
+						const tooltip = item.tooltip ?? item.label;
+						return tooltip === false ? swatch : /* @__PURE__ */ jsx(Tooltip, {
+							title: tooltip,
+							children: swatch
+						}, item.key);
+					}),
+					overflow > 0 && /* @__PURE__ */ jsx(Overflow, {
+						group,
+						count: overflow,
+						render: renderOverflow
+					})
+				]
 			}, group.key);
 		})
 	});

package/dist/src/components/swatchStrip/SwatchStrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchStrip.js","names":[],"sources":["../../../../src/components/swatchStrip/SwatchStrip.tsx"],"sourcesContent":["import { Tooltip } from '../tooltip'\nimport { Swatch, type SwatchProps } from '../swatch'\n\nexport type SwatchStripItem = {\n  key: string\n  /** Shown in a tooltip and read by assistive tech. */\n  label: string\n  swatch: Omit<SwatchProps, 'size'>\n}\n\nexport type SwatchStripGroup = {\n  key: string\n  items: SwatchStripItem[]\n}\n\nexport type SwatchStripProps = {\n  /** Groups in display order; empty groups are skipped. */\n  groups: SwatchStripGroup[]\n  /** Swatches shown per group before a `+N` takes over. */\n  max?: number\n  /** Swatch side in px. */\n  size?: number\n}\n\n/**\n * A compact run of swatches in groups, e.g. one square per affected item,\n * grouped by kind. Groups are separated by a thin rule rather than a wider\n * gap, so a group ending in `+N` doesn't read as farther from the next.\n */\nexport const SwatchStrip = ({\n  groups,\n  max = 5,\n  size = 12,\n}: SwatchStripProps) => {\n  const visibleGroups = groups.filter((group) => group.items.length > 0)\n  if (visibleGroups.length === 0) return null\n\n  return (\n    <div className=\"inline-flex flex-wrap items-center gap-y-1\">\n      {visibleGroups.map((group, index) => {\n        const shown = group.items.slice(0, max)\n        const overflow = group.items.length - shown.length\n        return (\n          <span key={group.key} className=\"inline-flex items-center\">\n            {index > 0 && (\n              <span\n                aria-hidden\n                className=\"mx-2 inline-block w-px bg-[var(--j2-color-border-secondary)]\"\n                style={{ height: 12 }}\n              />\n            )}\n            <span className=\"inline-flex items-center\" style={{ gap: 2 }}>\n              {shown.map((item) => (\n                <Tooltip key={item.key} title={item.label}>\n                  <span className=\"block\" aria-label={item.label} role=\"img\">\n                    <Swatch {...item.swatch} size={size} />\n                  </span>\n                </Tooltip>\n              ))}\n              {overflow > 0 && (\n                <span className=\"px-1 text-xs tabular-nums text-j2-text-secondary\">\n                  +{overflow}\n                </span>\n              )}\n            </span>\n          </span>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AA6BA,IAAa,eAAe,EAC1B,QACA,MAAM,GACN,OAAO,SACe;CACtB,MAAM,gBAAgB,OAAO,QAAQ,UAAU,MAAM,MAAM,SAAS,CAAC;CACrE,IAAI,cAAc,WAAW,GAAG,OAAO;CAEvC,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,cAAc,KAAK,OAAO,UAAU;GACnC,MAAM,QAAQ,MAAM,MAAM,MAAM,GAAG,GAAG;GACtC,MAAM,WAAW,MAAM,MAAM,SAAS,MAAM;GAC5C,OACE,qBAAC,QAAD;IAAsB,WAAU;IAAhC,UAAA,CACG,QAAQ,KACP,oBAAC,QAAD;KACE,eAAA;KACA,WAAU;KACV,OAAO,EAAE,QAAQ,GAAG;IACrB,CAAA,GAEH,qBAAC,QAAD;KAAM,WAAU;KAA2B,OAAO,EAAE,KAAK,EAAE;KAA3D,UAAA,CACG,MAAM,KAAK,SACV,oBAAC,SAAD;MAAwB,OAAO,KAAK;MAClC,UAAA,oBAAC,QAAD;OAAM,WAAU;OAAQ,cAAY,KAAK;OAAO,MAAK;OACnD,UAAA,oBAAC,QAAD;QAAQ,GAAI,KAAK;QAAc;OAAO,CAAA;MAClC,CAAA;KACC,GAJK,KAAK,GAIV,CACV,GACA,WAAW,KACV,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CAAmE,KAC/D,QACE;KAEJ,CAAA,CAAA;IACF,CAAA,CAAA;GAtBK,GAAA,MAAM,GAsBX;EAEV,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"SwatchStrip.js","names":[],"sources":["../../../../src/components/swatchStrip/SwatchStrip.tsx"],"sourcesContent":["import { Tooltip } from '../tooltip'\nimport { Swatch, type SwatchVisualProps } from '../swatch'\nimport { mergeProps, useRender, type RenderProp } from '../../utils/useRender'\n\n/**\n * Every item has an accessible name: a `label`, or failing that a string\n * `tooltip`.\n */\nexport type SwatchStripItem = {\n  key: string\n  swatch: Omit<SwatchVisualProps, 'size'>\n} & (\n  | {\n      /** Read by assistive tech, and shown on hover unless `tooltip` is set. */\n      label: string\n      /** Shown on hover instead of `label`; `false` shows no tooltip. */\n      tooltip?: React.ReactNode | false\n    }\n  | {\n      label?: undefined\n      /** Shown on hover and read by assistive tech. */\n      tooltip: string\n    }\n)\n\nexport type SwatchStripGroup = {\n  key: string\n  items: SwatchStripItem[]\n  /** Overrides the strip's `max` for this group, e.g. `Infinity` to expand it. */\n  max?: number\n  /**\n   * The count shown as `+N` after the items, in place of how many `max`\n   * hides. `+N` shows whenever it's above 0, even with nothing hidden, so a\n   * group showing a subset can report how many it leaves out; `0` hides it.\n   */\n  overflow?: number\n}\n\nexport type SwatchStripItemState = {\n  item: SwatchStripItem\n  group: SwatchStripGroup\n}\n\nexport type SwatchStripOverflowState = {\n  group: SwatchStripGroup\n  /** The group's `overflow`, or else how many of its items are hidden. */\n  count: number\n}\n\nexport type SwatchStripProps = {\n  /** Groups in display order; empty groups are skipped. */\n  groups: SwatchStripGroup[]\n  /** Swatches shown per group before a `+N` takes over. */\n  max?: number\n  /** Swatch side in px. */\n  size?: number\n  /**\n   * Space in px between two groups on a line. The divider sits in the middle\n   * of it.\n   */\n  groupGap?: number\n  /** Space in px between wrapped lines. */\n  rowGap?: number\n  /**\n   * Replaces each swatch's element, e.g. to make it a button. The props carry\n   * the label and the swatch; spread them:\n   * `(props, { item }) => <BareButton {...props} onClick={…} />`.\n   * The default element is `role=\"img\"`; a replacement keeps its own role.\n   * Clicks are not stopped, so they reach a wrapping popover trigger unless\n   * the handler calls `event.stopPropagation()`.\n   */\n  renderItem?: RenderProp<SwatchStripItemState>\n  /**\n   * Replaces the `+N` element. Same contract as `renderItem`; pass children\n   * to change its text. To restyle it completely, leave out `className` when\n   * spreading: `({ className, ...props }) => <span {...props} className=\"…\" />`.\n   */\n  renderOverflow?: RenderProp<SwatchStripOverflowState>\n}\n\nconst Item = ({\n  item,\n  group,\n  size,\n  render,\n}: SwatchStripItemState & {\n  size: number\n  render?: RenderProp<SwatchStripItemState>\n}) =>\n  useRender({\n    render,\n    state: { item, group },\n    defaultTagName: 'span',\n    props: mergeProps(\n      {\n        className: 'block',\n        // The type guarantees a string tooltip when there's no label.\n        'aria-label': item.label ?? (item.tooltip as string),\n        children: <Swatch {...item.swatch} size={size} />,\n      },\n      // An image only by default: a replacement element keeps its own role.\n      render ? undefined : { role: 'img' }\n    ),\n  })\n\nconst Overflow = ({\n  render,\n  ...state\n}: SwatchStripOverflowState & {\n  render?: RenderProp<SwatchStripOverflowState>\n}) =>\n  useRender({\n    render,\n    state,\n    defaultTagName: 'span',\n    props: {\n      className: 'pl-1 text-xs tabular-nums text-j2-text-secondary',\n      children: `+${state.count}`,\n    },\n  })\n\n/**\n * A compact run of swatches in groups, e.g. one square per affected item,\n * grouped by kind. Groups are separated by a thin rule rather than a wider\n * gap, so a group ending in `+N` doesn't read as farther from the next.\n */\nexport const SwatchStrip = ({\n  groups,\n  max = 5,\n  size = 12,\n  groupGap = 17,\n  rowGap = 4,\n  renderItem,\n  renderOverflow,\n}: SwatchStripProps) => {\n  const visibleGroups = groups.filter((group) => group.items.length > 0)\n  if (visibleGroups.length === 0) return null\n\n  // Each divider hangs in the gap before its group. On a group that starts a\n  // wrapped line, it falls left of the root and the clip hides it. The\n  // padding, cancelled by the margin, keeps the clip off the focus rings of\n  // items at the edges, and stays narrow enough to hide a wrapped divider.\n  const inset = Math.max(0, Math.min(4, Math.floor((groupGap - 1) / 2)))\n\n  return (\n    <div\n      className=\"inline-flex flex-wrap items-center overflow-clip\"\n      style={{ columnGap: groupGap, rowGap, padding: inset, margin: -inset }}\n    >\n      {visibleGroups.map((group, index) => {\n        const shown = group.items.slice(0, group.max ?? max)\n        const overflow = group.overflow ?? group.items.length - shown.length\n        return (\n          <span\n            key={group.key}\n            className=\"relative inline-flex items-center\"\n            style={{ gap: 2 }}\n          >\n            {index > 0 && (\n              <span\n                aria-hidden\n                className=\"absolute top-1/2 w-px -translate-y-1/2 bg-[var(--j2-color-border-secondary)]\"\n                style={{ height: 12, left: -(groupGap + 1) / 2 }}\n              />\n            )}\n            {shown.map((item) => {\n              const swatch = (\n                <Item\n                  key={item.key}\n                  item={item}\n                  group={group}\n                  size={size}\n                  render={renderItem}\n                />\n              )\n              const tooltip = item.tooltip ?? item.label\n              return tooltip === false ? (\n                swatch\n              ) : (\n                <Tooltip key={item.key} title={tooltip}>\n                  {swatch}\n                </Tooltip>\n              )\n            })}\n            {overflow > 0 && (\n              <Overflow\n                group={group}\n                count={overflow}\n                render={renderOverflow}\n              />\n            )}\n          </span>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;AAgFA,IAAM,QAAQ,EACZ,MACA,OACA,MACA,aAKA,UAAU;CACR;CACA,OAAO;EAAE;EAAM;CAAM;CACrB,gBAAgB;CAChB,OAAO,WACL;EACE,WAAW;EAEX,cAAc,KAAK,SAAU,KAAK;EAClC,UAAU,oBAAC,QAAD;GAAQ,GAAI,KAAK;GAAc;EAAO,CAAA;CAClD,GAEA,SAAS,KAAA,IAAY,EAAE,MAAM,MAAM,CACrC;AACF,CAAC;AAEH,IAAM,YAAY,EAChB,QACA,GAAG,YAIH,UAAU;CACR;CACA;CACA,gBAAgB;CAChB,OAAO;EACL,WAAW;EACX,UAAU,IAAI,MAAM;CACtB;AACF,CAAC;;;;;;AAOH,IAAa,eAAe,EAC1B,QACA,MAAM,GACN,OAAO,IACP,WAAW,IACX,SAAS,GACT,YACA,qBACsB;CACtB,MAAM,gBAAgB,OAAO,QAAQ,UAAU,MAAM,MAAM,SAAS,CAAC;CACrE,IAAI,cAAc,WAAW,GAAG,OAAO;CAMvC,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,OAAO,WAAW,KAAK,CAAC,CAAC,CAAC;CAErE,OACE,oBAAC,OAAD;EACE,WAAU;EACV,OAAO;GAAE,WAAW;GAAU;GAAQ,SAAS;GAAO,QAAQ,CAAC;EAAM;EAEpE,UAAA,cAAc,KAAK,OAAO,UAAU;GACnC,MAAM,QAAQ,MAAM,MAAM,MAAM,GAAG,MAAM,OAAO,GAAG;GACnD,MAAM,WAAW,MAAM,YAAY,MAAM,MAAM,SAAS,MAAM;GAC9D,OACE,qBAAC,QAAD;IAEE,WAAU;IACV,OAAO,EAAE,KAAK,EAAE;IAHlB,UAAA;KAKG,QAAQ,KACP,oBAAC,QAAD;MACE,eAAA;MACA,WAAU;MACV,OAAO;OAAE,QAAQ;OAAI,MAAM,EAAE,WAAW,KAAK;MAAE;KAChD,CAAA;KAEF,MAAM,KAAK,SAAS;MACnB,MAAM,SACJ,oBAAC,MAAD;OAEQ;OACC;OACD;OACN,QAAQ;MACT,GALM,KAAK,GAKX;MAEH,MAAM,UAAU,KAAK,WAAW,KAAK;MACrC,OAAO,YAAY,QACjB,SAEA,oBAAC,SAAD;OAAwB,OAAO;OAC5B,UAAA;MACM,GAFK,KAAK,GAEV;KAEb,CAAC;KACA,WAAW,KACV,oBAAC,UAAD;MACS;MACP,OAAO;MACP,QAAQ;KACT,CAAA;IAEC;GArCC,GAAA,MAAM,GAqCP;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/src/components/swatchStrip/index.d.ts

@@ -1 +1 @@
-export { SwatchStrip, type SwatchStripGroup, type SwatchStripItem, type SwatchStripProps, } from './SwatchStrip.js';
+export { SwatchStrip, type SwatchStripGroup, type SwatchStripItem, type SwatchStripItemState, type SwatchStripOverflowState, type SwatchStripProps, } from './SwatchStrip.js';

package/dist/src/utils/useRender.cjs

@@ -0,0 +1,76 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/utils/useRender.ts
+/** Sets one ref. Returns a callback ref's cleanup, if it gave one. */
+var setRef = (ref, value) => {
+	if (typeof ref === "function") return ref(value);
+	if (ref) ref.current = value;
+};
+/**
+* One callback ref that feeds every ref given to it. When a callback ref
+* returns a cleanup (React 19), detaching runs it instead of passing null.
+*/
+var composeRefs = (...refs) => (value) => {
+	const cleanups = refs.map((ref) => setRef(ref, value));
+	if (!cleanups.some((cleanup) => typeof cleanup === "function")) return;
+	return () => cleanups.forEach((cleanup, index) => typeof cleanup === "function" ? cleanup() : setRef(refs[index], null));
+};
+/** `composeRefs`, kept stable while the refs are. */
+var useMergedRefs = (...refs) => (0, react.useCallback)((value) => composeRefs(...refs)(value), refs);
+/**
+* Merges prop objects left to right. Later props win, except that event
+* handlers all run (last first), classNames join, styles combine and refs
+* all receive the element. An `undefined` handler or ref leaves an earlier
+* one in place. The merged ref is a new function on every call, so React
+* reattaches it on each render, as with any inline callback ref.
+*/
+var mergeProps = (...sources) => {
+	const merged = {};
+	for (const source of sources) {
+		if (!source) continue;
+		for (const [key, value] of Object.entries(source)) {
+			const existing = merged[key];
+			if ((key === "ref" || /^on[A-Z]/.test(key)) && value === void 0) continue;
+			else if (key === "ref" && existing) merged.ref = composeRefs(existing, value);
+			else if (/^on[A-Z]/.test(key) && typeof existing === "function" && typeof value === "function") merged[key] = (...args) => {
+				value(...args);
+				existing(...args);
+			};
+			else if (key === "className") merged.className = (0, classnames.default)(existing, value);
+			else if (key === "style") merged.style = {
+				...existing,
+				...value
+			};
+			else merged[key] = value;
+		}
+	}
+	return merged;
+};
+var isReact19 = Number(react.version.split(".")[0]) >= 19;
+/**
+* The ref an element was created with: a prop in React 19, a field in 18.
+* Reading the field in 19 logs a deprecation warning, so branch on version.
+*/
+var elementRef = (element) => isReact19 ? element.props.ref : element.ref;
+var useRender = ({ render, props, ref, state, defaultTagName = "div" }) => {
+	const element = (0, react.isValidElement)(render) ? render : void 0;
+	const mergedRef = useMergedRefs(ref, element && elementRef(element));
+	const rendered = typeof render === "function" ? render({
+		...props,
+		ref: mergedRef
+	}, state) : element ? (0, react.cloneElement)(element, {
+		...mergeProps(props, element.props),
+		ref: mergedRef
+	}) : (0, react.createElement)(defaultTagName, {
+		...props,
+		ref: mergedRef
+	});
+	return rendered.type === "button" && rendered.props.type === void 0 ? (0, react.cloneElement)(rendered, { type: "button" }) : rendered;
+};
+//#endregion
+exports.mergeProps = mergeProps;
+exports.useRender = useRender;
+
+//# sourceMappingURL=useRender.cjs.map

package/dist/src/utils/useRender.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRender.cjs","names":["useCallback","cx","version","isValidElement","cloneElement","createElement"],"sources":["../../../src/utils/useRender.ts"],"sourcesContent":["// A port of Base UI's `render` prop: its `useRender` hook and `mergeProps`\n// utility (https://base-ui.com/react/utils/use-render), adapted without the\n// dependency and cut down to what this library uses. Base UI also maps state\n// to data-* attributes and takes arrays of refs; neither is needed here.\n//\n// A component keeps its own element and props, and lets the app swap the\n// element: pass an element to merge onto, or a function that receives the\n// props (and the component's state) and returns the element. Unlike Base UI,\n// a <button> that ends up with no `type` gets `type=\"button\"`, so swapping\n// an element in never makes a form submit button by accident.\n//\n// Base UI is distributed under the MIT License:\n//\n// Copyright (c) 2019 Material-UI SAS\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to\n// deal in the Software without restriction, including without limitation the\n// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n// sell copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS\n// IN THE SOFTWARE.\nimport {\n  cloneElement,\n  createElement,\n  isValidElement,\n  useCallback,\n  version,\n  type HTMLAttributes,\n  type JSX,\n  type ReactElement,\n  type Ref,\n  type RefCallback,\n} from 'react'\nimport cx from 'classnames'\n\nexport type RenderProps = HTMLAttributes<HTMLElement> & {\n  [key: string]: unknown\n}\n\n/**\n * Replaces a component's element. Pass an element to merge the component's\n * props onto, e.g. `<button />`, or a function that spreads them:\n * `(props, state) => <button {...props} onClick={…} />`.\n */\nexport type RenderProp<State> =\n  | ReactElement\n  | ((\n      props: RenderProps & { ref: RefCallback<HTMLElement> },\n      state: State\n    ) => ReactElement)\n\n/** Sets one ref. Returns a callback ref's cleanup, if it gave one. */\nconst setRef = <T>(ref: Ref<T> | undefined, value: T | null) => {\n  if (typeof ref === 'function') return ref(value)\n  if (ref) (ref as { current: T | null }).current = value\n}\n\n/**\n * One callback ref that feeds every ref given to it. When a callback ref\n * returns a cleanup (React 19), detaching runs it instead of passing null.\n */\nconst composeRefs =\n  <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n  (value: T | null) => {\n    const cleanups = refs.map((ref) => setRef(ref, value))\n    if (!cleanups.some((cleanup) => typeof cleanup === 'function')) return\n    return () =>\n      cleanups.forEach((cleanup, index) =>\n        typeof cleanup === 'function' ? cleanup() : setRef(refs[index], null)\n      )\n  }\n\n/** `composeRefs`, kept stable while the refs are. */\nconst useMergedRefs = <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n  useCallback((value: T | null) => composeRefs(...refs)(value), refs)\n\n/**\n * Merges prop objects left to right. Later props win, except that event\n * handlers all run (last first), classNames join, styles combine and refs\n * all receive the element. An `undefined` handler or ref leaves an earlier\n * one in place. The merged ref is a new function on every call, so React\n * reattaches it on each render, as with any inline callback ref.\n */\nexport const mergeProps = (\n  ...sources: (RenderProps | undefined)[]\n): RenderProps => {\n  const merged: RenderProps = {}\n  for (const source of sources) {\n    if (!source) continue\n    for (const [key, value] of Object.entries(source)) {\n      const existing = merged[key]\n      if ((key === 'ref' || /^on[A-Z]/.test(key)) && value === undefined) {\n        continue\n      } else if (key === 'ref' && existing) {\n        merged.ref = composeRefs(\n          existing as Ref<unknown>,\n          value as Ref<unknown>\n        )\n      } else if (\n        /^on[A-Z]/.test(key) &&\n        typeof existing === 'function' &&\n        typeof value === 'function'\n      ) {\n        merged[key] = (...args: unknown[]) => {\n          value(...args)\n          existing(...args)\n        }\n      } else if (key === 'className') {\n        merged.className = cx(existing as string, value as string)\n      } else if (key === 'style') {\n        merged.style = { ...(existing as object), ...(value as object) }\n      } else {\n        merged[key] = value\n      }\n    }\n  }\n  return merged\n}\n\nconst isReact19 = Number(version.split('.')[0]) >= 19\n\n/**\n * The ref an element was created with: a prop in React 19, a field in 18.\n * Reading the field in 19 logs a deprecation warning, so branch on version.\n */\nconst elementRef = (element: ReactElement): Ref<HTMLElement> | undefined =>\n  isReact19\n    ? (element.props as { ref?: Ref<HTMLElement> }).ref\n    : (element as unknown as { ref?: Ref<HTMLElement> }).ref\n\nexport const useRender = <State>({\n  render,\n  props,\n  ref,\n  state,\n  defaultTagName = 'div',\n}: {\n  render?: RenderProp<State>\n  /** The component's own props, already merged with what it was given. */\n  props: RenderProps\n  ref?: Ref<HTMLElement>\n  /** Passed to a `render` function as its second argument. */\n  state: State\n  defaultTagName?: keyof JSX.IntrinsicElements\n}): ReactElement => {\n  const element = isValidElement(render) ? render : undefined\n  const mergedRef = useMergedRefs(ref, element && elementRef(element))\n\n  const rendered =\n    typeof render === 'function'\n      ? render({ ...props, ref: mergedRef }, state)\n      : element\n        ? cloneElement(element, {\n            ...mergeProps(props, element.props as RenderProps),\n            ref: mergedRef,\n          } as RenderProps)\n        : createElement(defaultTagName, { ...props, ref: mergedRef })\n  return rendered.type === 'button' &&\n    (rendered.props as RenderProps).type === undefined\n    ? cloneElement(rendered, { type: 'button' } as RenderProps)\n    : rendered\n}\n"],"mappings":";;;;;;AA+DA,IAAM,UAAa,KAAyB,UAAoB;CAC9D,IAAI,OAAO,QAAQ,YAAY,OAAO,IAAI,KAAK;CAC/C,IAAI,KAAK,IAA+B,UAAU;AACpD;;;;;AAMA,IAAM,eACA,GAAG,UACN,UAAoB;CACnB,MAAM,WAAW,KAAK,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;CACrD,IAAI,CAAC,SAAS,MAAM,YAAY,OAAO,YAAY,UAAU,GAAG;CAChE,aACE,SAAS,SAAS,SAAS,UACzB,OAAO,YAAY,aAAa,QAAQ,IAAI,OAAO,KAAK,QAAQ,IAAI,CACtE;AACJ;;AAGF,IAAM,iBAAoB,GAAG,UAAA,GAC3BA,MAAAA,YAAAA,EAAa,UAAoB,YAAY,GAAG,IAAI,CAAC,CAAC,KAAK,GAAG,IAAI;;;;;;;;AASpE,IAAa,cACX,GAAG,YACa;CAChB,MAAM,SAAsB,CAAC;CAC7B,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,CAAC,QAAQ;EACb,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,GAAG;GACjD,MAAM,WAAW,OAAO;GACxB,KAAK,QAAQ,SAAS,WAAW,KAAK,GAAG,MAAM,UAAU,KAAA,GACvD;QACK,IAAI,QAAQ,SAAS,UAC1B,OAAO,MAAM,YACX,UACA,KACF;QACK,IACL,WAAW,KAAK,GAAG,KACnB,OAAO,aAAa,cACpB,OAAO,UAAU,YAEjB,OAAO,QAAQ,GAAG,SAAoB;IACpC,MAAM,GAAG,IAAI;IACb,SAAS,GAAG,IAAI;GAClB;QACK,IAAI,QAAQ,aACjB,OAAO,aAAA,GAAYC,WAAAA,QAAAA,CAAG,UAAoB,KAAe;QACpD,IAAI,QAAQ,SACjB,OAAO,QAAQ;IAAE,GAAI;IAAqB,GAAI;GAAiB;QAE/D,OAAO,OAAO;EAElB;CACF;CACA,OAAO;AACT;AAEA,IAAM,YAAY,OAAOC,MAAAA,QAAQ,MAAM,GAAG,CAAC,CAAC,EAAE,KAAK;;;;;AAMnD,IAAM,cAAc,YAClB,YACK,QAAQ,MAAqC,MAC7C,QAAkD;AAEzD,IAAa,aAAoB,EAC/B,QACA,OACA,KACA,OACA,iBAAiB,YASC;CAClB,MAAM,WAAA,GAAUC,MAAAA,eAAAA,CAAe,MAAM,IAAI,SAAS,KAAA;CAClD,MAAM,YAAY,cAAc,KAAK,WAAW,WAAW,OAAO,CAAC;CAEnE,MAAM,WACJ,OAAO,WAAW,aACd,OAAO;EAAE,GAAG;EAAO,KAAK;CAAU,GAAG,KAAK,IAC1C,WAAA,GACEC,MAAAA,aAAAA,CAAa,SAAS;EACpB,GAAG,WAAW,OAAO,QAAQ,KAAoB;EACjD,KAAK;CACP,CAAgB,KAAA,GAChBC,MAAAA,cAAAA,CAAc,gBAAgB;EAAE,GAAG;EAAO,KAAK;CAAU,CAAC;CAClE,OAAO,SAAS,SAAS,YACtB,SAAS,MAAsB,SAAS,KAAA,KAAA,GACvCD,MAAAA,aAAAA,CAAa,UAAU,EAAE,MAAM,SAAS,CAAgB,IACxD;AACN"}

package/dist/src/utils/useRender.d.ts

@@ -0,0 +1,29 @@
+import { HTMLAttributes, JSX, ReactElement, Ref, RefCallback } from 'react';
+export type RenderProps = HTMLAttributes<HTMLElement> & {
+    [key: string]: unknown;
+};
+/**
+ * Replaces a component's element. Pass an element to merge the component's
+ * props onto, e.g. `<button />`, or a function that spreads them:
+ * `(props, state) => <button {...props} onClick={…} />`.
+ */
+export type RenderProp<State> = ReactElement | ((props: RenderProps & {
+    ref: RefCallback<HTMLElement>;
+}, state: State) => ReactElement);
+/**
+ * Merges prop objects left to right. Later props win, except that event
+ * handlers all run (last first), classNames join, styles combine and refs
+ * all receive the element. An `undefined` handler or ref leaves an earlier
+ * one in place. The merged ref is a new function on every call, so React
+ * reattaches it on each render, as with any inline callback ref.
+ */
+export declare const mergeProps: (...sources: (RenderProps | undefined)[]) => RenderProps;
+export declare const useRender: <State>({ render, props, ref, state, defaultTagName, }: {
+    render?: RenderProp<State>;
+    /** The component's own props, already merged with what it was given. */
+    props: RenderProps;
+    ref?: Ref<HTMLElement>;
+    /** Passed to a `render` function as its second argument. */
+    state: State;
+    defaultTagName?: keyof JSX.IntrinsicElements;
+}) => ReactElement;

package/dist/src/utils/useRender.js

@@ -0,0 +1,73 @@
+import { cloneElement, createElement, isValidElement, useCallback, version } from "react";
+import cx from "classnames";
+//#region src/utils/useRender.ts
+/** Sets one ref. Returns a callback ref's cleanup, if it gave one. */
+var setRef = (ref, value) => {
+	if (typeof ref === "function") return ref(value);
+	if (ref) ref.current = value;
+};
+/**
+* One callback ref that feeds every ref given to it. When a callback ref
+* returns a cleanup (React 19), detaching runs it instead of passing null.
+*/
+var composeRefs = (...refs) => (value) => {
+	const cleanups = refs.map((ref) => setRef(ref, value));
+	if (!cleanups.some((cleanup) => typeof cleanup === "function")) return;
+	return () => cleanups.forEach((cleanup, index) => typeof cleanup === "function" ? cleanup() : setRef(refs[index], null));
+};
+/** `composeRefs`, kept stable while the refs are. */
+var useMergedRefs = (...refs) => useCallback((value) => composeRefs(...refs)(value), refs);
+/**
+* Merges prop objects left to right. Later props win, except that event
+* handlers all run (last first), classNames join, styles combine and refs
+* all receive the element. An `undefined` handler or ref leaves an earlier
+* one in place. The merged ref is a new function on every call, so React
+* reattaches it on each render, as with any inline callback ref.
+*/
+var mergeProps = (...sources) => {
+	const merged = {};
+	for (const source of sources) {
+		if (!source) continue;
+		for (const [key, value] of Object.entries(source)) {
+			const existing = merged[key];
+			if ((key === "ref" || /^on[A-Z]/.test(key)) && value === void 0) continue;
+			else if (key === "ref" && existing) merged.ref = composeRefs(existing, value);
+			else if (/^on[A-Z]/.test(key) && typeof existing === "function" && typeof value === "function") merged[key] = (...args) => {
+				value(...args);
+				existing(...args);
+			};
+			else if (key === "className") merged.className = cx(existing, value);
+			else if (key === "style") merged.style = {
+				...existing,
+				...value
+			};
+			else merged[key] = value;
+		}
+	}
+	return merged;
+};
+var isReact19 = Number(version.split(".")[0]) >= 19;
+/**
+* The ref an element was created with: a prop in React 19, a field in 18.
+* Reading the field in 19 logs a deprecation warning, so branch on version.
+*/
+var elementRef = (element) => isReact19 ? element.props.ref : element.ref;
+var useRender = ({ render, props, ref, state, defaultTagName = "div" }) => {
+	const element = isValidElement(render) ? render : void 0;
+	const mergedRef = useMergedRefs(ref, element && elementRef(element));
+	const rendered = typeof render === "function" ? render({
+		...props,
+		ref: mergedRef
+	}, state) : element ? cloneElement(element, {
+		...mergeProps(props, element.props),
+		ref: mergedRef
+	}) : createElement(defaultTagName, {
+		...props,
+		ref: mergedRef
+	});
+	return rendered.type === "button" && rendered.props.type === void 0 ? cloneElement(rendered, { type: "button" }) : rendered;
+};
+//#endregion
+export { mergeProps, useRender };
+
+//# sourceMappingURL=useRender.js.map

package/dist/src/utils/useRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRender.js","names":[],"sources":["../../../src/utils/useRender.ts"],"sourcesContent":["// A port of Base UI's `render` prop: its `useRender` hook and `mergeProps`\n// utility (https://base-ui.com/react/utils/use-render), adapted without the\n// dependency and cut down to what this library uses. Base UI also maps state\n// to data-* attributes and takes arrays of refs; neither is needed here.\n//\n// A component keeps its own element and props, and lets the app swap the\n// element: pass an element to merge onto, or a function that receives the\n// props (and the component's state) and returns the element. Unlike Base UI,\n// a <button> that ends up with no `type` gets `type=\"button\"`, so swapping\n// an element in never makes a form submit button by accident.\n//\n// Base UI is distributed under the MIT License:\n//\n// Copyright (c) 2019 Material-UI SAS\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to\n// deal in the Software without restriction, including without limitation the\n// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n// sell copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in\n// all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS\n// IN THE SOFTWARE.\nimport {\n  cloneElement,\n  createElement,\n  isValidElement,\n  useCallback,\n  version,\n  type HTMLAttributes,\n  type JSX,\n  type ReactElement,\n  type Ref,\n  type RefCallback,\n} from 'react'\nimport cx from 'classnames'\n\nexport type RenderProps = HTMLAttributes<HTMLElement> & {\n  [key: string]: unknown\n}\n\n/**\n * Replaces a component's element. Pass an element to merge the component's\n * props onto, e.g. `<button />`, or a function that spreads them:\n * `(props, state) => <button {...props} onClick={…} />`.\n */\nexport type RenderProp<State> =\n  | ReactElement\n  | ((\n      props: RenderProps & { ref: RefCallback<HTMLElement> },\n      state: State\n    ) => ReactElement)\n\n/** Sets one ref. Returns a callback ref's cleanup, if it gave one. */\nconst setRef = <T>(ref: Ref<T> | undefined, value: T | null) => {\n  if (typeof ref === 'function') return ref(value)\n  if (ref) (ref as { current: T | null }).current = value\n}\n\n/**\n * One callback ref that feeds every ref given to it. When a callback ref\n * returns a cleanup (React 19), detaching runs it instead of passing null.\n */\nconst composeRefs =\n  <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n  (value: T | null) => {\n    const cleanups = refs.map((ref) => setRef(ref, value))\n    if (!cleanups.some((cleanup) => typeof cleanup === 'function')) return\n    return () =>\n      cleanups.forEach((cleanup, index) =>\n        typeof cleanup === 'function' ? cleanup() : setRef(refs[index], null)\n      )\n  }\n\n/** `composeRefs`, kept stable while the refs are. */\nconst useMergedRefs = <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n  useCallback((value: T | null) => composeRefs(...refs)(value), refs)\n\n/**\n * Merges prop objects left to right. Later props win, except that event\n * handlers all run (last first), classNames join, styles combine and refs\n * all receive the element. An `undefined` handler or ref leaves an earlier\n * one in place. The merged ref is a new function on every call, so React\n * reattaches it on each render, as with any inline callback ref.\n */\nexport const mergeProps = (\n  ...sources: (RenderProps | undefined)[]\n): RenderProps => {\n  const merged: RenderProps = {}\n  for (const source of sources) {\n    if (!source) continue\n    for (const [key, value] of Object.entries(source)) {\n      const existing = merged[key]\n      if ((key === 'ref' || /^on[A-Z]/.test(key)) && value === undefined) {\n        continue\n      } else if (key === 'ref' && existing) {\n        merged.ref = composeRefs(\n          existing as Ref<unknown>,\n          value as Ref<unknown>\n        )\n      } else if (\n        /^on[A-Z]/.test(key) &&\n        typeof existing === 'function' &&\n        typeof value === 'function'\n      ) {\n        merged[key] = (...args: unknown[]) => {\n          value(...args)\n          existing(...args)\n        }\n      } else if (key === 'className') {\n        merged.className = cx(existing as string, value as string)\n      } else if (key === 'style') {\n        merged.style = { ...(existing as object), ...(value as object) }\n      } else {\n        merged[key] = value\n      }\n    }\n  }\n  return merged\n}\n\nconst isReact19 = Number(version.split('.')[0]) >= 19\n\n/**\n * The ref an element was created with: a prop in React 19, a field in 18.\n * Reading the field in 19 logs a deprecation warning, so branch on version.\n */\nconst elementRef = (element: ReactElement): Ref<HTMLElement> | undefined =>\n  isReact19\n    ? (element.props as { ref?: Ref<HTMLElement> }).ref\n    : (element as unknown as { ref?: Ref<HTMLElement> }).ref\n\nexport const useRender = <State>({\n  render,\n  props,\n  ref,\n  state,\n  defaultTagName = 'div',\n}: {\n  render?: RenderProp<State>\n  /** The component's own props, already merged with what it was given. */\n  props: RenderProps\n  ref?: Ref<HTMLElement>\n  /** Passed to a `render` function as its second argument. */\n  state: State\n  defaultTagName?: keyof JSX.IntrinsicElements\n}): ReactElement => {\n  const element = isValidElement(render) ? render : undefined\n  const mergedRef = useMergedRefs(ref, element && elementRef(element))\n\n  const rendered =\n    typeof render === 'function'\n      ? render({ ...props, ref: mergedRef }, state)\n      : element\n        ? cloneElement(element, {\n            ...mergeProps(props, element.props as RenderProps),\n            ref: mergedRef,\n          } as RenderProps)\n        : createElement(defaultTagName, { ...props, ref: mergedRef })\n  return rendered.type === 'button' &&\n    (rendered.props as RenderProps).type === undefined\n    ? cloneElement(rendered, { type: 'button' } as RenderProps)\n    : rendered\n}\n"],"mappings":";;;;AA+DA,IAAM,UAAa,KAAyB,UAAoB;CAC9D,IAAI,OAAO,QAAQ,YAAY,OAAO,IAAI,KAAK;CAC/C,IAAI,KAAK,IAA+B,UAAU;AACpD;;;;;AAMA,IAAM,eACA,GAAG,UACN,UAAoB;CACnB,MAAM,WAAW,KAAK,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;CACrD,IAAI,CAAC,SAAS,MAAM,YAAY,OAAO,YAAY,UAAU,GAAG;CAChE,aACE,SAAS,SAAS,SAAS,UACzB,OAAO,YAAY,aAAa,QAAQ,IAAI,OAAO,KAAK,QAAQ,IAAI,CACtE;AACJ;;AAGF,IAAM,iBAAoB,GAAG,SAC3B,aAAa,UAAoB,YAAY,GAAG,IAAI,CAAC,CAAC,KAAK,GAAG,IAAI;;;;;;;;AASpE,IAAa,cACX,GAAG,YACa;CAChB,MAAM,SAAsB,CAAC;CAC7B,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,CAAC,QAAQ;EACb,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,GAAG;GACjD,MAAM,WAAW,OAAO;GACxB,KAAK,QAAQ,SAAS,WAAW,KAAK,GAAG,MAAM,UAAU,KAAA,GACvD;QACK,IAAI,QAAQ,SAAS,UAC1B,OAAO,MAAM,YACX,UACA,KACF;QACK,IACL,WAAW,KAAK,GAAG,KACnB,OAAO,aAAa,cACpB,OAAO,UAAU,YAEjB,OAAO,QAAQ,GAAG,SAAoB;IACpC,MAAM,GAAG,IAAI;IACb,SAAS,GAAG,IAAI;GAClB;QACK,IAAI,QAAQ,aACjB,OAAO,YAAY,GAAG,UAAoB,KAAe;QACpD,IAAI,QAAQ,SACjB,OAAO,QAAQ;IAAE,GAAI;IAAqB,GAAI;GAAiB;QAE/D,OAAO,OAAO;EAElB;CACF;CACA,OAAO;AACT;AAEA,IAAM,YAAY,OAAO,QAAQ,MAAM,GAAG,CAAC,CAAC,EAAE,KAAK;;;;;AAMnD,IAAM,cAAc,YAClB,YACK,QAAQ,MAAqC,MAC7C,QAAkD;AAEzD,IAAa,aAAoB,EAC/B,QACA,OACA,KACA,OACA,iBAAiB,YASC;CAClB,MAAM,UAAU,eAAe,MAAM,IAAI,SAAS,KAAA;CAClD,MAAM,YAAY,cAAc,KAAK,WAAW,WAAW,OAAO,CAAC;CAEnE,MAAM,WACJ,OAAO,WAAW,aACd,OAAO;EAAE,GAAG;EAAO,KAAK;CAAU,GAAG,KAAK,IAC1C,UACE,aAAa,SAAS;EACpB,GAAG,WAAW,OAAO,QAAQ,KAAoB;EACjD,KAAK;CACP,CAAgB,IAChB,cAAc,gBAAgB;EAAE,GAAG;EAAO,KAAK;CAAU,CAAC;CAClE,OAAO,SAAS,SAAS,YACtB,SAAS,MAAsB,SAAS,KAAA,IACvC,aAAa,UAAU,EAAE,MAAM,SAAS,CAAgB,IACxD;AACN"}