@alfadocs/ui-kit-debug 1.94.0 → 1.95.0

package/dist/_chunks/{slot-grid-B-IAFX3C.js → slot-grid-BhjaLJ0o.js}

@@ -1,15 +1,15 @@
-import { jsx as r, jsxs as v, Fragment as he } from "react/jsx-runtime";
-import { forwardRef as ye, useId as ge, useState as ve, useCallback as M, useRef as be, useEffect as we, useMemo as xe } from "react";
+import { jsx as r, jsxs as v, Fragment as ye } from "react/jsx-runtime";
+import { forwardRef as ge, useId as ve, useState as be, useCallback as M, useRef as we, useEffect as xe, useMemo as Se } from "react";
 import { c as g } from "./index-D2ZczOXr.js";
-import { useTranslation as Se } from "react-i18next";
-import { B as q } from "./button-DohK_Ak_.js";
-import { I as W } from "./icon-button-S8_weU3g.js";
-import { E as ke } from "./empty-state-DwJ5YNzz.js";
-import { S as X } from "./skeleton-tTWJpvAq.js";
-import { u as De } from "./registry-DvAUVLHh.js";
-import { d as Ie, f as Ge } from "./format--x5jypvH.js";
-import { p as Ne } from "./parseISO-DZZ5a-zK.js";
-const Ke = {
+import { useTranslation as ke } from "react-i18next";
+import { B as W } from "./button-DohK_Ak_.js";
+import { I as X } from "./icon-button-S8_weU3g.js";
+import { E as De } from "./empty-state-DwJ5YNzz.js";
+import { S as J } from "./skeleton-tTWJpvAq.js";
+import { u as Ie } from "./registry-DvAUVLHh.js";
+import { d as Ge, f as Ne } from "./format--x5jypvH.js";
+import { p as Ke } from "./parseISO-DZZ5a-zK.js";
+const Me = {
   id: "slot-grid",
   // pick           → `select_slot` + the `selectedSlotId` state slot.
   // range_navigate → `next_days` / `previous_days` + `hasNext` / `hasPrevious`.
@@ -185,7 +185,7 @@ const Ke = {
       description: "Per-slot button identifier sourced from each `SlotGridSlot.id` — an availability id, never a patient id. DOM-driving agents activate a slot via native click on the matching button."
     }
   }
-}, Me = g(
+}, ze = g(
   [
     "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
     "ds:text-[var(--foreground)]",
@@ -201,9 +201,9 @@ const Ke = {
     },
     defaultVariants: { size: "md" }
   }
-), ze = g(
+), Ce = g(
   "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:w-full"
-), Ce = 12, Re = g(
+), Re = 12, Le = g(
   "ds:grid ds:gap-[var(--spacing-sm)] ds:w-full ds:auto-rows-min ds:items-start",
   {
     variants: {
@@ -225,10 +225,10 @@ const Ke = {
     defaultVariants: { cols: 1 }
   }
 );
-function Le(e) {
-  return Math.max(1, Math.min(e, Ce));
+function Ee(e) {
+  return Math.max(1, Math.min(e, Re));
 }
-const J = g(
+const Q = g(
   [
     "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
     "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
@@ -254,9 +254,9 @@ const J = g(
     },
     defaultVariants: { size: "md" }
   }
-), Q = g(
+), U = g(
   "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:w-full ds:m-0 ds:p-0 ds:list-none"
-), Ee = g(
+), Ve = g(
   [
     "ds:inline-flex ds:items-center ds:justify-center",
     "ds:w-full",
@@ -290,30 +290,30 @@ const J = g(
   }
 );
 function h(e) {
-  return e instanceof Date ? e : Ne(e);
+  return e instanceof Date ? e : Ke(e);
 }
 function z(e, a) {
   return `${h(e.date).toISOString()}-${a}`;
 }
 function k(e) {
-  return Ge(h(e.date), "yyyy-MM-dd");
+  return Ne(h(e.date), "yyyy-MM-dd");
 }
-function Ye(e, a) {
-  return Ie(h(e), h(a));
+function Ze(e, a) {
+  return Ge(h(e), h(a));
 }
-function Ze(e) {
+function et(e) {
   for (const a of e) {
-    const o = a.slots.find((i) => i.available !== !1);
-    if (o) return { day: a, slot: o };
+    const d = a.slots.find((i) => i.available !== !1);
+    if (d) return { day: a, slot: d };
   }
 }
-function U(e, a, o) {
+function Y(e, a, d) {
   try {
     return new Intl.DateTimeFormat(a, {
       weekday: "short",
       month: "short",
       day: "numeric",
-      timeZone: o
+      timeZone: d
     }).format(e);
   } catch {
     return new Intl.DateTimeFormat("en", {
@@ -323,14 +323,14 @@ function U(e, a, o) {
     }).format(e);
   }
 }
-function Y(e, a, o) {
+function Z(e, a, d) {
   if (e.label !== void 0) return e.label;
   const i = h(e.start);
   try {
     const c = new Intl.DateTimeFormat(a, {
       hour: "numeric",
       minute: "2-digit",
-      timeZone: o
+      timeZone: d
     });
     if (e.end) {
       const y = h(e.end);
@@ -346,12 +346,12 @@ function Y(e, a, o) {
     return i.toISOString();
   }
 }
-function Ve(e, a, o, i, c) {
+function je(e, a, d, i, c) {
   if (e.ariaLabel !== void 0) return e.ariaLabel;
-  const y = Y(e, o, i), D = a.label !== void 0 ? a.label : U(h(a.date), o, i);
+  const y = Z(e, d, i), D = a.label !== void 0 ? a.label : Y(h(a.date), d, i);
   return c({ time: y, day: D });
 }
-function je() {
+function Te() {
   return /* @__PURE__ */ r(
     "svg",
     {
@@ -367,7 +367,7 @@ function je() {
     }
   );
 }
-function Te() {
+function Pe() {
   return /* @__PURE__ */ r(
     "svg",
     {
@@ -383,11 +383,11 @@ function Te() {
     }
   );
 }
-const Pe = ye(
+const _e = ge(
   ({
     days: e,
     state: a = "default",
-    emptyDescription: o,
+    emptyDescription: d,
     size: i = "md",
     selectedSlotId: c,
     maxInitialSlotsPerDay: y = 6,
@@ -395,30 +395,30 @@ const Pe = ye(
     timeZone: I,
     hasPrevious: C = !1,
     hasNext: R = !1,
-    showNextAvailable: Z = !1,
-    ariaLabel: ee,
+    showNextAvailable: ee = !1,
+    ariaLabel: te,
     onSlotSelect: b,
     onPreviousDays: L,
-    onNextDays: B,
+    onNextDays: E,
     onShowMore: w,
-    onJumpToNextAvailable: te,
-    className: se,
+    onJumpToNextAvailable: se,
+    className: ae,
     id: G,
-    ...ae
-  }, re) => {
-    const { t: p, i18n: ie } = Se("ui"), N = D ?? ie.language ?? "en", ne = ge(), [E, oe] = ve({}), V = a === "loading", j = a === "disabled", m = V || j, de = a === "empty" || e.length === 0 || e.every((t) => t.slots.length === 0), le = ee ?? p("slotGrid.ariaLabel"), x = M(
-      (t, s) => {
-        m || t.available !== !1 && (b == null || b(t, s));
+    ...re
+  }, ie) => {
+    const { t: u, i18n: ne } = ke("ui"), N = D ?? ne.language ?? "en", oe = ve(), [B, de] = be({}), V = a === "loading", j = a === "disabled", p = V || j, le = a === "empty" || e.length === 0 || e.every((s) => s.slots.length === 0), ce = te ?? u("slotGrid.ariaLabel"), x = M(
+      (s, t) => {
+        p || s.available !== !1 && (b == null || b(s, t));
       },
-      [m, b]
+      [p, b]
     ), T = M(
-      (t, s) => {
-        oe((n) => ({ ...n, [s]: !0 })), w == null || w(t);
+      (s, t) => {
+        de((n) => ({ ...n, [t]: !0 })), w == null || w(s);
       },
       [w]
-    ), ce = M(
-      (t, s, n) => {
-        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), x(s, n));
+    ), ue = M(
+      (s, t, n) => {
+        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), x(t, n));
       },
       [x]
     ), P = {
@@ -427,213 +427,228 @@ const Pe = ye(
       hasPrevious: C,
       hasNext: R,
       state: a,
-      expanded: E,
-      isInteractionSuppressed: m,
+      expanded: B,
+      isInteractionSuppressed: p,
       onPreviousDays: L,
-      onNextDays: B,
+      onNextDays: E,
       handleSlotClick: x,
       handleShowMore: T
-    }, d = be(P);
-    we(() => {
-      d.current = P;
+    }, l = we(P);
+    xe(() => {
+      l.current = P;
     });
-    const ue = xe(
+    const me = Se(
       () => ({
-        getStatus: () => d.current.state,
-        getSelectedSlotId: () => d.current.selectedSlotId ?? null,
-        getVisibleDays: () => d.current.days.map(k),
+        getStatus: () => l.current.state,
+        getSelectedSlotId: () => l.current.selectedSlotId ?? null,
+        getVisibleDays: () => l.current.days.map(k),
         getSlotsByDay: () => {
-          const t = {};
-          for (const s of d.current.days) {
-            const n = k(s), l = s.slots.filter((u) => u.available !== !1).map((u) => u.id);
-            t[n] = t[n] ? [...t[n], ...l] : l;
+          const s = {};
+          for (const t of l.current.days) {
+            const n = k(t), o = t.slots.filter((m) => m.available !== !1).map((m) => m.id);
+            s[n] = s[n] ? [...s[n], ...o] : o;
           }
-          return t;
+          return s;
         },
-        getExpandedDays: () => d.current.days.filter(
-          (t, s) => d.current.expanded[z(t, s)] === !0
+        getExpandedDays: () => l.current.days.filter(
+          (s, t) => l.current.expanded[z(s, t)] === !0
         ).map(k),
-        getHasPrevious: () => d.current.hasPrevious,
-        getHasNext: () => d.current.hasNext,
-        selectSlot: (t) => {
-          const s = d.current;
-          if (s.isInteractionSuppressed) return !1;
-          for (const n of s.days) {
-            const l = n.slots.find((u) => u.id === t);
-            if (l)
-              return l.available === !1 ? !1 : (s.handleSlotClick(l, n), !0);
+        getHasPrevious: () => l.current.hasPrevious,
+        getHasNext: () => l.current.hasNext,
+        selectSlot: (s) => {
+          const t = l.current;
+          if (t.isInteractionSuppressed) return !1;
+          for (const n of t.days) {
+            const o = n.slots.find((m) => m.id === s);
+            if (o)
+              return o.available === !1 ? !1 : (t.handleSlotClick(o, n), !0);
           }
           return !1;
         },
         nextDays: () => {
-          const t = d.current;
-          return !t.hasNext || t.isInteractionSuppressed || !t.onNextDays ? !1 : (t.onNextDays(), !0);
+          const s = l.current;
+          return !s.hasNext || s.isInteractionSuppressed || !s.onNextDays ? !1 : (s.onNextDays(), !0);
         },
         previousDays: () => {
-          const t = d.current;
-          return !t.hasPrevious || t.isInteractionSuppressed || !t.onPreviousDays ? !1 : (t.onPreviousDays(), !0);
+          const s = l.current;
+          return !s.hasPrevious || s.isInteractionSuppressed || !s.onPreviousDays ? !1 : (s.onPreviousDays(), !0);
         },
-        showMoreDay: (t) => {
-          const s = d.current;
-          if (s.isInteractionSuppressed) return !1;
-          const n = s.days.findIndex(
-            (u) => k(u) === t
+        showMoreDay: (s) => {
+          const t = l.current;
+          if (t.isInteractionSuppressed) return !1;
+          const n = t.days.findIndex(
+            (m) => k(m) === s
           );
           if (n < 0) return !1;
-          const l = s.days[n];
-          return s.handleShowMore(l, z(l, n)), !0;
+          const o = t.days[n];
+          return t.handleShowMore(o, z(o, n)), !0;
         }
       }),
       []
     );
-    De(Ke, ue, G);
-    const _ = Le(e.length || 1), A = Re({ cols: _ });
+    Ie(Me, me, G);
+    const _ = Ee(e.length || 1), A = Le({ cols: _ });
     let S;
-    return V ? S = /* @__PURE__ */ r(
-      "div",
-      {
-        className: A,
-        "data-state": "loading",
-        role: "status",
-        "aria-live": "polite",
-        "aria-label": p("common.loading"),
-        children: Array.from({ length: _ }, (t, s) => /* @__PURE__ */ v("div", { className: J(), children: [
-          /* @__PURE__ */ r(X, { variant: "text", size: i, width: "60%" }),
-          /* @__PURE__ */ r("div", { className: Q(), children: Array.from(
-            { length: Math.min(y, 4) },
-            (n, l) => /* @__PURE__ */ r(
-              X,
-              {
-                variant: "rounded",
-                size: i,
-                height: "40px"
-              },
-              `loading-slot-${s}-${l}`
-            )
-          ) })
-        ] }, `loading-col-${s}`))
-      }
-    ) : de ? S = /* @__PURE__ */ r("div", { "data-state": "empty", children: /* @__PURE__ */ r(
-      ke,
-      {
-        variant: "no-results",
-        title: p("slotGrid.noSlots"),
-        description: o
-      }
-    ) }) : S = /* @__PURE__ */ r(
-      "div",
-      {
-        className: A,
-        "data-state": j ? "disabled" : "default",
-        children: e.map((t, s) => {
-          const n = z(t, s), l = t.label ?? U(h(t.date), N, I), u = `${ne}-day-${s}-header`, $ = E[n] ?? !1 ? t.slots : t.slots.slice(0, y), H = t.slots.length - $.length, O = t.slots.length === 0;
-          return (
-            // Use a plain <div role="group"> rather than <section> — a
-            // <section> with aria-labelledby is a landmark, and nesting many
-            // landmarks inside the outer slot-grid landmark fails axe's
-            // landmark-unique rule.
-            /* @__PURE__ */ v(
-              "div",
-              {
-                role: "group",
-                className: J(),
-                "aria-labelledby": u,
-                "data-empty": O || void 0,
-                children: [
-                  /* @__PURE__ */ r("h3", { id: u, className: Be({ size: i }), children: l }),
-                  O ? /* @__PURE__ */ v(he, { children: [
-                    /* @__PURE__ */ r("p", { className: "type-body-sm ds:text-[var(--muted-foreground)] ds:m-0", children: p("slotGrid.noSlots") }),
-                    o ? /* @__PURE__ */ r("p", { className: "type-body-sm ds:text-[var(--muted-foreground)] ds:m-0", children: o }) : null
-                  ] }) : null,
-                  /* @__PURE__ */ r("ul", { className: Q(), children: $.map((f) => {
-                    const pe = Ve(
-                      f,
-                      t,
-                      N,
-                      I,
-                      ({ time: K, day: fe }) => p("slotGrid.slotLabel", { time: K, day: fe })
-                    ), me = c === f.id, F = f.available === !1 || m;
-                    return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
-                      "button",
-                      {
-                        type: "button",
-                        className: Ee({ size: i }),
-                        "aria-label": pe,
-                        "aria-pressed": me,
-                        disabled: F,
-                        "aria-disabled": F || void 0,
-                        "data-slot-id": f.id,
-                        onClick: () => x(f, t),
-                        onKeyDown: (K) => ce(K, f, t),
-                        children: Y(f, N, I)
-                      }
-                    ) }, f.id);
-                  }) }),
-                  H > 0 ? /* @__PURE__ */ r(
-                    q,
-                    {
-                      intent: "ghost",
-                      size: i === "lg" ? "md" : "sm",
-                      onClick: () => T(t, n),
-                      disabled: m,
-                      children: p("slotGrid.showMore", { count: H })
-                    }
-                  ) : null
-                ]
-              },
-              n
-            )
-          );
-        })
-      }
-    ), /* @__PURE__ */ v(
+    if (V)
+      S = /* @__PURE__ */ r(
+        "div",
+        {
+          className: A,
+          "data-state": "loading",
+          role: "status",
+          "aria-live": "polite",
+          "aria-label": u("common.loading"),
+          children: Array.from({ length: _ }, (s, t) => /* @__PURE__ */ v("div", { className: Q(), children: [
+            /* @__PURE__ */ r(J, { variant: "text", size: i, width: "60%" }),
+            /* @__PURE__ */ r("div", { className: U(), children: Array.from(
+              { length: Math.min(y, 4) },
+              (n, o) => /* @__PURE__ */ r(
+                J,
+                {
+                  variant: "rounded",
+                  size: i,
+                  height: "40px"
+                },
+                `loading-slot-${t}-${o}`
+              )
+            ) })
+          ] }, `loading-col-${t}`))
+        }
+      );
+    else if (le)
+      S = /* @__PURE__ */ r("div", { "data-state": "empty", children: /* @__PURE__ */ r(
+        De,
+        {
+          variant: "no-results",
+          title: u("slotGrid.noSlots"),
+          description: d
+        }
+      ) });
+    else {
+      const s = e.some((t) => t.slots.length === 0);
+      S = /* @__PURE__ */ v(ye, { children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: A,
+            "data-state": j ? "disabled" : "default",
+            children: e.map((t, n) => {
+              const o = z(t, n), m = t.label ?? Y(h(t.date), N, I), $ = `${oe}-day-${n}-header`, H = B[o] ?? !1 ? t.slots : t.slots.slice(0, y), O = t.slots.length - H.length, F = t.slots.length === 0;
+              return (
+                // Use a plain <div role="group"> rather than <section> — a
+                // <section> with aria-labelledby is a landmark, and nesting many
+                // landmarks inside the outer slot-grid landmark fails axe's
+                // landmark-unique rule.
+                /* @__PURE__ */ v(
+                  "div",
+                  {
+                    role: "group",
+                    className: Q(),
+                    "aria-labelledby": $,
+                    "data-empty": F || void 0,
+                    children: [
+                      /* @__PURE__ */ r("h3", { id: $, className: Be({ size: i }), children: m }),
+                      F ? /* @__PURE__ */ r("p", { className: "type-body-sm ds:text-[var(--muted-foreground)] ds:m-0", children: u("slotGrid.noSlots") }) : null,
+                      /* @__PURE__ */ r("ul", { className: U(), children: H.map((f) => {
+                        const pe = je(
+                          f,
+                          t,
+                          N,
+                          I,
+                          ({ time: K, day: he }) => u("slotGrid.slotLabel", { time: K, day: he })
+                        ), fe = c === f.id, q = f.available === !1 || p;
+                        return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+                          "button",
+                          {
+                            type: "button",
+                            className: Ve({ size: i }),
+                            "aria-label": pe,
+                            "aria-pressed": fe,
+                            disabled: q,
+                            "aria-disabled": q || void 0,
+                            "data-slot-id": f.id,
+                            onClick: () => x(f, t),
+                            onKeyDown: (K) => ue(K, f, t),
+                            children: Z(f, N, I)
+                          }
+                        ) }, f.id);
+                      }) }),
+                      O > 0 ? /* @__PURE__ */ r(
+                        W,
+                        {
+                          intent: "ghost",
+                          size: i === "lg" ? "md" : "sm",
+                          onClick: () => T(t, o),
+                          disabled: p,
+                          children: u("slotGrid.showMore", { count: O })
+                        }
+                      ) : null
+                    ]
+                  },
+                  o
+                )
+              );
+            })
+          }
+        ),
+        s && d ? /* @__PURE__ */ r(
+          "p",
+          {
+            className: "type-body-sm ds:text-[var(--muted-foreground)] ds:m-0 ds:text-start",
+            "data-slot-grid-hint": "",
+            children: d
+          }
+        ) : null
+      ] });
+    }
+    return /* @__PURE__ */ v(
       "div",
       {
-        ref: re,
+        ref: ie,
         id: G,
         role: "region",
-        "aria-label": le,
-        className: Me({ size: i, className: se }),
+        "aria-label": ce,
+        className: ze({ size: i, className: ae }),
         "data-component": "slot-grid",
         "data-component-id": G,
         "data-state": a,
-        ...ae,
+        ...re,
         children: [
-          /* @__PURE__ */ v("div", { className: ze(), children: [
+          /* @__PURE__ */ v("div", { className: Ce(), children: [
             /* @__PURE__ */ r(
-              W,
+              X,
               {
-                icon: /* @__PURE__ */ r(je, {}),
-                "aria-label": p("slotGrid.previousDays"),
+                icon: /* @__PURE__ */ r(Te, {}),
+                "aria-label": u("slotGrid.previousDays"),
                 className: "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)] ds:sm:min-h-[var(--min-target-size)]",
                 size: i === "lg" ? "md" : "sm",
                 intent: "ghost",
                 flipIconInRtl: !0,
-                disabled: !C || m,
+                disabled: !C || p,
                 onClick: L
               }
             ),
-            Z ? /* @__PURE__ */ r(
-              q,
+            ee ? /* @__PURE__ */ r(
+              W,
               {
                 intent: "secondary",
                 size: i === "lg" ? "md" : "sm",
-                disabled: m,
-                onClick: te,
-                children: p("slotGrid.nextAvailable")
+                disabled: p,
+                onClick: se,
+                children: u("slotGrid.nextAvailable")
               }
             ) : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
             /* @__PURE__ */ r(
-              W,
+              X,
               {
-                icon: /* @__PURE__ */ r(Te, {}),
-                "aria-label": p("slotGrid.nextDays"),
+                icon: /* @__PURE__ */ r(Pe, {}),
+                "aria-label": u("slotGrid.nextDays"),
                 className: "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)] ds:sm:min-h-[var(--min-target-size)]",
                 size: i === "lg" ? "md" : "sm",
                 intent: "ghost",
                 flipIconInRtl: !0,
-                disabled: !R || m,
-                onClick: B
+                disabled: !R || p,
+                onClick: E
               }
             )
           ] }),
@@ -643,11 +658,11 @@ const Pe = ye(
     );
   }
 );
-Pe.displayName = "SlotGrid";
+_e.displayName = "SlotGrid";
 export {
-  Pe as S,
-  Ze as f,
-  Ye as i,
-  Ke as s
+  _e as S,
+  et as f,
+  Ze as i,
+  Me as s
 };
-//# sourceMappingURL=slot-grid-B-IAFX3C.js.map
+//# sourceMappingURL=slot-grid-BhjaLJ0o.js.map