@alfadocs/ui-kit-debug 1.3.13 → 1.4.0

package/dist/_chunks/slot-grid-DNiUcXy2.js

@@ -0,0 +1,640 @@
+import { jsx as r, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as ye, useId as he, useState as me, useCallback as M, useRef as ge, useEffect as ve, useMemo as be } from "react";
+import { c as m } from "./index-D2ZczOXr.js";
+import { useTranslation as we } from "react-i18next";
+import { B as F } from "./button-CPGiR_bH.js";
+import { I as q } from "./icon-button-C_kbcd7I.js";
+import { E as xe } from "./empty-state-CrLsi0XI.js";
+import { S as W } from "./skeleton-CZbwyJAA.js";
+import { u as Se } from "./registry-DvAUVLHh.js";
+import { b as ke, f as De } from "./format-4HNwNGrN.js";
+import { p as Ie } from "./parseISO-fOGpHKXm.js";
+const Ge = {
+  id: "slot-grid",
+  // pick           → `select_slot` + the `selectedSlotId` state slot.
+  // range_navigate → `next_days` / `previous_days` + `hasNext` / `hasPrevious`.
+  // expand         → `show_more_day` + the `expandedDays` state slot.
+  //
+  // Host-delegated, deliberately WITHOUT an action: the optional
+  // "Next available" CTA (`showNextAvailable` + `onJumpToNextAvailable`)
+  // stays a native click on the toolbar button. It is a consumer-owned
+  // jump to a window the grid has not been given, so the agent reaches it
+  // through the DOM, or by reading `slotsByDay` and paging with
+  // `next_days` until availability appears.
+  capabilities: ["pick", "range_navigate", "expand"],
+  state: {
+    status: {
+      type: "'default' | 'loading' | 'disabled' | 'empty'",
+      descriptionKey: "ui.agent.slotGrid.state.status",
+      description: 'Visual state of the grid. Read this before concluding "no availability" — `loading` means the window has not resolved yet.',
+      read: (e) => e.getStatus()
+    },
+    selectedSlotId: {
+      type: "string | null",
+      descriptionKey: "ui.agent.slotGrid.state.selectedSlotId",
+      description: "Id of the slot the consumer has committed as selected, or null. Reflects the controlled `selectedSlotId` prop, not an internal choice.",
+      read: (e) => e.getSelectedSlotId()
+    },
+    visibleDays: {
+      type: "string[]",
+      descriptionKey: "ui.agent.slotGrid.state.visibleDays",
+      description: "Calendar days currently rendered as columns, as `yyyy-MM-dd` keys in display order.",
+      read: (e) => e.getVisibleDays()
+    },
+    slotsByDay: {
+      type: "Record<string, string[]>",
+      descriptionKey: "ui.agent.slotGrid.state.slotsByDay",
+      description: 'Map of day key (`yyyy-MM-dd`) to the ids of that day’s bookable slots. Ids only — never slot or patient objects. Includes slots still collapsed behind "Show more".',
+      read: (e) => e.getSlotsByDay()
+    },
+    expandedDays: {
+      type: "string[]",
+      descriptionKey: "ui.agent.slotGrid.state.expandedDays",
+      description: 'Day keys whose "Show more" control has been used, so every slot for that day is rendered.',
+      read: (e) => e.getExpandedDays()
+    },
+    hasPrevious: {
+      type: "boolean",
+      descriptionKey: "ui.agent.slotGrid.state.hasPrevious",
+      description: 'True when an earlier window of days exists — the "previous days" arrow is offered.',
+      read: (e) => e.getHasPrevious()
+    },
+    hasNext: {
+      type: "boolean",
+      descriptionKey: "ui.agent.slotGrid.state.hasNext",
+      description: 'True when a later window of days exists — the "next days" arrow is offered.',
+      read: (e) => e.getHasNext()
+    }
+  },
+  actions: {
+    select_slot: {
+      // Fires the consumer's `onSlotSelect`, exactly as a click on the slot
+      // button does. Persistent in the consumer's booking draft, and
+      // reversible by selecting another slot — `write`, not `phi`: a slot is
+      // availability, not patient data.
+      safety: "write",
+      argsType: "{ slotId: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          slotId: {
+            type: "string",
+            description: "Id of the slot to select. Must be one of the ids returned by the `slotsByDay` state slot."
+          }
+        },
+        required: ["slotId"]
+      },
+      idempotent: !0,
+      returns: "boolean",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when the selection callback fired."
+      },
+      errors: [
+        "Returns false when no slot with that id is in the visible window — page with next_days / previous_days first.",
+        "Returns false when the slot is unavailable, or the grid is loading or disabled."
+      ],
+      descriptionKey: "ui.agent.slotGrid.actions.selectSlot",
+      description: "Select an available slot by id. Emits the same selection the user would by clicking the slot button.",
+      examples: [
+        {
+          args: { slotId: "avail-2026-09-01-0930" },
+          note: "Book the 09:30 slot on 1 September."
+        }
+      ],
+      invoke: (e, a) => e.selectSlot(a.slotId)
+    },
+    next_days: {
+      // View-window paging only — the consumer fetches, nothing is persisted.
+      safety: "read",
+      returns: "boolean",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when the paging callback fired."
+      },
+      errors: [
+        "Returns false when `hasNext` is false, or the grid is loading or disabled."
+      ],
+      descriptionKey: "ui.agent.slotGrid.actions.nextDays",
+      description: 'Page the visible window forward to the next group of days, as the "next days" arrow does.',
+      invoke: (e) => e.nextDays()
+    },
+    previous_days: {
+      safety: "read",
+      returns: "boolean",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when the paging callback fired."
+      },
+      errors: [
+        "Returns false when `hasPrevious` is false, or the grid is loading or disabled."
+      ],
+      descriptionKey: "ui.agent.slotGrid.actions.previousDays",
+      description: 'Page the visible window back to the previous group of days, as the "previous days" arrow does.',
+      invoke: (e) => e.previousDays()
+    },
+    show_more_day: {
+      // Reveals slots the grid already holds — ephemeral disclosure state.
+      safety: "read",
+      argsType: "{ dayKey: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          dayKey: {
+            type: "string",
+            pattern: "^\\d{4}-\\d{2}-\\d{2}$",
+            description: "Day to expand, as a `yyyy-MM-dd` key from the `visibleDays` state slot."
+          }
+        },
+        required: ["dayKey"]
+      },
+      idempotent: !0,
+      returns: "boolean",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when the day was expanded."
+      },
+      errors: [
+        "Returns false when the day key is not one of the visible columns, or the grid is loading or disabled."
+      ],
+      descriptionKey: "ui.agent.slotGrid.actions.showMoreDay",
+      description: 'Render every slot for one day, as the day’s "Show more" button does. Only affects what is on screen — `slotsByDay` already lists collapsed slots.',
+      examples: [
+        {
+          args: { dayKey: "2026-09-01" },
+          note: "Reveal the rest of 1 September so every slot button is clickable."
+        }
+      ],
+      invoke: (e, a) => e.showMoreDay(a.dayKey)
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "slot-grid",
+      description: "Marks the SlotGrid region. Emits `data-state` reflecting the public `state` prop (default / loading / disabled / empty)."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the `id` prop. Also the registry key — without an `id` the instance does not register, so the handle-driven actions are unreachable and only the DOM channel works."
+    },
+    item: {
+      attr: "data-slot-id",
+      sourceProp: "days[].slots[].id",
+      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."
+    }
+  }
+}, Ke = m(
+  [
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+    "ds:text-[var(--foreground)]",
+    "ds:w-full"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:text-[length:var(--font-size-sm)]",
+        md: "ds:text-[length:var(--font-size-base)]",
+        lg: "ds:text-[length:var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Me = m(
+  "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:w-full"
+), Ne = 12, Ce = m(
+  "ds:grid ds:gap-[var(--spacing-sm)] ds:w-full ds:auto-rows-min ds:items-start",
+  {
+    variants: {
+      cols: {
+        1: "ds:grid-cols-1",
+        2: "ds:grid-cols-2",
+        3: "ds:grid-cols-3",
+        4: "ds:grid-cols-4",
+        5: "ds:grid-cols-5",
+        6: "ds:grid-cols-6",
+        7: "ds:grid-cols-7",
+        8: "ds:grid-cols-8",
+        9: "ds:grid-cols-9",
+        10: "ds:grid-cols-10",
+        11: "ds:grid-cols-11",
+        12: "ds:grid-cols-12"
+      }
+    },
+    defaultVariants: { cols: 1 }
+  }
+);
+function Re(e) {
+  return Math.max(1, Math.min(e, Ne));
+}
+const X = m(
+  [
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:bg-[var(--card)]",
+    "ds:min-w-0"
+  ].join(" ")
+), Le = m(
+  [
+    "ds:font-[var(--font-weight-semibold)]",
+    "ds:text-[var(--foreground)]",
+    "ds:text-start",
+    "ds:truncate"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:text-[length:var(--font-size-xs)]",
+        md: "ds:text-[length:var(--font-size-sm)]",
+        lg: "ds:text-[length:var(--font-size-base)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), J = m(
+  "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:w-full ds:m-0 ds:p-0 ds:list-none"
+), ze = m(
+  [
+    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:w-full",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:font-[var(--font-weight-medium)]",
+    "ds:bg-[var(--secondary)]",
+    "ds:shadow-[var(--shadow-sm)]",
+    "ds:text-[var(--foreground)]",
+    "ds:transition-[background-color,color,box-shadow]",
+    "ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[var(--focus-ring-width)]",
+    "ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)]",
+    "ds:focus-visible:outline-offset-[var(--focus-ring-offset)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:shadow-none",
+    "ds:aria-disabled:opacity-50 ds:aria-disabled:cursor-not-allowed ds:aria-disabled:shadow-none",
+    "ds:hover:enabled:shadow-[var(--shadow-md)]",
+    "ds:aria-pressed:bg-[var(--primary)] ds:aria-pressed:text-[var(--primary-foreground)]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:text-[length:var(--font-size-xs)] ds:h-8",
+        md: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:text-[length:var(--font-size-sm)] ds:h-10",
+        lg: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:text-[length:var(--font-size-base)] ds:h-12"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function h(e) {
+  return e instanceof Date ? e : Ie(e);
+}
+function N(e, a) {
+  return `${h(e.date).toISOString()}-${a}`;
+}
+function D(e) {
+  return De(h(e.date), "yyyy-MM-dd");
+}
+function Qe(e, a) {
+  return ke(h(e), h(a));
+}
+function Ue(e) {
+  for (const a of e) {
+    const o = a.slots.find((l) => l.available !== !1);
+    if (o) return { day: a, slot: o };
+  }
+}
+function Q(e, a, o) {
+  try {
+    return new Intl.DateTimeFormat(a, {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      timeZone: o
+    }).format(e);
+  } catch {
+    return new Intl.DateTimeFormat("en", {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    }).format(e);
+  }
+}
+function U(e, a, o) {
+  if (e.label !== void 0) return e.label;
+  const l = h(e.start);
+  try {
+    const c = new Intl.DateTimeFormat(a, {
+      hour: "numeric",
+      minute: "2-digit",
+      timeZone: o
+    });
+    if (e.end) {
+      const g = h(e.end);
+      if (typeof c.formatRange == "function")
+        try {
+          return c.formatRange(l, g);
+        } catch {
+        }
+      return `${c.format(l)} – ${c.format(g)}`;
+    }
+    return c.format(l);
+  } catch {
+    return l.toISOString();
+  }
+}
+function Be(e, a, o, l, c) {
+  if (e.ariaLabel !== void 0) return e.ariaLabel;
+  const g = U(e, o, l), v = a.label !== void 0 ? a.label : Q(h(a.date), o, l);
+  return c({ time: g, day: v });
+}
+function Ee() {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "ds:size-4",
+      children: /* @__PURE__ */ r("path", { d: "M15 18l-6-6 6-6" })
+    }
+  );
+}
+function Ve() {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "ds:size-4",
+      children: /* @__PURE__ */ r("path", { d: "M9 6l6 6-6 6" })
+    }
+  );
+}
+const je = ye(
+  ({
+    days: e,
+    state: a = "default",
+    size: o = "md",
+    selectedSlotId: l,
+    maxInitialSlotsPerDay: c = 6,
+    locale: g,
+    timeZone: v,
+    hasPrevious: C = !1,
+    hasNext: R = !1,
+    showNextAvailable: Y = !1,
+    ariaLabel: Z,
+    onSlotSelect: b,
+    onPreviousDays: L,
+    onNextDays: z,
+    onShowMore: w,
+    onJumpToNextAvailable: ee,
+    className: te,
+    id: I,
+    ...se
+  }, ae) => {
+    const { t: p, i18n: re } = we(), G = g ?? re.language ?? "en", oe = he(), [B, ie] = me({}), E = a === "loading", V = a === "disabled", f = E || V, ne = a === "empty" || e.length === 0 || e.every((t) => t.slots.length === 0), de = Z ?? p("slotGrid.ariaLabel"), x = M(
+      (t, s) => {
+        f || t.available !== !1 && (b == null || b(t, s));
+      },
+      [f, b]
+    ), j = M(
+      (t, s) => {
+        ie((i) => ({ ...i, [s]: !0 })), w == null || w(t);
+      },
+      [w]
+    ), le = M(
+      (t, s, i) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), x(s, i));
+      },
+      [x]
+    ), T = {
+      days: e,
+      selectedSlotId: l,
+      hasPrevious: C,
+      hasNext: R,
+      state: a,
+      expanded: B,
+      isInteractionSuppressed: f,
+      onPreviousDays: L,
+      onNextDays: z,
+      handleSlotClick: x,
+      handleShowMore: j
+    }, n = ge(T);
+    ve(() => {
+      n.current = T;
+    });
+    const ce = be(
+      () => ({
+        getStatus: () => n.current.state,
+        getSelectedSlotId: () => n.current.selectedSlotId ?? null,
+        getVisibleDays: () => n.current.days.map(D),
+        getSlotsByDay: () => {
+          const t = {};
+          for (const s of n.current.days) {
+            const i = D(s), d = s.slots.filter((u) => u.available !== !1).map((u) => u.id);
+            t[i] = t[i] ? [...t[i], ...d] : d;
+          }
+          return t;
+        },
+        getExpandedDays: () => n.current.days.filter(
+          (t, s) => n.current.expanded[N(t, s)] === !0
+        ).map(D),
+        getHasPrevious: () => n.current.hasPrevious,
+        getHasNext: () => n.current.hasNext,
+        selectSlot: (t) => {
+          const s = n.current;
+          if (s.isInteractionSuppressed) return !1;
+          for (const i of s.days) {
+            const d = i.slots.find((u) => u.id === t);
+            if (d)
+              return d.available === !1 ? !1 : (s.handleSlotClick(d, i), !0);
+          }
+          return !1;
+        },
+        nextDays: () => {
+          const t = n.current;
+          return !t.hasNext || t.isInteractionSuppressed || !t.onNextDays ? !1 : (t.onNextDays(), !0);
+        },
+        previousDays: () => {
+          const t = n.current;
+          return !t.hasPrevious || t.isInteractionSuppressed || !t.onPreviousDays ? !1 : (t.onPreviousDays(), !0);
+        },
+        showMoreDay: (t) => {
+          const s = n.current;
+          if (s.isInteractionSuppressed) return !1;
+          const i = s.days.findIndex(
+            (u) => D(u) === t
+          );
+          if (i < 0) return !1;
+          const d = s.days[i];
+          return s.handleShowMore(d, N(d, i)), !0;
+        }
+      }),
+      []
+    );
+    Se(Ge, ce, I);
+    const P = Re(e.length || 1), _ = Ce({ cols: P });
+    let S;
+    return E ? S = /* @__PURE__ */ r(
+      "div",
+      {
+        className: _,
+        "data-state": "loading",
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": p("common.loading"),
+        children: Array.from({ length: P }, (t, s) => /* @__PURE__ */ k("div", { className: X(), children: [
+          /* @__PURE__ */ r(W, { variant: "text", size: o, width: "60%" }),
+          /* @__PURE__ */ r("div", { className: J(), children: Array.from(
+            { length: Math.min(c, 4) },
+            (i, d) => /* @__PURE__ */ r(
+              W,
+              {
+                variant: "rounded",
+                size: o,
+                height: "40px"
+              },
+              `loading-slot-${s}-${d}`
+            )
+          ) })
+        ] }, `loading-col-${s}`))
+      }
+    ) : ne ? S = /* @__PURE__ */ r("div", { "data-state": "empty", children: /* @__PURE__ */ r(xe, { variant: "no-results", title: p("slotGrid.noSlots") }) }) : S = /* @__PURE__ */ r(
+      "div",
+      {
+        className: _,
+        "data-state": V ? "disabled" : "default",
+        children: e.map((t, s) => {
+          const i = N(t, s), d = t.label ?? Q(h(t.date), G, v), u = `${oe}-day-${s}-header`, A = B[i] ?? !1 ? t.slots : t.slots.slice(0, c), $ = t.slots.length - A.length, H = 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__ */ k(
+              "div",
+              {
+                role: "group",
+                className: X(),
+                "aria-labelledby": u,
+                "data-empty": H || void 0,
+                children: [
+                  /* @__PURE__ */ r("h3", { id: u, className: Le({ size: o }), children: d }),
+                  H ? /* @__PURE__ */ r("p", { className: "type-body-sm ds:text-[var(--muted-foreground)] ds:m-0", children: p("slotGrid.noSlots") }) : null,
+                  /* @__PURE__ */ r("ul", { className: J(), children: A.map((y) => {
+                    const ue = Be(
+                      y,
+                      t,
+                      G,
+                      v,
+                      ({ time: K, day: fe }) => p("slotGrid.slotLabel", { time: K, day: fe })
+                    ), pe = l === y.id, O = y.available === !1 || f;
+                    return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        className: ze({ size: o }),
+                        "aria-label": ue,
+                        "aria-pressed": pe,
+                        disabled: O,
+                        "aria-disabled": O || void 0,
+                        "data-slot-id": y.id,
+                        onClick: () => x(y, t),
+                        onKeyDown: (K) => le(K, y, t),
+                        children: U(y, G, v)
+                      }
+                    ) }, y.id);
+                  }) }),
+                  $ > 0 ? /* @__PURE__ */ r(
+                    F,
+                    {
+                      intent: "ghost",
+                      size: o === "lg" ? "md" : "sm",
+                      onClick: () => j(t, i),
+                      disabled: f,
+                      children: p("slotGrid.showMore", { count: $ })
+                    }
+                  ) : null
+                ]
+              },
+              i
+            )
+          );
+        })
+      }
+    ), /* @__PURE__ */ k(
+      "div",
+      {
+        ref: ae,
+        id: I,
+        role: "region",
+        "aria-label": de,
+        className: Ke({ size: o, className: te }),
+        "data-component": "slot-grid",
+        "data-component-id": I,
+        "data-state": a,
+        ...se,
+        children: [
+          /* @__PURE__ */ k("div", { className: Me(), children: [
+            /* @__PURE__ */ r(
+              q,
+              {
+                icon: /* @__PURE__ */ r(Ee, {}),
+                "aria-label": p("slotGrid.previousDays"),
+                size: o === "lg" ? "md" : "sm",
+                intent: "ghost",
+                flipIconInRtl: !0,
+                disabled: !C || f,
+                onClick: L
+              }
+            ),
+            Y ? /* @__PURE__ */ r(
+              F,
+              {
+                intent: "secondary",
+                size: o === "lg" ? "md" : "sm",
+                disabled: f,
+                onClick: ee,
+                children: p("slotGrid.nextAvailable")
+              }
+            ) : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
+            /* @__PURE__ */ r(
+              q,
+              {
+                icon: /* @__PURE__ */ r(Ve, {}),
+                "aria-label": p("slotGrid.nextDays"),
+                size: o === "lg" ? "md" : "sm",
+                intent: "ghost",
+                flipIconInRtl: !0,
+                disabled: !R || f,
+                onClick: z
+              }
+            )
+          ] }),
+          S
+        ]
+      }
+    );
+  }
+);
+je.displayName = "SlotGrid";
+export {
+  je as S,
+  Ue as f,
+  Qe as i,
+  Ge as s
+};
+//# sourceMappingURL=slot-grid-DNiUcXy2.js.map