themelia-react-ui 0.0.0-stage → 1.0.0

package/dist/features/global-search.js

@@ -0,0 +1,593 @@
+"use client";
+import { interpolateString as e, useStrings as t } from "../lib/strings.js";
+import { t as n } from "../utils-C2EKeIw3.js";
+import { n as r } from "../buttons-Co6GavvM.js";
+import { a as i, r as a } from "../typography-Cv8MT-82.js";
+import { t as o } from "../structure-BvW4vG4H.js";
+import { r as s } from "../overlays-DBqV0J_V.js";
+import { _ as c, g as l } from "../primitives-DKPOGVpj.js";
+import { i as u, n as d, s as f } from "../avatar-CsnWaYmt.js";
+import { t as p } from "../badge-BZXZT9wd.js";
+import { t as m } from "../input-DMorJiTI.js";
+import { i as h, r as g, t as _ } from "../tabs-DY09eoZg.js";
+import { l as v } from "../data-display-b3d1TfL4.js";
+import * as y from "react";
+import { useEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { ArrowRight as D, Clock as O, Loader2 as k, Search as A, Sparkles as j, X as M } from "lucide-react";
+//#region src/components/features/global-search/global-search.strings.ts
+var N = {
+	dialogTitle: "Search",
+	placeholder: "Search…",
+	clear: "Clear search",
+	loading: "Searching…",
+	emptyTitle: "No results for \"{{query}}\"",
+	emptyHint: "Try a shorter keyword or check the spelling.",
+	idleRecent: "Recent",
+	idleSuggestions: "Suggestions",
+	tabAll: "All",
+	footerNavigate: "navigate",
+	footerOpen: "open",
+	footerClose: "close",
+	resultsCount: "{{count}} results",
+	seeAll: "See all"
+};
+//#endregion
+//#region src/components/features/global-search/hooks/use-global-search.ts
+function P({ results: e, query: t, onResultSelect: n, onClose: r }) {
+	let [i, a] = C("all"), [o, s] = C(0);
+	b(() => {
+		a("all"), s(0);
+	}, [t]);
+	let c = x(() => {
+		let t = {};
+		for (let n of e) (t[n.group] ??= []).push(n);
+		return t;
+	}, [e]), l = x(() => {
+		let t = { all: e.length };
+		for (let [e, n] of Object.entries(c)) t[e] = n.length;
+		return t;
+	}, [e.length, c]), u = x(() => {
+		if (i === "all") return c;
+		let e = c[i];
+		return e ? { [i]: e } : {};
+	}, [c, i]), d = x(() => i === "all" ? e.slice() : c[i] ?? [], [
+		i,
+		c,
+		e
+	]), f = S(o);
+	f.current = o;
+	let p = S(d);
+	return p.current = d, {
+		grouped: c,
+		tabCounts: l,
+		activeTab: i,
+		setActiveTab: (e) => {
+			a(e), s(0);
+		},
+		visibleGrouped: u,
+		flat: d,
+		activeIdx: o,
+		setActiveIdx: s,
+		setActiveById: (e) => {
+			let t = p.current.findIndex((t) => t.id === e);
+			t >= 0 && s(t);
+		},
+		onKeyDown: (e) => {
+			if (e.key === "ArrowDown") e.preventDefault(), s((e) => Math.min(e + 1, p.current.length - 1));
+			else if (e.key === "ArrowUp") e.preventDefault(), s((e) => Math.max(e - 1, 0));
+			else if (e.key === "Enter") {
+				let t = p.current[f.current];
+				t && (e.preventDefault(), n?.(t));
+			} else e.key === "Escape" && r?.();
+		},
+		selectActive: () => {
+			let e = p.current[f.current];
+			e && n?.(e);
+		}
+	};
+}
+//#endregion
+//#region src/components/features/global-search/partials/global-search-empty-state.tsx
+function F({ title: e, hint: t }) {
+	return /* @__PURE__ */ T(v, {
+		title: e,
+		description: t,
+		media: /* @__PURE__ */ T(A, {
+			className: "size-icon",
+			"aria-hidden": "true"
+		}),
+		mediaVariant: "icon-soft",
+		padding: "md",
+		className: "global-search-empty-state--component"
+	});
+}
+//#endregion
+//#region src/components/features/global-search/partials/global-search-footer.tsx
+var I = "rounded border border-border bg-muted/40 px-1.5 py-0.5 font-mono text-xs leading-none text-muted-foreground";
+function L({ navigateLabel: e, openLabel: t, closeLabel: r, trailing: a, className: o }) {
+	return /* @__PURE__ */ E("div", {
+		className: n("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", o),
+		children: [/* @__PURE__ */ E("span", {
+			className: "global-search-footer--shortcuts flex items-center gap-space-md",
+			children: [
+				/* @__PURE__ */ T("kbd", {
+					className: I,
+					children: "↑↓"
+				}),
+				/* @__PURE__ */ T(i, {
+					tag: "span",
+					size: "xs",
+					type: "secondary",
+					children: e
+				}),
+				/* @__PURE__ */ T("kbd", {
+					className: I,
+					children: "↵"
+				}),
+				/* @__PURE__ */ T(i, {
+					tag: "span",
+					size: "xs",
+					type: "secondary",
+					children: t
+				}),
+				/* @__PURE__ */ T("kbd", {
+					className: I,
+					children: "esc"
+				}),
+				/* @__PURE__ */ T(i, {
+					tag: "span",
+					size: "xs",
+					type: "secondary",
+					children: r
+				})
+			]
+		}), a ? /* @__PURE__ */ T("span", {
+			className: "global-search-footer--trailing shrink-0 self-end whitespace-nowrap @sm/global-search:self-auto",
+			children: a
+		}) : null]
+	});
+}
+//#endregion
+//#region src/components/features/global-search/partials/global-search-idle-state.tsx
+function R({ sections: e, fallbackIcons: t }) {
+	return /* @__PURE__ */ T("div", {
+		className: "global-search-idle-state--component p-surface",
+		children: /* @__PURE__ */ T(o, {
+			gap: "xl",
+			children: e.map((e, s) => {
+				let c = e.icon ?? (s === 0 ? t?.recent ?? O : t?.suggestions ?? j);
+				return /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("div", {
+					className: "flex items-center gap-space-md px-space-lg pb-space-sm",
+					children: [/* @__PURE__ */ T(c, {
+						className: "size-icon-md text-muted-foreground",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ T(a, { children: e.label })]
+				}), /* @__PURE__ */ T(o, {
+					render: /* @__PURE__ */ T("ul", {}),
+					gap: "2xs",
+					className: "m-0 list-none p-0",
+					children: e.items.map((e) => {
+						let t = e.icon ?? A;
+						return /* @__PURE__ */ T("li", { children: /* @__PURE__ */ E(r, {
+							type: "button",
+							tone: "secondary",
+							buttonStyle: "ghost",
+							size: "md",
+							onClick: e.onSelect,
+							className: n("h-auto w-full justify-start gap-space-lg rounded-radius-md px-row-x py-row-y-sm text-left transition-colors", "hover:bg-muted/50 focus-visible:bg-muted/50"),
+							children: [/* @__PURE__ */ T(t, {
+								className: "size-icon-md text-muted-foreground",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ T(i, {
+								className: "flex-1 truncate",
+								children: e.label
+							})]
+						}) }, e.id);
+					})
+				})] }, e.id);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/features/global-search/partials/global-search-input.tsx
+var z = y.forwardRef(function({ value: e, onValueChange: t, onKeyDown: n, placeholder: i, clearLabel: a = "Clear search", loading: s = !1, autoFocus: c = !1 }, l) {
+	let u = y.useRef(null);
+	return y.useImperativeHandle(l, () => u.current), y.useEffect(() => {
+		c && u.current?.focus();
+	}, [c]), /* @__PURE__ */ T("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__ */ E(o, {
+			direction: "horizontal",
+			gap: "md",
+			wrap: !1,
+			children: [
+				/* @__PURE__ */ T(A, {
+					className: "size-icon shrink-0 text-muted-foreground",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ T("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ T(m, {
+						ref: u,
+						type: "text",
+						value: e,
+						onChange: (e) => t(e.target.value),
+						onKeyDown: n,
+						placeholder: i,
+						"aria-label": i,
+						autoComplete: "off",
+						spellCheck: !1,
+						size: "sm",
+						className: "h-auto border-0 bg-transparent px-0 py-0 text-sm shadow-none focus-visible:border-transparent focus-visible:ring-0"
+					})
+				}),
+				s && /* @__PURE__ */ T(k, {
+					className: "size-icon shrink-0 animate-spin text-muted-foreground",
+					"aria-hidden": "true"
+				}),
+				!s && !!e && /* @__PURE__ */ T(r, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					size: "sm",
+					iconOnly: !0,
+					onClick: () => t(""),
+					"aria-label": a,
+					className: "size-action-sm rounded text-muted-foreground hover:bg-muted hover:text-foreground",
+					children: /* @__PURE__ */ T(M, { className: "size-icon-sm" })
+				})
+			]
+		})
+	});
+}), B = {
+	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"
+}, V = {
+	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"
+};
+//#endregion
+//#region src/components/features/global-search/partials/global-search-result-row.tsx
+function H(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__ */ E(w, { children: [
+		e.slice(0, a),
+		/* @__PURE__ */ T("mark", {
+			className: "rounded-radius-sm bg-warning/40 px-0.5 text-foreground",
+			children: e.slice(a, a + n.length)
+		}),
+		e.slice(a + n.length)
+	] });
+}
+function U({ result: e, active: t = !1, query: a = "", onSelect: s, onMouseEnter: m, className: h }) {
+	let g = e.thumbnail?.icon, _ = B, v = V;
+	return /* @__PURE__ */ E(r, {
+		type: "button",
+		"data-component": "global-search-result-row",
+		"data-slot": "global-search-result-row",
+		tone: "secondary",
+		buttonStyle: "ghost",
+		size: "sm",
+		onMouseEnter: m,
+		onClick: s,
+		className: n("group/row relative h-auto w-full justify-start gap-space-lg rounded-radius-md px-row-x py-row-y text-left transition-colors", "global-search-result-row--component", t ? "bg-muted/60" : "hover:bg-muted/40", h),
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "flex shrink-0 items-center",
+				children: e.avatar ? /* @__PURE__ */ E(d, {
+					className: n("size-avatar-sm", v[e.avatar.tone ?? "neutral"]),
+					children: [e.avatar.src && /* @__PURE__ */ T(f, {
+						src: e.avatar.src,
+						alt: e.title
+					}), /* @__PURE__ */ T(u, {
+						className: n("text-xs font-semibold", v[e.avatar.tone ?? "neutral"]),
+						children: e.avatar.initials
+					})]
+				}) : g ? /* @__PURE__ */ T("span", {
+					className: n("inline-flex size-avatar-sm items-center justify-center rounded-radius-md", _[e.thumbnail?.tone ?? "neutral"]),
+					children: /* @__PURE__ */ T(g, {
+						className: "size-icon",
+						"aria-hidden": "true"
+					})
+				}) : null
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ E("div", {
+					className: "flex items-center gap-space-sm leading-tight",
+					children: [/* @__PURE__ */ T(i, {
+						tag: "span",
+						weight: "semibold",
+						className: "truncate",
+						children: H(e.title, a)
+					}), !!e.badge && /* @__PURE__ */ T(p, {
+						tone: e.badge.tone === "destructive" ? "destructive" : e.badge.tone,
+						children: e.badge.label
+					})]
+				}), (() => {
+					let t = [];
+					return e.subtitle && t.push({
+						key: "subtitle",
+						node: /* @__PURE__ */ T(i, {
+							tag: "span",
+							size: "xs",
+							type: "secondary",
+							children: H(e.subtitle, a)
+						})
+					}), e.meta?.forEach((e, r) => {
+						let a = e.icon;
+						t.push({
+							key: `m-${r}`,
+							node: /* @__PURE__ */ E(i, {
+								tag: "span",
+								size: "xs",
+								type: "secondary",
+								className: n("inline-flex items-center gap-space-xs", e.mono && "font-mono tabular-nums"),
+								children: [!!a && /* @__PURE__ */ T(a, {
+									className: "size-icon-sm shrink-0",
+									"aria-hidden": "true"
+								}), e.label]
+							})
+						});
+					}), e.timestamp && t.push({
+						key: "ts",
+						node: /* @__PURE__ */ T(l, {
+							size: "xs",
+							className: "tabular-nums",
+							children: e.timestamp
+						})
+					}), e.tags?.forEach((e) => t.push({
+						key: `t-${e}`,
+						node: /* @__PURE__ */ T(i, {
+							tag: "span",
+							size: "xs",
+							type: "secondary",
+							children: e
+						})
+					})), e.rightValue && t.push({
+						key: "rv",
+						node: /* @__PURE__ */ E(c, {
+							weight: "medium",
+							className: "tabular-nums",
+							children: [e.rightValue, !!e.rightLabel && /* @__PURE__ */ T(i, {
+								tag: "span",
+								size: "inherit",
+								type: "secondary",
+								className: "ml-1",
+								children: e.rightLabel.toLowerCase()
+							})]
+						})
+					}), t.length === 0 ? null : /* @__PURE__ */ T("div", {
+						className: "mt-space-2xs truncate",
+						children: t.map((e, t) => /* @__PURE__ */ E(y.Fragment, { children: [t > 0 && /* @__PURE__ */ T(i, {
+							tag: "span",
+							size: "xs",
+							type: "secondary",
+							"aria-hidden": "true",
+							className: "mx-1.5 opacity-60",
+							children: "·"
+						}), e.node] }, e.key))
+					});
+				})()]
+			}),
+			!!(e.rightValue || e.rightLabel) && /* @__PURE__ */ T("div", {
+				className: "hidden shrink-0 items-center self-stretch border-l border-border/60 pl-row-x @xl/global-search:flex",
+				children: /* @__PURE__ */ E(o, {
+					gap: "none",
+					align: "end",
+					className: "text-right leading-tight",
+					children: [!!e.rightValue && /* @__PURE__ */ T(c, {
+						weight: "semibold",
+						className: "whitespace-nowrap tabular-nums",
+						children: e.rightValue
+					}), !!e.rightLabel && /* @__PURE__ */ T(i, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						className: "mt-0.5 whitespace-nowrap",
+						children: e.rightLabel
+					})]
+				})
+			}),
+			/* @__PURE__ */ T("span", {
+				"aria-hidden": "true",
+				className: n("inline-flex size-action-sm shrink-0 items-center justify-center rounded-radius-md transition-all", t ? "bg-foreground text-background opacity-100" : "text-muted-foreground opacity-0 group-hover/row:opacity-100"),
+				children: /* @__PURE__ */ T(D, { className: "size-icon-md" })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/global-search/partials/global-search-tabs.tsx
+function W({ value: e, onValueChange: t, tabs: r, counts: a }) {
+	return /* @__PURE__ */ T("div", {
+		className: "global-search-tabs--component border-b border-border/60 px-surface py-row-y",
+		children: /* @__PURE__ */ T("div", {
+			className: "global-search-tabs--scroller -mx-1 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+			children: /* @__PURE__ */ T(_, {
+				value: e,
+				onValueChange: (e) => t(e),
+				className: "min-w-max",
+				children: /* @__PURE__ */ T(g, {
+					className: "global-search-tabs--list h-action-sm w-max min-w-max",
+					children: r.map((t) => {
+						let r = e === t.value, o = a[t.value] ?? 0;
+						return /* @__PURE__ */ E(h, {
+							value: t.value,
+							className: "global-search-tabs--trigger shrink-0 gap-space-sm px-control-sm text-foreground",
+							children: [/* @__PURE__ */ T(i, {
+								tag: "span",
+								children: t.label
+							}), /* @__PURE__ */ T(i, {
+								tag: "span",
+								size: "xs",
+								weight: "medium",
+								className: n("global-search-tabs--count rounded px-1 py-0 tabular-nums", r ? "bg-muted text-foreground" : "bg-transparent text-foreground"),
+								children: o
+							})]
+						}, t.value);
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/features/global-search/global-search.tsx
+function G({ results: s = [], query: c, onQueryChange: l, onResultSelect: u, onClose: d, loading: f = !1, idleSections: p, groupLabels: m, autoFocus: h = !1, strings: g, slots: _, tabs: v, className: b }) {
+	let x = t(N, g), S = P({
+		results: s,
+		query: c,
+		onResultSelect: u,
+		onClose: d
+	}), C = !f && c.trim().length > 1 && s.length === 0, w = !f && c.trim().length <= 1, D = y.useMemo(() => {
+		if (v) return v;
+		let e = Object.keys(S.grouped);
+		return [{
+			value: "all",
+			label: x.tabAll
+		}, ...e.map((e) => ({
+			value: e,
+			label: m?.[e] ?? e
+		}))];
+	}, [
+		v,
+		S.grouped,
+		x.tabAll,
+		m
+	]);
+	return /* @__PURE__ */ E("div", {
+		"data-component": "global-search",
+		"data-slot": "global-search",
+		className: n("global-search--component", "@container/global-search overflow-hidden rounded-radius-lg border border-border bg-card shadow-2xl", b),
+		children: [
+			_?.input ?? /* @__PURE__ */ T(z, {
+				value: c,
+				onValueChange: l,
+				onKeyDown: S.onKeyDown,
+				placeholder: x.placeholder,
+				clearLabel: x.clear,
+				loading: f,
+				autoFocus: h
+			}),
+			!f && s.length > 0 && (_?.tabs ?? /* @__PURE__ */ T(W, {
+				value: S.activeTab,
+				onValueChange: S.setActiveTab,
+				tabs: D,
+				counts: S.tabCounts
+			})),
+			/* @__PURE__ */ E("div", {
+				className: "max-h-[520px] overflow-y-auto",
+				children: [
+					!!w && (_?.idle ?? (p && p.length > 0 ? /* @__PURE__ */ T(R, { sections: p }) : null)),
+					!!f && (_?.loading ?? /* @__PURE__ */ T("div", {
+						className: "global-search--loading flex items-center justify-center px-surface py-12",
+						children: /* @__PURE__ */ T(i, {
+							type: "secondary",
+							children: x.loading
+						})
+					})),
+					!!C && (_?.empty ?? /* @__PURE__ */ T(F, {
+						title: e(x.emptyTitle, { query: c }),
+						hint: x.emptyHint
+					})),
+					!f && s.length > 0 && /* @__PURE__ */ T("div", {
+						className: "global-search--results p-surface",
+						children: Object.entries(S.visibleGrouped).map(([e, t], s) => /* @__PURE__ */ E("div", {
+							className: n("pb-space-xs last:pb-0", s > 0 && "mt-space-md pt-space-xs"),
+							children: [/* @__PURE__ */ E("div", {
+								className: "flex items-center justify-between px-row-x pb-space-2xs",
+								children: [/* @__PURE__ */ T(a, { children: m?.[e] ?? e }), S.activeTab === "all" && t.length > 0 && /* @__PURE__ */ T(r, {
+									type: "button",
+									tone: "secondary",
+									buttonStyle: "ghost",
+									size: "sm",
+									onClick: () => S.setActiveTab(e),
+									className: "h-auto rounded px-1 py-0 text-primary-accent transition-colors hover:underline",
+									children: /* @__PURE__ */ T(i, {
+										tag: "span",
+										size: "inherit",
+										className: "text-primary-accent",
+										children: x.seeAll
+									})
+								})]
+							}), /* @__PURE__ */ T(o, {
+								render: /* @__PURE__ */ T("ul", {}),
+								gap: "2xs",
+								className: "m-0 list-none p-0",
+								children: t.map((e) => {
+									let t = S.flat[S.activeIdx]?.id === e.id, n = {
+										isActive: t,
+										query: c,
+										onSelect: () => u?.(e)
+									}, r = _?.renderResult ? _.renderResult(e, n) : /* @__PURE__ */ T(U, {
+										result: e,
+										active: t,
+										query: c,
+										onSelect: n.onSelect,
+										onMouseEnter: () => S.setActiveById(e.id)
+									});
+									return /* @__PURE__ */ T("li", { children: r }, e.id);
+								})
+							})]
+						}, e))
+					})
+				]
+			}),
+			_?.footer ?? /* @__PURE__ */ T(L, {
+				navigateLabel: x.footerNavigate,
+				openLabel: x.footerOpen,
+				closeLabel: x.footerClose,
+				trailing: !w && !C && s.length > 0 ? /* @__PURE__ */ T(i, {
+					tag: "span",
+					size: "xs",
+					type: "secondary",
+					className: "tabular-nums",
+					children: e(x.resultsCount, { count: s.length })
+				}) : void 0
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/global-search/global-search-dialog.tsx
+function K({ open: e, onOpenChange: r, contentClassName: i, className: a, strings: o, autoFocus: c = !0, ...l }) {
+	let u = t(N, o), d = x(() => () => r(!1), [r]);
+	return /* @__PURE__ */ T(s, {
+		open: e,
+		onOpenChange: r,
+		title: u.dialogTitle,
+		visuallyHideHeader: !0,
+		showCloseButton: !1,
+		showCancel: !1,
+		showConfirm: !1,
+		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__ */ T(G, {
+			...l,
+			strings: o,
+			autoFocus: c,
+			onClose: d,
+			className: a
+		})
+	});
+}
+K.displayName = "GlobalSearchDialog";
+//#endregion
+export { G as GlobalSearch, K as GlobalSearchDialog, F as GlobalSearchEmptyState, L as GlobalSearchFooter, R as GlobalSearchIdleState, z as GlobalSearchInput, U as GlobalSearchResultRow, W as GlobalSearchTabs, N as defaultGlobalSearchStrings, P as useGlobalSearch };
+
+//# sourceMappingURL=global-search.js.map