@jfrader/ui 0.5.1 → 0.6.0

package/dist/thread-parts-DfZNz70v.js

@@ -0,0 +1,683 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { n } from "./roving-focus-CYlo_Kf8.js";
+import { t as r } from "./visually-hidden-DgVO3NaB.js";
+import { t as i } from "./button-C6OV0C7J.js";
+import { t as a } from "./avatar-B6idYC59.js";
+import { n as o, o as s, s as c, t as l } from "./listbox-style-DNOxAulu.js";
+import { t as u } from "./overlay-portal-C9igMHnC.js";
+import { t as d } from "./part-id-D0zksy32.js";
+import { t as f } from "./textarea-D1YwEPmn.js";
+import { useId as p, useLayoutEffect as m, useRef as h, useState as g } from "react";
+import { vars as _ } from "@jfrader/tokens/vars";
+import { Fragment as ee, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
+import { autoUpdate as te, flip as ne, offset as re, shift as ie, useDismiss as ae, useFloating as oe, useInteractions as se, useMergeRefs as ce } from "@floating-ui/react";
+var b = [], x = 864e13, S = 1e3, C = 60 * S, w = 60 * C, T = 24 * w, E = 365.2425 * T, D = [
+	["year", E],
+	["month", E / 12],
+	["week", 7 * T],
+	["day", T],
+	["hour", w],
+	["minute", C]
+], O = /^(\d{4})-(\d{2})-(\d{2})T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:\d{2})$/, k = "en-US", A = (e) => Number.isFinite(e) && Math.abs(e) <= x;
+function j(e) {
+	if (typeof e == "number") return A(e) ? e : null;
+	if (e instanceof Date) return A(e.getTime()) ? e.getTime() : null;
+	if (typeof e != "string") return null;
+	let t = O.exec(e);
+	if (!t) return null;
+	let [n, r, i] = t.slice(1, 4).map(Number), a = new Date(Date.UTC(n, r - 1, i));
+	if (a.getUTCMonth() !== r - 1 || a.getUTCDate() !== i) return null;
+	let o = Date.parse(e);
+	return A(o) ? o : null;
+}
+function M(e, t, n) {
+	let r = e - t;
+	for (let [e, t] of D) if (Math.abs(r) >= t) return n.format(Math.trunc(r / t), e);
+	return n.format(Math.trunc(r / S), "second");
+}
+function N(e, t) {
+	return {
+		relative: new Intl.RelativeTimeFormat(e, { numeric: "auto" }),
+		full: new Intl.DateTimeFormat(e, {
+			timeZone: t,
+			dateStyle: "full",
+			timeStyle: "short"
+		}),
+		number: new Intl.NumberFormat(e),
+		plural: new Intl.PluralRules(e),
+		people: new Intl.ListFormat(e, { type: "conjunction" }),
+		facts: new Intl.ListFormat(e, {
+			type: "unit",
+			style: "short"
+		})
+	};
+}
+function P(e, t, n) {
+	let r = [], i = t;
+	try {
+		Intl.getCanonicalLocales(t);
+	} catch {
+		r.push(`${e}: locale ${JSON.stringify(String(t))} is not a valid language tag; using the default locale.`), i = void 0;
+	}
+	let a = n;
+	try {
+		new Intl.DateTimeFormat(k, { timeZone: n });
+	} catch {
+		r.push(`${e}: timeZone ${JSON.stringify(n)} is not a valid IANA time zone; using UTC.`), a = "UTC";
+	}
+	return {
+		formatters: N(i, a),
+		problems: r
+	};
+}
+var le = (e, t, n, r) => `${e.number.format(t)} ${e.plural.select(t) === "one" ? n : r}`;
+function F(e) {
+	let t = /* @__PURE__ */ new Map(), n = [], r = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = !1, o = (e, s, c) => {
+		for (let l of e) i.has(l) ? a = !0 : (t.has(l.id) ? r.add(l.id) : (t.set(l.id, {
+			comment: l,
+			parentId: s,
+			depth: c
+		}), n.push(l.id)), i.add(l), o(l.replies ?? b, l.id, c + 1), i.delete(l));
+	};
+	return o(e, null, 0), {
+		entries: t,
+		order: n,
+		duplicates: [...r],
+		cyclic: a
+	};
+}
+function I(e, t, n, r = /* @__PURE__ */ new Set()) {
+	for (let [i, a] of e.entries()) {
+		if (r.has(a)) continue;
+		if (a.id === t) {
+			let t = n(a);
+			if (t === a) return e;
+			let r = [...e];
+			return t === null ? r.splice(i, 1) : r[i] = t, r;
+		}
+		let o = a.replies;
+		if (!o?.length) continue;
+		let s = I(o, t, n, new Set(r).add(a));
+		if (s !== o) return e.with(i, {
+			...a,
+			replies: s
+		});
+	}
+	return e;
+}
+function L(e, t, n) {
+	if (t === null) return null;
+	let r = e.entries.get(t);
+	if (r) {
+		if (n <= 0) return null;
+		for (; r.depth + 1 > n && r.parentId !== null;) r = e.entries.get(r.parentId);
+		return r.comment.id;
+	}
+}
+function R(e, t, n) {
+	return t === null ? [...e, n] : I(e, t, (e) => ({
+		...e,
+		replies: [...e.replies ?? b, n]
+	}));
+}
+function z(e, t, n) {
+	return I(e, t, (e) => e.deleted || e.body === n ? e : {
+		...e,
+		body: n,
+		edited: !0
+	});
+}
+function B(e, t) {
+	return I(e, t, (e) => e.deleted ? e : e.replies?.length ? {
+		...e,
+		deleted: !0,
+		body: "",
+		reactions: []
+	} : null);
+}
+function V(e, t, n) {
+	let r = e.find((e) => e.emoji === t);
+	if (!r) return {
+		reactions: [...e, {
+			emoji: t,
+			users: [n]
+		}],
+		added: !0
+	};
+	let i = !r.users.includes(n), a = i ? [...r.users, n] : r.users.filter((e) => e !== n);
+	return {
+		reactions: a.length === 0 ? e.filter((e) => e !== r) : e.map((e) => e === r ? {
+			emoji: t,
+			users: a
+		} : e),
+		added: i
+	};
+}
+function H(e, t, n, r) {
+	let i = !1;
+	return {
+		comments: I(e, t, (e) => {
+			if (e.deleted) return e;
+			let t = V(e.reactions ?? [], n, r);
+			return i = t.added, {
+				...e,
+				reactions: t.reactions
+			};
+		}),
+		added: i
+	};
+}
+function ue(e, t) {
+	let n = /* @__PURE__ */ new Set();
+	return e.filter((e) => {
+		let r = t(e);
+		return !n.has(r) && (n.add(r), !0);
+	});
+}
+//#endregion
+//#region src/components/thread/thread-parts.tsx
+var de = "@", U = 8, fe = 4, W = 8, G = /\s/u, K = (e, t) => `${e}-${t}`, pe = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229, me = {
+	sm: "sm",
+	md: "md"
+}, q = e({
+	fontSize: _.textSize.xs,
+	color: _.color.textMuted,
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap"
+});
+function J({ epoch: e, now: t, formatters: n, invalidLabel: i, id: a, fullId: o, ui: s, part: c }) {
+	return e === null ? /* @__PURE__ */ v("span", {
+		id: a,
+		"data-ui": K(s, "time"),
+		className: c?.className,
+		css: [q, c?.css],
+		children: i
+	}) : /* @__PURE__ */ y(ee, { children: [/* @__PURE__ */ v("time", {
+		id: a,
+		dateTime: new Date(e).toISOString(),
+		"data-ui": K(s, "time"),
+		className: c?.className,
+		css: [q, c?.css],
+		children: t === null ? n.full.format(e) : M(e, t, n.relative)
+	}), /* @__PURE__ */ v("span", {
+		id: o,
+		css: r,
+		children: n.full.format(e)
+	})] });
+}
+var Y = e({
+	display: "grid",
+	gridTemplateColumns: "auto minmax(0, 1fr)",
+	columnGap: "var(--thread-column-gap)",
+	alignItems: "start"
+}), he = e({ display: "inline-flex" }), X = e({
+	display: "grid",
+	rowGap: _.space[1],
+	minInlineSize: 0
+}), Z = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "baseline",
+	columnGap: _.space[2],
+	rowGap: _.space[1],
+	minInlineSize: 0
+}), ge = e({
+	fontWeight: _.fontWeight.semibold,
+	color: _.color.text,
+	overflowWrap: "anywhere"
+}), _e = e({
+	fontSize: _.textSize.xs,
+	color: _.color.textMuted
+});
+function ve({ ui: e, author: t, label: n, epoch: r, now: i, formatters: o, invalidTimeLabel: s, meta: c, size: l, baseId: u, messageId: f, children: p, slots: m }) {
+	let h = d(u, "author", f), g = d(u, "time", f), _ = d(u, "when", f);
+	return /* @__PURE__ */ y("article", {
+		"aria-label": n,
+		"aria-labelledby": n === void 0 ? `${h} ${g}` : void 0,
+		"aria-describedby": r === null ? void 0 : _,
+		"data-ui": K(e, "article"),
+		className: m?.article?.className,
+		css: [Y, m?.article?.css],
+		children: [/* @__PURE__ */ v("span", {
+			"aria-hidden": "true",
+			css: he,
+			children: /* @__PURE__ */ v(a, {
+				name: t.name,
+				src: t.avatar,
+				size: me[l]
+			})
+		}), /* @__PURE__ */ y("div", {
+			css: X,
+			children: [/* @__PURE__ */ y("div", {
+				css: Z,
+				children: [
+					/* @__PURE__ */ v("span", {
+						id: h,
+						"data-ui": K(e, "author"),
+						css: ge,
+						children: t.name
+					}),
+					/* @__PURE__ */ v(J, {
+						epoch: r,
+						now: i,
+						formatters: o,
+						invalidLabel: s,
+						id: g,
+						fullId: _,
+						ui: e,
+						part: m?.time
+					}),
+					c ? /* @__PURE__ */ v("span", {
+						css: _e,
+						children: c
+					}) : null
+				]
+			}), p]
+		})]
+	});
+}
+var ye = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: _.space[1]
+}), be = e({
+	gap: _.space[1],
+	paddingInline: _.space[2],
+	fontVariantNumeric: "tabular-nums",
+	"&[aria-pressed=\"true\"]": {
+		borderWidth: "2px",
+		borderColor: _.color.accentBorder,
+		backgroundColor: _.color.accentSoft,
+		color: _.color.accentText,
+		fontWeight: _.fontWeight.semibold
+	},
+	[t]: { "&[aria-pressed=\"true\"]": { borderColor: "Highlight" } }
+}), xe = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: _.space[1],
+	minBlockSize: _.space[6],
+	paddingInline: _.space[2],
+	border: `1px solid ${_.color.border}`,
+	borderRadius: _.radius.full,
+	fontSize: _.textSize.sm,
+	fontVariantNumeric: "tabular-nums"
+}), Q = e({
+	minInlineSize: _.space[8],
+	paddingInline: _.space[2]
+}), Se = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: _.space[1],
+	padding: _.space[1],
+	border: `1px solid ${_.color.border}`,
+	borderRadius: _.radius.md,
+	backgroundColor: _.color.surface,
+	[t]: { borderColor: "CanvasText" }
+}), Ce = e({
+	display: "block",
+	inlineSize: "1em",
+	blockSize: "1em"
+}), we = /* @__PURE__ */ y("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	css: Ce,
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ v("circle", {
+		cx: "8",
+		cy: "8",
+		r: "6.25"
+	}), /* @__PURE__ */ v("path", {
+		d: "M5.5 9.5c.6.9 1.4 1.3 2.5 1.3s1.9-.4 2.5-1.3M6 6.25h.01M10 6.25h.01",
+		strokeLinecap: "round"
+	})]
+}), Te = /* @__PURE__ */ v("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	css: Ce,
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ v("path", {
+		d: "M4 4l8 8M12 4l-8 8",
+		strokeLinecap: "round"
+	})
+});
+function Ee({ ui: e, reactions: t, offered: a, currentUserId: o, formatters: s, labels: c, readOnly: l, disabled: u, pickerOpen: d, onPickerOpenChange: f, onToggle: p, pickerId: _, part: b, overlay: x = !1, counts: S }) {
+	let C = h(null), w = h(!1), [T, E] = g(0), D = {
+		itemSelector: "[data-part=\"emoji\"]",
+		ownerSelector: `[data-ui="${K(e, "picker")}"]`
+	}, O = !l && a.length > 0, k = O && d, { refs: A, context: j, floatingStyles: M } = oe({
+		open: x && k,
+		onOpenChange: f,
+		placement: "bottom-start",
+		middleware: [
+			re(fe),
+			ne(),
+			ie({ padding: W })
+		],
+		whileElementsMounted: te
+	}), N = ae(j, {
+		enabled: x,
+		escapeKey: !1
+	}), { getFloatingProps: P } = se([N]), le = ce([C, A.setReference]);
+	m(() => {
+		!d && w.current && (w.current = !1, C.current?.focus());
+	}, [d]);
+	let F = () => {
+		w.current = !0, f(!1);
+	};
+	if (t.length === 0 && !O) return null;
+	let I = (e) => {
+		e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), F()) : n(e, e.currentTarget, "horizontal", D);
+	};
+	return /* @__PURE__ */ y("div", {
+		"data-ui": K(e, "reactions"),
+		className: b?.className,
+		css: [ye, b?.css],
+		children: [
+			t.map(({ emoji: e, users: t }) => {
+				let n = t.includes(o), a = S?.get(e) ?? t.length, d = c.reactionCount(e, a, n), f = /* @__PURE__ */ y(ee, { children: [/* @__PURE__ */ v("span", {
+					"aria-hidden": "true",
+					children: e
+				}), /* @__PURE__ */ v("span", {
+					"aria-hidden": "true",
+					children: s.number.format(a)
+				})] });
+				return l ? /* @__PURE__ */ y("span", {
+					"data-part": "reaction",
+					css: xe,
+					children: [f, /* @__PURE__ */ v("span", {
+						css: r,
+						children: d
+					})]
+				}, e) : /* @__PURE__ */ v(i, {
+					variant: "outline",
+					size: "sm",
+					"data-part": "reaction",
+					"aria-label": d,
+					"aria-pressed": n,
+					disabled: u,
+					onClick: () => p(e),
+					css: be,
+					children: f
+				}, e);
+			}),
+			O ? /* @__PURE__ */ v(i, {
+				ref: le,
+				variant: "ghost",
+				size: "sm",
+				"aria-label": c.addReaction,
+				"aria-expanded": k,
+				"aria-controls": k ? _ : void 0,
+				disabled: u,
+				"data-action": "react",
+				onClick: () => f(!d),
+				css: Q,
+				children: we
+			}) : null,
+			k ? /* @__PURE__ */ v(De, {
+				overlay: x,
+				children: /* @__PURE__ */ y("div", {
+					...x ? P() : {},
+					ref: x ? A.setFloating : void 0,
+					style: x ? M : void 0,
+					dir: x && C.current ? C.current.ownerDocument.defaultView?.getComputedStyle(C.current).direction : void 0,
+					id: _,
+					role: "group",
+					"aria-label": c.reactions,
+					"data-ui": K(e, "picker"),
+					onKeyDown: I,
+					onBlur: (e) => {
+						x && !e.currentTarget.contains(e.relatedTarget) && e.relatedTarget !== C.current && f(!1);
+					},
+					css: Se,
+					children: [a.map((e, t) => /* @__PURE__ */ v(i, {
+						variant: "ghost",
+						size: "sm",
+						"data-part": "emoji",
+						"aria-label": c.reactWith(e),
+						tabIndex: t === Math.min(T, a.length - 1) ? 0 : -1,
+						autoFocus: t === 0,
+						disabled: u,
+						onFocus: () => E(t),
+						onClick: () => {
+							p(e), F();
+						},
+						css: Q,
+						children: /* @__PURE__ */ v("span", {
+							"aria-hidden": "true",
+							children: e
+						})
+					}, e)), /* @__PURE__ */ v(i, {
+						variant: "ghost",
+						size: "sm",
+						"aria-label": c.closeReactions,
+						onClick: F,
+						css: Q,
+						children: Te
+					})]
+				})
+			}) : null
+		]
+	});
+}
+function De({ overlay: e, children: t }) {
+	return e ? /* @__PURE__ */ v(u, { children: t }) : t;
+}
+function Oe(e, t) {
+	let n = e.slice(0, t), r = n.lastIndexOf(de);
+	if (r === -1 || r > 0 && !G.test(n[r - 1])) return null;
+	let i = n.slice(r + 1);
+	return G.test(i) ? null : {
+		start: r,
+		query: i
+	};
+}
+function ke(e, t, n) {
+	let r = t.toLocaleLowerCase(n);
+	return e.filter((e) => e.name.toLocaleLowerCase(n).split(G).some((e) => e.startsWith(r))).slice(0, U);
+}
+var Ae = {
+	ArrowDown: (e, t) => (e + 1) % t,
+	ArrowUp: (e, t) => (e - 1 + t) % t,
+	Home: () => 0,
+	End: (e, t) => t - 1
+}, je = e({
+	display: "grid",
+	gridTemplateColumns: "auto minmax(0, 1fr)",
+	columnGap: "var(--thread-column-gap)",
+	alignItems: "start",
+	inlineSize: "100%",
+	"&[data-avatar=\"false\"]": { gridTemplateColumns: "minmax(0, 1fr)" }
+}), Me = e({
+	display: "inline-flex",
+	"@container (max-width: 28rem)": { display: "none" }
+}), Ne = e({
+	display: "grid",
+	rowGap: _.space[2],
+	minInlineSize: 0,
+	"@container (max-width: 28rem)": { gridColumn: "1 / -1" }
+}), Pe = e({
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "flex-end",
+	gap: _.space[2]
+}), Fe = e({ gap: _.space[2] }), Ie = {
+	sm: "sm",
+	md: "md"
+}, Le = {
+	sm: 2,
+	md: 3
+}, $ = {
+	sm: e({
+		"--thread-column-gap": _.space[2],
+		"--thread-avatar": _.space[6]
+	}),
+	md: e({
+		"--thread-column-gap": _.space[3],
+		"--thread-avatar": _.space[8]
+	})
+};
+function Re({ ui: e, draft: t, onDraftChange: n, onSubmit: r, onCancel: _, cancelOnEscape: ee = !0, cancelable: ae, label: se, placeholder: b, submitLabel: x, cancelLabel: S, mentionsLabel: C, people: w, locale: T, disabled: E, pending: D, autoFocus: O, size: k, author: A, textareaProps: j, submitProps: M, part: N, kind: P, submitOnEnter: le = !1, allowEmpty: F = !1, lockWhilePending: I = !1 }) {
+	let L = p(), R = h(null), z = h(null), B = h(null), [V, H] = g(null), [ue, U] = g(null), [G, q] = g({
+		query: "",
+		index: 0
+	}), J = V === null ? null : Oe(t, V), Y = J ? ke(w, J.query, T) : [], X = J !== null && !E && Y.length > 0 && ue !== J.start, Z = J && G.query === J.query ? Math.min(G.index, Y.length - 1) : 0, ge = `${L}-mentions`, _e = (e) => d(L, "person", e.id), { refs: ve, floatingStyles: ye } = oe({
+		open: X,
+		placement: "bottom-start",
+		middleware: [
+			re(fe),
+			ne({ padding: W }),
+			ie({ padding: W })
+		],
+		whileElementsMounted: te
+	}), be = ce([
+		z,
+		ve.setReference,
+		j?.ref
+	]);
+	m(() => {
+		B.current !== null && z.current && (z.current.setSelectionRange(B.current, B.current), B.current = null);
+	});
+	let xe = (e) => H(e.selectionStart === e.selectionEnd ? e.selectionStart : null), Q = (e) => {
+		if (!J) return;
+		let r = `${de}${e.name} `, i = J.start + 1 + J.query.length, a = t.slice(0, J.start) + r + t.slice(i), o = J.start + r.length;
+		B.current = o, H(o), n(a);
+	}, Se = () => {
+		let e = t.trim();
+		E || D || !F && e === "" || !R.current || r(e, R.current);
+	}, Ce = (e) => {
+		j?.onChange?.(e), n(e.currentTarget.value), xe(e.currentTarget);
+	}, we = (e) => {
+		j?.onSelect?.(e), xe(e.currentTarget);
+	}, Te = (e) => {
+		j?.onBlur?.(e), J && U(J.start);
+	}, Ee = (e) => {
+		if (j?.onKeyDown?.(e), e.defaultPrevented || pe(e)) return;
+		let t = !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+		if (X && J) {
+			let n = t ? Ae[e.key] : void 0;
+			if (n) {
+				e.preventDefault(), q({
+					query: J.query,
+					index: n(Z, Y.length)
+				});
+				return;
+			}
+			if (t && (e.key === "Enter" || e.key === "Tab")) {
+				e.preventDefault(), Q(Y[Z]);
+				return;
+			}
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), U(J.start);
+				return;
+			}
+		}
+		e.key === "Enter" && (le ? t : (e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey) ? (e.preventDefault(), Se()) : e.key === "Escape" && ee && _ && R.current && (e.preventDefault(), e.stopPropagation(), _(R.current));
+	}, De = !F && t.trim() === "", $ = A !== void 0;
+	return /* @__PURE__ */ y("div", {
+		ref: R,
+		"data-ui": K(e, "composer"),
+		"data-composer": P,
+		"data-avatar": $,
+		className: N?.className,
+		css: [je, N?.css],
+		children: [
+			$ ? /* @__PURE__ */ v("span", {
+				"aria-hidden": "true",
+				css: Me,
+				children: /* @__PURE__ */ v(a, {
+					name: A.name,
+					src: A.avatar,
+					size: me[k]
+				})
+			}) : null,
+			/* @__PURE__ */ y("div", {
+				css: Ne,
+				children: [/* @__PURE__ */ v(f, {
+					"aria-label": se,
+					placeholder: b,
+					size: Ie[k],
+					rows: Le[k],
+					autoResize: !0,
+					autoFocus: O,
+					...j,
+					ref: be,
+					value: t,
+					disabled: E || j?.disabled,
+					readOnly: I && D || j?.readOnly,
+					"aria-autocomplete": "list",
+					"aria-controls": X ? ge : j?.["aria-controls"],
+					"aria-activedescendant": X ? _e(Y[Z]) : void 0,
+					onChange: Ce,
+					onSelect: we,
+					onBlur: Te,
+					onKeyDown: Ee
+				}), /* @__PURE__ */ y("div", {
+					css: Pe,
+					children: [ae ? /* @__PURE__ */ v(i, {
+						variant: "ghost",
+						size: "sm",
+						disabled: E,
+						onClick: () => R.current && _?.(R.current),
+						children: S
+					}) : null, /* @__PURE__ */ v(i, {
+						variant: "solid",
+						tone: "accent",
+						size: "sm",
+						...M,
+						disabled: E || M?.disabled,
+						"aria-disabled": De ? !0 : M?.["aria-disabled"],
+						loading: D,
+						"data-action": "submit",
+						onClick: (e) => {
+							M?.onClick?.(e), e.defaultPrevented || Se();
+						},
+						children: x
+					})]
+				})]
+			}),
+			X ? /* @__PURE__ */ v(u, { children: /* @__PURE__ */ v("div", {
+				ref: ve.setFloating,
+				id: ge,
+				role: "listbox",
+				"aria-label": C,
+				"data-ui": K(e, "mentions"),
+				style: ye,
+				css: [c, s],
+				children: Y.map((t, n) => /* @__PURE__ */ y("div", {
+					id: _e(t),
+					role: "option",
+					"aria-selected": n === Z,
+					"data-active": n === Z ? "" : void 0,
+					"data-ui": K(e, "mention"),
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: () => Q(t),
+					css: [
+						o,
+						l,
+						Fe
+					],
+					children: [/* @__PURE__ */ v("span", {
+						"aria-hidden": "true",
+						css: he,
+						children: /* @__PURE__ */ v(a, {
+							name: t.name,
+							src: t.avatar,
+							size: "sm"
+						})
+					}), t.name]
+				}, t.id))
+			}) }) : null
+		]
+	});
+}
+//#endregion
+export { R as a, le as c, P as d, L as f, A as g, ue as h, $ as i, F as l, V as m, ve as n, B as o, j as p, Ee as r, z as s, Re as t, H as u };