@alfadocs/ui-kit-debug 0.69.0 → 0.71.0

package/dist/_chunks/{notification-tray-Btb9oQeZ.js → notification-tray-BmUlCx3g.js}

@@ -1,25 +1,26 @@
-import { jsx as t, jsxs as c, Fragment as P } from "react/jsx-runtime";
-import { forwardRef as ne, useState as oe, useCallback as se, useEffect as q, useRef as p, useMemo as re, useImperativeHandle as de } from "react";
-import * as y from "@radix-ui/react-popover";
-import { c as E } from "./index-D2ZczOXr.js";
-import { useTranslation as F } from "react-i18next";
+import { jsx as i, jsxs as c, Fragment as L } from "react/jsx-runtime";
+import { forwardRef as ne, useState as oe, useCallback as re, useEffect as E, useRef as f, useMemo as se, useImperativeHandle as de } from "react";
+import * as N from "@radix-ui/react-popover";
+import { c as A } from "./index-D2ZczOXr.js";
+import { useTranslation as U } from "react-i18next";
 import { u as ce } from "./use-controllable-state-BiY4xTzM.js";
 import { u as le } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
 import { I as pe } from "./icon-button-LqoiKcUN.js";
-import { B as L } from "./button-DD_0Xdmr.js";
-import { S as _ } from "./separator-CYU_bGFn.js";
-import { S as x } from "./skeleton-CZbwyJAA.js";
+import { B as F } from "./button-DD_0Xdmr.js";
+import { S as H } from "./separator-CYU_bGFn.js";
+import { S as b } from "./skeleton-CZbwyJAA.js";
 import { C as fe } from "./counter-dRlTNC_y.js";
-import { N as me } from "./notification-card-BiESdm8q.js";
-import { u as ue } from "./registry-DvAUVLHh.js";
-import { c as ge } from "./createLucideIcon-CrFbzy84.js";
+import { S as me } from "./scroll-area-BZOvUhwQ.js";
+import { N as ue } from "./notification-card-BMqNzCIt.js";
+import { u as ge } from "./registry-DvAUVLHh.js";
+import { c as ve } from "./createLucideIcon-CrFbzy84.js";
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ve = [
+const he = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -28,27 +29,27 @@ const ve = [
       key: "11g9vi"
     }
   ]
-], H = ge("bell", ve), he = {
+], V = ve("bell", he), ye = {
   id: "notification-tray",
-  capabilities: ["open", "close", "select_single", "dismiss"],
+  capabilities: ["open", "close", "select_single", "dismiss", "navigate"],
   state: {
     items: {
       type: "Array<{ id: string; read: boolean }>",
       descriptionKey: "ui.agent.notificationTray.state.items",
       description: "Currently-displayed notifications. Ids + read flag only — no PHI.",
-      read: (i) => i.getItems()
+      read: (t) => t.getItems()
     },
     unreadCount: {
       type: "number",
       descriptionKey: "ui.agent.notificationTray.state.unreadCount",
       description: "Badge unread count surfaced by the host.",
-      read: (i) => i.getUnreadCount()
+      read: (t) => t.getUnreadCount()
     },
     isOpen: {
       type: "boolean",
       descriptionKey: "ui.agent.notificationTray.state.isOpen",
       description: "Whether the dropdown panel is currently open.",
-      read: (i) => i.isOpen()
+      read: (t) => t.isOpen()
     }
   },
   actions: {
@@ -57,8 +58,8 @@ const ve = [
       idempotent: !0,
       descriptionKey: "ui.agent.notificationTray.actions.open",
       description: "Open the notification panel.",
-      invoke: (i) => {
-        i.open();
+      invoke: (t) => {
+        t.open();
       }
     },
     close: {
@@ -66,8 +67,8 @@ const ve = [
       idempotent: !0,
       descriptionKey: "ui.agent.notificationTray.actions.close",
       description: "Close the notification panel.",
-      invoke: (i) => {
-        i.close();
+      invoke: (t) => {
+        t.close();
       }
     },
     select_item: {
@@ -83,8 +84,8 @@ const ve = [
       examples: [{ args: { id: "notif-1" } }],
       descriptionKey: "ui.agent.notificationTray.actions.selectItem",
       description: "Activate the notification with the given id.",
-      invoke: (i, a) => {
-        i.selectItem(a.id);
+      invoke: (t, a) => {
+        t.selectItem(a.id);
       }
     },
     mark_read: {
@@ -100,8 +101,8 @@ const ve = [
       examples: [{ args: { id: "notif-1" } }],
       descriptionKey: "ui.agent.notificationTray.actions.markRead",
       description: "Request the host to mark a notification as read.",
-      invoke: (i, a) => {
-        i.markRead(a.id);
+      invoke: (t, a) => {
+        t.markRead(a.id);
       }
     },
     dismiss: {
@@ -117,8 +118,26 @@ const ve = [
       examples: [{ args: { id: "notif-1" } }],
       descriptionKey: "ui.agent.notificationTray.actions.dismiss",
       description: "Request the host to dismiss the notification with the given id.",
-      invoke: (i, a) => {
-        i.dismiss(a.id);
+      invoke: (t, a) => {
+        t.dismiss(a.id);
+      }
+    },
+    mark_all_read: {
+      safety: "write",
+      idempotent: !0,
+      descriptionKey: "ui.agent.notificationTray.actions.markAllRead",
+      description: "Request the host to mark every notification as read.",
+      invoke: (t) => {
+        t.markAllRead();
+      }
+    },
+    view_all: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.notificationTray.actions.viewAll",
+      description: "Navigate to the full notification list.",
+      invoke: (t) => {
+        t.viewAll();
       }
     }
   },
@@ -138,7 +157,7 @@ const ve = [
       description: "Stable notification id emitted on each rendered NotificationCard inside the tray."
     }
   }
-}, ye = E(
+}, xe = A(
   "ds:relative ds:inline-flex ds:items-center",
   {
     variants: {
@@ -151,7 +170,7 @@ const ve = [
       size: "md"
     }
   }
-), xe = E(
+), Ne = A(
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
@@ -195,29 +214,29 @@ const ve = [
       size: "md"
     }
   }
-), Ne = "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)] ds:pointer-events-none";
-function be(i, a) {
-  return i > 99 ? a : String(i);
+), be = "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)] ds:pointer-events-none";
+function Te(t, a) {
+  return t > 99 ? a : String(t);
 }
-function z() {
+function S() {
   return /* @__PURE__ */ c(
     "div",
     {
       "aria-hidden": "true",
       className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
       children: [
-        /* @__PURE__ */ t(x, { variant: "circular", size: "sm" }),
+        /* @__PURE__ */ i(b, { variant: "circular", size: "sm" }),
         /* @__PURE__ */ c("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ t(x, { variant: "text", size: "md", width: "70%" }),
-          /* @__PURE__ */ t(x, { variant: "text", size: "sm", width: "90%" }),
-          /* @__PURE__ */ t(x, { variant: "text", size: "sm", width: "30%" })
+          /* @__PURE__ */ i(b, { variant: "text", size: "md", width: "70%" }),
+          /* @__PURE__ */ i(b, { variant: "text", size: "sm", width: "90%" }),
+          /* @__PURE__ */ i(b, { variant: "text", size: "sm", width: "30%" })
         ] })
       ]
     }
   );
 }
-function Te() {
-  const { t: i } = F();
+function we() {
+  const { t } = U();
   return /* @__PURE__ */ c(
     "div",
     {
@@ -225,16 +244,16 @@ function Te() {
       "aria-live": "polite",
       className: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center",
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ i(
           "span",
           {
             "aria-hidden": "true",
             className: "ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5",
-            children: /* @__PURE__ */ t(H, {})
+            children: /* @__PURE__ */ i(V, {})
           }
         ),
-        /* @__PURE__ */ t("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: i("notificationTray.noNotifications", "No notifications") }),
-        /* @__PURE__ */ t("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: i(
+        /* @__PURE__ */ i("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: t("notificationTray.noNotifications", "No notifications") }),
+        /* @__PURE__ */ i("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: t(
           "notificationTray.noNotificationsDescription",
           "You're all caught up."
         ) })
@@ -242,35 +261,35 @@ function Te() {
     }
   );
 }
-const we = ne(
+const ze = ne(
   ({
-    id: i,
+    id: t,
     items: a,
-    unseenCount: N,
-    open: U,
-    onOpenChange: W,
-    onItemClick: f,
-    onDismiss: m,
-    onMarkRead: g,
-    onMarkAllRead: C,
-    loading: S = !1,
-    maxVisible: Y,
-    viewAllLabel: R,
-    onViewAll: G,
+    unseenCount: T,
+    open: W,
+    onOpenChange: Y,
+    onItemClick: m,
+    onDismiss: u,
+    onMarkRead: h,
+    onMarkAllRead: l,
+    loading: k = !1,
+    maxVisible: G,
+    viewAllLabel: O,
+    onViewAll: g,
     align: J = "end",
-    side: M = "bottom",
-    size: b = "md",
-    className: Q,
-    ...X
-  }, Z) => {
-    var A;
-    const { t: r } = F(), [$, v] = ce({
-      value: U,
+    side: Q = "bottom",
+    size: w = "md",
+    className: X,
+    ...Z
+  }, $) => {
+    var B;
+    const { t: s } = U(), [D, y] = ce({
+      value: W,
       defaultValue: !1,
-      onChange: W
-    }), T = $ ?? !1, [u, k] = oe(
+      onChange: Y
+    }), z = D ?? !1, [v, R] = oe(
       () => a.map((e) => ({ item: e, leaving: !1 }))
-    ), O = se(() => {
+    ), j = re(() => {
       if (typeof window > "u") return 200;
       const e = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
       if (!e) return 200;
@@ -278,32 +297,32 @@ const we = ne(
       return Number.isFinite(o) ? n.endsWith("ms") ? o : o * 1e3 : 200;
     }, []);
     le(() => {
-      k((e) => {
-        const n = new Set(a.map((s) => s.id)), o = new Set(e.map((s) => s.item.id)), d = e.map((s) => {
-          if (n.has(s.item.id)) {
-            const B = a.find((ae) => ae.id === s.item.id);
-            return B ? { item: B, leaving: !1 } : { ...s, leaving: !0 };
+      R((e) => {
+        const n = new Set(a.map((r) => r.id)), o = new Set(e.map((r) => r.item.id)), d = e.map((r) => {
+          if (n.has(r.item.id)) {
+            const P = a.find((ae) => ae.id === r.item.id);
+            return P ? { item: P, leaving: !1 } : { ...r, leaving: !0 };
           }
-          return { ...s, leaving: !0 };
+          return { ...r, leaving: !0 };
         });
-        for (const s of a)
-          o.has(s.id) || d.push({ item: s, leaving: !1 });
+        for (const r of a)
+          o.has(r.id) || d.push({ item: r, leaving: !1 });
         return d;
       });
-    }, [a]), q(() => {
-      if (!u.some((o) => o.leaving)) return;
-      const e = O(), n = setTimeout(() => {
-        k((o) => o.filter((d) => !d.leaving));
+    }, [a]), E(() => {
+      if (!v.some((o) => o.leaving)) return;
+      const e = j(), n = setTimeout(() => {
+        R((o) => o.filter((d) => !d.leaving));
       }, e);
       return () => clearTimeout(n);
-    }, [u, O]);
-    const w = p(null), j = p((A = a[0]) == null ? void 0 : A.id);
-    q(() => {
+    }, [v, j]);
+    const C = f(null), I = f((B = a[0]) == null ? void 0 : B.id);
+    E(() => {
       var o;
-      const e = (o = a[0]) == null ? void 0 : o.id, n = j.current;
-      if (n && e && n !== e && w.current) {
+      const e = (o = a[0]) == null ? void 0 : o.id, n = I.current;
+      if (n && e && n !== e && C.current) {
         const d = a[0];
-        d && !d.read && (w.current.textContent = r(
+        d && !d.read && (C.current.textContent = s(
           "notificationTray.newNotification",
           {
             title: d.title,
@@ -311,140 +330,156 @@ const we = ne(
           }
         ));
       }
-      j.current = e;
-    }, [a, r]);
-    const h = N ?? 0, D = h > 0 ? r("notificationTray.triggerLabel", {
-      count: h,
+      I.current = e;
+    }, [a, s]);
+    const x = T ?? 0, M = x > 0 ? s("notificationTray.triggerLabel", {
+      count: x,
       defaultValue: "Notifications, {{count}} unread"
-    }) : r("notificationTray.triggerLabelNone", "Notifications, none unread"), ee = be(
-      h,
-      r("notificationTray.badgeCountOverflow", "99+")
-    ), te = xe({ size: b }), l = p(a);
-    l.current = a;
-    const I = p(N);
-    I.current = N;
-    const K = p(T);
+    }) : s("notificationTray.triggerLabelNone", "Notifications, none unread"), ee = Te(
+      x,
+      s("notificationTray.badgeCountOverflow", "99+")
+    ), te = Ne({ size: w }), p = f(a);
+    p.current = a;
+    const K = f(T);
     K.current = T;
-    const ie = re(
+    const _ = f(z);
+    _.current = z;
+    const ie = se(
       () => ({
-        open: () => v(!0),
-        close: () => v(!1),
-        isOpen: () => K.current,
-        getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
-        getUnreadCount: () => I.current ?? l.current.filter((e) => !e.read).length,
+        open: () => y(!0),
+        close: () => y(!1),
+        isOpen: () => _.current,
+        getItems: () => p.current.map((e) => ({ id: e.id, read: !!e.read })),
+        getUnreadCount: () => K.current ?? p.current.filter((e) => !e.read).length,
         selectItem: (e) => {
-          const n = l.current.find((o) => o.id === e);
-          n && (f == null || f(n));
+          const n = p.current.find((o) => o.id === e);
+          n && (m == null || m(n));
         },
         markRead: (e) => {
-          const n = l.current.find((o) => o.id === e);
-          n && (g == null || g(n));
+          const n = p.current.find((o) => o.id === e);
+          n && (h == null || h(n));
         },
         dismiss: (e) => {
-          const n = l.current.find((o) => o.id === e);
-          n && (m == null || m(n));
-        }
+          const n = p.current.find((o) => o.id === e);
+          n && (u == null || u(n));
+        },
+        markAllRead: () => l == null ? void 0 : l(),
+        viewAll: () => g == null ? void 0 : g()
       }),
-      [v, f, g, m]
-    ), V = p(null);
-    return de(Z, () => V.current, []), ue(he, ie, i), /* @__PURE__ */ t(
+      [
+        y,
+        m,
+        h,
+        u,
+        l,
+        g
+      ]
+    ), q = f(null);
+    return de($, () => q.current, []), ge(ye, ie, t), /* @__PURE__ */ i(
       "div",
       {
-        ref: V,
+        ref: q,
         "data-component": "notification-tray",
-        "data-component-id": i,
-        className: [ye({ size: b }), Q].filter(Boolean).join(" "),
-        ...X,
-        children: /* @__PURE__ */ c(y.Root, { open: T, onOpenChange: v, children: [
-          /* @__PURE__ */ t(y.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+        "data-component-id": t,
+        className: [xe({ size: w }), X].filter(Boolean).join(" "),
+        ...Z,
+        children: /* @__PURE__ */ c(N.Root, { open: z, onOpenChange: y, children: [
+          /* @__PURE__ */ i(N.Trigger, { asChild: !0, children: /* @__PURE__ */ i(
             pe,
             {
-              icon: /* @__PURE__ */ t(H, {}),
+              icon: /* @__PURE__ */ i(V, {}),
               intent: "outline",
-              size: b === "sm" ? "sm" : "md",
-              "aria-label": D,
+              size: w === "sm" ? "sm" : "md",
+              "aria-label": M,
               "aria-haspopup": "dialog"
             }
           ) }),
-          h > 0 ? /* @__PURE__ */ t(
+          x > 0 ? /* @__PURE__ */ i(
             fe,
             {
               variant: "notification",
               size: "md",
               "aria-hidden": "true",
               "data-testid": "notification-tray-badge",
-              className: Ne,
+              className: be,
               children: ee
             }
           ) : null,
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ i(
             "div",
             {
-              ref: w,
+              ref: C,
               "aria-live": "polite",
               "aria-atomic": "true",
               className: "ds:sr-only"
             }
           ),
-          /* @__PURE__ */ t(y.Portal, { children: /* @__PURE__ */ c(
-            y.Content,
+          /* @__PURE__ */ i(N.Portal, { children: /* @__PURE__ */ c(
+            N.Content,
             {
               role: "dialog",
-              "aria-label": r("notificationTray.panelTitle", "Notifications"),
-              side: M,
+              "aria-label": s("notificationTray.panelTitle", "Notifications"),
+              side: Q,
               align: J,
               sideOffset: 8,
               collisionPadding: 16,
               className: te,
               children: [
                 /* @__PURE__ */ c("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: [
-                  /* @__PURE__ */ t("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: r("notificationTray.panelTitle", "Notifications") }),
-                  C && a.some((e) => !e.read) ? /* @__PURE__ */ t(
-                    L,
+                  /* @__PURE__ */ i("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: s("notificationTray.panelTitle", "Notifications") }),
+                  l && a.some((e) => !e.read) ? /* @__PURE__ */ i(
+                    F,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: C,
+                      onClick: l,
                       className: "ds:text-[length:var(--font-size-xs)]",
-                      children: r("notificationTray.markAllRead", "Mark all as read")
+                      children: s("notificationTray.markAllRead", "Mark all as read")
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ t(_, {}),
-                /* @__PURE__ */ t(
-                  "div",
+                /* @__PURE__ */ i(H, {}),
+                /* @__PURE__ */ i(
+                  me,
                   {
-                    role: S || u.length === 0 ? void 0 : "list",
-                    "data-max-visible": Y,
-                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--notification-tray-max-block-size,24rem)]",
-                    children: S ? /* @__PURE__ */ c(P, { children: [
-                      /* @__PURE__ */ t(z, {}),
-                      /* @__PURE__ */ t(z, {}),
-                      /* @__PURE__ */ t(z, {})
-                    ] }) : u.length === 0 ? /* @__PURE__ */ t(Te, {}) : u.map(({ item: e, leaving: n }) => /* @__PURE__ */ t(
-                      me,
+                    orientation: "vertical",
+                    className: "ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--notification-tray-max-block-size,24rem)]",
+                    children: /* @__PURE__ */ i(
+                      "div",
                       {
-                        item: e,
-                        variant: "compact",
-                        leaving: n,
-                        onActivate: f,
-                        onDismiss: m,
-                        "data-notification-id": e.id
-                      },
-                      e.id
-                    ))
+                        role: k || v.length === 0 ? void 0 : "list",
+                        "data-max-visible": G,
+                        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:pt-[var(--spacing-xs)]",
+                        children: k ? /* @__PURE__ */ c(L, { children: [
+                          /* @__PURE__ */ i(S, {}),
+                          /* @__PURE__ */ i(S, {}),
+                          /* @__PURE__ */ i(S, {})
+                        ] }) : v.length === 0 ? /* @__PURE__ */ i(we, {}) : v.map(({ item: e, leaving: n }) => /* @__PURE__ */ i(
+                          ue,
+                          {
+                            item: e,
+                            variant: "compact",
+                            leaving: n,
+                            onActivate: m,
+                            onDismiss: u,
+                            "data-notification-id": e.id
+                          },
+                          e.id
+                        ))
+                      }
+                    )
                   }
                 ),
-                R ? /* @__PURE__ */ c(P, { children: [
-                  /* @__PURE__ */ t(_, {}),
-                  /* @__PURE__ */ t("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ t(
-                    L,
+                O ? /* @__PURE__ */ c(L, { children: [
+                  /* @__PURE__ */ i(H, {}),
+                  /* @__PURE__ */ i("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ i(
+                    F,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: G,
+                      onClick: g,
                       className: "ds:w-full ds:justify-center",
-                      children: R
+                      children: O
                     }
                   ) })
                 ] }) : null
@@ -456,9 +491,9 @@ const we = ne(
     );
   }
 );
-we.displayName = "NotificationTray";
+ze.displayName = "NotificationTray";
 export {
-  we as N,
-  he as n
+  ze as N,
+  ye as n
 };
-//# sourceMappingURL=notification-tray-Btb9oQeZ.js.map
+//# sourceMappingURL=notification-tray-BmUlCx3g.js.map