@devalok/shilp-sutra 0.33.2 → 0.34.1

package/dist/shell/notification-center.js

@@ -1,264 +1,243 @@
 "use client";
-import { jsxs as a, jsx as e, Fragment as H } from "react/jsx-runtime";
-import * as $ from "react";
-import { useRef as B, useCallback as v } from "react";
-import { formatRelativeTime as G } from "../ui/lib/date-utils.js";
-import { Popover as X, PopoverTrigger as _, PopoverContent as q } from "../ui/popover.js";
-import { Tooltip as J, TooltipTrigger as L, TooltipContent as Q } from "../ui/tooltip.js";
-import { IconBell as U, IconChecks as V, IconInbox as W, IconX as Z } from "@tabler/icons-react";
-import { Icon as x } from "../ui/icon.js";
-import { cn as f } from "../ui/lib/utils.js";
-import { Spinner as ee } from "../ui/spinner.js";
-import { u as te, m as w } from "../_chunks/framer.js";
-function C(t, d) {
-  return t.getFullYear() === d.getFullYear() && t.getMonth() === d.getMonth() && t.getDate() === d.getDate();
+import { a as e, n as t } from "../_chunks/framer.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 { Tooltip as c, TooltipContent as l, TooltipTrigger as u } from "../ui/tooltip.js";
+import { formatRelativeTime as d } from "../ui/lib/date-utils.js";
+import * as f from "react";
+import { useCallback as p, useRef as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { IconBell as v, IconChecks as y, IconInbox as b, IconX as x } from "@tabler/icons-react";
+//#region src/shell/notification-center.tsx
+function S(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
-function se(t) {
-  const d = new Date(t), l = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
-  return n.setDate(l.getDate() - 1), C(d, l) ? "Today" : C(d, n) ? "Yesterday" : "Earlier";
+function C(e) {
+	let t = new Date(e), n = /* @__PURE__ */ new Date(), r = /* @__PURE__ */ new Date();
+	return r.setDate(n.getDate() - 1), S(t, n) ? "Today" : S(t, r) ? "Yesterday" : "Earlier";
 }
-const R = {
-  INFO: "bg-info-9",
-  IMPORTANT: "bg-warning-9",
-  CRITICAL: "bg-error-9"
+var w = {
+	INFO: "bg-info-9",
+	IMPORTANT: "bg-warning-9",
+	CRITICAL: "bg-error-9"
 };
-function re({
-  notification: t,
-  onRead: d,
-  onNavigate: l,
-  getRoute: n,
-  onDismiss: c
-}) {
-  const p = n(t), g = () => {
-    t.isRead || d(t.id), p && l(p);
-  };
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      onClick: g,
-      onKeyDown: (r) => {
-        (r.key === "Enter" || r.key === " ") && (r.preventDefault(), g());
-      },
-      className: f(
-        "group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors duration-fast-02 ease-productive-standard",
-        "hover:bg-surface-raised",
-        !t.isRead && "bg-accent-1"
-      ),
-      children: [
-        /* @__PURE__ */ e("div", { className: "mt-ds-02b flex shrink-0", children: /* @__PURE__ */ e(
-          "span",
-          {
-            className: f(
-              "h-[8px] w-[8px] rounded-ds-full transition-opacity duration-fast-02 ease-productive-standard",
-              R[t.tier] || R.INFO,
-              t.isRead ? "opacity-20" : "opacity-100"
-            )
-          }
-        ) }),
-        /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ e(
-            "p",
-            {
-              className: f(
-                "truncate text-ds-md text-surface-fg",
-                !t.isRead && "font-semibold"
-              ),
-              children: t.title
-            }
-          ),
-          t.body && /* @__PURE__ */ e("p", { className: "mt-ds-01 line-clamp-2 text-ds-sm text-surface-fg-subtle", children: t.body }),
-          /* @__PURE__ */ a("div", { className: "mt-ds-02 flex items-center gap-ds-03", children: [
-            /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: G(t.createdAt) }),
-            t.project && /* @__PURE__ */ a(H, { children: [
-              /* @__PURE__ */ e("span", { className: "text-surface-fg-subtle", children: "·" }),
-              /* @__PURE__ */ e("span", { className: "truncate text-ds-sm text-surface-fg-subtle", children: t.project.title })
-            ] })
-          ] }),
-          t.actions && t.actions.length > 0 && /* @__PURE__ */ e("div", { className: "mt-ds-03 flex items-center gap-ds-02", children: t.actions.map((r) => /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: (i) => {
-                i.stopPropagation(), r.onClick(t.id);
-              },
-              onKeyDown: (i) => i.stopPropagation(),
-              className: f(
-                "rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard",
-                r.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : r.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"
-              ),
-              children: r.label
-            },
-            r.label
-          )) })
-        ] }),
-        c && /* @__PURE__ */ e(
-          "button",
-          {
-            type: "button",
-            "aria-label": `Dismiss notification: ${t.title}`,
-            onClick: (r) => {
-              r.stopPropagation(), c(t.id);
-            },
-            onKeyDown: (r) => r.stopPropagation(),
-            className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex",
-            children: /* @__PURE__ */ e(x, { icon: Z, size: "sm" })
-          }
-        )
-      ]
-    }
-  );
+function T({ notification: e, onRead: t, onNavigate: r, getRoute: a, onDismiss: o }) {
+	let s = a(e), c = () => {
+		e.isRead || t(e.id), s && r(s);
+	};
+	return /* @__PURE__ */ _("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: c,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), c());
+		},
+		className: n("group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors duration-fast-02 ease-productive-standard", "hover:bg-surface-raised", !e.isRead && "bg-accent-1"),
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "mt-ds-02b flex shrink-0",
+				children: /* @__PURE__ */ g("span", { className: n("h-[8px] w-[8px] rounded-ds-full transition-opacity duration-fast-02 ease-productive-standard", w[e.tier] || w.INFO, e.isRead ? "opacity-20" : "opacity-100") })
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ g("p", {
+						className: n("truncate text-ds-md text-surface-fg", !e.isRead && "font-semibold"),
+						children: e.title
+					}),
+					e.body && /* @__PURE__ */ g("p", {
+						className: "mt-ds-01 line-clamp-2 text-ds-sm text-surface-fg-subtle",
+						children: e.body
+					}),
+					/* @__PURE__ */ _("div", {
+						className: "mt-ds-02 flex items-center gap-ds-03",
+						children: [/* @__PURE__ */ g("span", {
+							className: "text-ds-sm text-surface-fg-subtle",
+							children: d(e.createdAt)
+						}), e.project && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("span", {
+							className: "text-surface-fg-subtle",
+							children: "·"
+						}), /* @__PURE__ */ g("span", {
+							className: "truncate text-ds-sm text-surface-fg-subtle",
+							children: e.project.title
+						})] })]
+					}),
+					e.actions && e.actions.length > 0 && /* @__PURE__ */ g("div", {
+						className: "mt-ds-03 flex items-center gap-ds-02",
+						children: e.actions.map((t) => /* @__PURE__ */ g("button", {
+							type: "button",
+							onClick: (n) => {
+								n.stopPropagation(), t.onClick(e.id);
+							},
+							onKeyDown: (e) => e.stopPropagation(),
+							className: n("rounded-ds-md px-ds-03 py-ds-01 text-ds-sm font-medium transition-colors duration-fast-02 ease-productive-standard", t.variant === "primary" ? "bg-accent-9 text-accent-fg hover:bg-accent-10" : t.variant === "danger" ? "text-error-11 hover:bg-error-3" : "text-surface-fg-muted hover:bg-surface-raised-hover"),
+							children: t.label
+						}, t.label))
+					})
+				]
+			}),
+			o && /* @__PURE__ */ g("button", {
+				type: "button",
+				"aria-label": `Dismiss notification: ${e.title}`,
+				onClick: (t) => {
+					t.stopPropagation(), o(e.id);
+				},
+				onKeyDown: (e) => e.stopPropagation(),
+				className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-surface-fg-subtle transition-[color,background-color,opacity] duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted group-hover:flex group-focus-within:flex",
+				children: /* @__PURE__ */ g(i, {
+					icon: x,
+					size: "sm"
+				})
+			})
+		]
+	});
 }
-const ae = $.forwardRef(
-  ({
-    notifications: t = [],
-    unreadCount: d,
-    open: l,
-    onOpenChange: n,
-    isLoading: c = !1,
-    hasMore: p = !1,
-    onFetchMore: g,
-    onMarkRead: b,
-    onMarkAllRead: r,
-    onNavigate: i,
-    getNotificationRoute: D,
-    onDismiss: I,
-    headerActions: k,
-    emptyState: T,
-    footerSlot: y,
-    popoverClassName: j,
-    className: P,
-    ...O
-  }, z) => {
-    const N = B(null), h = te(), o = d ?? t.filter((s) => !s.isRead).length, K = D ?? (() => null), Y = v(
-      (s) => {
-        n?.(!1), i?.(s);
-      },
-      [i, n]
-    ), E = v(
-      (s) => {
-        b?.(s);
-      },
-      [b]
-    ), F = v(() => {
-      const s = N.current;
-      !s || c || !p || s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && g?.();
-    }, [c, p, g]), S = t.reduce(
-      (s, u) => {
-        const m = se(u.createdAt);
-        return s[m] || (s[m] = []), s[m].push(u), s;
-      },
-      {}
-    ), A = ["Today", "Yesterday", "Earlier"];
-    return /* @__PURE__ */ a(X, { open: l, onOpenChange: n, children: [
-      /* @__PURE__ */ a(J, { children: [
-        /* @__PURE__ */ e(L, { asChild: !0, children: /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ a(
-          "button",
-          {
-            ...O,
-            ref: z,
-            "aria-label": o > 0 ? `Notifications, ${o} unread` : "Notifications",
-            className: f(
-              "relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover",
-              P
-            ),
-            children: [
-              /* @__PURE__ */ e(x, { icon: U, size: "sm" }),
-              o > 0 && /* @__PURE__ */ e(
-                w.span,
-                {
-                  initial: { rotate: 0 },
-                  animate: h ? void 0 : { rotate: [0, -3, 3, -1, 1, 0] },
-                  transition: h ? { duration: 0 } : { duration: 0.4, ease: "easeInOut" },
-                  className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg",
-                  children: o > 99 ? "99+" : o
-                }
-              )
-            ]
-          }
-        ) }) }),
-        /* @__PURE__ */ e(Q, { side: "bottom", align: "center", children: "Notifications" })
-      ] }),
-      /* @__PURE__ */ a(
-        q,
-        {
-          className: f(
-            "w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
-            j
-          ),
-          sideOffset: 8,
-          align: "end",
-          children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
-                /* @__PURE__ */ e("h3", { className: "text-ds-md font-semibold text-surface-fg", children: "Notifications" }),
-                o > 0 && /* @__PURE__ */ e("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11", children: o })
-              ] }),
-              /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
-                o > 0 && r && /* @__PURE__ */ a(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: r,
-                    className: "flex items-center gap-ds-02 text-ds-sm text-surface-fg-subtle transition-colors hover:text-accent-11",
-                    children: [
-                      /* @__PURE__ */ e(x, { icon: V, size: "sm" }),
-                      "Mark all read"
-                    ]
-                  }
-                ),
-                k
-              ] })
-            ] }),
-            /* @__PURE__ */ a(
-              "div",
-              {
-                ref: N,
-                onScroll: F,
-                className: "max-h-[420px] overflow-y-auto",
-                children: [
-                  t.length === 0 ? T || /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center px-ds-05 py-ds-09", children: [
-                    /* @__PURE__ */ e("div", { className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised", children: /* @__PURE__ */ e(x, { icon: W, size: "lg", className: "text-surface-fg-subtle" }) }),
-                    /* @__PURE__ */ e("p", { className: "mt-ds-04 text-ds-md text-surface-fg-subtle", children: "No notifications yet" }),
-                    /* @__PURE__ */ e("p", { className: "mt-ds-02 text-ds-sm text-surface-fg-subtle", children: "You're all caught up!" })
-                  ] }) : A.map((s) => {
-                    const u = S[s];
-                    return !u || u.length === 0 ? null : /* @__PURE__ */ a("div", { children: [
-                      /* @__PURE__ */ e("div", { className: "sticky top-0 z-raised bg-surface-overlay px-ds-05 py-ds-02b", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-medium text-surface-fg-subtle", children: s }) }),
-                      u.map((m, M) => /* @__PURE__ */ e(
-                        w.div,
-                        {
-                          initial: h ? void 0 : { opacity: 0 },
-                          animate: { opacity: 1 },
-                          transition: h ? { duration: 0 } : { delay: M * 0.03 },
-                          children: /* @__PURE__ */ e(
-                            re,
-                            {
-                              notification: m,
-                              onRead: E,
-                              onNavigate: Y,
-                              getRoute: K,
-                              onDismiss: I
-                            }
-                          )
-                        },
-                        m.id
-                      ))
-                    ] }, s);
-                  }),
-                  c && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-ds-05", children: /* @__PURE__ */ e(ee, {}) })
-                ]
-              }
-            ),
-            y && /* @__PURE__ */ e("div", { className: "border-t border-surface-border-strong px-ds-05 py-ds-03", children: y })
-          ]
-        }
-      )
-    ] });
-  }
-);
-ae.displayName = "NotificationCenter";
-export {
-  ae as NotificationCenter
-};
+var E = f.forwardRef(({ notifications: d = [], unreadCount: f, open: h, onOpenChange: x, isLoading: S = !1, hasMore: w = !1, onFetchMore: E, onMarkRead: D, onMarkAllRead: O, onNavigate: k, getNotificationRoute: A, onDismiss: j, headerActions: M, emptyState: N, footerSlot: P, popoverClassName: F, className: I, ...L }, R) => {
+	let z = m(null), B = t(), V = f ?? d.filter((e) => !e.isRead).length, H = A ?? (() => null), U = p((e) => {
+		x?.(!1), k?.(e);
+	}, [k, x]), W = p((e) => {
+		D?.(e);
+	}, [D]), G = p(() => {
+		let e = z.current;
+		!e || S || !w || e.scrollTop + e.clientHeight >= e.scrollHeight - 50 && E?.();
+	}, [
+		S,
+		w,
+		E
+	]), K = d.reduce((e, t) => {
+		let n = C(t.createdAt);
+		return e[n] || (e[n] = []), e[n].push(t), e;
+	}, {}), q = [
+		"Today",
+		"Yesterday",
+		"Earlier"
+	];
+	return /* @__PURE__ */ _(s, {
+		open: h,
+		onOpenChange: x,
+		children: [/* @__PURE__ */ _(c, { children: [/* @__PURE__ */ g(u, {
+			asChild: !0,
+			children: /* @__PURE__ */ g(a, {
+				asChild: !0,
+				children: /* @__PURE__ */ _("button", {
+					...L,
+					ref: R,
+					"aria-label": V > 0 ? `Notifications, ${V} unread` : "Notifications",
+					className: n("relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised text-surface-fg-muted transition-colors ease-productive-standard hover:bg-surface-raised-hover", I),
+					children: [/* @__PURE__ */ g(i, {
+						icon: v,
+						size: "sm"
+					}), V > 0 && /* @__PURE__ */ g(e.span, {
+						initial: { rotate: 0 },
+						animate: B ? void 0 : { rotate: [
+							0,
+							-3,
+							3,
+							-1,
+							1,
+							0
+						] },
+						transition: B ? { duration: 0 } : {
+							duration: .4,
+							ease: "easeInOut"
+						},
+						className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-accent-9 px-ds-02 text-ds-xs font-semibold text-accent-fg",
+						children: V > 99 ? "99+" : V
+					})]
+				})
+			})
+		}), /* @__PURE__ */ g(l, {
+			side: "bottom",
+			align: "center",
+			children: "Notifications"
+		})] }), /* @__PURE__ */ _(o, {
+			className: n("w-[380px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating", F),
+			sideOffset: 8,
+			align: "end",
+			children: [
+				/* @__PURE__ */ _("div", {
+					className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04",
+					children: [/* @__PURE__ */ _("div", {
+						className: "flex items-center gap-ds-03",
+						children: [/* @__PURE__ */ g("h3", {
+							className: "text-ds-md font-semibold text-surface-fg",
+							children: "Notifications"
+						}), V > 0 && /* @__PURE__ */ g("span", {
+							className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-accent-2 px-ds-02b text-ds-sm font-semibold text-accent-11",
+							children: V
+						})]
+					}), /* @__PURE__ */ _("div", {
+						className: "flex items-center gap-ds-03",
+						children: [V > 0 && O && /* @__PURE__ */ _("button", {
+							type: "button",
+							onClick: O,
+							className: "flex items-center gap-ds-02 text-ds-sm text-surface-fg-subtle transition-colors hover:text-accent-11",
+							children: [/* @__PURE__ */ g(i, {
+								icon: y,
+								size: "sm"
+							}), "Mark all read"]
+						}), M]
+					})]
+				}),
+				/* @__PURE__ */ _("div", {
+					ref: z,
+					onScroll: G,
+					className: "max-h-[420px] overflow-y-auto",
+					children: [d.length === 0 ? N || /* @__PURE__ */ _("div", {
+						className: "flex flex-col items-center justify-center px-ds-05 py-ds-09",
+						children: [
+							/* @__PURE__ */ g("div", {
+								className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised",
+								children: /* @__PURE__ */ g(i, {
+									icon: b,
+									size: "lg",
+									className: "text-surface-fg-subtle"
+								})
+							}),
+							/* @__PURE__ */ g("p", {
+								className: "mt-ds-04 text-ds-md text-surface-fg-subtle",
+								children: "No notifications yet"
+							}),
+							/* @__PURE__ */ g("p", {
+								className: "mt-ds-02 text-ds-sm text-surface-fg-subtle",
+								children: "You're all caught up!"
+							})
+						]
+					}) : q.map((t) => {
+						let n = K[t];
+						return !n || n.length === 0 ? null : /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("div", {
+							className: "sticky top-0 z-raised bg-surface-overlay px-ds-05 py-ds-02b",
+							children: /* @__PURE__ */ g("span", {
+								className: "text-ds-sm font-medium text-surface-fg-subtle",
+								children: t
+							})
+						}), n.map((t, n) => /* @__PURE__ */ g(e.div, {
+							initial: B ? void 0 : { opacity: 0 },
+							animate: { opacity: 1 },
+							transition: B ? { duration: 0 } : { delay: n * .03 },
+							children: /* @__PURE__ */ g(T, {
+								notification: t,
+								onRead: W,
+								onNavigate: U,
+								getRoute: H,
+								onDismiss: j
+							})
+						}, t.id))] }, t);
+					}), S && /* @__PURE__ */ g("div", {
+						className: "flex items-center justify-center py-ds-05",
+						children: /* @__PURE__ */ g(r, {})
+					})]
+				}),
+				P && /* @__PURE__ */ g("div", {
+					className: "border-t border-surface-border-strong px-ds-05 py-ds-03",
+					children: P
+				})
+			]
+		})]
+	});
+});
+E.displayName = "NotificationCenter";
+//#endregion
+export { E as NotificationCenter };