@mkbabb/glass-ui 4.0.1 → 4.2.0

package/dist/search.js

@@ -1,170 +1,81 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { c as t, l as n, n as r, t as i } from "./vendor-CKmzio-i.js";
-import { n as a } from "./badge-D9XWW4GT.js";
-import { n as o } from "./button-DYCUa-tH.js";
-import { n as s, t as c } from "./DialogContent-DcKK8k9i.js";
-import { n as l, r as u, t as d } from "./PopoverContent-DL7E6vJP.js";
-import { t as f } from "./useTextHighlight-CWEi25hf.js";
-import { Fragment as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, nextTick as S, normalizeClass as C, onScopeDispose as w, openBlock as T, ref as E, renderList as D, renderSlot as O, resolveDynamicComponent as k, toDisplayString as A, unref as j, watch as M, withCtx as N } from "vue";
-//#region src/components/custom/search/composables/fuzzySearchIndex.ts
-function P(e, t) {
-	let n = e.length, r = t.length;
-	if (n === 0) return {
-		score: 0,
-		matches: []
-	};
-	if (n > r) return null;
-	let i = [], a = 0, o = 0, s = -2;
-	for (let c = 0; c < r && a < n; c++) {
-		if (e[a] !== t[c]) continue;
-		i.push(c);
-		let n = 1;
-		if (s === c - 1 && (n += 5), c === 0) n += 8;
-		else {
-			let e = t[c - 1];
-			" -_./\\:()".includes(e) ? n += 7 : t[c] >= "A" && t[c] <= "Z" && e >= "a" && e <= "z" && (n += 6);
-		}
-		a === c && (n += 3), o += n, s = c, a++;
-	}
-	return a < n ? null : (o -= Math.max(0, (r - n) * .1), {
-		score: o,
-		matches: i
-	});
-}
-function F(e, t) {
-	if (!t) return null;
-	let n = 0, r = [];
-	for (let i of e) {
-		let e = P(i, t);
-		if (!e) return null;
-		n += e.score;
-		for (let t of e.matches) r.push(t);
-	}
-	return {
-		score: n,
-		matches: r
-	};
-}
-function I(e, t) {
-	let n = 0, r = [], i = [
-		[t._lc.label, 12],
-		[t._lc.type, 10],
-		[t._lc.text, 3]
-	];
-	for (let [a, o] of i) {
-		if (!a) continue;
-		let i = F(e, a);
-		i && i.score * o > n && (n = i.score * o, r = a === t._lc.label ? i.matches : []);
-	}
-	return n <= 0 ? null : {
-		score: n,
-		matches: r
-	};
-}
-function L(e) {
-	return e.map((e) => ({
-		item: e,
-		_lc: {
-			label: e.label.toLowerCase(),
-			text: e.text.toLowerCase(),
-			type: e.type?.toLowerCase() ?? ""
-		}
-	}));
-}
-var R = /* @__PURE__ */ new WeakMap();
-function z(e) {
-	let t = R.get(e);
-	return t || (t = /* @__PURE__ */ new Map(), R.set(e, t)), t;
-}
-function B(e, t, n = 30) {
-	let r = t.toLowerCase().trim();
-	if (!r) return [];
-	let i = z(e), a = i.get(r);
-	if (a) return a.slice(0, n);
-	i.size > 200 && i.clear();
-	let o = r.split(/\s+/).filter(Boolean);
-	if (o.length === 0) return [];
-	let s = e;
-	if (r.length > 1) {
-		let e = r.slice(0, -1), t = i.get(e);
-		t && (s = t.map((e) => ({
-			item: e.item,
-			_lc: {
-				label: e.item.label.toLowerCase(),
-				text: e.item.text.toLowerCase(),
-				type: e.item.type?.toLowerCase() ?? ""
-			}
-		})));
-	}
-	let c = [];
-	for (let e of s) {
-		let t = I(o, e);
-		t && c.push({
-			item: e.item,
-			score: t.score,
-			matchIndices: t.matches
-		});
-	}
-	return c.sort((e, t) => t.score - e.score), i.set(r, c), c.slice(0, n);
-}
-function V(e) {
-	if (e) {
-		R.delete(e);
-		return;
-	}
-	R = /* @__PURE__ */ new WeakMap();
-}
-//#endregion
-//#region src/components/custom/search/FuzzySearch.vue?vue&type=script&setup=true&lang.ts
-var H = ["placeholder", "value"], U = ["onClick", "onMouseenter"], W = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, G = { class: "flex items-center gap-2 border-b border-border/50 px-3.5 py-3" }, K = ["placeholder", "value"], q = ["onClick", "onMouseenter"], J = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-base text-foreground/85" }, Y = {
+import { c as t, l as n, n as r, t as i } from "./vendor-B2qOlYY3.js";
+import { n as a } from "./badge-Bt14yURi.js";
+import { n as o } from "./button-D1W9PrzI.js";
+import { n as s, t as c } from "./DialogContent-D8U9ZfWS.js";
+import { n as l, r as u, t as d } from "./PopoverContent-BuKyHZSz.js";
+import { t as f } from "./useControlSize-DAZ062x7.js";
+import { t as p } from "./useTextHighlight-Bma3UlKA.js";
+import { a as m, i as h, n as g, r as _, t as v } from "./useFuzzySearch-0fTYOhS4.js";
+import { Fragment as y, computed as b, createBlock as x, createCommentVNode as S, createElementBlock as C, createElementVNode as w, createTextVNode as T, createVNode as E, defineComponent as D, nextTick as O, normalizeClass as k, openBlock as A, ref as j, renderList as M, renderSlot as N, resolveDynamicComponent as P, toDisplayString as F, unref as I, watch as L, withCtx as R } from "vue";
+import { cva as z } from "class-variance-authority";
+//#region src/components/custom/search/searchVariants.ts
+var B = z("", {
+	variants: { variant: {
+		inline: "",
+		bare: "border-none bg-transparent p-0 rounded-none",
+		floating: "border-none bg-transparent p-0 rounded-none"
+	} },
+	defaultVariants: { variant: "inline" }
+}), V = ["data-surface"], H = ["placeholder", "value"], U = [
+	"data-highlighted",
+	"onClick",
+	"onMouseenter"
+], W = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, G = { class: "flex items-center gap-2 border-b border-border/50 [--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block)" }, K = ["placeholder", "value"], q = [
+	"data-highlighted",
+	"onClick",
+	"onMouseenter"
+], J = { class: "fuzzy-search-label flex-1 min-w-0 truncate text-foreground/85" }, Y = {
 	key: 1,
 	class: "px-4 py-8 text-center text-muted-foreground/60"
-}, X = /* @__PURE__ */ x({
+}, X = /* @__PURE__ */ D({
 	__name: "FuzzySearch",
 	props: {
 		state: {},
-		variant: { default: "sidebar" },
+		variant: { default: "inline" },
+		size: { default: "default" },
+		surface: { default: "glass" },
 		placeholder: { default: "Search…" },
 		typeLabel: {}
 	},
-	setup(e, { expose: x }) {
-		let w = e, O = E(null), k = E(null), F = m({
-			get: () => w.state.isOpen.value && !w.state.isExpanded.value && w.state.results.value.length > 0,
+	setup(m, { expose: g }) {
+		let _ = m, v = j(null), D = j(null), N = b({
+			get: () => _.state.isOpen.value && !_.state.isExpanded.value && _.state.results.value.length > 0,
 			set: (e) => {
-				e || w.state.close();
+				e || _.state.close();
 			}
 		});
-		M(() => w.state.selectedIndex.value, () => {
-			S(() => document.querySelector(".fuzzy-search-result.is-selected")?.scrollIntoView({ block: "nearest" }));
-		}), M(() => w.state.isOpen.value, (e) => {
-			e && S(() => O.value?.focus());
-		}), M(() => w.state.isExpanded.value, (e) => {
-			e && S(() => k.value?.focus());
-		}), M([
-			() => w.state.query.value,
-			() => w.state.results.value,
-			() => w.state.isExpanded.value,
-			F
+		L(() => _.state.selectedIndex.value, () => {
+			O(() => document.querySelector(".fuzzy-search-result.is-selected")?.scrollIntoView({ block: "nearest" }));
+		}), L(() => _.state.isOpen.value, (e) => {
+			e && O(() => v.value?.focus());
+		}), L(() => _.state.isExpanded.value, (e) => {
+			e && O(() => D.value?.focus());
+		}), L([
+			() => _.state.query.value,
+			() => _.state.results.value,
+			() => _.state.isExpanded.value,
+			N
 		], () => {
-			Z(w.state.isExpanded.value ? B.value : F.value ? z.value : null);
+			te(_.state.isExpanded.value ? Q.value : N.value ? Z.value : null);
 		}, { flush: "post" });
-		function I() {
-			O.value?.focus();
+		function P() {
+			v.value?.focus();
 		}
-		x({ focus: I });
-		function L(e) {
+		g({ focus: P });
+		function z(e) {
 			return e.item.label || e.item.text.slice(0, 120);
 		}
-		function R(e) {
-			return w.typeLabel ? w.typeLabel(e.item) : e.item.type ?? "";
+		function X(e) {
+			return _.typeLabel ? _.typeLabel(e.item) : e.item.type ?? "";
 		}
-		let z = E(null), B = E(null), V = f("glass-search-mark");
-		function X(e, t) {
+		let Z = j(null), Q = j(null), $ = p("glass-search-mark");
+		function ee(e, t) {
 			let n = t.toLowerCase().trim().split(/\s+/).filter(Boolean);
 			if (n.length === 0) return [];
 			let r = e.toLowerCase(), i = /* @__PURE__ */ new Set();
 			for (let e of n) {
-				let t = P(e, r);
+				let t = h(e, r);
 				if (t) for (let e of t.matches) i.add(e);
 			}
 			let a = [];
@@ -177,173 +88,184 @@ var H = ["placeholder", "value"], U = ["onClick", "onMouseenter"], W = { class:
 			}
 			return a;
 		}
-		function Z(e) {
+		function te(e) {
 			if (!e) {
-				V.clear();
+				$.clear();
 				return;
 			}
-			S(() => V.setFromMatches(e, w.state.query.value, X));
+			O(() => $.setFromMatches(e, _.state.query.value, ee));
 		}
-		return (f, m) => (T(), _("div", { class: C(["fuzzy-search relative", `fuzzy-search--${e.variant}`]) }, [b(j(u), {
-			open: F.value,
-			"onUpdate:open": m[6] ||= (e) => F.value = e
+		return (p, h) => (A(), C("div", { class: k(["fuzzy-search relative", `fuzzy-search--${m.variant}`]) }, [E(I(u), {
+			open: N.value,
+			"onUpdate:open": h[6] ||= (e) => N.value = e
 		}, {
-			default: N(() => [b(j(l), { "as-child": "" }, {
-				default: N(() => [v("div", { class: C(["input-bar", e.variant === "floating" && "!border-none !bg-transparent !p-0 !rounded-none"]) }, [
-					b(j(r), { class: "h-3.5 w-3.5 shrink-0 text-muted-foreground/70" }),
-					v("input", {
+			default: R(() => [E(I(l), { "as-child": "" }, {
+				default: R(() => [w("div", {
+					class: k(["input-bar", I(e)(I(f)(m.size), I(B)({ variant: m.variant }))]),
+					"data-surface": m.surface
+				}, [
+					E(I(r), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
+					w("input", {
 						ref_key: "inputRef",
-						ref: O,
+						ref: v,
 						type: "text",
-						class: "input-bar-field text-sm",
-						placeholder: e.placeholder,
-						value: e.state.query.value,
-						onInput: m[0] ||= (t) => e.state.query.value = t.target.value,
-						onKeydown: m[1] ||= (...t) => e.state.onKeydown && e.state.onKeydown(...t),
-						onFocus: m[2] ||= (t) => e.state.isOpen.value = !0
+						class: "input-bar-field",
+						placeholder: m.placeholder,
+						value: m.state.query.value,
+						onInput: h[0] ||= (e) => m.state.query.value = e.target.value,
+						onKeydown: h[1] ||= (...e) => m.state.onKeydown && m.state.onKeydown(...e),
+						onFocus: h[2] ||= (e) => m.state.isOpen.value = !0
 					}, null, 40, H),
-					e.state.query.value && e.state.results.value.length > 0 ? (T(), h(j(o), {
+					m.state.query.value && m.state.results.value.length > 0 ? (A(), x(I(o), {
 						key: 0,
 						type: "button",
 						variant: "ghost",
 						size: "icon",
-						class: "!h-6 !w-6",
-						title: e.state.isExpanded.value ? "Collapse" : "Expand",
-						onClick: m[3] ||= (t) => e.state.toggleExpanded()
+						class: "size-(--search-button-size)",
+						title: m.state.isExpanded.value ? "Collapse" : "Expand",
+						onClick: h[3] ||= (e) => m.state.toggleExpanded()
 					}, {
-						default: N(() => [e.state.isExpanded.value ? (T(), h(j(t), {
+						default: R(() => [m.state.isExpanded.value ? (A(), x(I(t), {
 							key: 1,
-							class: "h-3 w-3"
-						})) : (T(), h(j(n), {
+							class: "size-(--search-icon-size)"
+						})) : (A(), x(I(n), {
 							key: 0,
-							class: "h-3 w-3"
+							class: "size-(--search-icon-size)"
 						}))]),
 						_: 1
-					}, 8, ["title"])) : g("", !0),
-					e.state.query.value ? (T(), h(j(o), {
+					}, 8, ["title"])) : S("", !0),
+					m.state.query.value ? (A(), x(I(o), {
 						key: 1,
 						type: "button",
 						variant: "ghost",
 						size: "icon",
-						class: "!h-6 !w-6",
+						class: "size-(--search-button-size)",
 						title: "Clear search",
-						onClick: m[4] ||= (t) => e.state.close()
+						onClick: h[4] ||= (e) => m.state.close()
 					}, {
-						default: N(() => [b(j(i), { class: "h-3 w-3" })]),
+						default: R(() => [E(I(i), { class: "size-(--search-icon-size)" })]),
 						_: 1
-					})) : g("", !0)
-				], 2)]),
+					})) : S("", !0)
+				], 10, V)]),
 				_: 1
-			}), b(j(d), {
+			}), E(I(d), {
 				align: "start",
 				"side-offset": 4,
 				portal: !1,
 				class: "w-(--reka-popover-trigger-width) max-h-[50vh] overflow-y-auto overscroll-contain p-1",
-				onOpenAutoFocus: m[5] ||= (e) => e.preventDefault()
+				onOpenAutoFocus: h[5] ||= (e) => e.preventDefault()
 			}, {
-				default: N(() => [v("div", {
+				default: R(() => [w("div", {
 					ref_key: "inlineListRef",
-					ref: z
-				}, [(T(!0), _(p, null, D(e.state.results.value, (t, n) => (T(), _("button", {
-					key: `${t.item.id}-${t.item.type}-${n}`,
+					ref: Z
+				}, [(A(!0), C(y, null, M(m.state.results.value, (e, t) => (A(), C("button", {
+					key: `${e.item.id}-${e.item.type}-${t}`,
 					type: "button",
-					class: C(["fuzzy-search-result interactive-item flex w-full items-baseline gap-1.5 px-2 py-1.5 text-left text-sm", { "is-selected bg-muted/50": n === e.state.selectedIndex.value }]),
-					onClick: (n) => e.state.selectResult(t),
-					onMouseenter: (t) => e.state.selectedIndex.value = n
-				}, [R(t) ? (T(), h(j(a), {
+					class: k(["fuzzy-search-result glass-menu-row interactive-item flex w-full items-baseline gap-1.5 px-2 py-1.5 text-left text-(length:--search-result-text)", { "is-selected": t === m.state.selectedIndex.value }]),
+					"data-highlighted": t === m.state.selectedIndex.value ? "" : void 0,
+					onClick: (t) => m.state.selectResult(e),
+					onMouseenter: (e) => m.state.selectedIndex.value = t
+				}, [X(e) ? (A(), x(I(a), {
 					key: 0,
 					variant: "secondary",
-					class: "shrink-0 text-[0.6rem] font-bold uppercase tracking-wider"
+					class: "shrink-0 text-(length:--search-result-text-secondary) font-bold uppercase tracking-wider"
 				}, {
-					default: N(() => [y(A(R(t)), 1)]),
+					default: R(() => [T(F(X(e)), 1)]),
 					_: 2
-				}, 1024)) : g("", !0), v("span", W, A(L(t)), 1)], 42, U))), 128))], 512)]),
+				}, 1024)) : S("", !0), w("span", W, F(z(e)), 1)], 42, U))), 128))], 512)]),
 				_: 1
 			})]),
 			_: 1
-		}, 8, ["open"]), b(j(s), {
-			open: e.state.isExpanded.value,
-			"onUpdate:open": m[11] ||= (t) => e.state.isExpanded.value = t
+		}, 8, ["open"]), E(I(s), {
+			open: m.state.isExpanded.value,
+			"onUpdate:open": h[11] ||= (e) => m.state.isExpanded.value = e
 		}, {
-			default: N(() => [b(j(c), {
-				surface: "opaque",
-				class: "!max-w-[36rem] !top-[12vh] !translate-y-0 max-h-[70vh] !p-0 overflow-hidden flex flex-col gap-0",
-				onOpenAutoFocus: m[10] ||= (e) => e.preventDefault()
+			default: R(() => [E(I(c), {
+				surface: m.surface,
+				class: "max-w-(--search-modal-width) max-h-[70vh] [--overlay-pad-inline:0] [--overlay-pad-block:0] [--search-modal-width:36rem] overflow-hidden flex flex-col gap-0",
+				onOpenAutoFocus: h[10] ||= (e) => e.preventDefault()
 			}, {
-				default: N(() => [
-					v("div", G, [
-						b(j(r), { class: "h-4 w-4 shrink-0 text-muted-foreground/70" }),
-						v("input", {
+				default: R(() => [
+					w("div", G, [
+						E(I(r), { class: "size-(--search-icon-size) shrink-0 text-muted-foreground/70" }),
+						w("input", {
 							ref_key: "modalInputRef",
-							ref: k,
+							ref: D,
 							type: "text",
-							class: "input-bar-field flex-1 text-base",
-							placeholder: e.placeholder,
-							value: e.state.query.value,
-							onInput: m[7] ||= (t) => e.state.query.value = t.target.value,
-							onKeydown: m[8] ||= (...t) => e.state.onKeydown && e.state.onKeydown(...t)
+							class: "input-bar-field flex-1 text-(length:--search-result-text)",
+							placeholder: m.placeholder,
+							value: m.state.query.value,
+							onInput: h[7] ||= (e) => m.state.query.value = e.target.value,
+							onKeydown: h[8] ||= (...e) => m.state.onKeydown && m.state.onKeydown(...e)
 						}, null, 40, K),
-						b(j(o), {
+						E(I(o), {
 							type: "button",
 							variant: "ghost",
 							size: "icon",
-							class: "!h-7 !w-7",
+							class: "size-(--search-button-size)",
 							title: "Collapse",
-							onClick: m[9] ||= (t) => e.state.toggleExpanded()
+							onClick: h[9] ||= (e) => m.state.toggleExpanded()
 						}, {
-							default: N(() => [b(j(t), { class: "h-3.5 w-3.5" })]),
+							default: R(() => [E(I(t), { class: "size-(--search-icon-size)" })]),
 							_: 1
 						})
 					]),
-					e.state.results.value.length > 0 ? (T(), _("div", {
+					m.state.results.value.length > 0 ? (A(), C("div", {
 						key: 0,
 						ref_key: "modalListRef",
-						ref: B,
+						ref: Q,
 						class: "flex-1 min-h-0 overflow-y-auto overscroll-contain p-1.5"
-					}, [(T(!0), _(p, null, D(e.state.results.value, (t, n) => (T(), _("button", {
-						key: `modal-${t.item.id}-${t.item.type}-${n}`,
+					}, [(A(!0), C(y, null, M(m.state.results.value, (e, t) => (A(), C("button", {
+						key: `modal-${e.item.id}-${e.item.type}-${t}`,
 						type: "button",
-						class: C(["fuzzy-search-result interactive-item flex w-full items-baseline gap-1.5 px-2.5 py-2 text-left", { "is-selected bg-muted/50": n === e.state.selectedIndex.value }]),
-						onClick: (n) => e.state.selectResult(t),
-						onMouseenter: (t) => e.state.selectedIndex.value = n
-					}, [R(t) ? (T(), h(j(a), {
+						class: k(["fuzzy-search-result glass-menu-row interactive-item flex w-full items-baseline gap-1.5 px-2.5 py-2 text-left text-(length:--search-result-text)", { "is-selected": t === m.state.selectedIndex.value }]),
+						"data-highlighted": t === m.state.selectedIndex.value ? "" : void 0,
+						onClick: (t) => m.state.selectResult(e),
+						onMouseenter: (e) => m.state.selectedIndex.value = t
+					}, [X(e) ? (A(), x(I(a), {
 						key: 0,
 						variant: "secondary",
-						class: "shrink-0 text-[0.65rem] font-bold uppercase tracking-wider"
+						class: "shrink-0 text-(length:--search-result-text-secondary) font-bold uppercase tracking-wider"
 					}, {
-						default: N(() => [y(A(R(t)), 1)]),
+						default: R(() => [T(F(X(e)), 1)]),
 						_: 2
-					}, 1024)) : g("", !0), v("span", J, A(L(t)), 1)], 42, q))), 128))], 512)) : (T(), _("div", Y, "No results")),
-					m[12] ||= v("div", { class: "flex items-center gap-4 border-t border-border/50 px-3.5 py-2 text-mono-caption text-muted-foreground/60" }, [
-						v("span", { class: "flex items-center gap-1" }, [
-							v("kbd", { class: "kbd" }, "↑"),
-							v("kbd", { class: "kbd" }, "↓"),
-							y(" navigate")
+					}, 1024)) : S("", !0), w("span", J, F(z(e)), 1)], 42, q))), 128))], 512)) : (A(), C("div", Y, "No results")),
+					h[12] ||= w("div", { class: "flex items-center gap-4 border-t border-border/50 [--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block) text-mono-caption text-muted-foreground/60" }, [
+						w("span", { class: "flex items-center gap-1" }, [
+							w("kbd", { class: "kbd" }, "↑"),
+							w("kbd", { class: "kbd" }, "↓"),
+							T(" navigate")
 						]),
-						v("span", { class: "flex items-center gap-1" }, [v("kbd", { class: "kbd" }, "↵"), y(" select")]),
-						v("span", { class: "flex items-center gap-1" }, [v("kbd", { class: "kbd" }, "esc"), y(" close")])
+						w("span", { class: "flex items-center gap-1" }, [w("kbd", { class: "kbd" }, "↵"), T(" select")]),
+						w("span", { class: "flex items-center gap-1" }, [w("kbd", { class: "kbd" }, "esc"), T(" close")])
 					], -1)
 				]),
 				_: 1
-			})]),
+			}, 8, ["surface"])]),
 			_: 1
 		}, 8, ["open"])], 2));
 	}
-}), Z = ["value", "placeholder"], Q = /* @__PURE__ */ x({
+}), Z = ["value", "placeholder"], Q = /* @__PURE__ */ D({
 	__name: "SearchBar",
 	props: {
 		modelValue: { default: "" },
 		placeholder: { default: "Search…" },
 		icon: {},
-		tag: { default: "div" }
+		tag: { default: "div" },
+		size: { default: "default" },
+		surface: { default: "glass" },
+		variant: { default: "inline" }
 	},
 	emits: ["update:modelValue"],
 	setup(t, { expose: n, emit: i }) {
-		let a = i, o = E(null);
-		return n({ inputRef: o }), (n, i) => (T(), h(k(t.tag), { class: C(j(e)("input-bar", n.$attrs.class)) }, {
-			default: N(() => [
-				(T(), h(k(t.icon ?? j(r)), { class: "w-3.5 h-3.5 text-muted-foreground shrink-0" })),
-				v("input", {
+		let a = i, o = j(null);
+		return n({ inputRef: o }), (n, i) => (A(), x(P(t.tag), {
+			class: k(I(e)("input-bar", I(f)(t.size), I(B)({ variant: t.variant }), n.$attrs.class)),
+			"data-surface": t.surface
+		}, {
+			default: R(() => [
+				(A(), x(P(t.icon ?? I(r)), { class: "size-(--search-icon-size) text-muted-foreground shrink-0" })),
+				w("input", {
 					ref_key: "inputRef",
 					ref: o,
 					value: t.modelValue,
@@ -351,77 +273,11 @@ var H = ["placeholder", "value"], U = ["onClick", "onMouseenter"], W = { class:
 					class: "input-bar-field",
 					onInput: i[0] ||= (e) => a("update:modelValue", e.target.value)
 				}, null, 40, Z),
-				O(n.$slots, "default")
+				N(n.$slots, "default")
 			]),
 			_: 3
-		}, 8, ["class"]));
+		}, 8, ["class", "data-surface"]));
 	}
 });
 //#endregion
-//#region src/components/custom/search/composables/useFuzzySearch.ts
-function $(e) {
-	let t = typeof e.items == "function" ? e.items : () => e.items, n = e.debounceMs ?? 120, r = e.maxResults ?? 30, i = E(""), a = E(!1), o = E(!1), s = E(0), c = E(""), l = m(() => t()), u = m(() => L(l.value)), d;
-	function f(e = d) {
-		e !== void 0 && (clearTimeout(e), d === e && (d = void 0));
-	}
-	M(i, (e, t, r) => {
-		if (f(), !e || n <= 0) {
-			c.value = e;
-			return;
-		}
-		let i = setTimeout(() => {
-			d === i && (c.value = e, d = void 0);
-		}, n);
-		d = i, r(() => f(i));
-	}), M(l, () => {
-		f(), c.value = i.value, s.value = 0;
-	}, { deep: !0 });
-	let p = m(() => B(u.value, c.value, r));
-	M(p, () => {
-		s.value = 0;
-	});
-	function h(t) {
-		e.onSelect?.(t), g();
-	}
-	function g() {
-		a.value = !1, o.value = !1, f(), i.value = "", c.value = "", s.value = 0, V(u.value);
-	}
-	function _() {
-		a.value = !0;
-	}
-	function v() {
-		o.value = !o.value;
-	}
-	function y(e) {
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault(), s.value < p.value.length - 1 && s.value++;
-				break;
-			case "ArrowUp":
-				e.preventDefault(), s.value > 0 && s.value--;
-				break;
-			case "Enter":
-				e.preventDefault(), p.value[s.value] && h(p.value[s.value]);
-				break;
-			case "Escape":
-				e.preventDefault(), o.value ? o.value = !1 : g();
-				break;
-		}
-	}
-	return w(() => {
-		f(), V(u.value);
-	}, !0), {
-		query: i,
-		results: p,
-		isOpen: a,
-		isExpanded: o,
-		selectedIndex: s,
-		selectResult: h,
-		close: g,
-		open: _,
-		toggleExpanded: v,
-		onKeydown: y
-	};
-}
-//#endregion
-export { X as FuzzySearch, Q as SearchBar, L as buildIndex, V as clearSearchCache, P as fuzzyMatch, B as searchIndex, $ as useFuzzySearch };
+export { X as FuzzySearch, Q as SearchBar, g as buildIndex, _ as clearSearchCache, h as fuzzyMatch, B as searchFieldVariants, m as searchIndex, v as useFuzzySearch };

package/dist/select.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./SelectScrollDownButton-CrA8F0iV.js";
-import { t as s } from "./SelectGroup-DwwjicPY.js";
-import { n as c, t as l } from "./SelectSeparator-DXswVdRz.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./SelectScrollDownButton-3mFHX_R-.js";
+import { t as s } from "./SelectGroup-Dcczq44n.js";
+import { n as c, t as l } from "./SelectSeparator-CNRGG7Ew.js";
 export { a as Select, t as SelectContent, s as SelectGroup, i as SelectItem, c as SelectLabel, o as SelectScrollDownButton, n as SelectScrollUpButton, l as SelectSeparator, e as SelectTrigger, r as SelectValue };

package/dist/selectable-chip.d.ts

@@ -0,0 +1 @@
+export * from "./components/custom/selectable-chip";

package/dist/selectable-chip.js

@@ -0,0 +1,48 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { u as t } from "./color-B9jZdhJX.js";
+import { t as n } from "./chipVariants-BJQ0I2kB.js";
+import { computed as r, createBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, unref as l, withCtx as u } from "vue";
+import { Toggle as d, useForwardPropsEmits as f } from "reka-ui";
+//#endregion
+//#region src/components/custom/selectable-chip/SelectableChip.vue
+var p = /* @__PURE__ */ a({
+	__name: "SelectableChip",
+	props: {
+		defaultValue: { type: Boolean },
+		modelValue: { type: [Boolean, null] },
+		disabled: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		name: {},
+		required: { type: Boolean },
+		tone: {},
+		size: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(a, { emit: p }) {
+		let m = a, h = p, { toneStyle: g } = t(() => m.tone ?? "var(--primary)"), _ = f(() => {
+			let { class: e, tone: t, size: n, ...r } = m;
+			return r;
+		}, h), v = r(() => e(n({ size: m.size }), m.class)), y = r(() => ({
+			...g.value,
+			"--glass-fill-tint": m.tone ?? "var(--primary)",
+			"--glass-fill-strength": "var(--chip-glass-strength, 12%)"
+		}));
+		return (e, t) => (s(), i(l(d), o(l(_), {
+			class: v.value,
+			style: y.value
+		}), {
+			default: u(() => [c(e.$slots, "default")]),
+			_: 3
+		}, 16, ["class", "style"]));
+	}
+});
+//#endregion
+export { p as SelectableChip, n as selectableChipVariants };

package/dist/separator.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Separator-pKF0oA4M.js";
+import { t as e } from "./Separator-Cf9-JFgi.js";
 export { e as Separator };