@devalok/shilp-sutra 0.6.2 → 0.8.0

package/dist/shell/notification-center.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsxs as s, jsx as t, Fragment as S } from "react/jsx-runtime";
-import * as $ from "react";
-import { useRef as k, useCallback as f } from "react";
-import { Popover as P, PopoverTrigger as Y, PopoverContent as _ } from "../ui/popover.js";
-import { Tooltip as Q, TooltipTrigger as U, TooltipContent as B } from "../ui/tooltip.js";
-import { IconBell as G, IconChecks as H, IconInbox as K } from "@tabler/icons-react";
+import { jsxs as r, jsx as t, Fragment as S } from "react/jsx-runtime";
+import * as H from "react";
+import { useRef as z, useCallback as b } from "react";
+import { Popover as B, PopoverTrigger as G, PopoverContent as L } from "../ui/popover.js";
+import { Tooltip as O, TooltipTrigger as X, TooltipContent as _ } from "../ui/tooltip.js";
+import { IconBell as q, IconChecks as F, IconInbox as J, IconX as Q } from "@tabler/icons-react";
 import { cn as x } from "../ui/lib/utils.js";
-function L(e) {
-  const l = Date.now(), a = new Date(e).getTime(), d = l - a, c = Math.floor(d / 1e3), i = Math.floor(c / 60), n = Math.floor(i / 60), m = Math.floor(n / 24);
-  return c < 60 ? "just now" : i < 60 ? `${i}m ago` : n < 24 ? `${n}h ago` : m < 7 ? `${m}d ago` : new Date(e).toLocaleDateString(void 0, {
+function U(e) {
+  const l = Date.now(), i = new Date(e).getTime(), d = l - i, c = Math.floor(d / 1e3), n = Math.floor(c / 60), a = Math.floor(n / 60), m = Math.floor(a / 24);
+  return c < 60 ? "just now" : n < 60 ? `${n}m ago` : a < 24 ? `${a}h ago` : m < 7 ? `${m}d ago` : new Date(e).toLocaleDateString(void 0, {
     day: "numeric",
     month: "short"
   });
@@ -16,50 +16,36 @@ function L(e) {
 function N(e, l) {
   return e.getFullYear() === l.getFullYear() && e.getMonth() === l.getMonth() && e.getDate() === l.getDate();
 }
-function O(e) {
-  const l = new Date(e), a = /* @__PURE__ */ new Date(), d = /* @__PURE__ */ new Date();
-  return d.setDate(a.getDate() - 1), N(l, a) ? "Today" : N(l, d) ? "Yesterday" : "Earlier";
+function V(e) {
+  const l = new Date(e), i = /* @__PURE__ */ new Date(), d = /* @__PURE__ */ new Date();
+  return d.setDate(i.getDate() - 1), N(l, i) ? "Today" : N(l, d) ? "Yesterday" : "Earlier";
 }
-const g = {
+const v = {
   INFO: "bg-info",
   IMPORTANT: "bg-warning",
   CRITICAL: "bg-error"
 };
-function q(e) {
-  if (!e.entityType) return null;
-  switch (e.entityType) {
-    case "TASK":
-      return e.projectId ? `/projects/${e.projectId}/board` : null;
-    case "BREAK_REQUEST":
-      return "/breaks";
-    case "ATTENDANCE":
-      return "/attendance";
-    case "CLIENT_REQUEST":
-      return e.projectId ? `/projects/${e.projectId}/requests` : null;
-    case "REVIEW_REQUEST":
-      return e.projectId ? `/projects/${e.projectId}/board` : null;
-    case "PROJECT":
-      return e.projectId ? `/projects/${e.projectId}/board` : "/projects";
-    default:
-      return null;
-  }
-}
-function z({
+function W({
   notification: e,
   onRead: l,
-  onNavigate: a,
-  getRoute: d
+  onNavigate: i,
+  getRoute: d,
+  onDismiss: c
 }) {
-  const c = d(e);
-  return /* @__PURE__ */ s(
-    "button",
+  const n = d(e), a = () => {
+    e.isRead || l(e.id), n && i(n);
+  };
+  return /* @__PURE__ */ r(
+    "div",
     {
-      type: "button",
-      onClick: () => {
-        e.isRead || l(e.id), c && a(c);
+      role: "button",
+      tabIndex: 0,
+      onClick: a,
+      onKeyDown: (o) => {
+        (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a());
       },
       className: x(
-        "flex w-full items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors",
+        "group relative flex w-full cursor-pointer items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors",
         "hover:bg-layer-02",
         !e.isRead && "bg-interactive/[0.03]"
       ),
@@ -69,12 +55,12 @@ function z({
           {
             className: x(
               "h-[8px] w-[8px] rounded-ds-full",
-              g[e.tier] || g.INFO,
+              v[e.tier] || v.INFO,
               e.isRead && "opacity-[0.38]"
             )
           }
         ) }),
-        /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ t(
             "p",
             {
@@ -86,138 +72,164 @@ function z({
             }
           ),
           e.body && /* @__PURE__ */ t("p", { className: "mt-ds-01 line-clamp-2 text-ds-sm text-text-placeholder", children: e.body }),
-          /* @__PURE__ */ s("div", { className: "mt-ds-02 flex items-center gap-ds-03", children: [
-            /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-placeholder", children: L(e.createdAt) }),
-            e.project && /* @__PURE__ */ s(S, { children: [
+          /* @__PURE__ */ r("div", { className: "mt-ds-02 flex items-center gap-ds-03", children: [
+            /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-placeholder", children: U(e.createdAt) }),
+            e.project && /* @__PURE__ */ r(S, { children: [
               /* @__PURE__ */ t("span", { className: "text-text-placeholder", children: "·" }),
               /* @__PURE__ */ t("span", { className: "truncate text-ds-sm text-text-placeholder", children: e.project.title })
             ] })
           ] })
         ] }),
-        !e.isRead && /* @__PURE__ */ t("div", { className: "mt-ds-02b shrink-0", children: /* @__PURE__ */ t("span", { className: "block h-[8px] w-[8px] rounded-ds-full bg-interactive" }) })
+        !e.isRead && /* @__PURE__ */ t("div", { className: "mt-ds-02b shrink-0", children: /* @__PURE__ */ t("span", { className: "block h-[8px] w-[8px] rounded-ds-full bg-interactive" }) }),
+        c && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Dismiss notification: ${e.title}`,
+            onClick: (o) => {
+              o.stopPropagation(), c(e.id);
+            },
+            onKeyDown: (o) => o.stopPropagation(),
+            className: "absolute right-ds-03 top-ds-03 hidden rounded-ds-sm p-ds-01 text-text-placeholder hover:bg-layer-03 hover:text-text-secondary group-hover:flex group-focus-within:flex",
+            children: /* @__PURE__ */ t(Q, { className: "h-ico-sm w-ico-sm" })
+          }
+        )
       ]
     }
   );
 }
-const J = $.forwardRef(
+const Z = H.forwardRef(
   ({
     notifications: e = [],
     unreadCount: l,
-    open: a,
+    open: i,
     onOpenChange: d,
     isLoading: c = !1,
-    hasMore: i = !1,
-    onFetchMore: n,
+    hasMore: n = !1,
+    onFetchMore: a,
     onMarkRead: m,
-    onMarkAllRead: b,
-    onNavigate: h,
+    onMarkAllRead: o,
+    onNavigate: f,
     getNotificationRoute: w,
-    className: v,
-    ...j
-  }, T) => {
-    const y = k(null), o = l ?? e.filter((r) => !r.isRead).length, I = w ?? q, R = f(
-      (r) => {
-        d == null || d(!1), h == null || h(r);
+    onDismiss: D,
+    headerActions: I,
+    emptyState: T,
+    footerSlot: g,
+    popoverClassName: j,
+    className: C,
+    ...R
+  }, k) => {
+    const y = z(null), u = l ?? e.filter((s) => !s.isRead).length, P = w ?? (() => null), Y = b(
+      (s) => {
+        d == null || d(!1), f == null || f(s);
       },
-      [h, d]
-    ), E = f(
-      (r) => {
-        m == null || m(r);
+      [f, d]
+    ), $ = b(
+      (s) => {
+        m == null || m(s);
       },
       [m]
-    ), C = f(() => {
-      const r = y.current;
-      !r || c || !i || r.scrollTop + r.clientHeight >= r.scrollHeight - 50 && (n == null || n());
-    }, [c, i, n]), D = e.reduce(
-      (r, u) => {
-        const p = O(u.createdAt);
-        return r[p] || (r[p] = []), r[p].push(u), r;
+    ), A = b(() => {
+      const s = y.current;
+      !s || c || !n || s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && (a == null || a());
+    }, [c, n, a]), E = e.reduce(
+      (s, h) => {
+        const p = V(h.createdAt);
+        return s[p] || (s[p] = []), s[p].push(h), s;
       },
       {}
-    ), A = ["Today", "Yesterday", "Earlier"];
-    return /* @__PURE__ */ s(P, { open: a, onOpenChange: d, children: [
-      /* @__PURE__ */ s(Q, { children: [
-        /* @__PURE__ */ t(U, { asChild: !0, children: /* @__PURE__ */ t(Y, { asChild: !0, children: /* @__PURE__ */ s(
+    ), K = ["Today", "Yesterday", "Earlier"];
+    return /* @__PURE__ */ r(B, { open: i, onOpenChange: d, children: [
+      /* @__PURE__ */ r(O, { children: [
+        /* @__PURE__ */ t(X, { asChild: !0, children: /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ r(
           "button",
           {
-            ...j,
-            ref: T,
-            "aria-label": o > 0 ? `Notifications, ${o} unread` : "Notifications",
+            ...R,
+            ref: k,
+            "aria-label": u > 0 ? `Notifications, ${u} unread` : "Notifications",
             className: x(
               "relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-border bg-layer-02 text-text-secondary transition-colors hover:bg-layer-03",
-              v
+              C
             ),
             children: [
-              /* @__PURE__ */ t(G, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" }),
-              o > 0 && /* @__PURE__ */ t("span", { className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-interactive px-ds-02 text-ds-xs font-semibold text-text-on-color", children: o > 99 ? "99+" : o })
+              /* @__PURE__ */ t(q, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" }),
+              u > 0 && /* @__PURE__ */ t("span", { className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-interactive px-ds-02 text-ds-xs font-semibold text-text-on-color", children: u > 99 ? "99+" : u })
             ]
           }
         ) }) }),
-        /* @__PURE__ */ t(B, { side: "bottom", align: "center", children: "Notifications" })
+        /* @__PURE__ */ t(_, { side: "bottom", align: "center", children: "Notifications" })
       ] }),
-      /* @__PURE__ */ s(
-        _,
+      /* @__PURE__ */ r(
+        L,
         {
-          className: "w-[380px] rounded-ds-xl border border-border bg-layer-01 p-0 shadow-03",
+          className: x(
+            "w-[380px] rounded-ds-xl border border-border bg-layer-01 p-0 shadow-03",
+            j
+          ),
           sideOffset: 8,
           align: "end",
           children: [
-            /* @__PURE__ */ s("div", { className: "flex items-center justify-between border-b border-border px-ds-05 py-ds-04", children: [
-              /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+            /* @__PURE__ */ r("div", { className: "flex items-center justify-between border-b border-border px-ds-05 py-ds-04", children: [
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03", children: [
                 /* @__PURE__ */ t("h3", { className: "text-ds-md font-semibold text-text-primary", children: "Notifications" }),
-                o > 0 && /* @__PURE__ */ t("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-interactive/10 px-ds-02b text-ds-sm font-semibold text-interactive", children: o })
+                u > 0 && /* @__PURE__ */ t("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-interactive/10 px-ds-02b text-ds-sm font-semibold text-interactive", children: u })
               ] }),
-              o > 0 && b && /* @__PURE__ */ s(
-                "button",
-                {
-                  type: "button",
-                  onClick: b,
-                  className: "flex items-center gap-ds-02 text-ds-sm text-text-placeholder transition-colors hover:text-interactive",
-                  children: [
-                    /* @__PURE__ */ t(H, { className: "h-ico-sm w-ico-sm" }),
-                    "Mark all read"
-                  ]
-                }
-              )
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03", children: [
+                u > 0 && o && /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: o,
+                    className: "flex items-center gap-ds-02 text-ds-sm text-text-placeholder transition-colors hover:text-interactive",
+                    children: [
+                      /* @__PURE__ */ t(F, { className: "h-ico-sm w-ico-sm" }),
+                      "Mark all read"
+                    ]
+                  }
+                ),
+                I
+              ] })
             ] }),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ r(
               "div",
               {
                 ref: y,
-                onScroll: C,
+                onScroll: A,
                 className: "max-h-[420px] overflow-y-auto",
                 children: [
-                  e.length === 0 ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center px-ds-05 py-ds-09", children: [
-                    /* @__PURE__ */ t("div", { className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-layer-02", children: /* @__PURE__ */ t(K, { className: "h-ico-lg w-ico-lg text-text-placeholder" }) }),
+                  e.length === 0 ? T || /* @__PURE__ */ r("div", { className: "flex flex-col items-center justify-center px-ds-05 py-ds-09", children: [
+                    /* @__PURE__ */ t("div", { className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-layer-02", children: /* @__PURE__ */ t(J, { className: "h-ico-lg w-ico-lg text-text-placeholder" }) }),
                     /* @__PURE__ */ t("p", { className: "mt-ds-04 text-ds-md text-text-placeholder", children: "No notifications yet" }),
                     /* @__PURE__ */ t("p", { className: "mt-ds-02 text-ds-sm text-text-placeholder", children: "You're all caught up!" })
-                  ] }) : A.map((r) => {
-                    const u = D[r];
-                    return !u || u.length === 0 ? null : /* @__PURE__ */ s("div", { children: [
-                      /* @__PURE__ */ t("div", { className: "sticky top-0 z-raised bg-layer-01 px-ds-05 py-ds-02b", children: /* @__PURE__ */ t("span", { className: "text-ds-sm font-medium text-text-placeholder", children: r }) }),
-                      u.map((p) => /* @__PURE__ */ t(
-                        z,
+                  ] }) : K.map((s) => {
+                    const h = E[s];
+                    return !h || h.length === 0 ? null : /* @__PURE__ */ r("div", { children: [
+                      /* @__PURE__ */ t("div", { className: "sticky top-0 z-raised bg-layer-01 px-ds-05 py-ds-02b", children: /* @__PURE__ */ t("span", { className: "text-ds-sm font-medium text-text-placeholder", children: s }) }),
+                      h.map((p) => /* @__PURE__ */ t(
+                        W,
                         {
                           notification: p,
-                          onRead: E,
-                          onNavigate: R,
-                          getRoute: I
+                          onRead: $,
+                          onNavigate: Y,
+                          getRoute: P,
+                          onDismiss: D
                         },
                         p.id
                       ))
-                    ] }, r);
+                    ] }, s);
                   }),
                   c && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-ds-05", children: /* @__PURE__ */ t("div", { className: "h-ico-md w-ico-md animate-spin rounded-ds-full border-2 border-border border-t-interactive" }) })
                 ]
               }
-            )
+            ),
+            g && /* @__PURE__ */ t("div", { className: "border-t border-border px-ds-05 py-ds-03", children: g })
           ]
         }
       )
     ] });
   }
 );
-J.displayName = "NotificationCenter";
+Z.displayName = "NotificationCenter";
 export {
-  J as NotificationCenter
+  Z as NotificationCenter
 };

package/dist/shell/top-bar.d.ts

@@ -9,6 +9,24 @@ export interface TopBarUser {
     email?: string;
     image?: string | null;
 }
+export interface UserMenuItem {
+    /** Display label */
+    label: string;
+    /** Optional icon (ReactNode) */
+    icon?: React.ReactNode;
+    /** Navigate via onNavigate when clicked */
+    href?: string;
+    /** Custom click handler */
+    onClick?: () => void;
+    /** Render a separator before this item */
+    separator?: boolean;
+    /** Text color semantic token (e.g. "error") — maps to text-{color} */
+    color?: string;
+    /** Badge content — string for count, true for dot indicator */
+    badge?: string | boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
 export interface TopBarProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Page title displayed on desktop */
     pageTitle?: string;
@@ -26,6 +44,8 @@ export interface TopBarProps extends React.HTMLAttributes<HTMLDivElement> {
     mobileLogo?: React.ReactNode;
     /** Notification center slot -- render your NotificationCenter here */
     notificationSlot?: React.ReactNode;
+    /** Custom menu items rendered between Profile and Dark/Light Mode */
+    userMenuItems?: UserMenuItem[];
     /** Additional className */
     className?: string;
 }

package/dist/shell/top-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../src/shell/top-bar.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,mCAAmC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD,QAAA,MAAM,MAAM,oFAyLX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../src/shell/top-bar.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,mCAAmC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,qEAAqE;IACrE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD,QAAA,MAAM,MAAM,oFAwOX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/shell/top-bar.js

@@ -1,29 +1,30 @@
 "use client";
-import { jsxs as r, jsx as e, Fragment as w } from "react/jsx-runtime";
-import * as C from "react";
-import { useColorMode as k } from "../hooks/use-color-mode.js";
-import { Avatar as M, AvatarImage as v, AvatarFallback as I } from "../ui/avatar.js";
-import { DropdownMenu as S, DropdownMenuTrigger as T, DropdownMenuContent as D, DropdownMenuItem as d, DropdownMenuSeparator as A } from "../ui/dropdown-menu.js";
-import { Tooltip as l, TooltipTrigger as o, TooltipContent as a } from "../ui/tooltip.js";
-import { SidebarTrigger as j } from "../ui/sidebar.js";
-import { IconSearch as K, IconSparkles as U, IconUser as B, IconSun as E, IconMoon as F, IconLogout as R } from "@tabler/icons-react";
-import { cn as z } from "../ui/lib/utils.js";
-const L = C.forwardRef(
+import { jsxs as s, jsx as e, Fragment as I } from "react/jsx-runtime";
+import * as g from "react";
+import { useColorMode as j } from "../hooks/use-color-mode.js";
+import { Avatar as A, AvatarImage as K, AvatarFallback as F } from "../ui/avatar.js";
+import { DropdownMenu as U, DropdownMenuTrigger as B, DropdownMenuContent as E, DropdownMenuItem as d, DropdownMenuSeparator as w } from "../ui/dropdown-menu.js";
+import { Tooltip as c, TooltipTrigger as n, TooltipContent as i } from "../ui/tooltip.js";
+import { SidebarTrigger as R } from "../ui/sidebar.js";
+import { IconSearch as z, IconSparkles as L, IconUser as O, IconSun as P, IconMoon as q, IconLogout as G } from "@tabler/icons-react";
+import { cn as o } from "../ui/lib/utils.js";
+const H = g.forwardRef(
   ({
-    pageTitle: c = "",
-    user: t,
-    onNavigate: s,
-    onLogout: n,
-    onSearchClick: i,
-    onAiChatClick: m,
-    mobileLogo: p,
-    notificationSlot: b,
-    className: u,
-    ...y
-  }, f) => {
-    var x;
-    const { colorMode: h, toggleColorMode: g } = k(), N = () => {
-      i ? i() : document.dispatchEvent(
+    pageTitle: m = "",
+    user: l,
+    onNavigate: t,
+    onLogout: p,
+    onSearchClick: h,
+    onAiChatClick: x,
+    mobileLogo: b,
+    notificationSlot: N,
+    userMenuItems: a,
+    className: C,
+    ...k
+  }, v) => {
+    var u;
+    const { colorMode: f, toggleColorMode: M } = j(), S = () => {
+      h ? h() : document.dispatchEvent(
         new KeyboardEvent("keydown", {
           key: "k",
           ctrlKey: !0,
@@ -31,99 +32,128 @@ const L = C.forwardRef(
         })
       );
     };
-    return /* @__PURE__ */ r(
+    return /* @__PURE__ */ s(
       "div",
       {
-        ...y,
-        ref: f,
-        className: z(
+        ...k,
+        ref: v,
+        className: o(
           "z-sticky flex w-full items-center border-b border-border bg-layer-01 px-ds-05 py-ds-04 md:px-ds-06",
-          u
+          C
         ),
         children: [
-          /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-04", children: [
-            /* @__PURE__ */ e(j, { className: "hidden text-text-secondary md:flex" }),
-            p && /* @__PURE__ */ e("div", { className: "md:hidden", children: p }),
-            c && /* @__PURE__ */ e("h2", { className: "hidden text-ds-lg text-text-primary md:block", children: c })
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+            /* @__PURE__ */ e(R, { className: "hidden text-text-secondary md:flex" }),
+            b && /* @__PURE__ */ e("div", { className: "md:hidden", children: b }),
+            m && /* @__PURE__ */ e("h2", { className: "hidden text-ds-lg text-text-primary md:block", children: m })
           ] }),
-          /* @__PURE__ */ r("div", { className: "ml-auto flex items-center gap-ds-03 md:gap-ds-05", children: [
-            /* @__PURE__ */ r(l, { children: [
-              /* @__PURE__ */ e(o, { asChild: !0, children: /* @__PURE__ */ e(
+          /* @__PURE__ */ s("div", { className: "ml-auto flex items-center gap-ds-03 md:gap-ds-05", children: [
+            /* @__PURE__ */ s(c, { children: [
+              /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: N,
+                  onClick: S,
                   "aria-label": "Search (Ctrl+K)",
                   className: "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-border bg-layer-02 text-text-secondary transition-colors hover:bg-layer-03",
-                  children: /* @__PURE__ */ e(K, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" })
+                  children: /* @__PURE__ */ e(z, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" })
                 }
               ) }),
-              /* @__PURE__ */ e(a, { side: "bottom", align: "center", children: "Search (Ctrl+K)" })
+              /* @__PURE__ */ e(i, { side: "bottom", align: "center", children: "Search (Ctrl+K)" })
             ] }),
-            b,
-            m && /* @__PURE__ */ r(l, { children: [
-              /* @__PURE__ */ e(o, { asChild: !0, children: /* @__PURE__ */ e(
+            N,
+            x && /* @__PURE__ */ s(c, { children: [
+              /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: m,
+                  onClick: x,
                   "aria-label": "AI Chat",
                   className: "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-border bg-layer-02 text-text-secondary transition-colors hover:bg-layer-03",
-                  children: /* @__PURE__ */ e(U, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" })
+                  children: /* @__PURE__ */ e(L, { className: "h-ico-sm w-ico-sm", "aria-hidden": "true" })
                 }
               ) }),
-              /* @__PURE__ */ e(a, { side: "bottom", align: "center", children: "AI Chat" })
+              /* @__PURE__ */ e(i, { side: "bottom", align: "center", children: "AI Chat" })
             ] }),
-            t && /* @__PURE__ */ r(S, { children: [
-              /* @__PURE__ */ r(l, { children: [
-                /* @__PURE__ */ e(o, { asChild: !0, children: /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e("button", { type: "button", className: "flex items-center gap-ds-03 outline-none", children: /* @__PURE__ */ r(M, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
-                  t.image ? /* @__PURE__ */ e(v, { src: t.image, alt: t.name }) : null,
-                  /* @__PURE__ */ e(I, { className: "bg-layer-02 text-text-primary", children: (x = t.name) == null ? void 0 : x.charAt(0).toUpperCase() })
+            l && /* @__PURE__ */ s(U, { children: [
+              /* @__PURE__ */ s(c, { children: [
+                /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e("button", { type: "button", className: "flex items-center gap-ds-03 outline-none", children: /* @__PURE__ */ s(A, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
+                  l.image ? /* @__PURE__ */ e(K, { src: l.image, alt: l.name }) : null,
+                  /* @__PURE__ */ e(F, { className: "bg-layer-02 text-text-primary", children: (u = l.name) == null ? void 0 : u.charAt(0).toUpperCase() })
                 ] }) }) }) }),
-                /* @__PURE__ */ e(a, { side: "bottom", align: "center", children: "User Menu" })
+                /* @__PURE__ */ e(i, { side: "bottom", align: "center", children: "User Menu" })
               ] }),
-              /* @__PURE__ */ r(
-                D,
+              /* @__PURE__ */ s(
+                E,
                 {
                   className: "w-[200px] rounded-ds-xl border border-border bg-layer-01 p-0 shadow-03",
                   sideOffset: 8,
                   align: "end",
                   children: [
-                    /* @__PURE__ */ r("div", { className: "border-b border-border px-ds-05 py-ds-04", children: [
-                      /* @__PURE__ */ e("p", { className: "text-ds-md text-text-primary", children: t.name }),
-                      t.email && /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-placeholder", children: t.email })
+                    /* @__PURE__ */ s("div", { className: "border-b border-border px-ds-05 py-ds-04", children: [
+                      /* @__PURE__ */ e("p", { className: "text-ds-md text-text-primary", children: l.name }),
+                      l.email && /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-placeholder", children: l.email })
                     ] }),
-                    /* @__PURE__ */ r(
+                    /* @__PURE__ */ s(
                       d,
                       {
                         className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-layer-02",
-                        onClick: () => s == null ? void 0 : s("/profile"),
+                        onClick: () => t == null ? void 0 : t("/profile"),
                         children: [
-                          /* @__PURE__ */ e(B, { className: "h-ico-sm w-ico-sm text-text-secondary" }),
+                          /* @__PURE__ */ e(O, { className: "h-ico-sm w-ico-sm text-text-secondary" }),
                           /* @__PURE__ */ e("span", { className: "text-ds-md text-text-secondary", children: "Profile" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ r(
+                    a == null ? void 0 : a.map((r, T) => {
+                      const D = {
+                        error: "text-error",
+                        success: "text-success",
+                        warning: "text-warning",
+                        info: "text-info"
+                      }, y = r.color ? D[r.color] ?? "text-text-secondary" : "text-text-secondary";
+                      return /* @__PURE__ */ s(g.Fragment, { children: [
+                        r.separator && /* @__PURE__ */ e(w, { className: "bg-border" }),
+                        /* @__PURE__ */ s(
+                          d,
+                          {
+                            className: o(
+                              "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-layer-02",
+                              r.disabled && "pointer-events-none opacity-[0.38]"
+                            ),
+                            disabled: r.disabled,
+                            onClick: () => {
+                              r.disabled || (r.onClick ? r.onClick() : r.href && (t == null || t(r.href)));
+                            },
+                            children: [
+                              r.icon && /* @__PURE__ */ e("span", { className: o("[&>svg]:h-ico-sm [&>svg]:w-ico-sm", y), children: r.icon }),
+                              /* @__PURE__ */ e("span", { className: o("text-ds-md", y), children: r.label }),
+                              r.badge != null && r.badge !== !1 && (typeof r.badge == "string" ? /* @__PURE__ */ e("span", { className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error px-ds-02 text-[10px] font-semibold leading-none text-text-on-color", children: r.badge }) : /* @__PURE__ */ e("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error" }))
+                            ]
+                          }
+                        )
+                      ] }, r.label + T);
+                    }),
+                    /* @__PURE__ */ s(
                       d,
                       {
                         className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-layer-02",
-                        onClick: g,
+                        onClick: M,
                         children: [
-                          h === "dark" ? /* @__PURE__ */ e(E, { className: "h-ico-sm w-ico-sm text-text-secondary" }) : /* @__PURE__ */ e(F, { className: "h-ico-sm w-ico-sm text-text-secondary" }),
-                          /* @__PURE__ */ e("span", { className: "text-ds-md text-text-secondary", children: h === "dark" ? "Light Mode" : "Dark Mode" })
+                          f === "dark" ? /* @__PURE__ */ e(P, { className: "h-ico-sm w-ico-sm text-text-secondary" }) : /* @__PURE__ */ e(q, { className: "h-ico-sm w-ico-sm text-text-secondary" }),
+                          /* @__PURE__ */ e("span", { className: "text-ds-md text-text-secondary", children: f === "dark" ? "Light Mode" : "Dark Mode" })
                         ]
                       }
                     ),
-                    n && /* @__PURE__ */ r(w, { children: [
-                      /* @__PURE__ */ e(A, { className: "bg-border" }),
-                      /* @__PURE__ */ r(
+                    p && /* @__PURE__ */ s(I, { children: [
+                      /* @__PURE__ */ e(w, { className: "bg-border" }),
+                      /* @__PURE__ */ s(
                         d,
                         {
                           className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-layer-02",
-                          onClick: n,
+                          onClick: p,
                           children: [
-                            /* @__PURE__ */ e(R, { className: "h-ico-sm w-ico-sm text-error" }),
+                            /* @__PURE__ */ e(G, { className: "h-ico-sm w-ico-sm text-error" }),
                             /* @__PURE__ */ e("span", { className: "text-ds-md text-error", children: "Logout" })
                           ]
                         }
@@ -139,7 +169,7 @@ const L = C.forwardRef(
     );
   }
 );
-L.displayName = "TopBar";
+H.displayName = "TopBar";
 export {
-  L as TopBar
+  H as TopBar
 };