@devalok/shilp-sutra 0.33.2 → 0.34.1

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

@@ -1,180 +1,182 @@
 "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-none"
-                }
-              ),
-              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",
+			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,
+				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/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 d } 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: d(
-          "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, n) => /* @__PURE__ */ l(o.Fragment, { children: [
-            n > 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-none focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
-                children: t.label
-              }
-            ) : /* @__PURE__ */ e(
-              "span",
-              {
-                className: d(
-                  "text-ds-sm",
-                  n === s.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"
-                ),
-                children: t.label
-              }
-            )
-          ] }, n)) }),
-          (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: d(
-                    "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 };