@alfadocs/ui-kit 1.54.3 → 1.56.0

package/dist/_chunks/{message-card-C1buKlzM.js → message-card-DVo8-dOm.js}

@@ -2,9 +2,9 @@ import { jsx as a, jsxs as l } from "react/jsx-runtime";
 import { forwardRef as O, useMemo as Q, useState as Y, useRef as Z, useCallback as A } from "react";
 import { c as ss } from "./index-D2ZczOXr.js";
 import { useTranslation as es } from "react-i18next";
-import { I as as } from "./icon-button-mKIvw90h.js";
-import { B as S } from "./button-CYPx2xFq.js";
-import { A as rs } from "./avatar-DYtwj1-R.js";
+import { I as as } from "./icon-button-COX76Jdj.js";
+import { B as V } from "./button-Bn16lcFM.js";
+import { A as rs } from "./avatar-WZY3eGE7.js";
 import { T as ds } from "./timestamp-DPLDWdxA.js";
 import { i as os } from "./is-safe-url-DkETxeHz.js";
 import { X as ns } from "./x-B5YnXwCz.js";
@@ -29,9 +29,10 @@ const ts = ss(
     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:group 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:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2 ds:bg-[color:var(--card)]"
+        // row divider so consecutive rows keep a visible boundary (see the
+        // compact + flat compound below).
+        compact: "ds:items-start ds:group",
+        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:[:where(&)]:border-[length:var(--surface-border-width,var(--border-width-sm))] ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:bg-[color:var(--card)]"
       },
       size: {
         sm: "ds:p-[var(--spacing-sm)]",
@@ -46,7 +47,7 @@ const ts = ss(
       // cards reads consistently.
       surface: {
         flat: "",
-        elevated: "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]"
+        elevated: "ds:[:where(&)]:border-[length:var(--surface-border-width,var(--border-width-sm))] ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-sm)]"
       }
     },
     compoundVariants: [
@@ -66,6 +67,13 @@ const ts = ss(
         variant: "dashboard",
         state: "unread",
         class: "ds:bg-[color:var(--accent)]/5"
+      },
+      // The accessible-only row divider. --accessible-edge-width is 0
+      // outside the accessible themes. An elevated row has its own edge.
+      {
+        variant: "compact",
+        surface: "flat",
+        class: "ds:[:where(&)]:border-b-[length:var(--accessible-edge-width,0px)] ds:border-b-[color:var(--card-border)]"
       }
     ],
     defaultVariants: {
@@ -75,7 +83,7 @@ const ts = ss(
       surface: "flat"
     }
   }
-), V = [
+), $ = [
   "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",
@@ -88,7 +96,7 @@ const ts = ss(
   ({
     item: s,
     variant: r = "compact",
-    surface: $ = "flat",
+    surface: F = "flat",
     size: u = "sm",
     onActivate: d,
     onToggleRead: w,
@@ -96,10 +104,10 @@ const ts = ss(
     ctaLabel: f,
     dismissLabel: m,
     leaving: y,
-    className: F,
-    ...B
-  }, P) => {
-    const { t: o, i18n: C } = es("ui"), R = Q(() => {
+    className: B,
+    ...P
+  }, R) => {
+    const { t: o, i18n: C } = es("ui"), _ = Q(() => {
       const e = new Date(s.sentAt);
       return Number.isNaN(e.getTime()) ? "" : new Intl.DateTimeFormat(C.language, {
         dateStyle: "medium",
@@ -113,10 +121,10 @@ const ts = ss(
           return;
         }
         L(!0), g.current && clearTimeout(g.current);
-        const x = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", K = x.trim().endsWith("ms") ? parseFloat(x) : parseFloat(x) * 1e3;
+        const x = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", S = x.trim().endsWith("ms") ? parseFloat(x) : parseFloat(x) * 1e3;
         g.current = setTimeout(
           () => n(s),
-          Number.isFinite(K) ? K : 200
+          Number.isFinite(S) ? S : 200
         );
       },
       [n, s, p, k]
@@ -126,7 +134,7 @@ const ts = ss(
     }) : "", z = o("messageCard.itemLabel", {
       sender: s.sender.name,
       subjectFragment: E,
-      time: R,
+      time: _,
       unreadSuffix: D,
       defaultValue: "Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}"
     }), b = !!s.url && os(s.url), i = /* @__PURE__ */ a(
@@ -145,7 +153,7 @@ const ts = ss(
       {
         href: s.url,
         "aria-label": z,
-        className: V + " ds:contents",
+        className: $ + " ds:contents",
         onClick: (e) => {
           e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), d(s));
         },
@@ -156,7 +164,7 @@ const ts = ss(
       {
         type: "button",
         "aria-label": z,
-        className: V + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
+        className: $ + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
         onClick: () => d(s),
         children: i
       }
@@ -183,13 +191,13 @@ const ts = ss(
         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:border ds:border-[color:color-mix(in_srgb,var(--foreground)_15%,transparent)] 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]",
         children: s.unreadCount
       }
-    ) : null, h = "ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1]", W = "ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]", X = "ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border-2 ds:border-[color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)] ds:forced-colors:border-[CanvasText]", M = "ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-2xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-2xs))] ds:px-[var(--spacing-2xs)] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:text-[color:var(--primary-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight] ds:forced-colors:text-[CanvasText]", q = 'ds:cursor-pointer ds:outline-none 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)] ds:forced-colors:focus-visible:outline-[CanvasText] ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""] ds:sm:before:hidden', c = !s.read && T, _ = s.read ? X : c ? M : W, G = r !== "compact" ? null : w ? /* @__PURE__ */ a(
+    ) : null, h = "ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1]", W = "ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]", X = "ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border-2 ds:border-[color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)] ds:forced-colors:border-[CanvasText]", M = "ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-2xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-2xs))] ds:px-[var(--spacing-2xs)] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:text-[color:var(--primary-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight] ds:forced-colors:text-[CanvasText]", q = 'ds:cursor-pointer ds:outline-none 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)] ds:forced-colors:focus-visible:outline-[CanvasText] ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""] ds:sm:before:hidden', c = !s.read && T, K = s.read ? X : c ? M : W, G = r !== "compact" ? null : w ? /* @__PURE__ */ a(
       "button",
       {
         type: "button",
         onClick: () => w(s),
         "aria-label": s.read ? o("messageCard.markAsUnread", "Mark as unread") : c ? `${v}, ${o("messageCard.markAsRead", "Mark as read")}` : o("messageCard.markAsRead", "Mark as read"),
-        className: `${h} ${_} ${q}`,
+        className: `${h} ${K} ${q}`,
         children: c ? /* @__PURE__ */ a("span", { "aria-hidden": "true", children: s.unreadCount }) : null
       }
     ) : c ? /* @__PURE__ */ a(
@@ -200,11 +208,11 @@ const ts = ss(
         className: `${h} ${M}`,
         children: /* @__PURE__ */ a("span", { "aria-hidden": "true", children: s.unreadCount })
       }
-    ) : /* @__PURE__ */ a("span", { "aria-hidden": "true", className: `${h} ${_}` }), J = u === "md" ? "ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]" : "ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]";
+    ) : /* @__PURE__ */ a("span", { "aria-hidden": "true", className: `${h} ${K}` }), J = u === "md" ? "ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]" : "ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]";
     return /* @__PURE__ */ l(
       "div",
       {
-        ref: P,
+        ref: R,
         role: "listitem",
         "data-component": "message-card",
         "data-component-id": s.id,
@@ -215,10 +223,10 @@ const ts = ss(
           variant: r,
           size: u,
           state: U,
-          surface: r === "compact" ? $ : "flat",
-          className: F
+          surface: r === "compact" ? F : "flat",
+          className: B
         }),
-        ...B,
+        ...P,
         children: [
           /* @__PURE__ */ l("span", { className: "ds:relative ds:shrink-0", children: [
             /* @__PURE__ */ a(
@@ -261,7 +269,7 @@ const ts = ss(
             ),
             r === "dashboard" && (f || m) ? /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
               f && b ? /* @__PURE__ */ a(
-                S,
+                V,
                 {
                   intent: "outline",
                   size: "sm",
@@ -280,7 +288,7 @@ const ts = ss(
                 }
               ) : null,
               m && n ? /* @__PURE__ */ a(
-                S,
+                V,
                 {
                   intent: "link",
                   size: "sm",
@@ -316,4 +324,4 @@ ls.displayName = "MessageCard";
 export {
   ls as M
 };
-//# sourceMappingURL=message-card-C1buKlzM.js.map
+//# sourceMappingURL=message-card-DVo8-dOm.js.map

package/dist/_chunks/{message-tray-DyBVqlGj.js → message-tray-BB95DA82.js}

@@ -5,12 +5,12 @@ import { c as j } from "./index-D2ZczOXr.js";
 import { useTranslation as H } from "react-i18next";
 import { u as ce } from "./use-controllable-state-BiY4xTzM.js";
 import { u as le } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { I as me } from "./icon-button-mKIvw90h.js";
-import { B as L } from "./button-CYPx2xFq.js";
+import { I as me } from "./icon-button-COX76Jdj.js";
+import { B as L } from "./button-Bn16lcFM.js";
 import { S as F } from "./separator-CYU_bGFn.js";
 import { S as h } from "./skeleton-B1KTdJ4N.js";
-import { S as pe } from "./scroll-area-BZOvUhwQ.js";
-import { M as ge } from "./message-card-C1buKlzM.js";
+import { S as pe } from "./scroll-area-ZtFCv9K7.js";
+import { M as ge } from "./message-card-DVo8-dOm.js";
 import { u as ue } from "./registry-DvAUVLHh.js";
 import { M as V } from "./mail-BqXVF2zH.js";
 const fe = {
@@ -491,4 +491,4 @@ export {
   Te as M,
   fe as m
 };
-//# sourceMappingURL=message-tray-DyBVqlGj.js.map
+//# sourceMappingURL=message-tray-BB95DA82.js.map

package/dist/_chunks/{money-GypsuFk2.js → money-CeClE1nH.js}

@@ -3,7 +3,7 @@ import { forwardRef as z, useMemo as N } from "react";
 import { c as Z } from "./index-D2ZczOXr.js";
 import { useTranslation as $ } from "react-i18next";
 import { V as O } from "./visually-hidden-BHxEUGyT.js";
-import { f as R, a as T } from "./format-price-DAbh61Lz.js";
+import { f as R, a as T } from "./format-price-BKle6Xwt.js";
 const U = Z(
   [
     "ds:inline-flex ds:items-baseline ds:whitespace-nowrap",
@@ -99,4 +99,4 @@ C.displayName = "Money";
 export {
   C as M
 };
-//# sourceMappingURL=money-GypsuFk2.js.map
+//# sourceMappingURL=money-CeClE1nH.js.map