@devalok/shilp-sutra 0.30.0 → 0.32.0

package/dist/shell/notification-center.js

@@ -1,36 +1,36 @@
 "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 b } from "react";
+import { useRef as B, useCallback as v } from "react";
 import { formatRelativeTime as G } from "../ui/lib/date-utils.js";
-import { Popover as M, PopoverTrigger as X, PopoverContent as _ } from "../ui/popover.js";
-import { Tooltip as q, TooltipTrigger as J, TooltipContent as L } from "../ui/tooltip.js";
-import { IconBell as Q, IconChecks as U, IconInbox as V, IconX as W } from "@tabler/icons-react";
-import { Icon as h } from "../ui/icon.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 Z } from "../ui/spinner.js";
-import { m as N } from "../_chunks/framer.js";
-function w(t, d) {
+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();
 }
-function ee(t) {
-  const d = new Date(t), o = /* @__PURE__ */ new Date(), l = /* @__PURE__ */ new Date();
-  return l.setDate(o.getDate() - 1), w(d, o) ? "Today" : w(d, l) ? "Yesterday" : "Earlier";
+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";
 }
-const C = {
+const R = {
   INFO: "bg-info-9",
   IMPORTANT: "bg-warning-9",
   CRITICAL: "bg-error-9"
 };
-function te({
+function re({
   notification: t,
   onRead: d,
-  onNavigate: o,
-  getRoute: l,
+  onNavigate: l,
+  getRoute: n,
   onDismiss: c
 }) {
-  const p = l(t), g = () => {
-    t.isRead || d(t.id), p && o(p);
+  const p = n(t), g = () => {
+    t.isRead || d(t.id), p && l(p);
   };
   return /* @__PURE__ */ a(
     "div",
@@ -52,7 +52,7 @@ function te({
           {
             className: f(
               "h-[8px] w-[8px] rounded-ds-full transition-opacity duration-fast-02 ease-productive-standard",
-              C[t.tier] || C.INFO,
+              R[t.tier] || R.INFO,
               t.isRead ? "opacity-20" : "opacity-100"
             )
           }
@@ -103,89 +103,89 @@ function te({
             },
             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(h, { icon: W, size: "sm" })
+            children: /* @__PURE__ */ e(x, { icon: Z, size: "sm" })
           }
         )
       ]
     }
   );
 }
-const se = $.forwardRef(
+const ae = $.forwardRef(
   ({
     notifications: t = [],
     unreadCount: d,
-    open: o,
-    onOpenChange: l,
+    open: l,
+    onOpenChange: n,
     isLoading: c = !1,
     hasMore: p = !1,
     onFetchMore: g,
-    onMarkRead: x,
+    onMarkRead: b,
     onMarkAllRead: r,
     onNavigate: i,
     getNotificationRoute: D,
     onDismiss: I,
-    headerActions: R,
-    emptyState: k,
+    headerActions: k,
+    emptyState: T,
     footerSlot: y,
-    popoverClassName: T,
-    className: j,
-    ...P
-  }, O) => {
-    const v = B(null), n = d ?? t.filter((s) => !s.isRead).length, z = D ?? (() => null), K = b(
+    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) => {
-        l?.(!1), i?.(s);
+        n?.(!1), i?.(s);
       },
-      [i, l]
-    ), Y = b(
+      [i, n]
+    ), E = v(
       (s) => {
-        x?.(s);
+        b?.(s);
       },
-      [x]
-    ), E = b(() => {
-      const s = v.current;
+      [b]
+    ), F = v(() => {
+      const s = N.current;
       !s || c || !p || s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && g?.();
-    }, [c, p, g]), F = t.reduce(
+    }, [c, p, g]), S = t.reduce(
       (s, u) => {
-        const m = ee(u.createdAt);
+        const m = se(u.createdAt);
         return s[m] || (s[m] = []), s[m].push(u), s;
       },
       {}
-    ), S = ["Today", "Yesterday", "Earlier"];
-    return /* @__PURE__ */ a(M, { open: o, onOpenChange: l, children: [
-      /* @__PURE__ */ a(q, { children: [
-        /* @__PURE__ */ e(J, { asChild: !0, children: /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ a(
+    ), 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",
           {
-            ...P,
-            ref: O,
-            "aria-label": n > 0 ? `Notifications, ${n} unread` : "Notifications",
+            ...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",
-              j
+              P
             ),
             children: [
-              /* @__PURE__ */ e(h, { icon: Q, size: "sm" }),
-              n > 0 && /* @__PURE__ */ e(
-                N.span,
+              /* @__PURE__ */ e(x, { icon: U, size: "sm" }),
+              o > 0 && /* @__PURE__ */ e(
+                w.span,
                 {
                   initial: { rotate: 0 },
-                  animate: { rotate: [0, -3, 3, -1, 1, 0] },
-                  transition: { duration: 0.4, ease: "easeInOut" },
+                  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: n > 99 ? "99+" : n
+                  children: o > 99 ? "99+" : o
                 }
               )
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e(L, { side: "bottom", align: "center", children: "Notifications" })
+        /* @__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",
-            T
+            j
           ),
           sideOffset: 8,
           align: "end",
@@ -193,52 +193,52 @@ const se = $.forwardRef(
             /* @__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" }),
-                n > 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: n })
+                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: [
-                n > 0 && r && /* @__PURE__ */ a(
+                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(h, { icon: U, size: "sm" }),
+                      /* @__PURE__ */ e(x, { icon: V, size: "sm" }),
                       "Mark all read"
                     ]
                   }
                 ),
-                R
+                k
               ] })
             ] }),
             /* @__PURE__ */ a(
               "div",
               {
-                ref: v,
-                onScroll: E,
+                ref: N,
+                onScroll: F,
                 className: "max-h-[420px] overflow-y-auto",
                 children: [
-                  t.length === 0 ? k || /* @__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(h, { icon: V, size: "lg", className: "text-surface-fg-subtle" }) }),
+                  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!" })
-                  ] }) : S.map((s) => {
-                    const u = F[s];
+                  ] }) : 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, A) => /* @__PURE__ */ e(
-                        N.div,
+                      u.map((m, M) => /* @__PURE__ */ e(
+                        w.div,
                         {
-                          initial: { opacity: 0 },
+                          initial: h ? void 0 : { opacity: 0 },
                           animate: { opacity: 1 },
-                          transition: { delay: A * 0.03 },
+                          transition: h ? { duration: 0 } : { delay: M * 0.03 },
                           children: /* @__PURE__ */ e(
-                            te,
+                            re,
                             {
                               notification: m,
-                              onRead: Y,
-                              onNavigate: K,
-                              getRoute: z,
+                              onRead: E,
+                              onNavigate: Y,
+                              getRoute: K,
                               onDismiss: I
                             }
                           )
@@ -247,7 +247,7 @@ const se = $.forwardRef(
                       ))
                     ] }, s);
                   }),
-                  c && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-ds-05", children: /* @__PURE__ */ e(Z, {}) })
+                  c && /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-ds-05", children: /* @__PURE__ */ e(ee, {}) })
                 ]
               }
             ),
@@ -258,7 +258,7 @@ const se = $.forwardRef(
     ] });
   }
 );
-se.displayName = "NotificationCenter";
+ae.displayName = "NotificationCenter";
 export {
-  se as NotificationCenter
+  ae as NotificationCenter
 };

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

@@ -29,7 +29,7 @@ export interface UserMenuItem {
     /** Whether the item is disabled */
     disabled?: boolean;
 }
-interface TopBarRootProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TopBarRootProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
     className?: string;
 }
@@ -66,7 +66,7 @@ interface TopBarUserMenuProps {
     className?: string;
 }
 export type TopBarProps = TopBarRootProps;
-declare const TopBar: React.ForwardRefExoticComponent<TopBarRootProps & React.RefAttributes<HTMLDivElement>> & {
+declare const TopBar: React.ForwardRefExoticComponent<TopBarRootProps & React.RefAttributes<HTMLElement>> & {
     Left: React.ForwardRefExoticComponent<TopBarLeftProps & React.RefAttributes<HTMLDivElement>>;
     Center: React.ForwardRefExoticComponent<TopBarCenterProps & React.RefAttributes<HTMLDivElement>>;
     Right: React.ForwardRefExoticComponent<TopBarRightProps & React.RefAttributes<HTMLDivElement>>;

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;;;;;GAKG;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;AAMD,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgCD,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,QAAA,MAAM,MAAM;;;;CAIF,CAAA;AAEV,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,GAAG,CAAC,EAAE,MAAM,OAAO,MAAM,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,qBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;CAChB;AAiCD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAsBD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,UAAU,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiJD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAA;AAEzC,QAAA,MAAM,MAAM;;;;;;;;CAQV,CAAA;AAEF,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../src/shell/top-bar.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;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;AAMD,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgCD,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,QAAA,MAAM,MAAM;;;;CAIF,CAAA;AAEV,UAAU,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,GAAG,CAAC,EAAE,MAAM,OAAO,MAAM,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAmBD,UAAU,qBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;CAChB;AAkCD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAsBD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,UAAU,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiJD,MAAM,MAAM,WAAW,GAAG,eAAe,CAAA;AAEzC,QAAA,MAAM,MAAM;;;;;;;;CAQV,CAAA;AAEF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/shell/top-bar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as e, jsxs as d, Fragment as j } from "react/jsx-runtime";
+import { jsx as e, jsxs as n, Fragment as j } from "react/jsx-runtime";
 import * as c from "react";
 import { useColorMode as D } from "../hooks/use-color-mode.js";
 import { Avatar as U, AvatarImage as z, AvatarFallback as A } from "../ui/avatar.js";
@@ -7,87 +7,88 @@ import { DropdownMenu as L, DropdownMenuTrigger as S, DropdownMenuContent as F,
 import { Tooltip as h, TooltipTrigger as b, TooltipContent as N } from "../ui/tooltip.js";
 import { IconUser as O, IconSun as _, IconMoon as E, IconLogout as P } from "@tabler/icons-react";
 import { Icon as p } from "../ui/icon.js";
-import { cn as n } from "../ui/lib/utils.js";
+import { cn as d } from "../ui/lib/utils.js";
 const w = c.forwardRef(
-  ({ className: r, children: a, ...o }, t) => {
-    const l = c.Children.toArray(a).some(
+  ({ className: r, children: s, ...o }, t) => {
+    const l = c.Children.toArray(s).some(
       (i) => c.isValidElement(i) && i.type === m
     );
     return /* @__PURE__ */ e(
-      "div",
+      "header",
       {
         ...o,
         ref: t,
-        className: n(
+        className: d(
           "z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06",
           l ? "grid grid-cols-[1fr_auto_1fr] items-center" : "flex items-center",
           r
         ),
-        children: a
+        children: s
       }
     );
   }
 );
 w.displayName = "TopBar";
-const y = c.forwardRef(
-  ({ className: r, children: a, ...o }, t) => /* @__PURE__ */ e(
+const v = c.forwardRef(
+  ({ className: r, children: s, ...o }, t) => /* @__PURE__ */ e(
     "div",
     {
       ref: t,
-      className: n("flex items-center gap-ds-04", r),
+      className: d("flex items-center gap-ds-04", r),
       ...o,
-      children: a
+      children: s
     }
   )
 );
-y.displayName = "TopBar.Left";
+v.displayName = "TopBar.Left";
 const m = c.forwardRef(
-  ({ className: r, children: a, ...o }, t) => /* @__PURE__ */ e(
+  ({ className: r, children: s, ...o }, t) => /* @__PURE__ */ e(
     "div",
     {
       ref: t,
-      className: n("flex items-center justify-center px-ds-04", r),
+      className: d("flex items-center justify-center px-ds-04", r),
       ...o,
-      children: a
+      children: s
     }
   )
 );
 m.displayName = "TopBar.Center";
-const T = c.forwardRef(
-  ({ className: r, children: a, ...o }, t) => /* @__PURE__ */ e(
+const y = c.forwardRef(
+  ({ className: r, children: s, ...o }, t) => /* @__PURE__ */ e(
     "div",
     {
       ref: t,
-      className: n("ml-auto flex items-center gap-ds-04", r),
+      className: d("ml-auto flex items-center gap-ds-04", r),
       ...o,
-      children: a
+      children: s
     }
   )
 );
-T.displayName = "TopBar.Right";
+y.displayName = "TopBar.Right";
 const V = {
   tight: "gap-ds-02",
   default: "gap-ds-04",
   loose: "gap-ds-06"
-}, v = c.forwardRef(
-  ({ gap: r = "default", className: a, children: o, ...t }, l) => /* @__PURE__ */ e(
+}, T = c.forwardRef(
+  ({ gap: r = "default", className: s, children: o, ...t }, l) => /* @__PURE__ */ e(
     "div",
     {
       ref: l,
-      className: n("flex items-center", V[r], a),
+      className: d("flex items-center", V[r], s),
       ...t,
       children: o
     }
   )
 );
-v.displayName = "TopBar.Section";
-const B = c.forwardRef(({ icon: r, tooltip: a, className: o, ...t }, l) => /* @__PURE__ */ d(h, { children: [
+T.displayName = "TopBar.Section";
+const B = c.forwardRef(({ icon: r, tooltip: s, className: o, ...t }, l) => /* @__PURE__ */ n(h, { children: [
   /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
     "button",
     {
       ref: l,
       type: "button",
-      className: n(
+      "aria-label": s,
+      className: d(
         "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard",
         o
       ),
@@ -95,36 +96,36 @@ const B = c.forwardRef(({ icon: r, tooltip: a, className: o, ...t }, l) => /* @_
       children: /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm", "aria-hidden": "true", children: r })
     }
   ) }),
-  /* @__PURE__ */ e(N, { side: "bottom", align: "center", children: a })
+  /* @__PURE__ */ e(N, { side: "bottom", align: "center", children: s })
 ] }));
 B.displayName = "TopBar.IconButton";
 const C = c.forwardRef(
-  ({ className: r, children: a, ...o }, t) => /* @__PURE__ */ e(
+  ({ className: r, children: s, ...o }, t) => /* @__PURE__ */ e(
     "h2",
     {
       ref: t,
-      className: n(
+      className: d(
         "hidden text-ds-lg text-surface-fg md:block",
         r
       ),
       ...o,
-      children: a
+      children: s
     }
   )
 );
 C.displayName = "TopBar.Title";
 const M = c.forwardRef(
-  ({ user: r, onNavigate: a, onLogout: o, userMenuItems: t, className: l }, i) => {
+  ({ user: r, onNavigate: s, onLogout: o, userMenuItems: t, className: l }, i) => {
     const { colorMode: u, toggleColorMode: k } = D();
-    return /* @__PURE__ */ d(L, { children: [
-      /* @__PURE__ */ d(h, { children: [
+    return /* @__PURE__ */ n(L, { children: [
+      /* @__PURE__ */ n(h, { children: [
         /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(S, { asChild: !0, children: /* @__PURE__ */ e(
           "button",
           {
             ref: i,
             type: "button",
-            className: n("flex items-center gap-ds-03 outline-none", l),
-            children: /* @__PURE__ */ d(U, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
+            className: d("flex items-center gap-ds-03 outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", l),
+            children: /* @__PURE__ */ n(U, { className: "h-ds-sm-plus w-ds-sm-plus cursor-pointer", children: [
               r.image ? /* @__PURE__ */ e(z, { src: r.image, alt: r.name }) : null,
               /* @__PURE__ */ e(A, { className: "bg-surface-raised-hover text-surface-fg", children: r.name?.charAt(0).toUpperCase() })
             ] })
@@ -132,67 +133,67 @@ const M = c.forwardRef(
         ) }) }),
         /* @__PURE__ */ e(N, { side: "bottom", align: "center", children: "User Menu" })
       ] }),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ n(
         F,
         {
           className: "w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
           sideOffset: 8,
           align: "end",
           children: [
-            /* @__PURE__ */ d("div", { className: "border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
+            /* @__PURE__ */ n("div", { className: "border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
               /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg", children: r.name }),
               r.email && /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle truncate", children: r.email })
             ] }),
-            /* @__PURE__ */ d(
+            /* @__PURE__ */ n(
               f,
               {
                 className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
-                onClick: () => a?.("/profile"),
+                onClick: () => s?.("/profile"),
                 children: [
                   /* @__PURE__ */ e(p, { icon: O, size: "sm", className: "text-surface-fg-muted" }),
                   /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-muted", children: "Profile" })
                 ]
               }
             ),
-            t?.map((s, R) => {
+            t?.map((a, R) => {
               const I = {
                 error: "text-error-11",
                 success: "text-success-11",
                 warning: "text-warning-11",
                 info: "text-info-11"
-              }, g = s.color ? I[s.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
-              return /* @__PURE__ */ d(c.Fragment, { children: [
-                s.separator && /* @__PURE__ */ e(x, { className: "bg-surface-border" }),
-                /* @__PURE__ */ d(
+              }, g = a.color ? I[a.color] ?? "text-surface-fg-muted" : "text-surface-fg-muted";
+              return /* @__PURE__ */ n(c.Fragment, { children: [
+                a.separator && /* @__PURE__ */ e(x, { className: "bg-surface-border" }),
+                /* @__PURE__ */ n(
                   f,
                   {
-                    className: n(
+                    className: d(
                       "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
-                      s.disabled && "pointer-events-none opacity-action-disabled"
+                      a.disabled && "pointer-events-none opacity-action-disabled"
                     ),
-                    disabled: s.disabled,
+                    disabled: a.disabled,
                     onClick: () => {
-                      s.disabled || (s.onClick ? s.onClick() : s.href && a?.(s.href));
+                      a.disabled || (a.onClick ? a.onClick() : a.href && s?.(a.href));
                     },
                     children: [
-                      s.icon && /* @__PURE__ */ e(
+                      a.icon && /* @__PURE__ */ e(
                         "span",
                         {
-                          className: n(
+                          className: d(
                             "[&>svg]:h-ico-sm [&>svg]:w-ico-sm",
                             g
                           ),
-                          children: s.icon
+                          children: a.icon
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: n("text-ds-md", g), children: s.label }),
-                      s.badge != null && s.badge !== !1 && (typeof s.badge == "string" ? /* @__PURE__ */ e("span", { className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-accent-fg", children: s.badge }) : /* @__PURE__ */ e("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
+                      /* @__PURE__ */ e("span", { className: d("text-ds-md", g), children: a.label }),
+                      a.badge != null && a.badge !== !1 && (typeof a.badge == "string" ? /* @__PURE__ */ e("span", { className: "ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-accent-fg", children: a.badge }) : /* @__PURE__ */ e("span", { className: "ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9" }))
                     ]
                   }
                 )
-              ] }, s.label + R);
+              ] }, a.label + R);
             }),
-            /* @__PURE__ */ d(
+            /* @__PURE__ */ n(
               f,
               {
                 className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
@@ -203,9 +204,9 @@ const M = c.forwardRef(
                 ]
               }
             ),
-            o && /* @__PURE__ */ d(j, { children: [
+            o && /* @__PURE__ */ n(j, { children: [
               /* @__PURE__ */ e(x, { className: "bg-surface-border" }),
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ n(
                 f,
                 {
                   className: "flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised",
@@ -225,10 +226,10 @@ const M = c.forwardRef(
 );
 M.displayName = "TopBar.UserMenu";
 const Y = Object.assign(w, {
-  Left: y,
+  Left: v,
   Center: m,
-  Right: T,
-  Section: v,
+  Right: y,
+  Section: T,
   IconButton: B,
   Title: C,
   UserMenu: M