@alfadocs/ui-kit 1.34.0 → 1.36.0

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

@@ -0,0 +1,425 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as da } from "react";
+import { c as ia } from "./index-D2ZczOXr.js";
+import { useTranslation as la } from "react-i18next";
+import { A as K } from "./avatar-CkDeQOSI.js";
+import { B as l } from "./badge-BudgzTe_.js";
+import { T as ca } from "./tag-Ci3xJPcH.js";
+import { T as pa } from "./timestamp-BV2lC-wV.js";
+import { T as Y } from "./transaction-chip-Dth1nThY.js";
+import { a as ua } from "./workflow-status-xeaJTzD3.js";
+import { i as ma } from "./is-safe-url-DkETxeHz.js";
+import { a as ga, b as fa, c as ha } from "./entity-card-I-Gio5wo.js";
+import { V as va } from "./video-BheNGvsu.js";
+import { M as ba } from "./map-pin-BaY37-Km.js";
+import { U as ya } from "./user-x-DYszNtIg.js";
+import { S as X } from "./star-Bf9L2Uot.js";
+import { c as k } from "./createLucideIcon-DhHxpK9K.js";
+import { A as xa } from "./armchair-BaLDW6Hz.js";
+import { G as ka } from "./globe-sHBW1JN5.js";
+import { R as Na } from "./repeat-CvQa5rZt.js";
+import { C as Ca } 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 wa = [
+  ["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" }]
+], za = k("clipboard-plus", 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: "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" }]
+], Ma = k("file-pen-line", Ta);
+/**
+ * @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 Va = [
+  [
+    "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" }]
+], Ra = k("message-square-text", Va), Sa = {
+  "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 Da(a) {
+  return Sa[ha(a)] ?? "ds:bg-[var(--color-grey-700)]";
+}
+function Ia(a) {
+  if (!a) return;
+  const t = new Date(a);
+  if (Number.isNaN(t.getTime())) return;
+  const p = /* @__PURE__ */ new Date();
+  let o = p.getFullYear() - t.getFullYear();
+  const u = p.getMonth() - t.getMonth();
+  return (u < 0 || u === 0 && p.getDate() < t.getDate()) && o--, o < 0 || o > 130 ? void 0 : o;
+}
+const Aa = ia(
+  [
+    "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
+    }
+  }
+), J = [
+  // 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(" "), La = {
+  inPractice: ba,
+  telehealth: va
+}, _a = da(
+  ({
+    item: a,
+    size: t = "sm",
+    surface: p = "flat",
+    locale: o,
+    currency: u = "EUR",
+    showPatient: d = !0,
+    onActivate: i,
+    selected: N = !1,
+    className: Q,
+    ...Z
+  }, aa) => {
+    var S, D, I, A, L, _, U, P, O, $, j, q, E, F, B, W, G, H;
+    const { t: s } = la(), m = !!i, ea = !!a.url && ma(a.url), f = ((S = a.patient) == null ? void 0 : S.name) ?? s("appointmentCard.noPatient"), c = (D = a.operator) == null ? void 0 : D.name, h = s(`appointmentCard.state.${a.state}`), C = ga(a.state), sa = C.Icon, w = Ia((I = a.patient) == null ? void 0 : I.dobIso), ra = ((A = a.flags) == null ? void 0 : A.noPatientAssigned) || !a.patient, v = t === "md" ? "md" : "sm", na = La[a.type], z = d ? f : c ?? s("appointmentCard.appointment"), T = d ? s("appointmentCard.itemLabel", {
+      patient: f,
+      state: h
+    }) : s("appointmentCard.itemLabelGeneric", { title: z, state: h }), b = /* @__PURE__ */ r("span", { className: "ds:min-w-0 ds:truncate type-title-item ds:text-[color:var(--foreground)]", children: [
+      z,
+      d && w !== void 0 ? /* @__PURE__ */ r("span", { className: "ds:ms-[var(--spacing-2xs)] ds:font-normal ds:text-[color:var(--muted-foreground)]", children: [
+        "· ",
+        w
+      ] }) : null
+    ] });
+    let g;
+    m && ea ? g = /* @__PURE__ */ e(
+      "a",
+      {
+        href: a.url,
+        "aria-label": T,
+        className: J,
+        onClick: (n) => {
+          n.defaultPrevented || n.metaKey || n.ctrlKey || n.shiftKey || i == null || i(a);
+        },
+        children: b
+      }
+    ) : m ? g = /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        "aria-label": T,
+        className: J + " ds:bg-transparent ds:border-0 ds:p-0 ds:text-start",
+        onClick: () => i == null ? void 0 : i(a),
+        children: b
+      }
+    ) : g = b;
+    const M = (a.treatments ?? []).map((n, oa) => {
+      const ta = n.elements && n.elements.length > 0 ? s("appointmentCard.treatmentWithElements", {
+        care: n.careName,
+        elements: n.elements.join(", ")
+      }) : n.careName;
+      return /* @__PURE__ */ e(
+        ca,
+        {
+          label: ta,
+          variant: "neutral",
+          fill: "outline",
+          size: "sm",
+          maxInlineSize: "12rem"
+        },
+        `${n.careName}-${oa}`
+      );
+    }), y = (L = a.bookingReason) == null ? void 0 : L.advanceAmountCents, V = typeof y == "number" && y > 0, x = (_ = a.money) == null ? void 0 : _.unpaidAmountCents, R = typeof x == "number" && x > 0;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: aa,
+        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: Aa({
+          size: t,
+          interactive: m,
+          surface: p,
+          selected: N,
+          className: Q
+        }),
+        ...Z,
+        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(na, { "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(
+                pa,
+                {
+                  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: fa((U = a.operator) == null ? void 0 : U.colorId),
+                size: v,
+                "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)] " + Da((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: [
+                d && ((O = a.patient) != null && O.avatarUrl) ? /* @__PURE__ */ e(
+                  K,
+                  {
+                    name: f,
+                    src: a.patient.avatarUrl,
+                    size: v,
+                    className: "ds:shrink-0",
+                    "aria-hidden": "true",
+                    role: "presentation",
+                    "aria-label": void 0
+                  }
+                ) : null,
+                d && ra ? /* @__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)] ${v === "md" ? "ds:size-10" : "ds:size-8"}`,
+                    children: /* @__PURE__ */ e(ya, { "aria-hidden": "true", className: "ds:size-4" })
+                  }
+                ) : null,
+                g
+              ] }),
+              /* @__PURE__ */ e(
+                ua,
+                {
+                  size: "sm",
+                  value: a.state,
+                  option: {
+                    value: a.state,
+                    label: h,
+                    icon: /* @__PURE__ */ e(sa, { "aria-hidden": "true" }),
+                    tone: C.tone
+                  },
+                  className: "ds:shrink-0"
+                }
+              )
+            ] }),
+            d && 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: [
+              d && c ? /* @__PURE__ */ e("span", { children: c }) : null,
+              (j = a.bookingReason) != null && j.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(X, { "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(X, { "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(
+                      Ra,
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:size-3 ds:shrink-0"
+                      }
+                    ),
+                    s("appointmentCard.hasBookingNote")
+                  ]
+                }
+              ) : null
+            ] }) : null,
+            (q = a.bookingReason) != null && q.description ? /* @__PURE__ */ e("span", { className: "type-body-sm ds:text-[color:var(--foreground)] ds:truncate", children: a.bookingReason.description }) : null,
+            M.length > 0 ? /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-2xs)]", children: M }) : null,
+            a.carePlan || a.chair || (E = a.flags) != null && E.bookedOnline || (F = a.flags) != null && F.highlightedAnamnesis || (B = a.flags) != null && B.billable || a.recurring || a.signing || V || R ? /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+              a.carePlan ? /* @__PURE__ */ e(
+                l,
+                {
+                  variant: "accentSoft",
+                  size: "sm",
+                  leading: /* @__PURE__ */ e(za, {}),
+                  children: s("appointmentCard.carePlan", {
+                    number: a.carePlan.number
+                  })
+                }
+              ) : null,
+              a.chair ? /* @__PURE__ */ e(l, { variant: "neutral", size: "sm", leading: /* @__PURE__ */ e(xa, {}), children: s("appointmentCard.chair", { chair: a.chair }) }) : null,
+              (W = a.flags) != null && W.bookedOnline ? /* @__PURE__ */ e(l, { variant: "info", size: "sm", leading: /* @__PURE__ */ e(ka, {}), children: s("appointmentCard.flag.bookedOnline") }) : null,
+              (G = a.flags) != null && G.highlightedAnamnesis ? /* @__PURE__ */ e(l, { variant: "warning", size: "sm", withDot: !0, children: s("appointmentCard.flag.highlightedAnamnesis") }) : null,
+              a.recurring ? /* @__PURE__ */ e(l, { variant: "neutral", size: "sm", leading: /* @__PURE__ */ e(Na, {}), children: s("appointmentCard.recurring") }) : null,
+              a.signing ? /* @__PURE__ */ e(
+                l,
+                {
+                  variant: a.signing.toComplete >= a.signing.required ? "success" : "warning",
+                  size: "sm",
+                  leading: /* @__PURE__ */ e(Ma, {}),
+                  children: s("appointmentCard.signing", {
+                    complete: a.signing.toComplete,
+                    required: a.signing.required
+                  })
+                }
+              ) : null,
+              (H = a.flags) != null && H.billable ? /* @__PURE__ */ e(l, { variant: "success", size: "sm", withDot: !0, children: s("appointmentCard.flag.billable") }) : null,
+              V ? /* @__PURE__ */ e(
+                Y,
+                {
+                  state: "to-invoice",
+                  amount: y / 100,
+                  currency: u,
+                  locale: o,
+                  size: "sm",
+                  showLabel: !0
+                }
+              ) : null,
+              R ? /* @__PURE__ */ e(
+                Y,
+                {
+                  state: "debt",
+                  amount: x / 100,
+                  currency: u,
+                  locale: o,
+                  size: "sm",
+                  showLabel: !0
+                }
+              ) : null
+            ] }) : null
+          ] }),
+          m ? /* @__PURE__ */ e(
+            Ca,
+            {
+              "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
+        ]
+      }
+    );
+  }
+);
+_a.displayName = "AppointmentCard";
+export {
+  _a as A
+};
+//# sourceMappingURL=appointment-card-WsDGBBut.js.map