tembro 2.0.4 → 2.0.5

package/dist/components/inputs/async-select.js

@@ -3,8 +3,8 @@ import { Button as n } from "../ui/button/index.js";
 import { Input as r } from "../ui/input/index.js";
 import { Popover as i, PopoverContent as ee, PopoverTrigger as te } from "../ui/popover/index.js";
 import * as a from "react";
-import { CheckIcon as ne, ChevronsUpDownIcon as re, Loader2Icon as ie, PlusIcon as o, SearchIcon as ae, XIcon as oe } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { CheckIcon as o, ChevronsUpDownIcon as ne, Loader2Icon as re, PlusIcon as ie, SearchIcon as ae, XIcon as oe } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/inputs/async-select.tsx
 function se(e, t) {
 	let [n, r] = a.useState(e);
@@ -20,25 +20,25 @@ function se(e, t) {
 function ce(e) {
 	return typeof e == "object" && !!e && "options" in e;
 }
-function l(e) {
+function le(e) {
 	if (!e || e.length === 0) return [];
 	let t = e[0];
 	return ce(t) ? e : [{ options: e }];
 }
-function u(e) {
+function ue(e) {
 	return e.flatMap((e) => e.options);
 }
-function d(e) {
+function u(e) {
 	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label).toLowerCase() : e.value.toLowerCase();
 }
-function le(e, t) {
+function de(e, t) {
 	let n = e.trim().toLowerCase();
-	return n ? !t.some((e) => e.value.toLowerCase() === n || d(e) === n) : !1;
+	return n ? !t.some((e) => e.value.toLowerCase() === n || u(e) === n) : !1;
 }
-function ue(e, t, n, r, i) {
+function fe(e, t, n, r, i) {
 	if (e) return t?.value === e ? t : i?.value === e ? i : [...n, ...r].find((t) => t.value === e);
 }
-function f(...e) {
+function d(...e) {
 	let t = /* @__PURE__ */ new Map();
 	return e.forEach((e) => {
 		e?.forEach((e) => {
@@ -46,11 +46,11 @@ function f(...e) {
 		});
 	}), Array.from(t.values());
 }
-function p(e, t) {
+function f(e, t) {
 	let n = new Map(t.map((e) => [e.value, e]));
 	return e.map((e) => n.get(e)).filter((e) => !!e);
 }
-function de(e, t, n) {
+function pe(e, t, n) {
 	let r = e.get(t);
 	if (r) {
 		if (Number.isFinite(n) && Date.now() - r.createdAt > n) {
@@ -60,27 +60,27 @@ function de(e, t, n) {
 		return r.groups;
 	}
 }
-function fe(e, t, n) {
+function me(e, t, n) {
 	e.set(t, {
 		groups: n,
 		createdAt: Date.now()
 	});
 }
-function pe(e) {
+function he(e) {
 	return e.trim().toLowerCase();
 }
-function m({ className: t, children: n }) {
-	return /* @__PURE__ */ s("div", {
+function p({ className: t, children: n }) {
+	return /* @__PURE__ */ c("div", {
 		"data-slot": "async-select-state",
 		className: e("rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-3 text-sm leading-5 text-muted-foreground", t),
 		children: n
 	});
 }
-function me(e) {
+function ge(e) {
 	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value;
 }
-function he({ option: t, selected: n, renderOption: r, optionClassName: i, onSelect: ee }) {
-	return /* @__PURE__ */ c("button", {
+function _e({ option: t, selected: n, renderOption: r, optionClassName: i, onSelect: ee }) {
+	return /* @__PURE__ */ l("button", {
 		type: "button",
 		disabled: t.disabled,
 		"data-slot": "async-select-option",
@@ -88,23 +88,23 @@ function he({ option: t, selected: n, renderOption: r, optionClassName: i, onSel
 		"data-disabled": t.disabled || void 0,
 		className: e("flex w-full items-start gap-2.5 rounded-[var(--radius-md)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] hover:border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_93%)] focus-visible:border-[color:var(--aui-focus-ring,var(--ring))] focus-visible:shadow-[0_0_0_3px_var(--aui-focus-ring-soft,transparent)] data-[selected=true]:border-[color:color-mix(in_oklch,var(--primary),transparent_68%)] data-[selected=true]:bg-[color:color-mix(in_oklch,var(--primary),transparent_89%)] data-[selected=true]:text-foreground disabled:pointer-events-none disabled:opacity-50", i),
 		onClick: () => ee(t),
-		children: [/* @__PURE__ */ s("span", {
+		children: [/* @__PURE__ */ c("span", {
 			className: e("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border border-border/70", n && "border-primary bg-primary text-primary-foreground"),
-			children: n && /* @__PURE__ */ s(ne, { className: "size-3" })
-		}), /* @__PURE__ */ s("span", {
+			children: n && /* @__PURE__ */ c(o, { className: "size-3" })
+		}), /* @__PURE__ */ c("span", {
 			className: "min-w-0 flex-1",
-			children: r?.(t, { selected: n }) ?? /* @__PURE__ */ c("span", {
+			children: r?.(t, { selected: n }) ?? /* @__PURE__ */ l("span", {
 				className: "flex min-w-0 flex-col",
 				children: [
-					/* @__PURE__ */ s("span", {
+					/* @__PURE__ */ c("span", {
 						className: "truncate font-medium",
 						children: t.label
 					}),
-					t.description && /* @__PURE__ */ s("span", {
+					t.description && /* @__PURE__ */ c("span", {
 						className: "truncate text-xs text-muted-foreground",
 						children: t.description
 					}),
-					t.disabled && t.disabledReason && /* @__PURE__ */ s("span", {
+					t.disabled && t.disabledReason && /* @__PURE__ */ c("span", {
 						className: "truncate text-xs text-muted-foreground",
 						children: t.disabledReason
 					})
@@ -113,71 +113,75 @@ function he({ option: t, selected: n, renderOption: r, optionClassName: i, onSel
 		})]
 	});
 }
-function ge({ search: e, isCreating: t, label: n, onCreate: r }) {
-	return /* @__PURE__ */ c("button", {
+function ve({ search: e, isCreating: t, label: n, onCreate: r }) {
+	return /* @__PURE__ */ l("button", {
 		type: "button",
 		disabled: t,
 		"data-slot": "async-select-create",
 		className: "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-[color:color-mix(in_oklch,var(--primary),transparent_55%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_94%)] px-3 py-2.5 text-left text-sm font-medium text-foreground outline-none transition-[background-color,border-color,color,box-shadow] hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)] disabled:pointer-events-none disabled:opacity-50",
 		onClick: r,
-		children: [/* @__PURE__ */ s("span", {
+		children: [/* @__PURE__ */ c("span", {
 			className: "flex size-4 shrink-0 items-center justify-center",
-			children: t ? /* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }) : /* @__PURE__ */ s(o, { className: "size-4" })
-		}), /* @__PURE__ */ s("span", {
+			children: t ? /* @__PURE__ */ c(re, { className: "size-4 animate-spin" }) : /* @__PURE__ */ c(ie, { className: "size-4" })
+		}), /* @__PURE__ */ c("span", {
 			className: "min-w-0 flex-1 truncate",
 			children: n?.(e) ?? `Create "${e.trim()}"`
 		})]
 	});
 }
-function h({ className: ne, value: o, selectedOption: ce, onValueChange: d, loadOptions: f, loadSelectedOption: p, defaultOptions: me, disabled: h = !1, clearable: _e = !0, cacheOptions: g = !0, cacheTtl: ve = Infinity, debounceMs: _ = 250, minSearchLength: v = 0, labels: y, renderOption: ye, renderValue: b, renderLoading: x, renderEmpty: be, renderError: S, renderMinSearch: xe, onCreateOption: C, createOptionLabel: Se, showCreateOption: Ce, triggerClassName: we, contentClassName: Te, searchClassName: Ee, optionClassName: De, invalid: w, ...Oe }) {
-	let T = a.useMemo(() => l(me), [me]), ke = a.useMemo(() => u(T), [T]), [E, D] = a.useState(!1), [O, k] = a.useState(""), [A, j] = a.useState(T), [M, Ae] = a.useState(null), [N, P] = a.useState(!1), [F, I] = a.useState(!1), [L, R] = a.useState(!1), z = a.useRef(/* @__PURE__ */ new Map()), B = a.useRef(0), je = a.useRef(0), V = se(O, _).trim(), H = a.useMemo(() => u(A), [A]), U = a.useMemo(() => ({
-		search: O,
+function m(o) {
+	if ("isMulti" in o && o.isMulti) {
+		let e = { ...o };
+		return delete e.isMulti, /* @__PURE__ */ c(ye, { ...e });
+	}
+	let { className: ie, value: s, selectedOption: ce, onValueChange: u, loadOptions: d, loadSelectedOption: f, defaultOptions: ge, disabled: m = !1, clearable: h = !0, cacheOptions: g = !0, cacheTtl: _ = Infinity, debounceMs: be = 250, minSearchLength: v = 0, labels: y, renderOption: b, renderValue: x, renderLoading: xe, renderEmpty: Se, renderError: S, renderMinSearch: Ce, onCreateOption: we, createOptionLabel: Te, showCreateOption: Ee, showSelectedDescription: De = !0, triggerClassName: Oe, contentClassName: ke, searchClassName: Ae, optionClassName: C, invalid: je, ...Me } = o, w = a.useMemo(() => le(ge), [ge]), Ne = a.useMemo(() => ue(w), [w]), [T, E] = a.useState(!1), [D, O] = a.useState(""), [Pe, k] = a.useState(w), [A, Fe] = a.useState(null), [j, M] = a.useState(!1), [N, P] = a.useState(!1), [F, I] = a.useState(!1), L = a.useRef(/* @__PURE__ */ new Map()), R = a.useRef(0), Ie = a.useRef(0), z = se(D, be).trim(), B = a.useMemo(() => ue(Pe), [Pe]), V = a.useMemo(() => ({
+		search: D,
 		minSearchLength: v,
-		options: H
+		options: B
 	}), [
-		H,
+		B,
 		v,
-		O
-	]), W = ue(o, ce, H, ke, M), Me = _e && !!o && !h, G = V.length < v, K = !G && !!C && (Ce ?? le)(O, H);
+		D
+	]), H = fe(s, ce, B, Ne, A), Le = h && !!s && !m, U = z.length < v, W = !U && !!we && (Ee ?? de)(D, B);
 	a.useEffect(() => {
-		z.current.clear();
-	}, [f]), a.useEffect(() => {
-		j(T);
-	}, [T]), a.useEffect(() => {
-		if (!o || W || !p) return;
-		let e = new AbortController(), t = ++je.current;
+		L.current.clear();
+	}, [d]), a.useEffect(() => {
+		k(w);
+	}, [w]), a.useEffect(() => {
+		if (!s || H || !f) return;
+		let e = new AbortController(), t = ++Ie.current;
 		async function n() {
-			let n = await p?.(o, e.signal);
-			!e.signal.aborted && t === je.current && Ae(n ?? null);
+			let n = await f?.(s, e.signal);
+			!e.signal.aborted && t === Ie.current && Fe(n ?? null);
 		}
 		return n(), () => {
 			e.abort();
 		};
 	}, [
-		W,
-		p,
-		o
+		H,
+		f,
+		s
 	]), a.useEffect(() => {
-		if (!E) return;
-		if (G) {
-			j(T), P(!1), R(!1);
+		if (!T) return;
+		if (U) {
+			k(w), M(!1), I(!1);
 			return;
 		}
-		let e = g ? de(z.current, V, ve) : void 0;
+		let e = g ? pe(L.current, z, _) : void 0;
 		if (e) {
-			j(e), P(!1), R(!1);
+			k(e), M(!1), I(!1);
 			return;
 		}
-		let t = new AbortController(), n = ++B.current;
+		let t = new AbortController(), n = ++R.current;
 		async function r() {
-			P(!0), R(!1);
+			M(!0), I(!1);
 			try {
-				let e = l(await f(V, t.signal));
-				!t.signal.aborted && n === B.current && (g && fe(z.current, V, e), j(e));
+				let e = le(await d(z, t.signal));
+				!t.signal.aborted && n === R.current && (g && me(L.current, z, e), k(e));
 			} catch {
-				!t.signal.aborted && n === B.current && (R(!0), j([]));
+				!t.signal.aborted && n === R.current && (I(!0), k([]));
 			} finally {
-				!t.signal.aborted && n === B.current && P(!1);
+				!t.signal.aborted && n === R.current && M(!1);
 			}
 		}
 		return r(), () => {
@@ -185,127 +189,127 @@ function h({ className: ne, value: o, selectedOption: ce, onValueChange: d, load
 		};
 	}, [
 		g,
-		ve,
-		f,
-		E,
+		_,
+		d,
 		T,
-		V,
-		G
+		w,
+		z,
+		U
 	]);
-	let q = (e) => {
-		e.disabled || (d?.(e.value, e), D(!1), k(""));
-	}, J = () => {
-		d?.(void 0), k("");
-	}, Ne = (e) => {
-		t(e), J();
-	}, Y = (e) => {
-		if (!h) {
+	let G = (e) => {
+		e.disabled || (u?.(e.value, e), E(!1), O(""));
+	}, K = () => {
+		u?.(void 0), O("");
+	}, Re = (e) => {
+		t(e), K();
+	}, q = (e) => {
+		if (!m) {
 			if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-				e.preventDefault(), D(!0);
+				e.preventDefault(), E(!0);
 				return;
 			}
-			(e.key === "Backspace" || e.key === "Delete") && o && (e.preventDefault(), J());
+			(e.key === "Backspace" || e.key === "Delete") && s && (e.preventDefault(), K());
 		}
-	}, X = async () => {
-		if (!(!C || !O.trim() || G)) {
-			I(!0);
+	}, J = async () => {
+		if (!(!we || !D.trim() || U)) {
+			P(!0);
 			try {
-				let e = await C(O.trim()), t = pe(O);
-				j((t) => [{ options: [e] }, ...t]), g && t && fe(z.current, t, [{ options: [e] }]), d?.(e.value, e), k(""), D(!1);
+				let e = await we(D.trim()), t = he(D);
+				k((t) => [{ options: [e] }, ...t]), g && t && me(L.current, t, [{ options: [e] }]), u?.(e.value, e), O(""), E(!1);
 			} finally {
-				I(!1);
+				P(!1);
 			}
 		}
 	};
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ c("div", {
 		"data-slot": "async-select",
-		className: e("w-full", ne),
-		...Oe,
-		children: /* @__PURE__ */ c(i, {
-			open: E,
-			onOpenChange: D,
-			children: [/* @__PURE__ */ c(te, {
-				render: /* @__PURE__ */ s(n, {
+		className: e("w-full", ie),
+		...Me,
+		children: /* @__PURE__ */ l(i, {
+			open: T,
+			onOpenChange: E,
+			children: [/* @__PURE__ */ l(te, {
+				render: /* @__PURE__ */ c(n, {
 					type: "button",
 					variant: "outline",
-					disabled: h,
-					"aria-expanded": E,
-					"aria-invalid": w || void 0,
+					disabled: m,
+					"aria-expanded": T,
+					"aria-invalid": je || void 0,
 					"data-slot": "async-select-trigger",
-					className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", we),
-					onKeyDown: Y
+					className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", Oe),
+					onKeyDown: q
 				}),
-				children: [/* @__PURE__ */ s("span", {
+				children: [/* @__PURE__ */ c("span", {
 					className: "min-w-0 flex-1 text-left",
-					children: W ? /* @__PURE__ */ c("span", {
+					children: H ? /* @__PURE__ */ l("span", {
 						className: "flex min-w-0 flex-col gap-0.5",
-						children: [/* @__PURE__ */ s("span", {
+						children: [/* @__PURE__ */ c("span", {
 							className: "truncate font-semibold",
-							children: b?.(W) ?? W.label
-						}), W.disabled && W.disabledReason && /* @__PURE__ */ s("span", {
+							children: x?.(H) ?? H.label
+						}), De && (H.description || H.disabled && H.disabledReason) ? /* @__PURE__ */ c("span", {
 							className: "truncate text-xs text-muted-foreground",
-							children: W.disabledReason
-						})]
-					}) : /* @__PURE__ */ s("span", {
+							children: H.description ?? H.disabledReason
+						}) : null]
+					}) : /* @__PURE__ */ c("span", {
 						className: "truncate text-muted-foreground",
 						children: y?.placeholder ?? "Select"
 					})
-				}), /* @__PURE__ */ c("span", {
+				}), /* @__PURE__ */ l("span", {
 					className: "ml-2 flex shrink-0 items-center gap-1",
-					children: [Me && /* @__PURE__ */ s("span", {
+					children: [Le && /* @__PURE__ */ c("span", {
 						role: "button",
 						tabIndex: 0,
 						className: "rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground",
 						"aria-label": y?.clear ?? "Clear",
-						onClick: Ne,
+						onClick: Re,
 						onKeyDown: (e) => {
-							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), J());
+							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), K());
 						},
-						children: /* @__PURE__ */ s(oe, { className: "size-3.5" })
-					}), /* @__PURE__ */ s(re, { className: "size-4 opacity-60" })]
+						children: /* @__PURE__ */ c(oe, { className: "size-3.5" })
+					}), /* @__PURE__ */ c(ne, { className: "size-4 opacity-60" })]
 				})]
-			}), /* @__PURE__ */ c(ee, {
+			}), /* @__PURE__ */ l(ee, {
 				align: "start",
 				"data-slot": "async-select-content",
-				className: e("w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", Te),
-				children: [/* @__PURE__ */ c("div", {
+				className: e("w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", ke),
+				children: [/* @__PURE__ */ l("div", {
 					"data-slot": "async-select-search-wrap",
 					className: "relative",
-					children: [/* @__PURE__ */ s(ae, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ s(r, {
+					children: [/* @__PURE__ */ c(ae, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ c(r, {
 						"data-slot": "async-select-search",
-						value: O,
-						onChange: (e) => k(e.target.value),
+						value: D,
+						onChange: (e) => O(e.target.value),
 						placeholder: y?.searchPlaceholder ?? "Search...",
-						className: e("pl-8", Ee)
+						className: e("pl-8", Ae)
 					})]
-				}), /* @__PURE__ */ c("div", {
+				}), /* @__PURE__ */ l("div", {
 					className: "max-h-72 space-y-1 overflow-y-auto pr-1",
 					children: [
-						G && H.length === 0 && (xe?.(U) ?? /* @__PURE__ */ s(m, { children: y?.minSearchLength?.(v) ?? `Type at least ${v} characters` })),
-						N && (x?.(U) ?? /* @__PURE__ */ s(m, { children: /* @__PURE__ */ c("span", {
+						U && B.length === 0 && (Ce?.(V) ?? /* @__PURE__ */ c(p, { children: y?.minSearchLength?.(v) ?? `Type at least ${v} characters` })),
+						j && (xe?.(V) ?? /* @__PURE__ */ c(p, { children: /* @__PURE__ */ l("span", {
 							className: "inline-flex items-center gap-2",
-							children: [/* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }), y?.loading ?? "Loading..."]
+							children: [/* @__PURE__ */ c(re, { className: "size-4 animate-spin" }), y?.loading ?? "Loading..."]
 						}) })),
-						!N && L && (S?.(U) ?? /* @__PURE__ */ s(m, {
+						!j && F && (S?.(V) ?? /* @__PURE__ */ c(p, {
 							className: "text-destructive",
 							children: y?.error ?? "Could not load options"
 						})),
-						!N && !L && !G && H.length === 0 && !K && (be?.(U) ?? /* @__PURE__ */ s(m, { children: y?.empty ?? "No options found" })),
-						!N && !L && K && /* @__PURE__ */ s(ge, {
-							search: O,
-							isCreating: F,
-							label: Se,
-							onCreate: X
+						!j && !F && !U && B.length === 0 && !W && (Se?.(V) ?? /* @__PURE__ */ c(p, { children: y?.empty ?? "No options found" })),
+						!j && !F && W && /* @__PURE__ */ c(ve, {
+							search: D,
+							isCreating: N,
+							label: Te,
+							onCreate: J
 						}),
-						!N && !L && A.map((e, t) => /* @__PURE__ */ c("div", { children: [e.label && /* @__PURE__ */ s("div", {
+						!j && !F && Pe.map((e, t) => /* @__PURE__ */ l("div", { children: [e.label && /* @__PURE__ */ c("div", {
 							className: "sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground",
 							children: e.label
-						}), e.options.map((e) => /* @__PURE__ */ s(he, {
+						}), e.options.map((e) => /* @__PURE__ */ c(_e, {
 							option: e,
-							selected: e.value === o,
-							renderOption: ye,
-							optionClassName: De,
-							onSelect: q
+							selected: e.value === s,
+							renderOption: b,
+							optionClassName: C,
+							onSelect: G
 						}, e.value))] }, t))
 					]
 				})]
@@ -313,67 +317,67 @@ function h({ className: ne, value: o, selectedOption: ce, onValueChange: d, load
 		})
 	});
 }
-function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, loadOptions: ue, loadSelectedOptions: h, defaultOptions: _e, disabled: g = !1, clearable: ve = !0, cacheOptions: _ = !0, cacheTtl: v = Infinity, closeOnSelect: y = !1, debounceMs: ye = 250, minSearchLength: b = 0, maxSelected: x, showSelectAll: be = !1, labels: S, renderOption: xe, renderValue: C, renderTag: Se, renderLoading: Ce, renderEmpty: we, renderError: Te, renderMinSearch: Ee, renderMaxSelected: De, onCreateOption: w, createOptionLabel: Oe, showCreateOption: T, triggerClassName: ke, contentClassName: E, searchClassName: D, optionClassName: O, tagClassName: k, invalid: A, ...j }) {
-	let M = a.useMemo(() => o ?? [], [o]), Ae = M.join("|"), N = a.useMemo(() => l(_e), [_e]), P = a.useMemo(() => u(N), [N]), [F, I] = a.useState(!1), [L, R] = a.useState(""), [z, B] = a.useState(N), [je, V] = a.useState([]), [H, U] = a.useState(!1), [W, Me] = a.useState(!1), [G, K] = a.useState(!1), q = a.useRef(/* @__PURE__ */ new Map()), J = a.useRef(0), Ne = a.useRef(0), Y = se(L, ye).trim(), X = a.useMemo(() => u(z), [z]), Pe = a.useMemo(() => new Set(M), [M]), Z = a.useMemo(() => f(ce, je, X, P), [
-		P,
-		X,
-		je,
+function ye({ className: o, value: ie, selectedOptions: ce, onValueChange: u, loadOptions: fe, loadSelectedOptions: m, defaultOptions: ye, disabled: h = !1, clearable: g = !0, cacheOptions: _ = !0, cacheTtl: be = Infinity, closeOnSelect: v = !1, debounceMs: y = 250, minSearchLength: b = 0, maxSelected: x, maxVisibleTags: xe, showSelectAll: Se = !1, labels: S, renderOption: Ce, renderValue: we, renderTag: Te, renderLoading: Ee, renderEmpty: De, renderError: Oe, renderMinSearch: ke, renderMaxSelected: Ae, onCreateOption: C, createOptionLabel: je, showCreateOption: Me, showSelectedDescription: w = !0, triggerClassName: Ne, contentClassName: T, searchClassName: E, optionClassName: D, tagClassName: O, invalid: Pe, ...k }) {
+	let A = a.useMemo(() => ie ?? [], [ie]), Fe = A.join("|"), j = a.useMemo(() => le(ye), [ye]), M = a.useMemo(() => ue(j), [j]), [N, P] = a.useState(!1), [F, I] = a.useState(""), [L, R] = a.useState(j), [Ie, z] = a.useState([]), [B, V] = a.useState(!1), [H, Le] = a.useState(!1), [U, W] = a.useState(!1), G = a.useRef(/* @__PURE__ */ new Map()), K = a.useRef(0), Re = a.useRef(0), q = se(F, y).trim(), J = a.useMemo(() => ue(L), [L]), ze = a.useMemo(() => new Set(A), [A]), Y = a.useMemo(() => d(ce, Ie, J, M), [
+		M,
+		J,
+		Ie,
 		ce
-	]), Fe = a.useMemo(() => p(M, Z), [Z, M]), Q = a.useMemo(() => ({
-		search: L,
+	]), Be = a.useMemo(() => f(A, Y), [Y, A]), X = a.useMemo(() => ({
+		search: F,
 		minSearchLength: b,
-		options: X,
-		selectedCount: M.length,
+		options: J,
+		selectedCount: A.length,
 		maxSelected: x
 	}), [
-		X,
+		J,
 		x,
 		b,
-		L,
-		M.length
-	]), Ie = M.length > 0, Le = ve && Ie && !g, Re = typeof x == "number" && M.length >= x, $ = Y.length < b, ze = !$ && !!w && (T ?? le)(L, X), Be = X.filter((e) => !e.disabled).filter((e) => !Pe.has(e.value)), Ve = be && Be.length > 0 && !Re;
+		F,
+		A.length
+	]), Ve = A.length > 0, He = g && Ve && !h, Ue = typeof x == "number" && A.length >= x, We = Math.max(xe ?? A.length, 1), Z = q.length < b, Ge = !Z && !!C && (Me ?? de)(F, J), Q = J.filter((e) => !e.disabled).filter((e) => !ze.has(e.value)), Ke = Se && Q.length > 0 && !Ue, qe = Be.slice(0, We), Je = Math.max(Be.length - qe.length, 0);
 	a.useEffect(() => {
-		q.current.clear();
-	}, [ue]), a.useEffect(() => {
-		B(N);
-	}, [N]), a.useEffect(() => {
-		if (!M.length || !h) return;
-		let e = new Set(Z.map((e) => e.value)), t = M.filter((t) => !e.has(t));
+		G.current.clear();
+	}, [fe]), a.useEffect(() => {
+		R(j);
+	}, [j]), a.useEffect(() => {
+		if (!A.length || !m) return;
+		let e = new Set(Y.map((e) => e.value)), t = A.filter((t) => !e.has(t));
 		if (!t.length) return;
-		let n = new AbortController(), r = ++Ne.current;
+		let n = new AbortController(), r = ++Re.current;
 		async function i() {
-			let e = await h?.(t, n.signal);
-			!n.signal.aborted && r === Ne.current && e && V((t) => f(t, e));
+			let e = await m?.(t, n.signal);
+			!n.signal.aborted && r === Re.current && e && z((t) => d(t, e));
 		}
 		return i(), () => {
 			n.abort();
 		};
 	}, [
-		Z,
-		h,
-		Ae,
-		M
+		Y,
+		m,
+		Fe,
+		A
 	]), a.useEffect(() => {
-		if (!F) return;
-		if ($) {
-			B(N), U(!1), K(!1);
+		if (!N) return;
+		if (Z) {
+			R(j), V(!1), W(!1);
 			return;
 		}
-		let e = _ ? de(q.current, Y, v) : void 0;
+		let e = _ ? pe(G.current, q, be) : void 0;
 		if (e) {
-			B(e), U(!1), K(!1);
+			R(e), V(!1), W(!1);
 			return;
 		}
-		let t = new AbortController(), n = ++J.current;
+		let t = new AbortController(), n = ++K.current;
 		async function r() {
-			U(!0), K(!1);
+			V(!0), W(!1);
 			try {
-				let e = l(await ue(Y, t.signal));
-				!t.signal.aborted && n === J.current && (_ && fe(q.current, Y, e), B(e));
+				let e = le(await fe(q, t.signal));
+				!t.signal.aborted && n === K.current && (_ && me(G.current, q, e), R(e));
 			} catch {
-				!t.signal.aborted && n === J.current && (K(!0), B([]));
+				!t.signal.aborted && n === K.current && (W(!0), R([]));
 			} finally {
-				!t.signal.aborted && n === J.current && U(!1);
+				!t.signal.aborted && n === K.current && V(!1);
 			}
 		}
 		return r(), () => {
@@ -381,184 +385,188 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
 		};
 	}, [
 		_,
-		v,
-		ue,
-		F,
+		be,
+		fe,
 		N,
-		Y,
-		$
+		j,
+		q,
+		Z
 	]);
-	let He = (e, t) => {
-		d?.(e, p(e, t));
-	}, Ue = (e) => {
-		He(M.filter((t) => t !== e), Z);
-	}, We = (e) => {
-		e.disabled || (He(Pe.has(e.value) ? M.filter((t) => t !== e.value) : Re ? M : [...M, e.value], f(Z, [e])), y && (I(!1), R("")));
-	}, Ge = (e, n) => {
-		e.key !== "Enter" && e.key !== " " && e.key !== "Backspace" && e.key !== "Delete" || (e.preventDefault(), t(e), Ue(n.value));
-	}, Ke = (e) => {
-		if (!g) {
+	let $ = (e, t) => {
+		u?.(e, f(e, t));
+	}, Ye = (e) => {
+		$(A.filter((t) => t !== e), Y);
+	}, Xe = (e) => {
+		e.disabled || ($(ze.has(e.value) ? A.filter((t) => t !== e.value) : Ue ? A : [...A, e.value], d(Y, [e])), v && (P(!1), I("")));
+	}, Ze = (e, n) => {
+		e.key !== "Enter" && e.key !== " " && e.key !== "Backspace" && e.key !== "Delete" || (e.preventDefault(), t(e), Ye(n.value));
+	}, Qe = (e) => {
+		if (!h) {
 			if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-				e.preventDefault(), I(!0);
+				e.preventDefault(), P(!0);
 				return;
 			}
-			L.length > 0 || M.length === 0 || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), Ue(M[M.length - 1]));
+			F.length > 0 || A.length === 0 || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), Ye(A[A.length - 1]));
 		}
-	}, qe = () => {
-		if (!Be.length) return;
-		let e = typeof x == "number" ? Math.max(x - M.length, 0) : Be.length, t = Be.slice(0, e);
-		He(Array.from(new Set([...M, ...t.map((e) => e.value)])), f(Z, t));
-	}, Je = (e) => {
-		Ue(e.value);
-	}, Ye = () => {
-		d?.([], []), R("");
-	}, Xe = (e) => {
-		t(e), Ye();
-	}, Ze = async () => {
-		if (!(!w || !L.trim() || $)) {
-			Me(!0);
+	}, $e = () => {
+		if (!Q.length) return;
+		let e = typeof x == "number" ? Math.max(x - A.length, 0) : Q.length, t = Q.slice(0, e);
+		$(Array.from(new Set([...A, ...t.map((e) => e.value)])), d(Y, t));
+	}, et = (e) => {
+		Ye(e.value);
+	}, tt = () => {
+		u?.([], []), I("");
+	}, nt = (e) => {
+		t(e), tt();
+	}, rt = async () => {
+		if (!(!C || !F.trim() || Z)) {
+			Le(!0);
 			try {
-				let e = await w(L.trim()), t = pe(L), n = f(Z, [e]), r = Pe.has(e.value) || Re ? M : [...M, e.value];
-				B((t) => [{ options: [e] }, ...t]), _ && t && fe(q.current, t, [{ options: [e] }]), He(r, n), R(""), y && I(!1);
+				let e = await C(F.trim()), t = he(F), n = d(Y, [e]), r = ze.has(e.value) || Ue ? A : [...A, e.value];
+				R((t) => [{ options: [e] }, ...t]), _ && t && me(G.current, t, [{ options: [e] }]), $(r, n), I(""), v && P(!1);
 			} finally {
-				Me(!1);
+				Le(!1);
 			}
 		}
 	};
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ c("div", {
 		"data-slot": "async-multi-select",
-		className: e("w-full", ne),
-		...j,
-		children: /* @__PURE__ */ c(i, {
-			open: F,
-			onOpenChange: I,
-			children: [/* @__PURE__ */ c(te, {
-				render: /* @__PURE__ */ s(n, {
+		className: e("w-full", o),
+		...k,
+		children: /* @__PURE__ */ l(i, {
+			open: N,
+			onOpenChange: P,
+			children: [/* @__PURE__ */ l(te, {
+				render: /* @__PURE__ */ c(n, {
 					type: "button",
 					variant: "outline",
-					disabled: g,
-					"aria-expanded": F,
-					"aria-invalid": A || void 0,
+					disabled: h,
+					"aria-expanded": N,
+					"aria-invalid": Pe || void 0,
 					"data-slot": "async-select-trigger",
-					className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", ke),
-					onKeyDown: Ke
+					className: e("min-h-11 w-full justify-between rounded-[var(--aui-control-radius,var(--radius-md))] px-3.5 text-left", Ne),
+					onKeyDown: Qe
 				}),
-				children: [/* @__PURE__ */ s("span", {
+				children: [/* @__PURE__ */ c("span", {
 					className: "flex min-w-0 flex-1 flex-wrap gap-1 text-left",
-					children: Fe.length > 0 ? Fe.map((n) => /* @__PURE__ */ c("span", {
+					children: Be.length > 0 ? /* @__PURE__ */ l(s, { children: [qe.map((n) => /* @__PURE__ */ l("span", {
 						"data-slot": "async-select-tag",
-						className: e("inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground", k),
-						children: [/* @__PURE__ */ c("span", {
+						className: e("inline-flex max-w-full items-center gap-1.5 rounded-[var(--radius-sm)] border border-[color:color-mix(in_oklch,var(--primary),transparent_70%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_92%)] px-2 py-1 text-xs font-medium text-foreground", O),
+						children: [/* @__PURE__ */ l("span", {
 							className: "flex min-w-0 flex-col",
-							children: [/* @__PURE__ */ s("span", {
+							children: [/* @__PURE__ */ c("span", {
 								className: "truncate",
-								children: Se?.(n, { remove: () => Je(n) }) ?? C?.(n) ?? n.label
-							}), n.disabled && n.disabledReason && /* @__PURE__ */ s("span", {
+								children: Te?.(n, { remove: () => et(n) }) ?? we?.(n) ?? n.label
+							}), w && (n.description || n.disabled && n.disabledReason) ? /* @__PURE__ */ c("span", {
 								className: "truncate text-[11px] text-muted-foreground",
-								children: n.disabledReason
-							})]
-						}), !g && /* @__PURE__ */ s("span", {
+								children: n.description ?? n.disabledReason
+							}) : null]
+						}), !h && /* @__PURE__ */ c("span", {
 							role: "button",
 							tabIndex: 0,
 							"data-slot": "async-select-tag-remove",
 							className: "rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background hover:text-foreground",
-							"aria-label": `Remove ${me(n)}`,
+							"aria-label": `Remove ${ge(n)}`,
 							onClick: (e) => {
-								t(e), Je(n);
+								t(e), et(n);
 							},
-							onKeyDown: (e) => Ge(e, n),
-							children: /* @__PURE__ */ s(oe, { className: "size-3" })
+							onKeyDown: (e) => Ze(e, n),
+							children: /* @__PURE__ */ c(oe, { className: "size-3" })
 						})]
-					}, n.value)) : /* @__PURE__ */ s("span", {
+					}, n.value)), Je > 0 ? /* @__PURE__ */ c("span", {
+						"data-slot": "async-select-tag-overflow",
+						className: e("inline-flex max-w-full items-center rounded-[var(--radius-sm)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_58%)] px-2 py-1 text-xs font-medium text-muted-foreground", O),
+						children: S?.hiddenSelected?.(Je) ?? `+${Je} more`
+					}) : null] }) : /* @__PURE__ */ c("span", {
 						className: "truncate text-muted-foreground",
-						children: S?.placeholder ?? "Select"
+						children: S?.multiPlaceholder ?? S?.placeholder ?? "Select"
 					})
-				}), /* @__PURE__ */ c("span", {
+				}), /* @__PURE__ */ l("span", {
 					className: "ml-2 flex shrink-0 items-center gap-1",
-					children: [Le && /* @__PURE__ */ s("span", {
+					children: [He && /* @__PURE__ */ c("span", {
 						role: "button",
 						tabIndex: 0,
 						"data-slot": "async-select-clear",
 						className: "rounded-full border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground",
 						"aria-label": S?.clearAll ?? S?.clear ?? "Clear all",
-						onClick: Xe,
+						onClick: nt,
 						onKeyDown: (e) => {
-							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), Ye());
+							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), tt());
 						},
-						children: /* @__PURE__ */ s(oe, { className: "size-3.5" })
-					}), /* @__PURE__ */ s(re, { className: "size-4 opacity-60" })]
+						children: /* @__PURE__ */ c(oe, { className: "size-3.5" })
+					}), /* @__PURE__ */ c(ne, { className: "size-4 opacity-60" })]
 				})]
-			}), /* @__PURE__ */ c(ee, {
+			}), /* @__PURE__ */ l(ee, {
 				align: "start",
 				"data-slot": "async-select-content",
-				className: e("w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", E),
+				className: e("w-(--anchor-width) min-w-72 gap-3 rounded-[var(--aui-card-radius,var(--radius-lg))] border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]", T),
 				children: [
-					/* @__PURE__ */ c("div", {
+					/* @__PURE__ */ l("div", {
 						"data-slot": "async-select-search-wrap",
 						className: "relative",
-						children: [/* @__PURE__ */ s(ae, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ s(r, {
+						children: [/* @__PURE__ */ c(ae, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ c(r, {
 							"data-slot": "async-select-search",
-							value: L,
-							onChange: (e) => R(e.target.value),
+							value: F,
+							onChange: (e) => I(e.target.value),
 							placeholder: S?.searchPlaceholder ?? "Search...",
-							className: e("pl-8", D)
+							className: e("pl-8", E)
 						})]
 					}),
-					/* @__PURE__ */ c("div", {
+					/* @__PURE__ */ l("div", {
 						"data-slot": "async-select-meta",
 						className: "flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_62%)] px-3 py-2 text-xs text-muted-foreground",
 						children: [
-							Ie && S?.selectedCount && /* @__PURE__ */ s("span", { children: S.selectedCount(M.length) }),
-							Re && (De?.(Q) ?? /* @__PURE__ */ s("span", { children: S?.maxSelected?.(x ?? M.length) ?? `Maximum ${x} selected` })),
-							/* @__PURE__ */ c("div", {
+							Ve && S?.selectedCount && /* @__PURE__ */ c("span", { children: S.selectedCount(A.length) }),
+							Ue && (Ae?.(X) ?? /* @__PURE__ */ c("span", { children: S?.maxSelected?.(x ?? A.length) ?? `Maximum ${x} selected` })),
+							/* @__PURE__ */ l("div", {
 								className: "ml-auto flex items-center gap-2",
-								children: [Ve && /* @__PURE__ */ s("button", {
+								children: [Ke && /* @__PURE__ */ c("button", {
 									type: "button",
 									"data-slot": "async-select-meta-action",
 									className: "rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background",
-									onClick: qe,
+									onClick: $e,
 									children: S?.selectAll ?? "Select all"
-								}), Le && /* @__PURE__ */ s("button", {
+								}), He && /* @__PURE__ */ c("button", {
 									type: "button",
 									"data-slot": "async-select-meta-action",
 									className: "rounded-[var(--radius-sm)] border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background",
-									onClick: () => d?.([], []),
+									onClick: () => u?.([], []),
 									children: S?.clearAll ?? S?.clear ?? "Clear all"
 								})]
 							})
 						]
 					}),
-					/* @__PURE__ */ c("div", {
+					/* @__PURE__ */ l("div", {
 						className: "max-h-72 space-y-1 overflow-y-auto pr-1",
 						children: [
-							$ && X.length === 0 && (Ee?.(Q) ?? /* @__PURE__ */ s(m, { children: S?.minSearchLength?.(b) ?? `Type at least ${b} characters` })),
-							H && (Ce?.(Q) ?? /* @__PURE__ */ s(m, { children: /* @__PURE__ */ c("span", {
+							Z && J.length === 0 && (ke?.(X) ?? /* @__PURE__ */ c(p, { children: S?.minSearchLength?.(b) ?? `Type at least ${b} characters` })),
+							B && (Ee?.(X) ?? /* @__PURE__ */ c(p, { children: /* @__PURE__ */ l("span", {
 								className: "inline-flex items-center gap-2",
-								children: [/* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }), S?.loading ?? "Loading..."]
+								children: [/* @__PURE__ */ c(re, { className: "size-4 animate-spin" }), S?.loading ?? "Loading..."]
 							}) })),
-							!H && G && (Te?.(Q) ?? /* @__PURE__ */ s(m, {
+							!B && U && (Oe?.(X) ?? /* @__PURE__ */ c(p, {
 								className: "text-destructive",
 								children: S?.error ?? "Could not load options"
 							})),
-							!H && !G && !$ && X.length === 0 && !ze && (we?.(Q) ?? /* @__PURE__ */ s(m, { children: S?.empty ?? "No options found" })),
-							!H && !G && ze && /* @__PURE__ */ s(ge, {
-								search: L,
-								isCreating: W,
-								label: Oe,
-								onCreate: Ze
+							!B && !U && !Z && J.length === 0 && !Ge && (De?.(X) ?? /* @__PURE__ */ c(p, { children: S?.empty ?? "No options found" })),
+							!B && !U && Ge && /* @__PURE__ */ c(ve, {
+								search: F,
+								isCreating: H,
+								label: je,
+								onCreate: rt
 							}),
-							!H && !G && z.map((e, t) => /* @__PURE__ */ c("div", { children: [e.label && /* @__PURE__ */ s("div", {
+							!B && !U && L.map((e, t) => /* @__PURE__ */ l("div", { children: [e.label && /* @__PURE__ */ c("div", {
 								className: "sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground",
-								children: /* @__PURE__ */ s("span", {
+								children: /* @__PURE__ */ c("span", {
 									"data-slot": "async-select-group-label",
 									children: e.label
 								})
-							}), e.options.map((e) => /* @__PURE__ */ s(he, {
+							}), e.options.map((e) => /* @__PURE__ */ c(_e, {
 								option: e,
-								selected: Pe.has(e.value),
-								renderOption: xe,
-								optionClassName: O,
-								onSelect: We
+								selected: ze.has(e.value),
+								renderOption: Ce,
+								optionClassName: D,
+								onSelect: Xe
 							}, e.value))] }, t))
 						]
 					})
@@ -568,4 +576,4 @@ function _e({ className: ne, value: o, selectedOptions: ce, onValueChange: d, lo
 	});
 }
 //#endregion
-export { _e as AsyncMultiSelect, h as AsyncSelect };
+export { ye as AsyncMultiSelect, m as AsyncSelect };