@jfrader/ui 0.1.2 → 0.2.0

package/README.md

@@ -58,7 +58,7 @@ import { Dialog } from '@jfrader/ui/dialog';
 import { ThemeRoot } from '@jfrader/ui/theme-root';
 ```
 
-`react` and `react-dom` (`>=18.2`) are peer dependencies.
+`react` and `react-dom` (`^19.0.0`) are peer dependencies.
 
 Next.js App Router: see [Next.js App Router](https://github.com/jfrader/jfrader-ui/blob/master/docs/consuming-jfrader-ui.md#nextjs-app-router) for the required Emotion registry.
 

package/dist/accordion-CkOZ-tvs.js

@@ -0,0 +1,178 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { t } from "./disclosure-caret-C5T3fcl6.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r } from "./media-D_eA_I-e.js";
+import { n as i } from "./roving-focus-CYlo_Kf8.js";
+import { t as a } from "./use-controlled-state-CVXDa-qM.js";
+import { createContext as o, useContext as s, useId as c, useMemo as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { jsx as d } from "@emotion/react/jsx-runtime";
+//#region src/components/accordion/accordion.tsx
+var f = o(null), p = o(null);
+function m(e) {
+	let t = s(f);
+	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion>.`);
+	return t;
+}
+function h(e) {
+	let t = s(p);
+	if (!t) throw Error(`Accordion.${e} must be rendered inside <Accordion.Item>.`);
+	return t;
+}
+var g = "", _ = {
+	itemSelector: "[data-ui=\"accordion-trigger\"]:not([disabled])",
+	ownerSelector: "[data-ui=\"accordion\"]"
+}, v = (e, t) => {
+	if (t === "multiple" && Array.isArray(e)) return e;
+	let n = Array.isArray(e) ? e[0] : e;
+	return n === void 0 || n === g ? [] : [n];
+}, y = e({
+	borderBlockEnd: `1px solid ${u.color.border}`,
+	"&:first-of-type": { borderBlockStart: `1px solid ${u.color.border}` }
+}), b = e({
+	margin: 0,
+	font: "inherit"
+}), x = e({
+	appearance: "none",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: u.space[3],
+	inlineSize: "100%",
+	border: 0,
+	background: "transparent",
+	cursor: "pointer",
+	paddingBlock: u.space[3],
+	paddingInline: u.space[4],
+	font: "inherit",
+	fontSize: u.textSize.sm,
+	fontWeight: u.fontWeight.medium,
+	color: u.color.text,
+	textAlign: "start",
+	transitionProperty: "background-color",
+	transitionDuration: u.motion.duration.fast,
+	transitionTimingFunction: u.motion.easeStandard,
+	"&::after": { ...t },
+	"&[aria-expanded=\"true\"]::after": { transform: "rotate(90deg)" },
+	"&[aria-expanded=\"true\"]:dir(rtl)::after": { transform: "rotate(-90deg)" },
+	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { backgroundColor: u.color.surfaceHover },
+	"&[aria-disabled=\"true\"]": { cursor: "default" },
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	"&:focus-visible": { ...n },
+	[r]: {
+		transitionDuration: "0s",
+		"&::after": { transitionDuration: "0s" }
+	}
+}), S = e({
+	paddingBlock: u.space[3],
+	paddingInline: u.space[4],
+	color: u.color.textMuted,
+	lineHeight: u.lineHeight.relaxed,
+	"&[hidden]": { display: "none" }
+});
+function C({ ref: e, value: t, defaultValue: n, onValueChange: r, type: o = "single", collapsible: s = !0, onKeyDown: c, ...u }) {
+	let [p, m] = a(t, n, r), h = l(() => {
+		let e = v(p, o), t = s || e.length > 1;
+		return {
+			openValues: e,
+			toggle: (n) => {
+				let r = e.includes(n);
+				(!r || t) && m(o === "multiple" ? r ? e.filter((e) => e !== n) : [...e, n] : r ? g : n);
+			},
+			canCollapse: t
+		};
+	}, [
+		p,
+		m,
+		o,
+		s
+	]), y = (e) => {
+		c?.(e), !e.defaultPrevented && i(e, e.currentTarget, "vertical", _);
+	};
+	return /* @__PURE__ */ d(f.Provider, {
+		value: h,
+		children: /* @__PURE__ */ d("div", {
+			...u,
+			ref: e,
+			"data-ui": "accordion",
+			onKeyDown: y
+		})
+	});
+}
+C.displayName = "Accordion";
+function w({ ref: e, value: t, disabled: n = !1, ...r }) {
+	let { openValues: i } = m("Item"), a = c(), o = i.includes(t), s = l(() => ({
+		value: t,
+		disabled: n,
+		expanded: o,
+		triggerId: `${a}-trigger`,
+		panelId: `${a}-panel`
+	}), [
+		t,
+		n,
+		o,
+		a
+	]);
+	return /* @__PURE__ */ d(p.Provider, {
+		value: s,
+		children: /* @__PURE__ */ d("div", {
+			...r,
+			ref: e,
+			"data-ui": "accordion-item",
+			"data-state": o ? "open" : "closed",
+			"data-disabled": n ? "" : void 0,
+			css: y
+		})
+	});
+}
+w.displayName = "Accordion.Item";
+function T({ ref: e, onClick: t, disabled: n, ...r }) {
+	let { toggle: i, canCollapse: a } = m("Trigger"), { value: o, disabled: s, expanded: c, triggerId: l, panelId: u } = h("Trigger"), f = c && !a, p = (e) => {
+		t?.(e), !e.defaultPrevented && i(o);
+	};
+	return /* @__PURE__ */ d("h3", {
+		"data-ui": "accordion-heading",
+		css: b,
+		children: /* @__PURE__ */ d("button", {
+			...r,
+			ref: e,
+			type: "button",
+			id: l,
+			"data-ui": "accordion-trigger",
+			"data-state": c ? "open" : "closed",
+			"aria-expanded": c,
+			"aria-controls": u,
+			"aria-disabled": f || void 0,
+			disabled: s || n,
+			onClick: p,
+			css: x
+		})
+	});
+}
+T.displayName = "Accordion.Trigger";
+function E({ ref: e, "aria-labelledby": t, ...n }) {
+	let { expanded: r, triggerId: i, panelId: a } = h("Panel"), o = [t, i].filter(Boolean).join(" ");
+	return /* @__PURE__ */ d("div", {
+		...n,
+		ref: e,
+		role: "region",
+		id: a,
+		"aria-labelledby": o,
+		hidden: !r,
+		"data-ui": "accordion-panel",
+		"data-state": r ? "open" : "closed",
+		css: S
+	});
+}
+E.displayName = "Accordion.Panel";
+var D = Object.assign(C, {
+	Item: w,
+	Trigger: T,
+	Panel: E
+});
+//#endregion
+export { D as t };

package/dist/accordion.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Accordion } from "./accordion-C3YbYFBi.js";
+export { t as Accordion } from "./accordion-CkOZ-tvs.js";

package/dist/alert-Dsjx14UW.js

@@ -0,0 +1,131 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n } from "./media-D_eA_I-e.js";
+import { t as r } from "./visually-hidden-DCWhf0Cb.js";
+import { t as i } from "./renderable-DzcIj1Lo.js";
+import { vars as a } from "@jfrader/tokens/vars";
+import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
+//#region src/components/alert/alert.tsx
+var c = {
+	info: "Information",
+	success: "Success",
+	warning: "Warning",
+	danger: "Error"
+}, l = e({
+	display: "grid",
+	gap: a.space[1],
+	boxSizing: "border-box",
+	backgroundColor: a.color.surfaceRaised,
+	border: `1px solid ${a.color.border}`,
+	borderInlineStartWidth: "3px",
+	borderInlineStartStyle: "solid",
+	borderRadius: a.radius.md,
+	paddingBlock: a.space[3],
+	paddingInline: a.space[4],
+	fontFamily: a.font.sans,
+	lineHeight: a.lineHeight.base
+}), u = e({
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	columnGap: a.space[3]
+}), d = e({
+	display: "grid",
+	gap: a.space[1],
+	minInlineSize: 0,
+	gridColumn: 1,
+	gridRow: 1
+}), f = {
+	info: e({ borderInlineStartColor: a.color.info }),
+	success: e({ borderInlineStartColor: a.color.success }),
+	warning: e({ borderInlineStartColor: a.color.warning }),
+	danger: e({ borderInlineStartColor: a.color.dangerText })
+}, p = e({
+	gridColumn: 1,
+	fontSize: a.textSize.sm,
+	fontWeight: a.fontWeight.semibold,
+	color: a.color.text
+}), m = e({
+	gridColumn: 1,
+	fontSize: a.textSize.sm,
+	color: a.color.textMuted
+}), h = e({
+	gridColumn: 2,
+	gridRow: 1,
+	alignSelf: "start",
+	appearance: "none",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	minInlineSize: "24px",
+	minBlockSize: "24px",
+	margin: 0,
+	padding: 0,
+	border: "1px solid transparent",
+	borderRadius: a.radius.sm,
+	backgroundColor: "transparent",
+	fontFamily: "inherit",
+	fontSize: a.textSize.md,
+	lineHeight: 1,
+	color: a.color.textMuted,
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: a.motion.duration.fast,
+	transitionTimingFunction: a.motion.easeStandard,
+	"&:hover": {
+		backgroundColor: a.color.surfaceHover,
+		color: a.color.text
+	},
+	"&:focus-visible": { ...t },
+	[n]: { transitionDuration: "0s" }
+});
+function g({ ref: e, tone: t = "info", toneLabel: n = c[t], title: a, children: g, onDismiss: _, dismissLabel: v = "Dismiss", slotProps: y, className: b, ...x }) {
+	let S = _ !== void 0;
+	return /* @__PURE__ */ s("div", {
+		...x,
+		ref: e,
+		"data-ui": "alert",
+		"data-tone": t,
+		className: [b, y?.root?.className].filter(Boolean).join(" ") || void 0,
+		css: [
+			l,
+			f[t],
+			S && u,
+			y?.root?.css
+		],
+		children: [/* @__PURE__ */ s("div", {
+			role: t === "danger" ? "alert" : "status",
+			"aria-atomic": "true",
+			css: d,
+			children: [
+				/* @__PURE__ */ o("span", {
+					css: r,
+					children: n
+				}),
+				i(a) && /* @__PURE__ */ o("div", {
+					className: y?.title?.className,
+					css: [p, y?.title?.css],
+					children: a
+				}),
+				i(g) && /* @__PURE__ */ o("div", {
+					className: y?.body?.className,
+					css: [m, y?.body?.css],
+					children: g
+				})
+			]
+		}), S && /* @__PURE__ */ o("button", {
+			type: "button",
+			"data-ui": "alert-dismiss",
+			"aria-label": v,
+			onClick: () => _?.(),
+			className: y?.dismiss?.className,
+			css: [h, y?.dismiss?.css],
+			children: /* @__PURE__ */ o("span", {
+				"aria-hidden": !0,
+				children: "×"
+			})
+		})]
+	});
+}
+g.displayName = "Alert";
+//#endregion
+export { g as t };

package/dist/alert.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Alert } from "./alert-CA9ZlIZp.js";
+export { t as Alert } from "./alert-Dsjx14UW.js";

package/dist/avatar-BRGKkoSr.js

@@ -0,0 +1,127 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { useState as t } from "react";
+import { vars as n } from "@jfrader/tokens/vars";
+import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
+//#region src/components/avatar/avatar.tsx
+var a = 2, o = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function s(e) {
+	let t = Array.from(o.segment(e), ({ segment: e }) => e), n = t[0] ?? "";
+	if (!/\p{Extended_Pictographic}/u.test(n)) return n;
+	let r = "";
+	for (let e of t) {
+		if (!/\p{Extended_Pictographic}/u.test(e)) break;
+		r += e;
+	}
+	return r;
+}
+function c(e) {
+	return e.trim().split(/\s+/).filter(Boolean).slice(0, a).map(s).join("").toLocaleUpperCase();
+}
+var l = e({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	borderRadius: n.radius.full,
+	backgroundColor: n.color.surfaceHover,
+	color: n.color.text,
+	fontWeight: n.fontWeight.medium,
+	lineHeight: 1,
+	userSelect: "none",
+	verticalAlign: "middle"
+}), u = {
+	sm: e({
+		inlineSize: n.space[6],
+		blockSize: n.space[6],
+		fontSize: n.textSize.xs
+	}),
+	md: e({
+		inlineSize: n.space[8],
+		blockSize: n.space[8],
+		fontSize: n.textSize.sm
+	}),
+	lg: e({
+		inlineSize: n.space[10],
+		blockSize: n.space[10],
+		fontSize: n.textSize.md
+	})
+}, d = e({
+	display: "block",
+	inlineSize: "100%",
+	blockSize: "100%",
+	borderRadius: n.radius.full,
+	objectFit: "cover"
+}), f = e({
+	position: "absolute",
+	insetBlockEnd: 0,
+	insetInlineEnd: 0,
+	inlineSize: "25%",
+	blockSize: "25%",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		inlineSize: "100%",
+		blockSize: "100%",
+		boxSizing: "border-box",
+		borderRadius: n.radius.full,
+		boxShadow: `0 0 0 2px ${n.color.bg}`
+	}
+}), p = {
+	online: e({ "&::before": { backgroundColor: n.color.success } }),
+	away: e({ "&::before": {
+		border: `2px solid ${n.color.warning}`,
+		backgroundColor: "transparent"
+	} }),
+	busy: e({ "&::before": {
+		backgroundColor: n.color.danger,
+		blockSize: "30%",
+		insetBlockStart: "35%"
+	} }),
+	offline: e({ "&::before": {
+		backgroundColor: n.color.textSubtle,
+		inlineSize: "60%",
+		blockSize: "60%",
+		insetBlockStart: "20%",
+		insetInlineStart: "20%"
+	} })
+};
+function m({ ref: e, name: n, src: a, size: o = "md", status: s, statusLabel: m, slotProps: h, ...g }) {
+	let [_, v] = t(), y = a !== void 0 && a !== "" && a !== _, b = s === void 0 ? n : `${n}, ${m ?? s}`;
+	return /* @__PURE__ */ i("span", {
+		...g,
+		ref: e,
+		"data-ui": "avatar",
+		role: "img",
+		"aria-label": b,
+		css: [l, u[o]],
+		children: [y ? /* @__PURE__ */ r("img", {
+			src: a,
+			alt: "",
+			onError: () => v(a),
+			className: h?.image?.className,
+			css: [d, h?.image?.css]
+		}) : /* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			className: h?.fallback?.className,
+			css: h?.fallback?.css,
+			children: c(n)
+		}), s !== void 0 && /* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			"data-status": s,
+			className: h?.status?.className,
+			css: [
+				f,
+				p[s],
+				h?.status?.css
+			]
+		})]
+	});
+}
+m.displayName = "Avatar";
+//#endregion
+export { m as t };

package/dist/avatar.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Avatar } from "./avatar-IUW4yJl0.js";
+export { t as Avatar } from "./avatar-BRGKkoSr.js";

package/dist/badge-DLxUMsCx.js

@@ -0,0 +1,104 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { vars as t } from "@jfrader/tokens/vars";
+import { jsx as n, jsxs as r } from "@emotion/react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+var i = 99, a = e({
+	position: "relative",
+	display: "inline-flex",
+	flexShrink: 0,
+	verticalAlign: "middle"
+}), o = e({
+	position: "absolute",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	boxSizing: "border-box",
+	boxShadow: `0 0 0 2px ${t.color.bg}`,
+	fontWeight: t.fontWeight.medium,
+	lineHeight: 1,
+	whiteSpace: "nowrap",
+	pointerEvents: "none"
+}), s = {
+	standard: e({
+		blockSize: t.space[5],
+		minInlineSize: t.space[5],
+		paddingInline: t.space[1],
+		fontSize: t.textSize.xs
+	}),
+	dot: e({
+		blockSize: t.space[2],
+		inlineSize: t.space[2],
+		borderRadius: t.radius.full
+	})
+}, c = {
+	rectangular: e({ borderRadius: t.radius.sm }),
+	circular: e({ borderRadius: t.radius.full })
+}, l = {
+	"top-start": e({
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		transform: "translate(-50%, -50%)",
+		"&:dir(rtl)": { transform: "translate(50%, -50%)" }
+	}),
+	"top-end": e({
+		insetBlockStart: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, -50%)",
+		"&:dir(rtl)": { transform: "translate(-50%, -50%)" }
+	}),
+	"bottom-start": e({
+		insetBlockEnd: 0,
+		insetInlineStart: 0,
+		transform: "translate(-50%, 50%)",
+		"&:dir(rtl)": { transform: "translate(50%, 50%)" }
+	}),
+	"bottom-end": e({
+		insetBlockEnd: 0,
+		insetInlineEnd: 0,
+		transform: "translate(50%, 50%)",
+		"&:dir(rtl)": { transform: "translate(-50%, 50%)" }
+	})
+}, u = {
+	accent: e({
+		backgroundColor: t.color.accent,
+		color: t.color.accentContrast
+	}),
+	danger: e({
+		backgroundColor: t.color.danger,
+		color: t.color.dangerContrast
+	}),
+	neutral: e({
+		backgroundColor: t.color.textMuted,
+		color: t.color.bg
+	})
+};
+function d({ ref: e, children: t, badgeContent: d, max: f = i, showZero: p = !1, invisible: m = !1, variant: h = "standard", tone: g = "accent", anchor: _, overlap: v = "rectangular", slotProps: y, className: b, ...x }) {
+	let S = h === "dot", C = m || h !== "dot" && (d == null || d === !1 || d === 0 && !p), w = typeof d == "number" && d > f ? `${f}+` : d, T = `${_?.vertical ?? "top"}-${_?.horizontal ?? "end"}`, E = [b, y?.root?.className].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ r("span", {
+		...x,
+		ref: e,
+		"data-ui": "badge",
+		className: E,
+		css: [a, y?.root?.css],
+		children: [t, !C && /* @__PURE__ */ n("span", {
+			"data-ui": "badge-marker",
+			"data-variant": h,
+			"data-tone": g,
+			"aria-hidden": S ? "true" : void 0,
+			className: y?.badge?.className,
+			css: [
+				o,
+				s[h],
+				!S && c[v],
+				l[T],
+				u[g],
+				y?.badge?.css
+			],
+			children: S ? null : w
+		})]
+	});
+}
+d.displayName = "Badge";
+//#endregion
+export { d as t };

package/dist/badge.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Badge } from "./badge-Bru30HEn.js";
+export { t as Badge } from "./badge-DLxUMsCx.js";

package/dist/breadcrumbs-694hF_hm.js

@@ -0,0 +1,131 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n } from "./media-D_eA_I-e.js";
+import { createContext as r, useCallback as i, useContext as a, useId as o, useImperativeHandle as s, useLayoutEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
+//#region src/components/breadcrumbs/breadcrumbs.tsx
+var h = r(null);
+function g(e) {
+	let t = a(h);
+	if (!t) throw Error(`Breadcrumbs.${e} must be rendered inside <Breadcrumbs>.`);
+	return t;
+}
+var _ = ([, e], [, t]) => e.node.compareDocumentPosition(t.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1, v = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: f.space[2],
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	fontFamily: f.font.sans,
+	fontSize: f.textSize.sm,
+	lineHeight: f.lineHeight.tight
+}), y = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: f.space[2],
+	color: f.color.textMuted,
+	"&:first-of-type > [data-ui=\"breadcrumbs-separator\"]": { display: "none" }
+}), b = e({ display: "inline-flex" }), x = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: f.space[1],
+	minBlockSize: "24px",
+	borderRadius: f.radius.sm,
+	color: "inherit",
+	"& svg": {
+		inlineSize: "1em",
+		blockSize: "1em",
+		flexShrink: 0
+	},
+	"&[aria-current=\"page\"]": {
+		color: f.color.text,
+		fontWeight: f.fontWeight.medium
+	}
+}), S = e({
+	textDecoration: "underline",
+	textDecorationColor: "transparent",
+	textUnderlineOffset: "0.2em",
+	transitionProperty: "color, text-decoration-color",
+	transitionDuration: f.motion.duration.fast,
+	transitionTimingFunction: f.motion.easeStandard,
+	"&:hover": {
+		color: f.color.text,
+		textDecorationColor: "currentColor"
+	},
+	"&:focus-visible": { ...t },
+	[n]: { transitionDuration: "0s" }
+});
+function C({ ref: e, label: t = "Breadcrumb", separator: n = "/", children: r, ...a }) {
+	let o = u(/* @__PURE__ */ new Map()), [s, c] = d(null), f = u(null), m = i(() => {
+		let e = Array.from(o.current).sort(_), t = e.some(([, e]) => e.current === !0) ? null : e.at(-1)?.[0] ?? null;
+		f.current !== t && (f.current = t, c(t));
+	}, []), g = i((e, t) => {
+		o.current.set(e, t), m();
+	}, [m]), y = i((e) => {
+		o.current.delete(e), m();
+	}, [m]), b = l(() => ({
+		separator: n,
+		autoCurrentId: s,
+		register: g,
+		unregister: y
+	}), [
+		n,
+		s,
+		g,
+		y
+	]);
+	return /* @__PURE__ */ p(h.Provider, {
+		value: b,
+		children: /* @__PURE__ */ p("nav", {
+			...a,
+			ref: e,
+			"aria-label": t,
+			"data-ui": "breadcrumbs",
+			children: /* @__PURE__ */ p("ol", {
+				css: v,
+				children: r
+			})
+		})
+	});
+}
+C.displayName = "Breadcrumbs";
+function w({ ref: e, href: t, current: n, children: r, ...i }) {
+	let { separator: a, autoCurrentId: l, register: d, unregister: f } = g("Item"), h = o(), _ = u(null);
+	s(e, () => _.current, []), c(() => {
+		let e = _.current;
+		e && d(h, {
+			node: e,
+			current: n
+		});
+	}), c(() => () => f(h), [h, f]);
+	let v = n ?? l === h ? "page" : void 0;
+	return /* @__PURE__ */ m("li", {
+		...i,
+		ref: _,
+		"data-ui": "breadcrumbs-item",
+		css: y,
+		children: [/* @__PURE__ */ p("span", {
+			"aria-hidden": "true",
+			"data-ui": "breadcrumbs-separator",
+			css: b,
+			children: a
+		}), t === void 0 ? /* @__PURE__ */ p("span", {
+			"aria-current": v,
+			css: x,
+			children: r
+		}) : /* @__PURE__ */ p("a", {
+			href: t,
+			"aria-current": v,
+			css: [x, S],
+			children: r
+		})]
+	});
+}
+w.displayName = "Breadcrumbs.Item";
+var T = Object.assign(C, { Item: w });
+//#endregion
+export { T as t };