@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/composed/multi-select-popover.js

@@ -1,180 +1,186 @@
 "use client";
-import { jsxs as l, jsx as n, Fragment as J } from "react/jsx-runtime";
-import * as r from "react";
-import { cn as L } from "../ui/lib/utils.js";
-import { Popover as Q, PopoverTrigger as W, PopoverContent as X } from "../ui/popover.js";
-import { IconSearch as Y, IconCheck as Z } from "@tabler/icons-react";
-import { Icon as P } from "../ui/icon.js";
-import { springs as A } from "../ui/lib/motion.js";
-import { Spinner as _ } from "../ui/spinner.js";
-import { m as T } from "../_chunks/framer.js";
-const V = r.forwardRef(
-  ({
-    items: w,
-    groups: c,
-    value: d,
-    onValueChange: h,
-    searchPlaceholder: j = "Search...",
-    onSearch: o,
-    searchDebounce: v = 300,
-    renderItem: N,
-    emptyMessage: q = "No results found",
-    maxSelections: k,
-    align: z = "start",
-    width: F,
-    children: O,
-    className: K,
-    ...$
-  }, G) => {
-    const [f, U] = r.useState(!1), [i, I] = r.useState(""), [u, m] = r.useState(null), [S, y] = r.useState(!1), [a, p] = r.useState(-1), g = r.useRef(void 0), C = r.useRef(null);
-    r.useEffect(() => {
-      f || (I(""), m(null), p(-1));
-    }, [f]), r.useEffect(() => {
-      if (!(!o || !f)) {
-        if (!i.trim()) {
-          m(null), y(!1);
-          return;
-        }
-        return y(!0), clearTimeout(g.current), g.current = setTimeout(() => {
-          o(i).then((e) => m(e)).catch(() => m([])).finally(() => y(!1));
-        }, v), () => clearTimeout(g.current);
-      }
-    }, [i, o, v, f]);
-    const b = r.useMemo(() => u || (c ? c.flatMap((e) => e.items) : w ?? []), [w, c, u]), x = r.useMemo(() => {
-      if (o) return b;
-      const e = i.toLowerCase();
-      return e ? b.filter((t) => t.label.toLowerCase().includes(e)) : b;
-    }, [b, i, o]), R = r.useMemo(() => {
-      if (!c || o || u) return null;
-      const e = i.toLowerCase();
-      return c.map((t) => ({
-        ...t,
-        items: e ? t.items.filter((s) => s.label.toLowerCase().includes(e)) : t.items
-      })).filter((t) => t.items.length > 0);
-    }, [c, i, o, u]);
-    function M(e) {
-      d.includes(e) ? h(d.filter((s) => s !== e)) : k && d.length >= k ? h([...d.slice(1), e]) : h([...d, e]);
-    }
-    r.useEffect(() => {
-      p(-1);
-    }, [i]), r.useEffect(() => {
-      if (a < 0) return;
-      const e = C.current;
-      if (!e) return;
-      e.querySelectorAll("[data-multiselect-item]")[a]?.scrollIntoView({ block: "nearest" });
-    }, [a]);
-    function B(e) {
-      const t = x.length;
-      if (t !== 0) {
-        if (e.key === "ArrowDown")
-          e.preventDefault(), p((s) => s < t - 1 ? s + 1 : 0);
-        else if (e.key === "ArrowUp")
-          e.preventDefault(), p((s) => s <= 0 ? t - 1 : s - 1);
-        else if (e.key === "Enter" && a >= 0) {
-          e.preventDefault();
-          const s = x[a];
-          s && !s.disabled && M(s.id);
-        }
-      }
-    }
-    let H = 0;
-    function D(e) {
-      const t = d.includes(e.id), s = H++, E = s === a;
-      return /* @__PURE__ */ l(
-        T.button,
-        {
-          id: `msp-item-${s}`,
-          type: "button",
-          disabled: e.disabled,
-          "data-multiselect-item": "",
-          "data-focused": E ? "" : void 0,
-          initial: { opacity: 0, x: -8 },
-          animate: { opacity: 1, x: 0 },
-          transition: { ...A.snappy, delay: s * 0.02 },
-          onClick: () => M(e.id),
-          className: L(
-            "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard",
-            "hover:bg-surface-raised-hover",
-            "disabled:opacity-action-disabled disabled:cursor-not-allowed",
-            t && "bg-accent-2 text-accent-11",
-            E && "bg-surface-raised-hover"
-          ),
-          children: [
-            N ? /* @__PURE__ */ n("span", { className: "flex-1 min-w-0", children: N(e, t) }) : /* @__PURE__ */ l(J, { children: [
-              e.image && /* @__PURE__ */ n(
-                "img",
-                {
-                  src: e.image,
-                  alt: "",
-                  className: "h-ico-md w-ico-md rounded-full object-cover shrink-0"
-                }
-              ),
-              /* @__PURE__ */ l("span", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ n("span", { className: "block truncate text-ds-md font-body text-surface-fg", children: e.label }),
-                e.description && /* @__PURE__ */ n("span", { className: "block truncate text-ds-xs text-surface-fg-subtle", children: e.description })
-              ] })
-            ] }),
-            t && /* @__PURE__ */ n(
-              T.span,
-              {
-                initial: { scale: 0 },
-                animate: { scale: 1 },
-                transition: A.bouncy,
-                className: "inline-flex shrink-0",
-                children: /* @__PURE__ */ n(P, { icon: Z, size: "sm", className: "text-accent-11" })
-              }
-            )
-          ]
-        },
-        e.id
-      );
-    }
-    return /* @__PURE__ */ l(Q, { open: f, onOpenChange: U, modal: !1, children: [
-      /* @__PURE__ */ n(W, { asChild: !0, children: O }),
-      /* @__PURE__ */ l(
-        X,
-        {
-          ref: G,
-          ...$,
-          className: L(
-            "border-surface-border-strong bg-surface-overlay p-0",
-            K
-          ),
-          style: { width: F ?? 240 },
-          align: z,
-          sideOffset: 4,
-          children: [
-            /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03", children: [
-              /* @__PURE__ */ n(P, { icon: Y, size: "sm", stroke: "light", className: "shrink-0 text-surface-fg-subtle" }),
-              /* @__PURE__ */ n(
-                "input",
-                {
-                  type: "text",
-                  placeholder: j,
-                  value: i,
-                  onChange: (e) => I(e.target.value),
-                  onKeyDown: B,
-                  "aria-label": "Search",
-                  "aria-activedescendant": a >= 0 ? `msp-item-${a}` : void 0,
-                  className: "w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden"
-                }
-              ),
-              S && /* @__PURE__ */ n(_, { size: "sm" })
-            ] }),
-            /* @__PURE__ */ l("div", { ref: C, className: "max-h-[240px] overflow-y-auto py-ds-02", children: [
-              R ? R.map((e) => /* @__PURE__ */ l("div", { children: [
-                /* @__PURE__ */ n("div", { className: "px-ds-04 py-ds-02 text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: e.label }),
-                e.items.map(D)
-              ] }, e.label)) : x.map(D),
-              !S && x.length === 0 && /* @__PURE__ */ n("p", { className: "px-ds-04 py-ds-05 text-center text-ds-sm font-body text-surface-fg-subtle", children: q })
-            ] })
-          ]
-        }
-      )
-    ] });
-  }
-);
-V.displayName = "MultiSelectPopover";
-export {
-  V as MultiSelectPopover
-};
+import { a as e } from "../_chunks/framer.js";
+import { springs as t } from "../ui/lib/motion.js";
+import { cn as n } from "../ui/lib/utils.js";
+import { Spinner as r } from "../ui/spinner.js";
+import { Icon as i } from "../ui/icon.js";
+import { i as a, r as o, t as s } from "../_chunks/popover.js";
+import * as c from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { IconCheck as f, IconSearch as p } from "@tabler/icons-react";
+//#region src/composed/multi-select-popover.tsx
+var m = c.forwardRef(({ items: m, groups: h, value: g, onValueChange: _, searchPlaceholder: v = "Search...", onSearch: y, searchDebounce: b = 300, renderItem: x, emptyMessage: S = "No results found", maxSelections: C, align: w = "start", width: T, children: E, className: D, ...O }, k) => {
+	let [A, j] = c.useState(!1), [M, N] = c.useState(""), [P, F] = c.useState(null), [I, L] = c.useState(!1), [R, z] = c.useState(-1), B = c.useRef(void 0), V = c.useRef(null);
+	c.useEffect(() => {
+		A || (N(""), F(null), z(-1));
+	}, [A]), c.useEffect(() => {
+		if (!(!y || !A)) {
+			if (!M.trim()) {
+				F(null), L(!1);
+				return;
+			}
+			return L(!0), clearTimeout(B.current), B.current = setTimeout(() => {
+				y(M).then((e) => F(e)).catch(() => F([])).finally(() => L(!1));
+			}, b), () => clearTimeout(B.current);
+		}
+	}, [
+		M,
+		y,
+		b,
+		A
+	]);
+	let H = c.useMemo(() => P || (h ? h.flatMap((e) => e.items) : m ?? []), [
+		m,
+		h,
+		P
+	]), U = c.useMemo(() => {
+		if (y) return H;
+		let e = M.toLowerCase();
+		return e ? H.filter((t) => t.label.toLowerCase().includes(e)) : H;
+	}, [
+		H,
+		M,
+		y
+	]), W = c.useMemo(() => {
+		if (!h || y || P) return null;
+		let e = M.toLowerCase();
+		return h.map((t) => ({
+			...t,
+			items: e ? t.items.filter((t) => t.label.toLowerCase().includes(e)) : t.items
+		})).filter((e) => e.items.length > 0);
+	}, [
+		h,
+		M,
+		y,
+		P
+	]);
+	function G(e) {
+		g.includes(e) ? _(g.filter((t) => t !== e)) : C && g.length >= C ? _([...g.slice(1), e]) : _([...g, e]);
+	}
+	c.useEffect(() => {
+		z(-1);
+	}, [M]), c.useEffect(() => {
+		if (R < 0) return;
+		let e = V.current;
+		e && e.querySelectorAll("[data-multiselect-item]")[R]?.scrollIntoView({ block: "nearest" });
+	}, [R]);
+	function K(e) {
+		let t = U.length;
+		if (t !== 0) {
+			if (e.key === "ArrowDown") e.preventDefault(), z((e) => e < t - 1 ? e + 1 : 0);
+			else if (e.key === "ArrowUp") e.preventDefault(), z((e) => e <= 0 ? t - 1 : e - 1);
+			else if (e.key === "Enter" && R >= 0) {
+				e.preventDefault();
+				let t = U[R];
+				t && !t.disabled && G(t.id);
+			}
+		}
+	}
+	let q = 0;
+	function J(r) {
+		let a = g.includes(r.id), o = q++, s = o === R;
+		return /* @__PURE__ */ d(e.button, {
+			id: `msp-item-${o}`,
+			type: "button",
+			role: "option",
+			"aria-selected": a,
+			disabled: r.disabled,
+			"data-multiselect-item": "",
+			"data-focused": s ? "" : void 0,
+			initial: {
+				opacity: 0,
+				x: -8
+			},
+			animate: {
+				opacity: 1,
+				x: 0
+			},
+			transition: {
+				...t.snappy,
+				delay: o * .02
+			},
+			onClick: () => G(r.id),
+			className: n("flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-raised-hover", "disabled:opacity-action-disabled disabled:cursor-not-allowed", a && "bg-accent-2 text-accent-11", s && "bg-surface-raised-hover"),
+			children: [x ? /* @__PURE__ */ u("span", {
+				className: "flex-1 min-w-0",
+				children: x(r, a)
+			}) : /* @__PURE__ */ d(l, { children: [r.image && /* @__PURE__ */ u("img", {
+				src: r.image,
+				alt: "",
+				className: "h-ico-md w-ico-md rounded-full object-cover shrink-0"
+			}), /* @__PURE__ */ d("span", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ u("span", {
+					className: "block truncate text-ds-md font-body text-surface-fg",
+					children: r.label
+				}), r.description && /* @__PURE__ */ u("span", {
+					className: "block truncate text-ds-xs text-surface-fg-subtle",
+					children: r.description
+				})]
+			})] }), a && /* @__PURE__ */ u(e.span, {
+				initial: { scale: 0 },
+				animate: { scale: 1 },
+				transition: t.bouncy,
+				className: "inline-flex shrink-0",
+				children: /* @__PURE__ */ u(i, {
+					icon: f,
+					size: "sm",
+					className: "text-accent-11"
+				})
+			})]
+		}, r.id);
+	}
+	return /* @__PURE__ */ d(s, {
+		open: A,
+		onOpenChange: j,
+		modal: !1,
+		children: [/* @__PURE__ */ u(a, {
+			asChild: !0,
+			children: E
+		}), /* @__PURE__ */ d(o, {
+			ref: k,
+			...O,
+			className: n("border-surface-border-strong bg-surface-overlay p-0", D),
+			style: { width: T ?? 240 },
+			align: w,
+			sideOffset: 4,
+			children: [/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03",
+				children: [
+					/* @__PURE__ */ u(i, {
+						icon: p,
+						size: "sm",
+						stroke: "light",
+						className: "shrink-0 text-surface-fg-subtle"
+					}),
+					/* @__PURE__ */ u("input", {
+						type: "text",
+						placeholder: v,
+						value: M,
+						onChange: (e) => N(e.target.value),
+						onKeyDown: K,
+						"aria-label": "Search",
+						"aria-activedescendant": R >= 0 ? `msp-item-${R}` : void 0,
+						className: "w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden"
+					}),
+					I && /* @__PURE__ */ u(r, { size: "sm" })
+				]
+			}), /* @__PURE__ */ d("div", {
+				ref: V,
+				role: "listbox",
+				"aria-multiselectable": "true",
+				className: "max-h-[240px] overflow-y-auto py-ds-02",
+				children: [W ? W.map((e) => /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", {
+					className: "px-ds-04 py-ds-02 text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle",
+					children: e.label
+				}), e.items.map(J)] }, e.label)) : U.map(J), !I && U.length === 0 && /* @__PURE__ */ u("p", {
+					className: "px-ds-04 py-ds-05 text-center text-ds-sm font-body text-surface-fg-subtle",
+					children: S
+				})]
+			})]
+		})]
+	});
+});
+m.displayName = "MultiSelectPopover";
+//#endregion
+export { m as MultiSelectPopover };

package/dist/composed/multi-select-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-popover.js","names":[],"sources":["../../src/composed/multi-select-popover.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '../ui/popover'\nimport { IconCheck, IconSearch } from '@tabler/icons-react'\nimport { Icon } from '../ui/icon'\nimport { motion } from 'framer-motion'\nimport { springs } from '../ui/lib/motion'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MultiSelectItem {\n  id: string\n  label: string\n  image?: string\n  description?: string\n  disabled?: boolean\n}\n\nexport interface MultiSelectGroup {\n  label: string\n  items: MultiSelectItem[]\n}\n\nexport interface MultiSelectPopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /** Flat list of items (use `groups` for grouped rendering) */\n  items?: MultiSelectItem[]\n  /** Grouped items with section headers */\n  groups?: MultiSelectGroup[]\n  /** Currently selected item IDs */\n  value: string[]\n  /** Called when selection changes */\n  onValueChange: (ids: string[]) => void\n  /** @default 'Search...' */\n  searchPlaceholder?: string\n  /** Async search — replaces local filter with server results */\n  onSearch?: (query: string) => Promise<MultiSelectItem[]>\n  /** Debounce for async search in ms @default 300 */\n  searchDebounce?: number\n  /** Custom item renderer */\n  renderItem?: (item: MultiSelectItem, selected: boolean) => React.ReactNode\n  /** Message when no items match filter @default 'No results found' */\n  emptyMessage?: string\n  /** Maximum number of selections */\n  maxSelections?: number\n  /** Popover alignment @default 'start' */\n  align?: 'start' | 'center' | 'end'\n  /** Popover width */\n  width?: string | number\n  /** Trigger element */\n  children: React.ReactNode\n}\n\n// ============================================================\n// MultiSelectPopover\n// ============================================================\n\nconst MultiSelectPopover = React.forwardRef<HTMLDivElement, MultiSelectPopoverProps>(\n  (\n    {\n      items,\n      groups,\n      value,\n      onValueChange,\n      searchPlaceholder = 'Search...',\n      onSearch,\n      searchDebounce = 300,\n      renderItem,\n      emptyMessage = 'No results found',\n      maxSelections,\n      align = 'start',\n      width,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [asyncItems, setAsyncItems] = React.useState<MultiSelectItem[] | null>(null)\n    const [loading, setLoading] = React.useState(false)\n    const [focusedIndex, setFocusedIndex] = React.useState(-1)\n    const debounceRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    const listRef = React.useRef<HTMLDivElement>(null)\n\n    // Reset search and focus when popover closes\n    React.useEffect(() => {\n      if (!open) {\n        setSearch('')\n        setAsyncItems(null)\n        setFocusedIndex(-1)\n      }\n    }, [open])\n\n    // Async search\n    React.useEffect(() => {\n      if (!onSearch || !open) return\n      if (!search.trim()) {\n        setAsyncItems(null)\n        setLoading(false)\n        return\n      }\n      setLoading(true)\n      clearTimeout(debounceRef.current)\n      debounceRef.current = setTimeout(() => {\n        onSearch(search)\n          .then((results) => setAsyncItems(results))\n          .catch(() => setAsyncItems([]))\n          .finally(() => setLoading(false))\n      }, searchDebounce)\n      return () => clearTimeout(debounceRef.current)\n    }, [search, onSearch, searchDebounce, open])\n\n    // Resolve visible items\n    const allItems = React.useMemo(() => {\n      if (asyncItems) return asyncItems\n      if (groups) return groups.flatMap((g) => g.items)\n      return items ?? []\n    }, [items, groups, asyncItems])\n\n    const filteredItems = React.useMemo(() => {\n      if (onSearch) return allItems // async search handles its own filtering\n      const q = search.toLowerCase()\n      if (!q) return allItems\n      return allItems.filter((item) => item.label.toLowerCase().includes(q))\n    }, [allItems, search, onSearch])\n\n    const filteredGroups = React.useMemo(() => {\n      if (!groups || onSearch || asyncItems) return null\n      const q = search.toLowerCase()\n      return groups\n        .map((g) => ({\n          ...g,\n          items: q ? g.items.filter((item) => item.label.toLowerCase().includes(q)) : g.items,\n        }))\n        .filter((g) => g.items.length > 0)\n    }, [groups, search, onSearch, asyncItems])\n\n    function toggle(id: string) {\n      const isSelected = value.includes(id)\n      if (isSelected) {\n        onValueChange(value.filter((v) => v !== id))\n      } else {\n        if (maxSelections && value.length >= maxSelections) {\n          // Replace: drop the first selected item to make room for the new one\n          onValueChange([...value.slice(1), id])\n        } else {\n          onValueChange([...value, id])\n        }\n      }\n    }\n\n    // Reset focused index when search text changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    React.useEffect(() => { setFocusedIndex(-1) }, [search])\n\n    // Scroll focused item into view\n    React.useEffect(() => {\n      if (focusedIndex < 0) return\n      const list = listRef.current\n      if (!list) return\n      const items = list.querySelectorAll('[data-multiselect-item]')\n      items[focusedIndex]?.scrollIntoView({ block: 'nearest' })\n    }, [focusedIndex])\n\n    function handleSearchKeyDown(e: React.KeyboardEvent) {\n      const count = filteredItems.length\n      if (count === 0) return\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev < count - 1 ? prev + 1 : 0))\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        setFocusedIndex((prev) => (prev <= 0 ? count - 1 : prev - 1))\n      } else if (e.key === 'Enter' && focusedIndex >= 0) {\n        e.preventDefault()\n        const item = filteredItems[focusedIndex]\n        if (item && !item.disabled) toggle(item.id)\n      }\n    }\n\n    let itemCounter = 0\n\n    function renderItemRow(item: MultiSelectItem) {\n      const isSelected = value.includes(item.id)\n      const index = itemCounter++\n      const isFocused = index === focusedIndex\n      return (\n        <motion.button\n          key={item.id}\n          id={`msp-item-${index}`}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          disabled={item.disabled}\n          data-multiselect-item=\"\"\n          data-focused={isFocused ? '' : undefined}\n          initial={{ opacity: 0, x: -8 }}\n          animate={{ opacity: 1, x: 0 }}\n          transition={{ ...springs.snappy, delay: index * 0.02 }}\n          onClick={() => toggle(item.id)}\n          className={cn(\n            'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard',\n            'hover:bg-surface-raised-hover',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            isSelected && 'bg-accent-2 text-accent-11',\n            isFocused && 'bg-surface-raised-hover',\n          )}\n        >\n          {renderItem ? (\n            <span className=\"flex-1 min-w-0\">{renderItem(item, isSelected)}</span>\n          ) : (\n            <>\n              {item.image && (\n                <img\n                  src={item.image}\n                  alt=\"\"\n                  className=\"h-ico-md w-ico-md rounded-full object-cover shrink-0\"\n                />\n              )}\n              <span className=\"flex-1 min-w-0\">\n                <span className=\"block truncate text-ds-md font-body text-surface-fg\">{item.label}</span>\n                {item.description && (\n                  <span className=\"block truncate text-ds-xs text-surface-fg-subtle\">{item.description}</span>\n                )}\n              </span>\n            </>\n          )}\n          {isSelected && (\n            <motion.span\n              initial={{ scale: 0 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex shrink-0\"\n            >\n              <Icon icon={IconCheck} size=\"sm\" className=\"text-accent-11\" />\n            </motion.span>\n          )}\n        </motion.button>\n      )\n    }\n\n    return (\n      <Popover open={open} onOpenChange={setOpen} modal={false}>\n        <PopoverTrigger asChild>{children}</PopoverTrigger>\n        <PopoverContent\n          ref={ref}\n          {...props}\n          className={cn(\n            'border-surface-border-strong bg-surface-overlay p-0',\n            className,\n          )}\n          style={{ width: width ?? 240 }}\n          align={align}\n          sideOffset={4}\n        >\n          {/* Search */}\n          <div className=\"flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-04 py-ds-03\">\n            <Icon icon={IconSearch} size=\"sm\" stroke=\"light\" className=\"shrink-0 text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              onKeyDown={handleSearchKeyDown}\n              aria-label=\"Search\"\n              aria-activedescendant={focusedIndex >= 0 ? `msp-item-${focusedIndex}` : undefined}\n              className=\"w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-hidden\"\n            />\n            {loading && <Spinner size=\"sm\" />}\n          </div>\n\n          {/* Items */}\n          <div ref={listRef} role=\"listbox\" aria-multiselectable=\"true\" className=\"max-h-[240px] overflow-y-auto py-ds-02\">\n            {filteredGroups\n              ? filteredGroups.map((group) => (\n                  <div key={group.label}>\n                    <div className=\"px-ds-04 py-ds-02 text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle\">\n                      {group.label}\n                    </div>\n                    {group.items.map(renderItemRow)}\n                  </div>\n                ))\n              : filteredItems.map(renderItemRow)}\n            {!loading && filteredItems.length === 0 && (\n              <p className=\"px-ds-04 py-ds-05 text-center text-ds-sm font-body text-surface-fg-subtle\">\n                {emptyMessage}\n              </p>\n            )}\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nMultiSelectPopover.displayName = 'MultiSelectPopover'\n\nexport { MultiSelectPopover }\n"],"mappings":"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"}

package/dist/composed/page-header.js

@@ -1,76 +1,54 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import * as o from "react";
-import { cn as n } from "../ui/lib/utils.js";
-const x = o.forwardRef(
-  ({ title: c, subtitle: r, actions: a, breadcrumbs: s, titleClassName: f, className: h, ...g }, m) => {
-    const i = c ?? s?.[s.length - 1]?.label ?? "";
-    return /* @__PURE__ */ l(
-      "div",
-      {
-        ref: m,
-        className: n(
-          "flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06",
-          h
-        ),
-        ...g,
-        children: [
-          s && s.length > 0 && /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-ds-02b", children: s.map((t, d) => /* @__PURE__ */ l(o.Fragment, { children: [
-            d > 0 && /* @__PURE__ */ e(
-              "svg",
-              {
-                width: 16,
-                height: 16,
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: 1.5,
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                "aria-hidden": "true",
-                className: "text-surface-fg-subtle",
-                children: /* @__PURE__ */ e("path", { d: "M9 6l6 6l-6 6" })
-              }
-            ),
-            t.href ? /* @__PURE__ */ e(
-              "a",
-              {
-                href: t.href,
-                className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
-                children: t.label
-              }
-            ) : /* @__PURE__ */ e(
-              "span",
-              {
-                className: n(
-                  "text-ds-sm",
-                  d === s.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"
-                ),
-                children: t.label
-              }
-            )
-          ] }, d)) }),
-          (i || r || a) && /* @__PURE__ */ l("div", { className: "flex items-start justify-between gap-ds-05", children: [
-            /* @__PURE__ */ l("div", { className: "flex flex-col gap-ds-02b", children: [
-              i && /* @__PURE__ */ e(
-                "h1",
-                {
-                  className: n(
-                    "text-ds-2xl font-semibold text-surface-fg",
-                    f
-                  ),
-                  children: i
-                }
-              ),
-              r && /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg-subtle", children: r })
-            ] }),
-            a && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-ds-03", children: a })
-          ] })
-        ]
-      }
-    );
-  }
-);
-x.displayName = "PageHeader";
-export {
-  x as PageHeader
-};
+import { cn as e } from "../ui/lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/composed/page-header.tsx
+var i = t.forwardRef(({ title: i, subtitle: a, actions: o, breadcrumbs: s, titleClassName: c, className: l, ...u }, d) => {
+	let f = i ?? s?.[s.length - 1]?.label ?? "";
+	return /* @__PURE__ */ r("div", {
+		ref: d,
+		className: e("flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06", l),
+		...u,
+		children: [s && s.length > 0 && /* @__PURE__ */ n("nav", {
+			"aria-label": "Breadcrumb",
+			className: "flex items-center gap-ds-02b",
+			children: s.map((i, a) => /* @__PURE__ */ r(t.Fragment, { children: [a > 0 && /* @__PURE__ */ n("svg", {
+				width: 16,
+				height: 16,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				className: "text-surface-fg-subtle",
+				children: /* @__PURE__ */ n("path", { d: "M9 6l6 6l-6 6" })
+			}), i.href ? /* @__PURE__ */ n("a", {
+				href: i.href,
+				className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
+				children: i.label
+			}) : /* @__PURE__ */ n("span", {
+				className: e("text-ds-sm", a === s.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"),
+				children: i.label
+			})] }, a))
+		}), (f || a || o) && /* @__PURE__ */ r("div", {
+			className: "flex items-start justify-between gap-ds-05",
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex flex-col gap-ds-02b",
+				children: [f && /* @__PURE__ */ n("h1", {
+					className: e("text-ds-2xl font-semibold text-surface-fg", c),
+					children: f
+				}), a && /* @__PURE__ */ n("p", {
+					className: "text-ds-md text-surface-fg-subtle",
+					children: a
+				})]
+			}), o && /* @__PURE__ */ n("div", {
+				className: "flex shrink-0 items-center gap-ds-03",
+				children: o
+			})]
+		})]
+	});
+});
+i.displayName = "PageHeader";
+//#endregion
+export { i as PageHeader };

package/dist/composed/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/composed/page-header.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\nimport { cn } from '../ui/lib/utils'\n\nexport interface Breadcrumb {\n  label: string\n  href?: string\n}\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  subtitle?: string\n  actions?: React.ReactNode\n  breadcrumbs?: Breadcrumb[]\n  titleClassName?: string\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    { title, subtitle, actions, breadcrumbs, titleClassName, className, ...props },\n    ref,\n  ) => {\n    const resolvedTitle =\n      title ?? breadcrumbs?.[breadcrumbs.length - 1]?.label ?? ''\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06',\n          className,\n        )}\n        {...props}\n      >\n        {breadcrumbs && breadcrumbs.length > 0 && (\n          <nav aria-label=\"Breadcrumb\" className=\"flex items-center gap-ds-02b\">\n            {breadcrumbs.map((crumb, index) => (\n              <React.Fragment key={index}>\n                {index > 0 && (\n                  <svg\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden=\"true\"\n                    className=\"text-surface-fg-subtle\"\n                  >\n                    <path d=\"M9 6l6 6l-6 6\" />\n                  </svg>\n                )}\n                {crumb.href ? (\n                  <a\n                    href={crumb.href}\n                    className=\"text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm\"\n                  >\n                    {crumb.label}\n                  </a>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-ds-sm',\n                      index === breadcrumbs.length - 1\n                        ? 'text-surface-fg'\n                        : 'text-surface-fg-subtle',\n                    )}\n                  >\n                    {crumb.label}\n                  </span>\n                )}\n              </React.Fragment>\n            ))}\n          </nav>\n        )}\n\n        {(resolvedTitle || subtitle || actions) && (\n          <div className=\"flex items-start justify-between gap-ds-05\">\n            <div className=\"flex flex-col gap-ds-02b\">\n              {resolvedTitle && (\n                <h1\n                  className={cn(\n                    'text-ds-2xl font-semibold text-surface-fg',\n                    titleClassName,\n                  )}\n                >\n                  {resolvedTitle}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"text-ds-md text-surface-fg-subtle\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n\n            {actions && (\n              <div className=\"flex shrink-0 items-center gap-ds-03\">{actions}</div>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"mappings":";;;;AAiBA,IAAM,IAAa,EAAM,YAErB,EAAE,UAAO,aAAU,YAAS,gBAAa,mBAAgB,cAAW,GAAG,KACvE,MACG;CACH,IAAM,IACJ,KAAS,IAAc,EAAY,SAAS,IAAI,SAAS;AAE3D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,0EACA,EACD;EACD,GAAI;YANN,CAQG,KAAe,EAAY,SAAS,KACnC,kBAAC,OAAD;GAAK,cAAW;GAAa,WAAU;aACpC,EAAY,KAAK,GAAO,MACvB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,gBAAe;IACf,eAAY;IACZ,WAAU;cAEV,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;IACtB,CAAA,EAEP,EAAM,OACL,kBAAC,KAAD;IACE,MAAM,EAAM;IACZ,WAAU;cAET,EAAM;IACL,CAAA,GAEJ,kBAAC,QAAD;IACE,WAAW,EACT,cACA,MAAU,EAAY,SAAS,IAC3B,oBACA,yBACL;cAEA,EAAM;IACF,CAAA,CAEM,EAAA,EApCI,EAoCJ,CACjB;GACE,CAAA,GAGN,KAAiB,KAAY,MAC7B,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,MAAD;KACE,WAAW,EACT,6CACA,EACD;eAEA;KACE,CAAA,EAEN,KACC,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CAEF;OAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAwC;IAAc,CAAA,CAEnE;KAEJ;;EAGX;AACD,EAAW,cAAc"}