@jfrader/ui 0.4.0 → 0.5.1

package/dist/json-viewer.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as JsonViewer } from "./json-viewer-DgWqyU75.js";

package/dist/listbox-style-WX-RASp1.js

@@ -0,0 +1,59 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { vars as t } from "@jfrader/tokens/vars";
+//#region src/styling/listbox-style.ts
+var n = e({
+	boxSizing: "border-box",
+	display: "flex",
+	flexDirection: "column",
+	backgroundColor: t.color.surfaceRaised,
+	border: `1px solid ${t.color.border}`,
+	borderRadius: t.radius.md,
+	boxShadow: t.shadow.overlay,
+	padding: t.space[1],
+	minInlineSize: "180px",
+	maxInlineSize: "min(320px, calc(100vw - 32px))",
+	color: t.color.text,
+	fontFamily: t.font.sans,
+	lineHeight: t.lineHeight.base
+}), r = e({
+	maxBlockSize: "280px",
+	overflow: "auto",
+	"&[hidden]": { display: "none" }
+}), i = e({
+	boxSizing: "border-box",
+	display: "flex",
+	alignItems: "center",
+	inlineSize: "100%",
+	minBlockSize: "32px",
+	flexShrink: 0,
+	borderRadius: t.radius.sm,
+	paddingBlock: t.space[1],
+	paddingInline: t.space[2],
+	fontSize: t.textSize.sm,
+	color: t.color.text,
+	cursor: "pointer",
+	userSelect: "none",
+	transitionProperty: "background-color",
+	transitionDuration: t.motion.duration.fast,
+	transitionTimingFunction: t.motion.easeStandard,
+	"&[data-active]": {
+		outline: `2px solid ${t.color.focusRing}`,
+		outlineOffset: "-2px"
+	},
+	"@media (prefers-reduced-motion: reduce)": { transitionDuration: "0s" }
+}), a = e({
+	"&:hover:not([aria-disabled=\"true\"]), &[data-active]:not([aria-disabled=\"true\"])": { backgroundColor: t.color.surfaceHover },
+	"&[aria-disabled=\"true\"]": {
+		opacity: .55,
+		cursor: "not-allowed"
+	}
+}), o = e({
+	gap: t.space[2],
+	"&[aria-selected=\"true\"]": { fontWeight: t.fontWeight.medium }
+}), s = e({
+	flex: 1,
+	minInlineSize: 0
+}), c = e({ color: t.color.accentText });
+//#endregion
+export { s as a, o as i, i as n, r as o, c as r, n as s, a as t };

package/dist/{media-D_eA_I-e.js → media-8yrN85VT.js}

@@ -1,5 +1,5 @@
 'use client';
 //#region src/styling/media.ts
-var e = "@media (prefers-reduced-motion: reduce)", t = "@media (forced-colors: active)";
+var e = "@media (prefers-reduced-motion: reduce)", t = "@media (forced-colors: active)", n = "@media (pointer: coarse)";
 //#endregion
-export { e as n, t };
+export { t as n, e as r, n as t };

package/dist/mention-input-sq61si9L.js

@@ -0,0 +1,600 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { n as t, r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./use-controlled-state-DpeVQZNR.js";
+import { t as i } from "./visually-hidden-BJdvqqvn.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { n as o, s, t as c } from "./listbox-style-WX-RASp1.js";
+import { t as ee } from "./overlay-portal-C4JZFq2M.js";
+import { t as te } from "./input-control-DmMuAuPS.js";
+import { a as ne, i as re, n as ie, r as ae, t as oe } from "./field-anatomy-COVdNpf5.js";
+import { useId as se, useImperativeHandle as ce, useLayoutEffect as l, useRef as u, useState as d } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { createElement as le } from "@emotion/react";
+import { Fragment as ue, jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
+import { autoUpdate as de, flip as fe, offset as pe, shift as me, size as he, useDismiss as ge, useFloating as _e, useInteractions as ve, useListNavigation as ye, useMergeRefs as be } from "@floating-ui/react";
+import { flushSync as xe } from "react-dom";
+//#region src/components/mention-input/mention-input.tsx
+var Se = {
+	text: "",
+	mentions: []
+}, Ce = {
+	person: "@",
+	channel: "#"
+}, we = 8, Te = 8;
+function Ee(e, t, n) {
+	return `${t.format(e)} ${n.select(e) === "one" ? "result" : "results"}`;
+}
+var De = {
+	peopleLabel: "People",
+	channelsLabel: "Channels",
+	results: (e) => Ee(e, new Intl.NumberFormat(), new Intl.PluralRules()),
+	empty: () => "No results",
+	added: (e) => `Added ${h(e.kind, e.label)}`,
+	removed: (e) => `Removed ${h(e.kind, e.label)}`,
+	invalidValue: "MentionInput: invalid token ranges were omitted."
+};
+function h(e, t) {
+	return `${Ce[e]}${t}`;
+}
+function g(e) {
+	let t = 0;
+	return e.mentions.filter((n) => {
+		let r = Number.isInteger(n.start) && Number.isInteger(n.end) && n.start >= t && n.end > n.start && n.end <= e.text.length && e.text.slice(n.start, n.end) === h(n.kind, n.label);
+		return r && (t = n.end), r;
+	});
+}
+function Oe(e, t = (e) => `<${Ce[e.kind]}${e.id}>`) {
+	let n = 0, r = "";
+	for (let i of g(e)) r += e.text.slice(n, i.start) + t(i), n = i.end;
+	return r + e.text.slice(n);
+}
+function _(e, t) {
+	return e.text === t.text && e.mentions.length === t.mentions.length && e.mentions.every((e, n) => {
+		let r = t.mentions[n];
+		return !!r && e.id === r.id && e.kind === r.kind && e.label === r.label && e.start === r.start && e.end === r.end;
+	});
+}
+function v(e, t, n, r) {
+	let i = r.length - (n - t);
+	return {
+		text: e.text.slice(0, t) + r + e.text.slice(n),
+		mentions: g(e).flatMap((e) => e.end <= t ? [e] : e.start >= n ? [{
+			...e,
+			start: e.start + i,
+			end: e.end + i
+		}] : [])
+	};
+}
+function ke(e, t, n) {
+	if (n && _(n.value, e) && !n.inputType.startsWith("history")) {
+		let { start: r, end: i } = n, a = e.text.length - t.length;
+		r === i && a > 0 && (n.inputType.endsWith("Backward") && (r = Math.max(0, r - a)), n.inputType.endsWith("Forward") && (i = Math.min(e.text.length, i + a)));
+		let o = t.length - e.text.length + i - r;
+		if (o >= 0 && t.startsWith(e.text.slice(0, r)) && t.endsWith(e.text.slice(i))) return v(e, r, i, t.slice(r, r + o));
+	}
+	let r = 0;
+	for (; r < e.text.length && r < t.length && e.text[r] === t[r];) r++;
+	let i = e.text.length, a = t.length;
+	for (; i > r && a > r && e.text[i - 1] === t[a - 1];) i--, a--;
+	return {
+		text: t,
+		mentions: g(v(e, r, i, t.slice(r, a)))
+	};
+}
+function y(e, t, n, r) {
+	if (e.mentions.some((e) => t > e.start && t <= e.end)) return null;
+	let i = e.text.slice(0, t), a = /(?:^|[\s([{'"“‘])([@#])([\p{L}\p{N}\p{M}_-]*)$/u.exec(i);
+	if (!a) return null;
+	let o = a[1] === "@" ? "person" : "channel";
+	if (!(o === "person" ? n : r)) return null;
+	let s = a[2] ?? "", c = t - s.length - 1;
+	return e.mentions.some((e) => c < e.end && t > e.start) ? null : {
+		kind: o,
+		start: c,
+		end: t,
+		query: s
+	};
+}
+function Ae(e, t) {
+	return Number.isFinite(e) && e > 0 ? Math.max(1, Math.floor(e)) : t;
+}
+var je = e({
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	minInlineSize: 0,
+	fontFamily: f.font.sans,
+	lineHeight: f.lineHeight.base,
+	paddingBlock: f.space[2],
+	whiteSpace: "pre-wrap",
+	overflowWrap: "break-word",
+	tabSize: 4
+}), Me = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	overflowWrap: "anywhere"
+}), Ne = {
+	sm: e({
+		paddingInline: f.space[3],
+		fontSize: f.textSize.sm
+	}),
+	md: e({
+		paddingInline: f.space[4],
+		fontSize: f.textSize.sm
+	}),
+	lg: e({
+		paddingInline: f.space[4],
+		fontSize: f.textSize.md
+	})
+}, Pe = e({
+	position: "relative",
+	minInlineSize: 0,
+	borderRadius: f.radius.sm
+}), Fe = e({
+	display: "block",
+	resize: "none",
+	borderRadius: f.radius.sm,
+	minBlockSize: f.space[8],
+	backgroundColor: "transparent",
+	color: "transparent",
+	caretColor: f.color.text,
+	position: "relative",
+	"&::placeholder": { color: f.color.textMuted },
+	[t]: {
+		color: "CanvasText",
+		caretColor: "CanvasText",
+		backgroundColor: "Canvas"
+	}
+}), Ie = e({
+	position: "absolute",
+	inset: 0,
+	pointerEvents: "none",
+	overflow: "hidden",
+	border: "1px solid transparent",
+	borderRadius: f.radius.sm,
+	color: f.color.text,
+	backgroundColor: f.color.surface,
+	[t]: { visibility: "hidden" }
+}), Le = e({
+	color: f.color.accentText,
+	backgroundColor: f.color.accentSoft,
+	borderRadius: f.radius.sm
+}), Re = e({
+	minInlineSize: 0,
+	overflow: "auto",
+	transitionProperty: "opacity",
+	transitionDuration: f.motion.duration.base,
+	transitionTimingFunction: f.motion.easeStandard,
+	"@starting-style": { opacity: 0 },
+	opacity: 1,
+	[n]: { transitionDuration: "0s" }
+}), ze = e({
+	display: "grid",
+	minInlineSize: 0
+}), Be = e({
+	overflowWrap: "anywhere",
+	flexDirection: "column",
+	alignItems: "start",
+	[t]: { "&[aria-selected=\"true\"]": { outline: "2px solid Highlight" } }
+}), Ve = e({
+	color: f.color.textMuted,
+	fontSize: f.textSize.sm
+}), He = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: f.space[2]
+}), Ue = e({
+	padding: f.space[2],
+	color: f.color.textMuted,
+	fontSize: f.textSize.sm
+});
+function b({ ref: e, actionsRef: t, value: n, defaultValue: f = Se, onValueChange: Oe, open: b, defaultOpen: We = !1, onOpenChange: Ge, people: x, channels: S, onMentionAdd: Ke, onSubmit: qe, submitOnEnter: Je = !1, label: Ye, description: Xe, error: Ze, size: C = "md", minRows: Qe = 1, maxRows: $e = 8, maxSuggestions: et = 6, placement: tt = "auto", locale: w, messages: nt, renderSuggestion: rt, slotProps: T, className: it, sx: at, id: ot, dir: E, required: st, disabled: D, readOnly: O, onChange: ct, onInput: lt, onKeyDown: ut, onSelect: dt, onFocus: ft, onBlur: pt, onScroll: mt, onCompositionStart: ht, onCompositionEnd: gt, "aria-labelledby": _t, "aria-describedby": vt, "aria-invalid": yt, ...k }) {
+	let A = se(), j = ne({
+		id: ot,
+		description: Xe,
+		error: Ze,
+		"aria-describedby": vt,
+		"aria-invalid": yt
+	}), M = u(null), N = u(null), bt = u(null), [P = Se, xt, St] = r(n, f, Oe), F = u(P), Ct = u(P.text);
+	F.current = P;
+	let I = g(P), L = {
+		text: P.text,
+		mentions: I
+	}, [wt = !1, R] = r(b, We, Ge), [Tt, Et] = d(!1), [Dt, Ot] = d(!1), z = u(!1), [B, kt] = d(0), [At, jt] = d(0), [Mt, Nt] = d(""), V = u(!1), Pt = u(null), H = y(L, B, x !== void 0, S !== void 0), U = wt && Tt && !!H && !D && !O && !Dt, Ft = new Intl.NumberFormat(w), It = new Intl.PluralRules(w), W = {
+		...De,
+		results: (e) => Ee(e, Ft, It),
+		...nt
+	}, Lt = new Intl.Collator(w, {
+		sensitivity: "base",
+		usage: "search"
+	}), Rt = new Intl.Segmenter(w, { granularity: "grapheme" }), G = (H?.kind === "person" ? (x ?? []).map((e) => ({
+		...e,
+		kind: "person"
+	})) : (S ?? []).map((e) => ({
+		...e,
+		kind: "channel"
+	}))).filter((e) => !H?.query || Array.from(Rt.segment(e.name)).some(({ index: t }) => Lt.compare(e.name.slice(t, t + H.query.length), H.query) === 0)).sort((e, t) => Lt.compare(e.name, t.name)).slice(0, Ae(et, 6)), K = At !== null && G[At] ? At : G.length ? 0 : null, zt = u([]);
+	zt.current.length = G.length;
+	let q = _e({
+		open: U,
+		onOpenChange: R,
+		placement: tt === "top" ? "top-start" : "bottom-start",
+		middleware: U ? [
+			pe(we),
+			...tt === "auto" ? [fe({ padding: Te })] : [],
+			me({
+				padding: Te,
+				crossAxis: !0
+			}),
+			he({
+				padding: Te,
+				apply: ({ availableWidth: e, availableHeight: t, elements: n }) => {
+					let r = M.current?.clientWidth ?? e;
+					Object.assign(n.floating.style, {
+						maxWidth: `${Math.min(r, Math.max(0, e))}px`,
+						width: `${r}px`,
+						maxHeight: `${Math.max(0, t)}px`
+					});
+				}
+			})
+		] : [],
+		whileElementsMounted: de
+	}), Bt = ye(q.context, {
+		enabled: U,
+		listRef: zt,
+		activeIndex: K,
+		onNavigate: jt,
+		virtual: !0,
+		loop: !0,
+		focusItemOnOpen: !1
+	}), Vt = ge(q.context, {
+		enabled: U,
+		escapeKey: !1
+	}), { getReferenceProps: Ht, getFloatingProps: Ut, getItemProps: Wt } = ve([Bt, Vt]), J = Ht(), Gt = [_t, a(Ye) && `${A}-label`].filter(Boolean).join(" ") || void 0, Kt = be([
+		e,
+		M,
+		q.refs.setReference
+	]), Y = Ae(Qe, 1), qt = Math.max(Y, Ae($e, 8)), X = () => {
+		let e = M.current;
+		e && (kt(e.selectionStart === e.selectionEnd ? e.selectionStart : -1), N.current && (N.current.scrollTop = e.scrollTop, N.current.scrollLeft = e.scrollLeft), q.update());
+	}, Jt = (e, t) => {
+		if (_(F.current, e)) return !0;
+		xe(() => xt(e));
+		let n = _(F.current, e), r = M.current;
+		if (r) {
+			r.value !== F.current.text && (r.value = F.current.text);
+			let e = n ? t : Math.min(B < 0 ? r.selectionStart : B, F.current.text.length);
+			z.current || r.setSelectionRange(e, e), X();
+		}
+		return n;
+	}, Z = (e, t, n, r) => {
+		let i = M.current;
+		if (!i || D || O || _(F.current, r)) return;
+		let a = i.selectionStart;
+		V.current = !0, xe(() => xt(r));
+		let o = _(F.current, r);
+		if (o) {
+			i.setSelectionRange(e, t);
+			let a = !1;
+			try {
+				i.ownerDocument.activeElement === i && (a = i.ownerDocument.execCommand("insertText", !1, n));
+			} catch {}
+			(!a || i.value !== r.text) && i.setRangeText(n, e, t, "end");
+		}
+		V.current = !1, i.value !== F.current.text && (i.value = F.current.text);
+		let s = o ? e + n.length : Math.min(a, F.current.text.length);
+		i.setSelectionRange(s, s), X();
+	}, Yt = (e) => {
+		let t = M.current;
+		if (!t || D || O) return;
+		let n = t.selectionStart, r = t.selectionEnd;
+		Z(n, r, e, v(L, n, r, e));
+	}, Xt = (e) => {
+		if (!H || D || O || z.current) return;
+		let t = h(e.kind, e.name), n = t + (/^\s/u.test(P.text.slice(H.end)) ? "" : " "), r = {
+			kind: e.kind,
+			id: e.id,
+			label: e.name,
+			start: H.start,
+			end: H.start + t.length
+		}, i = v(L, H.start, H.end, n);
+		Z(H.start, H.end, n, {
+			text: i.text,
+			mentions: [...i.mentions, r].sort((e, t) => e.start - t.start)
+		}), Ke?.(r), Nt(W.added(r)), R(!1);
+	};
+	ce(t, () => ({
+		insert: Yt,
+		clear: () => {
+			D || O || (Z(0, P.text.length, "", Se), R(!1));
+		},
+		openSuggestions: (e) => {
+			D || O || !(e === "person" ? x : S) || (Yt(Ce[e]), R(!0));
+		}
+	})), l(() => {
+		I.length !== P.mentions.length && process.env.NODE_ENV !== "production" && console.warn(W.invalidValue);
+	}, [
+		P,
+		W.invalidValue,
+		I.length
+	]), l(() => {
+		let e = M.current;
+		if (!e) return;
+		let t = (t) => {
+			Pt.current = V.current ? null : {
+				value: F.current,
+				start: e.selectionStart,
+				end: e.selectionEnd,
+				inputType: t.inputType
+			};
+		};
+		return e.addEventListener("beforeinput", t), () => e.removeEventListener("beforeinput", t);
+	}, []), l(() => {
+		let e = M.current, t = N.current;
+		if (!e || !t) return;
+		let n = () => {
+			let n = e.ownerDocument.defaultView.getComputedStyle(e), r = parseFloat(n.lineHeight), i = parseFloat(n.paddingTop) + parseFloat(n.paddingBottom), a = parseFloat(n.borderTopWidth) + parseFloat(n.borderBottomWidth);
+			e.style.height = "0px", e.style.height = `${Math.min(Math.max(e.scrollHeight + a, Y * r + i + a), qt * r + i + a)}px`, t.style.width = `${e.clientWidth + a}px`, t.scrollTop = e.scrollTop, t.scrollLeft = e.scrollLeft, q.refs.setPositionReference({
+				contextElement: e,
+				getBoundingClientRect: () => bt.current?.getBoundingClientRect() ?? e.getBoundingClientRect()
+			});
+		};
+		n();
+		let r = new ResizeObserver(n);
+		r.observe(e);
+		let i = !0;
+		return e.ownerDocument.fonts?.ready.then(() => {
+			i && n();
+		}), () => {
+			i = !1, r.disconnect();
+		};
+	}, [
+		P.text,
+		B,
+		C,
+		Y,
+		qt,
+		q.refs
+	]), l(() => {
+		let e = M.current, t = e?.form;
+		if (!e || !t) return;
+		let n = (t) => {
+			queueMicrotask(() => {
+				t.defaultPrevented || (xe(() => St()), e.value !== F.current.text && (e.value = F.current.text), R(!1), kt(0));
+			});
+		};
+		return t.addEventListener("reset", n), () => t.removeEventListener("reset", n);
+	}, [
+		St,
+		R,
+		k.form
+	]);
+	let Zt = () => {
+		let e = M.current;
+		if (!e || z.current || V.current) return;
+		let t = e.selectionStart, n = e.selectionEnd;
+		for (let e of I) t === n && t > e.start && t < e.end ? t = n = t - e.start < e.end - t ? e.start : e.end : (t > e.start && t < e.end && (t = e.start), n > e.start && n < e.end && (n = e.end));
+		(t !== e.selectionStart || n !== e.selectionEnd) && e.setSelectionRange(t, n, e.selectionDirection), X();
+	}, Q = [], $ = 0;
+	l(() => {
+		let e = M.current;
+		if (!e) return;
+		if (!V.current && e.value !== P.text) {
+			let { selectionStart: t, selectionEnd: n, selectionDirection: r } = e;
+			e.value = P.text, e.setSelectionRange(Math.min(t, P.text.length), Math.min(n, P.text.length), r);
+		}
+		let t = () => Zt();
+		return e.addEventListener("select", t), () => e.removeEventListener("select", t);
+	});
+	let Qt = (e, t) => {
+		if (B >= t && B <= t + e.length) {
+			let n = B - t;
+			return /* @__PURE__ */ m(ue, { children: [
+				e.slice(0, n),
+				/* @__PURE__ */ p("span", {
+					ref: bt,
+					children: "​"
+				}),
+				e.slice(n)
+			] });
+		}
+		return e;
+	};
+	for (let e of I) Q.push(/* @__PURE__ */ p("span", { children: Qt(P.text.slice($, e.start), $) }, `text-${$}`)), Q.push(/* @__PURE__ */ p("span", {
+		"data-ui": "mention-input-token",
+		className: T?.token?.className,
+		css: [Le, T?.token?.css],
+		children: h(e.kind, e.label)
+	}, `${e.start}-${e.end}`)), $ = e.end;
+	return Q.push(/* @__PURE__ */ m("span", { children: [Qt(P.text.slice($), $), "\n​"] }, "tail")), /* @__PURE__ */ m(re, {
+		"data-ui": "mention-input",
+		dir: E,
+		className: it,
+		sx: at,
+		part: {
+			...T?.root,
+			css: [Me, T?.root?.css]
+		},
+		children: [
+			/* @__PURE__ */ p(ae, {
+				id: `${A}-label`,
+				htmlFor: j.id,
+				required: st,
+				part: T?.label,
+				children: Ye
+			}),
+			/* @__PURE__ */ m("div", {
+				role: "combobox",
+				"aria-label": k["aria-label"],
+				"aria-labelledby": Gt,
+				"aria-haspopup": "listbox",
+				"aria-expanded": U,
+				"aria-controls": U ? `${A}-list` : void 0,
+				className: T?.control?.className,
+				css: [Pe, T?.control?.css],
+				children: [/* @__PURE__ */ p("div", {
+					ref: N,
+					"aria-hidden": "true",
+					dir: E,
+					className: T?.mirror?.className,
+					css: [
+						je,
+						Ne[C],
+						Ie,
+						T?.mirror?.css
+					],
+					children: Q
+				}), /* @__PURE__ */ p("textarea", {
+					...J,
+					...k,
+					onKeyDown: (e) => {
+						if (ut?.(e), e.defaultPrevented || D || O || z.current || e.nativeEvent.isComposing || e.keyCode === 229) return;
+						let t = !e.ctrlKey && !e.metaKey && !e.altKey;
+						if (t && (e.key === "ArrowDown" || e.key === "ArrowUp") && typeof J.onKeyDown == "function" && J.onKeyDown(e), e.key === "Escape" && U) e.preventDefault(), R(!1);
+						else if (t && !e.shiftKey && U && K !== null && (e.key === "Enter" || e.key === "Tab")) {
+							e.preventDefault();
+							let t = G[K];
+							!e.repeat && t && Xt(t);
+						} else if (e.key === "Tab") R(!1);
+						else if (e.key === "Enter" && t && !e.shiftKey && Je) e.preventDefault(), !e.repeat && P.text.trim() && qe?.(P);
+						else if (t && !e.shiftKey && e.currentTarget.selectionStart === e.currentTarget.selectionEnd) {
+							let t = e.currentTarget.selectionStart, n = e.key === "Backspace" ? I.find((e) => e.end === t) : e.key === "Delete" ? I.find((e) => e.start === t) : void 0;
+							n && (e.preventDefault(), Z(n.start, n.end, "", v(L, n.start, n.end, "")), Nt(W.removed(n)));
+							let r = e.key === "ArrowLeft" ? I.find((e) => e.end === t) : e.key === "ArrowRight" ? I.find((e) => e.start === t) : void 0;
+							if (r) {
+								e.preventDefault();
+								let t = e.key === "ArrowLeft" ? r.start : r.end;
+								e.currentTarget.setSelectionRange(t, t), X();
+							}
+						}
+					},
+					ref: Kt,
+					id: j.id,
+					dir: E,
+					required: st,
+					disabled: D,
+					readOnly: O,
+					rows: Y,
+					defaultValue: Ct.current,
+					"aria-multiline": "true",
+					"aria-autocomplete": "list",
+					"aria-haspopup": "listbox",
+					"aria-controls": U ? `${A}-list` : void 0,
+					"aria-activedescendant": U && K !== null ? `${A}-option-${K}` : void 0,
+					"aria-labelledby": Gt,
+					"aria-describedby": j.describedBy,
+					"aria-invalid": j.ariaInvalid,
+					className: T?.input?.className,
+					css: [
+						te,
+						je,
+						Ne[C],
+						Fe,
+						T?.input?.css
+					],
+					onChange: ct,
+					onInput: (e) => {
+						lt?.(e);
+						let t = Pt.current;
+						if (Pt.current = null, V.current) return;
+						let n = e.currentTarget.selectionStart, r = ke(L, e.currentTarget.value, t);
+						Jt(r, n), z.current || (jt(0), y(r, n, x !== void 0, S !== void 0) && R(!0));
+					},
+					onSelect: (e) => {
+						dt?.(e), Zt();
+					},
+					onFocus: (e) => {
+						ft?.(e), Et(!0), X(), y(L, e.currentTarget.selectionStart, x !== void 0, S !== void 0) && R(!0);
+					},
+					onBlur: (e) => {
+						pt?.(e), Et(!1), R(!1);
+					},
+					onScroll: (e) => {
+						mt?.(e), X();
+					},
+					onCompositionStart: (e) => {
+						ht?.(e), z.current = !0, Ot(!0);
+					},
+					onCompositionEnd: (e) => {
+						gt?.(e), z.current = !1, Ot(!1), X(), y(F.current, e.currentTarget.selectionStart, x !== void 0, S !== void 0) && R(!0);
+					}
+				})]
+			}),
+			/* @__PURE__ */ p(oe, {
+				id: j.descriptionId,
+				part: T?.description,
+				children: Xe
+			}),
+			/* @__PURE__ */ p(ie, {
+				id: j.errorId,
+				part: T?.error,
+				children: Ze
+			}),
+			/* @__PURE__ */ p("span", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: T?.status?.className,
+				css: [i, T?.status?.css],
+				children: U && H ? G.length ? W.results(G.length, H.kind) : W.empty(H.kind, H.query) : Mt
+			}),
+			U && H && /* @__PURE__ */ p(ee, { children: /* @__PURE__ */ m("div", {
+				ref: q.refs.setFloating,
+				style: q.floatingStyles,
+				dir: E,
+				className: T?.panel?.className,
+				css: [
+					s,
+					Re,
+					T?.panel?.css
+				],
+				children: [/* @__PURE__ */ p("div", {
+					...Ut(),
+					role: "listbox",
+					id: `${A}-list`,
+					"aria-label": H.kind === "person" ? W.peopleLabel : W.channelsLabel,
+					className: T?.list?.className,
+					css: [ze, T?.list?.css],
+					children: G.map((e, t) => /* @__PURE__ */ le("div", {
+						...Wt({
+							onClick: () => Xt(e),
+							onMouseDown: (e) => e.preventDefault(),
+							onMouseMove: () => jt(t)
+						}),
+						key: `${e.kind}-${e.id}`,
+						ref: (e) => {
+							zt.current[t] = e;
+						},
+						id: `${A}-option-${t}`,
+						role: "option",
+						"aria-selected": K === t,
+						"data-active": K === t ? "" : void 0,
+						className: T?.option?.className,
+						css: [
+							o,
+							c,
+							Be,
+							T?.option?.css
+						]
+					}, rt ? rt(e, H.query) : /* @__PURE__ */ m(ue, { children: [/* @__PURE__ */ m("span", {
+						css: He,
+						children: [e.kind === "person" && a(e.avatar) && /* @__PURE__ */ p("span", {
+							"aria-hidden": "true",
+							children: e.avatar
+						}), e.name]
+					}), /* @__PURE__ */ p("span", {
+						css: Ve,
+						children: e.kind === "person" ? e.role : e.description ?? (e.members === void 0 ? null : Ft.format(e.members))
+					})] })))
+				}), !G.length && /* @__PURE__ */ p("div", {
+					className: T?.empty?.className,
+					css: [Ue, T?.empty?.css],
+					children: W.empty(H.kind, H.query)
+				})]
+			}) })
+		]
+	});
+}
+b.displayName = "MentionInput";
+//#endregion
+export { h as n, Oe as r, b as t };

package/dist/mention-input.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as MentionInput, n as mentionText, r as serializeMentions } from "./mention-input-sq61si9L.js";