@jfrader/ui 0.4.0 → 0.5.0

package/dist/json-viewer.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as JsonViewer } from "./json-viewer-BcySQfjZ.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-BcQKX2EJ.js

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