themelia-ui 3.0.0 → 3.2.0

package/dist/navigation-DiYACqpE.js

@@ -0,0 +1,216 @@
+import "#core.css";
+import { a as e, c as t, s as n } from "./typography-DmeR05Er.js";
+import { t as r } from "./cx--CBrhWH0.js";
+import { t as i } from "./strings-Co9_qArR.js";
+import { T as a } from "./primitives-BskKlf35.js";
+import { t as o } from "./badge-VlJVZjdm.js";
+import { n as s } from "./observers-CKohiJqU.js";
+import { c, i as l, n as u, o as d, r as f, t as p, u as m } from "./item-M2pmpWXh.js";
+import { n as h, r as g } from "./navigation-B4eUU9E8.js";
+import { t as _ } from "./timeline-BR_jNgvz.js";
+import { ChevronDownIcon as v, ChevronRightIcon as y } from "lucide-react";
+import * as b from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import "#css/navigation2.css";
+var w = {
+	sideNav: "navigation__sideNav___7Qdq3",
+	group: "navigation__group___JA2AL",
+	groupLabel: "navigation__groupLabel___HK5ir",
+	groupLabelStatic: "navigation__groupLabelStatic___AzoAh",
+	groupChevron: "navigation__groupChevron___rViKW",
+	list: "navigation__list___vrt8O",
+	item: "navigation__item___-8yPf",
+	itemIcon: "navigation__itemIcon___Cfwcd",
+	itemLabel: "navigation__itemLabel___gr0xG",
+	sectionNav: "navigation__sectionNav___roPOp",
+	sectionItem: "navigation__sectionItem___d9CTa",
+	sectionItemNested: "navigation__sectionItemNested___se_7O",
+	categoryNav: "navigation__categoryNav___QFLi8",
+	categoryRow: "navigation__categoryRow___Ia7R-",
+	categoryChevron: "navigation__categoryChevron___lcrYi",
+	progress: "navigation__progress___e-Uqw",
+	progressHead: "navigation__progressHead___6HTAe"
+}, T = {
+	step: (e, t, n) => n === "completed" ? `Step ${e}: ${t}, completed` : `Step ${e}: ${t}`,
+	position: (e, t) => `Step ${e} of ${t}`
+}, E = { label: "On this page" }, D = { label: "Section navigation" }, O = (e) => typeof e == "string" || typeof e == "number";
+function k(e, t) {
+	if (t) return h(t, e.map((e) => e.href));
+}
+function A({ items: e, groups: i, currentPath: a, renderLink: s, strings: c, className: l, ...u }) {
+	let d = {
+		...D,
+		...c
+	}, f = g(s), p = i ?? [{
+		id: "default",
+		items: e ?? []
+	}], m = k(p.flatMap((e) => e.items), a), [h, _] = b.useState(() => new Set(p.filter((e) => e.defaultCollapsed).map((e) => e.id))), y = (e) => _((t) => {
+		let n = new Set(t);
+		return n.has(e) ? n.delete(e) : n.add(e), n;
+	});
+	return /* @__PURE__ */ S("nav", {
+		"aria-label": d.label,
+		"data-slot": "side-nav",
+		className: r("side-nav--component", w.sideNav, l),
+		...u,
+		children: p.map((e) => {
+			let i = h.has(e.id);
+			return /* @__PURE__ */ C("div", {
+				className: w.group,
+				"data-collapsed": e.collapsible && i ? "" : void 0,
+				children: [!!e.label && (e.collapsible ? /* @__PURE__ */ C("button", {
+					type: "button",
+					className: r(w.groupLabel, t({
+						size: "xs",
+						weight: "medium"
+					})),
+					"data-hit-area": !0,
+					"aria-expanded": !i,
+					onClick: () => y(e.id),
+					children: [e.label, /* @__PURE__ */ S(v, {
+						"aria-hidden": !0,
+						className: w.groupChevron
+					})]
+				}) : /* @__PURE__ */ S(n, {
+					tag: "span",
+					size: "xs",
+					weight: "medium",
+					type: "secondary",
+					className: w.groupLabelStatic,
+					children: e.label
+				})), /* @__PURE__ */ S("ul", {
+					className: w.list,
+					children: e.items.map((e) => {
+						let n = e.href === m, i = /* @__PURE__ */ C(x, { children: [
+							!!e.icon && /* @__PURE__ */ S(e.icon, {
+								"aria-hidden": !0,
+								className: w.itemIcon
+							}),
+							/* @__PURE__ */ S("span", {
+								className: w.itemLabel,
+								children: e.label
+							}),
+							O(e.badge) ? /* @__PURE__ */ S(o, {
+								tone: "neutral",
+								children: e.badge
+							}) : e.badge
+						] }), a = {
+							href: e.href,
+							className: r(w.item, t({
+								size: "sm",
+								weight: n ? "medium" : "normal"
+							})),
+							children: i,
+							"aria-current": n ? "page" : void 0,
+							"aria-disabled": e.disabled || void 0,
+							disabled: e.disabled
+						};
+						return /* @__PURE__ */ S("li", { children: f(a) }, e.href);
+					})
+				})]
+			}, e.id);
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/navigation/section-nav.tsx
+function j({ items: e, rootMargin: n = "-10% 0px -70% 0px", onSelect: i, strings: a, className: o, ...c }) {
+	let l = {
+		...E,
+		...a
+	}, [u, d] = b.useState(e[0]?.id), f = e.map((e) => e.id).join("|");
+	return b.useEffect(() => {
+		if (typeof IntersectionObserver > "u") return;
+		let e = f.split("|").filter(Boolean).map((e) => document.getElementById(e)).filter((e) => e !== null);
+		if (e.length !== 0) return s(e, (e) => {
+			let t = e.filter((e) => e.isIntersecting).sort((e, t) => e.boundingClientRect.top - t.boundingClientRect.top);
+			t[0] && d(t[0].target.id);
+		}, { rootMargin: n });
+	}, [f, n]), /* @__PURE__ */ S("nav", {
+		"aria-label": l.label,
+		"data-slot": "section-nav",
+		className: r("section-nav--component", w.sectionNav, o),
+		...c,
+		children: e.map((e) => {
+			let n = e.id === u;
+			return /* @__PURE__ */ S("a", {
+				href: `#${e.id}`,
+				"aria-current": n ? "true" : void 0,
+				className: r(w.sectionItem, (e.depth ?? 1) > 1 && w.sectionItemNested, t({
+					size: "sm",
+					weight: n ? "medium" : "normal"
+				})),
+				onClick: () => i?.(e.id),
+				children: e.label
+			}, e.id);
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/navigation/category-nav.tsx
+function M({ label: e, items: t, activeId: n, onSelect: i, className: a, ...s }) {
+	return /* @__PURE__ */ S("nav", {
+		"data-slot": "category-nav",
+		"aria-label": e,
+		className: r("category-nav--component", w.categoryNav, a),
+		...s,
+		children: /* @__PURE__ */ S(d, { children: t.map((e) => {
+			let t = e.icon, r = e.id === n;
+			return /* @__PURE__ */ C(p, {
+				render: /* @__PURE__ */ S("button", { type: "button" }),
+				"aria-current": r || void 0,
+				"data-active": r || void 0,
+				onClick: () => i?.(e.id),
+				className: w.categoryRow,
+				children: [
+					!!t && /* @__PURE__ */ S(c, {
+						variant: "icon",
+						children: /* @__PURE__ */ S(t, {})
+					}),
+					/* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S(m, { children: e.label }), !!e.hint && /* @__PURE__ */ S(l, { children: e.hint })] }),
+					/* @__PURE__ */ C(u, { children: [typeof e.count == "number" && /* @__PURE__ */ S(o, {
+						tone: r ? "primary" : "neutral",
+						children: e.count
+					}), /* @__PURE__ */ S(y, {
+						"aria-hidden": !0,
+						className: w.categoryChevron
+					})] })
+				]
+			}, e.id);
+		}) })
+	});
+}
+//#endregion
+//#region src/components/layout/navigation/breadcrumb-progress.tsx
+function N({ steps: t, currentIndex: n, onStepClick: o, strings: s, className: c, ...l }) {
+	let u = i(T, s), d = t.length || 1, f = t.map((e, t) => {
+		let r = t < n ? "completed" : t === n ? "current" : "upcoming";
+		return {
+			id: e.id,
+			label: e.label,
+			hint: e.hint,
+			status: r,
+			accessibleName: u.step(t + 1, typeof e.label == "string" ? e.label : String(e.id), r)
+		};
+	});
+	return /* @__PURE__ */ C("div", {
+		"data-slot": "breadcrumb-progress",
+		className: r("breadcrumb-progress--component", w.progress, c),
+		...l,
+		children: [/* @__PURE__ */ C("div", {
+			className: w.progressHead,
+			children: [/* @__PURE__ */ S(e, { children: u.position(n + 1, d) }), /* @__PURE__ */ S(a, {
+				value: Math.round((n + 1) / d * 100),
+				scaled: !0,
+				size: "xs",
+				weight: "semibold"
+			})]
+		}), /* @__PURE__ */ S(_, {
+			variant: "trail",
+			steps: f,
+			onStepClick: o
+		})]
+	});
+}
+//#endregion
+export { T as a, A as i, M as n, E as o, j as r, D as s, N as t };

package/dist/overlay-BuQOl8aP.js

@@ -0,0 +1,356 @@
+import "#core.css";
+import { t as e } from "./cvm-DtsCA8iZ.js";
+import { c as t, s as n } from "./typography-DmeR05Er.js";
+import { t as r } from "./cx--CBrhWH0.js";
+import { d as i } from "./ui-provider-DpzLUD12.js";
+import { t as a } from "./slot-2Jf4M2nC.js";
+import { t as o } from "./render-with-children-Clu_g9wb.js";
+import { o as s } from "./structure-CynEZ-OY.js";
+import { XIcon as c } from "lucide-react";
+import * as l from "react";
+import { createContext as u, useContext as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useRender as m } from "@base-ui/react/use-render";
+import "#css/overlay.css";
+//#region src/hooks/use-native-dialog.ts
+var h = 0, g = "";
+function _() {
+	if (h === 0) {
+		let e = document.body.style.overflow;
+		g = e === "hidden" ? "" : e, document.body.style.overflow = "hidden";
+	}
+	return h += 1, () => {
+		--h, h === 0 && (document.body.style.overflow = g);
+	};
+}
+function v({ open: e, onOpenChange: t, modal: n = !0, closeOnBackdropClick: r = !0, closeOnEscape: i = !0, initialFocusRef: a }) {
+	let o = l.useRef(null), s = l.useRef(t);
+	l.useEffect(() => {
+		s.current = t;
+	}, [t]);
+	let c = n === !0, u = n !== !1, d = l.useCallback((t) => {
+		let n = o.current;
+		if (!n) return;
+		let r = t ?? e;
+		if (r && !n.open) {
+			c ? n.showModal() : n.show();
+			let e = a?.current;
+			e && e.focus();
+		} else !r && n.open && n.close();
+	}, [
+		e,
+		c,
+		a
+	]);
+	l.useEffect(() => {
+		d();
+	});
+	let f = l.useCallback((e) => {
+		e.target === e.currentTarget && s.current?.(!1);
+	}, []), p = l.useCallback((e) => {
+		e.target === e.currentTarget && (i || e.preventDefault());
+	}, [i]);
+	return l.useEffect(() => {
+		let e = o.current;
+		if (!e || !r || !c) return;
+		let t = (t) => {
+			if (t.target !== e) return;
+			let n = e.getBoundingClientRect();
+			t.clientX >= n.left && t.clientX <= n.right && t.clientY >= n.top && t.clientY <= n.bottom || s.current?.(!1);
+		};
+		return e.addEventListener("click", t), () => e.removeEventListener("click", t);
+	}, [r, c]), l.useEffect(() => {
+		let t = o.current;
+		if (!t || c || !e || !i) return;
+		let n = (e) => {
+			e.key !== "Escape" || e.defaultPrevented || e.isComposing || !(e.target instanceof Element) || e.target.closest("dialog[open]") !== t || (e.preventDefault(), s.current?.(!1));
+		};
+		return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+	}, [
+		c,
+		e,
+		i
+	]), l.useEffect(() => {
+		let t = o.current;
+		if (!t || c || !u || !e) return;
+		let n = (e) => {
+			if (e.key !== "Tab") return;
+			let n = t.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"), r = n[0], i = n[n.length - 1];
+			!r || !i || (e.shiftKey && document.activeElement === r ? (e.preventDefault(), i.focus()) : !e.shiftKey && document.activeElement === i && (e.preventDefault(), r.focus()));
+		};
+		return t.addEventListener("keydown", n), () => t.removeEventListener("keydown", n);
+	}, [
+		c,
+		u,
+		e
+	]), l.useEffect(() => {
+		if (!e || !a) return;
+		let t = requestAnimationFrame(() => {
+			let e = o.current, t = a.current;
+			!e || !t || e.contains(document.activeElement) || t.focus();
+		});
+		return () => cancelAnimationFrame(t);
+	}, [e, a]), l.useEffect(() => {
+		if (!(!e || !c)) return _();
+	}, [e, c]), {
+		ref: o,
+		onClose: f,
+		onCancel: p,
+		reconcile: d
+	};
+}
+//#endregion
+//#region src/components/base/overlay/overlay-context.ts
+var y = u(null);
+function b() {
+	return d(y);
+}
+function x(e) {
+	let t = d(y);
+	if (!t) throw Error(`<${e}> must be used within <Overlay>`);
+	return t;
+}
+//#endregion
+//#region src/components/base/overlay/overlay.strings.ts
+var S = { close: "Close" }, C = {
+	root: "overlay__root___Pl83q",
+	placementCenter: "overlay__placementCenter___3-qbr",
+	placementInlineStart: "overlay__placementInlineStart___huO7E",
+	placementInlineEnd: "overlay__placementInlineEnd___4i7UK",
+	placementBlockStart: "overlay__placementBlockStart___o9KBU",
+	placementBlockEnd: "overlay__placementBlockEnd___4OVis",
+	close: "overlay__close___7xoV5",
+	header: "overlay__header___VvzcY",
+	body: "overlay__body___eHNnO",
+	footer: "overlay__footer___d58kO",
+	title: "overlay__title___JiPe2",
+	description: "overlay__description___sZ5di",
+	bare: "overlay__bare___-pW44"
+}, w = l.forwardRef(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ f(s, {
+		gap: "sm",
+		ref: n,
+		"data-slot": "overlay-header",
+		className: r("overlay--header", C.header, e),
+		...t
+	});
+}), T = l.forwardRef(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ f("div", {
+		ref: n,
+		"data-slot": "overlay-body",
+		className: r("overlay--body", C.body, e),
+		...t
+	});
+}), E = l.forwardRef(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ f(s, {
+		direction: "horizontal",
+		align: "center",
+		wrap: !0,
+		gap: "sm",
+		justify: "end",
+		ref: n,
+		"data-slot": "overlay-footer",
+		className: r("overlay--footer", C.footer, e),
+		...t
+	});
+}), D = l.forwardRef(function({ children: e, className: i, id: a, ...o }, s) {
+	let c = b(), u = l.useId(), d = a ?? u, p = c?.setTitleId;
+	l.useEffect(() => {
+		if (p) return p(d), () => p(void 0);
+	}, [p, d]);
+	let m = typeof e == "string" || typeof e == "number";
+	return /* @__PURE__ */ f("h2", {
+		ref: s,
+		id: d,
+		"data-slot": "overlay-title",
+		className: r("overlay--title", C.title, t({
+			size: "base",
+			weight: "semibold",
+			lineHeight: "tight"
+		}), i),
+		...o,
+		children: m ? /* @__PURE__ */ f(n, {
+			tag: "span",
+			size: "inherit",
+			weight: "semibold",
+			heading: !0,
+			children: e
+		}) : e
+	});
+}), O = l.forwardRef(function({ children: e, className: i, id: a, ...o }, s) {
+	let c = b(), u = l.useId(), d = a ?? u, p = c?.setDescriptionId;
+	l.useEffect(() => {
+		if (p) return p(d), () => p(void 0);
+	}, [p, d]);
+	let m = typeof e == "string" || typeof e == "number";
+	return /* @__PURE__ */ f("p", {
+		ref: s,
+		id: d,
+		"data-slot": "overlay-description",
+		className: r("overlay--description", C.description, t({
+			lineHeight: "tight",
+			type: "secondary"
+		}), i),
+		...o,
+		children: m ? /* @__PURE__ */ f(n, {
+			tag: "span",
+			size: "inherit",
+			type: "secondary",
+			children: e
+		}) : e
+	});
+}), k = {
+	default: "75%",
+	sm: "55%",
+	full: "100%"
+}, A = {
+	default: "24rem",
+	sm: "20rem",
+	full: "100%"
+}, j = "calc(100% - var(--_edge-inset) * 2)";
+function M(e) {
+	if (e === "full") return j;
+	let t = /^(\d+(?:\.\d+)?)%$/.exec(e.trim());
+	return t ? `calc(${j} * ${Number(t[1]) / 100})` : e;
+}
+function N(e, t, n) {
+	let r = {};
+	return e && (r["--_edge-size"] = k[e] ?? e, r["--_edge-cap"] = A[e] ?? e), t && (r["--_edge-length"] = M(t)), n && (r["--_edge-inset"] = n === !0 ? "var(--gap)" : n), r;
+}
+function P({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
+	let [i, a] = l.useState(t), o = e !== void 0, s = o ? e : i, c = l.useRef(null), u = l.useCallback((e) => {
+		o || a(e), n?.(e), c.current?.(e);
+	}, [o, n]), [d, p] = l.useState(), [m, h] = l.useState(), g = l.useMemo(() => ({
+		open: s,
+		setOpen: u,
+		reconcileRef: c,
+		titleId: d,
+		descriptionId: m,
+		setTitleId: p,
+		setDescriptionId: h
+	}), [
+		s,
+		u,
+		d,
+		m
+	]);
+	return /* @__PURE__ */ f(y.Provider, {
+		value: g,
+		children: /* @__PURE__ */ f("div", {
+			"data-slot": "overlay",
+			style: { display: "contents" },
+			children: r
+		})
+	});
+}
+function F({ render: e, onClick: t, className: n, children: i, ...a }) {
+	let { open: s, setOpen: c } = x("OverlayTrigger"), { ref: l, ...u } = a;
+	return m({
+		defaultTagName: "button",
+		render: e ? o(e, i) : void 0,
+		ref: l,
+		props: {
+			"data-slot": "overlay-trigger",
+			type: e ? void 0 : "button",
+			"aria-haspopup": "dialog",
+			"aria-expanded": s,
+			className: r("overlay--trigger", n),
+			children: i,
+			onClick: (e) => {
+				t?.(e), !e.defaultPrevented && (e.currentTarget.focus({ preventScroll: !0 }), c(!0));
+			},
+			...u
+		}
+	});
+}
+function I({ render: e, onClick: t, className: n, children: i, ...s }) {
+	let { setOpen: c } = x("OverlayClose"), l = e !== void 0;
+	return /* @__PURE__ */ f(l ? a : "button", {
+		"data-slot": "overlay-close",
+		type: l ? void 0 : "button",
+		className: r("overlay--close", n),
+		onClick: (e) => {
+			t?.(e), e.defaultPrevented || c(!1);
+		},
+		...s,
+		children: e ? o(e, i) : i
+	});
+}
+var L = e(C.root, {
+	variants: {
+		placement: {
+			center: C.placementCenter,
+			"inline-start": C.placementInlineStart,
+			"inline-end": C.placementInlineEnd,
+			"block-start": C.placementBlockStart,
+			"block-end": C.placementBlockEnd
+		},
+		surface: {
+			framed: void 0,
+			bare: C.bare
+		}
+	},
+	defaultVariants: {
+		placement: "center",
+		surface: "framed"
+	}
+});
+function R({ placement: e = "center", size: n, length: a, inset: o, modality: s = "modal", surface: u = "framed", dismissal: d, initialFocusRef: m, showCloseButton: h = !0, strings: g, className: _, style: y, children: b, ...w }) {
+	let T = {
+		...S,
+		...g
+	}, { open: E, setOpen: D, reconcileRef: O, titleId: k, descriptionId: A } = x("OverlayContent"), { ref: j, onClose: M, onCancel: P, reconcile: F } = v({
+		open: E,
+		onOpenChange: D,
+		modal: s === "modal" || s === "trap-focus" && "trap-focus",
+		closeOnBackdropClick: d?.backdrop ?? !0,
+		closeOnEscape: d?.escape ?? !0,
+		initialFocusRef: m
+	});
+	return l.useEffect(() => (O.current = F, () => {
+		O.current = null;
+	}), [F, O]), /* @__PURE__ */ p("dialog", {
+		ref: j,
+		"data-slot": "overlay-content",
+		"data-placement": e,
+		"data-modality": s,
+		"data-inset": o ? "" : void 0,
+		"aria-labelledby": w["aria-label"] ? void 0 : k,
+		"aria-describedby": A,
+		style: {
+			...N(n, a, o),
+			...y
+		},
+		className: r("overlay--component", L({
+			placement: e,
+			surface: u
+		}), _),
+		onClose: M,
+		onCancel: P,
+		...w,
+		children: [/* @__PURE__ */ f(i, { children: b }), !!h && /* @__PURE__ */ f(I, {
+			render: /* @__PURE__ */ f("button", {
+				type: "button",
+				className: r(C.close, t({
+					size: "base",
+					lineHeight: "tight"
+				})),
+				"aria-label": T.close
+			}),
+			children: /* @__PURE__ */ f(c, {})
+		})]
+	});
+}
+function z({ children: e, ...t }) {
+	let { setOpen: n } = x("OverlayDismissArea");
+	return /* @__PURE__ */ f("div", {
+		style: { display: "contents" },
+		onClick: (e) => {
+			e.target.closest("button") && !e.defaultPrevented && n(!1);
+		},
+		...t,
+		children: e
+	});
+}
+//#endregion
+export { F as a, E as c, S as d, z as i, T as l, I as n, O as o, R as r, D as s, P as t, w as u };