@alfadocs/ui-kit-debug 0.1.8 → 0.2.0

package/dist/_chunks/stepper-calendar-BLOJUE0-.js

@@ -0,0 +1,648 @@
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
+import { forwardRef as ee, useMemo as N, useState as Z, useEffect as q, useRef as z, useCallback as Q, useImperativeHandle as Te } from "react";
+import { c as M } from "./index-D2ZczOXr.js";
+import { useTranslation as Ae } from "react-i18next";
+import { s as De } from "./stepper-C-sIpRRU.js";
+import { S as Le } from "./stepper-progress-jFY8BSf7.js";
+import { u as Re } from "./registry-C9nwlNyL.js";
+import { B as U } from "./button-DD_0Xdmr.js";
+import { I as se } from "./icon-button-C4CGcYuz.js";
+import { p as $, S as oe } from "./slot-grid-CgpYgBkW.js";
+import { S as ie } from "./skeleton-CZbwyJAA.js";
+import { E as pe } from "./empty-state-3CLJIXSj.js";
+import { a as Ie } from "./calendar-zy0tUUVG.js";
+import { a as X, s as de, b as V, c as _, f as Y, i as le } from "./isSameMonth-5wNF2f4I.js";
+import { C as ze } from "./chevron-left-CX1jqD2M.js";
+import { C as je } from "./chevron-right-BrpYejk0.js";
+import { i as Be } from "./isSameDay-ecuM8PBB.js";
+function ce(e, l, v) {
+  return X(e, -1, v);
+}
+const Ee = {
+  id: "stepper-calendar",
+  capabilities: ["navigate", "view_change"],
+  state: {
+    currentStep: {
+      type: "number",
+      descriptionKey: "ui.agent.stepperCalendar.state.currentStep",
+      description: "Zero-indexed active step (0 = service, 1 = date, 2 = time, 3 = details).",
+      read: (e) => e.getCurrentStep()
+    },
+    totalSteps: {
+      type: "number",
+      descriptionKey: "ui.agent.stepperCalendar.state.totalSteps",
+      description: "Total number of steps in the booking flow (always 4).",
+      read: (e) => e.getTotalSteps()
+    }
+  },
+  actions: {
+    goto_step: {
+      safety: "read",
+      argsType: "{ step: number }",
+      descriptionKey: "ui.agent.stepperCalendar.actions.gotoStep",
+      description: "Jump to the given step. Steps beyond the first-incomplete are gated internally.",
+      invoke: (e, l) => {
+        e.gotoStep(l.step);
+      }
+    },
+    next: {
+      safety: "read",
+      descriptionKey: "ui.agent.stepperCalendar.actions.next",
+      description: "Advance to the next step when the current step has a valid value.",
+      invoke: (e) => {
+        e.next();
+      }
+    },
+    previous: {
+      safety: "read",
+      descriptionKey: "ui.agent.stepperCalendar.actions.previous",
+      description: "Return to the previous step.",
+      invoke: (e) => {
+        e.previous();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "stepper-calendar",
+      description: "Marks the StepperCalendar root region."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, Fe = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})$/, I = 4, Ke = M(
+  "ds:flex ds:w-full ds:flex-col ds:gap-[var(--spacing-md)] ds:text-[var(--foreground)]",
+  {
+    variants: {
+      layout: {
+        vertical: "ds:flex-col",
+        horizontal: "ds:lg:flex-row ds:lg:items-start"
+      },
+      density: {
+        comfortable: "ds:gap-[var(--spacing-md)]",
+        compact: "ds:gap-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: {
+      layout: "vertical",
+      density: "comfortable"
+    }
+  }
+), Ve = M(
+  [
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+    "ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)] ds:bg-[var(--card)]",
+    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+    "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]"
+  ].join(" "),
+  {
+    variants: {
+      density: {
+        comfortable: "ds:gap-[var(--spacing-md)]",
+        compact: "ds:gap-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: { density: "comfortable" }
+  }
+), _e = M(
+  [
+    "ds:group/service ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-xs)] ds:text-start",
+    "ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)] ds:bg-[var(--background)]",
+    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+    "ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:transition-[background-color,border-color] ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]",
+    "ds:motion-reduce:transition-none",
+    "ds:hover:enabled:bg-[var(--muted)]/40",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:aria-checked:border-[var(--primary)] ds:aria-checked:bg-[var(--primary)]/5",
+    "ds:disabled:opacity-50 ds:disabled:cursor-not-allowed"
+  ].join(" ")
+), $e = M(
+  "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]"
+), J = M(
+  "ds:grid ds:grid-cols-7 ds:gap-[var(--spacing-xs)]"
+), Ge = M(
+  [
+    "ds:inline-flex ds:items-center ds:justify-center",
+    // `min-target-size` (44/48px) governs the rendered size — it always
+    // exceeds the explicit floor below. Keeping the explicit floor for
+    // grid layout stability when the cell content is empty (skeletons),
+    // matching the precedent in `slot-grid`.
+    "ds:min-h-[var(--min-target-size)] ds:min-w-[var(--min-target-size)]",
+    "ds:h-10 ds:w-10 ds:rounded-[var(--radius-sm)]",
+    "ds:text-[length:var(--font-size-sm)] ds:font-[var(--font-weight-medium)]",
+    "ds:border ds:border-transparent ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+    "ds:transition-[background-color,border-color,color] ds:duration-[var(--animation-duration)] ds:ease-[var(--ease-out)]",
+    "ds:motion-reduce:transition-none",
+    "ds:hover:enabled:bg-[var(--muted)]/40",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:disabled:opacity-40 ds:disabled:cursor-not-allowed",
+    "ds:aria-selected:bg-[var(--primary)] ds:aria-selected:text-[var(--primary-foreground)]",
+    "ds:aria-selected:border-[var(--primary)]",
+    "ds:data-[outside=true]:text-[var(--muted-foreground)]"
+  ].join(" ")
+), He = M(
+  "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:mt-[var(--spacing-md)]"
+);
+function W(e) {
+  return Y(e, "yyyy-MM-dd");
+}
+function Pe(e) {
+  return e.serviceId ? e.date ? e.time ? 3 : 2 : 1 : 0;
+}
+const me = ee(
+  ({ services: e, selectedId: l, onSelect: v, durationLabel: i, groupLabel: b }, u) => {
+    const k = z([]), S = (() => {
+      const r = e.findIndex((s) => s.id === l);
+      return r >= 0 ? r : 0;
+    })(), f = (r) => {
+      const s = (r + e.length) % e.length, g = k.current[s];
+      if (!g) return;
+      g.focus();
+      const d = e[s];
+      d && v(d.id);
+    }, n = (r, s) => {
+      const g = typeof document < "u" && document.documentElement.dir === "rtl", d = g ? "ArrowLeft" : "ArrowRight", w = g ? "ArrowRight" : "ArrowLeft";
+      if (r.key === d || r.key === "ArrowDown") {
+        r.preventDefault(), f(s + 1);
+        return;
+      }
+      if (r.key === w || r.key === "ArrowUp") {
+        r.preventDefault(), f(s - 1);
+        return;
+      }
+      if (r.key === "Home") {
+        r.preventDefault(), f(0);
+        return;
+      }
+      r.key === "End" && (r.preventDefault(), f(e.length - 1));
+    };
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: u,
+        role: "radiogroup",
+        "aria-label": b,
+        className: "ds:grid ds:gap-[var(--spacing-sm)] ds:sm:grid-cols-2",
+        children: e.map((r, s) => {
+          const g = r.id === l;
+          return /* @__PURE__ */ C(
+            "button",
+            {
+              ref: (w) => {
+                k.current[s] = w;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": g,
+              tabIndex: s === S ? 0 : -1,
+              onClick: () => v(r.id),
+              onKeyDown: (w) => n(w, s),
+              className: _e(),
+              children: [
+                /* @__PURE__ */ a("span", { className: "type-body-sm ds:font-[var(--font-weight-semibold)] ds:text-[var(--foreground)]", children: r.label }),
+                r.description ? /* @__PURE__ */ a("span", { className: "type-meta ds:text-[var(--muted-foreground)]", children: r.description }) : null,
+                /* @__PURE__ */ a("span", { className: "type-meta ds:text-[var(--muted-foreground)]", children: i(r.durationMin) })
+              ]
+            },
+            r.id
+          );
+        })
+      }
+    );
+  }
+);
+me.displayName = "StepperCalendar.ServiceGrid";
+const fe = ee(
+  ({
+    availableDates: e,
+    selectedDate: l,
+    onSelectDate: v,
+    loading: i,
+    locale: b,
+    weekStartsOn: u,
+    prevLabel: k,
+    nextLabel: S,
+    emptyLabel: f
+  }, n) => {
+    const r = N(() => {
+      if (l) return $(l);
+      const t = [...e].sort()[0];
+      return t ? $(t) : /* @__PURE__ */ new Date();
+    }, [e, l]), [s, g] = Z(r), [d, w] = Z(
+      l ? $(l) : r
+    ), G = de(s), j = V(G, { weekStartsOn: u }), c = N(() => {
+      const t = [];
+      for (let p = 0; p < 42; p += 1)
+        t.push(_(j, p));
+      return t;
+    }, [j]), H = N(() => {
+      const t = V(/* @__PURE__ */ new Date(), { weekStartsOn: u }), p = new Intl.DateTimeFormat(b, { weekday: "short" });
+      return Array.from({ length: 7 }, (A, x) => p.format(_(t, x)));
+    }, [b, u]), T = N(() => {
+      try {
+        return new Intl.DateTimeFormat(b, {
+          month: "long",
+          year: "numeric"
+        }).format(s);
+      } catch {
+        return Y(s, "MMMM yyyy");
+      }
+    }, [b, s]), B = Q(
+      (t) => e.has(W(t)),
+      [e]
+    ), h = Q(
+      (t) => {
+        w(t), le(t, s) || g(de(t));
+      },
+      [s]
+    ), o = (t) => {
+      const p = {
+        ArrowLeft: -1,
+        ArrowRight: 1,
+        ArrowUp: -7,
+        ArrowDown: 7
+      };
+      if (t.key in p) {
+        t.preventDefault(), h(_(d, p[t.key]));
+        return;
+      }
+      if (t.key === "Home") {
+        t.preventDefault(), h(V(d, { weekStartsOn: u }));
+        return;
+      }
+      if (t.key === "End") {
+        t.preventDefault(), h(_(V(d, { weekStartsOn: u }), 6));
+        return;
+      }
+      if (t.key === "PageUp") {
+        t.preventDefault(), h(ce(d));
+        return;
+      }
+      if (t.key === "PageDown") {
+        t.preventDefault(), h(X(d, 1));
+        return;
+      }
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), B(d) && v(W(d)));
+    }, y = z(null);
+    return q(() => {
+      var t;
+      (t = y.current) == null || t.focus();
+    }, [d.getTime()]), i ? /* @__PURE__ */ C(
+      "div",
+      {
+        ref: n,
+        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+        children: [
+          /* @__PURE__ */ a(ie, { variant: "text", size: "md", width: "40%" }),
+          /* @__PURE__ */ a("div", { className: J(), children: Array.from({ length: 42 }, (t, p) => /* @__PURE__ */ a(
+            ie,
+            {
+              variant: "rounded",
+              size: "md",
+              height: "40px"
+            },
+            `day-skeleton-${p}`
+          )) })
+        ]
+      }
+    ) : e.size === 0 ? /* @__PURE__ */ a("div", { ref: n, children: /* @__PURE__ */ a(pe, { variant: "no-results", title: f }) }) : /* @__PURE__ */ C("div", { ref: n, className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ C("div", { className: $e(), children: [
+        /* @__PURE__ */ a(
+          se,
+          {
+            icon: /* @__PURE__ */ a(ze, {}),
+            "aria-label": k,
+            size: "sm",
+            intent: "ghost",
+            flipIconInRtl: !0,
+            onClick: () => g(ce(s))
+          }
+        ),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "type-body-sm ds:font-[var(--font-weight-semibold)]",
+            "aria-live": "polite",
+            children: T
+          }
+        ),
+        /* @__PURE__ */ a(
+          se,
+          {
+            icon: /* @__PURE__ */ a(je, {}),
+            "aria-label": S,
+            size: "sm",
+            intent: "ghost",
+            flipIconInRtl: !0,
+            onClick: () => g(X(s, 1))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ C(
+        "div",
+        {
+          role: "grid",
+          "aria-label": T,
+          className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+          onKeyDown: o,
+          children: [
+            /* @__PURE__ */ a("div", { className: J(), role: "row", children: H.map((t) => /* @__PURE__ */ a(
+              "span",
+              {
+                role: "columnheader",
+                className: "type-meta ds:text-center ds:text-[var(--muted-foreground)]",
+                children: t
+              },
+              t
+            )) }),
+            Array.from({ length: 6 }, (t, p) => {
+              const A = c.slice(p * 7, p * 7 + 7);
+              return /* @__PURE__ */ a(
+                "div",
+                {
+                  role: "row",
+                  className: J(),
+                  children: A.map((x) => {
+                    const D = W(x), P = !le(x, s), L = B(x), E = l === D, F = Be(x, d);
+                    return /* @__PURE__ */ a(
+                      "button",
+                      {
+                        ref: F ? y : void 0,
+                        type: "button",
+                        role: "gridcell",
+                        "aria-selected": E,
+                        "aria-disabled": !L || void 0,
+                        disabled: !L,
+                        "data-outside": P || void 0,
+                        tabIndex: F ? 0 : -1,
+                        onClick: () => L && v(D),
+                        className: Ge(),
+                        children: Y(x, "d")
+                      },
+                      D
+                    );
+                  })
+                },
+                `week-${p}`
+              );
+            })
+          ]
+        }
+      )
+    ] });
+  }
+);
+fe.displayName = "StepperCalendar.MonthGrid";
+function Oe({
+  date: e,
+  slots: l,
+  selectedTime: v,
+  loading: i,
+  emptyLabel: b,
+  onSelect: u
+}) {
+  if (!e) return null;
+  if (i)
+    return /* @__PURE__ */ a(oe, { days: [{ date: e, slots: [] }], state: "loading" });
+  if (l.length === 0)
+    return /* @__PURE__ */ a(pe, { variant: "no-results", title: b });
+  const k = l.map((f) => {
+    const [n, r] = f.split(":"), s = $(e);
+    return s.setHours(Number(n), Number(r), 0, 0), {
+      id: `${e}T${f}`,
+      start: s,
+      label: f
+    };
+  });
+  return /* @__PURE__ */ a(
+    oe,
+    {
+      days: [{ date: e, slots: k }],
+      selectedSlotId: v ? `${e}T${v}` : void 0,
+      onSlotSelect: (f) => {
+        const n = Fe.exec(f.id);
+        n && u(n[2]);
+      }
+    }
+  );
+}
+const Ue = ee(
+  ({
+    services: e,
+    availableDates: l,
+    availableSlots: v,
+    value: i,
+    onChange: b,
+    onSubmit: u,
+    detailsFields: k,
+    loadingDates: S = !1,
+    loadingSlots: f = !1,
+    stepStatuses: n,
+    layout: r = "vertical",
+    density: s = "comfortable",
+    "aria-label": g,
+    id: d,
+    className: w,
+    ...G
+  }, j) => {
+    var ae;
+    const { t: c, i18n: H } = Ae(), T = H.language ?? "en", B = N(
+      () => Ie(T),
+      [T]
+    ), h = Pe(i), [o, y] = Z(h);
+    q(() => {
+      o > h && y(h);
+    }, [o, h]);
+    const t = z(null), p = z(!0);
+    q(() => {
+      var m;
+      if (p.current) {
+        p.current = !1;
+        return;
+      }
+      (m = t.current) == null || m.focus();
+    }, [o]);
+    const A = N(
+      () => [
+        {
+          label: c("navigation.stepperCalendar.steps.service"),
+          status: n == null ? void 0 : n[0]
+        },
+        {
+          label: c("navigation.stepperCalendar.steps.date"),
+          status: n == null ? void 0 : n[1]
+        },
+        {
+          label: c("navigation.stepperCalendar.steps.time"),
+          status: n == null ? void 0 : n[2]
+        },
+        {
+          label: c("navigation.stepperCalendar.steps.details"),
+          status: n == null ? void 0 : n[3]
+        }
+      ],
+      [n, c]
+    ), x = g ?? c("navigation.stepperCalendar.label"), D = c("navigation.stepperCalendar.actions.back"), P = c("navigation.stepperCalendar.actions.next"), L = c("navigation.stepperCalendar.actions.submit"), E = c("navigation.stepperCalendar.time.empty"), F = c("navigation.stepperCalendar.date.previousMonth"), ue = c("navigation.stepperCalendar.date.nextMonth"), ge = c("navigation.stepperCalendar.steps.service"), ve = Q(
+      (m) => c("navigation.stepperCalendar.service.duration", { minutes: m }),
+      [c]
+    ), O = o === 0 ? !!i.serviceId : o === 1 ? !!i.date : o === 2 ? !!i.time : !1, be = (m) => {
+      b({ ...i, serviceId: m }), setTimeout(() => {
+        y((K) => K === 0 ? 1 : K);
+      }, 120);
+    }, he = (m) => {
+      b({ ...i, date: m, time: void 0 });
+    }, ye = (m) => {
+      b({ ...i, time: m });
+    }, xe = () => y((m) => Math.max(0, m - 1)), we = () => y((m) => Math.min(I - 1, m + 1)), ke = () => u == null ? void 0 : u(i), te = `stepper-calendar-step-${o}-heading`, Ce = N(
+      () => new Set(l),
+      [l]
+    );
+    let R = null;
+    o === 0 ? R = /* @__PURE__ */ a(
+      me,
+      {
+        services: e,
+        selectedId: i.serviceId,
+        onSelect: be,
+        durationLabel: ve,
+        groupLabel: ge
+      }
+    ) : o === 1 ? R = /* @__PURE__ */ a(
+      fe,
+      {
+        availableDates: Ce,
+        selectedDate: i.date,
+        onSelectDate: he,
+        loading: S,
+        locale: T,
+        weekStartsOn: B,
+        prevLabel: F,
+        nextLabel: ue,
+        emptyLabel: E
+      }
+    ) : o === 2 ? R = /* @__PURE__ */ a(
+      Oe,
+      {
+        date: i.date,
+        slots: i.date ? v[i.date] ?? [] : [],
+        selectedTime: i.time,
+        loading: f,
+        emptyLabel: E,
+        onSelect: ye
+      }
+    ) : R = /* @__PURE__ */ a("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: k });
+    const Ne = o === I - 1, Me = De(
+      o,
+      o,
+      n == null ? void 0 : n[o]
+    ), Se = N(
+      () => ({
+        getCurrentStep: () => o,
+        getTotalSteps: () => I,
+        gotoStep: (m) => {
+          const K = Math.max(0, Math.min(m, I - 1)), ne = Math.min(K, h);
+          ne !== o && y(ne);
+        },
+        next: () => {
+          o < I - 1 && O && y(o + 1);
+        },
+        previous: () => {
+          o > 0 && y(o - 1);
+        }
+      }),
+      [o, h, O]
+    ), re = z(null);
+    return Te(j, () => re.current, []), Re(Ee, Se, d), /* @__PURE__ */ C(
+      "div",
+      {
+        ref: re,
+        role: "region",
+        "aria-label": x,
+        id: d,
+        "data-component": "stepper-calendar",
+        "data-component-id": d,
+        className: Ke({ layout: r, density: s, className: w }),
+        ...G,
+        children: [
+          /* @__PURE__ */ a(
+            Le,
+            {
+              activeStep: o,
+              steps: A,
+              "aria-label": x
+            }
+          ),
+          /* @__PURE__ */ C(
+            "section",
+            {
+              "aria-labelledby": te,
+              className: Ve({ density: s }),
+              "data-step": o,
+              "data-state": Me,
+              children: [
+                /* @__PURE__ */ a(
+                  "h2",
+                  {
+                    ref: t,
+                    id: te,
+                    tabIndex: -1,
+                    className: "type-body-sm ds:font-[var(--font-weight-semibold)] ds:focus:outline-none",
+                    children: (ae = A[o]) == null ? void 0 : ae.label
+                  }
+                ),
+                R,
+                /* @__PURE__ */ C("div", { className: He(), children: [
+                  /* @__PURE__ */ a(
+                    U,
+                    {
+                      type: "button",
+                      intent: "ghost",
+                      size: "md",
+                      onClick: xe,
+                      disabled: o === 0,
+                      children: D
+                    }
+                  ),
+                  Ne ? /* @__PURE__ */ a(
+                    U,
+                    {
+                      type: "button",
+                      intent: "primary",
+                      size: "md",
+                      onClick: ke,
+                      children: L
+                    }
+                  ) : /* @__PURE__ */ a(
+                    U,
+                    {
+                      type: "button",
+                      intent: "primary",
+                      size: "md",
+                      onClick: we,
+                      disabled: !O,
+                      children: P
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Ue.displayName = "StepperCalendar";
+export {
+  Ue as S,
+  Ee as s
+};
+//# sourceMappingURL=stepper-calendar-BLOJUE0-.js.map