@alfadocs/ui-kit 0.2.0 → 0.2.2

package/dist/_chunks/{link-8QmFjIz2.js → link-BcYW1eNM.js}

@@ -1,4 +1,4 @@
-import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import { jsxs as b, jsx as n } from "react/jsx-runtime";
 import { forwardRef as k } from "react";
 import { c as w } from "./index-D2ZczOXr.js";
 import { useTranslation as N } from "react-i18next";
@@ -15,7 +15,7 @@ const _ = [
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ], j = L("external-link", _), T = w(
   [
-    "ds:inline ds:underline-offset-4",
+    "ds:underline-offset-4",
     "ds:rounded-[var(--radius-xs)]",
     "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
     "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
@@ -37,73 +37,89 @@ const _ = [
       weight: {
         normal: "ds:font-normal",
         strong: "ds:font-semibold"
+      },
+      // When the link carries an icon, the anchor itself becomes a flex
+      // container so glyphs centre on the text optical centre — the
+      // previous `vertical-align: -0.125em` heuristic over-corrected when
+      // the link was the only thing on its line (e.g. each <li> of a
+      // vertical sidebar nav). Text-only links remain plain `inline` so
+      // they wrap naturally inside a paragraph.
+      hasIcon: {
+        no: "ds:inline",
+        yes: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]"
       }
     },
     defaultVariants: {
       intent: "default",
-      weight: "normal"
+      weight: "normal",
+      hasIcon: "no"
     }
   }
 ), q = k(
   ({
     href: l,
-    external: i = !1,
-    disabled: e = !1,
-    startIcon: a,
-    endIcon: r,
+    external: e = !1,
+    disabled: s = !1,
+    startIcon: i,
+    endIcon: a,
     intent: t,
     weight: c,
     className: f,
     children: u,
     target: m,
-    rel: d,
-    onClick: n,
+    rel: r,
+    onClick: o,
     ...v
-  }, p) => {
-    const { t: h } = N(), g = i ? "_blank" : m, x = i ? [d, "noopener", "noreferrer"].filter(Boolean).join(" ") : d, b = h("ui.link.opensInNewTab", "Opens in a new tab");
-    return /* @__PURE__ */ y(
+  }, h) => {
+    const { t: p } = N(), g = e ? "_blank" : m, x = e ? [r, "noopener", "noreferrer"].filter(Boolean).join(" ") : r, y = p("ui.link.opensInNewTab", "Opens in a new tab");
+    return /* @__PURE__ */ b(
       "a",
       {
-        ref: p,
-        href: e ? void 0 : l,
-        role: e ? "link" : void 0,
-        "aria-disabled": e || void 0,
+        ref: h,
+        href: s ? void 0 : l,
+        role: s ? "link" : void 0,
+        "aria-disabled": s || void 0,
         target: g,
         rel: x || void 0,
-        onClick: (o) => {
-          if (e) {
-            o.preventDefault();
+        onClick: (d) => {
+          if (s) {
+            d.preventDefault();
             return;
           }
-          n == null || n(o);
+          o == null || o(d);
         },
         "data-component": "link",
         "data-intent": t ?? "default",
-        className: T({ intent: t, weight: c, className: f }),
+        className: T({
+          intent: t,
+          weight: c,
+          hasIcon: !!(i || a || e) ? "yes" : "no",
+          className: f
+        }),
         ...v,
         children: [
-          a ? /* @__PURE__ */ s(
+          i ? /* @__PURE__ */ n(
             "span",
             {
               "aria-hidden": "true",
-              className: "ds:inline-flex ds:items-center ds:me-[var(--spacing-2xs)] ds:[&_svg]:size-[1em] ds:align-[-0.125em]",
-              children: a
+              className: "ds:inline-flex ds:items-center ds:[&_svg]:size-[1em]",
+              children: i
             }
           ) : null,
           u,
-          i ? /* @__PURE__ */ s(
+          e ? /* @__PURE__ */ n(
             "span",
             {
-              className: "ds:inline-flex ds:items-center ds:ms-[var(--spacing-2xs)] ds:align-[-0.125em]",
-              "aria-label": b,
-              children: /* @__PURE__ */ s(j, { "aria-hidden": "true", className: "ds:size-[1em]" })
+              className: "ds:inline-flex ds:items-center",
+              "aria-label": y,
+              children: /* @__PURE__ */ n(j, { "aria-hidden": "true", className: "ds:size-[1em]" })
             }
-          ) : r ? /* @__PURE__ */ s(
+          ) : a ? /* @__PURE__ */ n(
             "span",
             {
               "aria-hidden": "true",
-              className: "ds:inline-flex ds:items-center ds:ms-[var(--spacing-2xs)] ds:[&_svg]:size-[1em] ds:align-[-0.125em]",
-              children: r
+              className: "ds:inline-flex ds:items-center ds:[&_svg]:size-[1em]",
+              children: a
             }
           ) : null
         ]
@@ -115,4 +131,4 @@ q.displayName = "Link";
 export {
   q as L
 };
-//# sourceMappingURL=link-8QmFjIz2.js.map
+//# sourceMappingURL=link-BcYW1eNM.js.map

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

@@ -1,13 +1,13 @@
 import { jsx as a, jsxs as l } from "react/jsx-runtime";
 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 { c as D } from "./index-D2ZczOXr.js";
+import { useTranslation as E } from "react-i18next";
+import { I as H } 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 { A as X } from "./avatar-Dcr6XuDQ.js";
+import { T as q } from "./timestamp-BV2lC-wV.js";
 import { X as G } from "./x-CCcI3eJp.js";
-const J = E(
+const J = D(
   [
     "ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
     "ds:rounded-[var(--radius-sm)]",
@@ -84,7 +84,7 @@ const Q = B(
     className: T,
     ...z
   }, K) => {
-    const { t: n, i18n: v } = H(), M = L(() => {
+    const { t: n, i18n: v } = E(), M = L(() => {
       const s = new Date(e.sentAt);
       return Number.isNaN(s.getTime()) ? "" : new Intl.DateTimeFormat(v.language, {
         dateStyle: "medium",
@@ -132,7 +132,7 @@ const Q = B(
         "aria-label": C,
         className: j + " ds:contents",
         onClick: (s) => {
-          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || r(e);
+          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), r(e));
         },
         children: i
       }
@@ -171,7 +171,7 @@ const Q = B(
         ...z,
         children: [
           /* @__PURE__ */ a(
-            q,
+            X,
             {
               name: e.sender.name,
               src: e.sender.avatarUrl,
@@ -217,7 +217,7 @@ const Q = B(
             ) : 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(
-              D,
+              q,
               {
                 value: e.sentAt,
                 shape: "chip",
@@ -258,7 +258,7 @@ const Q = B(
             ] }) : 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(
-            X,
+            H,
             {
               icon: /* @__PURE__ */ a(G, {}),
               intent: "ghost",
@@ -277,4 +277,4 @@ export {
   Q as M,
   O as i
 };
-//# sourceMappingURL=message-card-ChCX9Iv6.js.map
+//# sourceMappingURL=message-card-DjvsB_3U.js.map

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

@@ -6,8 +6,8 @@ import { useTranslation as W } from "react-i18next";
 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 { S as f } from "./skeleton-CZbwyJAA.js";
+import { M as pe } from "./message-card-DjvsB_3U.js";
 import { u as ge } from "./registry-C9nwlNyL.js";
 import { M as Y } from "./mail-C8irm52s.js";
 const fe = {
@@ -162,12 +162,12 @@ function R() {
       "aria-hidden": "true",
       className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
       children: [
-        /* @__PURE__ */ s(g, { variant: "circular", size: "sm" }),
+        /* @__PURE__ */ s(f, { variant: "circular", size: "sm" }),
         /* @__PURE__ */ c("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ s(g, { variant: "text", size: "md", width: "60%" }),
-          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "80%" }),
-          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "95%" }),
-          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "30%" })
+          /* @__PURE__ */ s(f, { variant: "text", size: "md", width: "60%" }),
+          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "80%" }),
+          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "95%" }),
+          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "30%" })
         ] })
       ]
     }
@@ -202,10 +202,10 @@ const Te = oe(
     items: t,
     unreadCount: T,
     open: k,
-    onOpenChange: f,
+    onOpenChange: v,
     onItemClick: u,
     onDismiss: p,
-    onMarkRead: v,
+    onMarkRead: y,
     onMarkAllRead: C,
     loading: G = !1,
     maxVisible: J,
@@ -218,12 +218,12 @@ const Te = oe(
     ...D
   }, ee) => {
     var A;
-    const { t: d } = W(), N = k !== void 0, [se, ae] = q(!1), z = N ? k : se, y = F(
+    const { t: d } = W(), N = k !== void 0, [se, ae] = q(!1), z = N ? k : se, h = F(
       (e) => {
-        N || ae(e), f == null || f(e);
+        N || ae(e), v == null || v(e);
       },
-      [N, f]
-    ), [h, I] = q(
+      [N, v]
+    ), [g, I] = q(
       () => t.map((e) => ({ item: e, leaving: !1 }))
     ), K = F(() => {
       if (typeof window > "u") return 200;
@@ -246,12 +246,12 @@ const Te = oe(
         return o;
       });
     }, [t]), H(() => {
-      if (!h.some((n) => n.leaving)) return;
+      if (!g.some((n) => n.leaving)) return;
       const e = K(), r = setTimeout(() => {
         I((n) => n.filter((o) => !o.leaving));
       }, e);
       return () => clearTimeout(r);
-    }, [h, K]);
+    }, [g, K]);
     const M = m(null), O = m((A = t[0]) == null ? void 0 : A.id);
     H(() => {
       var n;
@@ -279,8 +279,8 @@ const Te = oe(
     P.current = z;
     const ie = le(
       () => ({
-        open: () => y(!0),
-        close: () => y(!1),
+        open: () => h(!0),
+        close: () => h(!1),
         isOpen: () => P.current,
         getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
         getUnreadCount: () => V.current ?? l.current.filter((e) => !e.read).length,
@@ -290,14 +290,14 @@ const Te = oe(
         },
         markRead: (e) => {
           const r = l.current.find((n) => n.id === e);
-          r && (v == null || v(r));
+          r && (y == null || y(r));
         },
         dismiss: (e) => {
           const r = l.current.find((n) => n.id === e);
           r && (p == null || p(r));
         }
       }),
-      [y, u, v, p]
+      [h, u, y, p]
     ), B = m(null);
     return me(ee, () => B.current, []), ge(fe, ie, a), /* @__PURE__ */ s(
       "div",
@@ -307,7 +307,7 @@ const Te = oe(
         "data-component-id": a,
         className: [ve({ size: w }), $].filter(Boolean).join(" "),
         ...D,
-        children: /* @__PURE__ */ c(b.Root, { open: z, onOpenChange: y, children: [
+        children: /* @__PURE__ */ c(b.Root, { open: z, onOpenChange: h, children: [
           /* @__PURE__ */ s(b.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
             ue,
             {
@@ -364,14 +364,14 @@ const Te = oe(
                 /* @__PURE__ */ s(
                   "div",
                   {
-                    role: "list",
+                    role: g.length > 0 ? "list" : void 0,
                     "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(R, {}),
                       /* @__PURE__ */ s(R, {}),
                       /* @__PURE__ */ s(R, {})
-                    ] }) : h.length === 0 ? /* @__PURE__ */ s(be, {}) : h.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
+                    ] }) : g.length === 0 ? /* @__PURE__ */ s(be, {}) : g.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
                       pe,
                       {
                         item: e,
@@ -411,4 +411,4 @@ export {
   Te as M,
   fe as m
 };
-//# sourceMappingURL=message-tray-n8q9ITXI.js.map
+//# sourceMappingURL=message-tray-BbnAzlLH.js.map

package/dist/_chunks/{notification-card-hBlPN1-c.js → notification-card-uTPEvAQS.js}

@@ -1,12 +1,12 @@
 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 U } from "./index-D2ZczOXr.js";
-import { useTranslation as W } from "react-i18next";
-import { I as E } from "./icon-button-C4CGcYuz.js";
+import { c as D } from "./index-D2ZczOXr.js";
+import { useTranslation as U } from "react-i18next";
+import { I as W } from "./icon-button-C4CGcYuz.js";
 import { B as N } from "./button-DD_0Xdmr.js";
-import { T as H } from "./timestamp-BV2lC-wV.js";
-import { X } from "./x-CCcI3eJp.js";
-const q = U(
+import { T as E } from "./timestamp-BV2lC-wV.js";
+import { X as H } from "./x-CCcI3eJp.js";
+const X = D(
   [
     "ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
     "ds:rounded-[var(--radius-sm)]",
@@ -73,10 +73,10 @@ const q = U(
   "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
   "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
 ].join(" ");
-function G(e) {
+function q(e) {
   return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(e);
 }
-const J = M(
+const G = M(
   ({
     item: e,
     variant: r = "compact",
@@ -89,7 +89,7 @@ const J = M(
     className: z,
     ...T
   }, K) => {
-    const { t: u, i18n: v } = W(), S = P(() => {
+    const { t: u, i18n: v } = U(), S = P(() => {
       const s = new Date(e.createdAt);
       return Number.isNaN(s.getTime()) ? "" : new Intl.DateTimeFormat(v.language, {
         dateStyle: "medium",
@@ -112,7 +112,7 @@ const J = M(
       time: S,
       unreadSuffix: I,
       defaultValue: "{{title}}, {{time}}{{unreadSuffix}}"
-    }), p = !!e.url && G(e.url), i = /* @__PURE__ */ a(
+    }), p = !!e.url && q(e.url), i = /* @__PURE__ */ a(
       "span",
       {
         className: [
@@ -130,7 +130,7 @@ const J = M(
         "aria-label": x,
         className: C + " ds:contents",
         onClick: (s) => {
-          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || t(e);
+          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t(e));
         },
         children: i
       }
@@ -149,7 +149,7 @@ const J = M(
         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 || t(e);
+          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t(e));
         },
         children: i
       }
@@ -163,7 +163,7 @@ const J = M(
         "data-read": e.read ? "true" : "false",
         "data-leaving": g ? "true" : void 0,
         "aria-hidden": g || void 0,
-        className: q({ variant: r, size: k, state: F, className: z }),
+        className: X({ variant: r, size: k, state: F, className: z }),
         ...T,
         children: [
           e.icon ? /* @__PURE__ */ a(
@@ -191,7 +191,7 @@ const J = M(
             ] }),
             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(
-              H,
+              E,
               {
                 value: e.createdAt,
                 shape: "chip",
@@ -212,7 +212,7 @@ const J = M(
                     {
                       href: e.url,
                       onClick: (s) => {
-                        s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || t == null || t(e);
+                        s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t == null || t(e));
                       },
                       children: l
                     }
@@ -232,9 +232,9 @@ const J = M(
             ] }) : null
           ] }),
           r === "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(
-            E,
+            W,
             {
-              icon: /* @__PURE__ */ a(X, {}),
+              icon: /* @__PURE__ */ a(H, {}),
               intent: "ghost",
               size: "sm",
               "aria-label": u(
@@ -249,9 +249,9 @@ const J = M(
     );
   }
 );
-J.displayName = "NotificationCard";
+G.displayName = "NotificationCard";
 export {
-  J as N,
-  G as i
+  G as N,
+  q as i
 };
-//# sourceMappingURL=notification-card-hBlPN1-c.js.map
+//# sourceMappingURL=notification-card-uTPEvAQS.js.map