@alfadocs/ui-kit 0.68.0 → 0.70.0

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

@@ -0,0 +1,386 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { forwardRef as ve, useId as ke, useMemo as z, useRef as x, useState as X, useCallback as D, useImperativeHandle as be } from "react";
+import { c as Te } from "./index-D2ZczOXr.js";
+import { useTranslation as xe } from "react-i18next";
+import { A as De } from "./appointment-card-C06aZqA7.js";
+import { B as K } from "./button-DD_0Xdmr.js";
+import { B as we } from "./button-group-Ciq6J4IW.js";
+import { D as Re } from "./date-picker-Dl9RKxaV.js";
+import { S as Ie } from "./skeleton-CZbwyJAA.js";
+import { E as Ne } from "./empty-state-BLy7tigq.js";
+import { u as Z } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as Se } from "./use-prefers-reduced-motion-BMwIQRjB.js";
+import { u as je } from "./registry-DvAUVLHh.js";
+import { C as Ce } from "./calendar-days-C4BmpCZg.js";
+const He = {
+  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, a) => {
+        n.selectItem(a.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."
+    }
+  }
+}, O = 96, ze = Te(
+  [
+    "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" } }
+), Me = [
+  "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 g(n) {
+  const a = `${n.getMonth() + 1}`.padStart(2, "0"), l = `${n.getDate()}`.padStart(2, "0");
+  return `${n.getFullYear()}-${a}-${l}`;
+}
+function _e(n) {
+  const a = [...n].sort(
+    (p, m) => +new Date(p.startIso) - +new Date(m.startIso)
+  ), l = /* @__PURE__ */ new Map();
+  for (const p of a) {
+    const m = new Date(p.startIso), h = g(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(p);
+  }
+  return [...l.values()];
+}
+const Fe = ve(
+  ({
+    id: n,
+    items: a,
+    nowIso: l,
+    title: p,
+    locale: m,
+    currency: h,
+    size: c = "sm",
+    onOpenAppointment: y,
+    onLoadEarlier: v,
+    onLoadLater: k,
+    hasMoreEarlier: w,
+    hasMoreLater: b,
+    loadingEarlier: R = !1,
+    loadingLater: C = !1,
+    showFilters: L = !0,
+    onJumpToDate: H,
+    emptyTitle: J,
+    emptyDescription: ee,
+    className: te,
+    "aria-label": se,
+    ...ne
+  }, ae) => {
+    const { t: o, i18n: ie } = xe(), A = ke(), Y = Se(), $ = m ?? ie.language, E = p ?? o("appointmentTimeline.title"), r = z(
+      () => l ? new Date(l) : /* @__PURE__ */ new Date(),
+      [l]
+    ), u = z(() => _e(a), [a]), P = w ?? !!v, q = b ?? !!k, M = z(() => {
+      if (u.length === 0) return;
+      const e = g(r), t = u.map((s) => s.key);
+      return t.includes(e) ? e : t.find((s) => s >= e) ?? t[t.length - 1];
+    }, [u, r]), I = x(null), N = x(/* @__PURE__ */ new Map()), G = x(!1), _ = x(void 0), V = x(0), [oe, re] = X(!1), [le, ce] = X(!1), S = D(() => {
+      const e = I.current;
+      if (!e) return;
+      const { scrollTop: t, scrollHeight: s, clientHeight: d } = e;
+      re(t > 1), ce(t + d < s - 1);
+    }, []), j = D(
+      (e, t) => {
+        const s = I.current;
+        if (!s) return;
+        let d = N.current.get(e);
+        if (!d) {
+          const B = [...N.current.keys()].sort(), U = B.find((ye) => ye >= e) ?? B[B.length - 1];
+          d = U ? N.current.get(U) : void 0;
+        }
+        if (!d) return;
+        const he = d.getBoundingClientRect().top - s.getBoundingClientRect().top;
+        s.scrollTo({
+          top: s.scrollTop + he,
+          behavior: t && !Y ? "smooth" : "auto"
+        });
+      },
+      [Y]
+    );
+    Z(() => {
+      var s;
+      const e = I.current;
+      if (!e) return;
+      const t = (s = u[0]) == null ? void 0 : s.key;
+      if (!G.current)
+        u.length > 0 && M && (j(M, !1), G.current = !0);
+      else if (_.current && t && t < _.current) {
+        const d = e.scrollHeight - V.current;
+        d > 0 && (e.scrollTop += d);
+      }
+      _.current = t, V.current = e.scrollHeight, S();
+    }, [u, M, j, S]), Z(() => {
+      const e = I.current;
+      if (!e || typeof ResizeObserver > "u") return;
+      const t = new ResizeObserver(S);
+      return t.observe(e), () => t.disconnect();
+    }, [S]);
+    const de = D(() => {
+      S();
+      const e = I.current;
+      if (!e) return;
+      const { scrollTop: t, scrollHeight: s, clientHeight: d } = e;
+      v && P && !R && t <= O && v(), k && q && !C && s - t - d <= O && k();
+    }, [
+      S,
+      v,
+      k,
+      P,
+      q,
+      R,
+      C
+    ]), T = D(
+      (e) => {
+        const t = g(e), s = N.current.has(t);
+        j(t, !0), s || H == null || H(e.toISOString());
+      },
+      [j, H]
+    ), me = D(() => T(r), [T, r]), pe = D(() => {
+      const e = new Date(r), t = (e.getDay() + 6) % 7;
+      e.setDate(e.getDate() - t), T(e);
+    }, [T, r]), ue = D(() => {
+      T(new Date(r.getFullYear(), r.getMonth(), 1));
+    }, [T, r]), F = x(a);
+    F.current = a;
+    const W = x(null);
+    be(ae, () => W.current, []);
+    const fe = z(
+      () => ({
+        getItems: () => F.current.map((e) => ({ id: e.id, state: e.state })),
+        selectItem: (e) => {
+          const t = F.current.find((s) => s.id === e);
+          t && (y == null || y(t));
+        },
+        jumpToToday: () => j(g(r), !0)
+      }),
+      [y, j, r]
+    );
+    je(He, fe, n);
+    const ge = u.length === 0 && !R && !C, Q = (e) => /* @__PURE__ */ i(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)] ds:py-[var(--spacing-xs)]",
+        children: /* @__PURE__ */ i(Ie, { variant: "rectangular", height: "3.5rem" })
+      },
+      e
+    );
+    return /* @__PURE__ */ f(
+      "section",
+      {
+        ref: W,
+        "data-component": "appointment-timeline",
+        "data-component-id": n,
+        "aria-label": se ?? E,
+        className: ze({ size: c, className: te }),
+        ...ne,
+        children: [
+          /* @__PURE__ */ f("header", { className: "ds:shrink-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)] ds:px-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ f("h2", { className: "ds:m-0 ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-title-card", children: [
+              /* @__PURE__ */ i(Ce, { "aria-hidden": "true", className: "ds:size-4" }),
+              E
+            ] }),
+            L ? /* @__PURE__ */ f("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+              /* @__PURE__ */ f(we, { label: o("appointmentTimeline.filtersLabel"), children: [
+                /* @__PURE__ */ i(K, { intent: "outline", size: "sm", onClick: me, children: o("appointmentTimeline.today") }),
+                /* @__PURE__ */ i(K, { intent: "outline", size: "sm", onClick: pe, children: o("appointmentTimeline.thisWeek") }),
+                /* @__PURE__ */ i(K, { intent: "outline", size: "sm", onClick: ue, children: o("appointmentTimeline.thisMonth") })
+              ] }),
+              /* @__PURE__ */ i("label", { htmlFor: A, className: "ds:sr-only", children: o("appointmentTimeline.jumpToDate") }),
+              /* @__PURE__ */ i(
+                Re,
+                {
+                  id: A,
+                  size: "sm",
+                  placeholder: o("appointmentTimeline.jumpToDate"),
+                  onChange: (e) => {
+                    e && T(e);
+                  }
+                }
+              )
+            ] }) : null
+          ] }),
+          ge ? /* @__PURE__ */ i("div", { className: "ds:flex-1 ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ i(
+            Ne,
+            {
+              variant: "first-use",
+              size: "sm",
+              title: J ?? o("appointmentTimeline.empty.title"),
+              description: ee ?? o("appointmentTimeline.empty.description")
+            }
+          ) }) : /* @__PURE__ */ f(
+            "div",
+            {
+              ref: I,
+              tabIndex: 0,
+              onScroll: de,
+              "data-fade-top": oe ? "true" : void 0,
+              "data-fade-bottom": le ? "true" : void 0,
+              className: Me,
+              children: [
+                R ? Q("loading-earlier") : null,
+                /* @__PURE__ */ i("ol", { className: "ds:m-0 ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-md)] ds:p-0", children: u.map((e) => /* @__PURE__ */ f(
+                  "li",
+                  {
+                    ref: (t) => {
+                      t ? N.current.set(e.key, t) : N.current.delete(e.key);
+                    },
+                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
+                    children: [
+                      /* @__PURE__ */ i(
+                        Be,
+                        {
+                          date: e.date,
+                          now: r,
+                          locale: $,
+                          todayLabel: o("appointmentTimeline.today"),
+                          tomorrowLabel: o("appointmentTimeline.tomorrow"),
+                          yesterdayLabel: o("appointmentTimeline.yesterday")
+                        }
+                      ),
+                      /* @__PURE__ */ i("ul", { 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__ */ i(
+                        De,
+                        {
+                          item: t,
+                          size: c,
+                          surface: "elevated",
+                          showPatient: !1,
+                          locale: $,
+                          currency: h,
+                          onActivate: y,
+                          "data-appointment-id": t.id
+                        },
+                        t.id
+                      )) })
+                    ]
+                  },
+                  e.key
+                )) }),
+                C ? Q("loading-later") : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Fe.displayName = "AppointmentTimeline";
+function Be({
+  date: n,
+  now: a,
+  locale: l,
+  todayLabel: p,
+  tomorrowLabel: m,
+  yesterdayLabel: h
+}) {
+  const c = g(n), y = g(a), v = new Date(a);
+  v.setDate(a.getDate() + 1);
+  const k = new Date(a);
+  k.setDate(a.getDate() - 1);
+  const w = c === y;
+  let b;
+  if (w) b = p;
+  else if (c === g(v)) b = m;
+  else if (c === g(k)) b = h;
+  else {
+    const R = n.getFullYear() === a.getFullYear();
+    b = new Intl.DateTimeFormat(l, {
+      weekday: "short",
+      day: "numeric",
+      month: "short",
+      ...R ? {} : { year: "numeric" }
+    }).format(n);
+  }
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      "data-today": w ? "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",
+        w ? "ds:text-[color:var(--primary)] ds:font-semibold" : "ds:text-[color:var(--muted-foreground)]"
+      ].join(" "),
+      children: [
+        w ? /* @__PURE__ */ i(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)]"
+          }
+        ) : null,
+        b
+      ]
+    }
+  );
+}
+export {
+  Fe as A,
+  He as a
+};
+//# sourceMappingURL=appointment-timeline-BJM0S_Fg.js.map

package/dist/_chunks/appointment-tray-DRRw5ROi.js

@@ -0,0 +1,193 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as j, useRef as h, useImperativeHandle as z, useMemo as P } from "react";
+import { c as E } from "./index-D2ZczOXr.js";
+import { useTranslation as H } from "react-i18next";
+import { I as M } from "./icon-button-LqoiKcUN.js";
+import { S as q } from "./skeleton-CZbwyJAA.js";
+import { E as K } from "./empty-state-BLy7tigq.js";
+import { A as V } from "./appointment-card-C06aZqA7.js";
+import { u as _ } from "./registry-DvAUVLHh.js";
+import { C as B } from "./calendar-days-C4BmpCZg.js";
+import { P as D } from "./plus-CYKNmfuA.js";
+const ae = {
+  id: "appointment-card",
+  // 'pick' (non-persisting activation) is host-delegated: the card exposes no
+  // handle of its own — its enclosing AppointmentTray performs the pick via
+  // `appointment-tray.select_item`, addressing this card by its data-component-id.
+  capabilities: ["pick"],
+  state: {},
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "appointment-card",
+      description: "Marks the element as a kit AppointmentCard. The root also emits data-component-id sourced from item.id, data-state with the appointment lifecycle, and data-type with the delivery channel."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "item.id",
+      description: "Sourced from item.id — the stable appointment identifier."
+    }
+  }
+}, L = {
+  id: "appointment-tray",
+  // 'pick' (non-persisting activation): select_item routes an activation
+  // through onActivate — it does not persist a "selected appointment" value,
+  // so this is a focus/pick, not a select_single.
+  capabilities: ["pick"],
+  state: {
+    items: {
+      type: "Array<{ id: string; state: string }>",
+      descriptionKey: "ui.agent.appointmentTray.state.items",
+      description: "Currently-displayed appointments. Ids + lifecycle state only — never patient identity.",
+      read: (a) => a.getItems()
+    }
+  },
+  actions: {
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.appointmentTray.actions.selectItem",
+      description: "Activate the appointment with the given id.",
+      invoke: (a, s) => {
+        a.selectItem(s.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "appointment-tray",
+      description: "Marks the AppointmentTray wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific tray from the agent."
+    },
+    item: {
+      attr: "data-appointment-id",
+      description: "Stable appointment id emitted on each rendered AppointmentCard inside the tray."
+    }
+  }
+}, F = E(
+  [
+    "ds:flex ds:flex-col",
+    "ds:rounded-[var(--radius-md)] ds:shadow-[var(--shadow-card)]",
+    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
+    "ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]",
+    "ds:overflow-hidden"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+), G = j(
+  ({
+    id: a,
+    items: s,
+    title: g,
+    caption: c,
+    size: p = "sm",
+    locale: v,
+    currency: x,
+    onOpenAppointment: i,
+    onAddAppointment: m,
+    addLabel: b,
+    loading: l = !1,
+    emptyTitle: T,
+    emptyDescription: w,
+    className: I,
+    ...k
+  }, N) => {
+    const { t: r } = H(), f = g ?? r("appointmentTray.title"), C = b ?? r("appointmentTray.add"), A = !l && s.length === 0;
+    let n;
+    l ? n = /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]", children: [0, 1, 2].map((e) => /* @__PURE__ */ t(q, { variant: "rectangular", height: "3.5rem" }, e)) }) : A ? n = /* @__PURE__ */ t("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ t(
+      K,
+      {
+        variant: "first-use",
+        size: "sm",
+        title: T ?? r("appointmentTray.empty.title"),
+        description: w ?? r("appointmentTray.empty.description")
+      }
+    ) }) : n = /* @__PURE__ */ t("ul", { className: "ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-2xs)] ds:p-[var(--spacing-2xs)]", children: s.map((e) => /* @__PURE__ */ t(
+      V,
+      {
+        item: e,
+        size: p,
+        locale: v,
+        currency: x,
+        onActivate: i,
+        "data-appointment-id": e.id
+      },
+      e.id
+    )) });
+    const o = h(s);
+    o.current = s;
+    const y = h(null);
+    z(N, () => y.current, []);
+    const S = P(
+      () => ({
+        getItems: () => o.current.map((e) => ({ id: e.id, state: e.state })),
+        selectItem: (e) => {
+          const u = o.current.find((R) => R.id === e);
+          u && (i == null || i(u));
+        }
+      }),
+      [i]
+    );
+    return _(L, S, a), /* @__PURE__ */ d(
+      "section",
+      {
+        ref: y,
+        "aria-label": f,
+        "data-component": "appointment-tray",
+        "data-component-id": a,
+        className: F({ size: p, className: I }),
+        ...k,
+        children: [
+          /* @__PURE__ */ d("header", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ d("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)] ds:min-w-0", children: [
+              /* @__PURE__ */ d("h3", { className: "ds:m-0 ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-title-card", children: [
+                /* @__PURE__ */ t(B, { "aria-hidden": "true", className: "ds:size-4" }),
+                f
+              ] }),
+              c ? /* @__PURE__ */ t("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: c }) : null
+            ] }),
+            m ? /* @__PURE__ */ t(
+              M,
+              {
+                icon: /* @__PURE__ */ t(D, {}),
+                intent: "outline",
+                size: "sm",
+                "aria-label": C,
+                onClick: m
+              }
+            ) : null
+          ] }),
+          n
+        ]
+      }
+    );
+  }
+);
+G.displayName = "AppointmentTray";
+export {
+  G as A,
+  ae as a,
+  L as b
+};
+//# sourceMappingURL=appointment-tray-DRRw5ROi.js.map