@alfadocs/ui-kit 0.47.0 → 0.48.0

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

@@ -0,0 +1,419 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as $, useRef as K, useImperativeHandle as Y, useMemo as J } from "react";
+import { c as H } from "./index-D2ZczOXr.js";
+import { useTranslation as G } from "react-i18next";
+import { I as Q } from "./icon-button-CKEOrN37.js";
+import { S as X } from "./skeleton-CZbwyJAA.js";
+import { E as Z } from "./empty-state-BLy7tigq.js";
+import { A as U } from "./avatar-BNQNhoyL.js";
+import { B as P } from "./badge-zsf5i5bH.js";
+import { T as ee } from "./tag-CdA0s_VV.js";
+import { T as ae } from "./timestamp-BV2lC-wV.js";
+import { T as se } from "./transaction-chip-BZCa6XDn.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 q, 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-nPAVE19X.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[q(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, E, j, L, A, M, _, D;
+    const { t: r } = G(), 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(
+              U,
+              {
+                name: c,
+                color: q((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(
+                  U,
+                  {
+                    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 || (E = e.bookingReason) != null && E.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,
+              (j = e.bookingReason) != null && j.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: [
+              (_ = e.flags) != null && _.bookedOnline ? /* @__PURE__ */ a(P, { variant: "info", size: "sm", leading: /* @__PURE__ */ a(de, {}), children: r("appointmentCard.flag.bookedOnline") }) : null,
+              (D = e.flags) != null && D.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",
+  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",
+  capabilities: ["select_single"],
+  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 }",
+      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 } = G(), 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 = K(i);
+    g.current = i;
+    const h = K(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-BwDHhWWC.js.map

package/dist/_chunks/{bmi-calculator-CQqXTVNL.js → bmi-calculator-DdylQzT6.js}

@@ -8,7 +8,7 @@ import { F as D } from "./form-field-BOm9hK35.js";
 import { N as p } from "./number-input-Dj5L3pXK.js";
 import { C as M } from "./card-DPmk26CL.js";
 import { B as na } from "./badge-zsf5i5bH.js";
-import { B as ra, I as sa, b as oa } from "./insert-result-C5ABnzDl.js";
+import { B as ra, I as sa, b as oa } from "./insert-result-DNdi_JYW.js";
 import { b as ca, e as ma, c as da, f as O, l as W, k as ua } from "./bmi-BxD-tFzU.js";
 const ga = la("ds:flex ds:flex-col ds:gap-[var(--spacing-lg)]", {
   variants: {
@@ -255,4 +255,4 @@ pa.displayName = "BmiCalculator";
 export {
   pa as B
 };
-//# sourceMappingURL=bmi-calculator-CQqXTVNL.js.map
+//# sourceMappingURL=bmi-calculator-DdylQzT6.js.map