@alfadocs/ui-kit 0.69.0 → 0.70.0

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

@@ -1,431 +0,0 @@
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as $, useRef as U, useImperativeHandle as Y, useMemo as J } from "react";
-import { c as H } from "./index-D2ZczOXr.js";
-import { useTranslation as q } from "react-i18next";
-import { I as Q } from "./icon-button-LqoiKcUN.js";
-import { S as X } from "./skeleton-CZbwyJAA.js";
-import { E as Z } from "./empty-state-BLy7tigq.js";
-import { A as _ } from "./avatar-BNQNhoyL.js";
-import { B as P } from "./badge-CqGsX32l.js";
-import { T as ee } from "./tag-BQXwuJq1.js";
-import { T as ae } from "./timestamp-BV2lC-wV.js";
-import { T as se } from "./transaction-chip-DK84XCBU.js";
-import { i as re } from "./is-safe-url-DkETxeHz.js";
-import { V as te } from "./video-BAeICxCT.js";
-import { M as ne } from "./map-pin-B8STOPMJ.js";
-import { c as G, a as oe } from "./entity-card-COhmqHly.js";
-import { S as ie } from "./star-vav0SJ9e.js";
-import { G as de } from "./globe-BkEFMNSg.js";
-import { C as le } from "./chevron-right-BrpYejk0.js";
-import { u as ce } from "./registry-DvAUVLHh.js";
-import { C as pe } from "./calendar-days-C4BmpCZg.js";
-import { P as me } from "./plus-CYKNmfuA.js";
-const ue = {
-  "var(--color-violet-500)": "ds:bg-[var(--color-violet-500)]",
-  "var(--color-purple-500)": "ds:bg-[var(--color-purple-500)]",
-  "var(--color-magenta-500)": "ds:bg-[var(--color-magenta-500)]",
-  "var(--color-blue-500)": "ds:bg-[var(--color-blue-500)]",
-  "var(--color-green-500)": "ds:bg-[var(--color-green-500)]",
-  "var(--color-red-500)": "ds:bg-[var(--color-red-500)]",
-  "var(--color-yellow-500)": "ds:bg-[var(--color-yellow-500)]",
-  "var(--color-indigo-500)": "ds:bg-[var(--color-indigo-500)]",
-  "var(--color-orange-500)": "ds:bg-[var(--color-orange-500)]",
-  "var(--color-fuchsia-500)": "ds:bg-[var(--color-fuchsia-500)]",
-  "var(--color-grey-700)": "ds:bg-[var(--color-grey-700)]"
-};
-function fe(e) {
-  return ue[G(e)] ?? "ds:bg-[var(--color-grey-700)]";
-}
-const ge = H(
-  [
-    "ds:relative ds:flex ds:items-start ds:gap-[var(--spacing-sm)]",
-    "ds:rounded-[var(--radius-md)]",
-    "ds:text-start ds:group",
-    "ds:bg-[var(--card)] ds:text-[color:var(--card-foreground)]",
-    "ds:transition-colors ds:duration-[var(--animation-duration)]",
-    "ds:motion-reduce:transition-none",
-    "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        sm: "ds:p-[var(--spacing-sm)]",
-        md: "ds:p-[var(--spacing-md)]"
-      },
-      interactive: {
-        true: "ds:hover:bg-[color:var(--muted)]/40 ds:cursor-pointer",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "sm",
-      interactive: !1
-    }
-  }
-), B = [
-  "ds:focus-visible:outline-none",
-  "ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-md)]",
-  "ds:after:pointer-events-auto",
-  "ds:focus-visible:after:outline-[length:var(--focus-ring-width)]",
-  "ds:focus-visible:after:outline-solid",
-  "ds:focus-visible:after:outline-[color:var(--ring)]",
-  "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
-  "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
-].join(" "), ve = {
-  inPractice: ne,
-  telehealth: te
-}, F = $(
-  ({
-    item: e,
-    size: i = "sm",
-    locale: b,
-    currency: x = "EUR",
-    onActivate: o,
-    className: I,
-    ...R
-  }, l) => {
-    var h, w, t, y, z, V, j, E, L, A, M, D, K;
-    const { t: r } = q(), m = !!o, N = !!e.url && re(e.url), v = ((h = e.patient) == null ? void 0 : h.name) ?? r("appointmentCard.noPatient"), c = (w = e.operator) == null ? void 0 : w.name, C = r(`appointmentCard.state.${e.state}`), k = i === "md" ? "md" : "sm", S = ve[e.type], p = r("appointmentCard.itemLabel", {
-      patient: v,
-      state: C
-    }), u = /* @__PURE__ */ a("span", { className: "ds:min-w-0 ds:truncate type-title-item ds:text-[color:var(--foreground)]", children: v });
-    let f;
-    m && N ? f = /* @__PURE__ */ a(
-      "a",
-      {
-        href: e.url,
-        "aria-label": p,
-        className: B + " ds:contents",
-        onClick: (n) => {
-          n.defaultPrevented || n.metaKey || n.ctrlKey || n.shiftKey || o == null || o(e);
-        },
-        children: u
-      }
-    ) : m ? f = /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        "aria-label": p,
-        className: B + " ds:contents ds:bg-transparent ds:border-0 ds:p-0 ds:text-start",
-        onClick: () => o == null ? void 0 : o(e),
-        children: u
-      }
-    ) : f = u;
-    const T = (e.treatments ?? []).map((n, O) => {
-      const W = n.elements && n.elements.length > 0 ? r("appointmentCard.treatmentWithElements", {
-        care: n.careName,
-        elements: n.elements.join(", ")
-      }) : n.careName;
-      return /* @__PURE__ */ a(
-        ee,
-        {
-          label: W,
-          variant: "neutral",
-          fill: "outline",
-          size: "sm",
-          maxInlineSize: "12rem"
-        },
-        `${n.careName}-${O}`
-      );
-    }), d = (t = e.bookingReason) == null ? void 0 : t.advanceAmountCents, g = typeof d == "number" && d > 0;
-    return /* @__PURE__ */ s(
-      "div",
-      {
-        ref: l,
-        role: "listitem",
-        "data-component": "appointment-card",
-        "data-component-id": e.id,
-        "data-state": e.state,
-        "data-type": e.type,
-        className: ge({ size: i, interactive: m, className: I }),
-        ...R,
-        children: [
-          /* @__PURE__ */ s("span", { className: "ds:flex ds:w-16 ds:shrink-0 ds:flex-col ds:items-start ds:gap-[var(--spacing-2xs)]", children: [
-            /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: [
-              /* @__PURE__ */ a(S, { "aria-hidden": "true", className: "ds:size-3.5 ds:shrink-0" }),
-              /* @__PURE__ */ a("span", { className: "ds:sr-only", children: r(`appointmentCard.type.${e.type}`) }),
-              /* @__PURE__ */ a(
-                ae,
-                {
-                  value: e.startIso,
-                  format: "absolute",
-                  shape: "bare",
-                  locale: b,
-                  absoluteFormat: { hour: "numeric", minute: "2-digit" },
-                  className: "type-body-sm ds:font-medium ds:text-[color:var(--foreground)] ds:tabular-nums"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ a("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: r("appointmentCard.duration", { count: e.durationMin }) })
-          ] }),
-          c ? /* @__PURE__ */ s("span", { className: "ds:relative ds:shrink-0", children: [
-            /* @__PURE__ */ a(
-              _,
-              {
-                name: c,
-                color: G((y = e.operator) == null ? void 0 : y.colorId),
-                size: k,
-                "aria-hidden": "true",
-                role: "presentation",
-                "aria-label": void 0
-              }
-            ),
-            /* @__PURE__ */ a(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "ds:absolute ds:bottom-0 ds:end-0 ds:size-2.5 ds:rounded-[var(--radius-full)] ds:border ds:border-[color:var(--card)] " + fe((z = e.operator) == null ? void 0 : z.colorId)
-              }
-            )
-          ] }) : null,
-          /* @__PURE__ */ s("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-            /* @__PURE__ */ s("div", { className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)]", children: [
-              /* @__PURE__ */ s("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
-                (V = e.patient) != null && V.avatarUrl ? /* @__PURE__ */ a(
-                  _,
-                  {
-                    name: v,
-                    src: e.patient.avatarUrl,
-                    size: k,
-                    className: "ds:shrink-0",
-                    "aria-hidden": "true",
-                    role: "presentation",
-                    "aria-label": void 0
-                  }
-                ) : null,
-                f
-              ] }),
-              /* @__PURE__ */ a(
-                P,
-                {
-                  variant: oe(e.state),
-                  size: "sm",
-                  withDot: !0,
-                  className: "ds:shrink-0",
-                  children: C
-                }
-              )
-            ] }),
-            c || e.chair || (j = e.bookingReason) != null && j.specialty || e.firstVisit === "yes" ? /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-x-[var(--spacing-sm)] ds:gap-y-[var(--spacing-2xs)] type-eyebrow ds:text-[color:var(--muted-foreground)]", children: [
-              c ? /* @__PURE__ */ a("span", { children: c }) : null,
-              e.chair ? /* @__PURE__ */ a("span", { children: r("appointmentCard.chair", { chair: e.chair }) }) : null,
-              (E = e.bookingReason) != null && E.specialty ? /* @__PURE__ */ a("span", { children: e.bookingReason.specialty }) : null,
-              e.firstVisit === "yes" ? /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
-                /* @__PURE__ */ a(ie, { "aria-hidden": "true", className: "ds:size-3 ds:shrink-0" }),
-                r("appointmentCard.firstVisit")
-              ] }) : null
-            ] }) : null,
-            (L = e.bookingReason) != null && L.description ? /* @__PURE__ */ a("span", { className: "type-body-sm ds:text-[color:var(--foreground)] ds:truncate", children: e.bookingReason.description }) : null,
-            T.length > 0 ? /* @__PURE__ */ a("div", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-2xs)]", children: T }) : null,
-            (A = e.flags) != null && A.bookedOnline || (M = e.flags) != null && M.highlightedAnamnesis || g ? /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-xs)]", children: [
-              (D = e.flags) != null && D.bookedOnline ? /* @__PURE__ */ a(P, { variant: "info", size: "sm", leading: /* @__PURE__ */ a(de, {}), children: r("appointmentCard.flag.bookedOnline") }) : null,
-              (K = e.flags) != null && K.highlightedAnamnesis ? /* @__PURE__ */ a(P, { variant: "warning", size: "sm", withDot: !0, children: r("appointmentCard.flag.highlightedAnamnesis") }) : null,
-              g ? /* @__PURE__ */ a(
-                se,
-                {
-                  state: "to-invoice",
-                  amount: d / 100,
-                  currency: x,
-                  locale: b,
-                  size: "sm",
-                  showLabel: !0
-                }
-              ) : null
-            ] }) : null
-          ] }),
-          m ? /* @__PURE__ */ a(
-            le,
-            {
-              "aria-hidden": "true",
-              className: "ds:size-4 ds:shrink-0 ds:self-center ds:text-[color:var(--muted-foreground)] ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:rtl:rotate-180"
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-F.displayName = "AppointmentCard";
-const $e = {
-  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."
-    }
-  }
-}, he = {
-  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: (e) => e.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: (e, i) => {
-        e.selectItem(i.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."
-    }
-  }
-}, ye = H(
-  [
-    "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"
-    }
-  }
-), be = $(
-  ({
-    id: e,
-    items: i,
-    title: b,
-    caption: x,
-    size: o = "sm",
-    locale: I,
-    currency: R,
-    onOpenAppointment: l,
-    onAddAppointment: r,
-    addLabel: m,
-    loading: N = !1,
-    emptyTitle: v,
-    emptyDescription: c,
-    className: C,
-    ...k
-  }, S) => {
-    const { t: p } = q(), u = b ?? p("appointmentTray.title"), f = m ?? p("appointmentTray.add"), T = !N && i.length === 0;
-    let d;
-    N ? d = /* @__PURE__ */ a("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]", children: [0, 1, 2].map((t) => /* @__PURE__ */ a(X, { variant: "rectangular", height: "3.5rem" }, t)) }) : T ? d = /* @__PURE__ */ a("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ a(
-      Z,
-      {
-        variant: "first-use",
-        size: "sm",
-        title: v ?? p("appointmentTray.empty.title"),
-        description: c ?? p("appointmentTray.empty.description")
-      }
-    ) }) : d = /* @__PURE__ */ a("ul", { className: "ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-2xs)] ds:p-[var(--spacing-2xs)]", children: i.map((t) => /* @__PURE__ */ a(
-      F,
-      {
-        item: t,
-        size: o,
-        locale: I,
-        currency: R,
-        onActivate: l,
-        "data-appointment-id": t.id
-      },
-      t.id
-    )) });
-    const g = U(i);
-    g.current = i;
-    const h = U(null);
-    Y(S, () => h.current, []);
-    const w = J(
-      () => ({
-        getItems: () => g.current.map((t) => ({ id: t.id, state: t.state })),
-        selectItem: (t) => {
-          const y = g.current.find((z) => z.id === t);
-          y && (l == null || l(y));
-        }
-      }),
-      [l]
-    );
-    return ce(he, w, e), /* @__PURE__ */ s(
-      "section",
-      {
-        ref: h,
-        "aria-label": u,
-        "data-component": "appointment-tray",
-        "data-component-id": e,
-        className: ye({ size: o, className: C }),
-        ...k,
-        children: [
-          /* @__PURE__ */ s("header", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]", children: [
-            /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)] ds:min-w-0", children: [
-              /* @__PURE__ */ s("h3", { className: "ds:m-0 ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-title-card", children: [
-                /* @__PURE__ */ a(pe, { "aria-hidden": "true", className: "ds:size-4" }),
-                u
-              ] }),
-              x ? /* @__PURE__ */ a("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: x }) : null
-            ] }),
-            r ? /* @__PURE__ */ a(
-              Q,
-              {
-                icon: /* @__PURE__ */ a(me, {}),
-                intent: "outline",
-                size: "sm",
-                "aria-label": f,
-                onClick: r
-              }
-            ) : null
-          ] }),
-          d
-        ]
-      }
-    );
-  }
-);
-be.displayName = "AppointmentTray";
-export {
-  F as A,
-  be as a,
-  $e as b,
-  he as c
-};
-//# sourceMappingURL=appointment-tray-CZtvtaH-.js.map