@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/macos/tahoe/layout/dock-tahoe.mjs

@@ -0,0 +1,279 @@
+import { jsx as r, jsxs as g, Fragment as $ } from "react/jsx-runtime";
+import { useRef as j, useState as y, useEffect as I } from "react";
+import s from "classnames";
+import { useLocation as _, useNavigate as z } from "react-router-dom";
+import { ChevronDown as F, ChevronUp as K } from "lucide-react";
+import { matchesPath as L } from "../../../layouts/macos-layout/utils.mjs";
+const C = 40;
+function U({
+  item: e,
+  isActive: c,
+  showTooltip: d,
+  onClick: h,
+  isVertical: l
+}) {
+  const [w, i] = y(!1), [a, u] = y(!1), f = j(null), m = e.dropdownItems && e.dropdownItems.filter((t) => !t.hide).length > 0, k = () => {
+    m ? u((t) => !t) : h();
+  }, N = () => {
+    d && !a && i(!0);
+  }, E = () => {
+    i(!1);
+  };
+  return I(() => {
+    if (!a) return;
+    const t = (x) => {
+      f.current && !f.current.contains(x.target) && u(!1);
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [a]), I(() => {
+    if (!a) return;
+    const t = (x) => {
+      x.key === "Escape" && u(!1);
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [a]), /* @__PURE__ */ g("div", { ref: f, className: "relative flex flex-col items-center", children: [
+    w && !a && /* @__PURE__ */ r(
+      "div",
+      {
+        className: s(
+          "pointer-events-none absolute z-50 whitespace-nowrap rounded-[8px] px-[10px] py-[4px] text-[12px] font-medium shadow-lg",
+          "bg-(--macos-tahoe-panel-bg) text-(--macos-tahoe-text) border border-border backdrop-blur-xl",
+          l ? "left-full ml-[8px] top-1/2 -translate-y-1/2" : "bottom-full mb-[8px] left-1/2 -translate-x-1/2"
+        ),
+        children: e.name
+      }
+    ),
+    a && m && /* @__PURE__ */ r(
+      "div",
+      {
+        className: s(
+          "absolute z-50 min-w-[180px] rounded-[16px] p-[6px]",
+          "bg-(--macos-glass-prominent-bg) backdrop-blur-xl backdrop-saturate-[1.8]",
+          "border border-border",
+          "shadow-(--macos-glass-shadow,0_8px_32px_rgba(0,0,0,0.15))",
+          "animate-in fade-in slide-in-from-bottom-2 duration-200",
+          l ? "left-full ml-[8px] top-0" : "bottom-full mb-[8px] left-1/2 -translate-x-1/2"
+        ),
+        children: e.dropdownItems?.filter((t) => !t.hide).map((t) => /* @__PURE__ */ r(
+          X,
+          {
+            item: t,
+            onClose: () => u(!1)
+          },
+          t.path
+        ))
+      }
+    ),
+    /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        "aria-label": e.name,
+        onClick: k,
+        onMouseEnter: N,
+        onMouseLeave: E,
+        className: s(
+          "relative flex items-center justify-center rounded-[12px] transition-all duration-150 ease-out",
+          c ? "bg-(--color-brand) shadow-sm" : "hover:bg-(--color-brand)/15 hover:scale-110",
+          a && "bg-(--color-brand)/15 scale-110"
+        ),
+        style: { width: C, height: C },
+        children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: s(
+                "flex items-center justify-center [&>svg]:w-[20px] [&>svg]:h-[20px] transition-colors duration-150",
+                c ? "text-white" : "text-foreground/50!"
+              ),
+              children: e.icon
+            }
+          ),
+          m && /* @__PURE__ */ r(
+            K,
+            {
+              className: s(
+                "absolute w-[10px] h-[10px] transition-all duration-200 ease-out",
+                l ? "left-[2px] top-1/2 -translate-y-1/2 -rotate-90" : "top-[2px] left-1/2 -translate-x-1/2",
+                a && !l && "top-0 -translate-y-[2px]",
+                a && l && "left-0 -translate-x-[2px]",
+                c ? "text-white/70" : "text-(--macos-tahoe-sidebar-item-icon)/50 dark:text-white/30"
+              ),
+              strokeWidth: 2.5
+            }
+          )
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ r(
+      "div",
+      {
+        className: s(
+          "absolute rounded-full bg-(--color-brand)",
+          l ? "right-0 top-1/2 -translate-y-1/2 translate-x-[4px] h-[4px] w-[4px]" : "bottom-0 left-1/2 -translate-x-1/2 translate-y-[4px] h-[4px] w-[4px]"
+        )
+      }
+    )
+  ] });
+}
+function X({ item: e, onClose: c }) {
+  const d = z(), { pathname: h } = _(), l = L(h, e.path, !0);
+  return /* @__PURE__ */ g(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        e.onClick && e.onClick();
+        const i = e.href ?? e.path;
+        /^https?:\/\//i.test(i) ? window.location.href = i : d(i), c();
+      },
+      className: s(
+        "flex w-full items-center gap-[10px] rounded-[8px] px-[10px] py-[6px] text-left text-[13px] transition-colors",
+        l ? "bg-(--macos-tahoe-sidebar-item-active-bg) text-brand! font-semibold" : "text-foreground! hover:bg-(--macos-tahoe-sidebar-item-hover-bg)"
+      ),
+      children: [
+        e.icon && /* @__PURE__ */ r(
+          "span",
+          {
+            className: s(
+              "flex h-[16px] w-[16px] shrink-0 items-center justify-center [&>svg]:h-[16px] [&>svg]:w-[16px]",
+              l ? "text-brand!" : "text-foreground/50!"
+            ),
+            children: e.icon
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "flex-1 truncate", children: e.name })
+      ]
+    }
+  );
+}
+function M({ isVertical: e }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: s(
+        "shrink-0 rounded-full bg-(--macos-tahoe-toolbar-bg) opacity-60",
+        e ? "mx-auto my-[4px] h-px w-[32px]" : "my-auto mx-[4px] h-[32px] w-px"
+      )
+    }
+  );
+}
+function V({
+  items: e,
+  separatorBeforeIndex: c,
+  position: d = "bottom",
+  magnification: h = !0,
+  maxScale: l = 1.12,
+  showTooltips: w = !0,
+  autoHide: i = !1,
+  inline: a = !1,
+  showHideButton: u = !1,
+  onHide: f,
+  className: m
+}) {
+  const { pathname: k } = _(), N = z(), E = j(null), [t, x] = y(!1), [D, b] = y(!i), p = d === "left", O = e.filter((o) => !o.hide);
+  I(() => {
+    if (!i) {
+      b(!0);
+      return;
+    }
+    if (t) {
+      b(!0);
+      return;
+    }
+    const o = (v) => {
+      (d === "bottom" && v.clientY >= window.innerHeight - 8 || d === "left" && v.clientX <= 8) && b(!0);
+    }, n = setTimeout(() => b(!1), 800);
+    return document.addEventListener("mousemove", o), () => {
+      clearTimeout(n), document.removeEventListener("mousemove", o);
+    };
+  }, [i, t, d]);
+  const S = () => {
+    x(!0);
+  }, T = () => {
+    x(!1);
+  }, P = (o) => !!(o.isActive || L(k, o.path, !1) || o.dropdownItems?.some(
+    (n) => n.isActive || L(k, n.path, !0)
+  )), R = (o) => {
+    o.onClick && o.onClick();
+    const n = o.href ?? o.path;
+    /^https?:\/\//i.test(n) ? window.location.href = n : N(n);
+  }, A = () => {
+    const o = [];
+    return O.forEach((n, v) => {
+      c !== void 0 && v === c && o.push(
+        /* @__PURE__ */ r(M, { isVertical: p }, `sep-${v}`)
+      ), o.push(
+        /* @__PURE__ */ r(
+          U,
+          {
+            item: n,
+            isActive: P(n),
+            showTooltip: w,
+            onClick: () => R(n),
+            isVertical: p
+          },
+          n.path
+        )
+      );
+    }), o;
+  }, W = h && t ? l : 1;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-tucu": "tahoe-dock",
+      ref: E,
+      onMouseEnter: S,
+      onMouseLeave: T,
+      className: s(
+        "flex items-end justify-center",
+        a ? p ? "relative flex-col" : "relative flex-row" : p ? "fixed left-[12px] top-1/2 z-50 -translate-y-1/2 flex-col" : "fixed bottom-[12px] left-1/2 z-50 -translate-x-1/2 flex-row",
+        "transition-all duration-300",
+        i && !D && (p ? "-translate-x-full opacity-0" : "translate-y-full opacity-0"),
+        m
+      ),
+      children: /* @__PURE__ */ g(
+        "div",
+        {
+          "data-tucu": "tahoe-dock-bar",
+          className: s(
+            "flex items-center rounded-[16px] origin-bottom",
+            "bg-(--macos-glass-regular-bg) backdrop-blur-[68px] backdrop-saturate-[1.8]",
+            "border border-border",
+            "shadow-(--macos-glass-shadow,0_0_6px_rgba(0,0,0,0.15))",
+            p ? "flex-col gap-[4px] px-[6px] py-[8px] origin-left" : "flex-row gap-[4px] px-[8px] py-[6px] origin-bottom"
+          ),
+          style: {
+            transform: `scale(${W})`,
+            transition: "transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)"
+          },
+          children: [
+            A(),
+            u && f && /* @__PURE__ */ g($, { children: [
+              /* @__PURE__ */ r(M, { isVertical: p }),
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Hide dock",
+                  onClick: f,
+                  className: s(
+                    "group relative flex items-center justify-center rounded-[10px] transition-colors duration-150",
+                    "text-(--macos-tahoe-text-muted) hover:text-(--macos-tahoe-text)",
+                    "hover:bg-white/8 dark:hover:bg-white/10"
+                  ),
+                  style: { width: C, height: C },
+                  children: /* @__PURE__ */ r(F, { className: "h-[16px] w-[16px]", strokeWidth: 2.5 })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  V as MacOSTahoeDock,
+  V as default
+};

package/components/macos/tahoe/layout/layout-content-tahoe.mjs

@@ -0,0 +1,56 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import e from "classnames";
+import { MacOSToolbarTahoe as i } from "./toolbar-tahoe.mjs";
+function u({
+  children: o,
+  toolbarCenter: t,
+  toolbarLeading: n,
+  toolbarTrailing: r,
+  headerClassName: c,
+  contentClassName: l,
+  className: p
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      "data-tucu": "macos-tahoe-shell",
+      className: e(
+        "flex min-w-0 flex-1 flex-col overflow-hidden rounded-[34px] border border-border bg-(--macos-tahoe-panel-bg) backdrop-blur-[34px]",
+        p
+      ),
+      children: [
+        /* @__PURE__ */ a(
+          i,
+          {
+            center: t,
+            leading: n,
+            trailing: r,
+            className: c
+          }
+        ),
+        /* @__PURE__ */ a(
+          "main",
+          {
+            "data-tucu": "macos-tahoe-content",
+            className: e(
+              "relative flex-1 min-h-0 overflow-auto bg-transparent",
+              l
+            ),
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                "data-tucu": "macos-tahoe-content-inner",
+                className: "px-[20px] pb-[20px] pt-[16px] min-[500px]:px-[28px] min-[500px]:pb-[28px] [&>*]:max-w-none",
+                children: o
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  u as MacOSTahoeLayoutContent,
+  u as default
+};

package/components/macos/tahoe/layout/layout-sidebar-tahoe.mjs

@@ -0,0 +1,190 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { useState as B, useEffect as M } from "react";
+import c from "classnames";
+import { useLocation as H } from "react-router-dom";
+import { Logo as $ } from "../../../logos/logo.mjs";
+import { AnchorLink as g } from "../../../links/anchor-link.mjs";
+import { Close as z } from "../../../icons/close.mjs";
+import { matchesPath as w } from "../../../layouts/macos-layout/utils.mjs";
+function K({
+  menuItems: l,
+  logo: x,
+  className: C,
+  mobile: h = !1,
+  onClose: A,
+  onItemClick: y
+}) {
+  const { pathname: i } = H(), [S, k] = B(/* @__PURE__ */ new Set());
+  M(() => {
+    const e = /* @__PURE__ */ new Set();
+    l.forEach((t) => {
+      t.dropdownItems?.some(
+        (r) => r.isActive || w(i, r.path, !0)
+      ) && e.add(t.path);
+    }), k((t) => {
+      const r = new Set(t);
+      return e.forEach((n) => r.add(n)), r;
+    });
+  }, [i, l]);
+  const E = (e) => {
+    k((t) => {
+      const r = new Set(t);
+      return r.has(e) ? r.delete(e) : r.add(e), r;
+    });
+  }, d = (e, t, r = !1) => !!t || w(i, e, r), I = (e) => d(e.path, e.isActive) || !!e.dropdownItems?.some(
+    (t) => t.isActive || w(i, t.path, !0)
+  ), m = (e) => {
+    e?.(), y?.();
+  }, b = (e, t = !1) => c(
+    "group flex w-full items-center gap-[8px] transition-colors duration-150 select-none",
+    t ? e ? "h-[32px] rounded-[12px] border border-(--macos-tahoe-sidebar-item-active-stroke) px-[12px] text-[12px] font-semibold bg-(--macos-tahoe-sidebar-item-active-bg) text-brand!" : "h-[32px] rounded-[12px] px-[12px] text-[12px] font-normal text-foreground! hover:bg-(--macos-tahoe-sidebar-item-hover-bg)" : e ? "h-[36px] rounded-[12px] border border-(--macos-tahoe-sidebar-item-active-stroke) px-[12px] text-[13px] font-semibold bg-(--macos-tahoe-sidebar-item-active-bg) text-brand!" : "h-[36px] rounded-[12px] px-[12px] text-[13px] font-normal text-foreground! hover:bg-(--macos-tahoe-sidebar-item-hover-bg)"
+  ), u = (e, t = !1) => c(
+    t ? "h-[14px] w-[14px] shrink-0 [&>svg]:h-[14px] [&>svg]:w-[14px]" : "h-[16px] w-[16px] shrink-0 [&>svg]:h-[16px] [&>svg]:w-[16px]",
+    e ? "text-brand!" : "text-foreground/50! group-hover:text-foreground/80"
+  ), j = () => l.filter((e) => !e.hide).map((e) => {
+    const t = e.dropdownItems?.filter((o) => !o.hide) ?? [], r = t.length > 0, n = S.has(e.path), L = t.some(
+      (o) => d(o.path, o.isActive, !0)
+    ), p = d(e.path, e.isActive) && !L, f = I(e), N = e.href ?? e.path;
+    return /* @__PURE__ */ s("li", { children: [
+      r ? /* @__PURE__ */ s("div", { className: b(p), children: [
+        /* @__PURE__ */ s(
+          g,
+          {
+            to: N,
+            "aria-current": p ? "page" : void 0,
+            onClick: () => m(e.onClick),
+            className: "flex min-w-0 flex-1 items-center gap-[8px]",
+            children: [
+              e.icon && /* @__PURE__ */ a(
+                "span",
+                {
+                  className: u(p),
+                  children: e.icon
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: "flex-1 truncate text-left", children: e.name })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            "aria-label": n ? `Collapse ${e.name}` : `Expand ${e.name}`,
+            "aria-expanded": n,
+            onClick: () => E(e.path),
+            className: "flex h-[24px] w-[24px] shrink-0 items-center justify-center rounded-full transition-colors hover:bg-(--macos-tahoe-sidebar-item-hover-bg)",
+            children: /* @__PURE__ */ a(
+              "svg",
+              {
+                className: c(
+                  "h-[12px] w-[12px] shrink-0 transition-transform duration-150",
+                  p ? "text-(--macos-tahoe-sidebar-item-active-icon)" : "text-(--macos-tahoe-sidebar-item-icon)",
+                  n && "rotate-90"
+                ),
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ a(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M9 5l7 7-7 7"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ s(
+        g,
+        {
+          to: N,
+          "aria-current": f ? "page" : void 0,
+          onClick: () => m(e.onClick),
+          className: b(f),
+          children: [
+            e.icon && /* @__PURE__ */ a("span", { className: u(f), children: e.icon }),
+            /* @__PURE__ */ a("span", { className: "flex-1 truncate text-left", children: e.name })
+          ]
+        }
+      ),
+      r && n && /* @__PURE__ */ a("ul", { className: "mt-[4px] ml-[12px] space-y-[4px] pl-[12px]", children: t.map((o) => {
+        const P = o.href ?? o.path, v = d(
+          o.path,
+          o.isActive,
+          !0
+        );
+        return /* @__PURE__ */ a("li", { children: /* @__PURE__ */ s(
+          g,
+          {
+            to: P,
+            "aria-current": v ? "page" : void 0,
+            onClick: () => m(o.onClick),
+            className: b(v, !0),
+            children: [
+              o.icon && /* @__PURE__ */ a(
+                "span",
+                {
+                  className: u(
+                    v,
+                    !0
+                  ),
+                  children: o.icon
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: "flex-1 truncate text-left", children: o.name })
+            ]
+          }
+        ) }, o.path);
+      }) })
+    ] }, e.path);
+  });
+  return /* @__PURE__ */ s(
+    "aside",
+    {
+      "data-tucu": h ? "macos-tahoe-drawer" : "macos-tahoe-sidebar",
+      className: c(
+        "flex h-full flex-col rounded-[30px] border border-border bg-(--macos-tahoe-sidebar-bg) backdrop-blur-[30px]",
+        h ? "pointer-events-auto w-[320px] max-w-[calc(100vw-24px)]" : "mr-[16px] w-[240px] xl:w-[var(--macos-tahoe-sidebar-width,280px)] shrink-0",
+        C
+      ),
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            "data-tucu": "macos-tahoe-sidebar-top",
+            className: "flex h-(--macos-toolbar-height,58px) shrink-0 items-center border-b border-border px-[20px]",
+            children: /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between gap-[12px]", children: [
+              x && /* @__PURE__ */ a(
+                $,
+                {
+                  ...x,
+                  size: "small",
+                  className: c("w-auto opacity-90", x.className)
+                }
+              ),
+              h && /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close sidebar",
+                  onClick: A,
+                  className: "flex h-[28px] w-[28px] items-center justify-center rounded-full border border-border bg-black/8 text-(--macos-tahoe-text-muted) transition-colors hover:bg-black/12 hover:text-(--macos-tahoe-text) dark:bg-white/6 dark:hover:bg-white/10",
+                  children: /* @__PURE__ */ a(z, { className: "h-[14px] w-[14px]", width: 14, height: 14 })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ a("nav", { className: "flex-1 overflow-y-auto px-[12px] pt-[12px] pb-[20px]", children: /* @__PURE__ */ a("ul", { className: "space-y-[4px]", children: j() }) })
+      ]
+    }
+  );
+}
+export {
+  K as MacOSTahoeLayoutSidebar,
+  K as default
+};

package/components/macos/tahoe/layout/toolbar-tahoe.mjs

@@ -0,0 +1,35 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import l from "classnames";
+function p({
+  title: r,
+  leading: t,
+  trailing: a,
+  center: s,
+  children: c,
+  className: n,
+  bordered: i = !0
+}) {
+  return /* @__PURE__ */ o(
+    "header",
+    {
+      "data-tucu": "toolbar-tahoe",
+      className: l(
+        "relative z-20 flex h-(--macos-toolbar-height,58px) shrink-0 items-center gap-[12px] px-[20px] min-[500px]:px-[24px]",
+        "bg-(--macos-tahoe-toolbar-bg) backdrop-blur-xl",
+        i && "border-b border-border",
+        n
+      ),
+      children: [
+        t && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-[8px]", children: t }),
+        /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-1 items-center justify-center overflow-hidden", children: [
+          s ?? (r && /* @__PURE__ */ e("span", { className: "select-none truncate text-[14px] font-semibold tracking-[0.01em] text-(--macos-tahoe-text)", children: r })),
+          c
+        ] }),
+        a && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-[8px]", children: a })
+      ]
+    }
+  );
+}
+export {
+  p as MacOSToolbarTahoe
+};

package/components/notifications/alert.mjs

@@ -0,0 +1,56 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { Close as c } from "../icons/close.mjs";
+function g({
+  children: t,
+  variant: r = "info",
+  dismissible: l = !1,
+  className: a,
+  onDismiss: s,
+  "aria-label": d
+}) {
+  const [o, i] = b(!1), n = () => {
+    i(!0), s?.();
+  };
+  return o ? null : /* @__PURE__ */ u(
+    "div",
+    {
+      "data-tucu": "alert",
+      "data-variant": r,
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      "aria-label": d,
+      className: `relative text-sm rounded-lg border py-4 shadow-card ltr:pl-4 ltr:pr-8 rtl:pr-4 rtl:pl-8 sm:py-6 sm:ltr:pr-10 sm:ltr:pl-6 sm:rtl:pl-10 sm:rtl:pr-6 ${(() => {
+        switch (r) {
+          case "error":
+            return "bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200";
+          case "warning":
+            return "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-200";
+          case "success":
+            return "bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200";
+          default:
+            return "bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-200";
+        }
+      })()} ${a}`,
+      children: [
+        t,
+        l && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: n,
+            "aria-label": "Dismiss alert",
+            className: "absolute top-2 p-2 transition-all hover:scale-105 focus:outline-hidden focus:ring-2 focus:ring-current focus:ring-offset-2 ltr:right-2 rtl:left-2",
+            children: /* @__PURE__ */ e(c, { className: "h-auto w-3", "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+g.displayName = "Alert";
+export {
+  g as Alert,
+  g as default
+};

package/components/notifications/notification-card.mjs

@@ -0,0 +1,46 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { AnchorLink as s } from "../links/anchor-link.mjs";
+import { Image as d } from "../utils/image.mjs";
+function h({
+  type: e,
+  actor: r,
+  time: m,
+  url: i,
+  notifier: l
+}) {
+  return /* @__PURE__ */ t(
+    s,
+    {
+      to: i,
+      "data-tucu": "notification-card",
+      className: "mb-4 flex items-center rounded-lg bg-white p-4 shadow-card transition-all duration-200 last:mb-0 hover:-translate-y-0.5 hover:shadow-large dark:bg-light-dark sm:mb-5 sm:p-5",
+      children: [
+        /* @__PURE__ */ a("div", { className: "relative h-10 w-10 shrink-0 overflow-hidden rounded-full sm:h-12 sm:w-12", children: /* @__PURE__ */ a(
+          d,
+          {
+            src: r.avatar,
+            alt: r.name,
+            placeholder: "blur",
+            priority: "auto"
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "ltr:ml-3 rtl:mr-3 sm:ltr:ml-4 sm:rtl:mr-4", children: [
+          /* @__PURE__ */ t("div", { className: "text-sm tracking-tighter text-gray-600 dark:text-gray-400 sm:text-sm", children: [
+            /* @__PURE__ */ t("span", { className: "font-medium text-gray-900 ltr:mr-2 rtl:ml-2 dark:text-white", children: [
+              "@",
+              r.name
+            ] }),
+            e,
+            " ",
+            l
+          ] }),
+          /* @__PURE__ */ a("div", { className: "mt-1 text-sm tracking-tighter text-gray-600 dark:text-gray-400 sm:text-sm", children: m })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  h as NotificationCard,
+  h as default
+};