@alfadocs/ui-kit 1.33.0 → 1.35.0

package/dist/_chunks/appointment-card-Bh_CIlc6.js

@@ -0,0 +1,431 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as oa } from "react";
+import { c as ta } from "./index-D2ZczOXr.js";
+import { useTranslation as da } from "react-i18next";
+import { A as K } from "./avatar-CkDeQOSI.js";
+import { B as t } from "./badge-sTusUqZD.js";
+import { T as ia } from "./tag-3wgkwwDB.js";
+import { T as la } from "./timestamp-BV2lC-wV.js";
+import { T as Y } from "./transaction-chip-DJCstquX.js";
+import { i as ca } from "./is-safe-url-DkETxeHz.js";
+import { V as pa } from "./video-BheNGvsu.js";
+import { M as ua } from "./map-pin-BaY37-Km.js";
+import { a as ma, b as ga, c as fa } from "./entity-card-9_62gY7l.js";
+import { c as f } from "./createLucideIcon-DhHxpK9K.js";
+import { S as W } from "./star-Bf9L2Uot.js";
+import { A as ha } from "./armchair-BaLDW6Hz.js";
+import { G as va } from "./globe-sHBW1JN5.js";
+import { R as ba } from "./repeat-CvQa5rZt.js";
+import { C as ya } from "./chevron-right-I9AeSxH2.js";
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const xa = [
+  ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
+  [
+    "path",
+    {
+      d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",
+      key: "116196"
+    }
+  ],
+  ["path", { d: "M9 14h6", key: "159ibu" }],
+  ["path", { d: "M12 17v-6", key: "1y8rbf" }]
+], ka = f("clipboard-plus", xa);
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Na = [
+  [
+    "path",
+    {
+      d: "M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z",
+      key: "ukzhwg"
+    }
+  ],
+  ["path", { d: "M14.487 7.858A1 1 0 0 1 14 7V2", key: "1klhew" }],
+  [
+    "path",
+    {
+      d: "M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516",
+      key: "rxaxab"
+    }
+  ],
+  ["path", { d: "M8 18h1", key: "13wk12" }]
+], Ca = f("file-pen-line", Na);
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const wa = [
+  [
+    "path",
+    {
+      d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
+      key: "18887p"
+    }
+  ],
+  ["path", { d: "M7 11h10", key: "1twpyw" }],
+  ["path", { d: "M7 15h6", key: "d9of3u" }],
+  ["path", { d: "M7 7h8", key: "af5zfr" }]
+], za = f("message-square-text", wa);
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ta = [
+  ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
+  ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
+  ["line", { x1: "17", x2: "22", y1: "8", y2: "13", key: "3nzzx3" }],
+  ["line", { x1: "22", x2: "17", y1: "8", y2: "13", key: "1swrse" }]
+], Ma = f("user-x", Ta), Va = {
+  "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 Ra(a) {
+  return Va[fa(a)] ?? "ds:bg-[var(--color-grey-700)]";
+}
+function _a(a) {
+  if (!a) return;
+  const d = new Date(a);
+  if (Number.isNaN(d.getTime())) return;
+  const p = /* @__PURE__ */ new Date();
+  let o = p.getFullYear() - d.getFullYear();
+  const u = p.getMonth() - d.getMonth();
+  return (u < 0 || u === 0 && p.getDate() < d.getDate()) && o--, o < 0 || o > 130 ? void 0 : o;
+}
+const Da = ta(
+  [
+    "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,border-color,box-shadow] 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: ""
+      },
+      surface: {
+        // `flat` (default) is the chrome-less row used inside a bordered
+        // AppointmentTray. `elevated` gives each row its own card chrome
+        // (border + shadow) for use directly on a rail, e.g. AppointmentTimeline.
+        // Uses `--shadow-sm` (a row lift), not `--shadow-card`/`--shadow-lg`:
+        // the rail's `overflow-y:auto` scroll region clips `overflow-x` at a
+        // narrow gutter, so a wide 30px-blur shadow gets a hard-edged clip.
+        flat: "",
+        elevated: "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]"
+      },
+      selected: {
+        // The row the host has marked as the active/selected appointment —
+        // matches the `current` note's info-tinted accent: a solid
+        // inline-start bar plus a soft info wash, so the eye keeps its
+        // place in the list after a click.
+        true: "ds:border-s-2 ds:border-s-[color:var(--info)] ds:bg-[color:var(--info)]/10",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "sm",
+      interactive: !1,
+      surface: "flat",
+      selected: !1
+    }
+  }
+), X = [
+  // Interactive elements need a box to remain keyboard-focusable in browsers.
+  "ds:inline-flex ds:min-w-0",
+  "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(" "), Sa = {
+  inPractice: ua,
+  telehealth: pa
+}, Aa = oa(
+  ({
+    item: a,
+    size: d = "sm",
+    surface: p = "flat",
+    locale: o,
+    currency: u = "EUR",
+    showPatient: i = !0,
+    onActivate: l,
+    selected: N = !1,
+    className: J,
+    ...Q
+  }, Z) => {
+    var R, _, D, S, A, L, I, P, U, $, O, j, q, B, E, F, H, G;
+    const { t: s } = da(), m = !!l, aa = !!a.url && ca(a.url), h = ((R = a.patient) == null ? void 0 : R.name) ?? s("appointmentCard.noPatient"), c = (_ = a.operator) == null ? void 0 : _.name, v = s(`appointmentCard.state.${a.state}`), C = _a((D = a.patient) == null ? void 0 : D.dobIso), ea = ((S = a.flags) == null ? void 0 : S.noPatientAssigned) || !a.patient, b = d === "md" ? "md" : "sm", sa = Sa[a.type], w = i ? h : c ?? s("appointmentCard.appointment"), z = i ? s("appointmentCard.itemLabel", {
+      patient: h,
+      state: v
+    }) : s("appointmentCard.itemLabelGeneric", { title: w, state: v }), y = /* @__PURE__ */ r("span", { className: "ds:min-w-0 ds:truncate type-title-item ds:text-[color:var(--foreground)]", children: [
+      w,
+      i && C !== void 0 ? /* @__PURE__ */ r("span", { className: "ds:ms-[var(--spacing-2xs)] ds:font-normal ds:text-[color:var(--muted-foreground)]", children: [
+        "· ",
+        C
+      ] }) : null
+    ] });
+    let g;
+    m && aa ? g = /* @__PURE__ */ e(
+      "a",
+      {
+        href: a.url,
+        "aria-label": z,
+        className: X,
+        onClick: (n) => {
+          n.defaultPrevented || n.metaKey || n.ctrlKey || n.shiftKey || l == null || l(a);
+        },
+        children: y
+      }
+    ) : m ? g = /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        "aria-label": z,
+        className: X + " ds:bg-transparent ds:border-0 ds:p-0 ds:text-start",
+        onClick: () => l == null ? void 0 : l(a),
+        children: y
+      }
+    ) : g = y;
+    const T = (a.treatments ?? []).map((n, ra) => {
+      const na = n.elements && n.elements.length > 0 ? s("appointmentCard.treatmentWithElements", {
+        care: n.careName,
+        elements: n.elements.join(", ")
+      }) : n.careName;
+      return /* @__PURE__ */ e(
+        ia,
+        {
+          label: na,
+          variant: "neutral",
+          fill: "outline",
+          size: "sm",
+          maxInlineSize: "12rem"
+        },
+        `${n.careName}-${ra}`
+      );
+    }), x = (A = a.bookingReason) == null ? void 0 : A.advanceAmountCents, M = typeof x == "number" && x > 0, k = (L = a.money) == null ? void 0 : L.unpaidAmountCents, V = typeof k == "number" && k > 0;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: Z,
+        role: "listitem",
+        "data-component": "appointment-card",
+        "data-component-id": a.id,
+        "data-state": a.state,
+        "data-type": a.type,
+        "aria-current": N ? "true" : void 0,
+        className: Da({
+          size: d,
+          interactive: m,
+          surface: p,
+          selected: N,
+          className: J
+        }),
+        ...Q,
+        children: [
+          /* @__PURE__ */ r("span", { className: "ds:flex ds:min-w-20 ds:shrink-0 ds:flex-col ds:items-start ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ r("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] ds:whitespace-nowrap ds:text-[color:var(--muted-foreground)]", children: [
+              /* @__PURE__ */ e(sa, { "aria-hidden": "true", className: "ds:size-3.5 ds:shrink-0" }),
+              /* @__PURE__ */ e("span", { className: "ds:sr-only", children: s(`appointmentCard.type.${a.type}`) }),
+              /* @__PURE__ */ e(
+                la,
+                {
+                  value: a.startIso,
+                  format: "absolute",
+                  shape: "bare",
+                  locale: o,
+                  absoluteFormat: { hour: "numeric", minute: "2-digit" },
+                  className: "type-body-sm ds:font-medium ds:text-[color:var(--foreground)] ds:tabular-nums"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("span", { className: "type-eyebrow ds:text-[color:var(--muted-foreground)]", children: s("appointmentCard.duration", { count: a.durationMin }) })
+          ] }),
+          c ? /* @__PURE__ */ r("span", { className: "ds:relative ds:shrink-0", children: [
+            /* @__PURE__ */ e(
+              K,
+              {
+                name: c,
+                color: ma((I = a.operator) == null ? void 0 : I.colorId),
+                size: b,
+                "aria-hidden": "true",
+                role: "presentation",
+                "aria-label": void 0
+              }
+            ),
+            /* @__PURE__ */ e(
+              "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)] " + Ra((P = a.operator) == null ? void 0 : P.colorId)
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ r("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ r("div", { className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)]", children: [
+              /* @__PURE__ */ r("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                i && ((U = a.patient) != null && U.avatarUrl) ? /* @__PURE__ */ e(
+                  K,
+                  {
+                    name: h,
+                    src: a.patient.avatarUrl,
+                    size: b,
+                    className: "ds:shrink-0",
+                    "aria-hidden": "true",
+                    role: "presentation",
+                    "aria-label": void 0
+                  }
+                ) : null,
+                i && ea ? /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: `ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ${b === "md" ? "ds:size-10" : "ds:size-8"}`,
+                    children: /* @__PURE__ */ e(Ma, { "aria-hidden": "true", className: "ds:size-4" })
+                  }
+                ) : null,
+                g
+              ] }),
+              /* @__PURE__ */ e(
+                t,
+                {
+                  variant: ga(a.state),
+                  size: "sm",
+                  withDot: !0,
+                  className: "ds:shrink-0",
+                  children: v
+                }
+              )
+            ] }),
+            i && c || ($ = a.bookingReason) != null && $.specialty || a.firstVisit === "yes" || a.firstVisit === "unknown" || a.bookingNote ? /* @__PURE__ */ r("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: [
+              i && c ? /* @__PURE__ */ e("span", { children: c }) : null,
+              (O = a.bookingReason) != null && O.specialty ? /* @__PURE__ */ e("span", { children: a.bookingReason.specialty }) : null,
+              a.firstVisit === "yes" ? /* @__PURE__ */ r("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+                /* @__PURE__ */ e(W, { "aria-hidden": "true", className: "ds:size-3 ds:shrink-0" }),
+                s("appointmentCard.firstVisit")
+              ] }) : null,
+              a.firstVisit === "unknown" ? /* @__PURE__ */ r("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+                /* @__PURE__ */ e(W, { "aria-hidden": "true", className: "ds:size-3 ds:shrink-0" }),
+                s("appointmentCard.firstVisitUnknown")
+              ] }) : null,
+              a.bookingNote ? /* @__PURE__ */ r(
+                "span",
+                {
+                  className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]",
+                  title: s("appointmentCard.hasBookingNote"),
+                  children: [
+                    /* @__PURE__ */ e(
+                      za,
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:size-3 ds:shrink-0"
+                      }
+                    ),
+                    s("appointmentCard.hasBookingNote")
+                  ]
+                }
+              ) : null
+            ] }) : null,
+            (j = a.bookingReason) != null && j.description ? /* @__PURE__ */ e("span", { className: "type-body-sm ds:text-[color:var(--foreground)] ds:truncate", children: a.bookingReason.description }) : null,
+            T.length > 0 ? /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-2xs)]", children: T }) : null,
+            a.carePlan || a.chair || (q = a.flags) != null && q.bookedOnline || (B = a.flags) != null && B.highlightedAnamnesis || (E = a.flags) != null && E.billable || a.recurring || a.signing || M || V ? /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+              a.carePlan ? /* @__PURE__ */ e(
+                t,
+                {
+                  variant: "accentSoft",
+                  size: "sm",
+                  leading: /* @__PURE__ */ e(ka, {}),
+                  children: s("appointmentCard.carePlan", {
+                    number: a.carePlan.number
+                  })
+                }
+              ) : null,
+              a.chair ? /* @__PURE__ */ e(t, { variant: "neutral", size: "sm", leading: /* @__PURE__ */ e(ha, {}), children: s("appointmentCard.chair", { chair: a.chair }) }) : null,
+              (F = a.flags) != null && F.bookedOnline ? /* @__PURE__ */ e(t, { variant: "info", size: "sm", leading: /* @__PURE__ */ e(va, {}), children: s("appointmentCard.flag.bookedOnline") }) : null,
+              (H = a.flags) != null && H.highlightedAnamnesis ? /* @__PURE__ */ e(t, { variant: "warning", size: "sm", withDot: !0, children: s("appointmentCard.flag.highlightedAnamnesis") }) : null,
+              a.recurring ? /* @__PURE__ */ e(t, { variant: "neutral", size: "sm", leading: /* @__PURE__ */ e(ba, {}), children: s("appointmentCard.recurring") }) : null,
+              a.signing ? /* @__PURE__ */ e(
+                t,
+                {
+                  variant: a.signing.toComplete >= a.signing.required ? "success" : "warning",
+                  size: "sm",
+                  leading: /* @__PURE__ */ e(Ca, {}),
+                  children: s("appointmentCard.signing", {
+                    complete: a.signing.toComplete,
+                    required: a.signing.required
+                  })
+                }
+              ) : null,
+              (G = a.flags) != null && G.billable ? /* @__PURE__ */ e(t, { variant: "success", size: "sm", withDot: !0, children: s("appointmentCard.flag.billable") }) : null,
+              M ? /* @__PURE__ */ e(
+                Y,
+                {
+                  state: "to-invoice",
+                  amount: x / 100,
+                  currency: u,
+                  locale: o,
+                  size: "sm",
+                  showLabel: !0
+                }
+              ) : null,
+              V ? /* @__PURE__ */ e(
+                Y,
+                {
+                  state: "debt",
+                  amount: k / 100,
+                  currency: u,
+                  locale: o,
+                  size: "sm",
+                  showLabel: !0
+                }
+              ) : null
+            ] }) : null
+          ] }),
+          m ? /* @__PURE__ */ e(
+            ya,
+            {
+              "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
+        ]
+      }
+    );
+  }
+);
+Aa.displayName = "AppointmentCard";
+export {
+  Aa as A
+};
+//# sourceMappingURL=appointment-card-Bh_CIlc6.js.map