themelia-react-ui 2.0.0 → 2.0.2

package/dist/features/global-search.js

@@ -1,25 +1,28 @@
 "use client";
-import { s as e } from "../ui-provider-D2_TeLqw.js";
-import { interpolateString as t, useStrings as n } from "../lib/strings.js";
-import { t as r } from "../utils-Cospvlj1.js";
-import { t as i } from "../buttons-DS0ZIwJ_.js";
-import { a, s as o } from "../typography-CAr3dQhX.js";
-import { t as s } from "../structure-hzCW-XsV.js";
-import { r as c } from "../overlays-DhZO7N-I.js";
-import { _ as l, g as u } from "../primitives-BHrwQXFC.js";
-import { i as d, n as f, s as p } from "../avatar-djdaaQ_s.js";
-import { t as m } from "../badge-0tATj-tW.js";
-import { t as h } from "../field-affordance-recipes-CkOCdE2y.js";
-import { t as g } from "../editable-text-recipe-Bkm6wKHp.js";
-import { g as _, u as v } from "../form-sizing-uWP4lzVh.js";
-import { i as y, r as b, t as x } from "../tabs-Dk8E_knt.js";
-import { l as S } from "../data-display-3xWQUnMA.js";
-import * as C from "react";
-import { useEffect as w, useMemo as T, useRef as E, useState as D } from "react";
-import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
-import { ArrowRight as j, Loader2 as M, Search as N, X as P } from "lucide-react";
+import { interpolateString as e, useStrings as t } from "../lib/strings.js";
+import { t as n } from "../utils-BRhFDwuU.js";
+import { t as r } from "../buttons-DPZekJFu.js";
+import { c as i } from "../typography-UTnveOEy.js";
+import { t as a } from "../focus-recipes-B653VaLq.js";
+import { t as o } from "../structure-BmisBK-3.js";
+import { i as s, n as c } from "../tone-recipes-BPsRAvhu.js";
+import { a as l, n as u } from "../surface-recipes-BKRVW8Os.js";
+import { a as d, n as f, r as p } from "../popover.recipes-D3j8R8Yp.js";
+import { r as m } from "../overlays-DNWmZrJ4.js";
+import { t as h } from "../interaction-recipes-XR9ZpVYL.js";
+import { _ as g, g as _ } from "../primitives-BFK08r9M.js";
+import { i as v, n as y, s as b } from "../avatar-DAPlDvhJ.js";
+import { t as x } from "../badge-HpFqoqSY.js";
+import { n as S, t as C } from "../field-affordance-recipes-DZhnIL_Y.js";
+import { a as w, c as T, o as E } from "../text-inputs-f9Ia-aCi.js";
+import { i as ee, r as te, t as ne } from "../tabs-CDocW5D1.js";
+import { s as D } from "../data-display-DT_khPl_.js";
+import * as O from "react";
+import { useEffect as k, useMemo as A, useRef as j, useState as M } from "react";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+import { ArrowRight as I, Loader2 as L, Search as R } from "lucide-react";
 //#region src/components/features/global-search/global-search.strings.ts
-var F = {
+var z = {
 	dialogTitle: "Search",
 	placeholder: "Search…",
 	clear: "Clear search",
@@ -37,30 +40,30 @@ var F = {
 };
 //#endregion
 //#region src/components/features/global-search/hooks/use-global-search.ts
-function I({ results: e, query: t, onResultSelect: n, onClose: r }) {
-	let [i, a] = D("all"), [o, s] = D(0);
-	w(() => {
+function B({ results: e, query: t, onResultSelect: n, onClose: r }) {
+	let [i, a] = M("all"), [o, s] = M(0);
+	k(() => {
 		a("all"), s(0);
 	}, [t]);
-	let c = T(() => {
+	let c = A(() => {
 		let t = {};
 		for (let n of e) (t[n.group] ??= []).push(n);
 		return t;
-	}, [e]), l = T(() => {
+	}, [e]), l = A(() => {
 		let t = { all: e.length };
 		for (let [e, n] of Object.entries(c)) t[e] = n.length;
 		return t;
-	}, [e.length, c]), u = T(() => {
+	}, [e.length, c]), u = A(() => {
 		if (i === "all") return c;
 		let e = c[i];
 		return e ? { [i]: e } : {};
-	}, [c, i]), d = T(() => i === "all" ? e.slice() : c[i] ?? [], [
+	}, [c, i]), d = A(() => i === "all" ? e.slice() : c[i] ?? [], [
 		i,
 		c,
 		e
-	]), f = E(o);
+	]), f = j(o);
 	f.current = o;
-	let p = E(d);
+	let p = j(d);
 	return p.current = d, {
 		grouped: c,
 		tabCounts: l,
@@ -92,11 +95,11 @@ function I({ results: e, query: t, onResultSelect: n, onClose: r }) {
 }
 //#endregion
 //#region src/components/features/global-search/partials/global-search-empty-state.tsx
-function L({ title: e, hint: t }) {
-	return /* @__PURE__ */ k(S, {
+function V({ title: e, hint: t }) {
+	return /* @__PURE__ */ P(D, {
 		title: e,
 		description: t,
-		media: /* @__PURE__ */ k(N, {
+		media: /* @__PURE__ */ P(R, {
 			className: "size-icon",
 			"aria-hidden": "true"
 		}),
@@ -107,209 +110,213 @@ function L({ title: e, hint: t }) {
 }
 //#endregion
 //#region src/components/features/global-search/partials/global-search-footer.tsx
-var R = "rounded border border-border bg-muted/40 px-1.5 py-0.5 font-mono text-xs leading-none text-muted-foreground";
-function z({ navigateLabel: e, openLabel: t, closeLabel: n, trailing: i, className: a }) {
-	return /* @__PURE__ */ A("div", {
-		className: r("global-search-footer--component flex flex-col items-stretch gap-space-xs border-t border-border/60 px-surface py-row-y @sm/global-search:flex-row @sm/global-search:items-center @sm/global-search:justify-between", a),
-		children: [/* @__PURE__ */ A("span", {
-			className: "global-search-footer--shortcuts flex items-center gap-space-md",
-			children: [
-				/* @__PURE__ */ k("kbd", {
-					className: R,
-					children: "↑↓"
-				}),
-				/* @__PURE__ */ k(o, {
-					tag: "span",
-					size: "xs",
-					type: "secondary",
-					children: e
-				}),
-				/* @__PURE__ */ k("kbd", {
-					className: R,
-					children: "↵"
-				}),
-				/* @__PURE__ */ k(o, {
-					tag: "span",
-					size: "xs",
-					type: "secondary",
-					children: t
-				}),
-				/* @__PURE__ */ k("kbd", {
-					className: R,
-					children: "esc"
-				}),
-				/* @__PURE__ */ k(o, {
-					tag: "span",
-					size: "xs",
-					type: "secondary",
-					children: n
-				})
-			]
-		}), i ? /* @__PURE__ */ k("span", {
-			className: "global-search-footer--trailing shrink-0 self-end whitespace-nowrap @sm/global-search:self-auto",
-			children: i
-		}) : null]
+function H({ keys: e, label: t }) {
+	return /* @__PURE__ */ F("span", {
+		className: "global-search-footer--shortcut inline-flex items-center gap-space-xs",
+		children: [/* @__PURE__ */ P("kbd", {
+			className: u,
+			children: e
+		}), /* @__PURE__ */ P(i, {
+			tag: "span",
+			size: "xs",
+			type: "secondary",
+			children: t
+		})]
 	});
 }
-//#endregion
-//#region src/components/features/global-search/partials/global-search-idle-state.tsx
-function B({ sections: e, fallbackIcons: t }) {
-	return /* @__PURE__ */ k("div", {
-		className: "global-search-idle-state--component p-surface",
-		children: /* @__PURE__ */ k(s, {
-			gap: "xl",
-			children: e.map((e, n) => {
-				let i = e.icon ?? (n === 0 ? t?.recent : t?.suggestions);
-				return /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("div", {
-					className: "flex items-center gap-space-md px-row-x pb-space-sm",
-					children: [!!i && /* @__PURE__ */ k(i, {
-						className: "size-icon-md text-muted-foreground",
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ k(a, { children: e.label })]
-				}), /* @__PURE__ */ k(s, {
-					render: /* @__PURE__ */ k("ul", {}),
-					gap: "2xs",
-					className: "m-0 list-none p-0",
-					children: e.items.map((e) => {
-						let t = e.icon ?? N;
-						return /* @__PURE__ */ k("li", { children: /* @__PURE__ */ A("button", {
-							type: "button",
-							onClick: e.onSelect,
-							className: r("box-border m-0 flex w-full cursor-pointer items-center justify-start border-0 bg-transparent font-sans text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset gap-space-lg rounded-inner px-row-x py-row-y-sm text-left transition-colors", "hover:bg-muted/50 focus-visible:bg-muted/50"),
-							children: [/* @__PURE__ */ k(t, {
-								className: "size-icon-md text-muted-foreground",
-								"aria-hidden": "true"
-							}), /* @__PURE__ */ k(o, {
-								className: "flex-1 truncate",
-								children: e.label
-							})]
-						}) }, e.id);
+function U({ navigateLabel: e, openLabel: t, closeLabel: r, trailing: i, className: a }) {
+	return /* @__PURE__ */ P("div", {
+		className: n("global-search-footer--component", p.menuRegion, l.anchored.footer, a),
+		children: /* @__PURE__ */ F("div", {
+			className: "global-search-footer--body flex flex-col items-stretch gap-space-xs px-row-x @sm/global-search:flex-row @sm/global-search:items-center @sm/global-search:justify-between",
+			children: [/* @__PURE__ */ F("span", {
+				className: "global-search-footer--shortcuts flex flex-wrap items-center gap-x-space-lg gap-y-space-xs",
+				children: [
+					/* @__PURE__ */ P(H, {
+						keys: "↑↓",
+						label: e
+					}),
+					/* @__PURE__ */ P(H, {
+						keys: "↵",
+						label: t
+					}),
+					/* @__PURE__ */ P(H, {
+						keys: "esc",
+						label: r
 					})
-				})] }, e.id);
-			})
+				]
+			}), i ? /* @__PURE__ */ P("span", {
+				className: "global-search-footer--trailing shrink-0 self-end whitespace-nowrap @sm/global-search:self-auto",
+				children: i
+			}) : null]
 		})
 	});
 }
 //#endregion
+//#region src/components/features/global-search/partials/global-search-group-heading.tsx
+function W({ label: e, icon: t, action: n }) {
+	return /* @__PURE__ */ F("div", {
+		className: "global-search-group--heading flex items-center justify-between gap-space-sm px-row-x pt-space-md pb-space-xs",
+		children: [/* @__PURE__ */ F("span", {
+			className: "inline-flex min-w-0 items-center gap-space-sm",
+			children: [!!t && /* @__PURE__ */ P(t, {
+				className: "size-icon-sm shrink-0 text-muted-foreground",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ P(i, {
+				tag: "span",
+				size: "xs",
+				type: "secondary",
+				weight: "medium",
+				lineHeight: "tight",
+				className: "truncate",
+				children: e
+			})]
+		}), n]
+	});
+}
+//#endregion
+//#region src/components/features/global-search/partials/global-search-idle-state.tsx
+function G({ sections: e, fallbackIcons: t }) {
+	return /* @__PURE__ */ P("div", {
+		className: n("global-search-idle-state--component", d.compact),
+		children: e.map((e, r) => /* @__PURE__ */ F("div", {
+			className: "global-search-idle-state--section",
+			children: [/* @__PURE__ */ P(W, {
+				label: e.label,
+				icon: e.icon ?? (r === 0 ? t?.recent : t?.suggestions)
+			}), /* @__PURE__ */ P("ul", {
+				className: "m-0 flex list-none flex-col p-0",
+				children: e.items.map((e) => {
+					let t = e.icon ?? R;
+					return /* @__PURE__ */ P("li", { children: /* @__PURE__ */ F("button", {
+						type: "button",
+						onClick: e.onSelect,
+						className: n(`${h.nativeButtonReset} flex w-full cursor-pointer items-center justify-start text-inherit outline-none ${a.inset} text-left transition-colors`, f(), h.rowHover),
+						children: [/* @__PURE__ */ P(t, {
+							className: "size-icon shrink-0 text-muted-foreground",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ P(i, {
+							tag: "span",
+							type: "inherit",
+							weight: "medium",
+							lineHeight: "tight",
+							className: "flex-1 truncate",
+							children: e.label
+						})]
+					}) }, e.id);
+				})
+			})]
+		}, e.id))
+	});
+}
+//#endregion
 //#region src/components/features/global-search/partials/global-search-input.tsx
-var V = C.forwardRef(function({ value: t, onValueChange: n, onKeyDown: i, placeholder: a, clearLabel: o = "Clear search", loading: c = !1, autoFocus: l = !1 }, u) {
-	let d = C.useRef(null), { defaultScale: f } = e(), p = _(void 0, f);
-	return C.useImperativeHandle(u, () => d.current), C.useEffect(() => {
-		l && d.current?.focus();
-	}, [l]), /* @__PURE__ */ k("div", {
+var K = O.forwardRef(function({ value: e, onValueChange: t, onKeyDown: r, placeholder: i, clearLabel: a = "Clear search", loading: o = !1, autoFocus: s = !1 }, c) {
+	let l = O.useRef(null);
+	return O.useImperativeHandle(c, () => l.current), O.useEffect(() => {
+		s && l.current?.focus();
+	}, [s]), /* @__PURE__ */ P("div", {
 		"data-component": "global-search-input",
 		"data-slot": "global-search-input",
-		className: "global-search-input--component border-b border-border px-surface py-row-y",
-		children: /* @__PURE__ */ A(s, {
-			direction: "horizontal",
-			gap: "md",
-			wrap: !1,
-			children: [
-				/* @__PURE__ */ k(N, {
-					className: "size-icon shrink-0 text-muted-foreground",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ k("div", {
-					className: "min-w-0 flex-1",
-					children: /* @__PURE__ */ k("input", {
-						ref: d,
-						type: "text",
-						value: t,
-						onChange: (e) => n(e.target.value),
-						onKeyDown: i,
-						placeholder: a,
-						"aria-label": a,
-						autoComplete: "off",
-						spellCheck: !1,
-						className: r(v[p], g[p], "box-border m-0 block w-full min-w-0 border-0 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset rounded-inner")
-					})
-				}),
-				c && /* @__PURE__ */ k(M, {
-					className: "size-icon shrink-0 animate-spin text-muted-foreground",
+		className: "global-search-input--component px-surface-xs pt-surface-xs pb-space-xs",
+		children: /* @__PURE__ */ F(w, { children: [
+			/* @__PURE__ */ P(E, { children: /* @__PURE__ */ P(R, { "aria-hidden": "true" }) }),
+			/* @__PURE__ */ P(T, {
+				ref: l,
+				type: "text",
+				value: e,
+				onChange: (e) => t(e.target.value),
+				onKeyDown: r,
+				placeholder: i,
+				"aria-label": i,
+				autoComplete: "off",
+				spellCheck: !1
+			}),
+			(o || !!e) && /* @__PURE__ */ P(E, {
+				align: "inline-end",
+				children: o ? /* @__PURE__ */ P(L, {
+					className: "animate-spin",
 					"aria-hidden": "true"
-				}),
-				!c && !!t && /* @__PURE__ */ k("button", {
+				}) : /* @__PURE__ */ P("button", {
 					type: "button",
 					onClick: () => {
-						n(""), d.current?.focus();
+						t(""), l.current?.focus();
 					},
-					"aria-label": o,
-					className: r(h.target, h.focus, h.clear),
-					children: /* @__PURE__ */ k(P, { className: h.icon })
+					"aria-label": a,
+					className: n(S.target, S.focus, S.clear),
+					children: /* @__PURE__ */ P(C, {
+						className: S.icon,
+						"aria-hidden": "true"
+					})
 				})
-			]
-		})
+			})
+		] })
 	});
-}), H = {
-	neutral: "bg-muted text-muted-foreground",
-	primary: "bg-primary/5 text-primary-accent",
-	success: "bg-success/10 text-success",
-	warning: "bg-warning/10 text-warning-accent",
-	info: "bg-info/10 text-info",
-	destructive: "bg-destructive/10 text-destructive"
-}, U = {
+}), q = (e) => `${s[e].tint} ${s[e].ink}`, J = {
 	neutral: "bg-muted text-muted-foreground",
-	primary: "bg-primary/10 text-primary-accent",
-	success: "bg-success/10 text-success",
-	warning: "bg-warning/10 text-warning-accent",
-	info: "bg-info/10 text-info",
-	destructive: "bg-destructive/10 text-destructive"
-};
+	primary: q("primary"),
+	success: q("success"),
+	warning: q("warning"),
+	info: q("info"),
+	destructive: q("destructive")
+}, re = { ...J };
 //#endregion
 //#region src/components/features/global-search/partials/global-search-result-row.tsx
-function W(e, t) {
+function Y(e, t) {
 	let n = (t ?? "").trim();
 	if (!n) return e;
 	let r = e.toLowerCase(), i = n.toLowerCase(), a = r.indexOf(i);
-	return a < 0 ? e : /* @__PURE__ */ A(O, { children: [
+	return a < 0 ? e : /* @__PURE__ */ F(N, { children: [
 		e.slice(0, a),
-		/* @__PURE__ */ k("mark", {
-			className: "rounded-radius-sm bg-warning/40 px-0.5 text-foreground",
+		/* @__PURE__ */ P("mark", {
+			className: c.match,
 			children: e.slice(a, a + n.length)
 		}),
 		e.slice(a + n.length)
 	] });
 }
-function G({ result: e, active: t = !1, query: n = "", onSelect: i, onMouseEnter: a, className: c }) {
-	let h = e.thumbnail?.icon, g = H, _ = U;
-	return /* @__PURE__ */ A("button", {
+function X({ result: e, active: t = !1, query: r = "", onSelect: s, onMouseEnter: c, className: l }) {
+	let u = e.thumbnail?.icon, d = J, p = re;
+	return /* @__PURE__ */ F("button", {
 		type: "button",
 		"data-component": "global-search-result-row",
 		"data-slot": "global-search-result-row",
-		onMouseEnter: a,
-		onClick: i,
-		className: r("group/row relative box-border m-0 flex w-full cursor-pointer items-center justify-start border-0 bg-transparent font-sans text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset gap-space-lg rounded-inner px-row-x py-row-y text-left transition-colors", "global-search-result-row--component", t ? "bg-muted/60" : "hover:bg-muted/40", c),
+		onMouseEnter: c,
+		onClick: s,
+		className: n(`${h.nativeButtonReset} group/row relative flex w-full cursor-pointer items-center justify-start text-inherit outline-none ${a.inset} text-left transition-colors`, f(), "global-search-result-row--component", t ? h.rowSelected : h.rowHover, l),
 		children: [
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ P("div", {
 				className: "flex shrink-0 items-center",
-				children: e.avatar ? /* @__PURE__ */ A(f, {
-					className: r("size-avatar-sm", _[e.avatar.tone ?? "neutral"]),
-					children: [e.avatar.src && /* @__PURE__ */ k(p, {
+				children: e.avatar ? /* @__PURE__ */ F(y, {
+					className: n("size-avatar-sm", p[e.avatar.tone ?? "neutral"]),
+					children: [e.avatar.src && /* @__PURE__ */ P(b, {
 						src: e.avatar.src,
 						alt: e.title
-					}), /* @__PURE__ */ k(d, {
-						className: r("text-xs font-semibold", _[e.avatar.tone ?? "neutral"]),
+					}), /* @__PURE__ */ P(v, {
+						className: n("text-xs font-semibold", p[e.avatar.tone ?? "neutral"]),
 						children: e.avatar.initials
 					})]
-				}) : h ? /* @__PURE__ */ k("span", {
-					className: r("inline-flex size-avatar-sm items-center justify-center rounded-radius", g[e.thumbnail?.tone ?? "neutral"]),
-					children: /* @__PURE__ */ k(h, {
-						className: "size-icon",
+				}) : u ? /* @__PURE__ */ P("span", {
+					className: n("inline-flex size-avatar-sm items-center justify-center rounded-inner", d[e.thumbnail?.tone ?? "neutral"]),
+					children: /* @__PURE__ */ P(u, {
+						className: "size-icon-sm",
 						"aria-hidden": "true"
 					})
 				}) : null
 			}),
-			/* @__PURE__ */ A(s, {
+			/* @__PURE__ */ F(o, {
 				gap: "dense",
 				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ A("div", {
-					className: "flex items-center gap-space-sm leading-tight",
-					children: [/* @__PURE__ */ k(o, {
+				children: [/* @__PURE__ */ F("div", {
+					className: "flex min-w-0 items-center gap-space-sm",
+					children: [/* @__PURE__ */ P(i, {
 						tag: "span",
-						weight: "semibold",
+						type: "inherit",
+						weight: "medium",
+						lineHeight: "tight",
 						className: "truncate",
-						children: W(e.title, n)
-					}), !!e.badge && /* @__PURE__ */ k(m, {
+						children: Y(e.title, r)
+					}), !!e.badge && /* @__PURE__ */ P(x, {
 						tone: e.badge.tone === "destructive" ? "destructive" : e.badge.tone,
 						children: e.badge.label
 					})]
@@ -317,23 +324,23 @@ function G({ result: e, active: t = !1, query: n = "", onSelect: i, onMouseEnter
 					let t = [];
 					return e.subtitle && t.push({
 						key: "subtitle",
-						node: /* @__PURE__ */ k(o, {
+						node: /* @__PURE__ */ P(i, {
 							tag: "span",
 							size: "xs",
 							type: "secondary",
 							className: "min-w-0 break-words",
-							children: W(e.subtitle, n)
+							children: Y(e.subtitle, r)
 						})
-					}), e.meta?.forEach((e, n) => {
-						let i = e.icon;
+					}), e.meta?.forEach((e, r) => {
+						let a = e.icon;
 						t.push({
-							key: `m-${n}`,
-							node: /* @__PURE__ */ A(o, {
+							key: `m-${r}`,
+							node: /* @__PURE__ */ F(i, {
 								tag: "span",
 								size: "xs",
 								type: "secondary",
-								className: r("inline-flex min-w-0 items-center gap-space-xs break-words", e.mono && "font-mono tabular-nums"),
-								children: [!!i && /* @__PURE__ */ k(i, {
+								className: n("inline-flex min-w-0 items-center gap-space-xs break-words", e.mono && "font-mono tabular-nums"),
+								children: [!!a && /* @__PURE__ */ P(a, {
 									className: "size-icon-sm shrink-0",
 									"aria-hidden": "true"
 								}), e.label]
@@ -341,14 +348,14 @@ function G({ result: e, active: t = !1, query: n = "", onSelect: i, onMouseEnter
 						});
 					}), e.timestamp && t.push({
 						key: "ts",
-						node: /* @__PURE__ */ k(u, {
+						node: /* @__PURE__ */ P(_, {
 							size: "xs",
 							className: "tabular-nums",
 							children: e.timestamp
 						})
 					}), e.tags?.forEach((e) => t.push({
 						key: `t-${e}`,
-						node: /* @__PURE__ */ k(o, {
+						node: /* @__PURE__ */ P(i, {
 							tag: "span",
 							size: "xs",
 							type: "secondary",
@@ -357,43 +364,45 @@ function G({ result: e, active: t = !1, query: n = "", onSelect: i, onMouseEnter
 						})
 					})), e.rightValue && t.push({
 						key: "rv",
-						node: /* @__PURE__ */ A(l, {
+						node: /* @__PURE__ */ F(g, {
+							type: "inherit",
 							weight: "medium",
 							className: "inline-flex flex-wrap items-baseline gap-space-xs tabular-nums",
-							children: [e.rightValue, !!e.rightLabel && /* @__PURE__ */ k(o, {
+							children: [e.rightValue, !!e.rightLabel && /* @__PURE__ */ P(i, {
 								tag: "span",
 								size: "inherit",
 								type: "secondary",
 								children: e.rightLabel.toLowerCase()
 							})]
 						})
-					}), t.length === 0 ? null : /* @__PURE__ */ k("div", {
+					}), t.length === 0 ? null : /* @__PURE__ */ P("div", {
 						className: "flex min-w-0 flex-wrap items-baseline gap-x-space-sm gap-y-dense break-words",
-						children: t.map((e, t) => /* @__PURE__ */ A("span", {
-							className: r("inline-flex min-w-0 max-w-full items-baseline gap-space-sm", e.key === "rv" && "@xl/global-search:hidden"),
-							children: [t > 0 && /* @__PURE__ */ k(o, {
+						children: t.map((e, t) => /* @__PURE__ */ F("span", {
+							className: n("inline-flex min-w-0 max-w-full items-baseline gap-space-sm", e.key === "rv" && "@xl/global-search:hidden"),
+							children: [t > 0 && /* @__PURE__ */ P(i, {
 								tag: "span",
 								size: "xs",
 								type: "secondary",
 								"aria-hidden": "true",
-								className: "shrink-0 opacity-60",
+								className: "shrink-0",
 								children: "·"
 							}), e.node]
 						}, e.key))
 					});
 				})()]
 			}),
-			!!(e.rightValue || e.rightLabel) && /* @__PURE__ */ k("div", {
+			!!(e.rightValue || e.rightLabel) && /* @__PURE__ */ P("div", {
 				className: "hidden shrink-0 items-center self-stretch @xl/global-search:flex",
-				children: /* @__PURE__ */ A(s, {
+				children: /* @__PURE__ */ F(o, {
 					gap: "dense",
 					align: "end",
 					className: "text-right leading-tight",
-					children: [!!e.rightValue && /* @__PURE__ */ k(l, {
+					children: [!!e.rightValue && /* @__PURE__ */ P(g, {
+						type: "inherit",
 						weight: "semibold",
 						className: "whitespace-nowrap tabular-nums",
 						children: e.rightValue
-					}), !!e.rightLabel && /* @__PURE__ */ k(o, {
+					}), !!e.rightLabel && /* @__PURE__ */ P(i, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
@@ -402,43 +411,41 @@ function G({ result: e, active: t = !1, query: n = "", onSelect: i, onMouseEnter
 					})]
 				})
 			}),
-			/* @__PURE__ */ k("span", {
+			/* @__PURE__ */ P(I, {
 				"aria-hidden": "true",
-				className: r("inline-flex size-action-sm shrink-0 items-center justify-center rounded-inner transition-all", t ? "text-foreground opacity-100" : "text-muted-foreground opacity-0 group-hover/row:opacity-100"),
-				children: /* @__PURE__ */ k(j, { className: "size-icon-md" })
+				className: n("size-icon shrink-0 transition-opacity", t ? "text-inherit opacity-100" : "text-muted-foreground opacity-0 group-hover/row:opacity-100")
 			})
 		]
 	});
 }
 //#endregion
 //#region src/components/features/global-search/partials/global-search-tabs.tsx
-function K({ value: e, onValueChange: t, tabs: n, counts: i }) {
-	return /* @__PURE__ */ k("div", {
-		className: "global-search-tabs--component border-b border-border/60 px-surface py-row-y",
-		children: /* @__PURE__ */ k("div", {
-			className: "global-search-tabs--scroller overflow-x-auto p-space-xs [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-			children: /* @__PURE__ */ k(x, {
+function Z({ value: e, onValueChange: t, tabs: r, counts: a }) {
+	return /* @__PURE__ */ P("div", {
+		className: n("global-search-tabs--component", l.anchored.header),
+		children: /* @__PURE__ */ P("div", {
+			className: "global-search-tabs--scroller overflow-x-auto px-surface-xs pt-space-xs pb-space-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			children: /* @__PURE__ */ P(ne, {
 				value: e,
 				onValueChange: (e) => t(e),
 				className: "min-w-max",
-				children: /* @__PURE__ */ k(b, {
+				children: /* @__PURE__ */ P(te, {
 					className: "global-search-tabs--list h-action-sm w-max min-w-max",
-					children: n.map((t) => {
-						let n = e === t.value, a = i[t.value] ?? 0;
-						return /* @__PURE__ */ A(y, {
-							value: t.value,
+					children: r.map((e) => {
+						let t = a[e.value] ?? 0;
+						return /* @__PURE__ */ F(ee, {
+							value: e.value,
 							className: "global-search-tabs--trigger shrink-0 gap-space-sm px-control-sm text-foreground",
-							children: [/* @__PURE__ */ k(o, {
-								tag: "span",
-								children: t.label
-							}), /* @__PURE__ */ k(o, {
+							children: [/* @__PURE__ */ P(i, {
 								tag: "span",
-								size: "xs",
-								weight: "medium",
-								className: r("global-search-tabs--count rounded px-1 py-0 tabular-nums", n ? "bg-muted text-foreground" : "bg-transparent text-foreground"),
-								children: a
+								children: e.label
+							}), /* @__PURE__ */ P(x, {
+								size: "sm",
+								tone: "secondary",
+								className: "global-search-tabs--count tabular-nums",
+								children: t
 							})]
-						}, t.value);
+						}, e.value);
 					})
 				})
 			})
@@ -447,115 +454,108 @@ function K({ value: e, onValueChange: t, tabs: n, counts: i }) {
 }
 //#endregion
 //#region src/components/features/global-search/global-search.tsx
-function q({ results: e = [], query: c, onQueryChange: l, onResultSelect: u, onClose: d, loading: f = !1, idleSections: p, groupLabels: m, autoFocus: h = !1, strings: g, slots: _, tabs: v, className: y }) {
-	let b = n(F, g), x = I({
-		results: e,
-		query: c,
-		onResultSelect: u,
-		onClose: d
-	}), S = !f && c.trim().length > 1 && e.length === 0, w = !f && c.trim().length <= 1, T = C.useMemo(() => {
-		if (v) return v;
-		let e = Object.keys(x.grouped);
+function Q({ results: a = [], query: o, onQueryChange: s, onResultSelect: c, onClose: l, loading: u = !1, idleSections: f, groupLabels: p, autoFocus: m = !1, strings: h, slots: g, tabs: _, className: v }) {
+	let y = t(z, h), b = B({
+		results: a,
+		query: o,
+		onResultSelect: c,
+		onClose: l
+	}), x = !u && o.trim().length > 1 && a.length === 0, S = !u && o.trim().length <= 1, C = O.useMemo(() => {
+		if (_) return _;
+		let e = Object.keys(b.grouped);
 		return [{
 			value: "all",
-			label: b.tabAll
+			label: y.tabAll
 		}, ...e.map((e) => ({
 			value: e,
-			label: m?.[e] ?? e
+			label: p?.[e] ?? e
 		}))];
 	}, [
-		v,
-		x.grouped,
-		b.tabAll,
-		m
+		_,
+		b.grouped,
+		y.tabAll,
+		p
 	]);
-	return /* @__PURE__ */ A("div", {
+	return /* @__PURE__ */ F("div", {
 		"data-component": "global-search",
 		"data-slot": "global-search",
-		className: r("global-search--component", "@container/global-search overflow-hidden rounded-radius border border-border bg-card shadow-2xl", y),
+		className: n("global-search--component", "@container/global-search overflow-hidden rounded-radius border border-border bg-card text-card-foreground shadow-xl", v),
 		children: [
-			_?.input ?? /* @__PURE__ */ k(V, {
-				value: c,
-				onValueChange: l,
-				onKeyDown: x.onKeyDown,
-				placeholder: b.placeholder,
-				clearLabel: b.clear,
-				loading: f,
-				autoFocus: h
+			g?.input ?? /* @__PURE__ */ P(K, {
+				value: o,
+				onValueChange: s,
+				onKeyDown: b.onKeyDown,
+				placeholder: y.placeholder,
+				clearLabel: y.clear,
+				loading: u,
+				autoFocus: m
 			}),
-			!f && e.length > 0 && (_?.tabs ?? /* @__PURE__ */ k(K, {
-				value: x.activeTab,
-				onValueChange: x.setActiveTab,
-				tabs: T,
-				counts: x.tabCounts
+			!u && a.length > 0 && (g?.tabs ?? /* @__PURE__ */ P(Z, {
+				value: b.activeTab,
+				onValueChange: b.setActiveTab,
+				tabs: C,
+				counts: b.tabCounts
 			})),
-			/* @__PURE__ */ A("div", {
-				className: "max-h-[520px] overflow-y-auto",
+			/* @__PURE__ */ F("div", {
+				className: "global-search--viewport max-h-130 overflow-y-auto",
 				children: [
-					!!w && (_?.idle ?? (p && p.length > 0 ? /* @__PURE__ */ k(B, { sections: p }) : null)),
-					!!f && (_?.loading ?? /* @__PURE__ */ k("div", {
-						className: "global-search--loading flex items-center justify-center p-surface",
+					!!S && (g?.idle ?? (f && f.length > 0 ? /* @__PURE__ */ P(G, { sections: f }) : null)),
+					!!u && (g?.loading ?? /* @__PURE__ */ P("div", {
+						className: "global-search--loading flex items-center justify-center px-row-x py-space-xl",
 						role: "status",
-						children: /* @__PURE__ */ k(o, {
+						children: /* @__PURE__ */ P(i, {
 							type: "secondary",
-							children: b.loading
+							children: y.loading
 						})
 					})),
-					!!S && (_?.empty ?? /* @__PURE__ */ k(L, {
-						title: t(b.emptyTitle, { query: c }),
-						hint: b.emptyHint
+					!!x && (g?.empty ?? /* @__PURE__ */ P(V, {
+						title: e(y.emptyTitle, { query: o }),
+						hint: y.emptyHint
 					})),
-					!f && e.length > 0 && /* @__PURE__ */ k("div", {
-						className: "global-search--results p-surface",
-						children: Object.entries(x.visibleGrouped).map(([e, t], n) => /* @__PURE__ */ A("div", {
-							className: r("pb-space-xs last:pb-0", n > 0 && "mt-space-md pt-space-xs"),
-							children: [/* @__PURE__ */ A("div", {
-								className: "flex items-center justify-between px-row-x pb-space-2xs",
-								children: [/* @__PURE__ */ k(a, { children: m?.[e] ?? e }), x.activeTab === "all" && t.length > 0 && /* @__PURE__ */ k(i, {
+					!u && a.length > 0 && /* @__PURE__ */ P("div", {
+						className: n("global-search--results", d.compact),
+						children: Object.entries(b.visibleGrouped).map(([e, t]) => /* @__PURE__ */ F("div", {
+							className: "global-search--group",
+							children: [/* @__PURE__ */ P(W, {
+								label: p?.[e] ?? e,
+								action: b.activeTab === "all" && t.length > 0 ? /* @__PURE__ */ P(r, {
 									type: "button",
 									size: "sm",
-									onClick: () => x.setActiveTab(e),
-									className: "text-primary-accent",
-									children: /* @__PURE__ */ k(o, {
-										tag: "span",
-										size: "inherit",
-										className: "text-primary-accent",
-										children: b.seeAll
-									})
-								})]
-							}), /* @__PURE__ */ k(s, {
-								render: /* @__PURE__ */ k("ul", {}),
-								gap: "2xs",
-								className: "m-0 list-none p-0",
+									onClick: () => b.setActiveTab(e),
+									className: "shrink-0",
+									children: y.seeAll
+								}) : null
+							}), /* @__PURE__ */ P("ul", {
+								className: "m-0 flex list-none flex-col p-0",
 								children: t.map((e) => {
-									let t = x.flat[x.activeIdx]?.id === e.id, n = {
+									let t = b.flat[b.activeIdx]?.id === e.id, n = {
 										isActive: t,
-										query: c,
-										onSelect: () => u?.(e)
-									}, r = _?.renderResult ? _.renderResult(e, n) : /* @__PURE__ */ k(G, {
+										query: o,
+										onSelect: () => c?.(e)
+									}, r = g?.renderResult ? g.renderResult(e, n) : /* @__PURE__ */ P(X, {
 										result: e,
 										active: t,
-										query: c,
+										query: o,
 										onSelect: n.onSelect,
-										onMouseEnter: () => x.setActiveById(e.id)
+										onMouseEnter: () => b.setActiveById(e.id)
 									});
-									return /* @__PURE__ */ k("li", { children: r }, e.id);
+									return /* @__PURE__ */ P("li", { children: r }, e.id);
 								})
 							})]
 						}, e))
 					})
 				]
 			}),
-			_?.footer ?? /* @__PURE__ */ k(z, {
-				navigateLabel: b.footerNavigate,
-				openLabel: b.footerOpen,
-				closeLabel: b.footerClose,
-				trailing: !w && !S && e.length > 0 ? /* @__PURE__ */ k(o, {
+			g?.footer ?? /* @__PURE__ */ P(U, {
+				navigateLabel: y.footerNavigate,
+				openLabel: y.footerOpen,
+				closeLabel: y.footerClose,
+				trailing: !S && !x && a.length > 0 ? /* @__PURE__ */ P(i, {
 					tag: "span",
 					size: "xs",
 					type: "secondary",
 					className: "tabular-nums",
-					children: t(b.resultsCount, { count: e.length })
+					children: e(y.resultsCount, { count: a.length })
 				}) : void 0
 			})
 		]
@@ -563,29 +563,29 @@ function q({ results: e = [], query: c, onQueryChange: l, onResultSelect: u, onC
 }
 //#endregion
 //#region src/components/features/global-search/global-search-dialog.tsx
-function J({ open: e, onOpenChange: t, contentClassName: i, className: a, strings: o, autoFocus: s = !0, ...l }) {
-	let u = n(F, o), d = T(() => () => t(!1), [t]);
-	return /* @__PURE__ */ k(c, {
+function $({ open: e, onOpenChange: r, contentClassName: i, className: a, strings: o, autoFocus: s = !0, ...c }) {
+	let l = t(z, o), u = A(() => () => r(!1), [r]);
+	return /* @__PURE__ */ P(m, {
 		open: e,
-		onOpenChange: t,
-		title: u.dialogTitle,
+		onOpenChange: r,
+		title: l.dialogTitle,
 		visuallyHideHeader: !0,
 		showCloseButton: !1,
 		showCancel: !1,
 		showConfirm: !1,
-		className: r("global-search-dialog--component", "w-full max-w-2xl overflow-visible border-0 bg-transparent p-0 shadow-none sm:max-w-2xl", "top-24 translate-y-0", i),
+		className: n("global-search-dialog--component", "w-full max-w-2xl overflow-visible border-0 bg-transparent p-0 shadow-none sm:max-w-2xl", "top-24 translate-y-0", i),
 		contentClassName: "p-0",
-		children: /* @__PURE__ */ k(q, {
-			...l,
+		children: /* @__PURE__ */ P(Q, {
+			...c,
 			strings: o,
 			autoFocus: s,
-			onClose: d,
+			onClose: u,
 			className: a
 		})
 	});
 }
-J.displayName = "GlobalSearchDialog";
+$.displayName = "GlobalSearchDialog";
 //#endregion
-export { q as GlobalSearch, J as GlobalSearchDialog, L as GlobalSearchEmptyState, z as GlobalSearchFooter, B as GlobalSearchIdleState, V as GlobalSearchInput, G as GlobalSearchResultRow, K as GlobalSearchTabs, F as defaultGlobalSearchStrings, I as useGlobalSearch };
+export { Q as GlobalSearch, $ as GlobalSearchDialog, V as GlobalSearchEmptyState, U as GlobalSearchFooter, G as GlobalSearchIdleState, K as GlobalSearchInput, X as GlobalSearchResultRow, Z as GlobalSearchTabs, z as defaultGlobalSearchStrings, B as useGlobalSearch };
 
 //# sourceMappingURL=global-search.js.map