@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/composed/master-detail.js

@@ -1,164 +1,155 @@
 "use client";
-import { jsx as d, jsxs as D } from "react/jsx-runtime";
-import * as e from "react";
-import { IconArrowLeft as M } from "@tabler/icons-react";
-import { cn as b } from "../ui/lib/utils.js";
-import { Button as C } from "../ui/button.js";
-import { Icon as k } from "../ui/icon.js";
-import { springs as R } from "../ui/lib/motion.js";
-import { A as L, m as A } from "../_chunks/framer.js";
-const E = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px"
+import { a as e, c as t } from "../_chunks/framer.js";
+import { springs as n } from "../ui/lib/motion.js";
+import { cn as r } from "../ui/lib/utils.js";
+import { Icon as i } from "../ui/icon.js";
+import { Button as a } from "../ui/button.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { IconArrowLeft as l } from "@tabler/icons-react";
+//#region src/composed/master-detail.tsx
+var u = {
+	sm: "640px",
+	md: "768px",
+	lg: "1024px"
 };
-function N(o) {
-  const [i, c] = e.useState(!1);
-  return e.useEffect(() => {
-    if (typeof window > "u") return;
-    const s = window.matchMedia(o);
-    c(s.matches);
-    const t = (a) => c(a.matches);
-    return s.addEventListener("change", t), () => s.removeEventListener("change", t);
-  }, [o]), i;
+function d(e) {
+	let [t, n] = o.useState(!1);
+	return o.useEffect(() => {
+		if (typeof window > "u") return;
+		let t = window.matchMedia(e);
+		n(t.matches);
+		let r = (e) => n(e.matches);
+		return t.addEventListener("change", r), () => t.removeEventListener("change", r);
+	}, [e]), t;
 }
-const y = e.createContext({
-  selected: null,
-  isMobile: !1,
-  activeIndex: 0,
-  setActiveIndex: () => {
-  },
-  registerItemRef: () => {
-  },
-  itemCount: 0,
-  setItemCount: () => {
-  }
+var f = o.createContext({
+	selected: null,
+	isMobile: !1,
+	activeIndex: 0,
+	setActiveIndex: () => {},
+	registerItemRef: () => {},
+	itemCount: 0,
+	setItemCount: () => {}
 });
-function K({ children: o, className: i, ...c }) {
-  const { selected: s, isMobile: t, onNavigate: a, activeIndex: l, setActiveIndex: m, registerItemRef: u, setItemCount: x } = e.useContext(y), f = e.useRef([]), p = e.Children.count(o);
-  if (e.useEffect(() => {
-    x(p);
-  }, [p, x]), t && s) return null;
-  function h(n) {
-    if (n.key === "ArrowDown") {
-      n.preventDefault();
-      const r = Math.min(l + 1, p - 1);
-      m(r), f.current[r]?.focus(), a?.("down");
-    } else if (n.key === "ArrowUp") {
-      n.preventDefault();
-      const r = Math.max(l - 1, 0);
-      m(r), f.current[r]?.focus(), a?.("up");
-    } else if (n.key === "Home")
-      n.preventDefault(), m(0), f.current[0]?.focus();
-    else if (n.key === "End") {
-      n.preventDefault();
-      const r = p - 1;
-      m(r), f.current[r]?.focus();
-    }
-  }
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      role: "listbox",
-      tabIndex: -1,
-      className: b(
-        "overflow-y-auto focus-visible:outline-hidden",
-        !t && "border-r border-surface-border",
-        i
-      ),
-      onKeyDown: h,
-      ...c,
-      children: e.Children.map(o, (n, r) => e.isValidElement(n) ? e.cloneElement(n, {
-        ref: (v) => {
-          f.current[r] = v, u(r, v);
-        },
-        tabIndex: r === l ? 0 : -1
-      }) : n)
-    }
-  );
+function p({ children: e, className: t, ...n }) {
+	let { selected: i, isMobile: a, onNavigate: c, activeIndex: l, setActiveIndex: u, registerItemRef: d, setItemCount: p } = o.useContext(f), m = o.useRef([]), h = o.Children.count(e);
+	if (o.useEffect(() => {
+		p(h);
+	}, [h, p]), a && i) return null;
+	function g(e) {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			let t = Math.min(l + 1, h - 1);
+			u(t), m.current[t]?.focus(), c?.("down");
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			let t = Math.max(l - 1, 0);
+			u(t), m.current[t]?.focus(), c?.("up");
+		} else if (e.key === "Home") e.preventDefault(), u(0), m.current[0]?.focus();
+		else if (e.key === "End") {
+			e.preventDefault();
+			let t = h - 1;
+			u(t), m.current[t]?.focus();
+		}
+	}
+	return /* @__PURE__ */ s("div", {
+		role: "listbox",
+		tabIndex: -1,
+		className: r("overflow-y-auto focus-visible:outline-hidden", !a && "border-r border-surface-border", t),
+		onKeyDown: g,
+		...n,
+		children: o.Children.map(e, (e, t) => o.isValidElement(e) ? o.cloneElement(e, {
+			ref: (e) => {
+				m.current[t] = e, d(t, e);
+			},
+			tabIndex: t === l ? 0 : -1
+		}) : e)
+	});
 }
-function S({ children: o, className: i, ...c }) {
-  const { selected: s, isMobile: t, onBack: a, emptyState: l } = e.useContext(y);
-  return t && !s ? null : /* @__PURE__ */ D("div", { className: b("flex-1 overflow-y-auto", i), ...c, children: [
-    t && a && /* @__PURE__ */ d("div", { className: "border-b border-surface-border px-ds-04 py-ds-03", children: /* @__PURE__ */ d(C, { variant: "ghost", size: "xs", onClick: a, startIcon: /* @__PURE__ */ d(k, { icon: M }), children: "Back" }) }),
-    /* @__PURE__ */ d(L, { mode: "wait", children: /* @__PURE__ */ d(
-      A.div,
-      {
-        initial: t ? { x: 20, opacity: 0 } : !1,
-        animate: { x: 0, opacity: 1 },
-        exit: t ? { x: -20, opacity: 0 } : void 0,
-        transition: R.snappy,
-        children: s ? o : l ?? o
-      },
-      s ?? "empty"
-    ) })
-  ] });
+function m({ children: u, className: d, ...p }) {
+	let { selected: m, isMobile: h, onBack: g, emptyState: _ } = o.useContext(f);
+	return h && !m ? null : /* @__PURE__ */ c("div", {
+		className: r("flex-1 overflow-y-auto", d),
+		...p,
+		children: [h && g && /* @__PURE__ */ s("div", {
+			className: "border-b border-surface-border px-ds-04 py-ds-03",
+			children: /* @__PURE__ */ s(a, {
+				variant: "ghost",
+				size: "xs",
+				onClick: g,
+				startIcon: /* @__PURE__ */ s(i, { icon: l }),
+				children: "Back"
+			})
+		}), /* @__PURE__ */ s(t, {
+			mode: "wait",
+			children: /* @__PURE__ */ s(e.div, {
+				initial: h ? {
+					x: 20,
+					opacity: 0
+				} : !1,
+				animate: {
+					x: 0,
+					opacity: 1
+				},
+				exit: h ? {
+					x: -20,
+					opacity: 0
+				} : void 0,
+				transition: n.snappy,
+				children: m ? u : _ ?? u
+			}, m ?? "empty")
+		})]
+	});
 }
-const j = e.forwardRef(
-  function({ active: i = !1, children: c, className: s, onKeyDown: t, ...a }, l) {
-    function m(u) {
-      (u.key === "Enter" || u.key === " ") && (u.preventDefault(), u.target.click()), t?.(u);
-    }
-    return /* @__PURE__ */ d(
-      "button",
-      {
-        ref: l,
-        type: "button",
-        role: "option",
-        "aria-selected": i,
-        "data-active": i || void 0,
-        onKeyDown: m,
-        className: b(
-          "flex w-full items-center px-ds-04 py-ds-03 text-left text-ds-md font-sans text-surface-fg",
-          "transition-colors duration-fast-01 ease-productive-standard",
-          "hover:bg-surface-raised-hover",
-          "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset",
-          i && "bg-accent-2 text-accent-11 border-l-2 border-accent-9",
-          s
-        ),
-        ...a,
-        children: c
-      }
-    );
-  }
-);
-function B({
-  selected: o = null,
-  onBack: i,
-  masterWidth: c = "280px",
-  breakpoint: s = "md",
-  emptyState: t,
-  onNavigate: a,
-  children: l,
-  className: m,
-  style: u,
-  ...x
-}) {
-  const f = N(`(max-width: ${E[s]})`), [p, h] = e.useState(0), [n, r] = e.useState(0), v = e.useRef([]), I = e.useCallback((g, w) => {
-    v.current[g] = w;
-  }, []);
-  return /* @__PURE__ */ d(y.Provider, { value: { selected: o, isMobile: f, onBack: i, emptyState: t, onNavigate: a, activeIndex: p, setActiveIndex: h, registerItemRef: I, itemCount: n, setItemCount: r }, children: /* @__PURE__ */ d(
-    "div",
-    {
-      className: b(
-        "flex h-full",
-        !f && "grid",
-        m
-      ),
-      style: {
-        ...u,
-        ...f ? {} : { gridTemplateColumns: `${c} 1fr` }
-      },
-      ...x,
-      children: l
-    }
-  ) });
+var h = o.forwardRef(function({ active: e = !1, children: t, className: n, onKeyDown: i, ...a }, o) {
+	function c(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.target.click()), i?.(e);
+	}
+	return /* @__PURE__ */ s("button", {
+		ref: o,
+		type: "button",
+		role: "option",
+		"aria-selected": e,
+		"data-active": e || void 0,
+		onKeyDown: c,
+		className: r("flex w-full items-center px-ds-04 py-ds-03 text-left text-ds-md font-sans text-surface-fg", "transition-colors duration-fast-01 ease-productive-standard", "hover:bg-surface-raised-hover", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset", e && "bg-accent-2 text-accent-11 border-l-2 border-accent-9", n),
+		...a,
+		children: t
+	});
+});
+function g({ selected: e = null, onBack: t, masterWidth: n = "280px", breakpoint: i = "md", emptyState: a, onNavigate: c, children: l, className: p, style: m, ...h }) {
+	let g = d(`(max-width: ${u[i]})`), [_, v] = o.useState(0), [y, b] = o.useState(0), x = o.useRef([]), S = o.useCallback((e, t) => {
+		x.current[e] = t;
+	}, []);
+	return /* @__PURE__ */ s(f.Provider, {
+		value: {
+			selected: e,
+			isMobile: g,
+			onBack: t,
+			emptyState: a,
+			onNavigate: c,
+			activeIndex: _,
+			setActiveIndex: v,
+			registerItemRef: S,
+			itemCount: y,
+			setItemCount: b
+		},
+		children: /* @__PURE__ */ s("div", {
+			className: r("flex h-full", !g && "grid", p),
+			style: {
+				...m,
+				...g ? {} : { gridTemplateColumns: `${n} 1fr` }
+			},
+			...h,
+			children: l
+		})
+	});
 }
-const U = Object.assign(B, {
-  List: K,
-  Detail: S,
-  ListItem: j
+var _ = Object.assign(g, {
+	List: p,
+	Detail: m,
+	ListItem: h
 });
-export {
-  U as MasterDetail
-};
+//#endregion
+export { _ as MasterDetail };

package/dist/composed/master-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"master-detail.js","names":[],"sources":["../../src/composed/master-detail.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { IconArrowLeft } from '@tabler/icons-react'\nimport { cn } from '../ui/lib/utils'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\n\n// ============================================================\n// Types\n// ============================================================\n\n/**\n * A responsive master-detail layout. On desktop, shows a fixed-width list panel\n * alongside a detail panel. Below the breakpoint, switches to a stacked view\n * with animated transitions and a back button.\n */\nexport interface MasterDetailProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** ID of currently selected item. null = no selection (show list on mobile). */\n  selected?: string | null\n  /** Called when mobile back button is pressed. */\n  onBack?: () => void\n  /** Master panel width on desktop. @default '280px' */\n  masterWidth?: string\n  /** Breakpoint below which stacked mode activates. @default 'md' */\n  breakpoint?: 'sm' | 'md' | 'lg'\n  /** Content to show in the detail pane when nothing is selected. */\n  emptyState?: React.ReactNode\n  /** Called when user presses ArrowUp/ArrowDown while the list has focus. */\n  onNavigate?: (direction: 'up' | 'down') => void\n}\n\ninterface MasterDetailListProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ninterface MasterDetailDetailProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ninterface MasterDetailListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  active?: boolean\n}\n\n// ============================================================\n// Breakpoint values\n// ============================================================\n\nconst breakpoints: Record<string, string> = {\n  sm: '640px',\n  md: '768px',\n  lg: '1024px',\n}\n\nfunction useMediaQuery(query: string): boolean {\n  const [matches, setMatches] = React.useState(false)\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mql = window.matchMedia(query)\n    setMatches(mql.matches)\n    const handler = (e: MediaQueryListEvent) => setMatches(e.matches)\n    mql.addEventListener('change', handler)\n    return () => mql.removeEventListener('change', handler)\n  }, [query])\n\n  return matches\n}\n\n// ============================================================\n// Context\n// ============================================================\n\ninterface MasterDetailContextValue {\n  selected: string | null\n  isMobile: boolean\n  onBack?: () => void\n  emptyState?: React.ReactNode\n  onNavigate?: (direction: 'up' | 'down') => void\n  activeIndex: number\n  setActiveIndex: (index: number) => void\n  registerItemRef: (index: number, el: HTMLButtonElement | null) => void\n  itemCount: number\n  setItemCount: (count: number) => void\n}\n\nconst MasterDetailContext = React.createContext<MasterDetailContextValue>({\n  selected: null,\n  isMobile: false,\n  activeIndex: 0,\n  setActiveIndex: () => {},\n  registerItemRef: () => {},\n  itemCount: 0,\n  setItemCount: () => {},\n})\n\n// ============================================================\n// Compound Components\n// ============================================================\n\nfunction MasterDetailList({ children, className, ...props }: MasterDetailListProps) {\n  const { selected, isMobile, onNavigate, activeIndex, setActiveIndex, registerItemRef, setItemCount } = React.useContext(MasterDetailContext)\n  const itemRefsLocal = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  // Count children and register with context\n  const childCount = React.Children.count(children)\n  React.useEffect(() => {\n    setItemCount(childCount)\n  }, [childCount, setItemCount])\n\n  // On mobile, hide list when something is selected\n  if (isMobile && selected) return null\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const next = Math.min(activeIndex + 1, childCount - 1)\n      setActiveIndex(next)\n      itemRefsLocal.current[next]?.focus()\n      onNavigate?.('down')\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      const prev = Math.max(activeIndex - 1, 0)\n      setActiveIndex(prev)\n      itemRefsLocal.current[prev]?.focus()\n      onNavigate?.('up')\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      setActiveIndex(0)\n      itemRefsLocal.current[0]?.focus()\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      const last = childCount - 1\n      setActiveIndex(last)\n      itemRefsLocal.current[last]?.focus()\n    }\n  }\n\n  return (\n    <div\n      role=\"listbox\"\n      tabIndex={-1}\n      className={cn(\n        'overflow-y-auto focus-visible:outline-hidden',\n        !isMobile && 'border-r border-surface-border',\n        className,\n      )}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {React.Children.map(children, (child, i) => {\n        if (!React.isValidElement(child)) return child\n        return React.cloneElement(child as React.ReactElement<any>, {\n          ref: (el: HTMLButtonElement | null) => {\n            itemRefsLocal.current[i] = el\n            registerItemRef(i, el)\n          },\n          tabIndex: i === activeIndex ? 0 : -1,\n        })\n      })}\n    </div>\n  )\n}\n\nfunction MasterDetailDetail({ children, className, ...props }: MasterDetailDetailProps) {\n  const { selected, isMobile, onBack, emptyState } = React.useContext(MasterDetailContext)\n\n  // On mobile, hide detail when nothing selected\n  if (isMobile && !selected) return null\n\n  return (\n    <div className={cn('flex-1 overflow-y-auto', className)} {...props}>\n      {isMobile && onBack && (\n        <div className=\"border-b border-surface-border px-ds-04 py-ds-03\">\n          <Button variant=\"ghost\" size=\"xs\" onClick={onBack} startIcon={<Icon icon={IconArrowLeft} />}>\n            Back\n          </Button>\n        </div>\n      )}\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={selected ?? 'empty'}\n          initial={isMobile ? { x: 20, opacity: 0 } : false}\n          animate={{ x: 0, opacity: 1 }}\n          exit={isMobile ? { x: -20, opacity: 0 } : undefined}\n          transition={springs.snappy}\n        >\n          {selected ? children : (emptyState ?? children)}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nconst MasterDetailListItem = React.forwardRef<HTMLButtonElement, MasterDetailListItemProps>(\n  function MasterDetailListItem({ active = false, children, className, onKeyDown, ...props }, ref) {\n    function handleKeyDown(e: React.KeyboardEvent<HTMLButtonElement>) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ;(e.target as HTMLButtonElement).click()\n      }\n      onKeyDown?.(e)\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"option\"\n        aria-selected={active}\n        data-active={active || undefined}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'flex w-full items-center px-ds-04 py-ds-03 text-left text-ds-md font-sans text-surface-fg',\n          'transition-colors duration-fast-01 ease-productive-standard',\n          'hover:bg-surface-raised-hover',\n          'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-7 focus-visible:ring-inset',\n          active && 'bg-accent-2 text-accent-11 border-l-2 border-accent-9',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\n// ============================================================\n// MasterDetail Root\n// ============================================================\n\nfunction MasterDetailRoot({\n  selected = null,\n  onBack,\n  masterWidth = '280px',\n  breakpoint = 'md',\n  emptyState,\n  onNavigate,\n  children,\n  className,\n  style,\n  ...props\n}: MasterDetailProps) {\n  const isMobile = useMediaQuery(`(max-width: ${breakpoints[breakpoint]})`)\n  const [activeIndex, setActiveIndex] = React.useState(0)\n  const [itemCount, setItemCount] = React.useState(0)\n  const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  const registerItemRef = React.useCallback((index: number, el: HTMLButtonElement | null) => {\n    itemRefs.current[index] = el\n  }, [])\n\n  return (\n    <MasterDetailContext.Provider value={{ selected, isMobile, onBack, emptyState, onNavigate, activeIndex, setActiveIndex, registerItemRef, itemCount, setItemCount }}>\n      <div\n        className={cn(\n          'flex h-full',\n          !isMobile && 'grid',\n          className,\n        )}\n        style={{\n          ...style,\n          ...(isMobile ? {} : { gridTemplateColumns: `${masterWidth} 1fr` }),\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    </MasterDetailContext.Provider>\n  )\n}\n\nconst MasterDetail = Object.assign(MasterDetailRoot, {\n  List: MasterDetailList,\n  Detail: MasterDetailDetail,\n  ListItem: MasterDetailListItem,\n})\n\nexport { MasterDetail }\nexport type { MasterDetailListItemProps }\n"],"mappings":"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"}

package/dist/composed/member-picker.js

@@ -1,50 +1,47 @@
 "use client";
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import * as c from "react";
-import { Avatar as b, AvatarImage as v, AvatarFallback as N } from "../ui/avatar.js";
-import { MultiSelectPopover as M } from "./multi-select-popover.js";
-import { getInitials as P } from "./lib/string-utils.js";
-const k = c.forwardRef(
-  ({
-    members: l,
-    selectedIds: r,
-    onSelect: i,
-    children: n,
-    multiple: m = !1,
-    placeholder: d = "Search members...",
-    ...f
-  }, g) => {
-    const h = c.useMemo(
-      () => l.map((e) => ({ id: e.id, label: e.name, image: e.avatar })),
-      [l]
-    );
-    function u(e) {
-      const p = e.find((t) => !r.includes(t)), x = r.find((t) => !e.includes(t)), o = p ?? x;
-      o && i(o);
-    }
-    return /* @__PURE__ */ a(
-      M,
-      {
-        ref: g,
-        items: h,
-        value: r,
-        onValueChange: u,
-        searchPlaceholder: d,
-        maxSelections: m ? void 0 : 1,
-        renderItem: (e) => /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
-          /* @__PURE__ */ s(b, { className: "h-ico-md w-ico-md", children: [
-            e.image && /* @__PURE__ */ a(v, { src: e.image, alt: e.label }),
-            /* @__PURE__ */ a(N, { className: "bg-surface-raised-hover text-ds-xs font-semibold text-surface-fg", children: P(e.label) })
-          ] }),
-          /* @__PURE__ */ a("span", { className: "flex-1 truncate text-ds-md font-body text-surface-fg", children: e.label })
-        ] }),
-        ...f,
-        children: n
-      }
-    );
-  }
-);
-k.displayName = "MemberPicker";
-export {
-  k as MemberPicker
-};
+import { Avatar as e, AvatarFallback as t, AvatarImage as n } from "../ui/avatar.js";
+import { getInitials as r } from "./lib/string-utils.js";
+import { MultiSelectPopover as i } from "./multi-select-popover.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/composed/member-picker.tsx
+var c = a.forwardRef(({ members: c, selectedIds: l, onSelect: u, children: d, multiple: f = !1, placeholder: p = "Search members...", ...m }, h) => {
+	let g = a.useMemo(() => c.map((e) => ({
+		id: e.id,
+		label: e.name,
+		image: e.avatar
+	})), [c]);
+	function _(e) {
+		let t = e.find((e) => !l.includes(e)), n = l.find((t) => !e.includes(t)), r = t ?? n;
+		r && u(r);
+	}
+	return /* @__PURE__ */ o(i, {
+		ref: h,
+		items: g,
+		value: l,
+		onValueChange: _,
+		searchPlaceholder: p,
+		maxSelections: f ? void 0 : 1,
+		renderItem: (i) => /* @__PURE__ */ s("div", {
+			className: "flex items-center gap-ds-03",
+			children: [/* @__PURE__ */ s(e, {
+				className: "h-ico-md w-ico-md",
+				children: [i.image && /* @__PURE__ */ o(n, {
+					src: i.image,
+					alt: i.label
+				}), /* @__PURE__ */ o(t, {
+					className: "bg-surface-raised-hover text-ds-xs font-semibold text-surface-fg",
+					children: r(i.label)
+				})]
+			}), /* @__PURE__ */ o("span", {
+				className: "flex-1 truncate text-ds-md font-body text-surface-fg",
+				children: i.label
+			})]
+		}),
+		...m,
+		children: d
+	});
+});
+c.displayName = "MemberPicker";
+//#endregion
+export { c as MemberPicker };

package/dist/composed/member-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"member-picker.js","names":[],"sources":["../../src/composed/member-picker.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n} from '../ui/avatar'\nimport { MultiSelectPopover, type MultiSelectItem } from './multi-select-popover'\nimport { getInitials } from './lib/string-utils'\n\n// ============================================================\n// Types — backward-compatible with original MemberPicker\n// ============================================================\n\nexport interface MemberPickerMember {\n  id: string\n  name: string\n  avatar?: string\n}\n\nexport interface MemberPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  members: MemberPickerMember[]\n  selectedIds: string[]\n  onSelect: (memberId: string) => void\n  multiple?: boolean\n  placeholder?: string\n  children: React.ReactNode\n}\n\n// ============================================================\n// MemberPicker — thin wrapper around MultiSelectPopover\n// ============================================================\n\nconst MemberPicker = React.forwardRef<HTMLDivElement, MemberPickerProps>(\n  (\n    {\n      members,\n      selectedIds,\n      onSelect,\n      children,\n      multiple = false,\n      placeholder = 'Search members...',\n      ...props\n    },\n    ref,\n  ) => {\n    const items: MultiSelectItem[] = React.useMemo(\n      () => members.map((m) => ({ id: m.id, label: m.name, image: m.avatar })),\n      [members],\n    )\n\n    function handleChange(ids: string[]) {\n      // Find the toggled id\n      const added = ids.find((id) => !selectedIds.includes(id))\n      const removed = selectedIds.find((id) => !ids.includes(id))\n      const toggled = added ?? removed\n      if (toggled) onSelect(toggled)\n    }\n\n    return (\n      <MultiSelectPopover\n        ref={ref}\n        items={items}\n        value={selectedIds}\n        onValueChange={handleChange}\n        searchPlaceholder={placeholder}\n        maxSelections={multiple ? undefined : 1}\n        renderItem={(item) => (\n          <div className=\"flex items-center gap-ds-03\">\n            <Avatar className=\"h-ico-md w-ico-md\">\n              {item.image && <AvatarImage src={item.image} alt={item.label} />}\n              <AvatarFallback className=\"bg-surface-raised-hover text-ds-xs font-semibold text-surface-fg\">\n                {getInitials(item.label)}\n              </AvatarFallback>\n            </Avatar>\n            <span className=\"flex-1 truncate text-ds-md font-body text-surface-fg\">\n              {item.label}\n            </span>\n          </div>\n        )}\n        {...props}\n      >\n        {children}\n      </MultiSelectPopover>\n    )\n  },\n)\n\nMemberPicker.displayName = 'MemberPicker'\n\nexport { MemberPicker }\n"],"mappings":";;;;;;;AAkCA,IAAM,IAAe,EAAM,YAEvB,EACE,YACA,gBACA,aACA,aACA,cAAW,IACX,iBAAc,qBACd,GAAG,KAEL,MACG;CACH,IAAM,IAA2B,EAAM,cAC/B,EAAQ,KAAK,OAAO;EAAE,IAAI,EAAE;EAAI,OAAO,EAAE;EAAM,OAAO,EAAE;EAAQ,EAAE,EACxE,CAAC,EAAQ,CACV;CAED,SAAS,EAAa,GAAe;EAEnC,IAAM,IAAQ,EAAI,MAAM,MAAO,CAAC,EAAY,SAAS,EAAG,CAAC,EACnD,IAAU,EAAY,MAAM,MAAO,CAAC,EAAI,SAAS,EAAG,CAAC,EACrD,IAAU,KAAS;AACzB,EAAI,KAAS,EAAS,EAAQ;;AAGhC,QACE,kBAAC,GAAD;EACO;EACE;EACP,OAAO;EACP,eAAe;EACf,mBAAmB;EACnB,eAAe,IAAW,KAAA,IAAY;EACtC,aAAa,MACX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAQ,WAAU;cAAlB,CACG,EAAK,SAAS,kBAAC,GAAD;KAAa,KAAK,EAAK;KAAO,KAAK,EAAK;KAAS,CAAA,EAChE,kBAAC,GAAD;KAAgB,WAAU;eACvB,EAAY,EAAK,MAAM;KACT,CAAA,CACV;OACT,kBAAC,QAAD;IAAM,WAAU;cACb,EAAK;IACD,CAAA,CACH;;EAER,GAAI;EAEH;EACkB,CAAA;EAG1B;AAED,EAAa,cAAc"}

package/dist/composed/multi-select-popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select-popover.d.ts","sourceRoot":"","sources":["../../src/composed/multi-select-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiB9B,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACtG,8DAA8D;IAC9D,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;IACzB,yCAAyC;IACzC,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC3B,kCAAkC;IAClC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,oCAAoC;IACpC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,2BAA2B;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,eAAe,EAAE,CAAC,CAAA;IACxD,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1E,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAMD,QAAA,MAAM,kBAAkB,gGA6OvB,CAAA;AAGD,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"multi-select-popover.d.ts","sourceRoot":"","sources":["../../src/composed/multi-select-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiB9B,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACtG,8DAA8D;IAC9D,KAAK,CAAC,EAAE,eAAe,EAAE,CAAA;IACzB,yCAAyC;IACzC,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC3B,kCAAkC;IAClC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,oCAAoC;IACpC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACtC,2BAA2B;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,eAAe,EAAE,CAAC,CAAA;IACxD,mDAAmD;IACnD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1E,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAMD,QAAA,MAAM,kBAAkB,gGA+OvB,CAAA;AAGD,OAAO,EAAE,kBAAkB,EAAE,CAAA"}