themelia-ui 3.0.0 → 3.2.0

package/dist/{mentions-BbsEHlcH.js → mentions-BOxbigwp.js}

@@ -1,30 +1,32 @@
-import { t as e } from "./cx--CBrhWH0.js";
-import { n as t, o as n, t as r } from "./typography-BkxEiwQ1.js";
-import { t as i } from "./item-B3yQ26as.js";
-import { t as a } from "./use-debounced-callback-BcKYwxqp.js";
-import { a as o, c as s, r as c } from "./avatar-CS7zow2q.js";
-import { r as l } from "./popover-DriLnIFc.js";
-import { a as u, o as d, s as f, t as p } from "./command-Bp3B6pUu.js";
-import { t as m } from "./spinner-CUAVFecI.js";
+import "#core.css";
+import { n as e, r as t, s as n } from "./typography-DmeR05Er.js";
+import { t as r } from "./cx--CBrhWH0.js";
+import { a as i, c as a, r as o } from "./avatar-Dc_BNYfB.js";
+import { a as s, o as c, s as l, t as u } from "./command-JjApYFds.js";
+import { r as d } from "./popover-CA7SP_iz.js";
+import { t as f } from "./item-M2pmpWXh.js";
+import { t as p } from "./use-debounced-callback-BcKYwxqp.js";
+import { t as m } from "./spinner-Tc1QCnxM.js";
 import { Fragment as h, createElement as g, useCallback as _, useEffect as v, useId as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
 import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 import { fromHtml as D } from "hast-util-from-html";
+import "#css/mentions.css";
 //#region src/components/features/mentions/mention-chip.tsx
-function O({ mention: t, resource: n, asLink: r = !0, onClick: i, trailing: a, className: o, ...s }) {
-	if (n?.renderChip) return /* @__PURE__ */ T(w, { children: n.renderChip(t) });
-	let c = n?.icon, l = n?.tone, u = /* @__PURE__ */ E(w, { children: [
+function O({ mention: e, resource: t, asLink: n = !0, onClick: i, trailing: a, className: o, ...s }) {
+	if (t?.renderChip) return /* @__PURE__ */ T(w, { children: t.renderChip(e) });
+	let c = t?.icon, l = t?.tone, u = /* @__PURE__ */ E(w, { children: [
 		!!c && /* @__PURE__ */ T(c, {}),
-		t.label,
+		e.label,
 		a
 	] }), d = {
-		"data-ref-id": t.id,
-		"data-ref-kind": t.kind,
+		"data-ref-id": e.id,
+		"data-ref-kind": e.kind,
 		"data-ref-tone": l,
-		className: e("mention-chip--component", o)
+		className: r("mention-chip--component", o)
 	};
-	return r && t.href ? /* @__PURE__ */ T("a", {
+	return n && e.href ? /* @__PURE__ */ T("a", {
 		...d,
-		href: t.href,
+		href: e.href,
 		target: "_blank",
 		rel: "noreferrer noopener",
 		onClick: i,
@@ -38,12 +40,12 @@ function O({ mention: t, resource: n, asLink: r = !0, onClick: i, trailing: a, c
 }
 //#endregion
 //#region src/components/features/mentions/mention-content.tsx
-function k({ html: e, mentions: n, resources: i, renderMention: a, sanitizer: o, ...s }) {
-	let c = x(() => o ? o(e ?? "") : t(e ?? ""), [e, o]), l = x(() => {
+function k({ html: n, mentions: r, resources: i, renderMention: a, sanitizer: o, ...s }) {
+	let c = x(() => o ? o(n ?? "") : t(n ?? ""), [n, o]), l = x(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of n ?? []) e.set(t.id, t);
+		for (let t of r ?? []) e.set(t.id, t);
 		return e;
-	}, [n]), u = x(() => D(c, { fragment: !0 }), [c]);
+	}, [r]), u = x(() => D(c, { fragment: !0 }), [c]);
 	if (!c) return null;
 	function d(e, t) {
 		if (e.type === "text") return e.value;
@@ -60,7 +62,7 @@ function k({ html: e, mentions: n, resources: i, renderMention: a, sanitizer: o,
 		}
 		return g(e.tagName, o, ...e.children.length ? e.children.map((e, n) => d(e, `${t}-${n}`)) : []);
 	}
-	return /* @__PURE__ */ T(r, {
+	return /* @__PURE__ */ T(e, {
 		...s,
 		children: u.children.map((e, t) => d(e, String(t)))
 	});
@@ -80,7 +82,6 @@ var A = {
 	panel: "mentions__panel___UnLzV",
 	panelInline: "mentions__panelInline___7ohA_",
 	panelHeader: "mentions__panelHeader___Knvg3",
-	panelQuery: "mentions__panelQuery___vDLi5",
 	tabs: "mentions__tabs___p8mVm",
 	tab: "mentions__tab___PvBzn",
 	list: "mentions__list___Lu9gd",
@@ -93,37 +94,37 @@ var A = {
 };
 //#endregion
 //#region src/components/features/mentions/mention-suggestion-list.tsx
-function N({ kinds: t, activeKind: r, onSelect: i, resources: a, suggestionsByKind: o, focusable: s = !0 }) {
-	return t.length <= 1 ? null : /* @__PURE__ */ T("div", {
-		className: e("mention-kind-tabs--component", M.tabs),
+function N({ kinds: e, activeKind: t, onSelect: i, resources: a, suggestionsByKind: o, focusable: s = !0 }) {
+	return e.length <= 1 ? null : /* @__PURE__ */ T("div", {
+		className: r("mention-kind-tabs--component", M.tabs),
 		role: "tablist",
-		children: t.map((e) => {
-			let c = a?.[e], l = e === r, u = o?.[e]?.length ?? 0;
+		children: e.map((r) => {
+			let c = a?.[r], l = r === t, u = o?.[r]?.length ?? 0;
 			return /* @__PURE__ */ E("button", {
 				type: "button",
 				role: "tab",
 				"aria-selected": l,
 				tabIndex: s && l ? 0 : -1,
-				onKeyDown: (n) => {
+				onKeyDown: (t) => {
 					if (![
 						"ArrowLeft",
 						"ArrowRight",
 						"Home",
 						"End"
-					].includes(n.key)) return;
-					n.preventDefault();
-					let r = t.indexOf(e), a = n.key === "Home" ? 0 : n.key === "End" ? t.length - 1 : (r + (n.key === "ArrowRight" ? 1 : -1) + t.length) % t.length, o = t[a];
-					o !== void 0 && i(o), (n.currentTarget.parentElement?.querySelectorAll("[role=tab]")[a])?.focus();
+					].includes(t.key)) return;
+					t.preventDefault();
+					let n = e.indexOf(r), a = t.key === "Home" ? 0 : t.key === "End" ? e.length - 1 : (n + (t.key === "ArrowRight" ? 1 : -1) + e.length) % e.length, o = e[a];
+					o !== void 0 && i(o), (t.currentTarget.parentElement?.querySelectorAll("[role=tab]")[a])?.focus();
 				},
 				"data-active": l || void 0,
 				"data-empty": u === 0 || void 0,
-				onClick: () => i(e),
+				onClick: () => i(r),
 				className: M.tab,
 				children: [/* @__PURE__ */ T(n, {
 					tag: "span",
 					weight: "medium",
 					type: "inherit",
-					children: c?.label ?? String(e)
+					children: c?.label ?? String(r)
 				}), u > 0 && /* @__PURE__ */ T(n, {
 					tag: "span",
 					size: "xs",
@@ -132,22 +133,22 @@ function N({ kinds: t, activeKind: r, onSelect: i, resources: a, suggestionsByKi
 					numeric: !0,
 					children: u
 				})]
-			}, e);
+			}, r);
 		})
 	});
 }
-function P({ suggestions: t, activeKind: r, loading: a, loadingLabel: l, emptyLabel: u, listLabel: f, onSelect: p, className: h, resources: g, command: _ = !1, activeIndex: v, onActiveIndexChange: y, focusable: b = !0, id: x }) {
-	let [S, D] = C(0), O = Math.min(v ?? S, Math.max(0, t.length - 1)), k = (e) => {
+function P({ suggestions: e, activeKind: t, loading: s, loadingLabel: l, emptyLabel: u, listLabel: d, onSelect: p, className: h, resources: g, command: _ = !1, activeIndex: v, onActiveIndexChange: y, focusable: b = !0, id: x }) {
+	let [S, D] = C(0), O = Math.min(v ?? S, Math.max(0, e.length - 1)), k = (e) => {
 		D(e), y?.(e);
 	};
-	return a ? /* @__PURE__ */ T("div", {
+	return s ? /* @__PURE__ */ T("div", {
 		id: x,
-		className: e("mention-rows--component", M.list, M.listState, h),
+		className: r("mention-rows--component", M.list, M.listState, h),
 		children: /* @__PURE__ */ T(m, { label: l })
-	}) : t.length === 0 ? /* @__PURE__ */ T("div", {
+	}) : e.length === 0 ? /* @__PURE__ */ T("div", {
 		id: x,
 		role: "status",
-		className: e("mention-rows--component", M.list, M.listState, h),
+		className: r("mention-rows--component", M.list, M.listState, h),
 		children: /* @__PURE__ */ T(n, {
 			type: "secondary",
 			children: u
@@ -155,71 +156,71 @@ function P({ suggestions: t, activeKind: r, loading: a, loadingLabel: l, emptyLa
 	}) : /* @__PURE__ */ T("div", {
 		id: x,
 		role: _ ? void 0 : "listbox",
-		"aria-label": _ ? void 0 : f,
-		className: e("mention-rows--component", M.list, h),
-		children: t.map((e, a) => {
-			let l = e.kind ?? r ?? "", u = e.icon ?? g?.[l]?.icon, f = /* @__PURE__ */ E(w, { children: [e.avatar ? /* @__PURE__ */ E(c, {
+		"aria-label": _ ? void 0 : d,
+		className: r("mention-rows--component", M.list, h),
+		children: e.map((r, s) => {
+			let l = r.kind ?? t ?? "", u = r.icon ?? g?.[l]?.icon, d = /* @__PURE__ */ E(w, { children: [r.avatar ? /* @__PURE__ */ E(o, {
 				size: "sm",
-				children: [/* @__PURE__ */ T(s, {
-					src: e.avatar,
+				children: [/* @__PURE__ */ T(a, {
+					src: r.avatar,
 					alt: ""
-				}), /* @__PURE__ */ T(o, { children: e.label.slice(0, 1) })]
+				}), /* @__PURE__ */ T(i, { children: r.label.slice(0, 1) })]
 			}) : !!u && /* @__PURE__ */ T(u, { className: M.rowIcon }), /* @__PURE__ */ E("span", {
 				className: M.rowText,
 				children: [/* @__PURE__ */ T(n, {
 					tag: "span",
 					weight: "medium",
 					truncate: !0,
-					children: e.label
-				}), !!e.description && /* @__PURE__ */ T(n, {
+					children: r.label
+				}), !!r.description && /* @__PURE__ */ T(n, {
 					tag: "span",
 					size: "xs",
 					type: "secondary",
 					truncate: !0,
-					children: e.description
+					children: r.description
 				})]
-			})] }), m = `${l}:${e.id}`;
-			return _ ? /* @__PURE__ */ T(d, {
+			})] }), m = `${l}:${r.id}`;
+			return _ ? /* @__PURE__ */ T(c, {
 				value: m,
-				onSelect: () => p(e),
+				onSelect: () => p(r),
 				className: M.row,
 				"data-suggestion-id": m,
-				children: f
-			}, m) : /* @__PURE__ */ T(i, {
-				id: x ? `${x}-${a}` : void 0,
+				children: d
+			}, m) : /* @__PURE__ */ T(f, {
+				id: x ? `${x}-${s}` : void 0,
 				render: /* @__PURE__ */ T("button", { type: "button" }),
 				role: "option",
-				"aria-selected": O === a,
-				tabIndex: b && O === a ? 0 : -1,
+				"aria-selected": O === s,
+				tabIndex: b && O === s ? 0 : -1,
 				"data-suggestion-id": m,
 				className: M.row,
-				onPointerMove: () => k(a),
-				onFocus: () => k(a),
-				onClick: () => p(e),
-				onKeyDown: (e) => {
-					if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
-					e.preventDefault();
-					let n = (a + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length;
-					k(n), (e.currentTarget.parentElement?.querySelectorAll("[role=option]")[n])?.focus();
+				onPointerMove: () => k(s),
+				onFocus: () => k(s),
+				onClick: () => p(r),
+				onKeyDown: (t) => {
+					if (t.key !== "ArrowDown" && t.key !== "ArrowUp") return;
+					t.preventDefault();
+					let n = (s + (t.key === "ArrowDown" ? 1 : -1) + e.length) % e.length;
+					k(n), (t.currentTarget.parentElement?.querySelectorAll("[role=option]")[n])?.focus();
 				},
-				children: f
+				children: d
 			}, m);
 		})
 	});
 }
 //#endregion
 //#region src/components/features/mentions/mention-picker.tsx
-function F({ open: t, activeKind: r, setActiveKind: i, kinds: a, resources: o, suggestionsByKind: s, query: c, setQuery: d, suggestions: m, loading: h, onSelect: g, strings: _, className: v }) {
+function F({ open: e, activeKind: t, setActiveKind: i, kinds: a, resources: o, suggestionsByKind: c, query: f, setQuery: p, suggestions: m, loading: h, onSelect: g, strings: _, className: v }) {
 	let y = {
 		...j,
 		..._
 	};
-	return t ? /* @__PURE__ */ E(l, {
+	return e ? /* @__PURE__ */ E(d, {
 		align: "start",
 		inset: "flush",
 		width: void 0,
 		"aria-label": y.title,
-		className: e("mention-picker--component", M.panel, v),
+		className: r("mention-picker--component", M.panel, v),
 		children: [/* @__PURE__ */ E("div", {
 			className: M.panelHeader,
 			children: [/* @__PURE__ */ T("div", {
@@ -232,28 +233,28 @@ function F({ open: t, activeKind: r, setActiveKind: i, kinds: a, resources: o, s
 				})
 			}), /* @__PURE__ */ T(N, {
 				kinds: a,
-				activeKind: r,
+				activeKind: t,
 				resources: o,
-				suggestionsByKind: s,
+				suggestionsByKind: c,
 				onSelect: i
 			})]
-		}), /* @__PURE__ */ E(p, {
+		}), /* @__PURE__ */ E(u, {
 			shouldFilter: !1,
 			className: M.command,
-			children: [/* @__PURE__ */ T(u, {
+			children: [/* @__PURE__ */ T(s, {
 				autoFocus: !0,
 				"aria-label": y.searchPlaceholder,
 				placeholder: y.searchPlaceholder,
-				value: c,
-				onValueChange: d
-			}), /* @__PURE__ */ T(f, {
+				value: f,
+				onValueChange: p
+			}), /* @__PURE__ */ T(l, {
 				"aria-label": y.listLabel,
 				className: M.commandList,
 				children: /* @__PURE__ */ T(P, {
 					command: !0,
 					resources: o,
 					suggestions: m,
-					activeKind: r,
+					activeKind: t,
 					loading: h,
 					loadingLabel: y.loading,
 					emptyLabel: y.empty,
@@ -266,15 +267,15 @@ function F({ open: t, activeKind: r, setActiveKind: i, kinds: a, resources: o, s
 }
 //#endregion
 //#region src/components/features/mentions/mention-inline-suggestions.tsx
-function I({ open: t, activeKind: r, setActiveKind: i, kinds: a, resources: o, suggestionsByKind: s, suggestions: c, loading: l, query: u, onManualKindChange: d, onSelect: f, onDismiss: p, strings: m, className: h }) {
+function I({ open: e, activeKind: t, setActiveKind: i, kinds: a, resources: o, suggestionsByKind: s, suggestions: c, loading: l, query: u, onManualKindChange: d, onSelect: f, onDismiss: p, strings: m, className: h }) {
 	let g = {
 		...A,
 		...m
-	}, _ = S(null), [x, w] = C("bottom"), D = y(), O = `${r}:${u ?? ""}:${c.map((e) => e.id).join(",")}`, [k, j] = C({
+	}, _ = S(null), [x, w] = C("bottom"), D = y(), O = `${t}:${u ?? ""}:${c.map((e) => e.id).join(",")}`, [k, j] = C({
 		key: "",
 		index: 0
-	}), [F, I] = C(null), L = t && F !== O, R = k.key === O ? Math.min(k.index, Math.max(0, c.length - 1)) : 0;
-	return !t && F !== null && I(null), v(() => {
+	}), [F, I] = C(null), L = e && F !== O, R = k.key === O ? Math.min(k.index, Math.max(0, c.length - 1)) : 0;
+	return !e && F !== null && I(null), v(() => {
 		if (!L) return;
 		let e = _.current?.ownerDocument.activeElement;
 		if (!e?.matches("[contenteditable=true], textarea, input")) return;
@@ -333,7 +334,7 @@ function I({ open: t, activeKind: r, setActiveKind: i, kinds: a, resources: o, s
 			let n = t.getBoundingClientRect(), r = e.offsetHeight, i = window.visualViewport, a = i?.offsetTop ?? 0, o = a + (i?.height ?? window.innerHeight) - n.bottom, s = n.top - a, c = r > o && s > o ? "top" : "bottom";
 			w(c);
 			let l = getComputedStyle(e), u = (Number.parseFloat(l.marginTop) || 0) + (Number.parseFloat(l.marginBottom) || 0);
-			e.style.setProperty("--mention-available-height", `${Math.max(0, (c === "top" ? s : o) - u * 2)}px`);
+			e.style.setProperty("--_mention-available-height", `${Math.max(0, (c === "top" ? s : o) - u * 2)}px`);
 		};
 		t(), window.addEventListener("resize", t), window.addEventListener("scroll", t, !0);
 		let n = new ResizeObserver(t);
@@ -343,12 +344,12 @@ function I({ open: t, activeKind: r, setActiveKind: i, kinds: a, resources: o, s
 	}, [
 		L,
 		c,
-		r
+		t
 	]), L ? /* @__PURE__ */ E("div", {
 		ref: _,
 		"data-placement": x,
 		onMouseDown: (e) => e.preventDefault(),
-		className: e("mention-inline-suggestions--component", M.panel, M.panelInline, h),
+		className: r("mention-inline-suggestions--component", M.panel, M.panelInline, h),
 		children: [/* @__PURE__ */ E("div", {
 			className: M.panelHeader,
 			children: [/* @__PURE__ */ E("div", {
@@ -361,13 +362,14 @@ function I({ open: t, activeKind: r, setActiveKind: i, kinds: a, resources: o, s
 				}), !!u && /* @__PURE__ */ T(n, {
 					size: "xs",
 					type: "secondary",
-					className: M.panelQuery,
+					truncate: !0,
+					mono: !0,
 					children: g.formatQuery(u)
 				})]
 			}), /* @__PURE__ */ T(N, {
 				focusable: !1,
 				kinds: a,
-				activeKind: r,
+				activeKind: t,
 				resources: o,
 				suggestionsByKind: s,
 				onSelect: (e) => {
@@ -384,7 +386,7 @@ function I({ open: t, activeKind: r, setActiveKind: i, kinds: a, resources: o, s
 				index: e
 			}),
 			suggestions: c,
-			activeKind: r,
+			activeKind: t,
 			loading: l,
 			loadingLabel: g.loading,
 			emptyLabel: g.empty,
@@ -452,11 +454,11 @@ function G(e) {
 	return !!(e && e.name === "AbortError");
 }
 function K(e = {}) {
-	let { resources: t, onResourceSearch: n, initialMentions: r, debounceMs: i = 300, onError: o } = e, s = JSON.stringify(Object.keys(t ?? {})), c = x(() => JSON.parse(s), [s]), [l, u] = C(() => c[0] ?? null), d = l && c.includes(l) ? l : c[0] ?? null, [f, p] = C(!1), [m, h] = C(""), [g, y] = C({}), [b, w] = C(!1), [T, E] = C(null), [D, O] = C({}), [k, A] = C(0), [j, M] = C(() => r ? [...r] : []), N = S(0), P = S(null), F = S(t), I = S(n), L = S(o);
+	let { resources: t, onResourceSearch: n, initialMentions: r, debounceMs: i = 300, onError: a } = e, o = JSON.stringify(Object.keys(t ?? {})), s = x(() => JSON.parse(o), [o]), [c, l] = C(() => s[0] ?? null), u = c && s.includes(c) ? c : s[0] ?? null, [d, f] = C(!1), [m, h] = C(""), [g, y] = C({}), [b, w] = C(!1), [T, E] = C(null), [D, O] = C({}), [k, A] = C(0), [j, M] = C(() => r ? [...r] : []), N = S(0), P = S(null), F = S(t), I = S(n), L = S(a);
 	v(() => {
-		F.current = t, I.current = n, L.current = o;
+		F.current = t, I.current = n, L.current = a;
 	});
-	let R = x(() => d && t ? t[d] ?? null : null, [d, t]), z = _(async (e, t, n) => {
+	let R = x(() => u && t ? t[u] ?? null : null, [u, t]), z = _(async (e, t, n) => {
 		let r = F.current?.[e];
 		if (r?.search) return (await r.search(t, {
 			kind: e,
@@ -479,7 +481,7 @@ function K(e = {}) {
 			...t,
 			kind: e
 		})) : [];
-	}, []), B = a((e, t, n, r) => {
+	}, []), B = p((e, t, n, r) => {
 		(async () => {
 			w(!0);
 			try {
@@ -516,36 +518,36 @@ function K(e = {}) {
 		let t = () => {
 			e.abort(), P.current === e && (P.current = null);
 		};
-		if (c.length === 0) return y({}), w(!1), E(null), O({}), t;
+		if (s.length === 0) return y({}), w(!1), E(null), O({}), t;
 		let n = ++N.current;
-		return E(null), O({}), B(c, m, n, e.signal), () => {
+		return E(null), O({}), B(s, m, n, e.signal), () => {
 			B.cancel(), t();
 		};
 	}, [
-		c,
+		s,
 		m,
 		k,
 		B
 	]);
 	let V = _(() => A((e) => e + 1), []);
 	v(() => {
-		if (f || !d || (g[d]?.length ?? 0) > 0) return;
-		let e = c.find((e) => (g[e]?.length ?? 0) > 0);
-		e && e !== d && u(e);
+		if (d || !u || (g[u]?.length ?? 0) > 0) return;
+		let e = s.find((e) => (g[e]?.length ?? 0) > 0);
+		e && e !== u && l(e);
 	}, [
+		u,
+		s,
 		d,
-		c,
-		f,
 		g
 	]);
-	let H = _((e) => u(e), []), U = _((e) => h(e), []), W = _((e) => {
+	let H = _((e) => l(e), []), U = _((e) => h(e), []), W = _((e) => {
 		M((t) => t.some((t) => t.id === e.id) ? t : [...t, e]);
 	}, []), K = _((e) => {
 		M((t) => t.filter((t) => t.id !== e));
 	}, []), q = _((e) => M((t) => typeof e == "function" ? [...e(t)] : [...e]), []), J = _(() => {
-		P.current?.abort(), N.current++, M([]), h(""), p(!1), y({}), w(!1), E(null), O({});
+		P.current?.abort(), N.current++, M([]), h(""), f(!1), y({}), w(!1), E(null), O({});
 	}, []), Y = _((e) => {
-		let n = e.kind ?? d, r = {
+		let n = e.kind ?? u, r = {
 			id: `${n}:${e.id}`,
 			kind: n,
 			label: e.label,
@@ -554,18 +556,18 @@ function K(e = {}) {
 		};
 		return W(r), r;
 	}, [
-		d,
+		u,
 		W,
 		t
 	]);
 	return {
-		kinds: c,
-		activeKind: d,
+		kinds: s,
+		activeKind: u,
 		setActiveKind: H,
 		activeResource: R,
 		query: m,
 		setQuery: U,
-		suggestions: x(() => d ? g[d] ?? [] : [], [d, g]),
+		suggestions: x(() => u ? g[u] ?? [] : [], [u, g]),
 		suggestionsByKind: g,
 		isLoading: b,
 		error: T,
@@ -578,8 +580,8 @@ function K(e = {}) {
 		setMentions: q,
 		reset: J,
 		selectSuggestion: Y,
-		manualKindOverride: f,
-		setManualKindOverride: p
+		manualKindOverride: d,
+		setManualKindOverride: f
 	};
 }
 //#endregion