themelia-ui 3.0.0 → 3.2.0

package/dist/feedback-D4qVsKlD.js

@@ -0,0 +1,430 @@
+import "#core.css";
+import { t as e } from "./cvm-DtsCA8iZ.js";
+import { c as t, o as n, s as r } from "./typography-DmeR05Er.js";
+import { t as i } from "./cx--CBrhWH0.js";
+import { c as a } from "./buttons-BX2JfL5X.js";
+import { CircleAlertIcon as o, CircleCheckIcon as s, InfoIcon as c, Loader2Icon as l, SearchIcon as u, TriangleAlertIcon as d } from "lucide-react";
+import "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import "#css/feedback.css";
+var m = {
+	root: "alert__root___fMmtV",
+	variantInverse: "alert__variantInverse___qWtkf",
+	title: "alert__title___GxGhO",
+	description: "alert__description___8yaK5",
+	action: "alert__action___hwzlx"
+}, h = e(m.root, {
+	variants: { variant: {
+		default: void 0,
+		inverse: m.variantInverse
+	} },
+	defaultVariants: { variant: "default" }
+}), g = {
+	neutral: null,
+	primary: null,
+	secondary: null,
+	destructive: /* @__PURE__ */ f(o, { "aria-hidden": !0 }),
+	warning: /* @__PURE__ */ f(d, { "aria-hidden": !0 }),
+	success: /* @__PURE__ */ f(s, { "aria-hidden": !0 }),
+	info: /* @__PURE__ */ f(c, { "aria-hidden": !0 })
+};
+function _({ className: e, tone: n = "neutral", variant: r = "default", icon: a, children: o, ...s }) {
+	let c = a === void 0 ? g[n] : a;
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "alert",
+		"data-tone": n,
+		"data-variant": r,
+		role: n === "destructive" ? "alert" : "status",
+		className: i("alert--component", h({ variant: r }), t({ size: "sm" }), e),
+		...s,
+		children: [c || null, o]
+	});
+}
+function v({ className: e, ...t }) {
+	return /* @__PURE__ */ f(r, {
+		tag: "div",
+		size: "inherit",
+		type: "inherit",
+		weight: "medium",
+		"data-slot": "alert-title",
+		className: i("alert-title--component", m.title, e),
+		...t
+	});
+}
+function y({ className: e, ...t }) {
+	return /* @__PURE__ */ f(r, {
+		tag: "div",
+		size: "sm",
+		type: "secondary",
+		"data-slot": "alert-description",
+		className: i("alert-description--component", m.description, e),
+		...t
+	});
+}
+function b({ className: e, ...t }) {
+	return /* @__PURE__ */ f("div", {
+		"data-slot": "alert-action",
+		className: i("alert-action--component", m.action, e),
+		...t
+	});
+}
+//#endregion
+//#region src/components/base/feedback/empty.strings.ts
+var x = {
+	title: "Nothing here yet",
+	description: "Once data lands, it will show up in this view.",
+	ariaLabel: "Empty state"
+}, S = {
+	root: "empty__root___dGVWo",
+	padDefault: "empty__padDefault___gPY2_",
+	padSm: "empty__padSm___j1xaw",
+	bordered: "empty__bordered___qUxGJ",
+	media: "empty__media___v646r",
+	mediaIcon: "empty__mediaIcon___7LMpP",
+	mediaIconSoft: "empty__mediaIconSoft___cL1VI",
+	mediaIllustration: "empty__mediaIllustration___INASq",
+	content: "empty__content___UzGGp",
+	actions: "empty__actions___sULu9",
+	description: "empty__description___tmyDN"
+}, C = {
+	default: S.padDefault,
+	sm: S.padSm
+}, w = {
+	none: void 0,
+	icon: S.mediaIcon,
+	"icon-soft": S.mediaIconSoft,
+	illustration: S.mediaIllustration
+};
+function T({ media: e, mediaVariant: t = "none", renderMedia: a, title: o, description: s, action: c, footer: l, padding: u = "default", border: d = !1, className: m, children: h, strings: g, "aria-label": _, ...v }) {
+	let y = {
+		...x,
+		...g
+	}, b = a ? a({ mediaVariant: t }) : e, T = o ?? y.title, E = s === !1 ? null : s ?? y.description;
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "empty",
+		role: "status",
+		"aria-label": _ ?? y.ariaLabel,
+		className: i("empty--component", S.root, C[u], d && S.bordered, m),
+		...v,
+		children: [
+			!!b && /* @__PURE__ */ f("div", {
+				"data-slot": "empty-media",
+				"data-variant": t,
+				className: i("empty--media", S.media, w[t]),
+				children: b
+			}),
+			!!(T || E) && /* @__PURE__ */ p("div", {
+				className: S.content,
+				children: [!!T && /* @__PURE__ */ f(n, {
+					level: 3,
+					size: "base",
+					"data-slot": "empty-title",
+					className: "empty--title",
+					children: T
+				}), !!E && /* @__PURE__ */ f(r, {
+					align: "center",
+					type: "secondary",
+					"data-slot": "empty-description",
+					className: i("empty--description", S.description),
+					children: E
+				})]
+			}),
+			h,
+			!!c && /* @__PURE__ */ f("div", {
+				"data-slot": "empty-actions",
+				className: i("empty--actions", S.actions),
+				children: c
+			}),
+			!!l && /* @__PURE__ */ f(r, {
+				align: "center",
+				tag: "div",
+				size: "xs",
+				type: "secondary",
+				"data-slot": "empty-footer",
+				className: "empty--footer",
+				children: l
+			})
+		]
+	});
+}
+var E = {
+	lineWide: "empty-illustrations__lineWide___QaFrX",
+	lineNarrow: "empty-illustrations__lineNarrow___M4qYk",
+	lineShort: "empty-illustrations__lineShort___cmQXA",
+	stack: "empty-illustrations__stack____EA-u",
+	stackBack: "empty-illustrations__stackBack___qYSjR",
+	stackMid: "empty-illustrations__stackMid___1E91B",
+	stackFront: "empty-illustrations__stackFront___Kp3as",
+	stackThumb: "empty-illustrations__stackThumb___xrHXy",
+	stackLines: "empty-illustrations__stackLines___P74LH",
+	stackFade: "empty-illustrations__stackFade___z3xS2",
+	docs: "empty-illustrations__docs___SJJ5j",
+	doc: "empty-illustrations__doc___BEYbp",
+	docBack: "empty-illustrations__docBack___cCs6s",
+	docFront: "empty-illustrations__docFront___gJTKl",
+	docStatus: "empty-illustrations__docStatus___Y220r",
+	docDot: "empty-illustrations__docDot___WVkma",
+	inbox: "empty-illustrations__inbox___6HlVX",
+	inboxCheck: "empty-illustrations__inboxCheck___Da4DN",
+	inboxTray: "empty-illustrations__inboxTray___2Mzt3",
+	inboxLip: "empty-illustrations__inboxLip___kneND",
+	inboxRow: "empty-illustrations__inboxRow___7gq3M",
+	inboxLines: "empty-illustrations__inboxLines___e2QMA",
+	inboxDot: "empty-illustrations__inboxDot___bCn-J",
+	glass: "empty-illustrations__glass___tiO45",
+	users: "empty-illustrations__users___eo-XD",
+	userLeft: "empty-illustrations__userLeft___AaDLI",
+	userCentre: "empty-illustrations__userCentre___PIKxD",
+	userRight: "empty-illustrations__userRight___CKDSo"
+};
+//#endregion
+//#region src/components/base/feedback/empty-illustrations.tsx
+function D({ className: e }) {
+	return /* @__PURE__ */ p("div", {
+		"aria-hidden": !0,
+		className: i("stacked-cards-illustration--component", E.stack, e),
+		children: [
+			/* @__PURE__ */ f("div", { className: E.stackBack }),
+			/* @__PURE__ */ f("div", { className: E.stackMid }),
+			/* @__PURE__ */ p("div", {
+				className: E.stackFront,
+				children: [/* @__PURE__ */ f("div", { className: E.stackThumb }), /* @__PURE__ */ p("div", {
+					className: E.stackLines,
+					children: [/* @__PURE__ */ f("div", { className: E.lineWide }), /* @__PURE__ */ f("div", { className: E.lineNarrow })]
+				})]
+			}),
+			/* @__PURE__ */ f("div", { className: E.stackFade })
+		]
+	});
+}
+function O({ className: e }) {
+	return /* @__PURE__ */ p("div", {
+		"aria-hidden": !0,
+		className: i("document-stack-illustration--component", E.docs, e),
+		children: [/* @__PURE__ */ p("div", {
+			className: i(E.doc, E.docBack),
+			children: [
+				/* @__PURE__ */ f("div", { className: E.lineWide }),
+				/* @__PURE__ */ f("div", { className: E.lineNarrow }),
+				/* @__PURE__ */ f("div", { className: E.lineNarrow })
+			]
+		}), /* @__PURE__ */ p("div", {
+			className: i(E.doc, E.docFront),
+			children: [
+				/* @__PURE__ */ f("div", { className: E.lineWide }),
+				/* @__PURE__ */ f("div", { className: E.lineNarrow }),
+				/* @__PURE__ */ f("div", { className: E.lineNarrow }),
+				/* @__PURE__ */ p("div", {
+					className: E.docStatus,
+					children: [/* @__PURE__ */ f("div", { className: E.docDot }), /* @__PURE__ */ f("div", { className: E.lineNarrow })]
+				})
+			]
+		})]
+	});
+}
+function k({ className: e }) {
+	return /* @__PURE__ */ p("div", {
+		"aria-hidden": !0,
+		className: i("inbox-clean-illustration--component", E.inbox, e),
+		children: [/* @__PURE__ */ f("div", {
+			className: E.inboxCheck,
+			children: /* @__PURE__ */ f("svg", {
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ f("path", { d: "M3 8l3 3 7-7" })
+			})
+		}), /* @__PURE__ */ p("div", {
+			className: E.inboxTray,
+			children: [/* @__PURE__ */ f("div", { className: E.inboxLip }), /* @__PURE__ */ p("div", {
+				className: E.inboxRow,
+				children: [/* @__PURE__ */ p("div", {
+					className: E.inboxLines,
+					children: [/* @__PURE__ */ f("div", { className: E.lineNarrow }), /* @__PURE__ */ f("div", { className: E.lineShort })]
+				}), /* @__PURE__ */ f("div", { className: E.inboxDot })]
+			})]
+		})]
+	});
+}
+function A({ className: e }) {
+	return /* @__PURE__ */ f("div", {
+		"aria-hidden": !0,
+		className: i("search-glass-illustration--component", E.glass, e),
+		children: /* @__PURE__ */ f(u, { "data-sized": !0 })
+	});
+}
+function j({ className: e }) {
+	return /* @__PURE__ */ p("div", {
+		"aria-hidden": !0,
+		className: i("users-circle-illustration--component", E.users, e),
+		children: [
+			/* @__PURE__ */ f("div", { className: E.userLeft }),
+			/* @__PURE__ */ f("div", { className: E.userCentre }),
+			/* @__PURE__ */ f("div", { className: E.userRight })
+		]
+	});
+}
+//#endregion
+//#region src/components/base/feedback/progress-range.ts
+var M = 100;
+function N(e, t = M) {
+	let n = Number.isFinite(t) && t > 0 ? t : M, r = Number.isFinite(e) ? Math.min(Math.max(e, 0), n) : 0;
+	return {
+		max: n,
+		value: r,
+		percent: r / n * 100
+	};
+}
+var P = {
+	root: "progress__root___UAJQP",
+	fill: "progress__fill___zwP00",
+	indeterminate: "progress__indeterminate___tACin"
+};
+//#endregion
+//#region src/components/base/feedback/progress.tsx
+function F({ value: e, max: t = 100, tone: n = "primary", label: r, className: a, ...o }) {
+	let s = e === void 0, c = N(e ?? 0, t);
+	return /* @__PURE__ */ f("div", {
+		"data-slot": "progress",
+		"data-tone": n,
+		role: "progressbar",
+		"aria-label": r,
+		"aria-valuemin": s ? void 0 : 0,
+		"aria-valuemax": s ? void 0 : c.max,
+		"aria-valuenow": s ? void 0 : c.value,
+		className: i("progress--component", P.root, a),
+		...o,
+		children: s ? /* @__PURE__ */ f("div", { className: P.indeterminate }) : /* @__PURE__ */ f("div", {
+			className: P.fill,
+			style: { width: `${c.percent}%` }
+		})
+	});
+}
+var I = {
+	root: "progress-circle__root___qXPEI",
+	inner: "progress-circle__inner___3uHyP"
+};
+//#endregion
+//#region src/components/base/feedback/progress-circle.tsx
+function L({ value: e, max: t = 100, tone: n = "primary", label: r, children: a, className: o, style: s, ...c }) {
+	let l = N(e, t);
+	return /* @__PURE__ */ f("div", {
+		"data-slot": "progress-circle",
+		"data-tone": n,
+		role: "progressbar",
+		"aria-label": r,
+		"aria-valuemin": 0,
+		"aria-valuemax": l.max,
+		"aria-valuenow": l.value,
+		className: i("progress-circle--component", I.root, o),
+		style: {
+			"--_progress-sweep": `${l.percent}%`,
+			...s
+		},
+		...c,
+		children: /* @__PURE__ */ f("span", {
+			className: I.inner,
+			children: a
+		})
+	});
+}
+var R = {
+	alertMeta: "feedback__alertMeta___fIN0s",
+	alertMetaItem: "feedback__alertMetaItem___j3sgm",
+	alertMetaLabel: "feedback__alertMetaLabel___27nw-",
+	alertMetaValue: "feedback__alertMetaValue___vWC_q",
+	state: "feedback__state___jyrdN",
+	stateIcon: "feedback__stateIcon___dPggL",
+	stateIconError: "feedback__stateIconError___1F4Tp",
+	stateSpinner: "feedback__stateSpinner___yVGSc"
+};
+//#endregion
+//#region src/components/base/feedback/alert-metadata.tsx
+function z({ items: e, className: n, ...r }) {
+	return e.length === 0 ? null : /* @__PURE__ */ f("dl", {
+		className: i("alert-metadata--component", R.alertMeta, t({ size: "xs" }), n),
+		...r,
+		children: e.map((e, n) => /* @__PURE__ */ p("div", {
+			className: R.alertMetaItem,
+			children: [/* @__PURE__ */ f("dt", {
+				className: i(R.alertMetaLabel, t({
+					size: "inherit",
+					type: "secondary"
+				})),
+				children: e.label
+			}), /* @__PURE__ */ f("dd", {
+				className: i(R.alertMetaValue, t({
+					size: "inherit",
+					numeric: !0
+				})),
+				children: e.value
+			})]
+		}, n))
+	});
+}
+//#endregion
+//#region src/components/base/feedback/states.strings.ts
+var B = { label: "Loading…" }, V = {
+	title: "Something went wrong",
+	description: "The data could not be loaded.",
+	retry: "Try again"
+};
+//#endregion
+//#region src/components/base/feedback/states.tsx
+function H({ label: e, strings: t, className: n, ...a }) {
+	let o = {
+		...B,
+		...t
+	};
+	return /* @__PURE__ */ p("div", {
+		role: "status",
+		"aria-live": "polite",
+		className: i("loading-state--component", R.state, n),
+		...a,
+		children: [/* @__PURE__ */ f(l, {
+			"aria-hidden": !0,
+			className: i(R.stateIcon, R.stateSpinner)
+		}), /* @__PURE__ */ f(r, {
+			type: "secondary",
+			size: "sm",
+			children: e ?? o.label
+		})]
+	});
+}
+function U({ title: e, description: t, onRetry: n, action: o, strings: s, className: c, ...l }) {
+	let u = {
+		...V,
+		...s
+	};
+	return /* @__PURE__ */ p("div", {
+		role: "alert",
+		className: i("error-state--component", R.state, c),
+		...l,
+		children: [
+			/* @__PURE__ */ f(d, {
+				"aria-hidden": !0,
+				className: i(R.stateIcon, R.stateIconError)
+			}),
+			/* @__PURE__ */ f(r, {
+				weight: "medium",
+				children: e ?? u.title
+			}),
+			/* @__PURE__ */ f(r, {
+				type: "secondary",
+				size: "sm",
+				children: t ?? u.description
+			}),
+			o ?? (n ? /* @__PURE__ */ f(a, {
+				tone: "neutral",
+				appearance: "outline",
+				onClick: n,
+				children: u.retry
+			}) : null)
+		]
+	});
+}
+//#endregion
+export { y as _, z as a, O as c, D as d, j as f, b as g, _ as h, B as i, k as l, x as m, H as n, L as o, T as p, V as r, F as s, U as t, A as u, v };