@alfadocs/ui-kit 1.4.7 → 1.4.9

package/dist/_chunks/anamnesis-summary-card-FNSkuUMB.js

@@ -0,0 +1,346 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { forwardRef as ae, useId as se, useMemo as I, useImperativeHandle as te } from "react";
+import { c as h } from "./index-D2ZczOXr.js";
+import { useTranslation as re } from "react-i18next";
+import { B as H } from "./badge-DCOqV9mI.js";
+import { C as f } from "./card-DPmk26CL.js";
+import { K as E, a as D } from "./key-value-pair-DGkGlgCF.js";
+import { S as P } from "./skeleton-CZbwyJAA.js";
+import { a as de, T as ne } from "./tooltip-DvmfrNvB.js";
+import { u as ie } from "./registry-DvAUVLHh.js";
+import { H as k } from "./heart-pulse-BCppJyN2.js";
+const le = {
+  id: "anamnesis-summary-card",
+  // The card is read-only: the only handle method is a getSummary
+  // projection, so there is no capability to declare.
+  capabilities: [],
+  state: {
+    summary: {
+      type: "{ id?: string; sectionCount: number; answerCount: number; highlightedCount: number; unansweredCount: number }",
+      descriptionKey: "ui.agent.anamnesisSummaryCard.state.summary",
+      description: "Structural summary of the anamnesis card — section, answer, highlighted and unanswered counts plus the consumer id. Never question labels or answer values.",
+      read: (r) => r.getSummary()
+    }
+  },
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "anamnesis-summary-card",
+      description: "Marks the AnamnesisSummaryCard root region."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-answer-id",
+      description: "One per answer row (KeyValuePair); the value is the intake field key. Highlighted rows also carry data-highlighted."
+    }
+  }
+}, oe = h("ds:w-full ds:text-[color:var(--foreground)]", {
+  variants: {
+    // Same `surface` vocabulary as PatientSummaryCard / ContactProfileCard.
+    // Both surfaces keep the Card chrome — `flat` only drops the shadow.
+    surface: {
+      flat: "",
+      elevated: ""
+    },
+    density: {
+      comfortable: "",
+      compact: ""
+    }
+  },
+  defaultVariants: {
+    surface: "elevated",
+    density: "comfortable"
+  }
+}), ce = h("ds:flex ds:flex-col", {
+  variants: {
+    density: {
+      comfortable: "ds:gap-[var(--spacing-lg)]",
+      compact: "ds:gap-[var(--spacing-md)]"
+    }
+  },
+  defaultVariants: { density: "comfortable" }
+}), me = h("", {
+  variants: {
+    density: {
+      comfortable: "",
+      compact: "ds:p-[var(--spacing-sm)] ds:pb-0"
+    }
+  },
+  defaultVariants: { density: "comfortable" }
+}), ue = h("", {
+  variants: {
+    density: {
+      comfortable: "",
+      compact: "ds:p-[var(--spacing-sm)]"
+    }
+  },
+  defaultVariants: { density: "comfortable" }
+}), he = h("", {
+  variants: {
+    density: {
+      comfortable: "",
+      compact: "ds:p-[var(--spacing-sm)] ds:pt-0"
+    }
+  },
+  defaultVariants: { density: "comfortable" }
+}), pe = /^(\d{4})-(\d{2})-(\d{2})$/, ge = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/, fe = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
+function ve(r) {
+  const l = pe.exec(r);
+  if (l)
+    return {
+      date: new Date(Number(l[1]), Number(l[2]) - 1, Number(l[3])),
+      hasTime: !1
+    };
+  const t = ge.exec(r);
+  if (t)
+    return {
+      date: new Date(
+        Number(t[1]),
+        Number(t[2]) - 1,
+        Number(t[3]),
+        Number(t[4]),
+        Number(t[5]),
+        t[6] ? Number(t[6]) : 0
+      ),
+      hasTime: !0
+    };
+  const d = new Date(r);
+  return Number.isNaN(d.getTime()) ? null : { date: d, hasTime: fe.test(r) };
+}
+function B(r, l) {
+  const t = ve(r);
+  if (!t) return null;
+  const d = t.hasTime ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" };
+  try {
+    return new Intl.DateTimeFormat(l, d).format(t.date);
+  } catch {
+    return new Intl.DateTimeFormat(void 0, d).format(t.date);
+  }
+}
+const be = "ds:rounded-[var(--radius-md)] ds:bg-[color:color-mix(in_srgb,var(--accent)_6%,transparent)] ds:px-[var(--spacing-xs)] ds:-mx-[var(--spacing-xs)]", ye = 'ds:relative ds:inline-flex ds:appearance-none ds:border-0 ds:bg-transparent ds:p-0 ds:m-0 ds:cursor-default ds:rounded-[var(--radius-full)] ds:before:absolute ds:before:content-[""] ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:sm:before:inset-x-[calc((var(--spacing-lg)-100%)/-2)] ds:sm:before:inset-y-[calc((var(--spacing-lg)-100%)/-2)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]', v = "type-body-sm ds:m-0 ds:text-[color:var(--muted-foreground)]", xe = ae(
+  ({
+    sections: r,
+    title: l,
+    subtitle: t,
+    unansweredCount: d = 0,
+    locale: O,
+    highlightedFirst: y = !0,
+    highlightedGroup: R = !0,
+    surface: x = "elevated",
+    density: o = "comfortable",
+    loading: p = !1,
+    actionSlot: N,
+    id: u,
+    className: K,
+    "aria-label": M,
+    ...z
+  }, G) => {
+    const { t: i, i18n: $ } = re(), j = se(), C = O ?? $.language ?? "en", m = I(
+      () => r.filter((e) => e.answers.length > 0).map((e) => ({
+        ...e,
+        answers: y ? [...e.answers].sort(
+          (s, c) => +!!c.highlighted - +!!s.highlighted
+        ) : e.answers
+      })),
+      [r, y]
+    ), S = m.reduce(
+      (e, s) => e + s.answers.length,
+      0
+    ), g = m.reduce(
+      (e, s) => e + s.answers.filter((c) => c.highlighted).length,
+      0
+    ), T = m.length, A = m.flatMap(
+      (e) => e.answers.filter((s) => s.highlighted)
+    ), V = (e) => {
+      const s = e.reportedAtIso ? B(e.reportedAtIso, C) : null, c = [e.sourceLabel, s].filter(
+        (ee) => !!ee
+      );
+      return c.length > 0 ? c.join(" · ") : null;
+    }, b = I(
+      () => ({
+        getSummary: () => ({
+          id: u,
+          sectionCount: T,
+          answerCount: S,
+          highlightedCount: g,
+          unansweredCount: d
+        })
+      }),
+      [u, T, S, g, d]
+    );
+    te(G, () => b, [b]), ie(le, b, u);
+    const F = i("anamnesisSummaryCard.regionLabel", {
+      defaultValue: "Anamnesis summary"
+    }), L = l ?? F, q = M ?? L, _ = i("anamnesisSummaryCard.highlighted", {
+      defaultValue: "Highlighted"
+    }), U = o === "comfortable" ? "type-title-card" : "type-title-item", w = o === "comfortable" ? "md" : "sm", W = (e) => {
+      const s = e.reportedAtIso ? B(e.reportedAtIso, C) : null, c = s && e.sourceLabel ? i("anamnesisSummaryCard.reportedOnFrom", {
+        date: s,
+        source: e.sourceLabel,
+        defaultValue: "Highlighted on {{date}} · {{source}}"
+      }) : s ? i("anamnesisSummaryCard.reportedOn", {
+        date: s,
+        defaultValue: "Highlighted on {{date}}"
+      }) : _;
+      return /* @__PURE__ */ a(ne, { label: c, side: "top", children: /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: ye,
+          "data-highlighted-chip": "",
+          children: /* @__PURE__ */ a(
+            H,
+            {
+              variant: "accentSoft",
+              size: "sm",
+              leading: /* @__PURE__ */ a(k, { "aria-hidden": "true" }),
+              children: _
+            }
+          )
+        }
+      ) });
+    }, Y = /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-wrap ds:items-start ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ n("div", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+        /* @__PURE__ */ a(
+          "h3",
+          {
+            id: j,
+            className: `ds:m-0 ${U} ds:text-[color:var(--foreground)]`,
+            children: L
+          }
+        ),
+        t ? /* @__PURE__ */ a("p", { className: v, children: t }) : null
+      ] }),
+      !p && g > 0 ? /* @__PURE__ */ a(
+        H,
+        {
+          variant: "accentSoft",
+          size: "sm",
+          leading: /* @__PURE__ */ a(k, { "aria-hidden": "true" }),
+          className: "ds:shrink-0",
+          children: i("anamnesisSummaryCard.highlightedCount", {
+            count: g,
+            defaultValue: "{{count}} highlighted"
+          })
+        }
+      ) : null,
+      N ? /* @__PURE__ */ a("div", { className: "ds:ms-auto ds:flex ds:shrink-0 ds:items-center ds:gap-[var(--spacing-xs)]", children: N }) : null
+    ] }), J = /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ a(P, { variant: "text", width: "40%" }),
+      /* @__PURE__ */ a(P, { variant: "text", lines: 4 })
+    ] }), Q = /* @__PURE__ */ a("p", { className: v, children: i("anamnesisSummaryCard.empty", {
+      defaultValue: "No answers recorded yet"
+    }) }), X = /* @__PURE__ */ n(
+      "div",
+      {
+        role: "group",
+        "aria-label": i("anamnesisSummaryCard.sectionsLabel", {
+          defaultValue: "Anamnesis sections"
+        }),
+        className: ce({ density: o }),
+        children: [
+          R && A.length > 0 ? /* @__PURE__ */ n(
+            "div",
+            {
+              "data-highlighted-group": "",
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+              children: [
+                /* @__PURE__ */ a("h4", { className: "ds:m-0 type-eyebrow ds:text-[color:var(--muted-foreground)]", children: i("anamnesisSummaryCard.highlightedGroup", {
+                  defaultValue: "Highlighted answers"
+                }) }),
+                /* @__PURE__ */ a("div", { className: "ds:@container/afields", children: /* @__PURE__ */ a(
+                  E,
+                  {
+                    rowGap: w,
+                    className: "ds:@[672px]/afields:grid-cols-[repeat(2,auto_auto_minmax(0,1fr))]",
+                    children: A.map((e) => /* @__PURE__ */ a(
+                      D,
+                      {
+                        "data-answer-id": e.id,
+                        label: e.label,
+                        value: /* @__PURE__ */ n("span", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+                          /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-x-[var(--spacing-xs)]", children: [
+                            /* @__PURE__ */ a("span", { children: e.value }),
+                            e.unit ? /* @__PURE__ */ a("span", { className: "type-body-sm ds:text-[color:var(--muted-foreground)]", children: e.unit }) : null
+                          ] }),
+                          V(e) ? /* @__PURE__ */ a("span", { className: v, children: V(e) }) : null
+                        ] })
+                      },
+                      `highlighted-${e.id}`
+                    ))
+                  }
+                ) })
+              ]
+            }
+          ) : null,
+          m.map((e) => /* @__PURE__ */ n(
+            "div",
+            {
+              "data-section-id": e.id,
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+              children: [
+                /* @__PURE__ */ a("h4", { className: "ds:m-0 type-eyebrow ds:text-[color:var(--muted-foreground)]", children: e.heading }),
+                /* @__PURE__ */ a("div", { className: "ds:@container/afields", children: /* @__PURE__ */ a(
+                  E,
+                  {
+                    rowGap: w,
+                    className: "ds:@[672px]/afields:grid-cols-[repeat(2,auto_auto_minmax(0,1fr))]",
+                    children: e.answers.map((s) => /* @__PURE__ */ a(
+                      D,
+                      {
+                        "data-answer-id": s.id,
+                        "data-highlighted": s.highlighted ? "" : void 0,
+                        label: s.label,
+                        className: s.highlighted ? be : void 0,
+                        value: /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-x-[var(--spacing-xs)] ds:gap-y-[var(--spacing-2xs)]", children: [
+                          /* @__PURE__ */ a("span", { children: s.value }),
+                          s.unit ? /* @__PURE__ */ a("span", { className: "type-body-sm ds:text-[color:var(--muted-foreground)]", children: s.unit }) : null,
+                          s.highlighted ? W(s) : null
+                        ] })
+                      },
+                      s.id
+                    ))
+                  }
+                ) })
+              ]
+            },
+            e.id
+          ))
+        ]
+      }
+    ), Z = p ? J : m.length === 0 ? Q : X;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        role: "region",
+        "aria-label": q,
+        "aria-busy": p || void 0,
+        "data-component": "anamnesis-summary-card",
+        "data-component-id": u,
+        "data-density": o,
+        id: u,
+        className: oe({ surface: x, density: o, className: K }),
+        ...z,
+        children: /* @__PURE__ */ n(f, { variant: x === "flat" ? "outlined" : "elevated", children: [
+          /* @__PURE__ */ a(f.Header, { className: me({ density: o }), children: Y }),
+          /* @__PURE__ */ a(de, { children: /* @__PURE__ */ a(f.Body, { className: ue({ density: o }), children: Z }) }),
+          !p && d > 0 ? /* @__PURE__ */ a(f.Footer, { className: he({ density: o }), children: /* @__PURE__ */ a("p", { className: v, children: i("anamnesisSummaryCard.unanswered", {
+            count: d,
+            defaultValue: "{{count}} questions not answered"
+          }) }) }) : null
+        ] })
+      }
+    );
+  }
+);
+xe.displayName = "AnamnesisSummaryCard";
+export {
+  xe as A,
+  le as a
+};
+//# sourceMappingURL=anamnesis-summary-card-FNSkuUMB.js.map