@alfadocs/ui-kit 0.17.0 → 0.17.2

package/dist/_chunks/{notification-tray-C3dYdLAF.js → notification-tray-D_69dXFY.js}

@@ -1,22 +1,23 @@
-import { jsx as t, jsxs as c, Fragment as q } from "react/jsx-runtime";
-import { forwardRef as de, useState as F, useCallback as H, useLayoutEffect as ce, useEffect as U, useRef as f, useMemo as le, useImperativeHandle as fe } from "react";
-import * as x from "@radix-ui/react-popover";
+import { jsx as t, jsxs as c, Fragment as L } from "react/jsx-runtime";
+import { forwardRef as ne, useState as se, useCallback as oe, useLayoutEffect as re, useEffect as _, useRef as f, useMemo as de, useImperativeHandle as ce } from "react";
+import * as y from "@radix-ui/react-popover";
 import { c as C } from "./index-D2ZczOXr.js";
-import { useTranslation as G } from "react-i18next";
-import { I as pe } from "./icon-button-C4CGcYuz.js";
-import { B as W } from "./button-DD_0Xdmr.js";
-import { S as Y } from "./separator-CYU_bGFn.js";
-import { S as N } from "./skeleton-CZbwyJAA.js";
-import { N as ue } from "./notification-card-ejOw5g6g.js";
-import { u as me } from "./registry-C9nwlNyL.js";
-import { c as ge } from "./createLucideIcon-CrFbzy84.js";
+import { useTranslation as F } from "react-i18next";
+import { u as le } from "./use-controllable-state-BiY4xTzM.js";
+import { I as fe } from "./icon-button-C4CGcYuz.js";
+import { B as E } from "./button-DD_0Xdmr.js";
+import { S as q } from "./separator-CYU_bGFn.js";
+import { S as x } from "./skeleton-CZbwyJAA.js";
+import { N as pe } from "./notification-card-ejOw5g6g.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 ve = [
+const ge = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -25,7 +26,7 @@ const ve = [
       key: "11g9vi"
     }
   ]
-], J = ge("bell", ve), ye = {
+], H = me("bell", ge), ve = {
   id: "notification-tray",
   capabilities: ["open", "close", "select_single", "dismiss"],
   state: {
@@ -122,7 +123,7 @@ const ve = [
       size: "md"
     }
   }
-), xe = C(
+), ye = C(
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
@@ -163,7 +164,7 @@ const ve = [
       size: "md"
     }
   }
-), Ne = C(
+), xe = C(
   [
     // Anchored to the top-end corner of the trigger, nudged outward so
     // the bell icon isn't covered.
@@ -178,28 +179,28 @@ const ve = [
     "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
   ].join(" ")
 );
-function be(i, a) {
+function Ne(i, a) {
   return i > 99 ? a : String(i);
 }
-function R() {
+function z() {
   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__ */ t(x, { 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%" })
+          /* @__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%" })
         ] })
       ]
     }
   );
 }
-function Te() {
-  const { t: i } = G();
+function be() {
+  const { t: i } = F();
   return /* @__PURE__ */ c(
     "div",
     {
@@ -212,7 +213,7 @@ function Te() {
           {
             "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(J, {})
+            children: /* @__PURE__ */ t(H, {})
           }
         ),
         /* @__PURE__ */ t("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: i("notificationTray.noNotifications", "No notifications") }),
@@ -224,48 +225,47 @@ function Te() {
     }
   );
 }
-const we = de(
+const Te = ne(
   ({
     id: i,
     items: a,
-    unseenCount: b,
-    open: S,
-    onOpenChange: g,
+    unseenCount: N,
+    open: U,
+    onOpenChange: W,
     onItemClick: p,
     onDismiss: u,
-    onMarkRead: v,
-    onMarkAllRead: I,
-    loading: j = !1,
-    maxVisible: M,
-    viewAllLabel: K,
-    onViewAll: Q,
-    align: X = "end",
-    side: Z = "bottom",
-    size: T = "md",
-    className: $,
-    ...D
-  }, ee) => {
-    var _;
-    const { t: r } = G(), w = S !== void 0, [te, ie] = F(!1), z = w ? S : te, y = H(
-      (e) => {
-        w || ie(e), g == null || g(e);
-      },
-      [w, g]
-    ), [m, O] = F(
+    onMarkRead: g,
+    onMarkAllRead: R,
+    loading: k = !1,
+    maxVisible: Y,
+    viewAllLabel: S,
+    onViewAll: G,
+    align: J = "end",
+    side: M = "bottom",
+    size: b = "md",
+    className: Q,
+    ...X
+  }, Z) => {
+    var B;
+    const { t: r } = F(), [$, v] = le({
+      value: U,
+      defaultValue: !1,
+      onChange: W
+    }), T = $ ?? !1, [m, O] = se(
       () => a.map((e) => ({ item: e, leaving: !1 }))
-    ), V = H(() => {
+    ), j = oe(() => {
       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;
     }, []);
-    ce(() => {
+    re(() => {
       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 E = a.find((re) => re.id === o.item.id);
-            return E ? { item: E, leaving: !1 } : { ...o, leaving: !0 };
+            const P = a.find((ae) => ae.id === o.item.id);
+            return P ? { item: P, leaving: !1 } : { ...o, leaving: !0 };
           }
           return { ...o, leaving: !0 };
         });
@@ -273,20 +273,20 @@ const we = de(
           s.has(o.id) || d.push({ item: o, leaving: !1 });
         return d;
       });
-    }, [a]), U(() => {
+    }, [a]), _(() => {
       if (!m.some((s) => s.leaving)) return;
-      const e = V(), n = setTimeout(() => {
+      const e = j(), n = setTimeout(() => {
         O((s) => s.filter((d) => !d.leaving));
       }, e);
       return () => clearTimeout(n);
-    }, [m, V]);
-    const k = f(null), A = f((_ = a[0]) == null ? void 0 : _.id);
-    U(() => {
+    }, [m, j]);
+    const w = f(null), I = f((B = a[0]) == null ? void 0 : B.id);
+    _(() => {
       var s;
-      const e = (s = a[0]) == null ? void 0 : s.id, n = A.current;
-      if (n && e && n !== e && k.current) {
+      const e = (s = a[0]) == null ? void 0 : s.id, n = I.current;
+      if (n && e && n !== e && w.current) {
         const d = a[0];
-        d && !d.read && (k.current.textContent = r(
+        d && !d.read && (w.current.textContent = r(
           "notificationTray.newNotification",
           {
             title: d.title,
@@ -294,58 +294,58 @@ const we = de(
           }
         ));
       }
-      A.current = e;
+      I.current = e;
     }, [a, r]);
-    const h = b ?? 0, ae = h > 0 ? r("notificationTray.triggerLabel", {
+    const h = N ?? 0, D = h > 0 ? r("notificationTray.triggerLabel", {
       count: h,
       defaultValue: "Notifications, {{count}} unread"
-    }) : r("notificationTray.triggerLabelNone", "Notifications, none unread"), ne = be(
+    }) : r("notificationTray.triggerLabelNone", "Notifications, none unread"), ee = Ne(
       h,
       r("notificationTray.badgeCountOverflow", "99+")
-    ), se = xe({ size: T }), l = f(a);
+    ), te = ye({ size: b }), l = f(a);
     l.current = a;
-    const B = f(b);
-    B.current = b;
-    const P = f(z);
-    P.current = z;
-    const oe = le(
+    const V = f(N);
+    V.current = N;
+    const K = f(T);
+    K.current = T;
+    const ie = de(
       () => ({
-        open: () => y(!0),
-        close: () => y(!1),
-        isOpen: () => P.current,
+        open: () => v(!0),
+        close: () => v(!1),
+        isOpen: () => K.current,
         getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
-        getUnreadCount: () => B.current ?? l.current.filter((e) => !e.read).length,
+        getUnreadCount: () => V.current ?? l.current.filter((e) => !e.read).length,
         selectItem: (e) => {
           const n = l.current.find((s) => s.id === e);
           n && (p == null || p(n));
         },
         markRead: (e) => {
           const n = l.current.find((s) => s.id === e);
-          n && (v == null || v(n));
+          n && (g == null || g(n));
         },
         dismiss: (e) => {
           const n = l.current.find((s) => s.id === e);
           n && (u == null || u(n));
         }
       }),
-      [y, p, v, u]
-    ), L = f(null);
-    return fe(ee, () => L.current, []), me(ye, oe, i), /* @__PURE__ */ t(
+      [v, p, g, u]
+    ), A = f(null);
+    return ce(Z, () => A.current, []), ue(ve, ie, i), /* @__PURE__ */ t(
       "div",
       {
-        ref: L,
+        ref: A,
         "data-component": "notification-tray",
         "data-component-id": i,
-        className: [he({ size: T }), $].filter(Boolean).join(" "),
-        ...D,
-        children: /* @__PURE__ */ c(x.Root, { open: z, onOpenChange: y, children: [
-          /* @__PURE__ */ t(x.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
-            pe,
+        className: [he({ 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(
+            fe,
             {
-              icon: /* @__PURE__ */ t(J, {}),
+              icon: /* @__PURE__ */ t(H, {}),
               intent: "outline",
-              size: T === "sm" ? "sm" : "md",
-              "aria-label": ae,
+              size: b === "sm" ? "sm" : "md",
+              "aria-label": D,
               "aria-haspopup": "dialog"
             }
           ) }),
@@ -354,56 +354,56 @@ const we = de(
             {
               "aria-hidden": "true",
               "data-testid": "notification-tray-badge",
-              className: Ne(),
-              children: ne
+              className: xe(),
+              children: ee
             }
           ) : null,
           /* @__PURE__ */ t(
             "div",
             {
-              ref: k,
+              ref: w,
               "aria-live": "polite",
               "aria-atomic": "true",
               className: "ds:sr-only"
             }
           ),
-          /* @__PURE__ */ t(x.Portal, { children: /* @__PURE__ */ c(
-            x.Content,
+          /* @__PURE__ */ t(y.Portal, { children: /* @__PURE__ */ c(
+            y.Content,
             {
               role: "dialog",
               "aria-label": r("notificationTray.panelTitle", "Notifications"),
-              side: Z,
-              align: X,
+              side: M,
+              align: J,
               sideOffset: 8,
               collisionPadding: 16,
-              className: se,
+              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") }),
-                  I && a.some((e) => !e.read) ? /* @__PURE__ */ t(
-                    W,
+                  R && a.some((e) => !e.read) ? /* @__PURE__ */ t(
+                    E,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: I,
+                      onClick: R,
                       className: "ds:text-[length:var(--font-size-xs)]",
                       children: r("notificationTray.markAllRead", "Mark all as read")
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ t(Y, {}),
+                /* @__PURE__ */ t(q, {}),
                 /* @__PURE__ */ t(
                   "div",
                   {
-                    role: j || m.length === 0 ? void 0 : "list",
-                    "data-max-visible": M,
+                    role: k || m.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: j ? /* @__PURE__ */ c(q, { children: [
-                      /* @__PURE__ */ t(R, {}),
-                      /* @__PURE__ */ t(R, {}),
-                      /* @__PURE__ */ t(R, {})
-                    ] }) : m.length === 0 ? /* @__PURE__ */ t(Te, {}) : m.map(({ item: e, leaving: n }) => /* @__PURE__ */ t(
-                      ue,
+                    children: k ? /* @__PURE__ */ c(L, { children: [
+                      /* @__PURE__ */ t(z, {}),
+                      /* @__PURE__ */ t(z, {}),
+                      /* @__PURE__ */ t(z, {})
+                    ] }) : m.length === 0 ? /* @__PURE__ */ t(be, {}) : m.map(({ item: e, leaving: n }) => /* @__PURE__ */ t(
+                      pe,
                       {
                         item: e,
                         variant: "compact",
@@ -416,16 +416,16 @@ const we = de(
                     ))
                   }
                 ),
-                K ? /* @__PURE__ */ c(q, { children: [
-                  /* @__PURE__ */ t(Y, {}),
+                S ? /* @__PURE__ */ c(L, { children: [
+                  /* @__PURE__ */ t(q, {}),
                   /* @__PURE__ */ t("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ t(
-                    W,
+                    E,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: Q,
+                      onClick: G,
                       className: "ds:w-full ds:justify-center",
-                      children: K
+                      children: S
                     }
                   ) })
                 ] }) : null
@@ -437,9 +437,9 @@ const we = de(
     );
   }
 );
-we.displayName = "NotificationTray";
+Te.displayName = "NotificationTray";
 export {
-  we as N,
-  ye as n
+  Te as N,
+  ve as n
 };
-//# sourceMappingURL=notification-tray-C3dYdLAF.js.map
+//# sourceMappingURL=notification-tray-D_69dXFY.js.map