import { t as e } from "../../utils-B7XIe3qq.js";
import * as t from "react";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
//#region src/react/primitives/tag-input.tsx
function i({ tags: i = [], suggestions: a, maxTags: o, allowDuplicates: s = !1, placeholder: c = "Add tag...", delimiter: l = ",", className: u, onChange: d }) {
	let [f, p] = t.useState(i), [m, h] = t.useState(""), [g, _] = t.useState([]), [v, y] = t.useState(-1), [b, x] = t.useState(!1), [S, C] = t.useState(!1), w = t.useRef(null), T = t.useRef(null), E = t.useRef(null);
	t.useEffect(() => {
		p(i);
	}, [i]), t.useEffect(() => {
		function e(e) {
			T.current && !T.current.contains(e.target) && M();
		}
		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
	}, []), t.useEffect(() => () => {
		E.current && clearTimeout(E.current);
	}, []);
	let D = o !== void 0 && f.length >= o;
	function O(e) {
		p(e), d?.(e);
	}
	function k(e) {
		let t = e.trim();
		return t === "" || D || !s && f.includes(t) ? !1 : (O([...f, t]), !0);
	}
	function A(e) {
		O(f.filter((t) => t !== e));
	}
	function j() {
		f.length > 0 && O(f.slice(0, -1));
	}
	function M() {
		x(!1), y(-1);
	}
	function N() {
		x(!0);
	}
	function P(e) {
		if (!(!a || typeof a == "function")) return a.find((t) => t.value === e);
	}
	function F(e) {
		return s ? e : e.filter((e) => !f.includes(e.value));
	}
	async function I(e) {
		if (!a) {
			M();
			return;
		}
		if (typeof a == "function") {
			C(!0);
			try {
				let t = a(e), n = F(t instanceof Promise ? await t : t);
				_(n), n.length > 0 ? N() : M();
			} catch {
				M();
			} finally {
				C(!1);
			}
		} else {
			let t = e.toLowerCase(), n = F(a.filter((e) => (e.label ?? e.value).toLowerCase().includes(t)));
			_(n), n.length > 0 ? N() : M();
		}
	}
	function L(e) {
		let t = e.target.value;
		h(t);
		let n = t.trim();
		if (n === "" || !a) {
			M();
			return;
		}
		E.current && clearTimeout(E.current), E.current = setTimeout(() => {
			I(n);
		}, 150);
	}
	function R(e) {
		switch (e.key) {
			case "Enter":
				if (e.preventDefault(), b && v >= 0) {
					let e = g[v];
					e && (k(e.value), h(""), M());
				} else m.trim() !== "" && (k(m), h(""), M());
				break;
			case "Backspace":
				m === "" && f.length > 0 && j();
				break;
			case "Escape":
				b && (e.preventDefault(), M());
				break;
			case "ArrowDown":
				b && (e.preventDefault(), y((e) => e < g.length - 1 ? e + 1 : 0));
				break;
			case "ArrowUp":
				b && (e.preventDefault(), y((e) => e > 0 ? e - 1 : g.length - 1));
				break;
			default: e.key === l && m.trim() !== "" && (e.preventDefault(), k(m), h(""), M());
		}
	}
	function z(e) {
		let t = e.clipboardData?.getData("text");
		if (t && t.includes(l)) {
			e.preventDefault();
			let n = t.split(l);
			for (let e of n) k(e);
		}
	}
	function B(e) {
		k(e.value), h(""), M(), w.current?.focus();
	}
	return /* @__PURE__ */ r("div", {
		ref: T,
		"data-slot": "tag-input",
		className: e("relative w-full", u),
		children: [/* @__PURE__ */ r("div", {
			className: e("border-border-glass bg-glass flex min-h-[2.5rem] w-full flex-wrap items-center gap-1.5 rounded-xl border px-3 py-1.5 backdrop-blur-[20px]", "transition-all duration-[250ms]", "focus-within:border-primary focus-within:shadow-glow"),
			onClick: () => w.current?.focus(),
			children: [f.map((t, i) => {
				let a = P(t);
				return /* @__PURE__ */ r("span", {
					"data-tag": t,
					className: e("inline-flex items-center gap-1 rounded-lg px-2 py-0.5 text-[12px] font-medium", "bg-glass-hover text-foreground-secondary border border-border-glass", "transition-all duration-200"),
					style: a?.color ? {
						borderColor: a.color,
						color: a.color
					} : void 0,
					children: [/* @__PURE__ */ n("span", { children: a?.label ?? t }), /* @__PURE__ */ n("button", {
						type: "button",
						"aria-label": `Remove ${t}`,
						className: "ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-sm text-foreground-muted transition-colors hover:text-foreground",
						onClick: (e) => {
							e.stopPropagation(), A(t);
						},
						children: /* @__PURE__ */ n("svg", {
							width: "10",
							height: "10",
							viewBox: "0 0 12 12",
							fill: "none",
							children: /* @__PURE__ */ n("path", {
								d: "M9 3L3 9M3 3L9 9",
								stroke: "currentColor",
								strokeWidth: "1.5",
								strokeLinecap: "round"
							})
						})
					})]
				}, `${t}-${i}`);
			}), /* @__PURE__ */ n("input", {
				ref: w,
				type: "text",
				role: "combobox",
				"aria-expanded": b,
				"aria-autocomplete": "list",
				autoComplete: "off",
				placeholder: D ? "Max tags reached" : c,
				disabled: D,
				className: e("min-w-[80px] flex-1 border-none bg-transparent py-1 text-[13px] text-foreground outline-none", "placeholder:text-foreground-muted", "disabled:cursor-not-allowed disabled:opacity-50"),
				value: m,
				onChange: L,
				onKeyDown: R,
				onPaste: z,
				onFocus: () => {
					m.trim().length > 0 && a && I(m.trim());
				}
			})]
		}), b && /* @__PURE__ */ n("div", {
			role: "listbox",
			className: e("absolute left-0 z-50 mt-1 max-h-48 w-full overflow-y-auto rounded-xl border border-border-glass bg-glass shadow-lg backdrop-blur-[20px]", "animate-in fade-in-0 zoom-in-95 slide-in-from-top-1"),
			children: S ? /* @__PURE__ */ r("div", {
				className: "flex items-center gap-2 px-3 py-2 text-[12px] text-foreground-muted",
				children: [/* @__PURE__ */ n("svg", {
					className: "animate-spin",
					width: "14",
					height: "14",
					viewBox: "0 0 16 16",
					children: /* @__PURE__ */ n("circle", {
						cx: "8",
						cy: "8",
						r: "6",
						stroke: "currentColor",
						strokeWidth: "2",
						fill: "none",
						strokeDasharray: "30 10"
					})
				}), "Loading..."]
			}) : g.map((t, i) => /* @__PURE__ */ r("div", {
				role: "option",
				"aria-selected": i === v,
				className: e("flex cursor-pointer items-center gap-2 px-3 py-2 text-[13px] transition-colors", "text-foreground-secondary", i === v && "bg-glass-hover text-foreground", i !== v && "hover:bg-glass-hover hover:text-foreground"),
				onClick: () => B(t),
				onMouseEnter: () => y(i),
				children: [
					t.color && /* @__PURE__ */ n("span", {
						className: "h-2.5 w-2.5 shrink-0 rounded-full",
						style: { backgroundColor: t.color }
					}),
					/* @__PURE__ */ n("span", { children: t.label ?? t.value }),
					t.category && /* @__PURE__ */ n("span", {
						className: "ml-auto text-[11px] text-foreground-muted",
						children: t.category
					})
				]
			}, t.value))
		})]
	});
}
//#endregion
export { i as TagInput };

//# sourceMappingURL=tag-input.js.map