@alfadocs/ui-kit-debug 1.128.0 → 1.129.0

package/dist/_chunks/{calendar-event-card-DXAYWH6k.js → calendar-event-card-BNEzkjm-.js}

@@ -1,20 +1,20 @@
-import { jsx as a, jsxs as p, Fragment as C } from "react/jsx-runtime";
-import { forwardRef as ne } from "react";
-import { useTranslation as ae } from "react-i18next";
+import { jsx as a, jsxs as f, Fragment as K } from "react/jsx-runtime";
+import { forwardRef as re } from "react";
+import { useTranslation as de } from "react-i18next";
 import { c as s } from "./index-D2ZczOXr.js";
-import { U as re, B as de, T as se } from "./user-x-DYszNtIg.js";
-import { C as te } from "./check-DrFSN__t.js";
-import { S as ie } from "./stethoscope-sZXGC43m.js";
-import { C as le } from "./clock-Drd4Wtis.js";
-import { T as ce } from "./triangle-alert-CBnO6nq_.js";
-import { H as oe } from "./heart-pulse-BCppJyN2.js";
-import { E as ve } from "./euro-Dsuz4ixO.js";
-import { G as me } from "./globe-sHBW1JN5.js";
-import { V as he } from "./video-BheNGvsu.js";
-import { R as pe } from "./repeat-CvQa5rZt.js";
-import { C as fe } from "./clipboard-check-BeAGxDVT.js";
-import { E as ue } from "./eye-off-C_4xkbRP.js";
-function ge(t) {
+import { U as se, B as te, T as ie } from "./user-x-DYszNtIg.js";
+import { C as le } from "./check-DrFSN__t.js";
+import { S as ce } from "./stethoscope-sZXGC43m.js";
+import { C as oe } from "./clock-Drd4Wtis.js";
+import { T as ve } from "./triangle-alert-CBnO6nq_.js";
+import { H as me } from "./heart-pulse-BCppJyN2.js";
+import { E as he } from "./euro-Dsuz4ixO.js";
+import { G as pe } from "./globe-sHBW1JN5.js";
+import { V as fe } from "./video-BheNGvsu.js";
+import { R as ge } from "./repeat-CvQa5rZt.js";
+import { C as ue } from "./clipboard-check-BeAGxDVT.js";
+import { E as we } from "./eye-off-C_4xkbRP.js";
+function be(t) {
   if (typeof t != "string") return null;
   const d = t.trim();
   if (!d.startsWith("#")) return null;
@@ -30,82 +30,82 @@ function ge(t) {
     return null;
   return [e / 255, i / 255, l / 255];
 }
-function we([t, d, n]) {
+function xe([t, d, n]) {
   const e = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
   return 0.2126 * e(t) + 0.7152 * e(d) + 0.0722 * e(n);
 }
-function dn(t, d, n) {
+function tn(t, d, n) {
 }
-function be(t) {
-  const d = ge(t);
-  return d ? we(d) > 0.1791 ? "on-light" : "on-dark" : null;
+function ye(t) {
+  const d = be(t);
+  return d ? xe(d) > 0.1791 ? "on-light" : "on-dark" : null;
 }
-const xe = {
-  confirmed: se,
-  waiting: le,
-  in_care: ie,
-  done: te,
-  cancelled: de,
-  absent: re
-}, ye = "ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border ds:border-[color:var(--border)] ds:shadow-[var(--shadow-sm)]", ke = "ds:inline-block ds:h-3 ds:w-[6ch] ds:align-middle ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)] ds:animate-[skeleton-pulse_calc(var(--animation-duration)*8)_ease-in-out_infinite] ds:motion-reduce:animate-none ds:forced-colors:bg-[GrayText] ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText] ds:forced-colors:animate-none", _e = {
+const ke = {
+  confirmed: ie,
+  waiting: oe,
+  in_care: ce,
+  done: le,
+  cancelled: te,
+  absent: se
+}, _e = "ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border ds:border-[color:var(--border)] ds:shadow-[var(--shadow-sm)]", Se = "ds:inline-block ds:h-3 ds:w-[6ch] ds:align-middle ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)] ds:animate-[skeleton-pulse_calc(var(--animation-duration)*8)_ease-in-out_infinite] ds:motion-reduce:animate-none ds:forced-colors:bg-[GrayText] ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText] ds:forced-colors:animate-none", Ne = {
   success: "ds:text-[color:var(--success-foreground)]",
   info: "ds:text-[color:var(--info-foreground)]",
   warning: "ds:text-[color:var(--warning-foreground)]",
   error: "ds:text-[color:var(--error-foreground)]",
   // Same AA-clearing accent mix Badge's accentSoft uses for its ink.
   accent: "ds:text-[color:color-mix(in_srgb,var(--accent)_40%,var(--foreground))]"
-}, Se = {
+}, Ie = {
   confirmed: "success",
   waiting: "info",
   in_care: "accent",
   done: "success",
   cancelled: "error",
   absent: "warning"
-}, K = {
+}, O = {
   confirmed: "calendar.status.confirmed",
   waiting: "calendar.status.waiting",
   in_care: "calendar.status.inCare",
   done: "calendar.status.done",
   cancelled: "calendar.status.cancelled",
   absent: "calendar.status.absent"
-}, Ne = [
+}, ze = [
   {
     field: "hasUnassignedPatient",
-    Icon: ce,
+    Icon: ve,
     labelKey: "calendarWorkspace.details.indicators.unassignedPatient",
     tone: "warning"
   },
   {
     field: "hasHighlightedAnamnesis",
-    Icon: oe,
+    Icon: me,
     labelKey: "calendarWorkspace.details.indicators.anamnesis",
     tone: "accent"
   },
   {
     field: "hasBillableAmount",
-    Icon: ve,
+    Icon: he,
     labelKey: "calendarWorkspace.details.indicators.billable",
     tone: "warning"
   },
   {
     field: "isBookedOnline",
-    Icon: me,
+    Icon: pe,
     labelKey: "calendarWorkspace.details.indicators.bookedOnline",
     tone: "info"
   },
   {
     field: "isTelehealth",
-    Icon: he,
+    Icon: fe,
     labelKey: "calendarWorkspace.details.indicators.telehealth",
     tone: "info"
   },
   {
     field: "isRecurring",
-    Icon: pe,
+    Icon: ge,
     labelKey: "calendarWorkspace.details.indicators.recurring",
     tone: "info"
   }
-], Ie = s(
+], je = s(
   [
     // FullCalendar supplies the box. The card is the `eventcard` size
     // container: the `ds:eventcard-*` tier variants (declared in
@@ -224,6 +224,15 @@ const xe = {
           "ds:[--calendar-event-bg:color-mix(in_srgb,var(--calendar-event-accent,var(--primary))_12%,var(--card))]",
           "ds:[--calendar-event-text:var(--foreground)]",
           "ds:[--calendar-event-border:var(--calendar-event-accent,var(--primary))]"
+        ].join(" "),
+        // Faded: a lighter tint than `tinted` with muted text, for a card
+        // that stays visible but steps back (a shown cancelled
+        // appointment). Colour, never opacity, so the text keeps its AA
+        // ratio. Same custom-property-only rule as `tinted`.
+        faded: [
+          "ds:[--calendar-event-bg:color-mix(in_srgb,var(--calendar-event-accent,var(--primary))_5%,var(--card))]",
+          "ds:[--calendar-event-text:var(--muted-foreground)]",
+          "ds:[--calendar-event-border:color-mix(in_srgb,var(--calendar-event-accent,var(--primary))_45%,var(--card))]"
         ].join(" ")
       }
     },
@@ -235,7 +244,7 @@ const xe = {
       colorStyle: "solid"
     }
   }
-), ze = [
+), Ee = [
   "event-card-content ds:grid ds:grid-cols-[minmax(0,1fr)_auto] ds:items-start",
   "ds:gap-x-[var(--spacing-2xs)] ds:leading-[var(--calendar-event-line-height)]",
   // Stretch, so a secondary line is as wide as the card and a long word
@@ -243,11 +252,11 @@ const xe = {
   "ds:eventcard-narrow:flex ds:eventcard-narrow:flex-col ds:eventcard-narrow:items-stretch",
   // A 15-minute compact tile: the meta size on a tight line.
   "ds:eventcard-tiny:text-[length:var(--type-meta-size)] ds:eventcard-tiny:leading-[var(--calendar-event-compact-line-height)]"
-].join(" "), Ee = [
+].join(" "), Ae = [
   "event-card-heading ds:flex ds:items-baseline ds:gap-[var(--spacing-2xs)] ds:min-w-0",
   "ds:eventcard-narrow:w-full",
   "ds:eventcard-narrow-tall:flex-col ds:eventcard-narrow-tall:items-stretch ds:eventcard-narrow-tall:gap-0"
-].join(" "), je = s(
+].join(" "), Re = s(
   [
     "event-card-name ds:min-w-0 ds:flex-1 ds:font-[var(--font-weight-semibold)]",
     // Wrap at spaces first; break inside a word only when it cannot fit.
@@ -278,11 +287,11 @@ const xe = {
       }
     }
   }
-), Ae = s("event-card-full-title", {
+), Ce = s("event-card-full-title", {
   variants: {
     hasShortTitle: { true: "ds:eventcard-sliver:hidden", false: "" }
   }
-}), O = "event-card-kind-icon ds:inline ds:size-[1em] ds:me-[var(--spacing-2xs)] ds:align-text-bottom", Re = s(
+}), L = "event-card-kind-icon ds:inline ds:size-[1em] ds:me-[var(--spacing-2xs)] ds:align-text-bottom", Ke = s(
   "event-card-time ds:hidden ds:shrink-0 ds:whitespace-nowrap ds:text-[length:var(--type-meta-size)]",
   {
     variants: {
@@ -295,7 +304,7 @@ const xe = {
       }
     }
   }
-), Ce = s("event-card-start", {
+), Oe = s("event-card-start", {
   variants: {
     layout: {
       grid: "ds:eventcard-w256:hidden",
@@ -303,7 +312,7 @@ const xe = {
       flow: "ds:eventcard-w256:hidden"
     }
   }
-}), Ke = s("event-card-range", {
+}), Le = s("event-card-range", {
   variants: {
     layout: {
       grid: "ds:hidden ds:eventcard-w256:inline",
@@ -311,7 +320,7 @@ const xe = {
       flow: "ds:hidden ds:eventcard-w256:inline"
     }
   }
-}), L = "ds:col-span-full ds:overflow-hidden ds:text-[length:var(--type-meta-size)] ds:wrap-break-word", Oe = s(`event-card-suffix ${L}`, {
+}), B = "ds:col-span-full ds:overflow-hidden ds:text-[length:var(--type-meta-size)] ds:wrap-break-word", Te = s(`event-card-suffix ${B}`, {
   variants: {
     layout: {
       grid: [
@@ -323,7 +332,7 @@ const xe = {
       flow: "ds:line-clamp-1 ds:eventcard-narrow:order-2"
     }
   }
-}), Te = s(`event-card-context ${L}`, {
+}), Be = s(`event-card-context ${B}`, {
   variants: {
     layout: {
       grid: "ds:hidden ds:eventcard-narrow:order-3 ds:eventcard-context:line-clamp-1",
@@ -331,7 +340,7 @@ const xe = {
       flow: "ds:hidden"
     }
   }
-}), T = "ds:eventcard-narrow:absolute ds:eventcard-narrow:end-0 ds:eventcard-narrow:[inset-block-end:0] ds:eventcard-narrow:gap-0", Le = s(
+}), T = "ds:eventcard-narrow:absolute ds:eventcard-narrow:end-0 ds:eventcard-narrow:[inset-block-end:0] ds:eventcard-narrow:gap-0", Ve = s(
   "event-card-markers ds:flex ds:items-center ds:gap-[var(--spacing-2xs)] ds:col-[2] ds:row-[1]",
   {
     variants: {
@@ -350,8 +359,8 @@ const xe = {
       }
     }
   }
-), Be = s(
-  `event-card-marker ${ye} ds:size-[1em] ds:[&_svg]:size-[0.75em] ds:eventcard-narrow:size-[0.75em] ds:eventcard-narrow-h2:size-[1em]`,
+), We = s(
+  `event-card-marker ${_e} ds:size-[1em] ds:[&_svg]:size-[0.75em] ds:eventcard-narrow:size-[0.75em] ds:eventcard-narrow-h2:size-[1em]`,
   {
     variants: {
       rank: {
@@ -380,7 +389,7 @@ const xe = {
       }
     ]
   }
-), Ve = ["first", "second", "third"], We = s(
+), He = ["first", "second", "third"], Me = s(
   "event-card-more ds:text-[length:var(--type-meta-size)] ds:whitespace-nowrap",
   {
     variants: {
@@ -420,7 +429,7 @@ const xe = {
       }
     ]
   }
-), He = s(
+), Ue = s(
   "event-card-sliver-cue ds:hidden ds:items-center ds:text-[length:var(--type-meta-size)]",
   {
     variants: {
@@ -431,7 +440,7 @@ const xe = {
       }
     }
   }
-), Me = ne(
+), Ge = re(
   ({
     title: t,
     shortTitle: d,
@@ -439,49 +448,50 @@ const xe = {
     layout: e = "grid",
     contextLabel: i,
     contextName: l,
-    suffix: w,
-    rangeText: f,
-    showTime: B = !0,
-    allDay: V = !1,
+    suffix: b,
+    rangeText: g,
+    showTime: V = !0,
+    allDay: W = !1,
     status: c,
     backgroundColor: o,
     textColor: h,
-    borderColor: b,
+    borderColor: x,
     isBookedOnline: I = !1,
-    hasUnassignedPatient: W,
-    hasHighlightedAnamnesis: H,
-    hasBillableAmount: M,
-    isTelehealth: U,
-    isRecurring: D,
-    isTask: u = !1,
-    isDraft: x = !1,
+    hasUnassignedPatient: H,
+    hasHighlightedAnamnesis: M,
+    hasBillableAmount: U,
+    isTelehealth: G,
+    isRecurring: $,
+    isTask: p = !1,
+    isDraft: u = !1,
     detailsPending: y = !1,
-    colorStyle: G = "solid",
-    resourceLabel: $,
+    colorStyle: D = "solid",
+    faded: F = !1,
+    resourceLabel: P,
     privacyMasked: z = !1,
-    eventId: F,
-    className: P,
-    style: E,
-    "aria-label": Y,
-    ...q
-  }, X) => {
-    const { t: v } = ae("ui"), m = [
+    eventId: Y,
+    className: q,
+    style: j,
+    "aria-label": X,
+    ...J
+  }, Q) => {
+    const { t: v } = de("ui"), m = [
       ...c ? [
         {
           id: "status",
-          Icon: xe[c],
-          label: v(K[c]),
-          tone: Se[c]
+          Icon: ke[c],
+          label: v(O[c]),
+          tone: Ie[c]
         }
       ] : [],
-      ...Ne.filter(
+      ...ze.filter(
         ({ field: r }) => !!{
-          hasUnassignedPatient: W,
-          hasHighlightedAnamnesis: H,
-          hasBillableAmount: M,
+          hasUnassignedPatient: H,
+          hasHighlightedAnamnesis: M,
+          hasBillableAmount: U,
           isBookedOnline: I,
-          isTelehealth: U,
-          isRecurring: D
+          isTelehealth: G,
+          isRecurring: $
         }[r]
       ).map(({ field: r, Icon: _, labelKey: S, tone: N }) => ({
         id: r,
@@ -489,85 +499,85 @@ const xe = {
         label: v(S),
         tone: N
       }))
-    ], J = c ? v(K[c]) : void 0, Q = y ? v("calendar.eventKind.pendingDetails") : x ? v("calendar.eventKind.draft") : u ? v("calendar.eventKind.task") : void 0, Z = Y ?? [
+    ], Z = c ? v(O[c]) : void 0, ee = y ? v("calendar.eventKind.pendingDetails") : u ? v("calendar.eventKind.draft") : p ? v("calendar.eventKind.task") : void 0, ne = X ?? [
       t,
-      f,
-      w,
-      $,
+      g,
+      b,
+      P,
       // A blank name falls back to the visible label rather than
       // silencing the context altogether.
       l != null && l.trim() ? l : i,
-      J,
-      Q,
+      Z,
+      ee,
       ...m.filter((r) => r.id !== "status").map((r) => r.label)
-    ].filter(Boolean).join(", "), j = y ? "pending-details" : x ? "draft" : u ? "task" : "appointment", g = !u && !x && G === "tinted", k = !g && !h && o ? be(o) : null, A = g ? o ? { "--calendar-event-accent": o } : void 0 : o || h || b ? {
+    ].filter(Boolean).join(", "), E = y ? "pending-details" : u ? "draft" : p ? "task" : "appointment", A = !p && !u && F, w = !p && !u && (D === "tinted" || A), k = !w && !h && o ? ye(o) : null, R = w ? o ? { "--calendar-event-accent": o } : void 0 : o || h || x ? {
       ...o ? { "--calendar-event-bg": o } : {},
       ...h ? { "--calendar-event-text": h } : k === "on-light" ? { "--calendar-event-text": "var(--event-ink-on-light)" } : k === "on-dark" ? { "--calendar-event-text": "var(--event-ink-on-dark)" } : {},
-      ...b ? { "--calendar-event-border": b } : {}
-    } : void 0, ee = E || A ? { ...E, ...A } : void 0, R = !!(!z && (d != null && d.trim()) && d !== t);
+      ...x ? { "--calendar-event-border": x } : {}
+    } : void 0, ae = j || R ? { ...j, ...R } : void 0, C = !!(!z && (d != null && d.trim()) && d !== t);
     return /* @__PURE__ */ a(
       "div",
       {
-        ref: X,
+        ref: Q,
         role: "group",
-        ...q,
-        className: Ie({
+        ...J,
+        className: je({
           layout: e,
           status: c ?? "none",
           bookedOnline: I,
-          kind: j,
-          colorStyle: g ? "tinted" : "solid",
-          className: P
+          kind: E,
+          colorStyle: A ? "faded" : w ? "tinted" : "solid",
+          className: q
         }),
-        style: ee,
-        "aria-label": Z,
+        style: ae,
+        "aria-label": ne,
         "data-component": "calendar-event-card",
-        "data-event-id": F,
-        "data-kind": j,
+        "data-event-id": Y,
+        "data-kind": E,
         "data-status": c ?? "none",
-        "data-contrast": g ? "tinted" : h ? "custom" : k ?? "default",
-        children: /* @__PURE__ */ p("span", { className: ze, "aria-hidden": "true", children: [
-          /* @__PURE__ */ p("span", { className: Ee, children: [
+        "data-contrast": w ? "tinted" : h ? "custom" : k ?? "default",
+        children: /* @__PURE__ */ f("span", { className: Ee, "aria-hidden": "true", children: [
+          /* @__PURE__ */ f("span", { className: Ae, children: [
             /* @__PURE__ */ a(
               "span",
               {
-                className: je({
+                className: Re({
                   layout: e,
                   hiddenMarkers: m.length > 1
                 }),
-                children: y ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: ke }) : /* @__PURE__ */ p(C, { children: [
-                  u ? /* @__PURE__ */ a(fe, { className: O }) : null,
-                  z ? /* @__PURE__ */ a(ue, { className: O }) : null,
+                children: y ? /* @__PURE__ */ a("span", { "aria-hidden": "true", className: Se }) : /* @__PURE__ */ f(K, { children: [
+                  p ? /* @__PURE__ */ a(ue, { className: L }) : null,
+                  z ? /* @__PURE__ */ a(we, { className: L }) : null,
                   /* @__PURE__ */ a(
                     "span",
                     {
-                      className: Ae({
-                        hasShortTitle: R
+                      className: Ce({
+                        hasShortTitle: C
                       }),
                       children: t
                     }
                   ),
-                  R ? /* @__PURE__ */ a("span", { className: "event-card-short-title ds:hidden ds:eventcard-sliver:inline", children: d }) : null
+                  C ? /* @__PURE__ */ a("span", { className: "event-card-short-title ds:hidden ds:eventcard-sliver:inline", children: d }) : null
                 ] })
               }
             ),
-            B && !V && f ? /* @__PURE__ */ a("span", { className: Re({ layout: e }), children: n ? /* @__PURE__ */ p(C, { children: [
-              /* @__PURE__ */ a("span", { className: Ce({ layout: e }), children: n }),
-              /* @__PURE__ */ a("span", { className: Ke({ layout: e }), children: f })
-            ] }) : f }) : null
+            V && !W && g ? /* @__PURE__ */ a("span", { className: Ke({ layout: e }), children: n ? /* @__PURE__ */ f(K, { children: [
+              /* @__PURE__ */ a("span", { className: Oe({ layout: e }), children: n }),
+              /* @__PURE__ */ a("span", { className: Le({ layout: e }), children: g })
+            ] }) : g }) : null
           ] }),
-          w ? /* @__PURE__ */ a("span", { className: Oe({ layout: e }), children: w }) : null,
-          i ? /* @__PURE__ */ a("span", { className: Te({ layout: e }), children: i }) : null,
-          m.length > 0 ? /* @__PURE__ */ p("span", { className: Le({ layout: e }), children: [
+          b ? /* @__PURE__ */ a("span", { className: Te({ layout: e }), children: b }) : null,
+          i ? /* @__PURE__ */ a("span", { className: Be({ layout: e }), children: i }) : null,
+          m.length > 0 ? /* @__PURE__ */ f("span", { className: Ve({ layout: e }), children: [
             m.map(({ id: r, Icon: _, tone: S }, N) => /* @__PURE__ */ a(
               "span",
               {
                 "data-marker": r,
                 "aria-hidden": "true",
-                className: Be({
-                  rank: Ve[N] ?? "rest",
+                className: We({
+                  rank: He[N] ?? "rest",
                   layout: e,
-                  className: _e[S]
+                  className: Ne[S]
                 }),
                 children: /* @__PURE__ */ a(_, { "aria-hidden": "true" })
               },
@@ -577,7 +587,7 @@ const xe = {
               (r) => m.length > r ? /* @__PURE__ */ a(
                 "span",
                 {
-                  className: We({ capacity: r, layout: e }),
+                  className: Me({ capacity: r, layout: e }),
                   children: v("calendar.card.more", {
                     number: m.length - r
                   })
@@ -585,19 +595,19 @@ const xe = {
                 r
               ) : null
             ),
-            m.length > 1 && e !== "month" ? /* @__PURE__ */ a("span", { className: He({ layout: e }), children: "·" }) : null
+            m.length > 1 && e !== "month" ? /* @__PURE__ */ a("span", { className: Ue({ layout: e }), children: "·" }) : null
           ] }) : null
         ] })
       }
     );
   }
 );
-Me.displayName = "CalendarEventCard";
+Ge.displayName = "CalendarEventCard";
 export {
-  Me as C,
-  Ne as E,
-  xe as S,
-  K as a,
-  dn as w
+  Ge as C,
+  ze as E,
+  ke as S,
+  O as a,
+  tn as w
 };
-//# sourceMappingURL=calendar-event-card-DXAYWH6k.js.map
+//# sourceMappingURL=calendar-event-card-BNEzkjm-.js.map