@alfadocs/ui-kit 0.25.0 → 0.25.2

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

@@ -1,648 +0,0 @@
-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