@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/notification-tray-DTXMq42J.js

@@ -0,0 +1,444 @@
+import { jsx as t, jsxs as c, Fragment as E } from "react/jsx-runtime";
+import { forwardRef as re, useState as q, useCallback as F, useLayoutEffect as de, useEffect as H, useRef as u, useMemo as ce, useImperativeHandle as le } from "react";
+import * as x from "@radix-ui/react-popover";
+import { c as S } from "./index-D2ZczOXr.js";
+import { useTranslation as Y } from "react-i18next";
+import { I as fe } from "./icon-button-Wnnde5lc.js";
+import { B as U } from "./button-7mLWcMp_.js";
+import { S as W } from "./separator-B4wXDLNC.js";
+import { S as N } from "./skeleton-dtqyF09N.js";
+import { N as pe } from "./notification-card-CsVEYJE-.js";
+import { u as ue } from "./registry-C9nwlNyL.js";
+import { c as me } 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 ge = [
+  ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
+  [
+    "path",
+    {
+      d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326",
+      key: "11g9vi"
+    }
+  ]
+], G = me("bell", ge), ve = {
+  id: "notification-tray",
+  capabilities: ["open", "close", "select_single", "dismiss"],
+  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()
+    },
+    unreadCount: {
+      type: "number",
+      descriptionKey: "ui.agent.notificationTray.state.unreadCount",
+      description: "Badge unread count surfaced by the host.",
+      read: (i) => i.getUnreadCount()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.notificationTray.state.isOpen",
+      description: "Whether the dropdown panel is currently open.",
+      read: (i) => i.isOpen()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      descriptionKey: "ui.agent.notificationTray.actions.open",
+      description: "Open the notification panel.",
+      invoke: (i) => {
+        i.open();
+      }
+    },
+    close: {
+      safety: "read",
+      descriptionKey: "ui.agent.notificationTray.actions.close",
+      description: "Close the notification panel.",
+      invoke: (i) => {
+        i.close();
+      }
+    },
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.notificationTray.actions.selectItem",
+      description: "Activate the notification with the given id.",
+      invoke: (i, a) => {
+        i.selectItem(a.id);
+      }
+    },
+    mark_read: {
+      safety: "write",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.notificationTray.actions.markRead",
+      description: "Request the host to mark a notification as read.",
+      invoke: (i, a) => {
+        i.markRead(a.id);
+      }
+    },
+    dismiss: {
+      safety: "destructive",
+      argsType: "{ id: string }",
+      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);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "notification-tray",
+      description: "Marks the NotificationTray wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific tray from the agent."
+    },
+    item: {
+      attr: "data-notification-id",
+      description: "Stable notification id emitted on each rendered NotificationCard inside the tray."
+    }
+  }
+}, ye = S("ds:relative ds:inline-flex ds:items-center", {
+  variants: {
+    size: {
+      sm: "",
+      md: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), he = S(
+  [
+    "ds:flex ds:flex-col",
+    "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
+    // Border kept (transparent) so the forced-colors override below can
+    // repaint a visible edge in HCM. In normal modes the soft drop-shadow
+    // carries the edge cue.
+    "ds:border ds:border-transparent",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:z-[var(--z-popover)]",
+    // Width: fluid below the design cap so narrow viewports keep a visible
+    // gutter on *both* sides of the panel (shadow included). The legacy
+    // `min-w` approach clamped at 20rem, which flush-mounted the panel
+    // against the inline-start viewport edge on phones.
+    "ds:w-[min(24rem,calc(100vw-2*var(--spacing-md)))]",
+    // Height: below the `sm` breakpoint the panel takes a near-full-screen
+    // sheet shape so the user gets room to triage messages / notifications
+    // without scrolling a tiny popover. `6rem` reserves space for the
+    // Header (≈4rem) plus the sideOffset + collisionPadding (≈2rem).
+    // Above `sm` it returns to `h-auto` so the list's own
+    // `--*-tray-max-block-size` cap governs the height.
+    "ds:h-[calc(100dvh-6rem)] ds:sm:h-auto",
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
+    "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95",
+    "ds:motion-reduce:transition-none ds:motion-reduce:animate-none",
+    "ds:focus-visible:outline-none",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:p-[var(--spacing-xs)]",
+        md: "ds:p-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), xe = S(
+  [
+    // Anchored to the top-end corner of the trigger, nudged outward so
+    // the bell icon isn't covered.
+    "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
+    "ds:inline-flex ds:items-center ds:justify-center",
+    // Circle at 1-2 digits; widens into a pill only for "99+".
+    "ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]",
+    "ds:rounded-[var(--radius-full)]",
+    "ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]",
+    "ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none",
+    "ds:pointer-events-none ds:select-none",
+    "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
+  ].join(" ")
+);
+function Ne(i, a) {
+  return i > 99 ? a : String(i);
+}
+function R() {
+  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(N, { variant: "circular", size: "sm" }),
+        /* @__PURE__ */ c("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ t(N, { variant: "text", size: "md", width: "70%" }),
+          /* @__PURE__ */ t(N, { variant: "text", size: "sm", width: "90%" }),
+          /* @__PURE__ */ t(N, { variant: "text", size: "sm", width: "30%" })
+        ] })
+      ]
+    }
+  );
+}
+function be() {
+  const { t: i } = Y();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      role: "status",
+      "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(
+          "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(G, {})
+          }
+        ),
+        /* @__PURE__ */ t("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: i("ui.notificationTray.noNotifications", "No notifications") }),
+        /* @__PURE__ */ t("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: i(
+          "ui.notificationTray.noNotificationsDescription",
+          "You're all caught up."
+        ) })
+      ]
+    }
+  );
+}
+const Te = re(
+  ({
+    id: i,
+    items: a,
+    unseenCount: b,
+    open: I,
+    onOpenChange: m,
+    onItemClick: f,
+    onDismiss: p,
+    onMarkRead: g,
+    onMarkAllRead: j,
+    loading: J = !1,
+    maxVisible: M,
+    viewAllLabel: K,
+    onViewAll: Q,
+    align: X = "end",
+    side: Z = "bottom",
+    size: T = "md",
+    className: $,
+    ...D
+  }, ee) => {
+    var L;
+    const { t: r } = Y(), w = I !== void 0, [te, ie] = q(!1), z = w ? I : te, v = F(
+      (e) => {
+        w || ie(e), m == null || m(e);
+      },
+      [w, m]
+    ), [y, O] = q(
+      () => a.map((e) => ({ item: e, leaving: !1 }))
+    ), V = F(() => {
+      if (typeof window > "u") return 200;
+      const e = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
+      if (!e) return 200;
+      const n = e.trim(), s = parseFloat(n);
+      return Number.isFinite(s) ? n.endsWith("ms") ? s : s * 1e3 : 200;
+    }, []);
+    de(() => {
+      O((e) => {
+        const n = new Set(a.map((o) => o.id)), s = new Set(e.map((o) => o.item.id)), d = e.map((o) => {
+          if (n.has(o.item.id)) {
+            const _ = a.find((oe) => oe.id === o.item.id);
+            return _ ? { item: _, leaving: !1 } : { ...o, leaving: !0 };
+          }
+          return { ...o, leaving: !0 };
+        });
+        for (const o of a)
+          s.has(o.id) || d.push({ item: o, leaving: !1 });
+        return d;
+      });
+    }, [a]), H(() => {
+      if (!y.some((s) => s.leaving)) return;
+      const e = V(), n = setTimeout(() => {
+        O((s) => s.filter((d) => !d.leaving));
+      }, e);
+      return () => clearTimeout(n);
+    }, [y, V]);
+    const k = u(null), A = u((L = a[0]) == null ? void 0 : L.id);
+    H(() => {
+      var s;
+      const e = (s = a[0]) == null ? void 0 : s.id, n = A.current;
+      if (n && e && n !== e && k.current) {
+        const d = a[0];
+        d && !d.read && (k.current.textContent = r(
+          "ui.notificationTray.newNotification",
+          {
+            title: d.title,
+            defaultValue: "New notification: {{title}}"
+          }
+        ));
+      }
+      A.current = e;
+    }, [a, r]);
+    const h = b ?? 0, ae = h > 0 ? r("ui.notificationTray.triggerLabel", {
+      count: h,
+      defaultValue: "Notifications, {{count}} unread"
+    }) : r(
+      "ui.notificationTray.triggerLabelNone",
+      "Notifications, none unread"
+    ), ne = Ne(
+      h,
+      r("ui.notificationTray.badgeCountOverflow", "99+")
+    ), se = he({ size: T }), l = u(a);
+    l.current = a;
+    const B = u(b);
+    B.current = b;
+    const P = u(z);
+    P.current = z;
+    const C = ce(
+      () => ({
+        open: () => v(!0),
+        close: () => v(!1),
+        isOpen: () => P.current,
+        getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
+        getUnreadCount: () => B.current ?? l.current.filter((e) => !e.read).length,
+        selectItem: (e) => {
+          const n = l.current.find((s) => s.id === e);
+          n && (f == null || f(n));
+        },
+        markRead: (e) => {
+          const n = l.current.find((s) => s.id === e);
+          n && (g == null || g(n));
+        },
+        dismiss: (e) => {
+          const n = l.current.find((s) => s.id === e);
+          n && (p == null || p(n));
+        }
+      }),
+      [v, f, g, p]
+    );
+    return le(ee, () => C, [C]), ue(ve, C, i), /* @__PURE__ */ t(
+      "div",
+      {
+        "data-component": "notification-tray",
+        "data-component-id": i,
+        className: [ye({ size: T }), $].filter(Boolean).join(" "),
+        ...D,
+        children: /* @__PURE__ */ c(x.Root, { open: z, onOpenChange: v, children: [
+          /* @__PURE__ */ t(x.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+            fe,
+            {
+              icon: /* @__PURE__ */ t(G, {}),
+              intent: "outline",
+              size: T === "sm" ? "sm" : "md",
+              "aria-label": ae,
+              "aria-haspopup": "dialog"
+            }
+          ) }),
+          h > 0 ? /* @__PURE__ */ t(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-testid": "notification-tray-badge",
+              className: xe(),
+              children: ne
+            }
+          ) : null,
+          /* @__PURE__ */ t(
+            "div",
+            {
+              ref: k,
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "ds:sr-only"
+            }
+          ),
+          /* @__PURE__ */ t(x.Portal, { children: /* @__PURE__ */ c(
+            x.Content,
+            {
+              role: "dialog",
+              "aria-label": r("ui.notificationTray.panelTitle", "Notifications"),
+              side: Z,
+              align: X,
+              sideOffset: 8,
+              collisionPadding: 16,
+              className: se,
+              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("ui.notificationTray.panelTitle", "Notifications") }),
+                  j && a.some((e) => !e.read) ? /* @__PURE__ */ t(
+                    U,
+                    {
+                      intent: "link",
+                      size: "sm",
+                      onClick: j,
+                      className: "ds:text-[length:var(--font-size-xs)]",
+                      children: r("ui.notificationTray.markAllRead", "Mark all as read")
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ t(W, {}),
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    role: "list",
+                    "data-max-visible": M,
+                    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: J ? /* @__PURE__ */ c(E, { children: [
+                      /* @__PURE__ */ t(R, {}),
+                      /* @__PURE__ */ t(R, {}),
+                      /* @__PURE__ */ t(R, {})
+                    ] }) : y.length === 0 ? /* @__PURE__ */ t(be, {}) : y.map(({ item: e, leaving: n }) => /* @__PURE__ */ t(
+                      pe,
+                      {
+                        item: e,
+                        variant: "compact",
+                        leaving: n,
+                        onActivate: f,
+                        onDismiss: p,
+                        "data-notification-id": e.id
+                      },
+                      e.id
+                    ))
+                  }
+                ),
+                K ? /* @__PURE__ */ c(E, { children: [
+                  /* @__PURE__ */ t(W, {}),
+                  /* @__PURE__ */ t("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ t(
+                    U,
+                    {
+                      intent: "link",
+                      size: "sm",
+                      onClick: Q,
+                      className: "ds:w-full ds:justify-center",
+                      children: K
+                    }
+                  ) })
+                ] }) : null
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+Te.displayName = "NotificationTray";
+export {
+  Te as N,
+  ve as n
+};
+//# sourceMappingURL=notification-tray-DTXMq42J.js.map