@devalok/shilp-sutra 0.57.0 → 0.59.0

package/dist/ui/combobox.js

@@ -1,23 +1,24 @@
 "use client";
-import { IconProvider as e } from "./icon-context.js";
-import { springs as t, tweens as n } from "./lib/motion.js";
-import { cn as r } from "./lib/utils.js";
-import { Icon as i } from "./icon.js";
-import { useFormField as a } from "./form.js";
-import { resolveFieldState as o } from "../_chunks/field-state.js";
-import { normalizeIcon as s } from "../_chunks/normalize-icon.js";
-import { Content2 as c, Portal as ee, Root2 as te, Trigger as ne } from "../_chunks/primitives/react-popover.js";
-import * as l from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { IconCheck as p, IconChevronDown as m, IconSearch as h, IconX as re } from "@tabler/icons-react";
-import { motion as ie } from "framer-motion";
+import { springs as e, tweens as t } from "./lib/motion.js";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { IconProvider as r } from "./icon-context.js";
+import { cn as i } from "./lib/utils.js";
+import { Icon as a } from "./icon.js";
+import { useFormField as ee } from "./form.js";
+import { resolveFieldState as te } from "../_chunks/field-state.js";
+import { normalizeIcon as ne } from "../_chunks/normalize-icon.js";
+import { Content2 as o, Portal as s, Root2 as re, Trigger as ie } from "../_chunks/primitives/react-popover.js";
+import * as c from "react";
+import { Fragment as ae, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { IconCheck as d, IconChevronDown as f, IconSearch as p, IconX as m } from "@tabler/icons-react";
+import { motion as h } from "framer-motion";
 import { cva as g } from "class-variance-authority";
 //#region src/ui/combobox.tsx
-var ae = {
+var _ = {
 	error: "border-error-7",
 	warning: "border-warning-7",
 	success: "border-success-7"
-}, _ = g([
+}, v = g([
 	"flex w-full items-center justify-between whitespace-nowrap rounded-control",
 	"border border-surface-border-interactive bg-surface-panel-hover",
 	"transition-colors duration-fast-01 ease-productive-standard",
@@ -31,122 +32,125 @@ var ae = {
 		lg: "h-ds-lg text-body-md px-ds-05"
 	} },
 	defaultVariants: { size: "md" }
-}), v = {
+}), oe = {
+	neutral: "bg-surface-panel-active text-surface-fg",
+	accent: "bg-accent-4 text-accent-11"
+}, se = {
 	xs: "xs",
 	sm: "sm",
 	md: "sm",
 	lg: "md"
-}, y = {
+}, ce = {
 	xs: "px-ds-02 py-0 text-body-xs",
 	sm: "px-ds-02 py-0 text-body-xs",
 	md: "px-ds-03 py-[1px] text-body-sm",
 	lg: "px-ds-03 py-[2px] text-body-sm"
-}, b = {
+}, le = {
 	xs: "text-body-xs",
 	sm: "text-body-xs",
 	md: "text-body-sm",
 	lg: "text-body-sm"
-}, x = 2, S = 36, C = l.forwardRef(({ options: g, value: C, onValueChange: w, placeholder: T = "Select...", searchPlaceholder: oe = "Search...", emptyMessage: se = "No results found", multiple: E = !1, disabled: D = !1, className: ce, triggerClassName: le, maxVisible: ue = 6, renderOption: O, accessibleLabel: k, id: A, size: j = "md", state: M, ...N }, P) => {
-	let F = j ?? "md", [I, L] = l.useState(!1), [R, z] = l.useState(""), [B, V] = l.useState(-1), H = l.useRef(null), U = l.useRef(null), W = l.useId(), G = l.useId(), K = l.useMemo(() => C == null ? [] : Array.isArray(C) ? C : [C], [C]), q = l.useMemo(() => R ? g.filter((e) => e.label.toLowerCase().includes(R.toLowerCase())) : g, [g, R]), de = l.useCallback((e) => K.includes(e), [K]), J = l.useCallback((e) => {
-		E ? w(K.includes(e) ? K.filter((t) => t !== e) : [...K, e]) : (w(e), L(!1));
+}, y = 2, ue = 36, b = c.forwardRef(({ options: g, value: b, onValueChange: x, placeholder: S = "Select...", searchPlaceholder: de = "Search...", emptyMessage: fe = "No results found", multiple: C = !1, disabled: w = !1, className: pe, triggerClassName: me, maxVisible: T = 6, renderOption: E, accessibleLabel: D, id: O, size: k = "md", state: A, pillTone: j = "neutral", ...M }, N) => {
+	let P = k ?? "md", [F, I] = c.useState(!1), [L, R] = c.useState(""), [z, B] = c.useState(-1), V = c.useRef(null), H = c.useRef(null), U = c.useId(), W = c.useId(), G = c.useMemo(() => b == null ? [] : Array.isArray(b) ? b : [b], [b]), K = c.useMemo(() => L ? g.filter((e) => e.label.toLowerCase().includes(L.toLowerCase())) : g, [g, L]), he = c.useCallback((e) => G.includes(e), [G]), q = c.useCallback((e) => {
+		C ? x(G.includes(e) ? G.filter((t) => t !== e) : [...G, e]) : (x(e), I(!1));
 	}, [
-		E,
-		K,
-		w
-	]), fe = l.useCallback((e, t) => {
-		e.stopPropagation(), e.preventDefault(), w(K.filter((e) => e !== t));
-	}, [K, w]), Y = l.useCallback((e) => {
-		D || (L(e), e || (z(""), V(-1)));
-	}, [D]);
-	l.useEffect(() => {
-		if (I) {
+		C,
+		G,
+		x
+	]), ge = c.useCallback((e, t) => {
+		e.stopPropagation(), e.preventDefault(), x(G.filter((e) => e !== t));
+	}, [G, x]), J = c.useCallback((e) => {
+		w || (I(e), e || (R(""), B(-1)));
+	}, [w]);
+	c.useEffect(() => {
+		if (F) {
 			let e = setTimeout(() => {
-				H.current?.focus();
+				V.current?.focus();
 			}, 0);
 			return () => clearTimeout(e);
 		}
-	}, [I]);
-	let X = l.useCallback((e, t) => {
-		let n = q.length;
+	}, [F]);
+	let Y = c.useCallback((e, t) => {
+		let n = K.length;
 		if (n === 0) return -1;
 		let r = e + t;
 		for (; r >= 0 && r < n;) {
-			if (!q[r].disabled) return r;
+			if (!K[r].disabled) return r;
 			r += t;
 		}
 		return e;
-	}, [q]), pe = l.useCallback((e) => {
+	}, [K]), _e = c.useCallback((e) => {
 		switch (e.key) {
 			case "ArrowDown": {
 				e.preventDefault();
-				let t = X(B, 1);
-				V(t);
+				let t = Y(z, 1);
+				B(t);
 				break;
 			}
 			case "ArrowUp": {
 				e.preventDefault();
-				let t = X(B, -1);
-				V(t);
+				let t = Y(z, -1);
+				B(t);
 				break;
 			}
 			case "Home": {
 				e.preventDefault();
-				let t = q.findIndex((e) => !e.disabled);
-				V(t);
+				let t = K.findIndex((e) => !e.disabled);
+				B(t);
 				break;
 			}
 			case "End": {
 				e.preventDefault();
 				let t = -1;
-				for (let e = q.length - 1; e >= 0; e--) if (!q[e].disabled) {
+				for (let e = K.length - 1; e >= 0; e--) if (!K[e].disabled) {
 					t = e;
 					break;
 				}
-				V(t);
+				B(t);
 				break;
 			}
 			case "Enter":
-				e.preventDefault(), B >= 0 && B < q.length && !q[B].disabled && J(q[B].value);
+				e.preventDefault(), z >= 0 && z < K.length && !K[z].disabled && q(K[z].value);
 				break;
 			case "Escape":
-				e.preventDefault(), L(!1), z(""), V(-1);
+				e.preventDefault(), I(!1), R(""), B(-1);
 				break;
 		}
 	}, [
-		B,
-		q,
-		X,
-		J
+		z,
+		K,
+		Y,
+		q
 	]);
-	l.useEffect(() => {
-		if (B >= 0 && U.current) {
-			let e = U.current.children[B];
+	c.useEffect(() => {
+		if (z >= 0 && H.current) {
+			let e = H.current.children[z];
 			e && e.scrollIntoView?.({ block: "nearest" });
 		}
-	}, [B]);
-	let me = l.useCallback(() => K.length === 0 ? null : g.find((e) => e.value === K[0])?.label ?? null, [K, g]), Z = v[F], he = y[F], ge = b[F], _e = () => {
-		if (E && K.length > 0) {
-			let e = K.slice(0, x), t = K.length - x;
-			return /* @__PURE__ */ f("span", {
+	}, [z]);
+	let ve = c.useCallback(() => G.length === 0 ? null : g.find((e) => e.value === G[0])?.label ?? null, [G, g]), X = se[P], Z = ce[P], ye = le[P], be = () => {
+		if (C && G.length > 0) {
+			let e = G.slice(0, y), t = G.length - y;
+			return /* @__PURE__ */ u("span", {
 				className: "flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden",
 				children: [e.map((e) => {
 					let t = g.find((t) => t.value === e);
-					return t ? /* @__PURE__ */ f("span", {
-						className: r("inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2", he),
-						children: [t.label, /* @__PURE__ */ d("button", {
+					return t ? /* @__PURE__ */ u("span", {
+						className: i("inline-flex items-center gap-ds-01 rounded-control-inner", oe[j], Z),
+						children: [t.label, /* @__PURE__ */ l("button", {
 							type: "button",
 							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-panel-hover transition-colors duration-fast-01 ease-productive-standard",
-							onClick: (t) => fe(t, e),
+							onClick: (t) => ge(t, e),
 							"aria-label": `Remove ${t.label}`,
 							tabIndex: -1,
-							children: /* @__PURE__ */ d(i, {
-								icon: re,
-								size: Z
+							children: /* @__PURE__ */ l(a, {
+								icon: m,
+								size: X
 							})
 						})]
 					}, e) : null;
-				}), t > 0 && /* @__PURE__ */ f("span", {
-					className: r("text-surface-fg-muted", ge),
+				}), t > 0 && /* @__PURE__ */ u("span", {
+					className: i("text-surface-fg-muted", ye),
 					children: [
 						"+",
 						t,
@@ -155,60 +159,60 @@ var ae = {
 				})]
 			});
 		}
-		if (!E && K.length === 1) {
-			let e = me();
-			if (e) return /* @__PURE__ */ d("span", {
+		if (!C && G.length === 1) {
+			let e = ve();
+			if (e) return /* @__PURE__ */ l("span", {
 				className: "min-w-0 flex-1 truncate text-left",
 				children: e
 			});
 		}
-		return /* @__PURE__ */ d("span", {
+		return /* @__PURE__ */ l("span", {
 			className: "min-w-0 flex-1 truncate text-left text-surface-fg-muted",
-			children: T
+			children: S
 		});
-	}, Q = a(), $ = o(M, Q.state), ve = $ === "error", ye = Q.helperTextId, be = Q.required;
-	return /* @__PURE__ */ d(te, {
-		open: I,
-		onOpenChange: Y,
-		children: /* @__PURE__ */ f("div", {
-			className: r("relative", ce),
-			...N,
-			children: [/* @__PURE__ */ d(ne, {
+	}, Q = ee(), $ = te(A, Q.state), xe = $ === "error", Se = Q.helperTextId, Ce = Q.required;
+	return /* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(re, {
+		open: F,
+		onOpenChange: J,
+		children: /* @__PURE__ */ u("div", {
+			className: i("relative", pe),
+			...M,
+			children: [/* @__PURE__ */ l(ie, {
 				asChild: !0,
-				disabled: D,
-				children: /* @__PURE__ */ f("div", {
-					ref: P,
+				disabled: w,
+				children: /* @__PURE__ */ u("div", {
+					ref: N,
 					role: "combobox",
-					tabIndex: D ? -1 : 0,
-					"data-disabled": D || void 0,
-					id: A,
-					"aria-expanded": I,
-					"aria-controls": G,
+					tabIndex: w ? -1 : 0,
+					"data-disabled": w || void 0,
+					id: O,
+					"aria-expanded": F,
+					"aria-controls": W,
 					"aria-haspopup": "listbox",
-					"aria-disabled": D || void 0,
-					"aria-labelledby": k ? void 0 : Q.labelId,
-					"aria-label": k ?? (Q.labelId ? void 0 : T),
-					"aria-invalid": ve || void 0,
-					"aria-describedby": ye,
-					"aria-required": be || void 0,
+					"aria-disabled": w || void 0,
+					"aria-labelledby": D ? void 0 : Q.labelId,
+					"aria-label": D ?? (Q.labelId ? void 0 : S),
+					"aria-invalid": xe || void 0,
+					"aria-describedby": Se,
+					"aria-required": Ce || void 0,
 					onKeyDown: (e) => {
-						D || (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), Y(!0));
+						w || (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), J(!0));
 					},
-					className: r(_({ size: F }), "cursor-pointer", I && "border-accent-7", $ && ae[$], le),
-					children: [_e(), /* @__PURE__ */ d(i, {
-						icon: m,
-						size: Z,
-						className: r("ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard", I && "rotate-180")
+					className: i(v({ size: P }), "cursor-pointer", F && "border-accent-7", $ && _[$], me),
+					children: [be(), /* @__PURE__ */ l(a, {
+						icon: f,
+						size: X,
+						className: i("ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard", F && "rotate-180")
 					})]
 				})
-			}), /* @__PURE__ */ d(ee, { children: /* @__PURE__ */ d(c, {
+			}), /* @__PURE__ */ l(s, { children: /* @__PURE__ */ l(o, {
 				asChild: !0,
 				sideOffset: 4,
 				align: "start",
 				onOpenAutoFocus: (e) => {
-					e.preventDefault(), H.current?.focus();
+					e.preventDefault(), V.current?.focus();
 				},
-				children: /* @__PURE__ */ f(ie.div, {
+				children: /* @__PURE__ */ u(h.div, {
 					initial: {
 						opacity: 0,
 						scale: .95
@@ -218,87 +222,87 @@ var ae = {
 						scale: 1
 					},
 					transition: {
-						...t.snappy,
-						opacity: n.fade
+						...e.snappy,
+						opacity: t.fade
 					},
-					className: r("z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating"),
-					children: [/* @__PURE__ */ f("div", {
+					className: i("z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating"),
+					children: [/* @__PURE__ */ u("div", {
 						className: "flex items-center gap-ds-02 border-b border-surface-border px-ds-04",
-						children: [/* @__PURE__ */ d(i, {
-							icon: h,
+						children: [/* @__PURE__ */ l(a, {
+							icon: p,
 							size: "sm",
 							className: "shrink-0 text-surface-fg-subtle"
-						}), /* @__PURE__ */ d("input", {
-							ref: H,
+						}), /* @__PURE__ */ l("input", {
+							ref: V,
 							type: "text",
 							className: "flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-muted",
-							placeholder: oe,
-							value: R,
+							placeholder: de,
+							value: L,
 							onChange: (e) => {
-								z(e.target.value), V(-1);
+								R(e.target.value), B(-1);
 							},
-							onKeyDown: pe,
+							onKeyDown: _e,
 							"aria-autocomplete": "list",
-							"aria-controls": G,
-							"aria-activedescendant": B >= 0 ? `${W}-option-${B}` : void 0,
+							"aria-controls": W,
+							"aria-activedescendant": z >= 0 ? `${U}-option-${z}` : void 0,
 							"aria-label": "Search options"
 						})]
-					}), q.length === 0 ? /* @__PURE__ */ d("div", {
+					}), K.length === 0 ? /* @__PURE__ */ l("div", {
 						className: "px-ds-04 py-ds-05 text-center text-body-md text-surface-fg-subtle",
-						children: se
-					}) : /* @__PURE__ */ d("ul", {
-						ref: U,
-						id: G,
+						children: fe
+					}) : /* @__PURE__ */ l("ul", {
+						ref: H,
+						id: W,
 						role: "listbox",
-						"aria-multiselectable": E || void 0,
+						"aria-multiselectable": C || void 0,
 						className: "overflow-auto p-ds-02",
-						style: { maxHeight: `${ue * S}px` },
-						children: q.map((t, n) => {
-							let a = de(t.value);
-							return /* @__PURE__ */ f("li", {
-								id: `${W}-option-${n}`,
+						style: { maxHeight: `${T * ue}px` },
+						children: K.map((e, t) => {
+							let n = he(e.value);
+							return /* @__PURE__ */ u("li", {
+								id: `${U}-option-${t}`,
 								role: "option",
-								"aria-selected": a,
-								"aria-disabled": t.disabled || void 0,
-								className: r("relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden", "transition-colors duration-fast-01 ease-productive-standard", B === n && "bg-accent-2", a && "text-accent-11", t.disabled && "pointer-events-none opacity-action-disabled"),
+								"aria-selected": n,
+								"aria-disabled": e.disabled || void 0,
+								className: i("relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden", "transition-colors duration-fast-01 ease-productive-standard", z === t && "bg-accent-4", n && "text-accent-11", e.disabled && "pointer-events-none opacity-action-disabled"),
 								onClick: () => {
-									t.disabled || J(t.value);
+									e.disabled || q(e.value);
 								},
-								onKeyDown: (e) => {
-									!t.disabled && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), J(t.value));
+								onKeyDown: (t) => {
+									!e.disabled && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), q(e.value));
 								},
 								onMouseEnter: () => {
-									t.disabled || V(n);
+									e.disabled || B(t);
 								},
 								children: [
-									t.icon && /* @__PURE__ */ d("span", {
+									e.icon && /* @__PURE__ */ l("span", {
 										className: "flex h-ico-sm w-ico-sm items-center justify-center shrink-0",
-										children: /* @__PURE__ */ d(e, {
-											size: Z,
-											children: s(t.icon)
+										children: /* @__PURE__ */ l(r, {
+											size: X,
+											children: ne(e.icon)
 										})
 									}),
-									/* @__PURE__ */ d("span", {
+									/* @__PURE__ */ l("span", {
 										className: "flex flex-1 flex-col",
-										children: O ? O(t, a) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", { children: t.label }), t.description && /* @__PURE__ */ d("span", {
+										children: E ? E(e, n) : /* @__PURE__ */ u(ae, { children: [/* @__PURE__ */ l("span", { children: e.label }), e.description && /* @__PURE__ */ l("span", {
 											className: "text-body-sm text-surface-fg-muted",
-											children: t.description
+											children: e.description
 										})] })
 									}),
-									a && /* @__PURE__ */ d(i, {
-										icon: p,
+									n && /* @__PURE__ */ l(a, {
+										icon: d,
 										size: "sm",
 										className: "shrink-0"
 									})
 								]
-							}, t.value);
+							}, e.value);
 						})
 					})]
 				})
 			}) })]
 		})
-	});
+	}) });
 });
-C.displayName = "Combobox";
+b.displayName = "Combobox";
 //#endregion
-export { C as Combobox, _ as comboboxTriggerVariants };
+export { b as Combobox, v as comboboxTriggerVariants };

package/dist/ui/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/ui/combobox.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@primitives/react-popover'\nimport { IconCheck, IconChevronDown, IconSearch, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport type { IconInput } from './lib/icon-input'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/** Border tint per validation state, applied to the trigger. */\nconst stateBorderClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7',\n  warning: 'border-warning-7',\n  success: 'border-success-7',\n}\n\nexport const comboboxTriggerVariants = cva(\n  [\n    'flex w-full items-center justify-between whitespace-nowrap rounded-control',\n    'border border-surface-border-interactive bg-surface-panel-hover',\n    'transition-colors duration-fast-01 ease-productive-standard',\n    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7',\n    // Trigger is a div[role=combobox] (so chip remove-buttons in multi-select\n    // aren't nested in a <button>), so disabled styling keys off data-disabled,\n    // not the :disabled pseudo-class.\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-action-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n        sm: 'h-ds-sm text-body-sm px-ds-03',\n        md: 'h-ds-md text-body-md px-ds-04',\n        lg: 'h-ds-lg text-body-md px-ds-05',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>\n\n/** Maps combobox size to Icon component size for chevron / check icons */\nconst iconSizeMap: Record<NonNullable<ComboboxSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps combobox size to pill text + padding classes */\nconst pillSizeMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'px-ds-02 py-0 text-body-xs',\n  sm: 'px-ds-02 py-0 text-body-xs',\n  md: 'px-ds-03 py-[1px] text-body-sm',\n  lg: 'px-ds-03 py-[2px] text-body-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-sm',\n}\n\n/**\n * Option shape for a Combobox dropdown item.\n * `value` must be unique across all options — it is the key used in selection state.\n */\nexport interface ComboboxOption {\n  value: string\n  label: string\n  description?: string\n  icon?: IconInput\n  disabled?: boolean\n}\n\n/**\n * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard\n * navigation, pill overflow (\"+ N more\"), and an optional custom option renderer.\n *\n * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`\n * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives\n * `string[]`, and selected items appear as dismissible pills in the trigger.\n *\n * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and\n * `onValueChange` automatically, so no manual casts are needed.\n *\n * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).\n *\n * @example\n * // Single-select country picker:\n * <Combobox\n *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}\n *   value={country}\n *   onValueChange={(v) => setCountry(v)}\n *   placeholder=\"Select country\"\n * />\n *\n * @example\n * // Multi-select tag picker with pill display:\n * <Combobox\n *   multiple\n *   options={tagOptions}\n *   value={selectedTags}\n *   onValueChange={(v) => setSelectedTags(v)}\n *   placeholder=\"Select tags...\"\n * />\n *\n * @example\n * // Custom option renderer (user avatars in assignee picker):\n * <Combobox\n *   options={users.map(u => ({ value: u.id, label: u.name }))}\n *   value={assigneeId}\n *   onValueChange={(v) => setAssigneeId(v)}\n *   renderOption={(option, selected) => (\n *     <span className=\"flex items-center gap-ds-03\">\n *       <Avatar size=\"xs\"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>\n *       {option.label}\n *     </span>\n *   )}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Available options shown in the dropdown. */\n  options: ComboboxOption[]\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string\n  /** Placeholder for the search input inside the dropdown. */\n  searchPlaceholder?: string\n  /** Message shown when the search yields no results. */\n  emptyMessage?: string\n  disabled?: boolean\n  triggerClassName?: string\n  /** Max visible items in the dropdown before scroll (default 6). */\n  maxVisible?: number\n  /** Custom renderer for each option row. Receives the option and whether it's currently selected. */\n  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode\n  /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */\n  accessibleLabel?: string\n  /** Size of the trigger. Controls height, text size, padding, and pill sizing. */\n  size?: ComboboxSize\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n}\n\ninterface ComboboxSingleProps extends ComboboxBaseProps {\n  multiple?: false\n  value?: string\n  onValueChange: (value: string) => void\n}\n\ninterface ComboboxMultipleProps extends ComboboxBaseProps {\n  multiple: true\n  value?: string[]\n  onValueChange: (value: string[]) => void\n}\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps\n\n/** Max pills shown in the trigger before \"+N more\" overflow */\nconst MAX_VISIBLE_PILLS = 2\n\n/** Approximate height of a single option item in px */\nconst ITEM_HEIGHT_PX = 36\n\nconst Combobox = React.forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select...',\n      searchPlaceholder = 'Search...',\n      emptyMessage = 'No results found',\n      multiple = false,\n      disabled = false,\n      className,\n      triggerClassName,\n      maxVisible = 6,\n      renderOption,\n      accessibleLabel,\n      id: externalId,\n      size: sizeProp = 'md',\n      state: stateProp,\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const searchInputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const optionIdPrefix = React.useId()\n    const listboxId = React.useId()\n\n    const selectedValues = React.useMemo<string[]>(() => {\n      if (value === undefined || value === null) return []\n      if (Array.isArray(value)) return value\n      return [value]\n    }, [value])\n\n    const filteredOptions = React.useMemo(\n      () =>\n        search\n          ? options.filter((o) =>\n              o.label.toLowerCase().includes(search.toLowerCase()),\n            )\n          : options,\n      [options, search],\n    )\n\n    const isSelected = React.useCallback(\n      (optionValue: string) => selectedValues.includes(optionValue),\n      [selectedValues],\n    )\n\n    const handleSelect = React.useCallback(\n      (optionValue: string) => {\n        if (multiple) {\n          const newValue = selectedValues.includes(optionValue)\n            ? selectedValues.filter((v) => v !== optionValue)\n            : [...selectedValues, optionValue]\n          ;(onValueChange as (value: string[]) => void)(newValue)\n        } else {\n          ;(onValueChange as (value: string) => void)(optionValue)\n          setOpen(false)\n        }\n      },\n      [multiple, selectedValues, onValueChange],\n    )\n\n    const handleRemovePill = React.useCallback(\n      (e: React.SyntheticEvent, optionValue: string) => {\n        e.stopPropagation()\n        e.preventDefault()\n        const newValue = selectedValues.filter((v) => v !== optionValue)\n        ;(onValueChange as (value: string[]) => void)(newValue)\n      },\n      [selectedValues, onValueChange],\n    )\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        if (disabled) return\n        setOpen(nextOpen)\n        if (!nextOpen) {\n          setSearch('')\n          setHighlightedIndex(-1)\n        }\n      },\n      [disabled],\n    )\n\n    // Auto-focus search input when popover opens\n    React.useEffect(() => {\n      if (open) {\n        // Use a small timeout to allow the popover to render\n        const timer = setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 0)\n        return () => clearTimeout(timer)\n      }\n    }, [open])\n\n    const findNextEnabledIndex = React.useCallback(\n      (currentIndex: number, direction: 1 | -1): number => {\n        const len = filteredOptions.length\n        if (len === 0) return -1\n\n        let nextIndex = currentIndex + direction\n        while (nextIndex >= 0 && nextIndex < len) {\n          if (!filteredOptions[nextIndex].disabled) return nextIndex\n          nextIndex += direction\n        }\n        return currentIndex\n      },\n      [filteredOptions],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const nextIdx = findNextEnabledIndex(highlightedIndex, 1)\n            setHighlightedIndex(nextIdx)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prevIdx = findNextEnabledIndex(highlightedIndex, -1)\n            setHighlightedIndex(prevIdx)\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            const firstEnabled = filteredOptions.findIndex((o) => !o.disabled)\n            setHighlightedIndex(firstEnabled)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            let lastEnabled = -1\n            for (let i = filteredOptions.length - 1; i >= 0; i--) {\n              if (!filteredOptions[i].disabled) {\n                lastEnabled = i\n                break\n              }\n            }\n            setHighlightedIndex(lastEnabled)\n            break\n          }\n          case 'Enter': {\n            e.preventDefault()\n            if (\n              highlightedIndex >= 0 &&\n              highlightedIndex < filteredOptions.length &&\n              !filteredOptions[highlightedIndex].disabled\n            ) {\n              handleSelect(filteredOptions[highlightedIndex].value)\n            }\n            break\n          }\n          case 'Escape': {\n            e.preventDefault()\n            setOpen(false)\n            setSearch('')\n            setHighlightedIndex(-1)\n            break\n          }\n        }\n      },\n      [highlightedIndex, filteredOptions, findNextEnabledIndex, handleSelect],\n    )\n\n    // Scroll highlighted option into view\n    React.useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const optionEl = listRef.current.children[highlightedIndex] as HTMLElement\n        if (optionEl) {\n          optionEl.scrollIntoView?.({ block: 'nearest' })\n        }\n      }\n    }, [highlightedIndex])\n\n    const getSelectedLabel = React.useCallback(() => {\n      if (selectedValues.length === 0) return null\n      const option = options.find((o) => o.value === selectedValues[0])\n      return option?.label ?? null\n    }, [selectedValues, options])\n\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedPillClasses = pillSizeMap[size]\n    const resolvedOverflowText = overflowTextMap[size]\n\n    const renderTriggerContent = () => {\n      if (multiple && selectedValues.length > 0) {\n        const visiblePills = selectedValues.slice(0, MAX_VISIBLE_PILLS)\n        const remaining = selectedValues.length - MAX_VISIBLE_PILLS\n\n        return (\n          <span className=\"flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden\">\n            {visiblePills.map((val) => {\n              const option = options.find((o) => o.value === val)\n              if (!option) return null\n              return (\n                <span\n                  key={val}\n                  className={cn('inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2', resolvedPillClasses)}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-panel-hover transition-colors duration-fast-01 ease-productive-standard\"\n                    onClick={(e) => handleRemovePill(e, val)}\n                    aria-label={`Remove ${option.label}`}\n                    tabIndex={-1}\n                  >\n                    <Icon icon={IconX} size={resolvedIconSize} />\n                  </button>\n                </span>\n              )\n            })}\n            {remaining > 0 && (\n              <span className={cn('text-surface-fg-muted', resolvedOverflowText)}>\n                +{remaining} more\n              </span>\n            )}\n          </span>\n        )\n      }\n\n      if (!multiple && selectedValues.length === 1) {\n        const label = getSelectedLabel()\n        if (label) {\n          return <span className=\"min-w-0 flex-1 truncate text-left\">{label}</span>\n        }\n      }\n\n      return (\n        <span className=\"min-w-0 flex-1 truncate text-left text-surface-fg-muted\">\n          {placeholder}\n        </span>\n      )\n    }\n\n    const fieldCtx = useFormField()\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const isError = state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n        <div className={cn('relative', className)} {...rest}>\n        <PopoverPrimitive.Trigger asChild disabled={disabled}>\n          {/* role=combobox on a <div>, NOT a <button> — a native button can't\n              legally contain the chip remove-<button>s rendered in multi-select\n              (invalid HTML + a11y break). This is the W3C select-only combobox\n              pattern. Radix Trigger wires click/toggle; we add the keyboard-open\n              (Enter/Space/ArrowDown) a real button would have given for free. */}\n          <div\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : 0}\n            data-disabled={disabled || undefined}\n            id={externalId}\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            aria-disabled={disabled || undefined}\n            // The trigger is a div[role=combobox] — non-labellable, so `<Label htmlFor>`\n            // can't target it. Inside a FormField, adopt the label's id via\n            // aria-labelledby; explicit accessibleLabel wins; placeholder is the\n            // standalone fallback.\n            aria-labelledby={accessibleLabel ? undefined : fieldCtx.labelId}\n            aria-label={accessibleLabel ?? (fieldCtx.labelId ? undefined : placeholder)}\n            aria-invalid={isError || undefined}\n            aria-describedby={ariaDescribedBy}\n            aria-required={ariaRequired || undefined}\n            onKeyDown={(e) => {\n              if (disabled) return\n              if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                e.preventDefault()\n                handleOpenChange(true)\n              }\n            }}\n            className={cn(\n              comboboxTriggerVariants({ size }),\n              'cursor-pointer',\n              open && 'border-accent-7',\n              state && stateBorderClasses[state],\n              triggerClassName,\n            )}\n          >\n            {renderTriggerContent()}\n            <Icon icon={IconChevronDown} size={resolvedIconSize} className={cn(\"ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard\", open && 'rotate-180')} />\n          </div>\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            asChild\n            sideOffset={4}\n            align=\"start\"\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              searchInputRef.current?.focus()\n            }}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating',\n              )}\n            >\n                  {/* Search input */}\n                  <div className=\"flex items-center gap-ds-02 border-b border-surface-border px-ds-04\">\n                    <Icon icon={IconSearch} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n                    <input\n                      ref={searchInputRef}\n                      type=\"text\"\n                      className=\"flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-muted\"\n                      placeholder={searchPlaceholder}\n                      value={search}\n                      onChange={(e) => {\n                        setSearch(e.target.value)\n                        setHighlightedIndex(-1)\n                      }}\n                      onKeyDown={handleKeyDown}\n                      aria-autocomplete=\"list\"\n                      aria-controls={listboxId}\n                      aria-activedescendant={\n                        highlightedIndex >= 0\n                          ? `${optionIdPrefix}-option-${highlightedIndex}`\n                          : undefined\n                      }\n                      aria-label=\"Search options\"\n                    />\n                  </div>\n\n                  {/* Options list */}\n                  {filteredOptions.length === 0 ? (\n                    <div className=\"px-ds-04 py-ds-05 text-center text-body-md text-surface-fg-subtle\">\n                      {emptyMessage}\n                    </div>\n                  ) : (\n                    <ul\n                      ref={listRef}\n                      id={listboxId}\n                      role=\"listbox\"\n                      aria-multiselectable={multiple || undefined}\n                      className=\"overflow-auto p-ds-02\"\n                      style={{ maxHeight: `${maxVisible * ITEM_HEIGHT_PX}px` }}\n                    >\n                      {filteredOptions.map((option, index) => {\n                        const selected = isSelected(option.value)\n                        return (\n                          <li\n                            key={option.value}\n                            id={`${optionIdPrefix}-option-${index}`}\n                            role=\"option\"\n                            aria-selected={selected}\n                            aria-disabled={option.disabled || undefined}\n                            className={cn(\n                              'relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden',\n                              'transition-colors duration-fast-01 ease-productive-standard',\n                              highlightedIndex === index &&\n                                'bg-accent-2',\n                              selected && 'text-accent-11',\n                              option.disabled &&\n                                'pointer-events-none opacity-action-disabled',\n                            )}\n                            onClick={() => {\n                              if (!option.disabled) {\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onKeyDown={(e) => {\n                              if (!option.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                                e.preventDefault()\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onMouseEnter={() => {\n                              if (!option.disabled) {\n                                setHighlightedIndex(index)\n                              }\n                            }}\n                          >\n                            {option.icon && (\n                              <span className=\"flex h-ico-sm w-ico-sm items-center justify-center shrink-0\">\n                                <IconProvider size={resolvedIconSize}>\n                                  {normalizeIcon(option.icon)}\n                                </IconProvider>\n                              </span>\n                            )}\n                            <span className=\"flex flex-1 flex-col\">\n                              {renderOption ? (\n                                renderOption(option, selected)\n                              ) : (\n                                <>\n                                  <span>{option.label}</span>\n                                  {option.description && (\n                                    <span className=\"text-body-sm text-surface-fg-muted\">\n                                      {option.description}\n                                    </span>\n                                  )}\n                                </>\n                              )}\n                            </span>\n                            {selected && (\n                              <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0\" />\n                            )}\n                          </li>\n                        )\n                      })}\n                    </ul>\n                  )}\n                </motion.div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n        </div>\n      </PopoverPrimitive.Root>\n    )\n  },\n)\nCombobox.displayName = 'Combobox'\n\nexport { Combobox }\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/ui/combobox.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@primitives/react-popover'\nimport { IconCheck, IconChevronDown, IconSearch, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport { IconProvider, type IconSize } from './icon-context'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport type { IconInput } from './lib/icon-input'\nimport { springs, tweens } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/** Border tint per validation state, applied to the trigger. */\nconst stateBorderClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7',\n  warning: 'border-warning-7',\n  success: 'border-success-7',\n}\n\nexport const comboboxTriggerVariants = cva(\n  [\n    'flex w-full items-center justify-between whitespace-nowrap rounded-control',\n    'border border-surface-border-interactive bg-surface-panel-hover',\n    'transition-colors duration-fast-01 ease-productive-standard',\n    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7',\n    // Trigger is a div[role=combobox] (so chip remove-buttons in multi-select\n    // aren't nested in a <button>), so disabled styling keys off data-disabled,\n    // not the :disabled pseudo-class.\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-action-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-body-sm px-ds-02',\n        sm: 'h-ds-sm text-body-sm px-ds-03',\n        md: 'h-ds-md text-body-md px-ds-04',\n        lg: 'h-ds-lg text-body-md px-ds-05',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>\n\n/** Colour treatment for a selected pill. See `ComboboxProps.pillTone`. */\nexport type ComboboxPillTone = 'neutral' | 'accent'\n\n// accent-2 was the previous fixed value and is not offered: in LIGHT it is the\n// same lightness as the trigger behind it (1.006:1), so the pill vanished\n// entirely, and in dark it sits below the panel. Both options below clear their\n// ground in both themes.\nconst PILL_TONES: Record<ComboboxPillTone, string> = {\n  neutral: 'bg-surface-panel-active text-surface-fg',\n  accent: 'bg-accent-4 text-accent-11',\n}\n\n/** Maps combobox size to Icon component size for chevron / check icons */\nconst iconSizeMap: Record<NonNullable<ComboboxSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps combobox size to pill text + padding classes */\nconst pillSizeMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'px-ds-02 py-0 text-body-xs',\n  sm: 'px-ds-02 py-0 text-body-xs',\n  md: 'px-ds-03 py-[1px] text-body-sm',\n  lg: 'px-ds-03 py-[2px] text-body-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-sm',\n}\n\n/**\n * Option shape for a Combobox dropdown item.\n * `value` must be unique across all options — it is the key used in selection state.\n */\nexport interface ComboboxOption {\n  value: string\n  label: string\n  description?: string\n  icon?: IconInput\n  disabled?: boolean\n}\n\n/**\n * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard\n * navigation, pill overflow (\"+ N more\"), and an optional custom option renderer.\n *\n * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`\n * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives\n * `string[]`, and selected items appear as dismissible pills in the trigger.\n *\n * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and\n * `onValueChange` automatically, so no manual casts are needed.\n *\n * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).\n *\n * @example\n * // Single-select country picker:\n * <Combobox\n *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}\n *   value={country}\n *   onValueChange={(v) => setCountry(v)}\n *   placeholder=\"Select country\"\n * />\n *\n * @example\n * // Multi-select tag picker with pill display:\n * <Combobox\n *   multiple\n *   options={tagOptions}\n *   value={selectedTags}\n *   onValueChange={(v) => setSelectedTags(v)}\n *   placeholder=\"Select tags...\"\n * />\n *\n * @example\n * // Custom option renderer (user avatars in assignee picker):\n * <Combobox\n *   options={users.map(u => ({ value: u.id, label: u.name }))}\n *   value={assigneeId}\n *   onValueChange={(v) => setAssigneeId(v)}\n *   renderOption={(option, selected) => (\n *     <span className=\"flex items-center gap-ds-03\">\n *       <Avatar size=\"xs\"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>\n *       {option.label}\n *     </span>\n *   )}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Available options shown in the dropdown. */\n  options: ComboboxOption[]\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string\n  /** Placeholder for the search input inside the dropdown. */\n  searchPlaceholder?: string\n  /** Message shown when the search yields no results. */\n  emptyMessage?: string\n  disabled?: boolean\n  triggerClassName?: string\n  /** Max visible items in the dropdown before scroll (default 6). */\n  maxVisible?: number\n  /** Custom renderer for each option row. Receives the option and whether it's currently selected. */\n  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode\n  /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */\n  accessibleLabel?: string\n  /** Size of the trigger. Controls height, text size, padding, and pill sizing. */\n  size?: ComboboxSize\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n  /**\n   * How a selected pill is coloured.\n   *\n   * - `neutral` (default) — grey. A pill here is a removable token, not a\n   *   selection, so the brand colour stays reserved for things that ARE\n   *   selected. 1.12:1 light / 1.16:1 dark against the trigger.\n   * - `accent` — brand-tinted, for pickers where the tokens should feel like\n   *   part of the brand. 1.30:1 light / 1.05:1 dark.\n   *\n   * @default 'neutral'\n   */\n  pillTone?: ComboboxPillTone\n}\n\ninterface ComboboxSingleProps extends ComboboxBaseProps {\n  multiple?: false\n  value?: string\n  onValueChange: (value: string) => void\n}\n\ninterface ComboboxMultipleProps extends ComboboxBaseProps {\n  multiple: true\n  value?: string[]\n  onValueChange: (value: string[]) => void\n}\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps\n\n/** Max pills shown in the trigger before \"+N more\" overflow */\nconst MAX_VISIBLE_PILLS = 2\n\n/** Approximate height of a single option item in px */\nconst ITEM_HEIGHT_PX = 36\n\nconst Combobox = React.forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select...',\n      searchPlaceholder = 'Search...',\n      emptyMessage = 'No results found',\n      multiple = false,\n      disabled = false,\n      className,\n      triggerClassName,\n      maxVisible = 6,\n      renderOption,\n      accessibleLabel,\n      id: externalId,\n      size: sizeProp = 'md',\n      state: stateProp,\n      pillTone = 'neutral',\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const searchInputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const optionIdPrefix = React.useId()\n    const listboxId = React.useId()\n\n    const selectedValues = React.useMemo<string[]>(() => {\n      if (value === undefined || value === null) return []\n      if (Array.isArray(value)) return value\n      return [value]\n    }, [value])\n\n    const filteredOptions = React.useMemo(\n      () =>\n        search\n          ? options.filter((o) =>\n              o.label.toLowerCase().includes(search.toLowerCase()),\n            )\n          : options,\n      [options, search],\n    )\n\n    const isSelected = React.useCallback(\n      (optionValue: string) => selectedValues.includes(optionValue),\n      [selectedValues],\n    )\n\n    const handleSelect = React.useCallback(\n      (optionValue: string) => {\n        if (multiple) {\n          const newValue = selectedValues.includes(optionValue)\n            ? selectedValues.filter((v) => v !== optionValue)\n            : [...selectedValues, optionValue]\n          ;(onValueChange as (value: string[]) => void)(newValue)\n        } else {\n          ;(onValueChange as (value: string) => void)(optionValue)\n          setOpen(false)\n        }\n      },\n      [multiple, selectedValues, onValueChange],\n    )\n\n    const handleRemovePill = React.useCallback(\n      (e: React.SyntheticEvent, optionValue: string) => {\n        e.stopPropagation()\n        e.preventDefault()\n        const newValue = selectedValues.filter((v) => v !== optionValue)\n        ;(onValueChange as (value: string[]) => void)(newValue)\n      },\n      [selectedValues, onValueChange],\n    )\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        if (disabled) return\n        setOpen(nextOpen)\n        if (!nextOpen) {\n          setSearch('')\n          setHighlightedIndex(-1)\n        }\n      },\n      [disabled],\n    )\n\n    // Auto-focus search input when popover opens\n    React.useEffect(() => {\n      if (open) {\n        // Use a small timeout to allow the popover to render\n        const timer = setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 0)\n        return () => clearTimeout(timer)\n      }\n    }, [open])\n\n    const findNextEnabledIndex = React.useCallback(\n      (currentIndex: number, direction: 1 | -1): number => {\n        const len = filteredOptions.length\n        if (len === 0) return -1\n\n        let nextIndex = currentIndex + direction\n        while (nextIndex >= 0 && nextIndex < len) {\n          if (!filteredOptions[nextIndex].disabled) return nextIndex\n          nextIndex += direction\n        }\n        return currentIndex\n      },\n      [filteredOptions],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const nextIdx = findNextEnabledIndex(highlightedIndex, 1)\n            setHighlightedIndex(nextIdx)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prevIdx = findNextEnabledIndex(highlightedIndex, -1)\n            setHighlightedIndex(prevIdx)\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            const firstEnabled = filteredOptions.findIndex((o) => !o.disabled)\n            setHighlightedIndex(firstEnabled)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            let lastEnabled = -1\n            for (let i = filteredOptions.length - 1; i >= 0; i--) {\n              if (!filteredOptions[i].disabled) {\n                lastEnabled = i\n                break\n              }\n            }\n            setHighlightedIndex(lastEnabled)\n            break\n          }\n          case 'Enter': {\n            e.preventDefault()\n            if (\n              highlightedIndex >= 0 &&\n              highlightedIndex < filteredOptions.length &&\n              !filteredOptions[highlightedIndex].disabled\n            ) {\n              handleSelect(filteredOptions[highlightedIndex].value)\n            }\n            break\n          }\n          case 'Escape': {\n            e.preventDefault()\n            setOpen(false)\n            setSearch('')\n            setHighlightedIndex(-1)\n            break\n          }\n        }\n      },\n      [highlightedIndex, filteredOptions, findNextEnabledIndex, handleSelect],\n    )\n\n    // Scroll highlighted option into view\n    React.useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const optionEl = listRef.current.children[highlightedIndex] as HTMLElement\n        if (optionEl) {\n          optionEl.scrollIntoView?.({ block: 'nearest' })\n        }\n      }\n    }, [highlightedIndex])\n\n    const getSelectedLabel = React.useCallback(() => {\n      if (selectedValues.length === 0) return null\n      const option = options.find((o) => o.value === selectedValues[0])\n      return option?.label ?? null\n    }, [selectedValues, options])\n\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedPillClasses = pillSizeMap[size]\n    const resolvedOverflowText = overflowTextMap[size]\n\n    const renderTriggerContent = () => {\n      if (multiple && selectedValues.length > 0) {\n        const visiblePills = selectedValues.slice(0, MAX_VISIBLE_PILLS)\n        const remaining = selectedValues.length - MAX_VISIBLE_PILLS\n\n        return (\n          <span className=\"flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden\">\n            {visiblePills.map((val) => {\n              const option = options.find((o) => o.value === val)\n              if (!option) return null\n              return (\n                <span\n                  key={val}\n                  className={cn('inline-flex items-center gap-ds-01 rounded-control-inner', PILL_TONES[pillTone], resolvedPillClasses)}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-panel-hover transition-colors duration-fast-01 ease-productive-standard\"\n                    onClick={(e) => handleRemovePill(e, val)}\n                    aria-label={`Remove ${option.label}`}\n                    tabIndex={-1}\n                  >\n                    <Icon icon={IconX} size={resolvedIconSize} />\n                  </button>\n                </span>\n              )\n            })}\n            {remaining > 0 && (\n              <span className={cn('text-surface-fg-muted', resolvedOverflowText)}>\n                +{remaining} more\n              </span>\n            )}\n          </span>\n        )\n      }\n\n      if (!multiple && selectedValues.length === 1) {\n        const label = getSelectedLabel()\n        if (label) {\n          return <span className=\"min-w-0 flex-1 truncate text-left\">{label}</span>\n        }\n      }\n\n      return (\n        <span className=\"min-w-0 flex-1 truncate text-left text-surface-fg-muted\">\n          {placeholder}\n        </span>\n      )\n    }\n\n    const fieldCtx = useFormField()\n    const state = resolveFieldState(stateProp, fieldCtx.state)\n    const isError = state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    return (\n      <MotionPreference>\n        <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n          <div className={cn('relative', className)} {...rest}>\n          <PopoverPrimitive.Trigger asChild disabled={disabled}>\n            {/* role=combobox on a <div>, NOT a <button> — a native button can't\n                legally contain the chip remove-<button>s rendered in multi-select\n                (invalid HTML + a11y break). This is the W3C select-only combobox\n                pattern. Radix Trigger wires click/toggle; we add the keyboard-open\n                (Enter/Space/ArrowDown) a real button would have given for free. */}\n            <div\n              ref={ref}\n              role=\"combobox\"\n              tabIndex={disabled ? -1 : 0}\n              data-disabled={disabled || undefined}\n              id={externalId}\n              aria-expanded={open}\n              aria-controls={listboxId}\n              aria-haspopup=\"listbox\"\n              aria-disabled={disabled || undefined}\n              // The trigger is a div[role=combobox] — non-labellable, so `<Label htmlFor>`\n              // can't target it. Inside a FormField, adopt the label's id via\n              // aria-labelledby; explicit accessibleLabel wins; placeholder is the\n              // standalone fallback.\n              aria-labelledby={accessibleLabel ? undefined : fieldCtx.labelId}\n              aria-label={accessibleLabel ?? (fieldCtx.labelId ? undefined : placeholder)}\n              aria-invalid={isError || undefined}\n              aria-describedby={ariaDescribedBy}\n              aria-required={ariaRequired || undefined}\n              onKeyDown={(e) => {\n                if (disabled) return\n                if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n                  e.preventDefault()\n                  handleOpenChange(true)\n                }\n              }}\n              className={cn(\n                comboboxTriggerVariants({ size }),\n                'cursor-pointer',\n                open && 'border-accent-7',\n                state && stateBorderClasses[state],\n                triggerClassName,\n              )}\n            >\n              {renderTriggerContent()}\n              <Icon icon={IconChevronDown} size={resolvedIconSize} className={cn(\"ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard\", open && 'rotate-180')} />\n            </div>\n          </PopoverPrimitive.Trigger>\n\n          <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n              asChild\n              sideOffset={4}\n              align=\"start\"\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                searchInputRef.current?.focus()\n              }}\n            >\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95 }}\n                animate={{ opacity: 1, scale: 1 }}\n                transition={{ ...springs.snappy, opacity: tweens.fade }}\n                className={cn(\n                  'z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating',\n                )}\n              >\n                    {/* Search input */}\n                    <div className=\"flex items-center gap-ds-02 border-b border-surface-border px-ds-04\">\n                      <Icon icon={IconSearch} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n                      <input\n                        ref={searchInputRef}\n                        type=\"text\"\n                        className=\"flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-muted\"\n                        placeholder={searchPlaceholder}\n                        value={search}\n                        onChange={(e) => {\n                          setSearch(e.target.value)\n                          setHighlightedIndex(-1)\n                        }}\n                        onKeyDown={handleKeyDown}\n                        aria-autocomplete=\"list\"\n                        aria-controls={listboxId}\n                        aria-activedescendant={\n                          highlightedIndex >= 0\n                            ? `${optionIdPrefix}-option-${highlightedIndex}`\n                            : undefined\n                        }\n                        aria-label=\"Search options\"\n                      />\n                    </div>\n\n                    {/* Options list */}\n                    {filteredOptions.length === 0 ? (\n                      <div className=\"px-ds-04 py-ds-05 text-center text-body-md text-surface-fg-subtle\">\n                        {emptyMessage}\n                      </div>\n                    ) : (\n                      <ul\n                        ref={listRef}\n                        id={listboxId}\n                        role=\"listbox\"\n                        aria-multiselectable={multiple || undefined}\n                        className=\"overflow-auto p-ds-02\"\n                        style={{ maxHeight: `${maxVisible * ITEM_HEIGHT_PX}px` }}\n                      >\n                        {filteredOptions.map((option, index) => {\n                          const selected = isSelected(option.value)\n                          return (\n                            <li\n                              key={option.value}\n                              id={`${optionIdPrefix}-option-${index}`}\n                              role=\"option\"\n                              aria-selected={selected}\n                              aria-disabled={option.disabled || undefined}\n                              className={cn(\n                                'relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden',\n                                'transition-colors duration-fast-01 ease-productive-standard',\n                                highlightedIndex === index &&\n                                  'bg-accent-4',\n                                selected && 'text-accent-11',\n                                option.disabled &&\n                                  'pointer-events-none opacity-action-disabled',\n                              )}\n                              onClick={() => {\n                                if (!option.disabled) {\n                                  handleSelect(option.value)\n                                }\n                              }}\n                              onKeyDown={(e) => {\n                                if (!option.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                                  e.preventDefault()\n                                  handleSelect(option.value)\n                                }\n                              }}\n                              onMouseEnter={() => {\n                                if (!option.disabled) {\n                                  setHighlightedIndex(index)\n                                }\n                              }}\n                            >\n                              {option.icon && (\n                                <span className=\"flex h-ico-sm w-ico-sm items-center justify-center shrink-0\">\n                                  <IconProvider size={resolvedIconSize}>\n                                    {normalizeIcon(option.icon)}\n                                  </IconProvider>\n                                </span>\n                              )}\n                              <span className=\"flex flex-1 flex-col\">\n                                {renderOption ? (\n                                  renderOption(option, selected)\n                                ) : (\n                                  <>\n                                    <span>{option.label}</span>\n                                    {option.description && (\n                                      <span className=\"text-body-sm text-surface-fg-muted\">\n                                        {option.description}\n                                      </span>\n                                    )}\n                                  </>\n                                )}\n                              </span>\n                              {selected && (\n                                <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0\" />\n                              )}\n                            </li>\n                          )\n                        })}\n                      </ul>\n                    )}\n                  </motion.div>\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n          </div>\n        </PopoverPrimitive.Root>\n      </MotionPreference>\n    )\n  },\n)\nCombobox.displayName = 'Combobox'\n\nexport { Combobox }\n"],"mappings":"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"}

package/dist/ui/context-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/ui/context-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,gCAAgC,CAAA;AAGtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAmB3F,CAAA;AAGD,QAAA,MAAM,kBAAkB,sHAA+B,CAAA;AAEvD,QAAA,MAAM,gBAAgB,mHAA6B,CAAA;AAEnD,QAAA,MAAM,iBAAiB,uDAA8B,CAAA;AAErD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,GAAG,CAAC,CAuB7F,CAAA;AAGD,QAAA,MAAM,qBAAqB,wHAAkC,CAAA;AAE7D,QAAA,MAAM,qBAAqB;YAGf,OAAO;wCAejB,CAAA;AAGF,QAAA,MAAM,qBAAqB,2KA+BzB,CAAA;AAGF,QAAA,MAAM,kBAAkB,wKAiCtB,CAAA;AAGF,QAAA,MAAM,eAAe;YAGT,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,uBAAuB,6KAoB3B,CAAA;AAIF,QAAA,MAAM,oBAAoB,0KAmBxB,CAAA;AAGF,QAAA,MAAM,gBAAgB;YAGV,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,oBAAoB,0KASxB,CAAA;AAGF,QAAA,MAAM,mBAAmB;8BAGtB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAA;AAGD,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,CAAA;AACzG,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAEnG,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/ui/context-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,gCAAgC,CAAA;AAGtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAmB3F,CAAA;AAGD,QAAA,MAAM,kBAAkB,sHAA+B,CAAA;AAEvD,QAAA,MAAM,gBAAgB,mHAA6B,CAAA;AAEnD,QAAA,MAAM,iBAAiB,uDAA8B,CAAA;AAErD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,GAAG,CAAC,CAuB7F,CAAA;AAGD,QAAA,MAAM,qBAAqB,wHAAkC,CAAA;AAE7D,QAAA,MAAM,qBAAqB;YAGf,OAAO;wCAejB,CAAA;AAGF,QAAA,MAAM,qBAAqB,2KAiCzB,CAAA;AAGF,QAAA,MAAM,kBAAkB,wKAmCtB,CAAA;AAGF,QAAA,MAAM,eAAe;YAGT,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,uBAAuB,6KAoB3B,CAAA;AAIF,QAAA,MAAM,oBAAoB,0KAmBxB,CAAA;AAGF,QAAA,MAAM,gBAAgB;YAGV,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,oBAAoB,0KASxB,CAAA;AAGF,QAAA,MAAM,mBAAmB;8BAGtB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAA;AAGD,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,CAAA;AACzG,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAEnG,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,GACnB,CAAA"}