@alfadocs/ui-kit 1.10.1 → 1.12.4

package/dist/_chunks/appointment-timeline-DCn0Jx55.js

@@ -0,0 +1,403 @@
+import { jsxs as S, jsx as o, Fragment as ke } from "react/jsx-runtime";
+import { forwardRef as be, useId as Te, useMemo as F, useRef as T, useState as Z, useCallback as x, useImperativeHandle as xe } from "react";
+import { c as De } from "./index-D2ZczOXr.js";
+import { useTranslation as we } from "react-i18next";
+import { A as Re } from "./appointment-card-Dzr3GeVz.js";
+import { B as A } from "./button-nJaPh_HC.js";
+import { B as Ie } from "./button-group-CaxRJsNG.js";
+import { D as Se } from "./date-picker-CepI_oI2.js";
+import { P as je } from "./panel-header-D313n_9-.js";
+import { S as Ce } from "./skeleton-CZbwyJAA.js";
+import { E as He } from "./empty-state-X0sVPfVo.js";
+import { u as O } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as Fe } from "./use-prefers-reduced-motion-BMwIQRjB.js";
+import { u as Me } from "./registry-DvAUVLHh.js";
+import { C as Ne } from "./calendar-days-BGWklvE-.js";
+const _e = {
+  id: "appointment-timeline",
+  // 'pick' backs select_item (non-persisting activation through
+  // onOpenAppointment); 'scroll' backs jump_to_today, which re-anchors the
+  // scroll viewport (mirrors practice-results' scroll_to_result).
+  capabilities: ["scroll", "pick"],
+  state: {
+    items: {
+      type: "Array<{ id: string; state: string }>",
+      descriptionKey: "ui.agent.appointmentTimeline.state.items",
+      description: "Currently-rendered appointments. Ids + lifecycle state only — never patient identity.",
+      read: (n) => n.getItems()
+    }
+  },
+  actions: {
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.appointmentTimeline.actions.selectItem",
+      description: "Activate the appointment with the given id.",
+      invoke: (n, i) => {
+        n.selectItem(i.id);
+      }
+    },
+    jump_to_today: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.appointmentTimeline.actions.jumpToToday",
+      description: "Re-anchor the timeline scroll on today's appointments.",
+      invoke: (n) => {
+        n.jumpToToday();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "appointment-timeline",
+      description: "Marks the AppointmentTimeline wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific timeline from the agent."
+    },
+    item: {
+      attr: "data-appointment-id",
+      description: "Stable appointment id emitted on each rendered AppointmentCard inside the timeline."
+    }
+  }
+}, L = 96, ze = De(
+  [
+    "ds:flex ds:flex-col ds:h-full ds:min-h-0",
+    "ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]"
+  ].join(" "),
+  { variants: { size: { sm: "", md: "" } }, defaultVariants: { size: "sm" } }
+), Be = [
+  "ds:flex-1 ds:min-h-0 ds:overflow-y-auto",
+  "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+  "ds:px-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
+  "ds:[--atl-mask-top:black] ds:[--atl-mask-bottom:black]",
+  "ds:data-[fade-top=true]:[--atl-mask-top:transparent]",
+  "ds:data-[fade-bottom=true]:[--atl-mask-bottom:transparent]",
+  "ds:[mask-image:linear-gradient(to_bottom,var(--atl-mask-top)_0,black_var(--atl-fade-distance,var(--spacing-lg)),black_calc(100%-var(--atl-fade-distance,var(--spacing-lg))),var(--atl-mask-bottom)_100%)]",
+  "ds:motion-reduce:[mask-image:none]",
+  "ds:[.theme-accessible_&]:[mask-image:none]",
+  "ds:forced-colors:[mask-image:none]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:[outline-offset:-2px]",
+  "ds:forced-colors:focus-visible:outline-[CanvasText]"
+].join(" ");
+function y(n) {
+  const i = `${n.getMonth() + 1}`.padStart(2, "0"), l = `${n.getDate()}`.padStart(2, "0");
+  return `${n.getFullYear()}-${i}-${l}`;
+}
+function Ke(n) {
+  const i = [...n].sort(
+    (u, m) => +new Date(u.startIso) - +new Date(m.startIso)
+  ), l = /* @__PURE__ */ new Map();
+  for (const u of i) {
+    const m = new Date(u.startIso), h = y(m);
+    let c = l.get(h);
+    c || (c = {
+      key: h,
+      date: new Date(m.getFullYear(), m.getMonth(), m.getDate()),
+      items: []
+    }, l.set(h, c)), c.items.push(u);
+  }
+  return [...l.values()];
+}
+const Ae = be(
+  ({
+    id: n,
+    items: i,
+    nowIso: l,
+    title: u,
+    locale: m,
+    currency: h,
+    size: c = "sm",
+    showPatient: M = !1,
+    onOpenAppointment: f,
+    onLoadEarlier: v,
+    onLoadLater: p,
+    hasMoreEarlier: k,
+    hasMoreLater: N,
+    loadingEarlier: j = !1,
+    loadingLater: C = !1,
+    showFilters: J = !0,
+    onJumpToDate: H,
+    emptyTitle: ee,
+    emptyDescription: te,
+    className: se,
+    "aria-label": ne,
+    ...ie
+  }, oe) => {
+    const { t: a, i18n: ae } = we(), Y = Te(), P = Fe(), $ = m ?? ae.language, E = u ?? a("appointmentTimeline.title"), r = F(
+      () => l ? new Date(l) : /* @__PURE__ */ new Date(),
+      [l]
+    ), g = F(() => Ke(i), [i]), q = k ?? !!v, G = N ?? !!p, _ = F(() => {
+      if (g.length === 0) return;
+      const e = y(r), t = g.map((s) => s.key);
+      return t.includes(e) ? e : t.find((s) => s >= e) ?? t[t.length - 1];
+    }, [g, r]), D = T(null), w = T(/* @__PURE__ */ new Map()), V = T(!1), z = T(void 0), W = T(0), [re, le] = Z(!1), [ce, de] = Z(!1), R = x(() => {
+      const e = D.current;
+      if (!e) return;
+      const { scrollTop: t, scrollHeight: s, clientHeight: d } = e;
+      le(t > 1), de(t + d < s - 1);
+    }, []), I = x(
+      (e, t) => {
+        const s = D.current;
+        if (!s) return;
+        let d = w.current.get(e);
+        if (!d) {
+          const K = [...w.current.keys()].sort(), X = K.find((ve) => ve >= e) ?? K[K.length - 1];
+          d = X ? w.current.get(X) : void 0;
+        }
+        if (!d) return;
+        const he = d.getBoundingClientRect().top - s.getBoundingClientRect().top;
+        s.scrollTo({
+          top: s.scrollTop + he,
+          behavior: t && !P ? "smooth" : "auto"
+        });
+      },
+      [P]
+    );
+    O(() => {
+      var s;
+      const e = D.current;
+      if (!e) return;
+      const t = (s = g[0]) == null ? void 0 : s.key;
+      if (!V.current)
+        g.length > 0 && _ && (I(_, !1), V.current = !0);
+      else if (z.current && t && t < z.current) {
+        const d = e.scrollHeight - W.current;
+        d > 0 && (e.scrollTop += d);
+      }
+      z.current = t, W.current = e.scrollHeight, R();
+    }, [g, _, I, R]), O(() => {
+      const e = D.current;
+      if (!e || typeof ResizeObserver > "u") return;
+      const t = new ResizeObserver(R);
+      return t.observe(e), () => t.disconnect();
+    }, [R]);
+    const me = x(() => {
+      R();
+      const e = D.current;
+      if (!e) return;
+      const { scrollTop: t, scrollHeight: s, clientHeight: d } = e;
+      v && q && !j && t <= L && v(), p && G && !C && s - t - d <= L && p();
+    }, [
+      R,
+      v,
+      p,
+      q,
+      G,
+      j,
+      C
+    ]), b = x(
+      (e) => {
+        const t = y(e), s = w.current.has(t);
+        I(t, !0), s || H == null || H(e.toISOString());
+      },
+      [I, H]
+    ), pe = x(() => b(r), [b, r]), ue = x(() => {
+      const e = new Date(r), t = (e.getDay() + 6) % 7;
+      e.setDate(e.getDate() - t), b(e);
+    }, [b, r]), fe = x(() => {
+      b(new Date(r.getFullYear(), r.getMonth(), 1));
+    }, [b, r]), B = T(i);
+    B.current = i;
+    const Q = T(null);
+    xe(oe, () => Q.current, []);
+    const ge = F(
+      () => ({
+        getItems: () => B.current.map((e) => ({ id: e.id, state: e.state })),
+        selectItem: (e) => {
+          const t = B.current.find((s) => s.id === e);
+          t && (f == null || f(t));
+        },
+        jumpToToday: () => I(y(r), !0)
+      }),
+      [f, I, r]
+    );
+    Me(_e, ge, n);
+    const ye = g.length === 0 && !j && !C, U = (e) => /* @__PURE__ */ o(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)] ds:py-[var(--spacing-xs)]",
+        children: /* @__PURE__ */ o(Ce, { variant: "rectangular", height: "3.5rem" })
+      },
+      e
+    );
+    return /* @__PURE__ */ S(
+      "section",
+      {
+        ref: Q,
+        "data-component": "appointment-timeline",
+        "data-component-id": n,
+        "aria-label": ne ?? E,
+        className: ze({ size: c, className: se }),
+        ...ie,
+        children: [
+          /* @__PURE__ */ o(
+            je,
+            {
+              icon: /* @__PURE__ */ o(Ne, {}),
+              title: E,
+              filters: J ? /* @__PURE__ */ S(ke, { children: [
+                /* @__PURE__ */ S(Ie, { label: a("appointmentTimeline.filtersLabel"), children: [
+                  /* @__PURE__ */ o(A, { intent: "outline", size: "sm", onClick: pe, children: a("appointmentTimeline.today") }),
+                  /* @__PURE__ */ o(A, { intent: "outline", size: "sm", onClick: ue, children: a("appointmentTimeline.thisWeek") }),
+                  /* @__PURE__ */ o(A, { intent: "outline", size: "sm", onClick: fe, children: a("appointmentTimeline.thisMonth") })
+                ] }),
+                /* @__PURE__ */ o("label", { htmlFor: Y, className: "ds:sr-only", children: a("appointmentTimeline.jumpToDate") }),
+                /* @__PURE__ */ o(
+                  Se,
+                  {
+                    id: Y,
+                    size: "sm",
+                    placeholder: a("appointmentTimeline.jumpToDate"),
+                    onChange: (e) => {
+                      e && b(e);
+                    }
+                  }
+                )
+              ] }) : void 0
+            }
+          ),
+          ye ? /* @__PURE__ */ o("div", { className: "ds:flex-1 ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ o(
+            He,
+            {
+              variant: "first-use",
+              size: "sm",
+              title: ee ?? a("appointmentTimeline.empty.title"),
+              description: te ?? a("appointmentTimeline.empty.description")
+            }
+          ) }) : /* @__PURE__ */ S(
+            "div",
+            {
+              ref: D,
+              tabIndex: 0,
+              onScroll: me,
+              "data-fade-top": re ? "true" : void 0,
+              "data-fade-bottom": ce ? "true" : void 0,
+              className: Be,
+              children: [
+                j ? U("loading-earlier") : null,
+                /* @__PURE__ */ o(
+                  "ol",
+                  {
+                    role: "list",
+                    className: "ds:m-0 ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-md)] ds:p-0",
+                    children: g.map((e) => /* @__PURE__ */ S(
+                      "li",
+                      {
+                        ref: (t) => {
+                          t ? w.current.set(e.key, t) : w.current.delete(e.key);
+                        },
+                        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
+                        children: [
+                          /* @__PURE__ */ o(
+                            Ye,
+                            {
+                              date: e.date,
+                              now: r,
+                              locale: $,
+                              todayLabel: a("appointmentTimeline.today"),
+                              tomorrowLabel: a("appointmentTimeline.tomorrow"),
+                              yesterdayLabel: a("appointmentTimeline.yesterday")
+                            }
+                          ),
+                          /* @__PURE__ */ o(
+                            "ul",
+                            {
+                              role: "list",
+                              className: "ds:m-0 ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-sm)] ds:p-0",
+                              children: e.items.map((t) => /* @__PURE__ */ o(
+                                Re,
+                                {
+                                  item: t,
+                                  size: c,
+                                  surface: "elevated",
+                                  showPatient: M,
+                                  locale: $,
+                                  currency: h,
+                                  onActivate: f,
+                                  "data-appointment-id": t.id
+                                },
+                                t.id
+                              ))
+                            }
+                          )
+                        ]
+                      },
+                      e.key
+                    ))
+                  }
+                ),
+                C ? U("loading-later") : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Ae.displayName = "AppointmentTimeline";
+function Ye({
+  date: n,
+  now: i,
+  locale: l,
+  todayLabel: u,
+  tomorrowLabel: m,
+  yesterdayLabel: h
+}) {
+  const c = y(n), M = y(i), f = new Date(i);
+  f.setDate(i.getDate() + 1);
+  const v = new Date(i);
+  v.setDate(i.getDate() - 1);
+  const p = c === M;
+  let k;
+  if (p) k = u;
+  else if (c === y(f)) k = m;
+  else if (c === y(v)) k = h;
+  else {
+    const N = n.getFullYear() === i.getFullYear();
+    k = new Intl.DateTimeFormat(l, {
+      weekday: "short",
+      day: "numeric",
+      month: "short",
+      ...N ? {} : { year: "numeric" }
+    }).format(n);
+  }
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      "data-today": p ? "true" : void 0,
+      className: [
+        "ds:sticky ds:top-0 ds:z-[1] ds:bg-[color:var(--card)] ds:py-[var(--spacing-2xs)]",
+        "ds:flex ds:items-center ds:gap-[var(--spacing-2xs)] type-eyebrow",
+        p ? "ds:text-[color:var(--primary)] ds:font-semibold" : "ds:text-[color:var(--muted-foreground)]"
+      ].join(" "),
+      children: [
+        p ? /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)]"
+          }
+        ) : null,
+        k
+      ]
+    }
+  );
+}
+export {
+  Ae as A,
+  _e as a
+};
+//# sourceMappingURL=appointment-timeline-DCn0Jx55.js.map