@alfadocs/ui-kit-debug 0.1.9 → 0.2.0

package/dist/_chunks/{message-card-qhoGv947.js → message-card-ChCX9Iv6.js}

@@ -1,13 +1,13 @@
 import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as R, useMemo as B, useState as L, useRef as U, useCallback as W } from "react";
-import { c as _ } from "./index-D2ZczOXr.js";
-import { useTranslation as E } from "react-i18next";
-import { I as H } from "./icon-button-Wnnde5lc.js";
-import { B as N } from "./button-7mLWcMp_.js";
-import { A as X } from "./avatar-Dcr6XuDQ.js";
-import { T as q } from "./timestamp-BV2lC-wV.js";
+import { forwardRef as B, useMemo as L, useState as U, useRef as W, useCallback as _ } from "react";
+import { c as E } from "./index-D2ZczOXr.js";
+import { useTranslation as H } from "react-i18next";
+import { I as X } from "./icon-button-C4CGcYuz.js";
+import { B as k } from "./button-DD_0Xdmr.js";
+import { A as q } from "./avatar-Dcr6XuDQ.js";
+import { T as D } from "./timestamp-BV2lC-wV.js";
 import { X as G } from "./x-CCcI3eJp.js";
-const J = _(
+const J = E(
   [
     "ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
     "ds:rounded-[var(--radius-sm)]",
@@ -58,7 +58,7 @@ const J = _(
       state: "read"
     }
   }
-), k = [
+), j = [
   "ds:focus-visible:outline-none",
   "ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]",
   "ds:after:pointer-events-auto",
@@ -71,45 +71,48 @@ const J = _(
 function O(e) {
   return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(e);
 }
-const Q = R(
+const Q = B(
   ({
     item: e,
     variant: d = "compact",
-    size: g = "sm",
+    size: h = "sm",
     onActivate: r,
     onDismiss: t,
     ctaLabel: c,
     dismissLabel: u,
-    leaving: h,
-    className: j,
-    ...T
-  }, z) => {
-    const { t: o, i18n: v } = E(), K = B(() => {
+    leaving: b,
+    className: T,
+    ...z
+  }, K) => {
+    const { t: n, i18n: v } = H(), M = L(() => {
       const s = new Date(e.sentAt);
       return Number.isNaN(s.getTime()) ? "" : new Intl.DateTimeFormat(v.language, {
         dateStyle: "medium",
         timeStyle: "short"
       }).format(s);
-    }, [e.sentAt, v.language]), f = h !== void 0, [M, S] = L(!1), m = U(null), b = f ? h : M, x = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, w = W(() => {
-      if (!t) return;
-      if (f || x) {
-        t(e);
-        return;
-      }
-      S(!0), m.current && clearTimeout(m.current);
-      const s = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", C = s.trim().endsWith("ms") ? parseFloat(s) : parseFloat(s) * 1e3;
-      m.current = setTimeout(
-        () => t(e),
-        Number.isFinite(C) ? C : 200
-      );
-    }, [t, e, f, x]), V = e.read ? "read" : "unread", F = e.read ? "" : o("ui.messageCard.unreadSuffix", ", unread"), I = e.subject ? o("ui.messageCard.subjectFragment", {
+    }, [e.sentAt, v.language]), f = b !== void 0, [S, V] = U(!1), m = W(null), x = f ? b : S, w = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, y = _(
+      (s) => {
+        if (s == null || s.preventDefault(), s == null || s.stopPropagation(), !t) return;
+        if (f || w) {
+          t(e);
+          return;
+        }
+        V(!0), m.current && clearTimeout(m.current);
+        const g = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", N = g.trim().endsWith("ms") ? parseFloat(g) : parseFloat(g) * 1e3;
+        m.current = setTimeout(
+          () => t(e),
+          Number.isFinite(N) ? N : 200
+        );
+      },
+      [t, e, f, w]
+    ), F = e.read ? "read" : "unread", P = e.read ? "" : n("ui.messageCard.unreadSuffix", ", unread"), I = e.subject ? n("ui.messageCard.subjectFragment", {
       subject: e.subject,
       defaultValue: " — {{subject}}"
-    }) : "", y = o("ui.messageCard.itemLabel", {
+    }) : "", C = n("ui.messageCard.itemLabel", {
       sender: e.sender.name,
       subjectFragment: I,
-      time: K,
-      unreadSuffix: F,
+      time: M,
+      unreadSuffix: P,
       defaultValue: "Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}"
     }), p = !!e.url && O(e.url), i = /* @__PURE__ */ a(
       "span",
@@ -121,28 +124,28 @@ const Q = R(
         children: e.sender.name
       }
     );
-    let n;
-    d === "compact" && p && r ? n = /* @__PURE__ */ a(
+    let o;
+    d === "compact" && p && r ? o = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
-        "aria-label": y,
-        className: k + " ds:contents",
+        "aria-label": C,
+        className: j + " ds:contents",
         onClick: (s) => {
           s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || r(e);
         },
         children: i
       }
-    ) : d === "compact" && r ? n = /* @__PURE__ */ a(
+    ) : d === "compact" && r ? o = /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        "aria-label": y,
-        className: k + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
+        "aria-label": C,
+        className: j + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
         onClick: () => r(e),
         children: i
       }
-    ) : d === "dashboard" && p && r ? n = /* @__PURE__ */ a(
+    ) : d === "dashboard" && p && r ? o = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
@@ -152,27 +155,27 @@ const Q = R(
         },
         children: i
       }
-    ) : n = i;
-    const P = typeof e.unreadCount == "number" && e.unreadCount > 1;
+    ) : o = i;
+    const R = typeof e.unreadCount == "number" && e.unreadCount > 1;
     return /* @__PURE__ */ l(
       "div",
       {
-        ref: z,
+        ref: K,
         role: "listitem",
         "data-component": "message-card",
         "data-component-id": e.id,
         "data-read": e.read ? "true" : "false",
-        "data-leaving": b ? "true" : void 0,
-        "aria-hidden": b || void 0,
-        className: J({ variant: d, size: g, state: V, className: j }),
-        ...T,
+        "data-leaving": x ? "true" : void 0,
+        "aria-hidden": x || void 0,
+        className: J({ variant: d, size: h, state: F, className: T }),
+        ...z,
         children: [
           /* @__PURE__ */ a(
-            X,
+            q,
             {
               name: e.sender.name,
               src: e.sender.avatarUrl,
-              size: g === "md" ? "md" : "sm",
+              size: h === "md" ? "md" : "sm",
               className: "ds:shrink-0",
               "aria-hidden": "true",
               role: "presentation",
@@ -188,11 +191,11 @@ const Q = R(
                   className: "ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]"
                 }
               ),
-              d === "dashboard" ? /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: n }) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: n }),
-              P ? /* @__PURE__ */ a(
+              d === "dashboard" ? /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: o }) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: o }),
+              R ? /* @__PURE__ */ a(
                 "span",
                 {
-                  "aria-label": o("ui.messageCard.threadCount", {
+                  "aria-label": n("ui.messageCard.threadCount", {
                     count: e.unreadCount,
                     defaultValue_one: "{{count}} new message in thread",
                     defaultValue_other: "{{count}} new messages in thread"
@@ -214,7 +217,7 @@ const Q = R(
             ) : null,
             /* @__PURE__ */ a("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words", children: e.preview }),
             /* @__PURE__ */ a(
-              q,
+              D,
               {
                 value: e.sentAt,
                 shape: "chip",
@@ -224,7 +227,7 @@ const Q = R(
             ),
             d === "dashboard" && (c || u) ? /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
               c && p ? /* @__PURE__ */ a(
-                N,
+                k,
                 {
                   intent: "outline",
                   size: "sm",
@@ -243,11 +246,11 @@ const Q = R(
                 }
               ) : null,
               u && t ? /* @__PURE__ */ a(
-                N,
+                k,
                 {
                   intent: "link",
                   size: "sm",
-                  onClick: w,
+                  onClick: y,
                   className: "ds:relative ds:z-[1]",
                   children: u
                 }
@@ -255,13 +258,13 @@ const Q = R(
             ] }) : null
           ] }),
           d === "compact" && t ? /* @__PURE__ */ a("span", { className: "ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none", children: /* @__PURE__ */ a(
-            H,
+            X,
             {
               icon: /* @__PURE__ */ a(G, {}),
               intent: "ghost",
               size: "sm",
-              "aria-label": o("ui.messageCard.dismiss", "Dismiss message"),
-              onClick: w
+              "aria-label": n("ui.messageCard.dismiss", "Dismiss message"),
+              onClick: y
             }
           ) }) : null
         ]
@@ -274,4 +277,4 @@ export {
   Q as M,
   O as i
 };
-//# sourceMappingURL=message-card-qhoGv947.js.map
+//# sourceMappingURL=message-card-ChCX9Iv6.js.map

package/dist/_chunks/message-card-ChCX9Iv6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card-ChCX9Iv6.js","sources":["../../src/components/message-card/message-card.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Button } from '../button/button';\nimport { Avatar } from '../avatar/avatar';\nimport { Timestamp } from '../timestamp';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface MessageSender {\n  /** Display name — drives the avatar's deterministic colour + initials. */\n  name: string;\n  /** Optional avatar image URL. */\n  avatarUrl?: string;\n}\n\nexport interface MessageItem {\n  /** Unique identifier for the message (or thread). */\n  id: string;\n  /** Sender identity — avatar + bold display name. */\n  sender: MessageSender;\n  /** Optional subject / conversation title. Rendered bold when unread. */\n  subject?: string;\n  /** Last-message preview — rendered as plain text, clamped to two lines. */\n  preview: string;\n  /** ISO-8601 timestamp of when the message was sent. */\n  sentAt: string;\n  /** Whether the message has been seen. Unread items get accent styling. */\n  read?: boolean;\n  /** Optional deep link — when present the card row is an anchor. */\n  url?: string;\n  /**\n   * Count of unread messages inside a thread. Rendered as an end-aligned\n   * badge when greater than 1.\n   */\n  unreadCount?: number;\n}\n\nexport interface MessageCardProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n    VariantProps<typeof cardVariants> {\n  /** The message to render. */\n  item: MessageItem;\n  /**\n   * Layout shape.\n   * - `compact` — single-line row with the whole card clickable (used by\n   *   MessageTray).\n   * - `dashboard` — bordered block with explicit CTA and mark-as-read\n   *   controls (used by dashboards / sidebars).\n   */\n  variant?: 'compact' | 'dashboard';\n  /** Visual density. */\n  size?: 'sm' | 'md';\n  /** Fires when the row / title is activated. */\n  onActivate?: (item: MessageItem) => void;\n  /** Fires when the dismiss control is activated. */\n  onDismiss?: (item: MessageItem) => void;\n  /**\n   * Label for the dashboard-variant CTA. Only rendered when `variant` is\n   * `'dashboard'` and the item has a `url`.\n   */\n  ctaLabel?: string;\n  /**\n   * Label for the dashboard-variant mark-as-read link. Only rendered when\n   * `variant` is `'dashboard'` and `onDismiss` is supplied.\n   */\n  dismissLabel?: string;\n  /**\n   * External exit-animation control. When supplied the card plays its\n   * fade-out when this turns `true` and the consumer owns the subsequent\n   * unmount (see MessageTray). If omitted, the card self-manages the\n   * exit on internal dismiss.\n   */\n  leaving?: boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n  [\n    'ds:relative ds:flex ds:gap-[var(--spacing-sm)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:transition-colors',\n    'ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2 ds:motion-safe:duration-[var(--animation-duration)]',\n    'ds:data-[leaving=true]:motion-safe:animate-out ds:data-[leaving=true]:motion-safe:fade-out-0 ds:data-[leaving=true]:motion-safe:slide-out-to-top-2',\n    'ds:data-[leaving=true]:motion-safe:fill-mode-forwards',\n    'ds:data-[leaving=true]:pointer-events-none',\n    'ds:motion-reduce:transition-none',\n    'ds:text-start',\n    'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        compact: 'ds:items-start ds:group',\n        dashboard:\n          'ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--border)] ds:bg-[color:var(--card)]',\n      },\n      size: {\n        sm: 'ds:p-[var(--spacing-sm)]',\n        md: 'ds:p-[var(--spacing-md)]',\n      },\n      state: {\n        unread: '',\n        read: 'ds:bg-transparent',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'compact',\n        state: 'unread',\n        class: 'ds:bg-[color:var(--accent)]/5',\n      },\n      {\n        variant: 'compact',\n        state: 'read',\n        class: 'ds:hover:bg-[color:var(--muted)]/40',\n      },\n      {\n        variant: 'dashboard',\n        state: 'unread',\n        class: 'ds:bg-[color:var(--accent)]/5',\n      },\n    ],\n    defaultVariants: {\n      variant: 'compact',\n      size: 'sm',\n      state: 'read',\n    },\n  },\n);\n\nconst stretchedLinkClass = [\n  'ds:focus-visible:outline-none',\n  \"ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]\",\n  'ds:after:pointer-events-auto',\n  'ds:focus-visible:after:outline-[length:var(--focus-ring-width)]',\n  'ds:focus-visible:after:outline-solid',\n  'ds:focus-visible:after:outline-[color:var(--ring)]',\n  'ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]',\n  'ds:forced-colors:focus-visible:after:outline-[CanvasText]',\n].join(' ');\n\n/* ------------------------------------------------------------------ */\n/* Helpers                                                             */\n/* ------------------------------------------------------------------ */\n\nexport function isSafeMessageUrl(url: string): boolean {\n  // Reject protocol-relative (//host), javascript:, data:, mailto: etc.\n  // Only http(s), same-origin absolute paths (/), and hash (#) anchors pass.\n  return /^(https?:\\/\\/(?!\\/)|\\/(?!\\/)|#)/.test(url);\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const MessageCard = forwardRef<HTMLDivElement, MessageCardProps>(\n  (\n    {\n      item,\n      variant = 'compact',\n      size = 'sm',\n      onActivate,\n      onDismiss,\n      ctaLabel,\n      dismissLabel,\n      leaving,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n\n    const accessibleTime = useMemo(() => {\n      const date = new Date(item.sentAt);\n      if (Number.isNaN(date.getTime())) return '';\n      return new Intl.DateTimeFormat(i18n.language, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      }).format(date);\n    }, [item.sentAt, i18n.language]);\n\n    const isControlledLeaving = leaving !== undefined;\n    const [isLeaving, setIsLeaving] = useState(false);\n    const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const effectiveLeaving = isControlledLeaving ? leaving : isLeaving;\n\n    const prefersReducedMotion =\n      typeof window !== 'undefined' &&\n      typeof window.matchMedia === 'function' &&\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    const handleDismiss = useCallback(\n      (event?: React.MouseEvent) => {\n        // The card carries a stretched-link `::after` overlay for the\n        // whole-row click target. The dismiss button is rendered above it\n        // (z-index), but click events still bubble — stop propagation so the\n        // wrapper's navigation does not fire alongside the dismiss action.\n        event?.preventDefault();\n        event?.stopPropagation();\n        if (!onDismiss) return;\n        if (isControlledLeaving || prefersReducedMotion) {\n          onDismiss(item);\n          return;\n        }\n        setIsLeaving(true);\n        if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);\n        const raw =\n          (typeof window !== 'undefined' &&\n            window\n              .getComputedStyle(document.documentElement)\n              .getPropertyValue('--animation-duration')) ||\n          '200ms';\n        const ms = raw.trim().endsWith('ms')\n          ? parseFloat(raw)\n          : parseFloat(raw) * 1000;\n        dismissTimerRef.current = setTimeout(\n          () => onDismiss(item),\n          Number.isFinite(ms) ? ms : 200,\n        );\n      },\n      [onDismiss, item, isControlledLeaving, prefersReducedMotion],\n    );\n\n    const state = item.read ? 'read' : 'unread';\n\n    const unreadSuffix = item.read\n      ? ''\n      : t('ui.messageCard.unreadSuffix', ', unread');\n    const subjectFragment = item.subject\n      ? t('ui.messageCard.subjectFragment', {\n          subject: item.subject,\n          defaultValue: ' — {{subject}}',\n        })\n      : '';\n    const ariaLabel = t('ui.messageCard.itemLabel', {\n      sender: item.sender.name,\n      subjectFragment,\n      time: accessibleTime,\n      unreadSuffix,\n      defaultValue:\n        'Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}',\n    });\n\n    const hasSafeUrl = !!item.url && isSafeMessageUrl(item.url);\n\n    /* ------- Sender-name rendering (stretched link in compact mode) ------ */\n\n    const senderText = (\n      <span\n        className={[\n          'ds:flex-1 ds:min-w-0 ds:truncate',\n          item.read ? 'ds:font-normal' : 'ds:font-semibold',\n        ].join(' ')}\n      >\n        {item.sender.name}\n      </span>\n    );\n\n    let senderNode: ReactNode;\n    if (variant === 'compact' && hasSafeUrl && onActivate) {\n      senderNode = (\n        <a\n          href={item.url}\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' ds:contents'}\n          onClick={(event) => {\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            onActivate(item);\n          }}\n        >\n          {senderText}\n        </a>\n      );\n    } else if (variant === 'compact' && onActivate) {\n      senderNode = (\n        <button\n          type=\"button\"\n          aria-label={ariaLabel}\n          className={\n            stretchedLinkClass +\n            ' ds:contents ds:bg-transparent ds:border-0 ds:p-0'\n          }\n          onClick={() => onActivate(item)}\n        >\n          {senderText}\n        </button>\n      );\n    } else if (variant === 'dashboard' && hasSafeUrl && onActivate) {\n      senderNode = (\n        <a\n          href={item.url}\n          className=\"ds:text-[color:var(--foreground)] ds:no-underline ds:hover:underline ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]\"\n          onClick={(event) => {\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            onActivate(item);\n          }}\n        >\n          {senderText}\n        </a>\n      );\n    } else {\n      senderNode = senderText;\n    }\n\n    const showThreadCount =\n      typeof item.unreadCount === 'number' && item.unreadCount > 1;\n\n    return (\n      <div\n        ref={ref}\n        role=\"listitem\"\n        data-component=\"message-card\"\n        data-component-id={item.id}\n        data-read={item.read ? 'true' : 'false'}\n        data-leaving={effectiveLeaving ? 'true' : undefined}\n        aria-hidden={effectiveLeaving || undefined}\n        className={cardVariants({ variant, size, state, className })}\n        {...rest}\n      >\n        {/* Avatar is decorative here — the row's assembled `aria-label`\n            already names the sender, so letting Avatar contribute its own\n            `role=\"img\"` + `aria-label={name}` would announce the name twice\n            per row. `aria-hidden` + `role=\"presentation\"` (spread last, so\n            they win over Avatar's internal values) pulls the element out of\n            the a11y tree entirely. */}\n        <Avatar\n          name={item.sender.name}\n          src={item.sender.avatarUrl}\n          size={size === 'md' ? 'md' : 'sm'}\n          className=\"ds:shrink-0\"\n          aria-hidden=\"true\"\n          role=\"presentation\"\n          aria-label={undefined}\n        />\n\n        <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\">\n          <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n            {!item.read ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]\"\n              />\n            ) : null}\n            {variant === 'dashboard' ? (\n              <h3 className=\"ds:m-0 ds:flex-1 ds:min-w-0 type-title-item\">\n                {senderNode}\n              </h3>\n            ) : (\n              <span className=\"ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]\">\n                {senderNode}\n              </span>\n            )}\n            {showThreadCount ? (\n              <span\n                aria-label={t('ui.messageCard.threadCount', {\n                  count: item.unreadCount,\n                  defaultValue_one: '{{count}} new message in thread',\n                  defaultValue_other: '{{count}} new messages in thread',\n                })}\n                className=\"ds:relative ds:z-[1] ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center 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(--accent)] ds:text-[color:var(--accent-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]\"\n              >\n                {item.unreadCount}\n              </span>\n            ) : null}\n          </div>\n\n          {item.subject ? (\n            <p\n              className={[\n                'ds:m-0 type-body-sm ds:text-[color:var(--foreground)] ds:truncate',\n                item.read ? 'ds:font-normal' : 'ds:font-semibold',\n              ].join(' ')}\n            >\n              {item.subject}\n            </p>\n          ) : null}\n\n          <p className=\"ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words\">\n            {item.preview}\n          </p>\n\n          <Timestamp\n            value={item.sentAt}\n            shape=\"chip\"\n            size=\"sm\"\n            relativeWindow={12 * 60 * 60 * 1000}\n          />\n\n          {variant === 'dashboard' && (ctaLabel || dismissLabel) ? (\n            <div className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]\">\n              {ctaLabel && hasSafeUrl ? (\n                <Button\n                  intent=\"outline\"\n                  size=\"sm\"\n                  asChild\n                  className=\"ds:relative ds:z-[1]\"\n                >\n                  <a\n                    href={item.url}\n                    onClick={(event) => {\n                      if (\n                        event.defaultPrevented ||\n                        event.metaKey ||\n                        event.ctrlKey ||\n                        event.shiftKey\n                      )\n                        return;\n                      onActivate?.(item);\n                    }}\n                  >\n                    {ctaLabel}\n                  </a>\n                </Button>\n              ) : null}\n              {dismissLabel && onDismiss ? (\n                <Button\n                  intent=\"link\"\n                  size=\"sm\"\n                  onClick={handleDismiss}\n                  className=\"ds:relative ds:z-[1]\"\n                >\n                  {dismissLabel}\n                </Button>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n\n        {variant === 'compact' && onDismiss ? (\n          <span className=\"ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none\">\n            <IconButton\n              icon={<X />}\n              intent=\"ghost\"\n              size=\"sm\"\n              aria-label={t('ui.messageCard.dismiss', 'Dismiss message')}\n              onClick={handleDismiss}\n            />\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nMessageCard.displayName = 'MessageCard';\n"],"names":["cardVariants","cva","stretchedLinkClass","isSafeMessageUrl","url","MessageCard","forwardRef","item","variant","size","onActivate","onDismiss","ctaLabel","dismissLabel","leaving","className","rest","ref","t","i18n","useTranslation","accessibleTime","useMemo","date","isControlledLeaving","isLeaving","setIsLeaving","useState","dismissTimerRef","useRef","effectiveLeaving","prefersReducedMotion","handleDismiss","useCallback","event","raw","ms","state","unreadSuffix","subjectFragment","ariaLabel","hasSafeUrl","senderText","jsx","senderNode","showThreadCount","jsxs","Avatar","Timestamp","Button","IconButton","X"],"mappings":"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"}

package/dist/_chunks/{message-tray-xHUCra-Y.js → message-tray-n8q9ITXI.js}

@@ -1,16 +1,16 @@
 import { jsx as s, jsxs as c, Fragment as L } from "react/jsx-runtime";
-import { forwardRef as de, useState as q, useCallback as F, useLayoutEffect as oe, useEffect as H, useRef as p, useMemo as ce, useImperativeHandle as le } from "react";
+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 k } from "./index-D2ZczOXr.js";
+import { c as S } from "./index-D2ZczOXr.js";
 import { useTranslation as W } from "react-i18next";
-import { I as me } from "./icon-button-Wnnde5lc.js";
-import { B as _ } from "./button-7mLWcMp_.js";
-import { S as U } from "./separator-B4wXDLNC.js";
-import { S as g } from "./skeleton-dtqyF09N.js";
-import { M as ue } from "./message-card-qhoGv947.js";
-import { u as pe } from "./registry-C9nwlNyL.js";
+import { I as ue } from "./icon-button-C4CGcYuz.js";
+import { B as _ } from "./button-DD_0Xdmr.js";
+import { S as U } from "./separator-CYU_bGFn.js";
+import { S as g } from "./skeleton-CZbwyJAA.js";
+import { M as pe } from "./message-card-ChCX9Iv6.js";
+import { u as ge } from "./registry-C9nwlNyL.js";
 import { M as Y } from "./mail-C8irm52s.js";
-const ge = {
+const fe = {
   id: "message-tray",
   capabilities: ["open", "close", "select_single", "dismiss"],
   state: {
@@ -94,7 +94,7 @@ const ge = {
       description: "Stable message id emitted on each rendered MessageCard inside the tray."
     }
   }
-}, fe = k("ds:relative ds:inline-flex ds:items-center", {
+}, ve = S("ds:relative ds:inline-flex ds:items-center", {
   variants: {
     size: {
       sm: "",
@@ -104,7 +104,7 @@ const ge = {
   defaultVariants: {
     size: "md"
   }
-}), ve = k(
+}), ye = S(
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
@@ -140,7 +140,7 @@ const ge = {
       size: "md"
     }
   }
-), ye = k(
+), he = S(
   [
     "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
     "ds:inline-flex ds:items-center ds:justify-center",
@@ -152,10 +152,10 @@ const ge = {
     "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
   ].join(" ")
 );
-function he(a, t) {
+function xe(a, t) {
   return a > 99 ? t : String(a);
 }
-function S() {
+function R() {
   return /* @__PURE__ */ c(
     "div",
     {
@@ -173,7 +173,7 @@ function S() {
     }
   );
 }
-function xe() {
+function be() {
   const { t: a } = W();
   return /* @__PURE__ */ c(
     "div",
@@ -191,28 +191,25 @@ function xe() {
           }
         ),
         /* @__PURE__ */ s("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: a("ui.messageTray.noMessages", "No messages") }),
-        /* @__PURE__ */ s("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: a(
-          "ui.messageTray.noMessagesDescription",
-          "Your inbox is clear."
-        ) })
+        /* @__PURE__ */ s("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: a("ui.messageTray.noMessagesDescription", "Your inbox is clear.") })
       ]
     }
   );
 }
-const be = de(
+const Te = oe(
   ({
     id: a,
     items: t,
     unreadCount: T,
-    open: C,
+    open: k,
     onOpenChange: f,
-    onItemClick: m,
-    onDismiss: u,
+    onItemClick: u,
+    onDismiss: p,
     onMarkRead: v,
-    onMarkAllRead: j,
+    onMarkAllRead: C,
     loading: G = !1,
     maxVisible: J,
-    viewAllLabel: I,
+    viewAllLabel: j,
     onViewAll: Q,
     align: X = "end",
     side: Z = "bottom",
@@ -221,25 +218,25 @@ const be = de(
     ...D
   }, ee) => {
     var A;
-    const { t: d } = W(), N = C !== void 0, [se, ae] = q(!1), z = N ? C : se, y = F(
+    const { t: d } = W(), N = k !== void 0, [se, ae] = q(!1), z = N ? k : se, y = F(
       (e) => {
         N || ae(e), f == null || f(e);
       },
       [N, f]
-    ), [h, K] = q(
+    ), [h, I] = q(
       () => t.map((e) => ({ item: e, leaving: !1 }))
-    ), O = F(() => {
+    ), K = F(() => {
       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;
     }, []);
-    oe(() => {
-      K((e) => {
+    ce(() => {
+      I((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((ie) => ie.id === i.item.id);
+            const E = t.find((de) => de.id === i.item.id);
             return E ? { item: E, leaving: !1 } : { ...i, leaving: !0 };
           }
           return { ...i, leaving: !0 };
@@ -250,49 +247,46 @@ const be = de(
       });
     }, [t]), H(() => {
       if (!h.some((n) => n.leaving)) return;
-      const e = O(), r = setTimeout(() => {
-        K((n) => n.filter((o) => !o.leaving));
+      const e = K(), r = setTimeout(() => {
+        I((n) => n.filter((o) => !o.leaving));
       }, e);
       return () => clearTimeout(r);
-    }, [h, O]);
-    const M = p(null), V = p((A = t[0]) == null ? void 0 : A.id);
+    }, [h, K]);
+    const M = m(null), O = m((A = t[0]) == null ? void 0 : A.id);
     H(() => {
       var n;
-      const e = (n = t[0]) == null ? void 0 : n.id, r = V.current;
+      const e = (n = t[0]) == null ? void 0 : n.id, r = O.current;
       if (r && e && r !== e && M.current) {
         const o = t[0];
-        o && !o.read && (M.current.textContent = d(
-          "ui.messageTray.newMessage",
-          {
-            sender: o.sender.name,
-            defaultValue: "New message from {{sender}}"
-          }
-        ));
+        o && !o.read && (M.current.textContent = d("ui.messageTray.newMessage", {
+          sender: o.sender.name,
+          defaultValue: "New message from {{sender}}"
+        }));
       }
-      V.current = e;
+      O.current = e;
     }, [t, d]);
     const x = T ?? 0, te = x > 0 ? d("ui.messageTray.triggerLabel", {
       count: x,
       defaultValue: "Messages, {{count}} unread"
-    }) : d("ui.messageTray.triggerLabelNone", "Messages, none unread"), re = he(
+    }) : d("ui.messageTray.triggerLabelNone", "Messages, none unread"), re = xe(
       x,
       d("ui.messageTray.badgeCountOverflow", "99+")
-    ), ne = ve({ size: w }), l = p(t);
+    ), ne = ye({ size: w }), l = m(t);
     l.current = t;
-    const P = p(T);
-    P.current = T;
-    const B = p(z);
-    B.current = z;
-    const R = ce(
+    const V = m(T);
+    V.current = T;
+    const P = m(z);
+    P.current = z;
+    const ie = le(
       () => ({
         open: () => y(!0),
         close: () => y(!1),
-        isOpen: () => B.current,
+        isOpen: () => P.current,
         getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
-        getUnreadCount: () => P.current ?? l.current.filter((e) => !e.read).length,
+        getUnreadCount: () => V.current ?? l.current.filter((e) => !e.read).length,
         selectItem: (e) => {
           const r = l.current.find((n) => n.id === e);
-          r && (m == null || m(r));
+          r && (u == null || u(r));
         },
         markRead: (e) => {
           const r = l.current.find((n) => n.id === e);
@@ -300,21 +294,22 @@ const be = de(
         },
         dismiss: (e) => {
           const r = l.current.find((n) => n.id === e);
-          r && (u == null || u(r));
+          r && (p == null || p(r));
         }
       }),
-      [y, m, v, u]
-    );
-    return le(ee, () => R, [R]), pe(ge, R, a), /* @__PURE__ */ s(
+      [y, u, v, p]
+    ), B = m(null);
+    return me(ee, () => B.current, []), ge(fe, ie, a), /* @__PURE__ */ s(
       "div",
       {
+        ref: B,
         "data-component": "message-tray",
         "data-component-id": a,
-        className: [fe({ size: w }), $].filter(Boolean).join(" "),
+        className: [ve({ size: w }), $].filter(Boolean).join(" "),
         ...D,
         children: /* @__PURE__ */ c(b.Root, { open: z, onOpenChange: y, children: [
           /* @__PURE__ */ s(b.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
-            me,
+            ue,
             {
               icon: /* @__PURE__ */ s(Y, {}),
               intent: "outline",
@@ -328,7 +323,7 @@ const be = de(
             {
               "aria-hidden": "true",
               "data-testid": "message-tray-badge",
-              className: ye(),
+              className: he(),
               children: re
             }
           ) : null,
@@ -354,12 +349,12 @@ const be = de(
               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("ui.messageTray.panelTitle", "Messages") }),
-                  j && t.some((e) => !e.read) ? /* @__PURE__ */ s(
+                  C && t.some((e) => !e.read) ? /* @__PURE__ */ s(
                     _,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: j,
+                      onClick: C,
                       className: "ds:text-[length:var(--font-size-xs)]",
                       children: d("ui.messageTray.markAllRead", "Mark all as read")
                     }
@@ -373,24 +368,24 @@ const be = de(
                     "data-max-visible": J,
                     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(S, {}),
-                      /* @__PURE__ */ s(S, {}),
-                      /* @__PURE__ */ s(S, {})
-                    ] }) : h.length === 0 ? /* @__PURE__ */ s(xe, {}) : h.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
-                      ue,
+                      /* @__PURE__ */ s(R, {}),
+                      /* @__PURE__ */ s(R, {}),
+                      /* @__PURE__ */ s(R, {})
+                    ] }) : h.length === 0 ? /* @__PURE__ */ s(be, {}) : h.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
+                      pe,
                       {
                         item: e,
                         variant: "compact",
                         leaving: r,
-                        onActivate: m,
-                        onDismiss: u,
+                        onActivate: u,
+                        onDismiss: p,
                         "data-message-id": e.id
                       },
                       e.id
                     ))
                   }
                 ),
-                I ? /* @__PURE__ */ c(L, { children: [
+                j ? /* @__PURE__ */ c(L, { children: [
                   /* @__PURE__ */ s(U, {}),
                   /* @__PURE__ */ s("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ s(
                     _,
@@ -399,7 +394,7 @@ const be = de(
                       size: "sm",
                       onClick: Q,
                       className: "ds:w-full ds:justify-center",
-                      children: I
+                      children: j
                     }
                   ) })
                 ] }) : null
@@ -411,9 +406,9 @@ const be = de(
     );
   }
 );
-be.displayName = "MessageTray";
+Te.displayName = "MessageTray";
 export {
-  be as M,
-  ge as m
+  Te as M,
+  fe as m
 };
-//# sourceMappingURL=message-tray-xHUCra-Y.js.map
+//# sourceMappingURL=message-tray-n8q9ITXI.js.map