themelia-ui 3.0.0 → 3.2.0

package/dist/navigation-DzxzPuwg.js

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

package/dist/overlay-WQOsLd69.js

@@ -1,345 +0,0 @@
-import { t as e } from "./cvm-DtsCA8iZ.js";
-import { t } from "./cx--CBrhWH0.js";
-import { o as n } from "./typography-BkxEiwQ1.js";
-import { t as r } from "./slot-2Jf4M2nC.js";
-import { d as i } from "./ui-provider-Cmoq6i_D.js";
-import { o as a } from "./structure-D0WGQAP3.js";
-import { t as o } from "./render-with-children-Clu_g9wb.js";
-import { XIcon as s } from "lucide-react";
-import * as c from "react";
-import { createContext as l, useContext as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useRender as p } from "@base-ui/react/use-render";
-//#region src/hooks/use-native-dialog.ts
-var m = 0, h = "";
-function g() {
-	if (m === 0) {
-		let e = document.body.style.overflow;
-		h = e === "hidden" ? "" : e, document.body.style.overflow = "hidden";
-	}
-	return m += 1, () => {
-		--m, m === 0 && (document.body.style.overflow = h);
-	};
-}
-function _({ open: e, onOpenChange: t, modal: n = !0, closeOnBackdropClick: r = !0, closeOnEscape: i = !0, initialFocusRef: a }) {
-	let o = c.useRef(null), s = c.useRef(t);
-	c.useEffect(() => {
-		s.current = t;
-	}, [t]);
-	let l = n === !0, u = n !== !1, d = c.useCallback((t) => {
-		let n = o.current;
-		if (!n) return;
-		let r = t ?? e;
-		if (r && !n.open) {
-			l ? n.showModal() : n.show();
-			let e = a?.current;
-			e && e.focus();
-		} else !r && n.open && n.close();
-	}, [
-		e,
-		l,
-		a
-	]);
-	c.useEffect(() => {
-		d();
-	});
-	let f = c.useCallback(() => {
-		s.current?.(!1);
-	}, []), p = c.useCallback((e) => {
-		i || e.preventDefault();
-	}, [i]);
-	return c.useEffect(() => {
-		let e = o.current;
-		if (!e || !r || !l) 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, l]), c.useEffect(() => {
-		let t = o.current;
-		if (!t || l || !e || !i) return;
-		let n = (e) => {
-			e.key !== "Escape" || e.defaultPrevented || e.isComposing || !(e.target instanceof Node) || !t.contains(e.target) || (e.preventDefault(), s.current?.(!1));
-		};
-		return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-	}, [
-		l,
-		e,
-		i
-	]), c.useEffect(() => {
-		let t = o.current;
-		if (!t || l || !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);
-	}, [
-		l,
-		u,
-		e
-	]), c.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]), c.useEffect(() => {
-		if (!(!e || !l)) return g();
-	}, [e, l]), {
-		ref: o,
-		onClose: f,
-		onCancel: p,
-		reconcile: d
-	};
-}
-//#endregion
-//#region src/components/base/overlay/overlay-context.ts
-var v = l(null);
-function y() {
-	return u(v);
-}
-function b(e) {
-	let t = u(v);
-	if (!t) throw Error(`<${e}> must be used within <Overlay>`);
-	return t;
-}
-//#endregion
-//#region src/components/base/overlay/overlay.strings.ts
-var x = { close: "Close" }, S = {
-	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"
-}, C = c.forwardRef(function({ className: e, ...n }, r) {
-	return /* @__PURE__ */ d(a, {
-		gap: "xs",
-		ref: r,
-		"data-slot": "overlay-header",
-		className: t("overlay--header", S.header, e),
-		...n
-	});
-}), w = c.forwardRef(function({ className: e, ...n }, r) {
-	return /* @__PURE__ */ d("div", {
-		ref: r,
-		"data-slot": "overlay-body",
-		className: t("overlay--body", S.body, e),
-		...n
-	});
-}), T = c.forwardRef(function({ className: e, ...n }, r) {
-	return /* @__PURE__ */ d(a, {
-		direction: "horizontal",
-		align: "center",
-		wrap: !0,
-		gap: "md",
-		justify: "end",
-		ref: r,
-		"data-slot": "overlay-footer",
-		className: t("overlay--footer", S.footer, e),
-		...n
-	});
-}), E = c.forwardRef(function({ children: e, className: r, id: i, ...a }, o) {
-	let s = y(), l = c.useId(), u = i ?? l, f = s?.setTitleId;
-	c.useEffect(() => {
-		if (f) return f(u), () => f(void 0);
-	}, [f, u]);
-	let p = typeof e == "string" || typeof e == "number";
-	return /* @__PURE__ */ d("h2", {
-		ref: o,
-		id: u,
-		"data-slot": "overlay-title",
-		className: t("overlay--title", S.title, r),
-		...a,
-		children: p ? /* @__PURE__ */ d(n, {
-			tag: "span",
-			size: "inherit",
-			weight: "semibold",
-			children: e
-		}) : e
-	});
-}), D = c.forwardRef(function({ children: e, className: r, id: i, ...a }, o) {
-	let s = y(), l = c.useId(), u = i ?? l, f = s?.setDescriptionId;
-	c.useEffect(() => {
-		if (f) return f(u), () => f(void 0);
-	}, [f, u]);
-	let p = typeof e == "string" || typeof e == "number";
-	return /* @__PURE__ */ d("p", {
-		ref: o,
-		id: u,
-		"data-slot": "overlay-description",
-		className: t("overlay--description", S.description, r),
-		...a,
-		children: p ? /* @__PURE__ */ d(n, {
-			tag: "span",
-			size: "inherit",
-			type: "secondary",
-			children: e
-		}) : e
-	});
-}), O = {
-	sm: "var(--overlay-edge-sm)",
-	md: "var(--overlay-edge-md)",
-	lg: "var(--overlay-edge-lg)",
-	full: "var(--overlay-edge-full)"
-}, k = {
-	sm: "20rem",
-	md: "24rem",
-	lg: "32rem",
-	full: "100%"
-}, A = "calc(100% - var(--overlay-edge-inset) * 2)";
-function j(e) {
-	if (e === "full") return A;
-	let t = /^(\d+(?:\.\d+)?)%$/.exec(e.trim());
-	return t ? `calc(${A} * ${Number(t[1]) / 100})` : e;
-}
-function M(e, t, n) {
-	let r = {};
-	return e && (r["--overlay-edge-size"] = O[e] ?? e, r["--overlay-edge-cap"] = k[e] ?? e), t && (r["--overlay-edge-length"] = j(t)), n && (r["--overlay-edge-inset"] = n === !0 ? "var(--overlay-edge-inset-default)" : n), r;
-}
-function N({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
-	let [i, a] = c.useState(t), o = e !== void 0, s = o ? e : i, l = c.useRef(null), u = c.useCallback((e) => {
-		o || a(e), n?.(e), l.current?.(e);
-	}, [o, n]), [f, p] = c.useState(), [m, h] = c.useState(), g = c.useMemo(() => ({
-		open: s,
-		setOpen: u,
-		reconcileRef: l,
-		titleId: f,
-		descriptionId: m,
-		setTitleId: p,
-		setDescriptionId: h
-	}), [
-		s,
-		u,
-		f,
-		m
-	]);
-	return /* @__PURE__ */ d(v.Provider, {
-		value: g,
-		children: /* @__PURE__ */ d("div", {
-			"data-slot": "overlay",
-			style: { display: "contents" },
-			children: r
-		})
-	});
-}
-function P({ render: e, onClick: n, className: r, children: i, ...a }) {
-	let { open: s, setOpen: c } = b("OverlayTrigger"), { ref: l, ...u } = a;
-	return p({
-		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: t("overlay--trigger", r),
-			children: i,
-			onClick: (e) => {
-				n?.(e), !e.defaultPrevented && (e.currentTarget.focus({ preventScroll: !0 }), c(!0));
-			},
-			...u
-		}
-	});
-}
-function F({ render: e, onClick: n, className: i, children: a, ...s }) {
-	let { setOpen: c } = b("OverlayClose"), l = e !== void 0;
-	return /* @__PURE__ */ d(l ? r : "button", {
-		"data-slot": "overlay-close",
-		type: l ? void 0 : "button",
-		className: t("overlay--close", i),
-		onClick: (e) => {
-			n?.(e), e.defaultPrevented || c(!1);
-		},
-		...s,
-		children: e ? o(e, a) : a
-	});
-}
-var I = e(S.root, {
-	variants: {
-		placement: {
-			center: S.placementCenter,
-			"inline-start": S.placementInlineStart,
-			"inline-end": S.placementInlineEnd,
-			"block-start": S.placementBlockStart,
-			"block-end": S.placementBlockEnd
-		},
-		surface: {
-			framed: void 0,
-			bare: S.bare
-		}
-	},
-	defaultVariants: {
-		placement: "center",
-		surface: "framed"
-	}
-});
-function L({ placement: e = "center", size: n, length: r, inset: a, modality: o = "modal", surface: l = "framed", dismissal: u, initialFocusRef: p, showCloseButton: m = !0, strings: h, className: g, style: v, children: y, ...C }) {
-	let w = {
-		...x,
-		...h
-	}, { open: T, setOpen: E, reconcileRef: D, titleId: O, descriptionId: k } = b("OverlayContent"), { ref: A, onClose: j, onCancel: N, reconcile: P } = _({
-		open: T,
-		onOpenChange: E,
-		modal: o === "modal" || o === "trap-focus" && "trap-focus",
-		closeOnBackdropClick: u?.backdrop ?? !0,
-		closeOnEscape: u?.escape ?? !0,
-		initialFocusRef: p
-	});
-	return c.useEffect(() => (D.current = P, () => {
-		D.current = null;
-	}), [P, D]), /* @__PURE__ */ f("dialog", {
-		ref: A,
-		"data-slot": "overlay-content",
-		"data-placement": e,
-		"data-modality": o,
-		"data-inset": a ? "" : void 0,
-		"aria-labelledby": C["aria-label"] ? void 0 : O,
-		"aria-describedby": k,
-		style: {
-			...M(n, r, a),
-			...v
-		},
-		className: t("overlay--component", I({
-			placement: e,
-			surface: l
-		}), g),
-		onClose: j,
-		onCancel: N,
-		...C,
-		children: [/* @__PURE__ */ d(i, { children: y }), !!m && /* @__PURE__ */ d(F, {
-			render: /* @__PURE__ */ d("button", {
-				type: "button",
-				className: S.close,
-				"aria-label": w.close
-			}),
-			children: /* @__PURE__ */ d(s, {})
-		})]
-	});
-}
-function R({ children: e, ...t }) {
-	let { setOpen: n } = b("OverlayDismissArea");
-	return /* @__PURE__ */ d("div", {
-		style: { display: "contents" },
-		onClick: (e) => {
-			e.target.closest("button") && !e.defaultPrevented && n(!1);
-		},
-		...t,
-		children: e
-	});
-}
-//#endregion
-export { P as a, T as c, x as d, R as i, w as l, F as n, D as o, L as r, E as s, N as t, C as u };

package/dist/patterns/analytics.css

@@ -1,15 +0,0 @@
-@import "../core.css";
-@import "../css/analytics.css";
-@import "../css/typography.css";
-@import "../css/feedback.css";
-@import "../css/buttons.css";
-@import "../css/tooltip.css";
-@import "../css/display.css";
-@import "../css/structure.css";
-@import "../css/primitives.css";
-@import "../css/badge.css";
-@import "../css/cards.css";
-@import "../css/action-menu.css";
-@import "../css/dropdown-menu.css";
-@import "../css/skeleton.css";
-@import "../css/chart.css";

package/dist/patterns/onboarding.css

@@ -1,11 +0,0 @@
-@import "../core.css";
-@import "../css/onboarding.css";
-@import "../css/typography.css";
-@import "../css/feedback.css";
-@import "../css/buttons.css";
-@import "../css/tooltip.css";
-@import "../css/display.css";
-@import "../css/structure.css";
-@import "../css/primitives.css";
-@import "../css/badge.css";
-@import "../css/accordion.css";

package/dist/patterns/timelines.css

@@ -1,11 +0,0 @@
-@import "../core.css";
-@import "../css/timelines.css";
-@import "../css/typography.css";
-@import "../css/feedback.css";
-@import "../css/buttons.css";
-@import "../css/tooltip.css";
-@import "../css/primitives.css";
-@import "../css/badge.css";
-@import "../css/timeline.css";
-@import "../css/display.css";
-@import "../css/structure.css";