@nocoo/basalt 2.2.0 → 3.0.0

package/dist/components/meter.js

@@ -4,19 +4,32 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-progress";
 //#region src/components/meter.tsx
 function i({ value: i = 0, label: a, customValue: o, hideValue: s = !1, className: c, "aria-label": l }) {
+	let u = Number.isFinite(i) ? Math.min(100, Math.max(0, i)) : null, d = Math.round((u ?? 0) / 100 * 17), f = Math.floor(d / 3), p = f + Math.ceil(d / 3);
 	return /* @__PURE__ */ n("div", {
-		className: e("w-full space-y-1", c),
-		children: [a || !s && o ? /* @__PURE__ */ n("div", {
-			className: "flex justify-between text-xs text-basalt-muted-foreground",
-			children: [/* @__PURE__ */ t("span", { children: a }), s ? null : /* @__PURE__ */ t("span", { children: o ?? `${i}%` })]
-		}) : null, /* @__PURE__ */ t(r.Root, {
-			value: i,
-			"aria-label": l ?? a,
-			className: "relative h-2 overflow-hidden rounded-full bg-basalt-muted",
-			children: /* @__PURE__ */ t(r.Indicator, {
-				className: "h-full bg-basalt-primary transition-[width]",
-				style: { width: `${Math.min(100, Math.max(0, i))}%` }
-			})
+		className: e("w-full space-y-basalt-space-sm", c),
+		children: [a ? /* @__PURE__ */ t("div", {
+			className: "text-basalt-sm text-basalt-muted-foreground",
+			children: a
+		}) : null, /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-basalt-space-lg",
+			children: [/* @__PURE__ */ t(r.Root, {
+				"data-basalt-meter": "",
+				value: u,
+				"aria-label": l ?? a,
+				"aria-valuetext": u === null ? "Unavailable" : o,
+				className: "h-basalt-3_5 min-w-0 flex-1 overflow-hidden rounded-basalt-sm bg-basalt-muted p-basalt-space-xs",
+				children: /* @__PURE__ */ t(r.Indicator, {
+					className: "flex h-full gap-basalt-space-xs",
+					"aria-hidden": "true",
+					children: Array.from({ length: 17 }, (n, r) => /* @__PURE__ */ t("span", {
+						"data-filled": r < d,
+						className: e("h-full min-w-0 flex-1 rounded-basalt-sm", r >= d ? "bg-basalt-foreground/10" : r < f ? "bg-basalt-danger" : r < p ? "bg-[hsl(var(--basalt-chart-yellow))]" : "bg-[hsl(var(--basalt-chart-green))]")
+					}, `segment-${r}`))
+				})
+			}), s ? null : /* @__PURE__ */ t("span", {
+				className: "shrink-0 text-basalt-sm tabular-nums text-basalt-foreground",
+				children: o ?? (u === null ? "Unavailable" : `${u}%`)
+			})]
 		})]
 	});
 }

package/dist/components/meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"meter.js","names":["Progress","Meter","ariaLabel","cn","className","label","hideValue","customValue","value"],"sources":["../../src/components/meter.tsx"],"sourcesContent":["import * as Progress from \"@radix-ui/react-progress\";\nimport { cn } from \"../utils/cn\";\n\nexport interface MeterProps {\n\t/**\n\t * Percentage value representing current meter progress (0..100).\n\t *\n\t * Note: Rendered bar width is clamped to [0, 100]%; callers should provide 0..100,\n\t * while underlying Radix validates and manages accessible value attributes.\n\t * Does not support arbitrary native HTML props, ref forwarding, min/max, or change callbacks.\n\t * @default 0\n\t */\n\tvalue?: number;\n\t/**\n\t * Text label displayed above the meter bar and used as accessible name fallback.\n\t */\n\tlabel?: string;\n\t/**\n\t * Custom text overriding the displayed percentage value text next to the label.\n\t */\n\tcustomValue?: string;\n\t/**\n\t * Whether to hide the displayed value text next to the label.\n\t * @default false\n\t */\n\thideValue?: boolean;\n\t/**\n\t * Additional CSS classes applied to the root container.\n\t */\n\tclassName?: string;\n\t/**\n\t * Accessible label announced for assistive technologies. Takes precedence over `label`.\n\t */\n\t\"aria-label\"?: string;\n}\n\nexport function Meter({\n\tvalue = 0,\n\tlabel,\n\tcustomValue,\n\thideValue = false,\n\tclassName,\n\t\"aria-label\": ariaLabel,\n}: MeterProps) {\n\treturn (\n\t\t<div className={cn(\"w-full space-y-1\", className)}>\n\t\t\t{label || (!hideValue && customValue) ? (\n\t\t\t\t<div className=\"flex justify-between text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t<span>{label}</span>\n\t\t\t\t\t{hideValue ? null : <span>{customValue ?? `${value}%`}</span>}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<Progress.Root\n\t\t\t\tvalue={value}\n\t\t\t\taria-label={ariaLabel ?? label}\n\t\t\t\tclassName=\"relative h-2 overflow-hidden rounded-full bg-basalt-muted\"\n\t\t\t>\n\t\t\t\t<Progress.Indicator\n\t\t\t\t\tclassName=\"h-full bg-basalt-primary transition-[width]\"\n\t\t\t\t\tstyle={{ width: `${Math.min(100, Math.max(0, value))}%` }}\n\t\t\t\t/>\n\t\t\t</Progress.Root>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAoCA,SAAgBC,EAAM,EACrB,WAAQ,GACR,UACA,gBACA,eAAY,IACZ,cACA,cAAcC,KACA;CACd,OACC,kBAAC,OAAD;EAAK,WAAWC,EAAG,oBAAoBC,CAAS;EAAhD,UAAA,CACEC,KAAU,CAACC,KAAaC,IACxB,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,QAAD,EAAA,UAAOF,EAAY,CAAA,GAClBC,IAAY,OAAO,kBAAC,QAAD,EAAA,UAAOC,KAAe,GAAGC,EAAM,GAAS,CAAA,CACxD;EACF,CAAA,IAAA,MACJ,kBAACR,EAAS,MAAV;GACQ;GACP,cAAYE,KAAaG;GACzB,WAAU;GAEV,UAAA,kBAACL,EAAS,WAAV;IACC,WAAU;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGQ,CAAK,CAAC,EAAE,GAAG;GACxD,CAAA;EACa,CAAA,CACX;;AAEP"}
+{"version":3,"file":"meter.js","names":["Progress","Meter","ariaLabel","reading","value","filled","redEnd","yellowEnd","cn","className","label","customValue","index","hideValue"],"sources":["../../src/components/meter.tsx"],"sourcesContent":["import * as Progress from \"@radix-ui/react-progress\";\nimport { cn } from \"../utils/cn\";\n\nexport interface MeterProps {\n\t/**\n\t * Percentage value representing current meter progress (0..100).\n\t *\n\t * Values are clamped to [0, 100] for both segments and accessibility.\n\t * Non-finite readings are displayed as unavailable.\n\t * Does not support arbitrary native HTML props, ref forwarding, min/max, or change callbacks.\n\t * @default 0\n\t */\n\tvalue?: number;\n\t/**\n\t * Text label displayed above the segmented meter and used as accessible name fallback.\n\t */\n\tlabel?: string;\n\t/**\n\t * Custom text overriding the value displayed beside the segments.\n\t */\n\tcustomValue?: string;\n\t/**\n\t * Whether to hide the value displayed beside the segments.\n\t * @default false\n\t */\n\thideValue?: boolean;\n\t/**\n\t * Additional CSS classes applied to the root container.\n\t */\n\tclassName?: string;\n\t/**\n\t * Accessible label announced for assistive technologies. Takes precedence over `label`.\n\t */\n\t\"aria-label\"?: string;\n}\n\nexport function Meter({\n\tvalue = 0,\n\tlabel,\n\tcustomValue,\n\thideValue = false,\n\tclassName,\n\t\"aria-label\": ariaLabel,\n}: MeterProps) {\n\tconst reading = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : null;\n\tconst filled = Math.round(((reading ?? 0) / 100) * 17);\n\tconst redEnd = Math.floor(filled / 3);\n\tconst yellowEnd = redEnd + Math.ceil(filled / 3);\n\treturn (\n\t\t<div className={cn(\"w-full space-y-basalt-space-sm\", className)}>\n\t\t\t{label ? <div className=\"text-basalt-sm text-basalt-muted-foreground\">{label}</div> : null}\n\t\t\t<div className=\"flex items-center gap-basalt-space-lg\">\n\t\t\t\t<Progress.Root\n\t\t\t\t\tdata-basalt-meter=\"\"\n\t\t\t\t\tvalue={reading}\n\t\t\t\t\taria-label={ariaLabel ?? label}\n\t\t\t\t\taria-valuetext={reading === null ? \"Unavailable\" : customValue}\n\t\t\t\t\tclassName=\"h-basalt-3_5 min-w-0 flex-1 overflow-hidden rounded-basalt-sm bg-basalt-muted p-basalt-space-xs\"\n\t\t\t\t>\n\t\t\t\t\t<Progress.Indicator className=\"flex h-full gap-basalt-space-xs\" aria-hidden=\"true\">\n\t\t\t\t\t\t{Array.from({ length: 17 }, (_, index) => (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={`segment-${index}`}\n\t\t\t\t\t\t\t\tdata-filled={index < filled}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"h-full min-w-0 flex-1 rounded-basalt-sm\",\n\t\t\t\t\t\t\t\t\tindex >= filled\n\t\t\t\t\t\t\t\t\t\t? \"bg-basalt-foreground/10\"\n\t\t\t\t\t\t\t\t\t\t: index < redEnd\n\t\t\t\t\t\t\t\t\t\t\t? \"bg-basalt-danger\"\n\t\t\t\t\t\t\t\t\t\t\t: index < yellowEnd\n\t\t\t\t\t\t\t\t\t\t\t\t? \"bg-[hsl(var(--basalt-chart-yellow))]\"\n\t\t\t\t\t\t\t\t\t\t\t\t: \"bg-[hsl(var(--basalt-chart-green))]\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Progress.Indicator>\n\t\t\t\t</Progress.Root>\n\t\t\t\t{hideValue ? null : (\n\t\t\t\t\t<span className=\"shrink-0 text-basalt-sm tabular-nums text-basalt-foreground\">\n\t\t\t\t\t\t{customValue ?? (reading === null ? \"Unavailable\" : `${reading}%`)}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAoCA,SAAgBC,EAAM,EACrB,WAAQ,GACR,UACA,gBACA,eAAY,IACZ,cACA,cAAcC,KACA;CACd,IAAMC,IAAU,OAAO,SAASC,CAAK,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGA,CAAK,CAAC,IAAI,MACvEC,IAAS,KAAK,OAAQF,KAAW,KAAK,MAAO,EAAE,GAC/CG,IAAS,KAAK,MAAMD,IAAS,CAAC,GAC9BE,IAAYD,IAAS,KAAK,KAAKD,IAAS,CAAC;CAC/C,OACC,kBAAC,OAAD;EAAK,WAAWG,EAAG,kCAAkCC,CAAS;EAA9D,UAAA,CACEC,IAAQ,kBAAC,OAAD;GAAK,WAAU;GAA+C,UAAAA;EAAW,CAAA,IAAI,MACtF,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAACV,EAAS,MAAV;IACC,qBAAkB;IAClB,OAAOG;IACP,cAAYD,KAAaQ;IACzB,kBAAgBP,MAAY,OAAO,gBAAgBQ;IACnD,WAAU;IAEV,UAAA,kBAACX,EAAS,WAAV;KAAoB,WAAU;KAAkC,eAAY;KAC1E,UAAA,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAC/B,kBAAC,QAAD;MAEC,eAAaY,IAAQP;MACrB,WAAWG,EACV,2CACAI,KAASP,IACN,4BACAO,IAAQN,IACP,qBACAM,IAAQL,IACP,yCACA,qCACN;KACA,GAZK,WAAWK,GAYhB,CACD;IACkB,CAAA;GACN,CAAA,GACdC,IAAY,OACZ,kBAAC,QAAD;IAAM,WAAU;IACd,UAAAF,MAAgBR,MAAY,OAAO,gBAAgB,GAAGA,EAAQ;GAC1D,CAAA,CAEH;EACD,CAAA,CAAA;;AAEP"}

package/dist/components/multi-select.js

@@ -2,37 +2,38 @@
 import { cn as e } from "../utils/cn.js";
 import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { Button as n } from "./button.js";
-import { Input as r } from "./input.js";
-import { Popover as ee, PopoverContent as te, PopoverTrigger as ne } from "./popover.js";
-import { useEffect as i, useId as a, useRef as o, useState as s } from "react";
-import { Check as c, ChevronDown as l, X as u } from "lucide-react";
+import { useHoverHighlight as r } from "../utils/use-hover-highlight.js";
+import { Input as i } from "./input.js";
+import { Popover as a, PopoverContent as ee, PopoverTrigger as o } from "./popover.js";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { Check as te, ChevronDown as ne, X as re } from "lucide-react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/multi-select.tsx
-function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange: _, query: v, defaultQuery: y = "", onQueryChange: re, open: b, defaultOpen: ie = !1, onOpenChange: ae, filterOptions: oe = !0, loading: x = !1, disabled: S = !1, name: C, form: w, placeholder: se = "Select options", searchPlaceholder: ce = "Search options…", emptyLabel: T = "No options found.", loadingLabel: E = "Loading options…", removeLabel: D = "Remove", showChips: O = !0, formatSelectionCount: k, className: A }) {
-	let [le, j] = s(g), [ue, M] = s(y), [de, N] = s(ie), [P, F] = s(null), I = o(null), L = o(null), R = o(null), z = o(null), B = o({
+function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange: ie, query: _, defaultQuery: v = "", onQueryChange: ae, open: y, defaultOpen: oe = !1, onOpenChange: se, filterOptions: ce = !0, loading: b = !1, disabled: x = !1, name: S, form: C, placeholder: le = "Select options", searchPlaceholder: ue = "Search options…", emptyLabel: w = "No options found.", loadingLabel: T = "Loading options…", removeLabel: E = "Remove", showChips: D = !0, formatSelectionCount: O, className: de }) {
+	let [fe, k] = u(g), [pe, A] = u(v), [j, M] = u(oe), [N, P] = u(null), F = l(null), I = l(null), L = l(null), R = r(L), z = l(null), B = l({
 		value: h,
 		defaultValue: g,
-		query: v,
-		defaultQuery: y,
-		open: b
+		query: _,
+		defaultQuery: v,
+		open: y
 	});
-	i(() => {
+	s(() => {
 		B.current = {
 			value: h,
 			defaultValue: g,
-			query: v,
-			defaultQuery: y,
-			open: b
+			query: _,
+			defaultQuery: v,
+			open: y
 		};
-	}), i(() => {
-		let e = L.current?.form;
+	}), s(() => {
+		let e = I.current?.form;
 		if (!e) return;
 		let t = /* @__PURE__ */ new Set();
 		function n(e) {
 			let n = setTimeout(() => {
 				if (t.delete(n), e.defaultPrevented) return;
 				let r = B.current;
-				r.value === void 0 && j(r.defaultValue), r.query === void 0 && M(r.defaultQuery), r.open === void 0 && N(!1), F(null);
+				r.value === void 0 && k(r.defaultValue), r.query === void 0 && A(r.defaultQuery), r.open === void 0 && M(!1), P(null);
 			}, 0);
 			t.add(n);
 		}
@@ -40,13 +41,13 @@ function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange
 			for (let e of t) clearTimeout(e);
 			e.removeEventListener("reset", n);
 		};
-	}, [w]);
-	let V = a(), H = h ?? le, U = v ?? ue, W = (b ?? de) && !S, G = m.filter((e) => !oe || `${e.label} ${e.description ?? ""}`.toLocaleLowerCase().includes(U.trim().toLocaleLowerCase())), K = G.filter((e) => !e.disabled), q = K.some((e) => e.value === P) ? P : K[0]?.value, J = G.findIndex((e) => e.value === q), Y = k ? k(H.length) : `${H.length} selected`;
+	}, [C]);
+	let V = c(), H = h ?? fe, U = _ ?? pe, W = (y ?? j) && !x, G = m.filter((e) => !ce || `${e.label} ${e.description ?? ""}`.toLocaleLowerCase().includes(U.trim().toLocaleLowerCase())), K = G.filter((e) => !e.disabled), q = K.some((e) => e.value === N) ? N : K[0]?.value, J = G.findIndex((e) => e.value === q), Y = O ? O(H.length) : `${H.length} selected`;
 	function X(e) {
-		S || (b === void 0 && N(e), ae?.(e));
+		x || (y === void 0 && M(e), se?.(e));
 	}
 	function Z(e) {
-		S || (h === void 0 && j(e), _?.(e));
+		x || (h === void 0 && k(e), ie?.(e));
 	}
 	function Q(e) {
 		e.disabled || Z(H.includes(e.value) ? H.filter((t) => t !== e.value) : [...H, e.value]);
@@ -57,49 +58,49 @@ function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange
 		e !== void 0 && Z(H.filter((t) => t !== e));
 	}
 	return /* @__PURE__ */ f("div", {
-		className: e(t, "min-w-0 space-y-2", A),
+		className: e(t, "min-w-0 space-y-basalt-space-lg", de),
 		children: [
-			O && H.length > 0 && /* @__PURE__ */ d("div", {
+			D && H.length > 0 && /* @__PURE__ */ d("div", {
 				role: "group",
-				className: "flex flex-wrap gap-1.5",
+				className: "flex flex-wrap gap-basalt-space-md",
 				"aria-label": `${p}: ${Y}`,
 				children: H.map((e) => {
 					let t = m.find((t) => t.value === e), n = t?.label ?? e;
 					return /* @__PURE__ */ f("span", {
-						className: "inline-flex max-w-full items-center gap-1 rounded-basalt-md border border-basalt-border bg-basalt-accent py-0.5 pl-2 text-xs",
+						className: "inline-flex max-w-full items-center gap-basalt-space-sm rounded-basalt-md border border-basalt-border bg-basalt-selected py-basalt-space-xs pl-basalt-space-lg text-basalt-sm",
 						children: [/* @__PURE__ */ d("span", {
 							className: "min-w-0 break-words",
 							children: n
 						}), /* @__PURE__ */ d("button", {
 							type: "button",
-							disabled: S || t?.disabled,
-							"aria-label": `${D} ${n}`,
-							className: "rounded p-1 focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50",
+							disabled: x || t?.disabled,
+							"aria-label": `${E} ${n}`,
+							className: "rounded-basalt-sm p-basalt-space-sm focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50",
 							onClick: () => Z(H.filter((t) => t !== e)),
-							children: /* @__PURE__ */ d(u, {
-								className: "size-3",
+							children: /* @__PURE__ */ d(re, {
+								className: "size-basalt-icon-sm",
 								"aria-hidden": "true"
 							})
 						})]
 					}, e);
 				})
 			}),
-			!S && C && H.map((e) => /* @__PURE__ */ d("input", {
+			!x && S && H.map((e) => /* @__PURE__ */ d("input", {
 				type: "hidden",
-				name: C,
-				form: w,
+				name: S,
+				form: C,
 				value: e
 			}, e)),
-			/* @__PURE__ */ f(ee, {
+			/* @__PURE__ */ f(a, {
 				open: W,
 				onOpenChange: X,
-				children: [/* @__PURE__ */ d(ne, {
+				children: [/* @__PURE__ */ d(o, {
 					asChild: !0,
 					children: /* @__PURE__ */ f(n, {
-						ref: L,
-						form: w,
+						ref: I,
+						form: C,
 						variant: "outline",
-						disabled: S,
+						disabled: x,
 						"aria-label": p,
 						"aria-describedby": `${V}-count`,
 						className: "w-full justify-between",
@@ -108,41 +109,41 @@ function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange
 						},
 						children: [/* @__PURE__ */ d("span", {
 							className: "truncate",
-							children: H.length ? Y : se
-						}), /* @__PURE__ */ d(l, { "aria-hidden": "true" })]
+							children: H.length ? Y : le
+						}), /* @__PURE__ */ d(ne, { "aria-hidden": "true" })]
 					})
-				}), /* @__PURE__ */ f(te, {
+				}), /* @__PURE__ */ f(ee, {
 					align: "start",
-					className: "w-72 max-w-[calc(100vw-2rem)] p-2",
+					className: "w-basalt-72 max-w-[calc(100vw-2rem)] p-basalt-space-lg",
 					"aria-label": p,
 					onOpenAutoFocus: (e) => {
-						e.preventDefault(), I.current?.focus();
+						e.preventDefault(), F.current?.focus();
 					},
 					children: [
-						/* @__PURE__ */ d(r, {
-							ref: I,
+						/* @__PURE__ */ d(i, {
+							ref: F,
 							role: "combobox",
 							"aria-label": `${p}: search`,
 							"aria-expanded": W,
 							"aria-autocomplete": "list",
 							"aria-controls": `${V}-list`,
-							"aria-activedescendant": !x && J >= 0 ? `${V}-option-${J}` : void 0,
-							placeholder: ce,
+							"aria-activedescendant": !b && J >= 0 ? `${V}-option-${J}` : void 0,
+							placeholder: ue,
 							value: U,
 							onChange: (e) => {
-								v === void 0 && M(e.target.value), re?.(e.target.value), F(null);
+								_ === void 0 && A(e.target.value), ae?.(e.target.value), P(null);
 							},
 							onKeyDown: (e) => {
 								if (!e.nativeEvent.isComposing) {
 									if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-										if (e.preventDefault(), !x && K.length) {
+										if (e.preventDefault(), !b && K.length) {
 											let t = K.findIndex((e) => e.value === q), n = K[(t + (e.key === "ArrowDown" ? 1 : -1) + K.length) % K.length];
-											F(n.value), R.current?.querySelector(`[data-option-index="${G.indexOf(n)}"]`)?.scrollIntoView({ block: "nearest" });
+											P(n.value), L.current?.querySelector(`[data-option-index="${G.indexOf(n)}"]`)?.scrollIntoView({ block: "nearest" });
 										}
 									} else if (e.key === "Enter") {
 										e.preventDefault();
 										let t = K.find((e) => e.value === q);
-										!x && t && Q(t);
+										!b && t && Q(t);
 									} else e.key === "Backspace" && !U && (e.preventDefault(), $());
 								}
 							}
@@ -153,28 +154,31 @@ function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange
 							role: "listbox",
 							"aria-label": p,
 							"aria-multiselectable": "true",
-							"aria-busy": x,
-							className: "mt-2 max-h-60 overflow-y-auto",
-							children: !x && G.map((t, n) => /* @__PURE__ */ f("button", {
+							"aria-busy": b,
+							className: "basalt-hover-list mt-basalt-space-lg max-h-basalt-60 overflow-y-auto",
+							children: !b && G.map((t, n) => /* @__PURE__ */ f("button", {
 								type: "button",
 								role: "option",
+								"data-basalt-hover-item": "",
+								"data-hover-active": q === t.value,
 								id: `${V}-option-${n}`,
 								"data-option-index": n,
 								tabIndex: -1,
 								"aria-selected": H.includes(t.value),
+								"data-hover-selected": H.includes(t.value),
 								"aria-disabled": t.disabled || void 0,
 								disabled: t.disabled,
-								className: e("flex w-full items-center gap-2 rounded-basalt-md px-2 py-2 text-left text-sm disabled:opacity-40", q === t.value && "bg-basalt-accent"),
+								className: e("flex w-full items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-lg text-left text-basalt-base disabled:opacity-40"),
 								onPointerMove: (e) => {
 									let n = z.current;
 									(n?.x !== e.clientX || n.y !== e.clientY) && (z.current = {
 										x: e.clientX,
 										y: e.clientY
-									}, t.disabled || F(t.value));
+									}, t.disabled || P(t.value));
 								},
 								onMouseDown: (e) => e.preventDefault(),
 								onClick: () => {
-									Q(t), I.current?.focus();
+									Q(t), F.current?.focus();
 								},
 								children: [
 									t.leading,
@@ -184,21 +188,21 @@ function p({ label: p, options: m, value: h, defaultValue: g = [], onValueChange
 											className: "block break-words",
 											children: t.label
 										}), t.description && /* @__PURE__ */ d("span", {
-											className: "block text-xs text-basalt-muted-foreground",
+											className: "block text-basalt-sm text-basalt-muted-foreground",
 											children: t.description
 										})]
 									}),
-									H.includes(t.value) && /* @__PURE__ */ d(c, {
-										className: "size-4 shrink-0",
+									H.includes(t.value) && /* @__PURE__ */ d(te, {
+										className: "size-basalt-icon-lg shrink-0",
 										"aria-hidden": "true"
 									})
 								]
 							}, t.value))
 						}),
-						(x || G.length === 0) && /* @__PURE__ */ d("p", {
+						(b || G.length === 0) && /* @__PURE__ */ d("p", {
 							role: "status",
-							className: "px-2 py-4 text-sm text-basalt-muted-foreground",
-							children: x ? E : T
+							className: "px-basalt-space-lg py-basalt-space-lg text-basalt-base text-basalt-muted-foreground",
+							children: b ? T : w
 						})
 					]
 				})]

package/dist/components/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":["MultiSelect","localValue","setLocalValue","useState","defaultValue","localQuery","setLocalQuery","defaultQuery","localOpen","setLocalOpen","defaultOpen","active","setActive","input","useRef","trigger","list","pointer","resetConfig","useEffect","owner","timers","reset","timer","event","config","form","id","useId","selected","value","search","query","expanded","open","disabled","visible","options","filterOptions","option","enabled","activeValue","activeIndex","countText","formatSelectionCount","changeOpen","next","onOpenChange","changeValue","onValueChange","toggle","item","removeLast","cn","BASALT_UI_CLASS","className","showChips","label","text","removeLabel","X","name","Popover","PopoverTrigger","Button","placeholder","ChevronDown","PopoverContent","Input","loading","searchPlaceholder","onQueryChange","index","previous","Check","loadingLabel","emptyLabel"],"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { Check, ChevronDown, X } from \"lucide-react\";\nimport { type ReactNode, useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport interface MultiSelectOption {\n\t/** Stable identifier, independent of the display label. */\n\tvalue: string;\n\t/** Searchable and accessible display name. */\n\tlabel: string;\n\t/** Optional secondary searchable text. */\n\tdescription?: string;\n\t/** Caller-provided icon or avatar. */\n\tleading?: ReactNode;\n\t/** Prevent adding or removing this option. */\n\tdisabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n\t/** Accessible field and popup name. */\n\tlabel: string;\n\t/** Available options; retain selected options to preserve their display labels. */\n\toptions: readonly MultiSelectOption[];\n\t/** Controlled selected identifiers. */\n\tvalue?: readonly string[];\n\t/** Initial uncontrolled selection. @default [] */\n\tdefaultValue?: readonly string[];\n\t/** Selection requests; controlled values change only when accepted by the caller. */\n\tonValueChange?: (value: string[]) => void;\n\t/** Controlled search text; asynchronous requests belong to the caller. */\n\tquery?: string;\n\t/** Initial uncontrolled search text. @default \"\" */\n\tdefaultQuery?: string;\n\t/** Search text requests. */\n\tonQueryChange?: (query: string) => void;\n\t/** Controlled popup visibility. */\n\topen?: boolean;\n\t/** Initial uncontrolled popup visibility. @default false */\n\tdefaultOpen?: boolean;\n\t/** Popup visibility requests. */\n\tonOpenChange?: (open: boolean) => void;\n\t/** Use local label/description filtering; disable for server-filtered options. @default true */\n\tfilterOptions?: boolean;\n\t/** Loading content replaces the option list. @default false */\n\tloading?: boolean;\n\t/** Disables the trigger, chips, and native form entries. @default false */\n\tdisabled?: boolean;\n\t/** Repeated native form entry name, one entry per selected identifier. */\n\tname?: string;\n\t/** Optional external native form owner. Uncontrolled state respects uncancelled form resets. */\n\tform?: string;\n\t/** Empty selection prompt. @default \"Select options\" */\n\tplaceholder?: string;\n\t/** Search input prompt. @default \"Search options…\" */\n\tsearchPlaceholder?: string;\n\t/** Empty search result text. @default \"No options found.\" */\n\temptyLabel?: string;\n\t/** Loading announcement. @default \"Loading options…\" */\n\tloadingLabel?: string;\n\t/** Chip removal label prefix. @default \"Remove\" */\n\tremoveLabel?: string;\n\t/** Show removable selection chips; disable when a FilterBar renders its own chips. @default true */\n\tshowChips?: boolean;\n\t/** Selection count formatter, including localization. */\n\tformatSelectionCount?: (count: number) => string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nexport function MultiSelect({\n\tlabel,\n\toptions,\n\tvalue,\n\tdefaultValue = [],\n\tonValueChange,\n\tquery,\n\tdefaultQuery = \"\",\n\tonQueryChange,\n\topen,\n\tdefaultOpen = false,\n\tonOpenChange,\n\tfilterOptions = true,\n\tloading = false,\n\tdisabled = false,\n\tname,\n\tform,\n\tplaceholder = \"Select options\",\n\tsearchPlaceholder = \"Search options…\",\n\temptyLabel = \"No options found.\",\n\tloadingLabel = \"Loading options…\",\n\tremoveLabel = \"Remove\",\n\tshowChips = true,\n\tformatSelectionCount,\n\tclassName,\n}: MultiSelectProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst [localQuery, setLocalQuery] = useState(defaultQuery);\n\tconst [localOpen, setLocalOpen] = useState(defaultOpen);\n\tconst [active, setActive] = useState<string | null>(null);\n\tconst input = useRef<HTMLInputElement>(null);\n\tconst trigger = useRef<HTMLButtonElement>(null);\n\tconst list = useRef<HTMLDivElement>(null);\n\tconst pointer = useRef<{ x: number; y: number } | null>(null);\n\tconst resetConfig = useRef({ value, defaultValue, query, defaultQuery, open });\n\tuseEffect(() => {\n\t\tresetConfig.current = { value, defaultValue, query, defaultQuery, open };\n\t});\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: form changes the native owner of the same trigger and requires rebinding its reset listener.\n\tuseEffect(() => {\n\t\tconst owner = trigger.current?.form;\n\t\tif (!owner) return;\n\t\tconst timers = new Set<ReturnType<typeof setTimeout>>();\n\t\tfunction reset(event: Event) {\n\t\t\tconst timer = setTimeout(() => {\n\t\t\t\ttimers.delete(timer);\n\t\t\t\tif (event.defaultPrevented) return;\n\t\t\t\tconst config = resetConfig.current;\n\t\t\t\tif (config.value === undefined) setLocalValue(config.defaultValue);\n\t\t\t\tif (config.query === undefined) setLocalQuery(config.defaultQuery);\n\t\t\t\tif (config.open === undefined) setLocalOpen(false);\n\t\t\t\tsetActive(null);\n\t\t\t}, 0);\n\t\t\ttimers.add(timer);\n\t\t}\n\t\towner.addEventListener(\"reset\", reset);\n\t\treturn () => {\n\t\t\tfor (const timer of timers) clearTimeout(timer);\n\t\t\towner.removeEventListener(\"reset\", reset);\n\t\t};\n\t}, [form]);\n\tconst id = useId();\n\tconst selected = value ?? localValue;\n\tconst search = query ?? localQuery;\n\tconst expanded = (open ?? localOpen) && !disabled;\n\tconst visible = options.filter(\n\t\t(option) =>\n\t\t\t!filterOptions ||\n\t\t\t`${option.label} ${option.description ?? \"\"}`\n\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t.includes(search.trim().toLocaleLowerCase()),\n\t);\n\tconst enabled = visible.filter((option) => !option.disabled);\n\tconst activeValue = enabled.some((option) => option.value === active)\n\t\t? active\n\t\t: enabled[0]?.value;\n\tconst activeIndex = visible.findIndex((option) => option.value === activeValue);\n\tconst countText = formatSelectionCount\n\t\t? formatSelectionCount(selected.length)\n\t\t: `${selected.length} selected`;\n\n\tfunction changeOpen(next: boolean) {\n\t\tif (disabled) return;\n\t\tif (open === undefined) setLocalOpen(next);\n\t\tonOpenChange?.(next);\n\t}\n\tfunction changeValue(next: string[]) {\n\t\tif (disabled) return;\n\t\tif (value === undefined) setLocalValue(next);\n\t\tonValueChange?.(next);\n\t}\n\tfunction toggle(option: MultiSelectOption) {\n\t\tif (option.disabled) return;\n\t\tchangeValue(\n\t\t\tselected.includes(option.value)\n\t\t\t\t? selected.filter((item) => item !== option.value)\n\t\t\t\t: [...selected, option.value],\n\t\t);\n\t}\n\tfunction removeLast() {\n\t\tif (search) return;\n\t\tconst item = [...selected]\n\t\t\t.reverse()\n\t\t\t.find((value) => !options.find((option) => option.value === value)?.disabled);\n\t\tif (item !== undefined) changeValue(selected.filter((value) => value !== item));\n\t}\n\n\treturn (\n\t\t<div className={cn(BASALT_UI_CLASS, \"min-w-0 space-y-2\", className)}>\n\t\t\t{showChips && selected.length > 0 && (\n\t\t\t\t<div role=\"group\" className=\"flex flex-wrap gap-1.5\" aria-label={`${label}: ${countText}`}>\n\t\t\t\t\t{selected.map((item) => {\n\t\t\t\t\t\tconst option = options.find((option) => option.value === item);\n\t\t\t\t\t\tconst text = option?.label ?? item;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\tclassName=\"inline-flex max-w-full items-center gap-1 rounded-basalt-md border border-basalt-border bg-basalt-accent py-0.5 pl-2 text-xs\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"min-w-0 break-words\">{text}</span>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdisabled={disabled || option?.disabled}\n\t\t\t\t\t\t\t\t\taria-label={`${removeLabel} ${text}`}\n\t\t\t\t\t\t\t\t\tclassName=\"rounded p-1 focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50\"\n\t\t\t\t\t\t\t\t\tonClick={() => changeValue(selected.filter((value) => value !== item))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<X className=\"size-3\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{!disabled &&\n\t\t\t\tname &&\n\t\t\t\tselected.map((item) => (\n\t\t\t\t\t<input key={item} type=\"hidden\" name={name} form={form} value={item} />\n\t\t\t\t))}\n\t\t\t<Popover open={expanded} onOpenChange={changeOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={trigger}\n\t\t\t\t\t\tform={form}\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\taria-describedby={`${id}-count`}\n\t\t\t\t\t\tclassName=\"w-full justify-between\"\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing) return;\n\t\t\t\t\t\t\tif (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tchangeOpen(true);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.key === \"Backspace\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tremoveLast();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"truncate\">{selected.length ? countText : placeholder}</span>\n\t\t\t\t\t\t<ChevronDown aria-hidden=\"true\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"w-72 max-w-[calc(100vw-2rem)] p-2\"\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tinput.current?.focus();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tref={input}\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\taria-label={`${label}: search`}\n\t\t\t\t\t\taria-expanded={expanded}\n\t\t\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\t\t\taria-controls={`${id}-list`}\n\t\t\t\t\t\taria-activedescendant={\n\t\t\t\t\t\t\t!loading && activeIndex >= 0 ? `${id}-option-${activeIndex}` : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\t\tif (query === undefined) setLocalQuery(event.target.value);\n\t\t\t\t\t\t\tonQueryChange?.(event.target.value);\n\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing) return;\n\t\t\t\t\t\t\tif (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tif (!loading && enabled.length) {\n\t\t\t\t\t\t\t\t\tconst index = enabled.findIndex((option) => option.value === activeValue);\n\t\t\t\t\t\t\t\t\tconst next =\n\t\t\t\t\t\t\t\t\t\tenabled[\n\t\t\t\t\t\t\t\t\t\t\t(index + (event.key === \"ArrowDown\" ? 1 : -1) + enabled.length) %\n\t\t\t\t\t\t\t\t\t\t\t\tenabled.length\n\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tsetActive(next.value);\n\t\t\t\t\t\t\t\t\tlist.current\n\t\t\t\t\t\t\t\t\t\t?.querySelector<HTMLElement>(`[data-option-index=\"${visible.indexOf(next)}\"]`)\n\t\t\t\t\t\t\t\t\t\t?.scrollIntoView({ block: \"nearest\" });\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tconst option = enabled.find((option) => option.value === activeValue);\n\t\t\t\t\t\t\t\tif (!loading && option) toggle(option);\n\t\t\t\t\t\t\t} else if (event.key === \"Backspace\" && !search) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tremoveLast();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={list}\n\t\t\t\t\t\tid={`${id}-list`}\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\taria-multiselectable=\"true\"\n\t\t\t\t\t\taria-busy={loading}\n\t\t\t\t\t\tclassName=\"mt-2 max-h-60 overflow-y-auto\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{!loading &&\n\t\t\t\t\t\t\tvisible.map((option, index) => (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tid={`${id}-option-${index}`}\n\t\t\t\t\t\t\t\t\tdata-option-index={index}\n\t\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\taria-selected={selected.includes(option.value)}\n\t\t\t\t\t\t\t\t\taria-disabled={option.disabled || undefined}\n\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex w-full items-center gap-2 rounded-basalt-md px-2 py-2 text-left text-sm disabled:opacity-40\",\n\t\t\t\t\t\t\t\t\t\tactiveValue === option.value && \"bg-basalt-accent\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tonPointerMove={(event) => {\n\t\t\t\t\t\t\t\t\t\tconst previous = pointer.current;\n\t\t\t\t\t\t\t\t\t\tif (previous?.x === event.clientX && previous.y === event.clientY) return;\n\t\t\t\t\t\t\t\t\t\tpointer.current = { x: event.clientX, y: event.clientY };\n\t\t\t\t\t\t\t\t\t\tif (!option.disabled) setActive(option.value);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseDown={(event) => event.preventDefault()}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\ttoggle(option);\n\t\t\t\t\t\t\t\t\t\tinput.current?.focus();\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.leading}\n\t\t\t\t\t\t\t\t\t<span className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"block break-words\">{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t{option.description && (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"block text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t{option.description}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{selected.includes(option.value) && (\n\t\t\t\t\t\t\t\t\t\t<Check className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(loading || visible.length === 0) && (\n\t\t\t\t\t\t<p role=\"status\" className=\"px-2 py-4 text-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{loading ? loadingLabel : emptyLabel}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t\t<span id={`${id}-count`} className=\"sr-only\" aria-live=\"polite\">\n\t\t\t\t{countText}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"multi-select.js","names":["MultiSelect","localValue","setLocalValue","useState","defaultValue","localQuery","setLocalQuery","defaultQuery","localOpen","setLocalOpen","defaultOpen","active","setActive","input","useRef","trigger","list","highlightRef","useHoverHighlight","pointer","resetConfig","useEffect","owner","timers","reset","timer","event","config","form","id","useId","selected","value","search","query","expanded","open","disabled","visible","options","filterOptions","option","enabled","activeValue","activeIndex","countText","formatSelectionCount","changeOpen","next","onOpenChange","changeValue","onValueChange","toggle","item","removeLast","cn","BASALT_UI_CLASS","className","showChips","label","text","removeLabel","X","name","Popover","PopoverTrigger","Button","placeholder","ChevronDown","PopoverContent","Input","loading","searchPlaceholder","onQueryChange","index","previous","Check","loadingLabel","emptyLabel"],"sources":["../../src/components/multi-select.tsx"],"sourcesContent":["import { Check, ChevronDown, X } from \"lucide-react\";\nimport { type ReactNode, useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport interface MultiSelectOption {\n\t/** Stable identifier, independent of the display label. */\n\tvalue: string;\n\t/** Searchable and accessible display name. */\n\tlabel: string;\n\t/** Optional secondary searchable text. */\n\tdescription?: string;\n\t/** Caller-provided icon or avatar. */\n\tleading?: ReactNode;\n\t/** Prevent adding or removing this option. */\n\tdisabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n\t/** Accessible field and popup name. */\n\tlabel: string;\n\t/** Available options; retain selected options to preserve their display labels. */\n\toptions: readonly MultiSelectOption[];\n\t/** Controlled selected identifiers. */\n\tvalue?: readonly string[];\n\t/** Initial uncontrolled selection. @default [] */\n\tdefaultValue?: readonly string[];\n\t/** Selection requests; controlled values change only when accepted by the caller. */\n\tonValueChange?: (value: string[]) => void;\n\t/** Controlled search text; asynchronous requests belong to the caller. */\n\tquery?: string;\n\t/** Initial uncontrolled search text. @default \"\" */\n\tdefaultQuery?: string;\n\t/** Search text requests. */\n\tonQueryChange?: (query: string) => void;\n\t/** Controlled popup visibility. */\n\topen?: boolean;\n\t/** Initial uncontrolled popup visibility. @default false */\n\tdefaultOpen?: boolean;\n\t/** Popup visibility requests. */\n\tonOpenChange?: (open: boolean) => void;\n\t/** Use local label/description filtering; disable for server-filtered options. @default true */\n\tfilterOptions?: boolean;\n\t/** Loading content replaces the option list. @default false */\n\tloading?: boolean;\n\t/** Disables the trigger, chips, and native form entries. @default false */\n\tdisabled?: boolean;\n\t/** Repeated native form entry name, one entry per selected identifier. */\n\tname?: string;\n\t/** Optional external native form owner. Uncontrolled state respects uncancelled form resets. */\n\tform?: string;\n\t/** Empty selection prompt. @default \"Select options\" */\n\tplaceholder?: string;\n\t/** Search input prompt. @default \"Search options…\" */\n\tsearchPlaceholder?: string;\n\t/** Empty search result text. @default \"No options found.\" */\n\temptyLabel?: string;\n\t/** Loading announcement. @default \"Loading options…\" */\n\tloadingLabel?: string;\n\t/** Chip removal label prefix. @default \"Remove\" */\n\tremoveLabel?: string;\n\t/** Show removable selection chips; disable when a FilterBar renders its own chips. @default true */\n\tshowChips?: boolean;\n\t/** Selection count formatter, including localization. */\n\tformatSelectionCount?: (count: number) => string;\n\t/** Additional root classes. */\n\tclassName?: string;\n}\n\nexport function MultiSelect({\n\tlabel,\n\toptions,\n\tvalue,\n\tdefaultValue = [],\n\tonValueChange,\n\tquery,\n\tdefaultQuery = \"\",\n\tonQueryChange,\n\topen,\n\tdefaultOpen = false,\n\tonOpenChange,\n\tfilterOptions = true,\n\tloading = false,\n\tdisabled = false,\n\tname,\n\tform,\n\tplaceholder = \"Select options\",\n\tsearchPlaceholder = \"Search options…\",\n\temptyLabel = \"No options found.\",\n\tloadingLabel = \"Loading options…\",\n\tremoveLabel = \"Remove\",\n\tshowChips = true,\n\tformatSelectionCount,\n\tclassName,\n}: MultiSelectProps) {\n\tconst [localValue, setLocalValue] = useState(defaultValue);\n\tconst [localQuery, setLocalQuery] = useState(defaultQuery);\n\tconst [localOpen, setLocalOpen] = useState(defaultOpen);\n\tconst [active, setActive] = useState<string | null>(null);\n\tconst input = useRef<HTMLInputElement>(null);\n\tconst trigger = useRef<HTMLButtonElement>(null);\n\tconst list = useRef<HTMLDivElement>(null);\n\tconst highlightRef = useHoverHighlight(list);\n\tconst pointer = useRef<{ x: number; y: number } | null>(null);\n\tconst resetConfig = useRef({ value, defaultValue, query, defaultQuery, open });\n\tuseEffect(() => {\n\t\tresetConfig.current = { value, defaultValue, query, defaultQuery, open };\n\t});\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: form changes the native owner of the same trigger and requires rebinding its reset listener.\n\tuseEffect(() => {\n\t\tconst owner = trigger.current?.form;\n\t\tif (!owner) return;\n\t\tconst timers = new Set<ReturnType<typeof setTimeout>>();\n\t\tfunction reset(event: Event) {\n\t\t\tconst timer = setTimeout(() => {\n\t\t\t\ttimers.delete(timer);\n\t\t\t\tif (event.defaultPrevented) return;\n\t\t\t\tconst config = resetConfig.current;\n\t\t\t\tif (config.value === undefined) setLocalValue(config.defaultValue);\n\t\t\t\tif (config.query === undefined) setLocalQuery(config.defaultQuery);\n\t\t\t\tif (config.open === undefined) setLocalOpen(false);\n\t\t\t\tsetActive(null);\n\t\t\t}, 0);\n\t\t\ttimers.add(timer);\n\t\t}\n\t\towner.addEventListener(\"reset\", reset);\n\t\treturn () => {\n\t\t\tfor (const timer of timers) clearTimeout(timer);\n\t\t\towner.removeEventListener(\"reset\", reset);\n\t\t};\n\t}, [form]);\n\tconst id = useId();\n\tconst selected = value ?? localValue;\n\tconst search = query ?? localQuery;\n\tconst expanded = (open ?? localOpen) && !disabled;\n\tconst visible = options.filter(\n\t\t(option) =>\n\t\t\t!filterOptions ||\n\t\t\t`${option.label} ${option.description ?? \"\"}`\n\t\t\t\t.toLocaleLowerCase()\n\t\t\t\t.includes(search.trim().toLocaleLowerCase()),\n\t);\n\tconst enabled = visible.filter((option) => !option.disabled);\n\tconst activeValue = enabled.some((option) => option.value === active)\n\t\t? active\n\t\t: enabled[0]?.value;\n\tconst activeIndex = visible.findIndex((option) => option.value === activeValue);\n\tconst countText = formatSelectionCount\n\t\t? formatSelectionCount(selected.length)\n\t\t: `${selected.length} selected`;\n\n\tfunction changeOpen(next: boolean) {\n\t\tif (disabled) return;\n\t\tif (open === undefined) setLocalOpen(next);\n\t\tonOpenChange?.(next);\n\t}\n\tfunction changeValue(next: string[]) {\n\t\tif (disabled) return;\n\t\tif (value === undefined) setLocalValue(next);\n\t\tonValueChange?.(next);\n\t}\n\tfunction toggle(option: MultiSelectOption) {\n\t\tif (option.disabled) return;\n\t\tchangeValue(\n\t\t\tselected.includes(option.value)\n\t\t\t\t? selected.filter((item) => item !== option.value)\n\t\t\t\t: [...selected, option.value],\n\t\t);\n\t}\n\tfunction removeLast() {\n\t\tif (search) return;\n\t\tconst item = [...selected]\n\t\t\t.reverse()\n\t\t\t.find((value) => !options.find((option) => option.value === value)?.disabled);\n\t\tif (item !== undefined) changeValue(selected.filter((value) => value !== item));\n\t}\n\n\treturn (\n\t\t<div className={cn(BASALT_UI_CLASS, \"min-w-0 space-y-basalt-space-lg\", className)}>\n\t\t\t{showChips && selected.length > 0 && (\n\t\t\t\t<div\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\tclassName=\"flex flex-wrap gap-basalt-space-md\"\n\t\t\t\t\taria-label={`${label}: ${countText}`}\n\t\t\t\t>\n\t\t\t\t\t{selected.map((item) => {\n\t\t\t\t\t\tconst option = options.find((option) => option.value === item);\n\t\t\t\t\t\tconst text = option?.label ?? item;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\tclassName=\"inline-flex max-w-full items-center gap-basalt-space-sm rounded-basalt-md border border-basalt-border bg-basalt-selected py-basalt-space-xs pl-basalt-space-lg text-basalt-sm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"min-w-0 break-words\">{text}</span>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdisabled={disabled || option?.disabled}\n\t\t\t\t\t\t\t\t\taria-label={`${removeLabel} ${text}`}\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-basalt-sm p-basalt-space-sm focus-visible:outline-2 focus-visible:outline-basalt-ring disabled:opacity-50\"\n\t\t\t\t\t\t\t\t\tonClick={() => changeValue(selected.filter((value) => value !== item))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<X className=\"size-basalt-icon-sm\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{!disabled &&\n\t\t\t\tname &&\n\t\t\t\tselected.map((item) => (\n\t\t\t\t\t<input key={item} type=\"hidden\" name={name} form={form} value={item} />\n\t\t\t\t))}\n\t\t\t<Popover open={expanded} onOpenChange={changeOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={trigger}\n\t\t\t\t\t\tform={form}\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\taria-describedby={`${id}-count`}\n\t\t\t\t\t\tclassName=\"w-full justify-between\"\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing) return;\n\t\t\t\t\t\t\tif (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tchangeOpen(true);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (event.key === \"Backspace\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tremoveLast();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"truncate\">{selected.length ? countText : placeholder}</span>\n\t\t\t\t\t\t<ChevronDown aria-hidden=\"true\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"w-basalt-72 max-w-[calc(100vw-2rem)] p-basalt-space-lg\"\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tinput.current?.focus();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tref={input}\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\taria-label={`${label}: search`}\n\t\t\t\t\t\taria-expanded={expanded}\n\t\t\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\t\t\taria-controls={`${id}-list`}\n\t\t\t\t\t\taria-activedescendant={\n\t\t\t\t\t\t\t!loading && activeIndex >= 0 ? `${id}-option-${activeIndex}` : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\t\tif (query === undefined) setLocalQuery(event.target.value);\n\t\t\t\t\t\t\tonQueryChange?.(event.target.value);\n\t\t\t\t\t\t\tsetActive(null);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\t\t\tif (event.nativeEvent.isComposing) return;\n\t\t\t\t\t\t\tif (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tif (!loading && enabled.length) {\n\t\t\t\t\t\t\t\t\tconst index = enabled.findIndex((option) => option.value === activeValue);\n\t\t\t\t\t\t\t\t\tconst next =\n\t\t\t\t\t\t\t\t\t\tenabled[\n\t\t\t\t\t\t\t\t\t\t\t(index + (event.key === \"ArrowDown\" ? 1 : -1) + enabled.length) %\n\t\t\t\t\t\t\t\t\t\t\t\tenabled.length\n\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tsetActive(next.value);\n\t\t\t\t\t\t\t\t\tlist.current\n\t\t\t\t\t\t\t\t\t\t?.querySelector<HTMLElement>(`[data-option-index=\"${visible.indexOf(next)}\"]`)\n\t\t\t\t\t\t\t\t\t\t?.scrollIntoView({ block: \"nearest\" });\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tconst option = enabled.find((option) => option.value === activeValue);\n\t\t\t\t\t\t\t\tif (!loading && option) toggle(option);\n\t\t\t\t\t\t\t} else if (event.key === \"Backspace\" && !search) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tremoveLast();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tref={highlightRef}\n\t\t\t\t\t\tid={`${id}-list`}\n\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\taria-multiselectable=\"true\"\n\t\t\t\t\t\taria-busy={loading}\n\t\t\t\t\t\tclassName=\"basalt-hover-list mt-basalt-space-lg max-h-basalt-60 overflow-y-auto\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{!loading &&\n\t\t\t\t\t\t\tvisible.map((option, index) => (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tdata-basalt-hover-item=\"\"\n\t\t\t\t\t\t\t\t\tdata-hover-active={activeValue === option.value}\n\t\t\t\t\t\t\t\t\tid={`${id}-option-${index}`}\n\t\t\t\t\t\t\t\t\tdata-option-index={index}\n\t\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\taria-selected={selected.includes(option.value)}\n\t\t\t\t\t\t\t\t\tdata-hover-selected={selected.includes(option.value)}\n\t\t\t\t\t\t\t\t\taria-disabled={option.disabled || undefined}\n\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex w-full items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-lg text-left text-basalt-base disabled:opacity-40\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tonPointerMove={(event) => {\n\t\t\t\t\t\t\t\t\t\tconst previous = pointer.current;\n\t\t\t\t\t\t\t\t\t\tif (previous?.x === event.clientX && previous.y === event.clientY) return;\n\t\t\t\t\t\t\t\t\t\tpointer.current = { x: event.clientX, y: event.clientY };\n\t\t\t\t\t\t\t\t\t\tif (!option.disabled) setActive(option.value);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseDown={(event) => event.preventDefault()}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\ttoggle(option);\n\t\t\t\t\t\t\t\t\t\tinput.current?.focus();\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.leading}\n\t\t\t\t\t\t\t\t\t<span className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"block break-words\">{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t{option.description && (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"block text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t{option.description}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{selected.includes(option.value) && (\n\t\t\t\t\t\t\t\t\t\t<Check className=\"size-basalt-icon-lg shrink-0\" aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(loading || visible.length === 0) && (\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\tclassName=\"px-basalt-space-lg py-basalt-space-lg text-basalt-base text-basalt-muted-foreground\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{loading ? loadingLabel : emptyLabel}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t\t<span id={`${id}-count`} className=\"sr-only\" aria-live=\"polite\">\n\t\t\t\t{countText}\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/navigation-menu.d.ts

@@ -53,7 +53,7 @@ export interface NavigationMenuListProps extends Omit<RadixNavigationMenuListPro
      */
     asChild?: RadixNavigationMenuListProps["asChild"];
 }
-export declare const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+export declare function NavigationMenuList({ className, ref, ...props }: NavigationMenuListProps): React.JSX.Element;
 export interface NavigationMenuItemProps extends Omit<RadixNavigationMenuItemProps, "value" | "asChild"> {
     /**
      * Unique value that associates the item with sub-navigation state.
@@ -85,5 +85,5 @@ export interface NavigationMenuLinkProps extends Omit<RadixNavigationMenuLinkPro
      */
     asChild?: RadixNavigationMenuLinkProps["asChild"];
 }
-export declare function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps): React.JSX.Element;
+export declare function NavigationMenuLink({ className, active, ...props }: NavigationMenuLinkProps): React.JSX.Element;
 export {};

package/dist/components/navigation-menu.js

@@ -1,16 +1,30 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { jsx as t } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-navigation-menu";
+import { useHoverHighlight as t } from "../utils/use-hover-highlight.js";
+import { NAV_ITEM_CLASS as n, NAV_LIST_CLASS as r } from "../utils/navigation.js";
+import { jsx as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-navigation-menu";
 //#region src/components/navigation-menu.tsx
-var r = n.Root, i = n.List, a = n.Item;
-function o({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.Link, {
-		className: e("rounded-basalt-md px-3 py-2 text-sm hover:bg-basalt-accent", r),
-		...i
+var o = a.Root;
+function s({ className: n, ref: o, ...s }) {
+	let c = t(o);
+	return /* @__PURE__ */ i(a.List, {
+		ref: c,
+		className: e(r, "data-[orientation=vertical]:flex-col", n),
+		...s
+	});
+}
+var c = a.Item;
+function l({ className: t, active: r, ...o }) {
+	return /* @__PURE__ */ i(a.Link, {
+		active: r,
+		"data-basalt-hover-item": "",
+		"data-hover-selected": r,
+		className: e(n, t),
+		...o
 	});
 }
 //#endregion
-export { r as NavigationMenu, a as NavigationMenuItem, o as NavigationMenuLink, i as NavigationMenuList };
+export { o as NavigationMenu, c as NavigationMenuItem, l as NavigationMenuLink, s as NavigationMenuList };
 
 //# sourceMappingURL=navigation-menu.js.map

package/dist/components/navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.js","names":["NavigationMenuPrimitive","NavigationMenu","NavigationMenuList","NavigationMenuItem","NavigationMenuLink","props","cn","className"],"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\ntype RadixNavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root>;\ntype RadixNavigationMenuListProps = React.ComponentProps<typeof NavigationMenuPrimitive.List>;\ntype RadixNavigationMenuItemProps = React.ComponentProps<typeof NavigationMenuPrimitive.Item>;\ntype RadixNavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenuPrimitive.Link>;\n\nexport interface NavigationMenuProps\n\textends Omit<\n\t\tRadixNavigationMenuProps,\n\t\t| \"value\"\n\t\t| \"defaultValue\"\n\t\t| \"onValueChange\"\n\t\t| \"dir\"\n\t\t| \"orientation\"\n\t\t| \"delayDuration\"\n\t\t| \"skipDelayDuration\"\n\t\t| \"asChild\"\n\t> {\n\t/**\n\t * Controlled value of the currently active navigation item.\n\t */\n\tvalue?: RadixNavigationMenuProps[\"value\"];\n\t/**\n\t * Uncontrolled initial active navigation item value.\n\t */\n\tdefaultValue?: RadixNavigationMenuProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when active navigation item value changes.\n\t */\n\tonValueChange?: RadixNavigationMenuProps[\"onValueChange\"];\n\t/**\n\t * Reading direction of the navigation menu. Inherits from nearest DirectionProvider or ltr.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixNavigationMenuProps[\"dir\"];\n\t/**\n\t * Orientation of the navigation menu items and keyboard navigation axis.\n\t * @default \"horizontal\"\n\t */\n\torientation?: RadixNavigationMenuProps[\"orientation\"];\n\t/**\n\t * Duration in milliseconds from pointer entering trigger until menu opens.\n\t * @default 200\n\t */\n\tdelayDuration?: RadixNavigationMenuProps[\"delayDuration\"];\n\t/**\n\t * Duration in milliseconds to move between triggers without re-triggering delay.\n\t * @default 300\n\t */\n\tskipDelayDuration?: RadixNavigationMenuProps[\"skipDelayDuration\"];\n\t/**\n\t * Change the default rendered nav element to the child element, merging props and behavior.\n\t * NavigationMenu forwards ref to HTMLElement and inherits native nav attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuProps[\"asChild\"];\n}\n\nexport const NavigationMenu = NavigationMenuPrimitive.Root;\n\nexport interface NavigationMenuListProps extends Omit<RadixNavigationMenuListProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered ul element to the child element, merging props and behavior.\n\t * NavigationMenuList forwards ref to HTMLUListElement and inherits native ul attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuListProps[\"asChild\"];\n}\n\nexport const NavigationMenuList = NavigationMenuPrimitive.List;\n\nexport interface NavigationMenuItemProps\n\textends Omit<RadixNavigationMenuItemProps, \"value\" | \"asChild\"> {\n\t/**\n\t * Unique value that associates the item with sub-navigation state.\n\t */\n\tvalue?: RadixNavigationMenuItemProps[\"value\"];\n\t/**\n\t * Change the default rendered li element to the child element, merging props and behavior.\n\t * NavigationMenuItem forwards ref to HTMLLIElement and inherits native li attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuItemProps[\"asChild\"];\n}\n\nexport const NavigationMenuItem = NavigationMenuPrimitive.Item;\n\nexport interface NavigationMenuLinkProps\n\textends Omit<RadixNavigationMenuLinkProps, \"active\" | \"onSelect\" | \"asChild\"> {\n\t/**\n\t * Whether the link represents the currently active destination.\n\t * Adds data-active attribute for styling.\n\t * @default false\n\t */\n\tactive?: RadixNavigationMenuLinkProps[\"active\"];\n\t/**\n\t * Event handler called when the navigation link is selected via pointer or keyboard.\n\t */\n\tonSelect?: RadixNavigationMenuLinkProps[\"onSelect\"];\n\t/**\n\t * Change the default rendered anchor element to the child element, merging props and behavior.\n\t * NavigationMenuLink forwards ref to HTMLAnchorElement and inherits native anchor attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuLinkProps[\"asChild\"];\n}\n\nexport function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Link\n\t\t\tclassName={cn(\"rounded-basalt-md px-3 py-2 text-sm hover:bg-basalt-accent\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;AA6DA,IAAaC,IAAiBD,EAAwB,MAWzCE,IAAqBF,EAAwB,MAgB7CG,IAAqBH,EAAwB;AAsB1D,SAAgBI,EAAmB,EAAE,cAAW,GAAGC,KAAkC;CACpF,OACC,kBAACL,EAAwB,MAAzB;EACC,WAAWM,EAAG,8DAA8DC,CAAS;EACrF,GAAIF;CACJ,CAAA;AAEH"}
+{"version":3,"file":"navigation-menu.js","names":["NavigationMenuPrimitive","NavigationMenu","NavigationMenuList","props","highlightRef","useHoverHighlight","ref","cn","NAV_LIST_CLASS","className","NavigationMenuItem","NavigationMenuLink","active","NAV_ITEM_CLASS"],"sources":["../../src/components/navigation-menu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport type * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { NAV_ITEM_CLASS, NAV_LIST_CLASS } from \"../utils/navigation\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\n\ntype RadixNavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root>;\ntype RadixNavigationMenuListProps = React.ComponentProps<typeof NavigationMenuPrimitive.List>;\ntype RadixNavigationMenuItemProps = React.ComponentProps<typeof NavigationMenuPrimitive.Item>;\ntype RadixNavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenuPrimitive.Link>;\n\nexport interface NavigationMenuProps\n\textends Omit<\n\t\tRadixNavigationMenuProps,\n\t\t| \"value\"\n\t\t| \"defaultValue\"\n\t\t| \"onValueChange\"\n\t\t| \"dir\"\n\t\t| \"orientation\"\n\t\t| \"delayDuration\"\n\t\t| \"skipDelayDuration\"\n\t\t| \"asChild\"\n\t> {\n\t/**\n\t * Controlled value of the currently active navigation item.\n\t */\n\tvalue?: RadixNavigationMenuProps[\"value\"];\n\t/**\n\t * Uncontrolled initial active navigation item value.\n\t */\n\tdefaultValue?: RadixNavigationMenuProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when active navigation item value changes.\n\t */\n\tonValueChange?: RadixNavigationMenuProps[\"onValueChange\"];\n\t/**\n\t * Reading direction of the navigation menu. Inherits from nearest DirectionProvider or ltr.\n\t * @default \"ltr\"\n\t */\n\tdir?: RadixNavigationMenuProps[\"dir\"];\n\t/**\n\t * Orientation of the navigation menu items and keyboard navigation axis.\n\t * @default \"horizontal\"\n\t */\n\torientation?: RadixNavigationMenuProps[\"orientation\"];\n\t/**\n\t * Duration in milliseconds from pointer entering trigger until menu opens.\n\t * @default 200\n\t */\n\tdelayDuration?: RadixNavigationMenuProps[\"delayDuration\"];\n\t/**\n\t * Duration in milliseconds to move between triggers without re-triggering delay.\n\t * @default 300\n\t */\n\tskipDelayDuration?: RadixNavigationMenuProps[\"skipDelayDuration\"];\n\t/**\n\t * Change the default rendered nav element to the child element, merging props and behavior.\n\t * NavigationMenu forwards ref to HTMLElement and inherits native nav attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuProps[\"asChild\"];\n}\n\nexport const NavigationMenu = NavigationMenuPrimitive.Root;\n\nexport interface NavigationMenuListProps extends Omit<RadixNavigationMenuListProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered ul element to the child element, merging props and behavior.\n\t * NavigationMenuList forwards ref to HTMLUListElement and inherits native ul attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuListProps[\"asChild\"];\n}\n\nexport function NavigationMenuList({ className, ref, ...props }: NavigationMenuListProps) {\n\tconst highlightRef = useHoverHighlight(ref);\n\treturn (\n\t\t<NavigationMenuPrimitive.List\n\t\t\tref={highlightRef}\n\t\t\tclassName={cn(NAV_LIST_CLASS, \"data-[orientation=vertical]:flex-col\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport interface NavigationMenuItemProps\n\textends Omit<RadixNavigationMenuItemProps, \"value\" | \"asChild\"> {\n\t/**\n\t * Unique value that associates the item with sub-navigation state.\n\t */\n\tvalue?: RadixNavigationMenuItemProps[\"value\"];\n\t/**\n\t * Change the default rendered li element to the child element, merging props and behavior.\n\t * NavigationMenuItem forwards ref to HTMLLIElement and inherits native li attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuItemProps[\"asChild\"];\n}\n\nexport const NavigationMenuItem = NavigationMenuPrimitive.Item;\n\nexport interface NavigationMenuLinkProps\n\textends Omit<RadixNavigationMenuLinkProps, \"active\" | \"onSelect\" | \"asChild\"> {\n\t/**\n\t * Whether the link represents the currently active destination.\n\t * Adds data-active attribute for styling.\n\t * @default false\n\t */\n\tactive?: RadixNavigationMenuLinkProps[\"active\"];\n\t/**\n\t * Event handler called when the navigation link is selected via pointer or keyboard.\n\t */\n\tonSelect?: RadixNavigationMenuLinkProps[\"onSelect\"];\n\t/**\n\t * Change the default rendered anchor element to the child element, merging props and behavior.\n\t * NavigationMenuLink forwards ref to HTMLAnchorElement and inherits native anchor attributes.\n\t * @default false\n\t */\n\tasChild?: RadixNavigationMenuLinkProps[\"asChild\"];\n}\n\nexport function NavigationMenuLink({ className, active, ...props }: NavigationMenuLinkProps) {\n\treturn (\n\t\t<NavigationMenuPrimitive.Link\n\t\t\tactive={active}\n\t\t\tdata-basalt-hover-item=\"\"\n\t\t\tdata-hover-selected={active}\n\t\t\tclassName={cn(NAV_ITEM_CLASS, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AA+DA,IAAaC,IAAiBD,EAAwB;AAWtD,SAAgBE,EAAmB,EAAE,cAAW,QAAK,GAAGC,KAAkC;CACzF,IAAMC,IAAeC,EAAkBC,CAAG;CAC1C,OACC,kBAACN,EAAwB,MAAzB;EACC,KAAKI;EACL,WAAWG,EAAGC,GAAgB,wCAAwCC,CAAS;EAC/E,GAAIN;CACJ,CAAA;AAEH;AAgBA,IAAaO,IAAqBV,EAAwB;AAsB1D,SAAgBW,EAAmB,EAAE,cAAW,WAAQ,GAAGR,KAAkC;CAC5F,OACC,kBAACH,EAAwB,MAAzB;EACS;EACR,0BAAuB;EACvB,uBAAqBY;EACrB,WAAWL,EAAGM,GAAgBJ,CAAS;EACvC,GAAIN;CACJ,CAAA;AAEH"}

package/dist/components/overlay.js

@@ -4,10 +4,10 @@ import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 //#region src/components/overlay.ts
 var n = 4, r = 8, i = "z-50", a = "motion-reduce:animate-none motion-reduce:transition-none", o = "outline-hidden focus-visible:border-basalt-ring", s = "outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring", c = "outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background";
 function l(n) {
-	return e(t, i, "overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-1.5 text-sm text-basalt-popover-foreground shadow-md", a, n);
+	return e(t, i, "basalt-floating overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-basalt-menu-inset text-basalt-base text-basalt-popover-foreground shadow-md", a, n);
 }
 function u(t) {
-	return e("mx-1.5 flex w-[calc(100%-0.75rem)] cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-left text-sm outline-hidden select-none", t);
+	return e("mx-basalt-menu-inset flex min-h-basalt-menu-row w-[calc(100%-var(--basalt-space-menu-inset)*2)] cursor-default items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-menu-x py-basalt-menu-y text-left text-basalt-base leading-basalt-row outline-hidden select-none", t);
 }
 //#endregion
 export { o as FOCUS_BORDER, s as FOCUS_INSET, c as FOCUS_RING, r as MENU_GAP, n as OVERLAY_GAP, i as OVERLAY_LAYER, a as OVERLAY_MOTION, u as overlayItemClass, l as overlayPanelClass };

package/dist/components/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":["OVERLAY_GAP","MENU_GAP","OVERLAY_LAYER","OVERLAY_MOTION","FOCUS_BORDER","FOCUS_INSET","FOCUS_RING","overlayPanelClass","cn","BASALT_UI_CLASS","className","overlayItemClass"],"sources":["../../src/components/overlay.ts"],"sourcesContent":["import { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Gap between a field trigger and its list. Matches Kumo Select/Combobox. */\nexport const OVERLAY_GAP = 4;\n/** Gap between a menu trigger and its panel. Matches Kumo Dropdown/Popover. */\nexport const MENU_GAP = 8;\n/** Shared stacking layer for portals, menus, and chrome overlays. */\nexport const OVERLAY_LAYER = \"z-50\";\n/** Kill CSS animation and transition when the user prefers reduced motion. */\nexport const OVERLAY_MOTION = \"motion-reduce:animate-none motion-reduce:transition-none\";\n\n/** Recolor the existing 1px border. No extra ring, no layout shift. */\nexport const FOCUS_BORDER = \"outline-hidden focus-visible:border-basalt-ring\";\n/** Inset 1px theme ring for borderless controls. Outer size stays put. */\nexport const FOCUS_INSET =\n\t\"outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring\";\n/** Offset ring stays visible on primary fills (ring token equals primary). */\nexport const FOCUS_RING =\n\t\"outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\";\n\nexport function overlayPanelClass(className?: string) {\n\treturn cn(\n\t\tBASALT_UI_CLASS,\n\t\tOVERLAY_LAYER,\n\t\t\"overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-1.5 text-sm text-basalt-popover-foreground shadow-md\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function overlayItemClass(className?: string) {\n\treturn cn(\n\t\t\"mx-1.5 flex w-[calc(100%-0.75rem)] cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-left text-sm outline-hidden select-none\",\n\t\tclassName,\n\t);\n}\n"],"mappings":";;;;AAIA,IAAaA,IAAc,GAEdC,IAAW,GAEXC,IAAgB,QAEhBC,IAAiB,4DAGjBC,IAAe,mDAEfC,IACZ,+FAEYC,IACZ;AAED,SAAgBC,EAAkB,GAAoB;CACrD,OAAOC,EACNC,GACAP,GACA,2IACAC,GACAO,CACD;AACD;AAEA,SAAgBC,EAAiB,GAAoB;CACpD,OAAOH,EACN,6IACAE,CACD;AACD"}
+{"version":3,"file":"overlay.js","names":["OVERLAY_GAP","MENU_GAP","OVERLAY_LAYER","OVERLAY_MOTION","FOCUS_BORDER","FOCUS_INSET","FOCUS_RING","overlayPanelClass","cn","BASALT_UI_CLASS","className","overlayItemClass"],"sources":["../../src/components/overlay.ts"],"sourcesContent":["import { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Gap between a field trigger and its list. Matches Kumo Select/Combobox. */\nexport const OVERLAY_GAP = 4;\n/** Gap between a menu trigger and its panel. Matches Kumo Dropdown/Popover. */\nexport const MENU_GAP = 8;\n/** Shared stacking layer for portals, menus, and chrome overlays. */\nexport const OVERLAY_LAYER = \"z-50\";\n/** Kill CSS animation and transition when the user prefers reduced motion. */\nexport const OVERLAY_MOTION = \"motion-reduce:animate-none motion-reduce:transition-none\";\n\n/** Recolor the existing 1px border. No extra ring, no layout shift. */\nexport const FOCUS_BORDER = \"outline-hidden focus-visible:border-basalt-ring\";\n/** Inset 1px theme ring for borderless controls. Outer size stays put. */\nexport const FOCUS_INSET =\n\t\"outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-basalt-ring\";\n/** Offset ring stays visible on primary fills (ring token equals primary). */\nexport const FOCUS_RING =\n\t\"outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background\";\n\nexport function overlayPanelClass(className?: string) {\n\treturn cn(\n\t\tBASALT_UI_CLASS,\n\t\tOVERLAY_LAYER,\n\t\t\"basalt-floating overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover py-basalt-menu-inset text-basalt-base text-basalt-popover-foreground shadow-md\",\n\t\tOVERLAY_MOTION,\n\t\tclassName,\n\t);\n}\n\nexport function overlayItemClass(className?: string) {\n\treturn cn(\n\t\t\"mx-basalt-menu-inset flex min-h-basalt-menu-row w-[calc(100%-var(--basalt-space-menu-inset)*2)] cursor-default items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-menu-x py-basalt-menu-y text-left text-basalt-base leading-basalt-row outline-hidden select-none\",\n\t\tclassName,\n\t);\n}\n"],"mappings":";;;;AAIA,IAAaA,IAAc,GAEdC,IAAW,GAEXC,IAAgB,QAEhBC,IAAiB,4DAGjBC,IAAe,mDAEfC,IACZ,+FAEYC,IACZ;AAED,SAAgBC,EAAkB,GAAoB;CACrD,OAAOC,EACNC,GACAP,GACA,kLACAC,GACAO,CACD;AACD;AAEA,SAAgBC,EAAiB,GAAoB;CACpD,OAAOH,EACN,+QACAE,CACD;AACD"}

package/dist/components/page-header.d.ts

@@ -5,6 +5,8 @@ export interface PageHeaderBreadcrumb {
     icon?: React.ReactNode;
 }
 export interface PageHeaderProps {
+    /** Heading scale: workspace, dashboard, or reading-focused page. @default "md" */
+    size?: "md" | "lg" | "xl";
     /** The page title, rendered as the only heading. */
     title: React.ReactNode;
     /** Supporting text below the title. */
@@ -16,4 +18,4 @@ export interface PageHeaderProps {
     /** Own-row filters. Keep short filters in actions. */
     filters?: React.ReactNode;
 }
-export declare function PageHeader({ actions, breadcrumbs, description, filters, title }: PageHeaderProps): React.JSX.Element;
+export declare function PageHeader({ actions, breadcrumbs, description, filters, size, title, }: PageHeaderProps): React.JSX.Element;