tembro 1.0.0

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

@@ -0,0 +1,571 @@
+import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
+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";
+//#region src/components/inputs/async-select.tsx
+function se(e, t) {
+	let [n, r] = a.useState(e);
+	return a.useEffect(() => {
+		let n = window.setTimeout(() => {
+			r(e);
+		}, t);
+		return () => {
+			window.clearTimeout(n);
+		};
+	}, [t, e]), n;
+}
+function ce(e) {
+	return typeof e == "object" && !!e && "options" in e;
+}
+function l(e) {
+	if (!e || e.length === 0) return [];
+	let t = e[0];
+	return ce(t) ? e : [{ options: e }];
+}
+function u(e) {
+	return e.flatMap((e) => e.options);
+}
+function d(e) {
+	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label).toLowerCase() : e.value.toLowerCase();
+}
+function le(e, t) {
+	let n = e.trim().toLowerCase();
+	return n ? !t.some((e) => e.value.toLowerCase() === n || d(e) === n) : !1;
+}
+function ue(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) {
+	let t = /* @__PURE__ */ new Map();
+	return e.forEach((e) => {
+		e?.forEach((e) => {
+			t.set(e.value, e);
+		});
+	}), Array.from(t.values());
+}
+function p(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) {
+	let r = e.get(t);
+	if (r) {
+		if (Number.isFinite(n) && Date.now() - r.createdAt > n) {
+			e.delete(t);
+			return;
+		}
+		return r.groups;
+	}
+}
+function fe(e, t, n) {
+	e.set(t, {
+		groups: n,
+		createdAt: Date.now()
+	});
+}
+function pe(e) {
+	return e.trim().toLowerCase();
+}
+function m({ className: t, children: n }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "async-select-state",
+		className: e("rounded-[min(var(--radius-xl),16px)] border px-3 py-3 text-sm text-muted-foreground", t),
+		children: n
+	});
+}
+function me(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", {
+		type: "button",
+		disabled: t.disabled,
+		"data-slot": "async-select-option",
+		"data-selected": n || void 0,
+		"data-disabled": t.disabled || void 0,
+		className: e("flex w-full items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50", i),
+		onClick: () => ee(t),
+		children: [/* @__PURE__ */ s("span", {
+			className: "flex size-4 shrink-0 items-center justify-center",
+			children: n && /* @__PURE__ */ s(ne, { className: "size-4" })
+		}), /* @__PURE__ */ s("span", {
+			className: "min-w-0 flex-1",
+			children: r?.(t, { selected: n }) ?? /* @__PURE__ */ c("span", {
+				className: "flex min-w-0 flex-col",
+				children: [
+					/* @__PURE__ */ s("span", {
+						className: "truncate",
+						children: t.label
+					}),
+					t.description && /* @__PURE__ */ s("span", {
+						className: "truncate text-xs text-muted-foreground",
+						children: t.description
+					}),
+					t.disabled && t.disabledReason && /* @__PURE__ */ s("span", {
+						className: "truncate text-xs text-muted-foreground",
+						children: t.disabledReason
+					})
+				]
+			})
+		})]
+	});
+}
+function ge({ search: e, isCreating: t, label: n, onCreate: r }) {
+	return /* @__PURE__ */ c("button", {
+		type: "button",
+		disabled: t,
+		"data-slot": "async-select-create",
+		className: "flex w-full items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-dashed px-3 py-2.5 text-left text-sm outline-none transition-[background-color,border-color,color,box-shadow] disabled:pointer-events-none disabled:opacity-50",
+		onClick: r,
+		children: [/* @__PURE__ */ s("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", {
+			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,
+		minSearchLength: v,
+		options: H
+	}), [
+		H,
+		v,
+		O
+	]), W = ue(o, ce, H, ke, M), Me = _e && !!o && !h, G = V.length < v, K = !G && !!C && (Ce ?? le)(O, H);
+	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;
+		async function n() {
+			let n = await p?.(o, e.signal);
+			!e.signal.aborted && t === je.current && Ae(n ?? null);
+		}
+		return n(), () => {
+			e.abort();
+		};
+	}, [
+		W,
+		p,
+		o
+	]), a.useEffect(() => {
+		if (!E) return;
+		if (G) {
+			j(T), P(!1), R(!1);
+			return;
+		}
+		let e = g ? de(z.current, V, ve) : void 0;
+		if (e) {
+			j(e), P(!1), R(!1);
+			return;
+		}
+		let t = new AbortController(), n = ++B.current;
+		async function r() {
+			P(!0), R(!1);
+			try {
+				let e = l(await f(V, t.signal));
+				!t.signal.aborted && n === B.current && (g && fe(z.current, V, e), j(e));
+			} catch {
+				!t.signal.aborted && n === B.current && (R(!0), j([]));
+			} finally {
+				!t.signal.aborted && n === B.current && P(!1);
+			}
+		}
+		return r(), () => {
+			t.abort();
+		};
+	}, [
+		g,
+		ve,
+		f,
+		E,
+		T,
+		V,
+		G
+	]);
+	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) {
+			if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), D(!0);
+				return;
+			}
+			(e.key === "Backspace" || e.key === "Delete") && o && (e.preventDefault(), J());
+		}
+	}, X = async () => {
+		if (!(!C || !O.trim() || G)) {
+			I(!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);
+			} finally {
+				I(!1);
+			}
+		}
+	};
+	return /* @__PURE__ */ s("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, {
+					type: "button",
+					variant: "outline",
+					disabled: h,
+					"aria-expanded": E,
+					"aria-invalid": w || void 0,
+					"data-slot": "async-select-trigger",
+					className: e("min-h-11 w-full justify-between", we),
+					onKeyDown: Y
+				}),
+				children: [/* @__PURE__ */ s("span", {
+					className: "min-w-0 flex-1 text-left",
+					children: W ? /* @__PURE__ */ c("span", {
+						className: "flex min-w-0 flex-col",
+						children: [/* @__PURE__ */ s("span", {
+							className: "truncate",
+							children: b?.(W) ?? W.label
+						}), W.disabled && W.disabledReason && /* @__PURE__ */ s("span", {
+							className: "truncate text-xs text-muted-foreground",
+							children: W.disabledReason
+						})]
+					}) : /* @__PURE__ */ s("span", {
+						className: "truncate",
+						children: y?.placeholder ?? "Select"
+					})
+				}), /* @__PURE__ */ c("span", {
+					className: "ml-2 flex shrink-0 items-center gap-1",
+					children: [Me && /* @__PURE__ */ s("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,
+						onKeyDown: (e) => {
+							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), J());
+						},
+						children: /* @__PURE__ */ s(oe, { className: "size-3.5" })
+					}), /* @__PURE__ */ s(re, { className: "size-4 opacity-60" })]
+				})]
+			}), /* @__PURE__ */ c(ee, {
+				align: "start",
+				"data-slot": "async-select-content",
+				className: e("w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5", Te),
+				children: [/* @__PURE__ */ c("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, {
+						"data-slot": "async-select-search",
+						value: O,
+						onChange: (e) => k(e.target.value),
+						placeholder: y?.searchPlaceholder ?? "Search...",
+						className: e("pl-8", Ee)
+					})]
+				}), /* @__PURE__ */ c("div", {
+					className: "max-h-64 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", {
+							className: "inline-flex items-center gap-2",
+							children: [/* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }), y?.loading ?? "Loading..."]
+						}) })),
+						!N && L && (S?.(U) ?? /* @__PURE__ */ s(m, {
+							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
+						}),
+						!N && !L && A.map((e, t) => /* @__PURE__ */ c("div", { children: [e.label && /* @__PURE__ */ s("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, {
+							option: e,
+							selected: e.value === o,
+							renderOption: ye,
+							optionClassName: De,
+							onSelect: q
+						}, e.value))] }, t))
+					]
+				})]
+			})]
+		})
+	});
+}
+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,
+		ce
+	]), Fe = a.useMemo(() => p(M, Z), [Z, M]), Q = a.useMemo(() => ({
+		search: L,
+		minSearchLength: b,
+		options: X,
+		selectedCount: M.length,
+		maxSelected: x
+	}), [
+		X,
+		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;
+	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));
+		if (!t.length) return;
+		let n = new AbortController(), r = ++Ne.current;
+		async function i() {
+			let e = await h?.(t, n.signal);
+			!n.signal.aborted && r === Ne.current && e && V((t) => f(t, e));
+		}
+		return i(), () => {
+			n.abort();
+		};
+	}, [
+		Z,
+		h,
+		Ae,
+		M
+	]), a.useEffect(() => {
+		if (!F) return;
+		if ($) {
+			B(N), U(!1), K(!1);
+			return;
+		}
+		let e = _ ? de(q.current, Y, v) : void 0;
+		if (e) {
+			B(e), U(!1), K(!1);
+			return;
+		}
+		let t = new AbortController(), n = ++J.current;
+		async function r() {
+			U(!0), K(!1);
+			try {
+				let e = l(await ue(Y, t.signal));
+				!t.signal.aborted && n === J.current && (_ && fe(q.current, Y, e), B(e));
+			} catch {
+				!t.signal.aborted && n === J.current && (K(!0), B([]));
+			} finally {
+				!t.signal.aborted && n === J.current && U(!1);
+			}
+		}
+		return r(), () => {
+			t.abort();
+		};
+	}, [
+		_,
+		v,
+		ue,
+		F,
+		N,
+		Y,
+		$
+	]);
+	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) {
+			if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+				e.preventDefault(), I(!0);
+				return;
+			}
+			L.length > 0 || M.length === 0 || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), Ue(M[M.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);
+			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);
+			} finally {
+				Me(!1);
+			}
+		}
+	};
+	return /* @__PURE__ */ s("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, {
+					type: "button",
+					variant: "outline",
+					disabled: g,
+					"aria-expanded": F,
+					"aria-invalid": A || void 0,
+					"data-slot": "async-select-trigger",
+					className: e("min-h-11 w-full justify-between", ke),
+					onKeyDown: Ke
+				}),
+				children: [/* @__PURE__ */ s("span", {
+					className: "flex min-w-0 flex-1 flex-wrap gap-1 text-left",
+					children: Fe.length > 0 ? Fe.map((n) => /* @__PURE__ */ c("span", {
+						"data-slot": "async-select-tag",
+						className: e("inline-flex max-w-full items-center gap-1 rounded-full border px-2 py-1 text-xs text-foreground", k),
+						children: [/* @__PURE__ */ c("span", {
+							className: "flex min-w-0 flex-col",
+							children: [/* @__PURE__ */ s("span", {
+								className: "truncate",
+								children: Se?.(n, { remove: () => Je(n) }) ?? C?.(n) ?? n.label
+							}), n.disabled && n.disabledReason && /* @__PURE__ */ s("span", {
+								className: "truncate text-[11px] text-muted-foreground",
+								children: n.disabledReason
+							})]
+						}), !g && /* @__PURE__ */ s("span", {
+							role: "button",
+							tabIndex: 0,
+							"data-slot": "async-select-tag-remove",
+							className: "rounded-full text-muted-foreground transition-colors hover:text-foreground",
+							"aria-label": `Remove ${me(n)}`,
+							onClick: (e) => {
+								t(e), Je(n);
+							},
+							onKeyDown: (e) => Ge(e, n),
+							children: /* @__PURE__ */ s(oe, { className: "size-3" })
+						})]
+					}, n.value)) : /* @__PURE__ */ s("span", {
+						className: "truncate text-muted-foreground",
+						children: S?.placeholder ?? "Select"
+					})
+				}), /* @__PURE__ */ c("span", {
+					className: "ml-2 flex shrink-0 items-center gap-1",
+					children: [Le && /* @__PURE__ */ s("span", {
+						role: "button",
+						tabIndex: 0,
+						"data-slot": "async-select-clear",
+						className: "rounded-full border p-1 text-muted-foreground transition-colors hover:text-foreground",
+						"aria-label": S?.clearAll ?? S?.clear ?? "Clear all",
+						onClick: Xe,
+						onKeyDown: (e) => {
+							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), Ye());
+						},
+						children: /* @__PURE__ */ s(oe, { className: "size-3.5" })
+					}), /* @__PURE__ */ s(re, { className: "size-4 opacity-60" })]
+				})]
+			}), /* @__PURE__ */ c(ee, {
+				align: "start",
+				"data-slot": "async-select-content",
+				className: e("w-(--anchor-width) gap-3 rounded-[var(--radius-2xl)] p-3.5", E),
+				children: [
+					/* @__PURE__ */ c("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, {
+							"data-slot": "async-select-search",
+							value: L,
+							onChange: (e) => R(e.target.value),
+							placeholder: S?.searchPlaceholder ?? "Search...",
+							className: e("pl-8", D)
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						"data-slot": "async-select-meta",
+						className: "flex flex-wrap items-center justify-between gap-2 rounded-[min(var(--radius-xl),16px)] border 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", {
+								className: "ml-auto flex items-center gap-2",
+								children: [Ve && /* @__PURE__ */ s("button", {
+									type: "button",
+									"data-slot": "async-select-meta-action",
+									className: "rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background",
+									onClick: qe,
+									children: S?.selectAll ?? "Select all"
+								}), Le && /* @__PURE__ */ s("button", {
+									type: "button",
+									"data-slot": "async-select-meta-action",
+									className: "rounded-full border border-border/75 px-2.5 py-1 font-medium text-foreground transition-colors hover:bg-background",
+									onClick: () => d?.([], []),
+									children: S?.clearAll ?? S?.clear ?? "Clear all"
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "max-h-64 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", {
+								className: "inline-flex items-center gap-2",
+								children: [/* @__PURE__ */ s(ie, { className: "size-4 animate-spin" }), S?.loading ?? "Loading..."]
+							}) })),
+							!H && G && (Te?.(Q) ?? /* @__PURE__ */ s(m, {
+								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
+							}),
+							!H && !G && z.map((e, t) => /* @__PURE__ */ c("div", { children: [e.label && /* @__PURE__ */ s("div", {
+								className: "sticky top-0 z-10 bg-popover px-2 py-1 text-xs font-medium text-muted-foreground",
+								children: /* @__PURE__ */ s("span", {
+									"data-slot": "async-select-group-label",
+									children: e.label
+								})
+							}), e.options.map((e) => /* @__PURE__ */ s(he, {
+								option: e,
+								selected: Pe.has(e.value),
+								renderOption: xe,
+								optionClassName: O,
+								onSelect: We
+							}, e.value))] }, t))
+						]
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { _e as AsyncMultiSelect, h as AsyncSelect };

package/dist/components/inputs/cascader.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({options:e,value:n=[],onValueChange:i,className:a,...o}){let s=n[0]??``,c=e.find(e=>e.value===s)?.children??[],l=n[1]??``,u=c.find(e=>e.value===l)?.children??[];return(0,r.jsxs)(`div`,{"data-slot":`cascader`,className:t.cn(`grid gap-2 sm:grid-cols-3`,a),...o,children:[(0,r.jsxs)(`select`,{className:`h-10 rounded-md border bg-background px-3 text-sm`,value:s,onChange:e=>i?.([e.target.value]),children:[(0,r.jsx)(`option`,{value:``,children:`Select`}),e.map(e=>(0,r.jsx)(`option`,{value:e.value,children:e.label},e.value))]}),(0,r.jsxs)(`select`,{className:`h-10 rounded-md border bg-background px-3 text-sm`,value:l,disabled:!c.length,onChange:e=>i?.([s,e.target.value]),children:[(0,r.jsx)(`option`,{value:``,children:`Select`}),c.map(e=>(0,r.jsx)(`option`,{value:e.value,children:e.label},e.value))]}),(0,r.jsxs)(`select`,{className:`h-10 rounded-md border bg-background px-3 text-sm`,value:n[2]??``,disabled:!u.length,onChange:e=>i?.([s,l,e.target.value]),children:[(0,r.jsx)(`option`,{value:``,children:`Select`}),u.map(e=>(0,r.jsx)(`option`,{value:e.value,children:e.label},e.value))]})]})}exports.Cascader=i;

package/dist/components/inputs/cascader.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type CascaderOption = {
+    label: React.ReactNode;
+    value: string;
+    children?: CascaderOption[];
+};
+export type CascaderProps = React.ComponentProps<"div"> & {
+    options: CascaderOption[];
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+declare function Cascader({ options, value, onValueChange, className, ...props }: CascaderProps): React.JSX.Element;
+export { Cascader };

package/dist/components/inputs/cascader.js

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/inputs/cascader.tsx
+function r({ options: r, value: i = [], onValueChange: a, className: o, ...s }) {
+	let c = i[0] ?? "", l = r.find((e) => e.value === c)?.children ?? [], u = i[1] ?? "", d = l.find((e) => e.value === u)?.children ?? [];
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "cascader",
+		className: e("grid gap-2 sm:grid-cols-3", o),
+		...s,
+		children: [
+			/* @__PURE__ */ n("select", {
+				className: "h-10 rounded-md border bg-background px-3 text-sm",
+				value: c,
+				onChange: (e) => a?.([e.target.value]),
+				children: [/* @__PURE__ */ t("option", {
+					value: "",
+					children: "Select"
+				}), r.map((e) => /* @__PURE__ */ t("option", {
+					value: e.value,
+					children: e.label
+				}, e.value))]
+			}),
+			/* @__PURE__ */ n("select", {
+				className: "h-10 rounded-md border bg-background px-3 text-sm",
+				value: u,
+				disabled: !l.length,
+				onChange: (e) => a?.([c, e.target.value]),
+				children: [/* @__PURE__ */ t("option", {
+					value: "",
+					children: "Select"
+				}), l.map((e) => /* @__PURE__ */ t("option", {
+					value: e.value,
+					children: e.label
+				}, e.value))]
+			}),
+			/* @__PURE__ */ n("select", {
+				className: "h-10 rounded-md border bg-background px-3 text-sm",
+				value: i[2] ?? "",
+				disabled: !d.length,
+				onChange: (e) => a?.([
+					c,
+					u,
+					e.target.value
+				]),
+				children: [/* @__PURE__ */ t("option", {
+					value: "",
+					children: "Select"
+				}), d.map((e) => /* @__PURE__ */ t("option", {
+					value: e.value,
+					children: e.label
+				}, e.value))]
+			})
+		]
+	});
+}
+//#endregion
+export { r as Cascader };

package/dist/components/inputs/clearable-input.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("./input-decorator.cjs"),r=require("./input-value.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s=i.forwardRef(({value:e,onChange:s,onValueChange:c,onClear:l,clearable:u=!0,clearLabel:d=`Clear`,clearOnEscape:f=!0,focusAfterClear:p=!0,replaceTrailingWhenClear:m=!0,leadingIcon:h,trailing:g,trailingAction:_,disabled:v,onKeyDown:y,...b},x)=>{let S=i.useRef(null),C=r.getInputValue(e),w=u&&C.length>0&&!v&&!b.readOnly,T=r.createInputChangeHandler({onChange:s,onValueChange:c});i.useImperativeHandle(x,()=>S.current);let E=()=>{w&&(c?.(``),l?.(),p&&S.current?.focus())},D=e=>{t.stopInteractivePropagation(e),E()},O=e=>{t.stopInteractivePropagation(e)};return(0,o.jsx)(n.InputDecorator,{"data-slot":`clearable-input`,ref:S,value:C,disabled:v,onChange:T,onKeyDown:e=>{y?.(e),!e.defaultPrevented&&f&&e.key===`Escape`&&w&&(e.preventDefault(),E())},leading:h,trailing:w&&m?null:g,trailingAction:(0,o.jsxs)(o.Fragment,{children:[_,w&&(0,o.jsx)(`button`,{type:`button`,"data-slot":`clearable-input-clear`,"aria-label":d,className:`inline-flex size-7 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30`,onClick:D,onMouseDown:O,onDoubleClick:O,children:(0,o.jsx)(a.XIcon,{className:`size-4`})})]}),...b})});s.displayName=`ClearableInput`,exports.ClearableInput=s;

package/dist/components/inputs/clearable-input.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { InputDecorator } from "@/components/inputs/input-decorator";
+export type ClearableInputProps = Omit<React.ComponentProps<typeof InputDecorator>, "value" | "onChange"> & {
+    value?: string | number | null;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onValueChange?: (value: string) => void;
+    onClear?: () => void;
+    clearable?: boolean;
+    clearLabel?: string;
+    clearOnEscape?: boolean;
+    focusAfterClear?: boolean;
+    replaceTrailingWhenClear?: boolean;
+    leadingIcon?: React.ReactNode;
+    trailing?: React.ReactNode;
+    trailingAction?: React.ReactNode;
+    wrapperClassName?: string;
+    inputClassName?: string;
+};
+declare const ClearableInput: React.ForwardRefExoticComponent<Omit<ClearableInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { ClearableInput };