@igne-agency/react-web-ui 0.3.0 → 0.4.0

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -1,15 +1,12 @@
-import SvgChevronRight from "../../vendor/@material-design-icons/svg/outlined/chevron_right.js";
-import SvgMoreHoriz from "../../vendor/@material-design-icons/svg/outlined/more_horiz.js";
 import { Button } from "../button/button.js";
-import { Icon } from "../icon/icon.js";
 import { Menu } from "../menu/menu.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import breadcrumbs_module_default from "./breadcrumbs.module.js";
 import { useFold } from "./use-fold.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/breadcrumbs/breadcrumbs.tsx
 var isClipped = (element) => element.scrollWidth > element.clientWidth;
 /**
@@ -342,105 +339,93 @@ var Page = (t0) => {
 	} else t3 = $[12];
 	return t3;
 };
-/** The decorative mark between two crumbs; a chevron unless given `children`. */
+/**
+* The decorative space between two crumbs, holding the app's mark, such as a
+* chevron, given as `children`. Without one it is spacing alone.
+*/
 var Separator = (t0) => {
-	const $ = c(18);
-	let children;
+	const $ = c(14);
 	let className;
 	let props;
 	let ref;
 	let render;
 	if ($[0] !== t0) {
-		({render, className, children, ref, ...props} = t0);
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = ref;
-		$[5] = render;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		ref = $[4];
-		render = $[5];
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
 	}
 	let t1;
-	if ($[6] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(breadcrumbs_module_default.separator, className);
-		$[6] = className;
-		$[7] = t1;
-	} else t1 = $[7];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[8] !== children) {
-		t2 = children ?? /* @__PURE__ */ jsx(Icon, {
-			svg: SvgChevronRight,
-			label: ""
-		});
-		$[8] = children;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			"aria-hidden": true,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
 		$[9] = t2;
 	} else t2 = $[9];
 	let t3;
-	if ($[10] !== props || $[11] !== t1 || $[12] !== t2) {
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
 		t3 = {
-			...props,
-			"aria-hidden": true,
-			className: t1,
-			children: t2
-		};
-		$[10] = props;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-	} else t3 = $[13];
-	let t4;
-	if ($[14] !== ref || $[15] !== render || $[16] !== t3) {
-		t4 = {
 			defaultTagName: "li",
 			render,
 			ref,
-			props: t3
+			props: t2
 		};
-		$[14] = ref;
-		$[15] = render;
-		$[16] = t3;
-		$[17] = t4;
-	} else t4 = $[17];
-	return useRender(t4);
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
 /** A button that opens a menu of the crumbs the trail has no room for. */
 var Overflow = (t0) => {
-	const $ = c(7);
-	const { label, children } = t0;
+	const $ = c(8);
+	const { label, icon, children } = t0;
 	let t1;
-	if ($[0] !== label) {
+	if ($[0] !== icon || $[1] !== label) {
 		t1 = /* @__PURE__ */ jsx(Menu.Trigger, {
-			icon: SvgMoreHoriz,
+			icon,
 			label
 		});
-		$[0] = label;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[0] = icon;
+		$[1] = label;
+		$[2] = t1;
+	} else t1 = $[2];
 	let t2;
-	if ($[2] !== children) {
-		t2 = /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+	if ($[3] !== children) {
+		t2 = /* @__PURE__ */ jsx(Menu.Content, {
 			align: "start",
 			sideOffset: 4,
-			children: /* @__PURE__ */ jsx(Menu.Popup, {
-				className: breadcrumbs_module_default.popup,
-				children
-			})
-		}) });
-		$[2] = children;
-		$[3] = t2;
-	} else t2 = $[3];
+			className: breadcrumbs_module_default.popup,
+			children
+		});
+		$[3] = children;
+		$[4] = t2;
+	} else t2 = $[4];
 	let t3;
-	if ($[4] !== t1 || $[5] !== t2) {
+	if ($[5] !== t1 || $[6] !== t2) {
 		t3 = /* @__PURE__ */ jsxs(Menu.Root, { children: [t1, t2] });
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
 	return t3;
 };
 /**
@@ -448,8 +433,8 @@ var Overflow = (t0) => {
 * the overflow button, for `useFold` to measure.
 */
 var Gauge = (t0) => {
-	const $ = c(9);
-	const { labels, overflowLabel, ref } = t0;
+	const $ = c(13);
+	const { labels, overflowLabel, overflowIcon, separator, ref } = t0;
 	let t1;
 	if ($[0] !== labels) {
 		t1 = labels.map(_temp2);
@@ -458,27 +443,37 @@ var Gauge = (t0) => {
 	} else t1 = $[1];
 	let t2;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Separator, { render: /* @__PURE__ */ jsx("li", { "data-gauge": "separator" }) });
+		t2 = /* @__PURE__ */ jsx("li", { "data-gauge": "separator" });
 		$[2] = t2;
 	} else t2 = $[2];
 	let t3;
-	if ($[3] !== overflowLabel) {
-		t3 = /* @__PURE__ */ jsx("li", {
+	if ($[3] !== separator) {
+		t3 = /* @__PURE__ */ jsx(Separator, {
+			render: t2,
+			children: separator
+		});
+		$[3] = separator;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== overflowIcon || $[6] !== overflowLabel) {
+		t4 = /* @__PURE__ */ jsx("li", {
 			"data-gauge": "overflow",
 			className: breadcrumbs_module_default.item,
 			children: /* @__PURE__ */ jsx(Button, {
 				variant: "tertiary",
 				iconOnly: true,
-				icon: SvgMoreHoriz,
+				icon: overflowIcon,
 				label: overflowLabel
 			})
 		});
-		$[3] = overflowLabel;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== ref || $[6] !== t1 || $[7] !== t3) {
-		t4 = /* @__PURE__ */ jsx("div", {
+		$[5] = overflowIcon;
+		$[6] = overflowLabel;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== ref || $[9] !== t1 || $[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
 			className: breadcrumbs_module_default.gauge,
 			"aria-hidden": true,
 			inert: true,
@@ -487,21 +482,22 @@ var Gauge = (t0) => {
 				className: breadcrumbs_module_default.gaugeList,
 				children: [
 					t1,
-					t2,
-					t3
+					t3,
+					t4
 				]
 			})
 		});
-		$[5] = ref;
-		$[6] = t1;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
+		$[8] = ref;
+		$[9] = t1;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
 };
 var Ancestor = (t0) => {
-	const $ = c(6);
-	const { crumb } = t0;
+	const $ = c(8);
+	const { crumb, separator } = t0;
 	let t1;
 	if ($[0] !== crumb.label || $[1] !== crumb.render) {
 		t1 = /* @__PURE__ */ jsx(Item, { children: crumb.render === void 0 ? /* @__PURE__ */ jsx("span", {
@@ -516,16 +512,18 @@ var Ancestor = (t0) => {
 		$[2] = t1;
 	} else t1 = $[2];
 	let t2;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Separator, {});
-		$[3] = t2;
-	} else t2 = $[3];
+	if ($[3] !== separator) {
+		t2 = /* @__PURE__ */ jsx(Separator, { children: separator });
+		$[3] = separator;
+		$[4] = t2;
+	} else t2 = $[4];
 	let t3;
-	if ($[4] !== t1) {
+	if ($[5] !== t1 || $[6] !== t2) {
 		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
-		$[4] = t1;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
 	return t3;
 };
 /**
@@ -534,8 +532,8 @@ var Ancestor = (t0) => {
 * and the current page stay. Renders nothing for a trail of one.
 */
 var Trail = (t0) => {
-	const $ = c(37);
-	const { label, overflowLabel, crumbs, className } = t0;
+	const $ = c(45);
+	const { label, overflowLabel, overflowIcon, separator, crumbs, className } = t0;
 	const { root, gauge, folded } = useFold();
 	let t1;
 	if ($[0] !== crumbs) {
@@ -553,7 +551,7 @@ var Trail = (t0) => {
 	let t5;
 	let t6;
 	let t7;
-	if ($[2] !== className || $[3] !== crumbs || $[4] !== folded || $[5] !== label || $[6] !== overflowLabel || $[7] !== root) {
+	if ($[2] !== className || $[3] !== crumbs || $[4] !== folded || $[5] !== label || $[6] !== overflowIcon || $[7] !== overflowLabel || $[8] !== root || $[9] !== separator) {
 		const ancestors = crumbs.slice(0, -1);
 		const hidden = ancestors.slice(1, 1 + folded);
 		T1 = Root;
@@ -561,91 +559,116 @@ var Trail = (t0) => {
 		t6 = label;
 		t7 = className;
 		T0 = List;
-		t2 = ancestors.slice(0, 1).map(_temp3);
+		let t8;
+		if ($[18] !== separator) {
+			t8 = (crumb) => /* @__PURE__ */ jsx(Ancestor, {
+				crumb,
+				separator
+			}, crumb.id);
+			$[18] = separator;
+			$[19] = t8;
+		} else t8 = $[19];
+		t2 = ancestors.slice(0, 1).map(t8);
 		t3 = hidden.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Overflow, {
 			label: overflowLabel,
-			children: hidden.map(_temp4)
-		}) }), /* @__PURE__ */ jsx(Separator, {})] }) : null;
-		t4 = ancestors.slice(1 + hidden.length).map(_temp5);
+			icon: overflowIcon,
+			children: hidden.map(_temp3)
+		}) }), /* @__PURE__ */ jsx(Separator, { children: separator })] }) : null;
+		let t9;
+		if ($[20] !== separator) {
+			t9 = (crumb_1) => /* @__PURE__ */ jsx(Ancestor, {
+				crumb: crumb_1,
+				separator
+			}, crumb_1.id);
+			$[20] = separator;
+			$[21] = t9;
+		} else t9 = $[21];
+		t4 = ancestors.slice(1 + hidden.length).map(t9);
 		$[2] = className;
 		$[3] = crumbs;
 		$[4] = folded;
 		$[5] = label;
-		$[6] = overflowLabel;
-		$[7] = root;
-		$[8] = T0;
-		$[9] = T1;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-		$[14] = t6;
-		$[15] = t7;
+		$[6] = overflowIcon;
+		$[7] = overflowLabel;
+		$[8] = root;
+		$[9] = separator;
+		$[10] = T0;
+		$[11] = T1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t7;
 	} else {
-		T0 = $[8];
-		T1 = $[9];
-		t2 = $[10];
-		t3 = $[11];
-		t4 = $[12];
-		t5 = $[13];
-		t6 = $[14];
-		t7 = $[15];
+		T0 = $[10];
+		T1 = $[11];
+		t2 = $[12];
+		t3 = $[13];
+		t4 = $[14];
+		t5 = $[15];
+		t6 = $[16];
+		t7 = $[17];
 	}
 	let t8;
-	if ($[16] !== current.label) {
+	if ($[22] !== current.label) {
 		t8 = /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsx(Page, { children: current.label }) });
-		$[16] = current.label;
-		$[17] = t8;
-	} else t8 = $[17];
+		$[22] = current.label;
+		$[23] = t8;
+	} else t8 = $[23];
 	let t9;
-	if ($[18] !== T0 || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t8) {
+	if ($[24] !== T0 || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t8) {
 		t9 = /* @__PURE__ */ jsxs(T0, { children: [
 			t2,
 			t3,
 			t4,
 			t8
 		] });
-		$[18] = T0;
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t8;
-		$[23] = t9;
-	} else t9 = $[23];
+		$[24] = T0;
+		$[25] = t2;
+		$[26] = t3;
+		$[27] = t4;
+		$[28] = t8;
+		$[29] = t9;
+	} else t9 = $[29];
 	let t10;
-	if ($[24] !== crumbs) {
-		t10 = crumbs.map(_temp6);
-		$[24] = crumbs;
-		$[25] = t10;
-	} else t10 = $[25];
+	if ($[30] !== crumbs) {
+		t10 = crumbs.map(_temp4);
+		$[30] = crumbs;
+		$[31] = t10;
+	} else t10 = $[31];
 	let t11;
-	if ($[26] !== gauge || $[27] !== overflowLabel || $[28] !== t10) {
+	if ($[32] !== gauge || $[33] !== overflowIcon || $[34] !== overflowLabel || $[35] !== separator || $[36] !== t10) {
 		t11 = /* @__PURE__ */ jsx(Gauge, {
 			ref: gauge,
 			labels: t10,
-			overflowLabel
+			overflowLabel,
+			overflowIcon,
+			separator
 		});
-		$[26] = gauge;
-		$[27] = overflowLabel;
-		$[28] = t10;
-		$[29] = t11;
-	} else t11 = $[29];
+		$[32] = gauge;
+		$[33] = overflowIcon;
+		$[34] = overflowLabel;
+		$[35] = separator;
+		$[36] = t10;
+		$[37] = t11;
+	} else t11 = $[37];
 	let t12;
-	if ($[30] !== T1 || $[31] !== t11 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7 || $[35] !== t9) {
+	if ($[38] !== T1 || $[39] !== t11 || $[40] !== t5 || $[41] !== t6 || $[42] !== t7 || $[43] !== t9) {
 		t12 = /* @__PURE__ */ jsxs(T1, {
 			ref: t5,
 			"aria-label": t6,
 			className: t7,
 			children: [t9, t11]
 		});
-		$[30] = T1;
-		$[31] = t11;
-		$[32] = t5;
-		$[33] = t6;
-		$[34] = t7;
-		$[35] = t9;
-		$[36] = t12;
-	} else t12 = $[36];
+		$[38] = T1;
+		$[39] = t11;
+		$[40] = t5;
+		$[41] = t6;
+		$[42] = t7;
+		$[43] = t9;
+		$[44] = t12;
+	} else t12 = $[44];
 	return t12;
 };
 /**
@@ -656,10 +679,12 @@ var Trail = (t0) => {
 * <Breadcrumbs
 * 	label="Breadcrumbs"
 * 	overflowLabel="Show more"
+* 	overflowIcon={<MoreIcon />}
+* 	separator={<ChevronIcon />}
 * 	crumbs={[
 * 		{ id: "home", label: "Home", render: <Link to="/" /> },
-* 		{ id: "declarations", label: "Declarations", render: <Link to="/declarations" /> },
-* 		{ id: "declaration", label: "Declaration 2041" },
+* 		{ id: "invoices", label: "Invoices", render: <Link to="/invoices" /> },
+* 		{ id: "invoice", label: "Invoice 2041" },
 * 	]}
 * />
 */
@@ -686,10 +711,7 @@ function _temp2(label, index) {
 		})
 	}, index);
 }
-function _temp3(crumb) {
-	return /* @__PURE__ */ jsx(Ancestor, { crumb }, crumb.id);
-}
-function _temp4(crumb_0) {
+function _temp3(crumb_0) {
 	return crumb_0.render === void 0 ? /* @__PURE__ */ jsx(Menu.Item, {
 		label: crumb_0.textValue,
 		disabled: true,
@@ -701,10 +723,7 @@ function _temp4(crumb_0) {
 		children: crumb_0.label
 	}, crumb_0.id);
 }
-function _temp5(crumb_1) {
-	return /* @__PURE__ */ jsx(Ancestor, { crumb: crumb_1 }, crumb_1.id);
-}
-function _temp6(crumb_2) {
+function _temp4(crumb_2) {
 	return crumb_2.label;
 }
 export { Breadcrumbs };

package/dist/components/button/button.d.ts

@@ -1,5 +1,4 @@
 import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
-import { type SvgComponent } from "../icon/icon.tsx";
 /** A button's visual tier. */
 export type ButtonVariant = "primary" | "secondary" | "tertiary";
 /** A button's size. */
@@ -22,13 +21,13 @@ type BaseProps = ComponentPropsWithRef<"button"> & Readonly<{
 type TextButtonProps = BaseProps & Readonly<{
     iconOnly?: false;
     /** Optional leading icon rendered before the label. */
-    icon?: SvgComponent;
+    icon?: ReactNode;
     children: ReactNode;
 }>;
 type IconOnlyButtonProps = BaseProps & Readonly<{
     iconOnly: true;
     /** Icon to render; required in icon-only mode. */
-    icon: SvgComponent;
+    icon: ReactNode;
     /** Accessible name, surfaced as the tooltip hint and set as `aria-label`, since the icon alone conveys no text. */
     label: string;
     children?: never;