@devalok/shilp-sutra 0.33.2 → 0.34.1

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(s) {
-  const [i, c] = e.useState(!1);
-  return e.useEffect(() => {
-    if (typeof window > "u") return;
-    const r = window.matchMedia(s);
-    c(r.matches);
-    const t = (a) => c(a.matches);
-    return r.addEventListener("change", t), () => r.removeEventListener("change", t);
-  }, [s]), 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: s, className: i, ...c }) {
-  const { selected: r, isMobile: t, onNavigate: a, activeIndex: l, setActiveIndex: m, registerItemRef: u, setItemCount: x } = e.useContext(y), f = e.useRef([]), p = e.Children.count(s);
-  if (e.useEffect(() => {
-    x(p);
-  }, [p, x]), t && r) return null;
-  function h(n) {
-    if (n.key === "ArrowDown") {
-      n.preventDefault();
-      const o = Math.min(l + 1, p - 1);
-      m(o), f.current[o]?.focus(), a?.("down");
-    } else if (n.key === "ArrowUp") {
-      n.preventDefault();
-      const o = Math.max(l - 1, 0);
-      m(o), f.current[o]?.focus(), a?.("up");
-    } else if (n.key === "Home")
-      n.preventDefault(), m(0), f.current[0]?.focus();
-    else if (n.key === "End") {
-      n.preventDefault();
-      const o = p - 1;
-      m(o), f.current[o]?.focus();
-    }
-  }
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      role: "listbox",
-      tabIndex: -1,
-      className: b(
-        "overflow-y-auto focus-visible:outline-none",
-        !t && "border-r border-surface-border",
-        i
-      ),
-      onKeyDown: h,
-      ...c,
-      children: e.Children.map(s, (n, o) => e.isValidElement(n) ? e.cloneElement(n, {
-        ref: (v) => {
-          f.current[o] = v, u(o, v);
-        },
-        tabIndex: o === 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: s, className: i, ...c }) {
-  const { selected: r, isMobile: t, onBack: a, emptyState: l } = e.useContext(y);
-  return t && !r ? 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: r ? s : l ?? s
-      },
-      r ?? "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: r, 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-none 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",
-          r
-        ),
-        ...a,
-        children: c
-      }
-    );
-  }
-);
-function B({
-  selected: s = null,
-  onBack: i,
-  masterWidth: c = "280px",
-  breakpoint: r = "md",
-  emptyState: t,
-  onNavigate: a,
-  children: l,
-  className: m,
-  style: u,
-  ...x
-}) {
-  const f = N(`(max-width: ${E[r]})`), [p, h] = e.useState(0), [n, o] = e.useState(0), v = e.useRef([]), I = e.useCallback((g, w) => {
-    v.current[g] = w;
-  }, []);
-  return /* @__PURE__ */ d(y.Provider, { value: { selected: s, isMobile: f, onBack: i, emptyState: t, onNavigate: a, activeIndex: p, setActiveIndex: h, registerItemRef: I, itemCount: n, setItemCount: o }, 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/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 };