@alfadocs/ui-kit 0.1.7 → 0.1.9

package/dist/_chunks/stepper-calendar.agent-9iT3ClIB.js

@@ -0,0 +1,646 @@
+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 $, useCallback as Q, useImperativeHandle as Se } from "react";
+import { c as M } from "./index-D2ZczOXr.js";
+import { useTranslation as Te } from "react-i18next";
+import { s as De } from "./stepper-C-sIpRRU.js";
+import { S as Ae } from "./stepper-progress-Bmen-YXB.js";
+import { B as U } from "./button-7mLWcMp_.js";
+import { I as se } from "./icon-button-Wnnde5lc.js";
+import { p as _, S as oe } from "./slot-grid-D_l5VsHG.js";
+import { S as ie } from "./skeleton-dtqyF09N.js";
+import { E as pe } from "./empty-state-DQPtRp2b.js";
+import { a as Le } from "./calendar-nGEgelJs.js";
+import { a as X, s as de, b as K, c as V, f as Y, i as le } from "./isSameMonth-5wNF2f4I.js";
+import { C as Ie } from "./chevron-left-CX1jqD2M.js";
+import { C as Re } from "./chevron-right-BrpYejk0.js";
+import { i as ze } from "./isSameDay-ecuM8PBB.js";
+function ce(e, d, v) {
+  return X(e, -1, v);
+}
+const je = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})$/, R = 4, Be = 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"
+    }
+  }
+), Ee = 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" }
+  }
+), Fe = 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(" ")
+), Ke = 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)]"
+), Ve = 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(" ")
+), _e = 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 $e(e) {
+  return e.serviceId ? e.date ? e.time ? 3 : 2 : 1 : 0;
+}
+const me = ee(
+  ({ services: e, selectedId: d, onSelect: v, durationLabel: i, groupLabel: b }, u) => {
+    const k = $([]), S = (() => {
+      const r = e.findIndex((s) => s.id === d);
+      return r >= 0 ? r : 0;
+    })(), f = (r) => {
+      const s = (r + e.length) % e.length, g = k.current[s];
+      if (!g) return;
+      g.focus();
+      const l = e[s];
+      l && v(l.id);
+    }, n = (r, s) => {
+      const g = typeof document < "u" && document.documentElement.dir === "rtl", l = g ? "ArrowLeft" : "ArrowRight", w = g ? "ArrowRight" : "ArrowLeft";
+      if (r.key === l || 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 === d;
+          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: Fe(),
+              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: d,
+    onSelectDate: v,
+    loading: i,
+    locale: b,
+    weekStartsOn: u,
+    prevLabel: k,
+    nextLabel: S,
+    emptyLabel: f
+  }, n) => {
+    const r = N(() => {
+      if (d) return _(d);
+      const t = [...e].sort()[0];
+      return t ? _(t) : /* @__PURE__ */ new Date();
+    }, [e, d]), [s, g] = Z(r), [l, w] = Z(
+      d ? _(d) : r
+    ), G = de(s), z = K(G, { weekStartsOn: u }), c = N(() => {
+      const t = [];
+      for (let p = 0; p < 42; p += 1)
+        t.push(V(z, p));
+      return t;
+    }, [z]), H = N(() => {
+      const t = K(/* @__PURE__ */ new Date(), { weekStartsOn: u }), p = new Intl.DateTimeFormat(b, { weekday: "short" });
+      return Array.from({ length: 7 }, (D, x) => p.format(V(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]), j = 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(V(l, p[t.key]));
+        return;
+      }
+      if (t.key === "Home") {
+        t.preventDefault(), h(K(l, { weekStartsOn: u }));
+        return;
+      }
+      if (t.key === "End") {
+        t.preventDefault(), h(V(K(l, { weekStartsOn: u }), 6));
+        return;
+      }
+      if (t.key === "PageUp") {
+        t.preventDefault(), h(ce(l));
+        return;
+      }
+      if (t.key === "PageDown") {
+        t.preventDefault(), h(X(l, 1));
+        return;
+      }
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), j(l) && v(W(l)));
+    }, y = $(null);
+    return q(() => {
+      var t;
+      (t = y.current) == null || t.focus();
+    }, [l.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: Ke(), children: [
+        /* @__PURE__ */ a(
+          se,
+          {
+            icon: /* @__PURE__ */ a(Ie, {}),
+            "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(Re, {}),
+            "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 D = c.slice(p * 7, p * 7 + 7);
+              return /* @__PURE__ */ a(
+                "div",
+                {
+                  role: "row",
+                  className: J(),
+                  children: D.map((x) => {
+                    const A = W(x), P = !le(x, s), L = j(x), B = d === A, E = ze(x, l);
+                    return /* @__PURE__ */ a(
+                      "button",
+                      {
+                        ref: E ? y : void 0,
+                        type: "button",
+                        role: "gridcell",
+                        "aria-selected": B,
+                        "aria-disabled": !L || void 0,
+                        disabled: !L,
+                        "data-outside": P || void 0,
+                        tabIndex: E ? 0 : -1,
+                        onClick: () => L && v(A),
+                        className: Ve(),
+                        children: Y(x, "d")
+                      },
+                      A
+                    );
+                  })
+                },
+                `week-${p}`
+              );
+            })
+          ]
+        }
+      )
+    ] });
+  }
+);
+fe.displayName = "StepperCalendar.MonthGrid";
+function Ge({
+  date: e,
+  slots: d,
+  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 (d.length === 0)
+    return /* @__PURE__ */ a(pe, { variant: "no-results", title: b });
+  const k = d.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 = je.exec(f.id);
+        n && u(n[2]);
+      }
+    }
+  );
+}
+const He = ee(
+  ({
+    services: e,
+    availableDates: d,
+    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: l,
+    className: w,
+    ...G
+  }, z) => {
+    var ae;
+    const { t: c, i18n: H } = Te(), T = H.language ?? "en", j = N(
+      () => Le(T),
+      [T]
+    ), h = $e(i), [o, y] = Z(h);
+    q(() => {
+      o > h && y(h);
+    }, [o, h]);
+    const t = $(null), p = $(!0);
+    q(() => {
+      var m;
+      if (p.current) {
+        p.current = !1;
+        return;
+      }
+      (m = t.current) == null || m.focus();
+    }, [o]);
+    const D = 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"), A = c("navigation.stepperCalendar.actions.back"), P = c("navigation.stepperCalendar.actions.next"), L = c("navigation.stepperCalendar.actions.submit"), B = c("navigation.stepperCalendar.time.empty"), E = 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((F) => F === 0 ? 1 : F);
+      }, 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(R - 1, m + 1)), ke = () => u == null ? void 0 : u(i), te = `stepper-calendar-step-${o}-heading`, Ce = N(
+      () => new Set(d),
+      [d]
+    );
+    let I = null;
+    o === 0 ? I = /* @__PURE__ */ a(
+      me,
+      {
+        services: e,
+        selectedId: i.serviceId,
+        onSelect: be,
+        durationLabel: ve,
+        groupLabel: ge
+      }
+    ) : o === 1 ? I = /* @__PURE__ */ a(
+      fe,
+      {
+        availableDates: Ce,
+        selectedDate: i.date,
+        onSelectDate: he,
+        loading: S,
+        locale: T,
+        weekStartsOn: j,
+        prevLabel: E,
+        nextLabel: ue,
+        emptyLabel: B
+      }
+    ) : o === 2 ? I = /* @__PURE__ */ a(
+      Ge,
+      {
+        date: i.date,
+        slots: i.date ? v[i.date] ?? [] : [],
+        selectedTime: i.time,
+        loading: f,
+        emptyLabel: B,
+        onSelect: ye
+      }
+    ) : I = /* @__PURE__ */ a("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: k });
+    const Ne = o === R - 1, Me = De(
+      o,
+      o,
+      n == null ? void 0 : n[o]
+    ), re = N(
+      () => ({
+        getCurrentStep: () => o,
+        getTotalSteps: () => R,
+        gotoStep: (m) => {
+          const F = Math.max(0, Math.min(m, R - 1)), ne = Math.min(F, h);
+          ne !== o && y(ne);
+        },
+        next: () => {
+          o < R - 1 && O && y(o + 1);
+        },
+        previous: () => {
+          o > 0 && y(o - 1);
+        }
+      }),
+      [o, h, O]
+    );
+    return Se(z, () => re, [re]), /* @__PURE__ */ C(
+      "div",
+      {
+        role: "region",
+        "aria-label": x,
+        id: l,
+        "data-component": "stepper-calendar",
+        "data-component-id": l,
+        className: Be({ layout: r, density: s, className: w }),
+        ...G,
+        children: [
+          /* @__PURE__ */ a(
+            Ae,
+            {
+              activeStep: o,
+              steps: D,
+              "aria-label": x
+            }
+          ),
+          /* @__PURE__ */ C(
+            "section",
+            {
+              "aria-labelledby": te,
+              className: Ee({ 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 = D[o]) == null ? void 0 : ae.label
+                  }
+                ),
+                I,
+                /* @__PURE__ */ C("div", { className: _e(), children: [
+                  /* @__PURE__ */ a(
+                    U,
+                    {
+                      type: "button",
+                      intent: "ghost",
+                      size: "md",
+                      onClick: xe,
+                      disabled: o === 0,
+                      children: A
+                    }
+                  ),
+                  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
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+He.displayName = "StepperCalendar";
+const ot = {
+  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, d) => {
+        e.gotoStep(d.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."
+    }
+  }
+};
+export {
+  He as S,
+  ot as s
+};
+//# sourceMappingURL=stepper-calendar.agent-9iT3ClIB.js.map