@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/mention-input/mention-input.js

@@ -0,0 +1,576 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { Avatar } from "../avatar/avatar.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/mention-input/mention-input.tsx
+const EMPTY = {
+	text: "",
+	mentions: []
+};
+const SYMBOL = {
+	person: "@",
+	channel: "#"
+};
+/** The list's width, in px: the same as `w-68`, which the list's class sets. */
+const POPOVER_WIDTH = 272;
+const mentionText = (kind, label) => `${SYMBOL[kind]}${label}`;
+/** Turns a value into storage-friendly text, `<@id>` for people and `<#id>` for channels by default. */
+function serializeMentions(value, format = (mention) => `<${SYMBOL[mention.kind]}${mention.id}>`) {
+	let out = "";
+	let at = 0;
+	for (const mention of [...value.mentions].sort((a, b) => a.start - b.start)) {
+		out += value.text.slice(at, mention.start) + format(mention);
+		at = mention.end;
+	}
+	return out + value.text.slice(at);
+}
+/** Moves mentions along with an edit and drops any the edit touched. `hint` is the caret before the edit, which settles repeated characters. */
+function reconcile(previous, text, hint) {
+	const a = previous.text;
+	let prefix = 0;
+	const maxPrefix = Math.min(a.length, text.length, Math.max(0, hint));
+	while (prefix < maxPrefix && a[prefix] === text[prefix]) prefix++;
+	let suffix = 0;
+	while (suffix < a.length - prefix && suffix < text.length - prefix && a[a.length - 1 - suffix] === text[text.length - 1 - suffix]) suffix++;
+	const oldEnd = a.length - suffix;
+	const delta = text.length - a.length;
+	return previous.mentions.flatMap((mention) => {
+		if (mention.end <= prefix) return [mention];
+		if (mention.start >= oldEnd) return [{
+			...mention,
+			start: mention.start + delta,
+			end: mention.end + delta
+		}];
+		return [];
+	}).filter((mention) => text.slice(mention.start, mention.end) === mentionText(mention.kind, mention.label));
+}
+function findTrigger(text, caret, mentions, kinds) {
+	for (let index = caret - 1; index >= 0 && index >= caret - 48; index--) {
+		const char = text[index];
+		if (char === "\n") return null;
+		if (char !== "@" && char !== "#") continue;
+		const kind = char === "@" ? "person" : "channel";
+		if (!kinds[kind]) return null;
+		if (index > 0 && !/[\s([{"']/.test(text[index - 1])) return null;
+		if (mentions.some((mention) => index >= mention.start && index < mention.end)) return null;
+		const query = text.slice(index + 1, caret);
+		return (kind === "person" ? /^[^\s@#]*( [^\s@#]*)?$/ : /^[^\s@#]*$/).test(query) ? {
+			kind,
+			start: index,
+			query
+		} : null;
+	}
+	return null;
+}
+function rank(label, extra, query) {
+	const name = label.toLowerCase();
+	if (!query) return 1;
+	if (name.startsWith(query)) return 4;
+	if (name.split(/[\s\-_.]+/).some((word) => word.startsWith(query))) return 3;
+	if (name.includes(query)) return 2;
+	return extra.toLowerCase().includes(query) ? 1 : 0;
+}
+function initials(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("");
+}
+/** The matched part of a label reads in full contrast; the rest stays quiet. */
+function Highlight({ text, query }) {
+	const at = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;
+	if (at < 0) return /* @__PURE__ */ jsx(Fragment$1, { children: text });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		text.slice(0, at),
+		/* @__PURE__ */ jsx("mark", {
+			className: "bg-transparent text-foreground",
+			children: text.slice(at, at + query.length)
+		}),
+		text.slice(at + query.length)
+	] });
+}
+/** The textarea and the mirror share these, so every character of one sits under the same character of the other. */
+const textMetrics = "box-border m-0 w-full border-0 px-3.5 py-2.25 font-sans text-base leading-6 break-words whitespace-pre-wrap [tab-size:4]";
+const shellClass = cnAll(fieldSurfaceVariants(), "relative overflow-hidden", "[&:where(:hover:not([data-disabled]))]:border-border-strong", "has-[textarea:focus]:not-data-[invalid]:border-foreground", "forced-colors:has-[textarea:focus]:outline-solid forced-colors:has-[textarea:focus]:outline-(length:--focus-ring-width) forced-colors:has-[textarea:focus]:outline-offset-(--focus-ring-offset)", "data-[ready]:motion-safe:transition-[height,border-color,background-color] data-[ready]:motion-safe:duration-(--duration-smooth) data-[ready]:motion-safe:ease-smooth");
+const popoverClass = cnAll("absolute z-30 w-68 max-w-full overflow-hidden", "rounded-panel border-(length:--border-width) border-border bg-card p-1 text-card-foreground shadow-floating", "box-border font-sans text-sm leading-(--leading-normal)", "[--menu-x:0px] [--menu-y:-6px] origin-top-left", "data-[above]:[--menu-y:6px] data-[above]:origin-bottom-left data-[above]:-translate-y-full", "motion-safe:animate-select-popover-in motion-reduce:animate-select-fade-in", "data-[leaving]:pointer-events-none data-[leaving]:motion-safe:animate-select-popover-out data-[leaving]:motion-reduce:animate-select-fade-out");
+const MentionInput = forwardRef(function MentionInput({ label, labelHidden = false, value: valueProp, defaultValue, onValueChange, people, channels, onMentionAdd, onSubmit, submitOnEnter = false, placeholder, minRows = 1, maxRows = 8, placement = "auto", maxSuggestions = 6, description, error, disabled, name, id, className }, ref) {
+	const uid = useId();
+	const listId = `${uid}-list`;
+	const [inner, setInner] = useState(defaultValue ?? EMPTY);
+	const value = valueProp ?? inner;
+	const live = useRef(value);
+	useIsomorphicLayoutEffect(() => {
+		live.current = value;
+	});
+	const rootRef = useRef(null);
+	const fieldRef = useRef(null);
+	const areaRef = useRef(null);
+	const backdropRef = useRef(null);
+	const lastCaret = useRef(0);
+	const pending = useRef(null);
+	const [caret, setCaret] = useState(null);
+	const [focused, setFocused] = useState(false);
+	const [dismissed, setDismissed] = useState(null);
+	const [active, setActive] = useState(0);
+	const commit = useCallback((next) => {
+		if (valueProp === void 0) setInner(next);
+		onValueChange?.(next);
+	}, [onValueChange, valueProp]);
+	const kinds = useMemo(() => ({
+		person: Boolean(people?.length),
+		channel: Boolean(channels?.length)
+	}), [channels, people]);
+	const trigger = useMemo(() => caret === null ? null : findTrigger(value.text, caret, value.mentions, kinds), [
+		caret,
+		kinds,
+		value.mentions,
+		value.text
+	]);
+	const suggestions = useMemo(() => {
+		if (!trigger) return [];
+		const query = trigger.query.toLowerCase().trim();
+		return (trigger.kind === "person" ? (people ?? []).map((item) => ({
+			entry: {
+				kind: "person",
+				item
+			},
+			score: rank(item.name, item.role ?? "", query)
+		})) : (channels ?? []).map((item) => ({
+			entry: {
+				kind: "channel",
+				item
+			},
+			score: rank(item.name, item.description ?? "", query)
+		}))).filter((entry) => entry.score > 0).sort((a, b) => b.score - a.score).slice(0, maxSuggestions).map((entry) => entry.entry);
+	}, [
+		channels,
+		maxSuggestions,
+		people,
+		trigger
+	]);
+	const open = focused && !disabled && Boolean(trigger) && trigger?.start !== dismissed && (suggestions.length > 0 || !trigger?.query.includes(" "));
+	const activeIndex = Math.min(active, Math.max(0, suggestions.length - 1));
+	const queryKey = trigger ? `${trigger.start}:${trigger.query}` : "";
+	const [lastQueryKey, setLastQueryKey] = useState(queryKey);
+	if (lastQueryKey !== queryKey) {
+		setLastQueryKey(queryKey);
+		setActive(0);
+	}
+	if (dismissed !== null && trigger?.start !== dismissed) setDismissed(null);
+	const onSelect = () => {
+		const area = areaRef.current;
+		if (!area) return;
+		let start = area.selectionStart;
+		let end = area.selectionEnd;
+		const collapsed = start === end;
+		for (const mention of live.current.mentions) if (collapsed && start > mention.start && start < mention.end) {
+			const stepped = Math.abs(start - lastCaret.current) === 1;
+			const forward = start > lastCaret.current;
+			start = end = stepped ? forward ? mention.end : mention.start : start - mention.start < mention.end - start ? mention.start : mention.end;
+		} else if (!collapsed) {
+			if (start > mention.start && start < mention.end) start = mention.start;
+			if (end > mention.start && end < mention.end) end = mention.end;
+		}
+		if (start !== area.selectionStart || end !== area.selectionEnd) area.setSelectionRange(start, end, area.selectionDirection);
+		lastCaret.current = area.selectionStart;
+		setCaret(collapsed ? start : null);
+	};
+	const onInput = (event) => {
+		const text = event.target.value;
+		const mentions = reconcile(live.current, text, lastCaret.current);
+		const added = pending.current;
+		pending.current = null;
+		if (added && text.slice(added.start, added.end) === mentionText(added.kind, added.label)) {
+			mentions.push(added);
+			mentions.sort((a, b) => a.start - b.start);
+		}
+		const next = {
+			text,
+			mentions
+		};
+		live.current = next;
+		commit(next);
+		if (added) onMentionAdd?.(added);
+		lastCaret.current = event.target.selectionStart;
+		setCaret(event.target.selectionStart === event.target.selectionEnd ? event.target.selectionStart : null);
+	};
+	/** Types through the browser so the change joins the native undo stack; falls back to a direct edit. */
+	const typeText = useCallback((text, from, to) => {
+		const area = areaRef.current;
+		if (!area) return;
+		area.focus({ preventScroll: true });
+		if (from !== void 0) area.setSelectionRange(from, to ?? from);
+		lastCaret.current = area.selectionStart;
+		if (typeof document.execCommand === "function" && document.execCommand("insertText", false, text)) return;
+		const start = area.selectionStart;
+		const end = area.selectionEnd;
+		const current = live.current;
+		const nextText = current.text.slice(0, start) + text + current.text.slice(end);
+		const mentions = reconcile(current, nextText, start);
+		const added = pending.current;
+		pending.current = null;
+		if (added) mentions.push(added);
+		mentions.sort((a, b) => a.start - b.start);
+		const next = {
+			text: nextText,
+			mentions
+		};
+		live.current = next;
+		commit(next);
+		if (added) onMentionAdd?.(added);
+		requestAnimationFrame(() => {
+			area.setSelectionRange(start + text.length, start + text.length);
+			setCaret(start + text.length);
+		});
+	}, [commit, onMentionAdd]);
+	const choose = (suggestion) => {
+		if (!suggestion || !trigger || caret === null) return;
+		const label = suggestion.item.name;
+		const token = mentionText(suggestion.kind, label);
+		pending.current = {
+			kind: suggestion.kind,
+			id: suggestion.item.id,
+			label,
+			start: trigger.start,
+			end: trigger.start + token.length
+		};
+		const after = value.text[caret];
+		typeText(after === void 0 || !/\s/.test(after) ? `${token} ` : token, trigger.start, caret);
+	};
+	const onKeyDown = (event) => {
+		const area = event.currentTarget;
+		lastCaret.current = area.selectionStart;
+		if (open) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				if (suggestions.length) setActive((activeIndex + (event.key === "ArrowDown" ? 1 : -1) + suggestions.length) % suggestions.length);
+				return;
+			}
+			if ((event.key === "Enter" || event.key === "Tab") && suggestions.length && !event.shiftKey) {
+				event.preventDefault();
+				choose(suggestions[activeIndex]);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				setDismissed(trigger?.start ?? null);
+				return;
+			}
+		}
+		const start = area.selectionStart;
+		if (start === area.selectionEnd && !event.metaKey && (event.key === "Backspace" || event.key === "Delete")) {
+			const hit = live.current.mentions.find((mention) => event.key === "Backspace" ? start > mention.start && start <= mention.end : start >= mention.start && start < mention.end);
+			if (hit) area.setSelectionRange(hit.start, hit.end);
+			return;
+		}
+		if (event.key === "Enter" && submitOnEnter && !event.shiftKey && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			if (live.current.text.trim()) onSubmit?.(live.current);
+		}
+	};
+	useImperativeHandle(ref, () => ({
+		focus: () => areaRef.current?.focus(),
+		insert: (text) => typeText(text),
+		openSuggestions: (kind) => {
+			const area = areaRef.current;
+			if (!area) return;
+			const focusedNow = document.activeElement === area;
+			const at = focusedNow ? area.selectionStart : live.current.text.length;
+			const before = live.current.text[at - 1];
+			setDismissed(null);
+			typeText(`${before && !/\s/.test(before) ? " " : ""}${SYMBOL[kind]}`, at, focusedNow ? area.selectionEnd : at);
+		},
+		clear: () => {
+			commit(EMPTY);
+			live.current = EMPTY;
+			setCaret(0);
+		},
+		get textarea() {
+			return areaRef.current;
+		}
+	}), [commit, typeText]);
+	useIsomorphicLayoutEffect(() => {
+		const backdrop = backdropRef.current;
+		const field = fieldRef.current;
+		if (!backdrop || !field) return;
+		const fit = () => {
+			const style = getComputedStyle(backdrop);
+			const line = parseFloat(style.lineHeight) || 24;
+			const pad = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+			const border = parseFloat(getComputedStyle(field).borderTopWidth) * 2;
+			const min = line * minRows + pad;
+			const max = line * Math.max(minRows, maxRows) + pad;
+			field.style.height = `${Math.min(max, Math.max(min, backdrop.offsetHeight)) + border}px`;
+			if (!field.hasAttribute("data-ready")) requestAnimationFrame(() => field.setAttribute("data-ready", ""));
+		};
+		fit();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(fit);
+		observer.observe(backdrop);
+		return () => observer.disconnect();
+	}, [maxRows, minRows]);
+	const [anchor, setAnchor] = useState(null);
+	const measureAnchor = useCallback(() => {
+		const marker = backdropRef.current?.querySelector("[data-anchor]");
+		const root = rootRef.current;
+		const field = fieldRef.current;
+		const area = areaRef.current;
+		if (!marker || !root || !field || !area) {
+			setAnchor(null);
+			return;
+		}
+		const line = parseFloat(getComputedStyle(marker.parentElement ?? marker).lineHeight) || 24;
+		const x = Math.max(0, Math.min(field.offsetLeft + marker.offsetLeft - 10, root.offsetWidth - POPOVER_WIDTH));
+		const top = field.offsetTop + marker.offsetTop - area.scrollTop;
+		const box = root.getBoundingClientRect();
+		const roomBelow = window.innerHeight - (box.top + top + line);
+		const above = placement === "top" || placement === "auto" && roomBelow < 300 && box.top + top > roomBelow;
+		const y = above ? top - 6 : top + line + 6;
+		setAnchor((current) => current && current.x === x && current.y === y && current.above === above ? current : {
+			x,
+			y,
+			above
+		});
+	}, [placement]);
+	useIsomorphicLayoutEffect(() => {
+		if (open) measureAnchor();
+	}, [
+		measureAnchor,
+		open,
+		trigger?.start,
+		value.text
+	]);
+	const shown = open && Boolean(anchor);
+	const onScroll = (event) => {
+		const backdrop = backdropRef.current;
+		if (backdrop) backdrop.style.transform = `translateY(${-event.currentTarget.scrollTop}px)`;
+		measureAnchor();
+	};
+	const current = shown && anchor ? {
+		suggestions,
+		trigger,
+		anchor,
+		activeIndex
+	} : null;
+	const [frozen, setFrozen] = useState(current);
+	if (current && (frozen?.suggestions !== current.suggestions || frozen.trigger !== current.trigger || frozen.anchor !== current.anchor || frozen.activeIndex !== current.activeIndex)) setFrozen(current);
+	const view = current ?? frozen;
+	const [rendered, setRendered] = useState(shown);
+	const leaving = rendered && !shown;
+	if (shown && !rendered) setRendered(true);
+	const unmount = useCallback(() => setRendered(false), []);
+	useExitBackstop(leaving, unmount);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) unmount();
+	}, [leaving, unmount]);
+	const listRef = useRef(null);
+	const highlightRef = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const row = listRef.current?.querySelector(`[data-index="${view?.activeIndex ?? 0}"]`);
+		const highlight = highlightRef.current;
+		if (!row || !highlight || !shown) return;
+		highlight.style.height = `${row.offsetHeight}px`;
+		highlight.style.transform = `translateY(${row.offsetTop}px)`;
+		if (!highlight.hasAttribute("data-ready")) requestAnimationFrame(() => highlight.setAttribute("data-ready", ""));
+	}, [
+		shown,
+		view?.activeIndex,
+		view?.suggestions
+	]);
+	const mirror = useMemo(() => {
+		const parts = [];
+		const markAt = open && trigger ? trigger.start : -1;
+		let at = 0;
+		const pushText = (from, to) => {
+			if (markAt >= from && markAt < to) parts.push(value.text.slice(from, markAt), /* @__PURE__ */ jsx("span", { "data-anchor": "" }, "anchor"), value.text.slice(markAt, to));
+			else parts.push(value.text.slice(from, to));
+		};
+		for (const mention of value.mentions) {
+			pushText(at, mention.start);
+			parts.push(/* @__PURE__ */ jsx("span", {
+				"data-slot": "mention-token",
+				"data-kind": mention.kind,
+				className: "box-decoration-clone rounded-2xs bg-border-subtle py-px text-foreground",
+				children: value.text.slice(mention.start, mention.end)
+			}, `${mention.start}-${mention.id}`));
+			at = mention.end;
+		}
+		pushText(at, value.text.length);
+		return parts;
+	}, [
+		open,
+		trigger,
+		value.mentions,
+		value.text
+	]);
+	const field = useFieldWiring({
+		enabled: true,
+		id,
+		describedBy: void 0,
+		invalid: void 0,
+		description,
+		error
+	});
+	const optionId = (index) => `${uid}-option-${index}`;
+	const noun = trigger?.kind === "person" ? ["person", "people"] : ["channel", "channels"];
+	const countLabel = open ? suggestions.length ? `${suggestions.length} ${suggestions.length === 1 ? noun[0] : noun[1]}` : "No matches" : "";
+	const control = /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: "relative",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: fieldRef,
+				"data-slot": "mention-input-field",
+				"data-disabled": disabled || void 0,
+				"data-invalid": error ? "" : void 0,
+				"data-focused": focused || void 0,
+				className: shellClass,
+				children: [/* @__PURE__ */ jsxs("div", {
+					ref: backdropRef,
+					"aria-hidden": "true",
+					"data-slot": "mention-input-mirror",
+					className: cn(textMetrics, "pointer-events-none absolute top-0 left-0 text-foreground will-change-transform"),
+					children: [mirror, "​"]
+				}), /* @__PURE__ */ jsx("textarea", {
+					ref: areaRef,
+					...field.controlProps,
+					name,
+					"data-slot": "mention-input",
+					value: value.text,
+					placeholder,
+					disabled,
+					rows: minRows,
+					spellCheck: true,
+					"aria-label": labelHidden ? label : void 0,
+					"aria-autocomplete": "list",
+					"aria-controls": open ? listId : void 0,
+					"aria-activedescendant": open && suggestions.length ? optionId(activeIndex) : void 0,
+					onChange: onInput,
+					onSelect,
+					onKeyDown,
+					onScroll,
+					onFocus: () => setFocused(true),
+					onBlur: () => {
+						setFocused(false);
+						setCaret(null);
+					},
+					className: cn(textMetrics, "absolute inset-0 block h-full resize-none overflow-y-auto bg-transparent text-transparent caret-foreground outline-none [scrollbar-width:none] placeholder:text-muted-foreground selection:bg-primary/25 selection:text-transparent disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden")
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				children: countLabel
+			}),
+			rendered && view ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "mention-input-popover",
+				"data-above": view.anchor.above || void 0,
+				"data-leaving": leaving || void 0,
+				style: {
+					left: view.anchor.x,
+					top: view.anchor.y
+				},
+				onMouseDown: (event) => event.preventDefault(),
+				onAnimationEnd: (event) => {
+					if (leaving && event.target === event.currentTarget) unmount();
+				},
+				className: popoverClass,
+				children: view.suggestions.length ? /* @__PURE__ */ jsxs("ul", {
+					ref: listRef,
+					id: listId,
+					role: "listbox",
+					"aria-label": view.trigger?.kind === "person" ? "People" : "Channels",
+					className: "relative m-0 grid list-none p-0",
+					children: [/* @__PURE__ */ jsx("li", {
+						ref: highlightRef,
+						"aria-hidden": "true",
+						"data-slot": "mention-input-highlight",
+						className: "pointer-events-none absolute inset-x-0 top-0 rounded-control bg-muted data-[ready]:motion-safe:transition-[transform,height] data-[ready]:motion-safe:duration-(--duration-quick) data-[ready]:motion-safe:ease-settle"
+					}), view.suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs("li", {
+						id: optionId(index),
+						role: "option",
+						"aria-selected": index === view.activeIndex,
+						"data-index": index,
+						"data-slot": "mention-input-option",
+						className: "group/option relative flex min-w-0 cursor-pointer items-center gap-2.5 rounded-control py-1.5 ps-2 pe-2.5",
+						onPointerMove: () => {
+							if (index !== activeIndex) setActive(index);
+						},
+						onClick: () => choose(suggestion),
+						children: [
+							suggestion.kind === "person" ? /* @__PURE__ */ jsx(Avatar, {
+								size: "md",
+								alt: "",
+								src: suggestion.item.avatar,
+								fallback: initials(suggestion.item.name),
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "grid size-8 flex-none place-items-center text-text-secondary",
+								children: /* @__PURE__ */ jsx("svg", {
+									viewBox: "0 0 16 16",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "1.75",
+									strokeLinecap: "round",
+									className: "size-4",
+									children: /* @__PURE__ */ jsx("path", { d: "M6.5 2.5 5 13.5M11 2.5 9.5 13.5M2.5 6h11M2.5 10h11" })
+								})
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "grid min-w-0 flex-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate font-medium text-text-secondary group-aria-selected/option:text-foreground",
+									children: /* @__PURE__ */ jsx(Highlight, {
+										text: suggestion.item.name,
+										query: view.trigger?.query.trim() ?? ""
+									})
+								}), suggestion.kind === "person" ? suggestion.item.role && /* @__PURE__ */ jsx("span", {
+									className: "truncate text-xs text-muted-foreground",
+									children: suggestion.item.role
+								}) : suggestion.item.description && /* @__PURE__ */ jsx("span", {
+									className: "truncate text-xs text-muted-foreground",
+									children: suggestion.item.description
+								})]
+							}),
+							suggestion.kind === "channel" && suggestion.item.members !== void 0 ? /* @__PURE__ */ jsx("span", {
+								className: "flex-none text-xs tabular-nums text-muted-foreground",
+								children: suggestion.item.members
+							}) : null
+						]
+					}, `${suggestion.kind}-${suggestion.item.id}`))]
+				}) : /* @__PURE__ */ jsxs("p", {
+					className: "m-0 px-2.5 py-2.5 text-sm text-text-secondary",
+					children: [
+						"No ",
+						view.trigger?.kind === "person" ? "people" : "channels",
+						" match “",
+						view.trigger?.query,
+						"”"
+					]
+				})
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full min-w-0 font-sans", className),
+		"data-slot": "mention-input-root",
+		children: /* @__PURE__ */ jsx(FieldShell, {
+			label: labelHidden ? null : label,
+			controlId: field.controlId,
+			description,
+			hintId: field.hintId,
+			error,
+			errorId: field.errorId,
+			children: control
+		})
+	});
+});
+MentionInput.displayName = "MentionInput";
+//#endregion
+export { MentionInput, mentionText, serializeMentions };
+
+//# sourceMappingURL=mention-input.js.map