tembro 3.0.0 → 3.1.5

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

@@ -1,580 +1 @@
-"use client";
-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 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);
-	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 le(e) {
-	if (!e || e.length === 0) return [];
-	let t = e[0];
-	return ce(t) ? e : [{ options: e }];
-}
-function ue(e) {
-	return e.flatMap((e) => e.options);
-}
-function u(e) {
-	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label).toLowerCase() : e.value.toLowerCase();
-}
-function de(e, t) {
-	let n = e.trim().toLowerCase();
-	return n ? !t.some((e) => e.value.toLowerCase() === n || u(e) === n) : !1;
-}
-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 d(...e) {
-	let t = /* @__PURE__ */ new Map();
-	return e.forEach((e) => {
-		e?.forEach((e) => {
-			t.set(e.value, e);
-		});
-	}), Array.from(t.values());
-}
-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 pe(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 me(e, t, n) {
-	e.set(t, {
-		groups: n,
-		createdAt: Date.now()
-	});
-}
-function he(e) {
-	return e.trim().toLowerCase();
-}
-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 ge(e) {
-	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value;
-}
-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",
-		"data-selected": n || void 0,
-		"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__ */ 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__ */ c(o, { className: "size-3" })
-		}), /* @__PURE__ */ c("span", {
-			className: "min-w-0 flex-1",
-			children: r?.(t, { selected: n }) ?? /* @__PURE__ */ l("span", {
-				className: "flex min-w-0 flex-col",
-				children: [
-					/* @__PURE__ */ c("span", {
-						className: "truncate font-medium",
-						children: t.label
-					}),
-					t.description && /* @__PURE__ */ c("span", {
-						className: "truncate text-xs text-muted-foreground",
-						children: t.description
-					}),
-					t.disabled && t.disabledReason && /* @__PURE__ */ c("span", {
-						className: "truncate text-xs text-muted-foreground",
-						children: t.disabledReason
-					})
-				]
-			})
-		})]
-	});
-}
-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__ */ c("span", {
-			className: "flex size-4 shrink-0 items-center justify-center",
-			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 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: B
-	}), [
-		B,
-		v,
-		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(() => {
-		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 f?.(s, e.signal);
-			!e.signal.aborted && t === Ie.current && Fe(n ?? null);
-		}
-		return n(), () => {
-			e.abort();
-		};
-	}, [
-		H,
-		f,
-		s
-	]), a.useEffect(() => {
-		if (!T) return;
-		if (U) {
-			k(w), M(!1), I(!1);
-			return;
-		}
-		let e = g ? pe(L.current, z, _) : void 0;
-		if (e) {
-			k(e), M(!1), I(!1);
-			return;
-		}
-		let t = new AbortController(), n = ++R.current;
-		async function r() {
-			M(!0), I(!1);
-			try {
-				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 === R.current && (I(!0), k([]));
-			} finally {
-				!t.signal.aborted && n === R.current && M(!1);
-			}
-		}
-		return r(), () => {
-			t.abort();
-		};
-	}, [
-		g,
-		_,
-		d,
-		T,
-		w,
-		z,
-		U
-	]);
-	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(), E(!0);
-				return;
-			}
-			(e.key === "Backspace" || e.key === "Delete") && s && (e.preventDefault(), K());
-		}
-	}, J = async () => {
-		if (!(!we || !D.trim() || U)) {
-			P(!0);
-			try {
-				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 {
-				P(!1);
-			}
-		}
-	};
-	return /* @__PURE__ */ c("div", {
-		"data-slot": "async-select",
-		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: 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", Oe),
-					onKeyDown: q
-				}),
-				children: [/* @__PURE__ */ c("span", {
-					className: "min-w-0 flex-1 text-left",
-					children: H ? /* @__PURE__ */ l("span", {
-						className: "flex min-w-0 flex-col gap-0.5",
-						children: [/* @__PURE__ */ c("span", {
-							className: "truncate font-semibold",
-							children: x?.(H) ?? H.label
-						}), De && (H.description || H.disabled && H.disabledReason) ? /* @__PURE__ */ c("span", {
-							className: "truncate text-xs text-muted-foreground",
-							children: H.description ?? H.disabledReason
-						}) : null]
-					}) : /* @__PURE__ */ c("span", {
-						className: "truncate text-muted-foreground",
-						children: y?.placeholder ?? "Select"
-					})
-				}), /* @__PURE__ */ l("span", {
-					className: "ml-2 flex shrink-0 items-center gap-1",
-					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: Re,
-						onKeyDown: (e) => {
-							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), K());
-						},
-						children: /* @__PURE__ */ c(oe, { className: "size-3.5" })
-					}), /* @__PURE__ */ c(ne, { className: "size-4 opacity-60" })]
-				})]
-			}), /* @__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))]", ke),
-				children: [/* @__PURE__ */ l("div", {
-					"data-slot": "async-select-search-wrap",
-					className: "relative",
-					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: D,
-						onChange: (e) => O(e.target.value),
-						placeholder: y?.searchPlaceholder ?? "Search...",
-						className: e("pl-8", Ae)
-					})]
-				}), /* @__PURE__ */ l("div", {
-					className: "max-h-72 space-y-1 overflow-y-auto pr-1",
-					children: [
-						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__ */ c(re, { className: "size-4 animate-spin" }), y?.loading ?? "Loading..."]
-						}) })),
-						!j && F && (S?.(V) ?? /* @__PURE__ */ c(p, {
-							className: "text-destructive",
-							children: y?.error ?? "Could not load options"
-						})),
-						!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
-						}),
-						!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__ */ c(_e, {
-							option: e,
-							selected: e.value === s,
-							renderOption: b,
-							optionClassName: C,
-							onSelect: G
-						}, e.value))] }, t))
-					]
-				})]
-			})]
-		})
-	});
-}
-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
-	]), Be = a.useMemo(() => f(A, Y), [Y, A]), X = a.useMemo(() => ({
-		search: F,
-		minSearchLength: b,
-		options: J,
-		selectedCount: A.length,
-		maxSelected: x
-	}), [
-		J,
-		x,
-		b,
-		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(() => {
-		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 = ++Re.current;
-		async function i() {
-			let e = await m?.(t, n.signal);
-			!n.signal.aborted && r === Re.current && e && z((t) => d(t, e));
-		}
-		return i(), () => {
-			n.abort();
-		};
-	}, [
-		Y,
-		m,
-		Fe,
-		A
-	]), a.useEffect(() => {
-		if (!N) return;
-		if (Z) {
-			R(j), V(!1), W(!1);
-			return;
-		}
-		let e = _ ? pe(G.current, q, be) : void 0;
-		if (e) {
-			R(e), V(!1), W(!1);
-			return;
-		}
-		let t = new AbortController(), n = ++K.current;
-		async function r() {
-			V(!0), W(!1);
-			try {
-				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 === K.current && (W(!0), R([]));
-			} finally {
-				!t.signal.aborted && n === K.current && V(!1);
-			}
-		}
-		return r(), () => {
-			t.abort();
-		};
-	}, [
-		_,
-		be,
-		fe,
-		N,
-		j,
-		q,
-		Z
-	]);
-	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(), P(!0);
-				return;
-			}
-			F.length > 0 || A.length === 0 || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), Ye(A[A.length - 1]));
-		}
-	}, $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 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 {
-				Le(!1);
-			}
-		}
-	};
-	return /* @__PURE__ */ c("div", {
-		"data-slot": "async-multi-select",
-		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: 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", Ne),
-					onKeyDown: Qe
-				}),
-				children: [/* @__PURE__ */ c("span", {
-					className: "flex min-w-0 flex-1 flex-wrap gap-1 text-left",
-					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", O),
-						children: [/* @__PURE__ */ l("span", {
-							className: "flex min-w-0 flex-col",
-							children: [/* @__PURE__ */ c("span", {
-								className: "truncate",
-								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.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 ${ge(n)}`,
-							onClick: (e) => {
-								t(e), et(n);
-							},
-							onKeyDown: (e) => Ze(e, n),
-							children: /* @__PURE__ */ c(oe, { className: "size-3" })
-						})]
-					}, 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?.multiPlaceholder ?? S?.placeholder ?? "Select"
-					})
-				}), /* @__PURE__ */ l("span", {
-					className: "ml-2 flex shrink-0 items-center gap-1",
-					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: nt,
-						onKeyDown: (e) => {
-							e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t(e), tt());
-						},
-						children: /* @__PURE__ */ c(oe, { className: "size-3.5" })
-					}), /* @__PURE__ */ c(ne, { className: "size-4 opacity-60" })]
-				})]
-			}), /* @__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))]", T),
-				children: [
-					/* @__PURE__ */ l("div", {
-						"data-slot": "async-select-search-wrap",
-						className: "relative",
-						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: F,
-							onChange: (e) => I(e.target.value),
-							placeholder: S?.searchPlaceholder ?? "Search...",
-							className: e("pl-8", E)
-						})]
-					}),
-					/* @__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: [
-							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: [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: $e,
-									children: S?.selectAll ?? "Select all"
-								}), 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: () => u?.([], []),
-									children: S?.clearAll ?? S?.clear ?? "Clear all"
-								})]
-							})
-						]
-					}),
-					/* @__PURE__ */ l("div", {
-						className: "max-h-72 space-y-1 overflow-y-auto pr-1",
-						children: [
-							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__ */ c(re, { className: "size-4 animate-spin" }), S?.loading ?? "Loading..."]
-							}) })),
-							!B && U && (Oe?.(X) ?? /* @__PURE__ */ c(p, {
-								className: "text-destructive",
-								children: S?.error ?? "Could not load options"
-							})),
-							!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
-							}),
-							!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__ */ c("span", {
-									"data-slot": "async-select-group-label",
-									children: e.label
-								})
-							}), e.options.map((e) => /* @__PURE__ */ c(_e, {
-								option: e,
-								selected: ze.has(e.value),
-								renderOption: Ce,
-								optionClassName: D,
-								onSelect: Xe
-							}, e.value))] }, t))
-						]
-					})
-				]
-			})]
-		})
-	});
-}
-//#endregion
-export { ye as AsyncMultiSelect, m as AsyncSelect };
+export * from "../../src/components/inputs/async-select.js"

package/dist/components/inputs/color-picker.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/inputs/color-picker.cjs")

package/dist/components/inputs/color-picker.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+declare function normalizeHexColor(value: string, fallback?: string): string;
+declare function getAlphaPercent(value: string): number;
+declare function withAlpha(value: string, alpha: number, includeAlpha: boolean): string;
+export type ColorPickerProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    swatches?: string[];
+    showAlpha?: boolean;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    labels?: {
+        color?: string;
+        hex?: string;
+        alpha?: string;
+    };
+};
+declare function ColorPicker({ value, defaultValue, onValueChange, swatches, showAlpha, disabled, label, labels, className, ...props }: ColorPickerProps): React.JSX.Element;
+export { ColorPicker, getAlphaPercent, normalizeHexColor, withAlpha };

package/dist/components/inputs/color-picker.js

@@ -0,0 +1 @@
+export * from "../../src/components/inputs/color-picker.js"

package/dist/components/inputs/demo.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`password-input`,`PasswordInput`,`inputs`,`Password field with visibility toggle and secure autocomplete defaults.`),e.component(`number-input`,`NumberInput`,`inputs`,`Numeric entry surface for counts, thresholds and dashboard filters.`),e.component(`phone-input`,`PhoneInput`,`inputs`,`Masked phone entry that preserves stable value handling in forms.`),e.component(`money-input`,`MoneyInput`,`inputs`,`Currency-focused value entry for invoices, pricing and finance screens.`),e.component(`date-input`,`DateInput`,`inputs`,`Single-date entry with normalized string value handling.`),e.component(`date-range-input`,`DateRangeInput`,`inputs`,`Range-based date entry for reporting, booking and filter flows.`),e.component(`simple-select`,`SimpleSelect`,`inputs`,`Static select member for local option sets and lightweight filter panels.`),e.component(`async-select`,`AsyncSelect`,`inputs`,`Remote select member for server search, hydration and large datasets.`),e.component(`combobox`,`Combobox`,`inputs`,`Local searchable choice input for reassignment and command-like selection.`),e.component(`slider`,`Slider`,`inputs`,`Single value range control for density, threshold, and score tuning.`),e.component(`range-slider`,`RangeSlider`,`inputs`,`Two-handle slider for min/max filtering.`),e.component(`rating`,`Rating`,`inputs`,`Compact score input for feedback and review flows.`),e.component(`otp-input`,`OtpInput`,`inputs`,`One-time code entry with fixed-length slots.`),e.component(`color-input`,`ColorInput`,`inputs`,`Theme and accent color field with native color selection.`),e.component(`inline-editable`,`InlineEditable`,`inputs`,`Inline text editing for compact dashboards and settings tables.`),e.component(`tag-input`,`TagInput`,`inputs`,`Tokenized text input for labels, skills, and quick filters.`)]);exports.inputsShowcaseDemoRegistry=t;
+module.exports = require("../../src/components/inputs/demo.cjs")

package/dist/components/inputs/demo.js

@@ -1,22 +1 @@
-import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
-//#region src/components/inputs/demo.tsx
-var n = t([
-	e("password-input", "PasswordInput", "inputs", "Password field with visibility toggle and secure autocomplete defaults."),
-	e("number-input", "NumberInput", "inputs", "Numeric entry surface for counts, thresholds and dashboard filters."),
-	e("phone-input", "PhoneInput", "inputs", "Masked phone entry that preserves stable value handling in forms."),
-	e("money-input", "MoneyInput", "inputs", "Currency-focused value entry for invoices, pricing and finance screens."),
-	e("date-input", "DateInput", "inputs", "Single-date entry with normalized string value handling."),
-	e("date-range-input", "DateRangeInput", "inputs", "Range-based date entry for reporting, booking and filter flows."),
-	e("simple-select", "SimpleSelect", "inputs", "Static select member for local option sets and lightweight filter panels."),
-	e("async-select", "AsyncSelect", "inputs", "Remote select member for server search, hydration and large datasets."),
-	e("combobox", "Combobox", "inputs", "Local searchable choice input for reassignment and command-like selection."),
-	e("slider", "Slider", "inputs", "Single value range control for density, threshold, and score tuning."),
-	e("range-slider", "RangeSlider", "inputs", "Two-handle slider for min/max filtering."),
-	e("rating", "Rating", "inputs", "Compact score input for feedback and review flows."),
-	e("otp-input", "OtpInput", "inputs", "One-time code entry with fixed-length slots."),
-	e("color-input", "ColorInput", "inputs", "Theme and accent color field with native color selection."),
-	e("inline-editable", "InlineEditable", "inputs", "Inline text editing for compact dashboards and settings tables."),
-	e("tag-input", "TagInput", "inputs", "Tokenized text input for labels, skills, and quick filters.")
-]);
-//#endregion
-export { n as inputsShowcaseDemoRegistry };
+export * from "../../src/components/inputs/demo.js"

package/dist/components/inputs/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./async-select.cjs"),t=require("./otp-input.cjs"),n=require("./rating.cjs"),r=require("./slider.cjs"),i=require("./tag-input.cjs"),a=require("./inline-editable.cjs"),o=require("./json-input.cjs"),s=require("./time-picker.cjs");exports.AsyncMultiSelect=e.AsyncMultiSelect,exports.AsyncSelect=e.AsyncSelect,exports.DateTimePicker=s.DateTimePicker,exports.InlineEditable=a.InlineEditable,exports.JsonInput=o.JsonInput,exports.OtpInput=t.OtpInput,exports.RangeSlider=r.RangeSlider,exports.Rating=n.Rating,exports.Slider=r.Slider,exports.TagInput=i.TagInput,exports.TimePicker=s.TimePicker,exports.TimeRangePicker=s.TimeRangePicker;
+module.exports = require("../../src/components/inputs/index.cjs")

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

@@ -6,3 +6,5 @@ export * from "./time-picker";
 export * from "./slider";
 export * from "./tag-input";
 export * from "./inline-editable";
+export * from "./color-picker";
+export * from "./signature-pad";

package/dist/components/inputs/index.js

@@ -1,9 +1 @@
-import { AsyncMultiSelect as e, AsyncSelect as t } from "./async-select.js";
-import { OtpInput as n } from "./otp-input.js";
-import { Rating as r } from "./rating.js";
-import { RangeSlider as i, Slider as a } from "./slider.js";
-import { TagInput as o } from "./tag-input.js";
-import { InlineEditable as s } from "./inline-editable.js";
-import { JsonInput as c } from "./json-input.js";
-import { DateTimePicker as l, TimePicker as u, TimeRangePicker as d } from "./time-picker.js";
-export { e as AsyncMultiSelect, t as AsyncSelect, l as DateTimePicker, s as InlineEditable, c as JsonInput, n as OtpInput, i as RangeSlider, r as Rating, a as Slider, o as TagInput, u as TimePicker, d as TimeRangePicker };
+export * from "../../src/components/inputs/index.js"