@alfadocs/ui-kit 0.17.0 → 0.17.2

package/dist/_chunks/{message-tray-Fsend-du.js → message-tray-BNAS8al4.js}

@@ -1,16 +1,17 @@
-import { jsx as s, jsxs as c, Fragment as L } from "react/jsx-runtime";
-import { forwardRef as oe, useState as q, useCallback as F, useLayoutEffect as ce, useEffect as H, useRef as m, useMemo as le, useImperativeHandle as me } from "react";
-import * as b from "@radix-ui/react-popover";
-import { c as S } from "./index-D2ZczOXr.js";
-import { useTranslation as W } from "react-i18next";
-import { I as pe } from "./icon-button-C4CGcYuz.js";
-import { B as _ } from "./button-DD_0Xdmr.js";
-import { S as U } from "./separator-CYU_bGFn.js";
+import { jsx as s, jsxs as c, Fragment as B } from "react/jsx-runtime";
+import { forwardRef as re, useState as ne, useCallback as ie, useLayoutEffect as de, useEffect as A, useRef as m, useMemo as oe, useImperativeHandle as ce } from "react";
+import * as x from "@radix-ui/react-popover";
+import { c as C } from "./index-D2ZczOXr.js";
+import { useTranslation as q } from "react-i18next";
+import { u as le } from "./use-controllable-state-BiY4xTzM.js";
+import { I as me } from "./icon-button-C4CGcYuz.js";
+import { B as E } from "./button-DD_0Xdmr.js";
+import { S as L } from "./separator-CYU_bGFn.js";
 import { S as f } from "./skeleton-CZbwyJAA.js";
-import { M as ue } from "./message-card-c6R0-qXq.js";
-import { u as ge } from "./registry-C9nwlNyL.js";
-import { M as Y } from "./mail-C8irm52s.js";
-const fe = {
+import { M as pe } from "./message-card-c6R0-qXq.js";
+import { u as ue } from "./registry-C9nwlNyL.js";
+import { M as F } from "./mail-C8irm52s.js";
+const ge = {
   id: "message-tray",
   capabilities: ["open", "close", "select_single", "dismiss"],
   state: {
@@ -94,7 +95,7 @@ const fe = {
       description: "Stable message id emitted on each rendered MessageCard inside the tray."
     }
   }
-}, ve = S("ds:relative ds:inline-flex ds:items-center", {
+}, fe = C("ds:relative ds:inline-flex ds:items-center", {
   variants: {
     size: {
       sm: "",
@@ -104,7 +105,7 @@ const fe = {
   defaultVariants: {
     size: "md"
   }
-}), ye = S(
+}), ve = C(
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
@@ -140,7 +141,7 @@ const fe = {
       size: "md"
     }
   }
-), he = S(
+), he = C(
   [
     "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
     "ds:inline-flex ds:items-center ds:justify-center",
@@ -152,10 +153,10 @@ const fe = {
     "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
   ].join(" ")
 );
-function xe(a, t) {
+function ye(a, t) {
   return a > 99 ? t : String(a);
 }
-function R() {
+function z() {
   return /* @__PURE__ */ c(
     "div",
     {
@@ -173,8 +174,8 @@ function R() {
     }
   );
 }
-function be() {
-  const { t: a } = W();
+function xe() {
+  const { t: a } = q();
   return /* @__PURE__ */ c(
     "div",
     {
@@ -187,7 +188,7 @@ function be() {
           {
             "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__ */ s(Y, {})
+            children: /* @__PURE__ */ s(F, {})
           }
         ),
         /* @__PURE__ */ s("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: a("messageTray.noMessages", "No messages") }),
@@ -196,48 +197,47 @@ function be() {
     }
   );
 }
-const Te = oe(
+const be = re(
   ({
     id: a,
     items: t,
-    unreadCount: T,
-    open: k,
-    onOpenChange: v,
+    unreadCount: b,
+    open: H,
+    onOpenChange: _,
     onItemClick: p,
     onDismiss: u,
-    onMarkRead: y,
-    onMarkAllRead: C,
-    loading: G = !1,
-    maxVisible: J,
-    viewAllLabel: j,
-    onViewAll: Q,
-    align: X = "end",
-    side: Z = "bottom",
-    size: w = "md",
-    className: $,
-    ...D
-  }, ee) => {
-    var A;
-    const { t: d } = W(), N = k !== void 0, [se, ae] = q(!1), z = N ? k : se, h = F(
-      (e) => {
-        N || ae(e), v == null || v(e);
-      },
-      [N, v]
-    ), [g, I] = q(
+    onMarkRead: v,
+    onMarkAllRead: M,
+    loading: U = !1,
+    maxVisible: W,
+    viewAllLabel: R,
+    onViewAll: Y,
+    align: G = "end",
+    side: J = "bottom",
+    size: T = "md",
+    className: Q,
+    ...X
+  }, Z) => {
+    var K;
+    const { t: d } = q(), [$, h] = le({
+      value: H,
+      defaultValue: !1,
+      onChange: _
+    }), w = $ ?? !1, [g, S] = ne(
       () => t.map((e) => ({ item: e, leaving: !1 }))
-    ), K = F(() => {
+    ), O = ie(() => {
       if (typeof window > "u") return 200;
       const e = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
       if (!e) return 200;
       const r = e.trim(), n = parseFloat(r);
       return Number.isFinite(n) ? r.endsWith("ms") ? n : n * 1e3 : 200;
     }, []);
-    ce(() => {
-      I((e) => {
+    de(() => {
+      S((e) => {
         const r = new Set(t.map((i) => i.id)), n = new Set(e.map((i) => i.item.id)), o = e.map((i) => {
           if (r.has(i.item.id)) {
-            const E = t.find((de) => de.id === i.item.id);
-            return E ? { item: E, leaving: !1 } : { ...i, leaving: !0 };
+            const P = t.find((te) => te.id === i.item.id);
+            return P ? { item: P, leaving: !1 } : { ...i, leaving: !0 };
           }
           return { ...i, leaving: !0 };
         });
@@ -245,134 +245,134 @@ const Te = oe(
           n.has(i.id) || o.push({ item: i, leaving: !1 });
         return o;
       });
-    }, [t]), H(() => {
+    }, [t]), A(() => {
       if (!g.some((n) => n.leaving)) return;
-      const e = K(), r = setTimeout(() => {
-        I((n) => n.filter((o) => !o.leaving));
+      const e = O(), r = setTimeout(() => {
+        S((n) => n.filter((o) => !o.leaving));
       }, e);
       return () => clearTimeout(r);
-    }, [g, K]);
-    const M = m(null), O = m((A = t[0]) == null ? void 0 : A.id);
-    H(() => {
+    }, [g, O]);
+    const N = m(null), k = m((K = t[0]) == null ? void 0 : K.id);
+    A(() => {
       var n;
-      const e = (n = t[0]) == null ? void 0 : n.id, r = O.current;
-      if (r && e && r !== e && M.current) {
+      const e = (n = t[0]) == null ? void 0 : n.id, r = k.current;
+      if (r && e && r !== e && N.current) {
         const o = t[0];
-        o && !o.read && (M.current.textContent = d("messageTray.newMessage", {
+        o && !o.read && (N.current.textContent = d("messageTray.newMessage", {
           sender: o.sender.name,
           defaultValue: "New message from {{sender}}"
         }));
       }
-      O.current = e;
+      k.current = e;
     }, [t, d]);
-    const x = T ?? 0, te = x > 0 ? d("messageTray.triggerLabel", {
-      count: x,
+    const y = b ?? 0, D = y > 0 ? d("messageTray.triggerLabel", {
+      count: y,
       defaultValue: "Messages, {{count}} unread"
-    }) : d("messageTray.triggerLabelNone", "Messages, none unread"), re = xe(
-      x,
+    }) : d("messageTray.triggerLabelNone", "Messages, none unread"), ee = ye(
+      y,
       d("messageTray.badgeCountOverflow", "99+")
-    ), ne = ye({ size: w }), l = m(t);
+    ), se = ve({ size: T }), l = m(t);
     l.current = t;
-    const V = m(T);
-    V.current = T;
-    const P = m(z);
-    P.current = z;
-    const ie = le(
+    const j = m(b);
+    j.current = b;
+    const I = m(w);
+    I.current = w;
+    const ae = oe(
       () => ({
         open: () => h(!0),
         close: () => h(!1),
-        isOpen: () => P.current,
+        isOpen: () => I.current,
         getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
-        getUnreadCount: () => V.current ?? l.current.filter((e) => !e.read).length,
+        getUnreadCount: () => j.current ?? l.current.filter((e) => !e.read).length,
         selectItem: (e) => {
           const r = l.current.find((n) => n.id === e);
           r && (p == null || p(r));
         },
         markRead: (e) => {
           const r = l.current.find((n) => n.id === e);
-          r && (y == null || y(r));
+          r && (v == null || v(r));
         },
         dismiss: (e) => {
           const r = l.current.find((n) => n.id === e);
           r && (u == null || u(r));
         }
       }),
-      [h, p, y, u]
-    ), B = m(null);
-    return me(ee, () => B.current, []), ge(fe, ie, a), /* @__PURE__ */ s(
+      [h, p, v, u]
+    ), V = m(null);
+    return ce(Z, () => V.current, []), ue(ge, ae, a), /* @__PURE__ */ s(
       "div",
       {
-        ref: B,
+        ref: V,
         "data-component": "message-tray",
         "data-component-id": a,
-        className: [ve({ size: w }), $].filter(Boolean).join(" "),
-        ...D,
-        children: /* @__PURE__ */ c(b.Root, { open: z, onOpenChange: h, children: [
-          /* @__PURE__ */ s(b.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
-            pe,
+        className: [fe({ size: T }), Q].filter(Boolean).join(" "),
+        ...X,
+        children: /* @__PURE__ */ c(x.Root, { open: w, onOpenChange: h, children: [
+          /* @__PURE__ */ s(x.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
+            me,
             {
-              icon: /* @__PURE__ */ s(Y, {}),
+              icon: /* @__PURE__ */ s(F, {}),
               intent: "outline",
-              size: w === "sm" ? "sm" : "md",
-              "aria-label": te,
+              size: T === "sm" ? "sm" : "md",
+              "aria-label": D,
               "aria-haspopup": "dialog"
             }
           ) }),
-          x > 0 ? /* @__PURE__ */ s(
+          y > 0 ? /* @__PURE__ */ s(
             "span",
             {
               "aria-hidden": "true",
               "data-testid": "message-tray-badge",
               className: he(),
-              children: re
+              children: ee
             }
           ) : null,
           /* @__PURE__ */ s(
             "div",
             {
-              ref: M,
+              ref: N,
               "aria-live": "polite",
               "aria-atomic": "true",
               className: "ds:sr-only"
             }
           ),
-          /* @__PURE__ */ s(b.Portal, { children: /* @__PURE__ */ c(
-            b.Content,
+          /* @__PURE__ */ s(x.Portal, { children: /* @__PURE__ */ c(
+            x.Content,
             {
               role: "dialog",
               "aria-label": d("messageTray.panelTitle", "Messages"),
-              side: Z,
-              align: X,
+              side: J,
+              align: G,
               sideOffset: 8,
               collisionPadding: 16,
-              className: ne,
+              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__ */ s("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: d("messageTray.panelTitle", "Messages") }),
-                  C && t.some((e) => !e.read) ? /* @__PURE__ */ s(
-                    _,
+                  M && t.some((e) => !e.read) ? /* @__PURE__ */ s(
+                    E,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: C,
+                      onClick: M,
                       className: "ds:text-[length:var(--font-size-xs)]",
                       children: d("messageTray.markAllRead", "Mark all as read")
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ s(U, {}),
+                /* @__PURE__ */ s(L, {}),
                 /* @__PURE__ */ s(
                   "div",
                   {
                     role: g.length > 0 ? "list" : void 0,
-                    "data-max-visible": J,
+                    "data-max-visible": W,
                     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(--message-tray-max-block-size,26rem)]",
-                    children: G ? /* @__PURE__ */ c(L, { children: [
-                      /* @__PURE__ */ s(R, {}),
-                      /* @__PURE__ */ s(R, {}),
-                      /* @__PURE__ */ s(R, {})
-                    ] }) : g.length === 0 ? /* @__PURE__ */ s(be, {}) : g.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
-                      ue,
+                    children: U ? /* @__PURE__ */ c(B, { children: [
+                      /* @__PURE__ */ s(z, {}),
+                      /* @__PURE__ */ s(z, {}),
+                      /* @__PURE__ */ s(z, {})
+                    ] }) : g.length === 0 ? /* @__PURE__ */ s(xe, {}) : g.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
+                      pe,
                       {
                         item: e,
                         variant: "compact",
@@ -385,16 +385,16 @@ const Te = oe(
                     ))
                   }
                 ),
-                j ? /* @__PURE__ */ c(L, { children: [
-                  /* @__PURE__ */ s(U, {}),
+                R ? /* @__PURE__ */ c(B, { children: [
+                  /* @__PURE__ */ s(L, {}),
                   /* @__PURE__ */ s("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ s(
-                    _,
+                    E,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: Q,
+                      onClick: Y,
                       className: "ds:w-full ds:justify-center",
-                      children: j
+                      children: R
                     }
                   ) })
                 ] }) : null
@@ -406,9 +406,9 @@ const Te = oe(
     );
   }
 );
-Te.displayName = "MessageTray";
+be.displayName = "MessageTray";
 export {
-  Te as M,
-  fe as m
+  be as M,
+  ge as m
 };
-//# sourceMappingURL=message-tray-Fsend-du.js.map
+//# sourceMappingURL=message-tray-BNAS8al4.js.map