themelia-ui 3.0.0 → 3.2.0

package/dist/{patterns → blocks}/onboarding.js

@@ -1,13 +1,15 @@
 "use client";
-import { t as e } from "../cx--CBrhWH0.js";
-import { i as t, o as n } from "../typography-BkxEiwQ1.js";
-import { s as r } from "../feedback-DRerHGuV.js";
-import { u as i } from "../display-B3Q17h5z.js";
-import { t as a } from "../accordion-6YPJ9XRO.js";
+import "#core.css";
+import { a as e, s as t } from "../typography-DmeR05Er.js";
+import { t as n } from "../cx--CBrhWH0.js";
+import { t as r } from "../accordion-CHuzMmWL.js";
+import { s as i } from "../feedback-D4qVsKlD.js";
+import { u as a } from "../display-a7AoX_u7.js";
 import { CheckIcon as o, CircleDotIcon as s, CircleIcon as c } from "lucide-react";
 import { useEffect as l, useRef as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-//#region src/components/patterns/onboarding/onboarding.strings.ts
+import "#css/onboarding.css";
+//#region src/components/blocks/onboarding/onboarding.strings.ts
 var m = {
 	statusCompleted: "Completed",
 	statusInProgress: "In progress",
@@ -15,12 +17,11 @@ var m = {
 	progressLabel: "Setup progress",
 	formatProgress: (e, t) => `${e} of ${t} complete`
 }, h = {
-	checklist: "onboarding__checklist___ohgYQ",
-	indicator: "onboarding__indicator___sN7VW",
-	checklistRoot: "onboarding__checklistRoot___E4I9z",
-	checklistProgress: "onboarding__checklistProgress___2Fpp_",
-	checklistProgressHead: "onboarding__checklistProgressHead___vFc5w",
-	titleDone: "onboarding__titleDone___-JE_Y"
+	checklist: "onboarding__checklist___oOchS",
+	indicator: "onboarding__indicator___wkWKV",
+	checklistRoot: "onboarding__checklistRoot___5dNgh",
+	checklistProgress: "onboarding__checklistProgress___kB-Oj",
+	checklistProgressHead: "onboarding__checklistProgressHead___eZI7o"
 }, g = {
 	completed: o,
 	inProgress: s,
@@ -44,51 +45,54 @@ function y({ steps: o, defaultExpanded: s, expanded: c, onExpandedChange: y, onS
 		F.current = new Set(P);
 	}, [P, b]);
 	let I = o.map((e) => {
-		let t = g[e.status], n = {
+		let n = g[e.status], r = {
 			completed: E.statusCompleted,
 			inProgress: E.statusInProgress,
 			pending: E.statusPending
-		}[e.status], r = e.status === "completed";
+		}[e.status], i = e.status === "completed";
 		return {
 			value: e.id,
-			title: r ? /* @__PURE__ */ f("span", {
-				className: h.titleDone,
+			title: i ? /* @__PURE__ */ f(t, {
+				tag: "span",
+				size: "inherit",
+				weight: "normal",
+				type: "secondary",
 				children: e.title
 			}) : e.title,
 			badge: e.badge,
 			content: e.content,
 			disabled: e.disabled,
-			icon: /* @__PURE__ */ f(i, {
-				icon: t,
+			icon: /* @__PURE__ */ f(a, {
+				icon: n,
 				tone: _[e.status],
 				shape: "circle",
 				solid: e.status === "inProgress",
 				role: "img",
-				"aria-label": n,
+				"aria-label": r,
 				className: h.indicator
 			})
 		};
 	}), L = o.filter((e) => e.status === "completed").length;
 	return /* @__PURE__ */ p("div", {
-		className: e("checklist--component", h.checklistRoot, w),
+		className: n("checklist--component", h.checklistRoot, w),
 		children: [o.length > 0 && /* @__PURE__ */ p("div", {
 			className: h.checklistProgress,
 			children: [/* @__PURE__ */ p("span", {
 				className: h.checklistProgressHead,
-				children: [/* @__PURE__ */ f(t, { children: E.progressLabel }), /* @__PURE__ */ f(n, {
+				children: [/* @__PURE__ */ f(e, { children: E.progressLabel }), /* @__PURE__ */ f(t, {
 					tag: "span",
 					size: "xs",
 					type: "secondary",
 					numeric: !0,
 					children: E.formatProgress(L, o.length)
 				})]
-			}), /* @__PURE__ */ f(r, {
+			}), /* @__PURE__ */ f(i, {
 				value: L,
 				max: o.length,
 				tone: L === o.length ? "success" : "primary",
 				label: E.formatProgress(L, o.length)
 			})]
-		}), /* @__PURE__ */ f(a, {
+		}), /* @__PURE__ */ f(r, {
 			multiple: x,
 			surface: S,
 			value: P,

package/dist/{patterns → blocks}/timelines.js

@@ -1,3 +1,3 @@
 "use client";
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../timelines-BB7550mz.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../timelines-DXG1BfIN.js";
 export { t as ChangelogTimeline, i as MilestonesTimeline, o as Steps, n as StepsBar, e as defaultChangelogStrings, r as defaultMilestonesStrings, a as defaultStepsStrings };

package/dist/buttons-BX2JfL5X.js

@@ -0,0 +1,173 @@
+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 { n as i } from "./ui-provider-DpzLUD12.js";
+import { t as a } from "./slot-2Jf4M2nC.js";
+import { i as o, n as s, t as c } from "./tooltip-BPYP-jUm.js";
+import * as l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useFormStatus as p } from "react-dom";
+import "#css/buttons.css";
+var m = {
+	root: "button__root___sSlE7",
+	iconOnly: "button__iconOnly___Npa51",
+	fullWidth: "button__fullWidth___xO5Nj",
+	label: "button__label___xfnCf",
+	loadingLabel: "button__loadingLabel___ItbpA",
+	textButton: "button__textButton___VY8pV"
+}, h = {
+	appearanceSolid: "button-tones__appearanceSolid___nRi5u",
+	appearanceOutline: "button-tones__appearanceOutline___dwmPw",
+	appearanceGhost: "button-tones__appearanceGhost___VLjsA"
+}, g = {
+	solid: h.appearanceSolid,
+	outline: h.appearanceOutline,
+	ghost: h.appearanceGhost
+}, _ = {
+	tone: "primary",
+	appearance: "solid"
+}, v = e(m.root, { variants: {
+	iconOnly: {
+		true: m.iconOnly,
+		false: void 0
+	},
+	fullWidth: {
+		true: m.fullWidth,
+		false: void 0
+	}
+} });
+function y({ tone: e, appearance: n, iconOnly: o = !1, fullWidth: s = !1, loading: c = !1, render: u, className: f, disabled: p, children: h, onClick: y, ...b }) {
+	let x = /* @__PURE__ */ d("span", {
+		className: c ? m.loadingLabel : m.label,
+		children: h
+	}), S = u ? h == null ? u : l.cloneElement(u, void 0, x) : x, C = i("button", _), w = e ?? C.tone, T = n ?? C.appearance, E = u !== void 0, D = b["data-slot"] === "text-button", O = E ? a : "button", k = c || E && !!p;
+	return /* @__PURE__ */ d(O, {
+		"data-slot": "button",
+		"data-tone": w,
+		"data-appearance": T,
+		"data-loading": c ? "" : void 0,
+		type: E ? void 0 : "button",
+		disabled: E ? void 0 : p,
+		"aria-disabled": k || b["aria-disabled"] || void 0,
+		"aria-busy": c || void 0,
+		onClick: (e) => {
+			if (k) {
+				e.preventDefault();
+				return;
+			}
+			y?.(e);
+		},
+		className: r("button--component", v({
+			iconOnly: o,
+			fullWidth: s
+		}), g[T], t(D ? {
+			size: "inherit",
+			weight: "medium"
+		} : {
+			size: "sm",
+			weight: "medium",
+			lineHeight: "none"
+		}), f),
+		...b,
+		children: S
+	});
+}
+var b = {
+	root: "button-group__root___c8rNi",
+	groupSeparator: "button-group__groupSeparator___uLRaf",
+	vertical: "button-group__vertical___RC5l7",
+	groupText: "button-group__groupText___5FS2f",
+	groupSeparatorVertical: "button-group__groupSeparatorVertical___CyWO5"
+};
+//#endregion
+//#region src/components/base/buttons/button-group.tsx
+function x({ orientation: e = "horizontal", className: t, ...n }) {
+	return /* @__PURE__ */ d("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": e,
+		className: r("button-group--component", b.root, e === "vertical" && b.vertical, t),
+		...n
+	});
+}
+function S({ className: e, ...t }) {
+	return /* @__PURE__ */ d(n, {
+		tag: "span",
+		size: "inherit",
+		type: "secondary",
+		"data-slot": "button-group-text",
+		className: r("button-group-text--component", b.groupText, e),
+		...t
+	});
+}
+function C({ orientation: e = "horizontal", className: t, ...n }) {
+	return /* @__PURE__ */ d("div", {
+		role: "separator",
+		"aria-orientation": e === "vertical" ? "horizontal" : "vertical",
+		"data-slot": "button-group-separator",
+		className: r("button-group-separator--component", b.groupSeparator, e === "vertical" && b.groupSeparatorVertical, t),
+		...n
+	});
+}
+//#endregion
+//#region src/components/base/buttons/text-button.tsx
+var w = l.forwardRef(function({ tone: e = "primary", className: t, ...n }, i) {
+	return /* @__PURE__ */ d(y, {
+		ref: i,
+		tone: e,
+		appearance: "ghost",
+		"data-slot": "text-button",
+		className: r("text-button--component", m.textButton, t),
+		...n
+	});
+}), T = { loading: "Working…" }, E = l.forwardRef(function({ loading: e, handlesLoading: t, onClick: r, strings: i, children: a, ...o }, s) {
+	let c = {
+		...T,
+		...i
+	}, [m, h] = l.useState(!1), g = l.useRef(!0);
+	l.useEffect(() => () => {
+		g.current = !1;
+	}, []);
+	let { pending: _ } = p(), v = o.type === "submit", b = e !== void 0, x = b ? e : m || v && _;
+	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(y, {
+		ref: s,
+		loading: x,
+		"aria-busy": x ? !0 : void 0,
+		onClick: async (e) => {
+			let t = r?.(e);
+			if (!(!t || typeof t.then != "function")) {
+				b || h(!0);
+				try {
+					await t;
+				} finally {
+					!b && g.current && h(!1);
+				}
+			}
+		},
+		...o,
+		children: a
+	}), /* @__PURE__ */ d("span", {
+		"data-slot": "loader-button-status",
+		className: "sr-only",
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children: /* @__PURE__ */ d(n, {
+			tag: "span",
+			children: x ? c.loading : ""
+		})
+	})] });
+}), D = l.forwardRef(function({ tooltip: e, side: t = "top", children: n, ...r }, i) {
+	return /* @__PURE__ */ f(c, { children: [/* @__PURE__ */ d(o, { render: /* @__PURE__ */ d(y, {
+		ref: i,
+		"aria-label": r["aria-label"] ?? (typeof n == "string" || typeof n == "number" ? void 0 : e),
+		...r,
+		children: n
+	}) }), /* @__PURE__ */ d(s, {
+		side: t,
+		children: e
+	})] });
+});
+//#endregion
+export { x as a, y as c, w as i, E as n, C as o, T as r, S as s, D as t };

package/dist/cards-Ddhz43Bz.js

@@ -0,0 +1,279 @@
+import "#core.css";
+import { t as e } from "./cvm-DtsCA8iZ.js";
+import { o as t, s as n } from "./typography-DmeR05Er.js";
+import { t as r } from "./cx--CBrhWH0.js";
+import { n as i } from "./ui-provider-DpzLUD12.js";
+import { c as a } from "./buttons-BX2JfL5X.js";
+import { i as o, n as s, t as c } from "./tooltip-BPYP-jUm.js";
+import { n as l } from "./action-menu-BwiL_F6I.js";
+import { o as u } from "./structure-CynEZ-OY.js";
+import { _ as d, h as f } from "./feedback-D4qVsKlD.js";
+import { t as p } from "./skeleton-BTKNKTdj.js";
+import { ChevronDownIcon as m, ChevronUpIcon as h, InfoIcon as g } from "lucide-react";
+import * as _ from "react";
+import { isValidElement as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import "#css/cards.css";
+var S = {
+	root: "cards__root___Bbycm",
+	surfaceCard: "cards__surfaceCard___J9n4m",
+	surfaceFramed: "cards__surfaceFramed___oxziZ",
+	media: "cards__media___LvxvX",
+	footer: "cards__footer___sEgwh",
+	primaryAction: "cards__primaryAction___yY7c5",
+	surfaceFlat: "cards__surfaceFlat___k6njT",
+	surfaceBordered: "cards__surfaceBordered___8CZR0",
+	header: "cards__header___Q8mxA",
+	headerDivider: "cards__headerDivider___CQW3-",
+	titleRow: "cards__titleRow___4RWYS",
+	icon: "cards__icon___A_FPk",
+	title: "cards__title___60rJi",
+	titleInfo: "cards__titleInfo___QnNKA",
+	titleSuffix: "cards__titleSuffix___PDKRB",
+	headerControls: "cards__headerControls___-CrJR",
+	description: "cards__description___m5dQ8",
+	alert: "cards__alert___8unK8",
+	content: "cards__content___F3drw",
+	footerDivider: "cards__footerDivider___zv3P9",
+	collapsible: "cards__collapsible___cwhUq",
+	expanded: "cards__expanded___7Pcuy",
+	expandToggle: "cards__expandToggle___t1PT_",
+	actionStrip: "cards__actionStrip___KrPkt",
+	actionStripSeparated: "cards__actionStripSeparated___lM8Va",
+	actionStripEnd: "cards__actionStripEnd___xVro_",
+	actionStripBetween: "cards__actionStripBetween___hPtwH",
+	actionStripFullPrimary: "cards__actionStripFullPrimary___ztzOG"
+}, C = {
+	tooltip: "More information",
+	actions: "More actions",
+	expand: "Show more",
+	collapse: "Show less"
+};
+//#endregion
+//#region src/components/base/cards/partials/card-header.tsx
+function w({ icon: e, title: i, titleSuffix: a, tooltip: l, tooltipLabel: d = "More information", description: f, headerStart: p, headerEnd: m, headerAction: h, divider: _, titleLevel: v, titleSize: y = "base", className: C, ...w }) {
+	return /* @__PURE__ */ x(u, {
+		gap: "sm",
+		"data-slot": "card-header",
+		className: r("card--header", S.header, _ && S.headerDivider, C),
+		...w,
+		children: [
+			p,
+			/* @__PURE__ */ x("div", {
+				className: S.titleRow,
+				children: [
+					!!e && /* @__PURE__ */ b("span", {
+						className: S.icon,
+						children: e
+					}),
+					!!i && (v ? /* @__PURE__ */ b(t, {
+						level: v,
+						size: y,
+						truncate: !0,
+						className: r("card--title", S.title),
+						children: i
+					}) : /* @__PURE__ */ b(n, {
+						tag: "span",
+						size: y,
+						weight: "semibold",
+						lineHeight: "tight",
+						heading: !0,
+						truncate: !0,
+						className: r("card--title", S.title),
+						children: i
+					})),
+					!!a && /* @__PURE__ */ b("span", {
+						className: S.titleSuffix,
+						children: a
+					}),
+					!!l && /* @__PURE__ */ x(c, { children: [/* @__PURE__ */ b(o, {
+						render: /* @__PURE__ */ b("button", {
+							type: "button",
+							"data-hit-area": !0,
+							className: S.titleInfo,
+							"aria-label": d
+						}),
+						children: /* @__PURE__ */ b(g, { "aria-hidden": !0 })
+					}), /* @__PURE__ */ b(s, { children: l })] }),
+					!!(m || h) && /* @__PURE__ */ x("span", {
+						className: S.headerControls,
+						children: [m, h]
+					})
+				]
+			}),
+			!!f && /* @__PURE__ */ b(n, {
+				type: "secondary",
+				className: r("card--description", S.description),
+				children: f
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/base/cards/partials/card-regions.tsx
+function T({ className: e, ...t }) {
+	return /* @__PURE__ */ b("div", {
+		"data-slot": "card-content",
+		className: r("card--content", S.content, e),
+		...t
+	});
+}
+function E({ divider: e, text: t, className: i, children: a, ...o }) {
+	return /* @__PURE__ */ x(u, {
+		direction: "horizontal",
+		align: "center",
+		wrap: !0,
+		gap: "sm",
+		"data-slot": "card-footer",
+		className: r("card--footer", S.footer, e && S.footerDivider, i),
+		...o,
+		children: [!!t && /* @__PURE__ */ b(n, {
+			type: "secondary",
+			size: "xs",
+			children: t
+		}), a]
+	});
+}
+//#endregion
+//#region src/components/base/cards/card.tsx
+var ee = {
+	surface: "framed",
+	headerDivider: !1
+}, te = e(S.root, { variants: { surface: {
+	card: S.surfaceCard,
+	framed: S.surfaceFramed,
+	flat: S.surfaceFlat,
+	bordered: S.surfaceBordered
+} } });
+function D({ icon: e, title: t, titleSuffix: n, tooltip: o, description: s, surface: c, titleLevel: u, titleSize: p, media: g, headerStart: v, headerEnd: D, headerAction: O, actions: k, alert: A, alertTone: j = "neutral", contentTop: M, contentBottom: N, footerText: P, footerSlot: F, headerDivider: I, footerDivider: L, expandable: R = !1, expanded: z, defaultExpanded: B = !1, onExpandedChange: V, strings: ne, className: re, children: H, ...ie }) {
+	let U = {
+		...C,
+		...ne
+	}, W = i("card", ee), G = c ?? W.surface, ae = I ?? W.headerDivider, [oe, se] = _.useState(B), K = z !== void 0, q = K ? z : oe, ce = () => {
+		let e = !q;
+		K || se(e), V?.(e);
+	}, J = R !== !1 && R !== void 0, Y = typeof R == "object" ? R.collapsedMaxHeight : void 0, X = _.Children.toArray(H), Z = X.filter((e) => _.isValidElement(e) && e.type === E), Q = Z.length > 0 ? X.filter((e) => !Z.includes(e)) : H, le = Z.length > 0 ? Q.length > 0 : !!H, ue = !!(e || t || n || o || s || v || D || O || k?.length), $ = !!(le || M || N), de = !!(P || F), fe = $ && /* @__PURE__ */ x(T, {
+		className: r(J && S.collapsible, J && q && S.expanded),
+		style: Y === void 0 ? void 0 : { "--card-collapsed-height": typeof Y == "number" ? `${Y}px` : Y },
+		children: [
+			M,
+			Q,
+			N
+		]
+	});
+	return /* @__PURE__ */ x("div", {
+		"data-slot": "card",
+		"data-surface": G,
+		className: r("card--component", te({ surface: G }), re),
+		...ie,
+		children: [
+			!!g && /* @__PURE__ */ b("div", {
+				className: r("card--media", S.media),
+				children: g
+			}),
+			ue && /* @__PURE__ */ b(w, {
+				titleLevel: u,
+				titleSize: p,
+				icon: e,
+				title: t,
+				titleSuffix: n,
+				tooltip: o,
+				tooltipLabel: U.tooltip,
+				description: s,
+				headerStart: v,
+				headerEnd: D,
+				headerAction: /* @__PURE__ */ x(y, { children: [O, !!k?.length && /* @__PURE__ */ b(l, {
+					actions: k,
+					strings: { trigger: U.actions }
+				})] }),
+				divider: ae
+			}),
+			!!A && /* @__PURE__ */ b("div", {
+				className: r("card--alert", S.alert),
+				children: typeof A == "string" ? /* @__PURE__ */ b(f, {
+					tone: j,
+					children: /* @__PURE__ */ b(d, { children: A })
+				}) : A
+			}),
+			fe,
+			J && $ && /* @__PURE__ */ b("div", {
+				className: S.expandToggle,
+				children: /* @__PURE__ */ x(a, {
+					tone: "neutral",
+					appearance: "ghost",
+					onClick: ce,
+					"aria-expanded": q,
+					children: [b(q ? h : m, {}), q ? U.collapse : U.expand]
+				})
+			}),
+			de && /* @__PURE__ */ b(E, {
+				divider: L,
+				text: P,
+				children: F
+			}),
+			Z
+		]
+	});
+}
+//#endregion
+//#region src/components/base/cards/card-actions.tsx
+function O(e) {
+	return e ? v(e) ? e : typeof e == "function" || typeof e == "object" && e && "$$typeof" in e ? /* @__PURE__ */ b(e, { "aria-hidden": !0 }) : e : null;
+}
+function k({ actions: e, separator: t = !1, align: n = "start", fullWidthPrimary: i = !1, renderLink: o, className: s, ...c }) {
+	let l = e.filter((e) => e.visible !== !1);
+	return l.length === 0 ? null : /* @__PURE__ */ b("div", {
+		className: r("card-action-strip--component", S.actionStrip, t && S.actionStripSeparated, n === "end" && S.actionStripEnd, n === "between" && S.actionStripBetween, i && S.actionStripFullPrimary, s),
+		...c,
+		children: l.map((e, t) => {
+			let n = /* @__PURE__ */ x(y, { children: [O(e.icon), e.label] }), r = e.appearance === "link" ? "ghost" : e.appearance ?? (t === 0 ? "solid" : "outline");
+			if (e.href && !e.disabled) {
+				let i = e.href;
+				return /* @__PURE__ */ b(a, {
+					render: o ? o({
+						href: i,
+						children: n,
+						external: e.external
+					}) : /* @__PURE__ */ b("a", {
+						href: i,
+						target: e.target,
+						rel: e.rel,
+						children: n
+					}),
+					tone: e.tone ?? "primary",
+					appearance: r
+				}, e.id ?? t);
+			}
+			return /* @__PURE__ */ b(a, {
+				tone: e.tone ?? "primary",
+				appearance: r,
+				disabled: e.disabled,
+				onClick: e.onClick,
+				children: n
+			}, e.id ?? t);
+		})
+	});
+}
+function A({ label: e, className: t, ...n }) {
+	return /* @__PURE__ */ b("a", {
+		"aria-label": e,
+		className: r("card-primary-action--component", S.primaryAction, t),
+		...n
+	});
+}
+//#endregion
+//#region src/components/base/cards/card-skeleton.tsx
+function j({ surface: e, showHeader: t = !0, lines: n = 3, label: i, className: a, ...o }) {
+	return /* @__PURE__ */ b(D, {
+		surface: e,
+		className: r("card-skeleton--component", a),
+		...o,
+		children: /* @__PURE__ */ b(p, {
+			lines: n,
+			showTitle: t,
+			label: i
+		})
+	});
+}
+//#endregion
+export { T as a, C as c, D as i, k as n, E as o, A as r, w as s, j as t };