@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/notification-card-D2jiKSJJ.js

@@ -1,259 +0,0 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as M, useMemo as P, useState as R, useRef as B, useCallback as L } from "react";
-import { c as _ } from "./index-D2ZczOXr.js";
-import { useTranslation as D } from "react-i18next";
-import { I as U } from "./icon-button-LqoiKcUN.js";
-import { B as N } from "./button-DD_0Xdmr.js";
-import { T as W } from "./timestamp-BV2lC-wV.js";
-import { X as E } from "./x-CCcI3eJp.js";
-const H = _(
-  [
-    "ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
-    "ds:rounded-[var(--radius-sm)]",
-    "ds:transition-colors",
-    // Mount: fade + slide-down so a fresh notification reads as arriving.
-    // `data-leaving=true` plays the matching exit, driven by the owning
-    // tray's AnimatePresence loop.
-    "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)]",
-    "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",
-    // Pin the exit's end-state until React unmounts. Without `fill-mode-forwards`
-    // tw-animate-css leaves the element at opacity:1 for one paint frame after
-    // the animation ends — the "flicker before it animates away" bug.
-    "ds:data-[leaving=true]:motion-safe:fill-mode-forwards",
-    "ds:data-[leaving=true]:pointer-events-none",
-    "ds:motion-reduce:transition-none",
-    "ds:text-start",
-    // Compact rows are borderless (flat list — the tray panel is the frame);
-    // the dashboard variant adds its own card border below. Forced-colors keeps
-    // a border on both so rows stay separated in High Contrast Mode.
-    "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        // Flat rows by default; the accessible (AAA) theme restores a hairline
-        // row divider so consecutive rows keep a visible boundary.
-        compact: "ds:items-start ds:[.theme-accessible_&]:border-b ds:[.theme-accessible_&]:border-[color:var(--card-border)]",
-        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-card)] ds:bg-[color:var(--card)]"
-      },
-      size: {
-        sm: "ds:p-[var(--spacing-sm)]",
-        md: "ds:p-[var(--spacing-md)]"
-      },
-      state: {
-        unread: "",
-        read: "ds:bg-transparent"
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "compact",
-        state: "unread",
-        class: "ds:bg-[color:var(--accent)]/5"
-      },
-      {
-        variant: "compact",
-        state: "read",
-        class: "ds:hover:bg-[color:var(--muted)]/40"
-      },
-      {
-        variant: "dashboard",
-        state: "unread",
-        class: "ds:bg-[color:var(--accent)]/5"
-      }
-    ],
-    defaultVariants: {
-      variant: "compact",
-      size: "sm",
-      state: "read"
-    }
-  }
-), C = [
-  "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",
-  "ds:focus-visible:after:outline-[length:var(--focus-ring-width)]",
-  "ds:focus-visible:after:outline-solid",
-  "ds:focus-visible:after:outline-[color:var(--ring)]",
-  "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
-  "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
-].join(" ");
-function X(e) {
-  return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(e);
-}
-const q = M(
-  ({
-    item: e,
-    variant: t = "compact",
-    size: k = "sm",
-    onActivate: r,
-    onDismiss: d,
-    ctaLabel: l,
-    dismissLabel: c,
-    leaving: h,
-    className: z,
-    ...T
-  }, K) => {
-    const { t: u, i18n: v } = D(), S = P(() => {
-      const s = new Date(e.createdAt);
-      return Number.isNaN(s.getTime()) ? "" : new Intl.DateTimeFormat(v.language, {
-        dateStyle: "medium",
-        timeStyle: "short"
-      }).format(s);
-    }, [e.createdAt, v.language]), f = h !== void 0, [j, V] = R(!1), m = B(null), b = f ? h : j, g = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, w = L(() => {
-      if (!d) return;
-      if (f || g) {
-        d(e);
-        return;
-      }
-      V(!0), m.current && clearTimeout(m.current);
-      const s = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", y = s.trim().endsWith("ms") ? parseFloat(s) : parseFloat(s) * 1e3;
-      m.current = setTimeout(
-        () => d(e),
-        Number.isFinite(y) ? y : 200
-      );
-    }, [d, e, f, g]), F = e.read ? "read" : "unread", I = e.read ? "" : u("notificationCard.unreadSuffix", ", unread"), x = u("notificationCard.itemLabel", {
-      title: e.title,
-      time: S,
-      unreadSuffix: I,
-      defaultValue: "{{title}}, {{time}}{{unreadSuffix}}"
-    }), p = !!e.url && X(e.url), i = /* @__PURE__ */ a(
-      "span",
-      {
-        className: [
-          "ds:flex-1 ds:min-w-0 ds:truncate",
-          e.read ? "ds:font-normal" : "ds:font-semibold"
-        ].join(" "),
-        children: e.title
-      }
-    );
-    let o;
-    return t === "compact" && p && r ? o = /* @__PURE__ */ a(
-      "a",
-      {
-        href: e.url,
-        "aria-label": x,
-        className: C + " ds:contents",
-        onClick: (s) => {
-          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), r(e));
-        },
-        children: i
-      }
-    ) : t === "compact" && r ? o = /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        "aria-label": x,
-        className: C + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
-        onClick: () => r(e),
-        children: i
-      }
-    ) : t === "dashboard" && p && r ? o = /* @__PURE__ */ a(
-      "a",
-      {
-        href: e.url,
-        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)]",
-        onClick: (s) => {
-          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), r(e));
-        },
-        children: i
-      }
-    ) : o = i, /* @__PURE__ */ n(
-      "div",
-      {
-        ref: K,
-        role: "listitem",
-        "data-component": "notification-card",
-        "data-component-id": e.id,
-        "data-read": e.read ? "true" : "false",
-        "data-leaving": b ? "true" : void 0,
-        "aria-hidden": b || void 0,
-        className: H({ variant: t, size: k, state: F, className: z }),
-        ...T,
-        children: [
-          e.icon ? /* @__PURE__ */ a(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center ds:size-8 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)]/10 ds:text-[color:var(--accent)] ds:[&>svg]:size-4",
-              children: e.icon
-            }
-          ) : null,
-          /* @__PURE__ */ n("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
-            /* @__PURE__ */ n("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
-              e.read ? null : /* @__PURE__ */ a(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  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]"
-                }
-              ),
-              t === "dashboard" ? (
-                // `h3` keeps the dashboard heading ladder continuous:
-                // h1 (page) → h2 (WarningStack + NotificationsPanel) → h3 (notification title).
-                /* @__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 })
-            ] }),
-            e.description ? /* @__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.description }) : null,
-            /* @__PURE__ */ a(
-              W,
-              {
-                value: e.createdAt,
-                shape: "chip",
-                size: "sm",
-                relativeWindow: 720 * 60 * 1e3
-              }
-            ),
-            t === "dashboard" && (l || c) ? /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
-              l && p ? /* @__PURE__ */ a(
-                N,
-                {
-                  intent: "outline",
-                  size: "sm",
-                  asChild: !0,
-                  className: "ds:relative ds:z-[1]",
-                  children: /* @__PURE__ */ a(
-                    "a",
-                    {
-                      href: e.url,
-                      onClick: (s) => {
-                        s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), r == null || r(e));
-                      },
-                      children: l
-                    }
-                  )
-                }
-              ) : null,
-              c && d ? /* @__PURE__ */ a(
-                N,
-                {
-                  intent: "link",
-                  size: "sm",
-                  onClick: w,
-                  className: "ds:relative ds:z-[1]",
-                  children: c
-                }
-              ) : null
-            ] }) : null
-          ] }),
-          t === "compact" && d ? /* @__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(
-            U,
-            {
-              icon: /* @__PURE__ */ a(E, {}),
-              intent: "ghost",
-              size: "sm",
-              "aria-label": u("notificationCard.dismiss", "Dismiss notification"),
-              onClick: w
-            }
-          ) }) : null
-        ]
-      }
-    );
-  }
-);
-q.displayName = "NotificationCard";
-export {
-  q as N,
-  X as i
-};
-//# sourceMappingURL=notification-card-D2jiKSJJ.js.map