@alfadocs/ui-kit 0.68.0 → 0.70.0

package/dist/_chunks/patient-details-Dlhqb5ig.js

@@ -0,0 +1,675 @@
+import { jsx as t, jsxs as d, Fragment as q } from "react/jsx-runtime";
+import { forwardRef as Z, useId as j, useMemo as ee, Fragment as te, useState as v, useCallback as P } from "react";
+import { c as ae } from "./index-D2ZczOXr.js";
+import { useTranslation as V } from "react-i18next";
+import { A as se } from "./avatar-BNQNhoyL.js";
+import { I as z } from "./icon-button-LqoiKcUN.js";
+import { C as I } from "./card-DPmk26CL.js";
+import { C as ie, b as re, a as ne } from "./collapsible-BrnRiCC6.js";
+import { D as le } from "./date-picker-Dl9RKxaV.js";
+import { D as S } from "./description-list-gkNGWk5G.js";
+import { E as oe } from "./email-input-DJ7EXklP.js";
+import { F as de } from "./fiscal-code-input-Cf-8O4Fj.js";
+import { N as ce } from "./number-input-DxphVG_A.js";
+import { P as pe } from "./phone-input-DjU-XmO_.js";
+import { S as ue } from "./select-DMLG44F5.js";
+import { S as me } from "./separator-CYU_bGFn.js";
+import { S as fe } from "./switch-OILsBLWo.js";
+import { T as ge } from "./text-area-Bt3p7Pt0.js";
+import { T as be } from "./text-input-B-OWQ1Je.js";
+import { u as he } from "./registry-DvAUVLHh.js";
+import { u as ye, F as ve, r as xe, a as Ne } from "./field-value-NXYczdpO.js";
+import { L as Ve } from "./lock-CKOIn0IK.js";
+import { C as M } from "./check-DPdL_Sm7.js";
+import { X as we } from "./x-CCcI3eJp.js";
+import { P as Ce } from "./pencil-CfQX-0Qc.js";
+import { C as ke } from "./copy-B00HK7tj.js";
+const De = {
+  id: "patient-details",
+  // `view_change` backs the view-config actions (show/hide + reorder are both
+  // view reconfigurations); `set_value` backs the single-value `update_field`
+  // (not `edit_inline`, which is for granular free-text/formatting edits).
+  capabilities: ["view_change", "set_value"],
+  state: {
+    visibleFieldOrder: {
+      type: "string[]",
+      descriptionKey: "ui.agent.patientDetails.state.visibleFieldOrder",
+      description: 'Ordered list of visible field KEYS (e.g. "fiscalCode"). Never a field value.',
+      read: (e) => e.getVisibleFieldOrder()
+    },
+    patientId: {
+      type: "string | undefined",
+      descriptionKey: "ui.agent.patientDetails.state.patientId",
+      description: "Opaque patient id the panel is bound to. No patient-identifiable data.",
+      read: (e) => e.getPatientId()
+    }
+  },
+  actions: {
+    set_visible_fields: {
+      safety: "write",
+      argsType: "{ fieldIds: string[] }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          fieldIds: { type: "array", items: { type: "string" } }
+        },
+        required: ["fieldIds"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.patientDetails.actions.setVisibleFields",
+      description: "Set which fields are visible (and their order). Unknown ids are ignored.",
+      examples: [
+        {
+          args: { fieldIds: ["lastName", "firstName", "phone", "email"] },
+          note: "Show only name + contact fields."
+        }
+      ],
+      invoke: (e, a) => {
+        e.setVisibleFields(a.fieldIds);
+      }
+    },
+    set_field_order: {
+      safety: "write",
+      argsType: "{ orderedIds: string[] }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          orderedIds: { type: "array", items: { type: "string" } }
+        },
+        required: ["orderedIds"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.patientDetails.actions.setFieldOrder",
+      description: "Reorder the visible fields. Order within a section is honoured; sections stay fixed.",
+      invoke: (e, a) => {
+        e.setFieldOrder(a.orderedIds);
+      }
+    },
+    update_field: {
+      // PHI: mutates a patient-identifiable value. NOT `write` — the runtime
+      // must confirm + audit. Routes through `onFieldSave` (server write).
+      safety: "phi",
+      openWorld: !0,
+      argsType: "{ fieldId: string; value: unknown }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          fieldId: { type: "string" },
+          value: {}
+        },
+        required: ["fieldId", "value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.patientDetails.actions.updateField",
+      description: "Write a patient field value via the consumer's audited save path. Subject to the same permissions and validation as a human edit.",
+      errors: ["no-save-handler", "validation-failed", "permission-denied"],
+      examples: [
+        {
+          args: { fieldId: "job", value: "Architect" },
+          note: "Update the patient’s occupation."
+        }
+      ],
+      invoke: (e, a) => e.updateField(a.fieldId, a.value)
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "patient-details",
+      description: "Marks the PatientDetails root region."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Addresses a specific panel."
+    },
+    item: {
+      attr: "data-field-id",
+      description: "Stable field KEY on each row. Never the field value (no PHI in the DOM hook)."
+    }
+  }
+}, R = ae(
+  "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:text-[color:var(--foreground)]",
+  {
+    variants: {
+      // `compact` (default) suits the narrow rail panel; `comfortable`
+      // relaxes spacing for a wider host (a full-width profile page).
+      density: {
+        comfortable: "ds:p-[var(--spacing-md)]",
+        compact: "ds:p-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: {
+      density: "compact"
+    }
+  }
+), Fe = Z(
+  function({
+    title: a,
+    sections: n,
+    avatar: s,
+    headerChips: l,
+    framed: u = !1,
+    editable: r = !1,
+    onFieldSave: o,
+    validate: c,
+    visibleFieldOrder: g,
+    defaultVisibleFieldOrder: i,
+    onVisibleFieldsChange: h,
+    loading: w = !1,
+    emptyState: y,
+    patientId: m,
+    id: b,
+    locale: C,
+    cogLabel: E,
+    "aria-label": x,
+    className: k,
+    ...D
+  }, F) {
+    const { t: T } = V(), N = j(), {
+      visible: f,
+      catalogueIds: L,
+      setOrder: O,
+      toggleField: $,
+      toggleSection: H,
+      moveFieldOnto: U,
+      reset: W
+    } = ye(n, {
+      value: g,
+      defaultValue: i,
+      onChange: h
+    }), Y = ee(
+      () => ({
+        getVisibleFieldOrder: () => f,
+        getPatientId: () => m,
+        setVisibleFields: (p) => O(p),
+        setFieldOrder: (p) => O(p),
+        updateField: (p, A) => o ? o(p, A) : Promise.reject(
+          new Error("PatientDetails: no onFieldSave handler is wired.")
+        )
+      }),
+      [f, m, O, o]
+    );
+    he(De, Y, b);
+    const X = x ?? T("patientDetails.regionLabel", { defaultValue: "Patient details" }), K = (s == null ? void 0 : s.name) ?? (typeof a == "string" ? a : void 0), G = !!(s != null && s.src || K), J = L.some((p) => f.includes(p));
+    if (w)
+      return /* @__PURE__ */ t(
+        "section",
+        {
+          ref: F,
+          "data-component": "patient-details",
+          "data-component-id": b,
+          "data-patient-id": m,
+          "aria-label": X,
+          "aria-busy": "true",
+          className: R({ className: k }),
+          ...D,
+          children: /* @__PURE__ */ t(Se, {})
+        }
+      );
+    const Q = n.length === 0 || !J, _ = /* @__PURE__ */ d("div", { className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)]", children: [
+      G ? /* @__PURE__ */ t(
+        se,
+        {
+          size: "md",
+          name: K,
+          src: s == null ? void 0 : s.src,
+          className: "ds:shrink-0"
+        }
+      ) : null,
+      /* @__PURE__ */ d("div", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+        /* @__PURE__ */ t(
+          "h2",
+          {
+            id: N,
+            className: "ds:m-0 type-title-item ds:text-[color:var(--foreground)]",
+            children: a
+          }
+        ),
+        l ? /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)]", children: l }) : null
+      ] }),
+      /* @__PURE__ */ t(
+        ve,
+        {
+          sections: n,
+          visible: f,
+          onToggleField: $,
+          onToggleSection: H,
+          onMoveFieldOnto: U,
+          onReset: W,
+          label: E
+        }
+      )
+    ] });
+    return /* @__PURE__ */ d(
+      "section",
+      {
+        ref: F,
+        "data-component": "patient-details",
+        "data-component-id": b,
+        "data-patient-id": m,
+        "aria-labelledby": x ? void 0 : N,
+        "aria-label": x ?? void 0,
+        className: R({ className: k }),
+        ...D,
+        children: [
+          u ? /* @__PURE__ */ t(I, { variant: "elevated", className: "ds:sticky ds:top-0 ds:z-[1]", children: /* @__PURE__ */ t(I.Body, { children: _ }) }) : /* @__PURE__ */ d(q, { children: [
+            /* @__PURE__ */ t("header", { className: "ds:sticky ds:top-0 ds:z-[1] ds:bg-[color:var(--background)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:py-[var(--spacing-2xs)]", children: _ }),
+            /* @__PURE__ */ t(me, { orientation: "horizontal" })
+          ] }),
+          Q ? /* @__PURE__ */ t("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)]", children: y ?? T("patientDetails.empty", {
+            defaultValue: "No patient selected."
+          }) }) : xe(n, f).map(({ section: p, fields: A }) => {
+            const B = /* @__PURE__ */ t(
+              Te,
+              {
+                section: p,
+                fields: A,
+                editable: r,
+                onFieldSave: o,
+                validate: c,
+                locale: C
+              }
+            );
+            return u ? /* @__PURE__ */ t(I, { variant: "elevated", children: /* @__PURE__ */ t(I.Body, { children: B }) }, p.id) : /* @__PURE__ */ t(te, { children: B }, p.id);
+          })
+        ]
+      }
+    );
+  }
+);
+Fe.displayName = "PatientDetails";
+function Te({
+  section: e,
+  fields: a,
+  editable: n,
+  onFieldSave: s,
+  validate: l,
+  locale: u
+}) {
+  const { t: r } = V(), o = j(), c = e.collapsible ?? !0, g = a.length === 0 ? /* @__PURE__ */ t("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)]", children: r("patientDetails.section.empty", {
+    defaultValue: "No fields shown."
+  }) }) : /* @__PURE__ */ t(
+    S,
+    {
+      layout: "inline",
+      density: "compact",
+      divider: "none",
+      className: "ds:[--description-list-icon-color:var(--accent)]",
+      children: a.map((i) => /* @__PURE__ */ t(
+        Ie,
+        {
+          field: i,
+          icon: i.icon ?? null,
+          editable: n,
+          onFieldSave: s,
+          validate: l,
+          locale: u
+        },
+        i.id
+      ))
+    }
+  );
+  return c ? /* @__PURE__ */ d(
+    ie,
+    {
+      defaultOpen: e.defaultOpen ?? !0,
+      variant: "minimal",
+      className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+      children: [
+        /* @__PURE__ */ t("h3", { className: "ds:m-0", children: /* @__PURE__ */ t(re, { asChild: !0, children: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            id: o,
+            className: "ds:flex ds:w-full ds:items-center ds:justify-between ds:gap-[var(--spacing-xs)] ds:bg-transparent ds:border-0 ds:p-0 ds:text-start ds:cursor-pointer ds:rounded-[var(--radius-sm)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText] type-eyebrow ds:text-[color:var(--foreground)]",
+            children: e.heading
+          }
+        ) }) }),
+        /* @__PURE__ */ t(ne, { "aria-labelledby": o, children: g })
+      ]
+    }
+  ) : /* @__PURE__ */ d(
+    "section",
+    {
+      "aria-labelledby": o,
+      className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+      children: [
+        /* @__PURE__ */ t(
+          "h3",
+          {
+            id: o,
+            className: "ds:m-0 type-eyebrow ds:text-[color:var(--foreground)]",
+            children: e.heading
+          }
+        ),
+        g
+      ]
+    }
+  );
+}
+function Ie({
+  field: e,
+  icon: a,
+  editable: n,
+  onFieldSave: s,
+  validate: l,
+  locale: u
+}) {
+  const { t: r } = V(), o = j(), c = n && !!e.editable && !!s, [g, i] = v(!1), [h, w] = v(e.editValue), [y, m] = v(null), [b, C] = v(!1), E = P(() => {
+    w(e.editValue), m(null), i(!0);
+  }, [e.editValue]), x = P(() => {
+    i(!1), m(null);
+  }, []), k = P(async () => {
+    if (!s) return;
+    const N = (l == null ? void 0 : l(e.id, h)) ?? null;
+    if (N) {
+      m(N);
+      return;
+    }
+    C(!0), m(null);
+    try {
+      await s(e.id, h), i(!1);
+    } catch (f) {
+      m(
+        f instanceof Error && f.message ? f.message : r("patientDetails.edit.saveFailed", {
+          defaultValue: "Could not save. Try again."
+        })
+      );
+    } finally {
+      C(!1);
+    }
+  }, [s, l, e.id, h, r]), D = /* @__PURE__ */ d("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+    e.label,
+    e.sensitive ? /* @__PURE__ */ t(
+      Ve,
+      {
+        "aria-label": r("patientDetails.sensitive", {
+          defaultValue: "Sensitive"
+        }),
+        className: "ds:size-3 ds:shrink-0 ds:text-[color:var(--muted-foreground)]"
+      }
+    ) : null
+  ] }), F = typeof e.value == "string" ? e.value : e.copyText ?? (typeof e.editValue == "string" ? e.editValue : void 0), T = g ? /* @__PURE__ */ d("span", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+    /* @__PURE__ */ d("span", { className: "ds:flex ds:items-start ds:gap-[var(--spacing-2xs)]", children: [
+      /* @__PURE__ */ t(
+        Pe,
+        {
+          field: e,
+          value: h,
+          onChange: w,
+          invalid: !!y,
+          errorId: y ? o : void 0,
+          locale: u,
+          disabled: b
+        }
+      ),
+      /* @__PURE__ */ t(
+        z,
+        {
+          size: "sm",
+          intent: "primary",
+          icon: /* @__PURE__ */ t(M, { "aria-hidden": "true" }),
+          "aria-label": r("patientDetails.edit.save", { defaultValue: "Save" }),
+          loading: b,
+          onClick: k
+        }
+      ),
+      /* @__PURE__ */ t(
+        z,
+        {
+          size: "sm",
+          intent: "ghost",
+          icon: /* @__PURE__ */ t(we, { "aria-hidden": "true" }),
+          "aria-label": r("patientDetails.edit.cancel", {
+            defaultValue: "Cancel"
+          }),
+          disabled: b,
+          onClick: x
+        }
+      )
+    ] }),
+    y ? /* @__PURE__ */ t(
+      "span",
+      {
+        id: o,
+        role: "alert",
+        className: "type-meta ds:text-[color:var(--destructive)]",
+        children: y
+      }
+    ) : null
+  ] }) : /* @__PURE__ */ d("span", { className: "ds:flex ds:items-start ds:gap-[var(--spacing-2xs)] ds:min-w-0", children: [
+    /* @__PURE__ */ t(
+      "span",
+      {
+        className: `ds:min-w-0 ${e.editType === "textarea" ? "" : "ds:truncate"}${e.mono ? " ds:font-mono" : ""}`,
+        title: F,
+        children: /* @__PURE__ */ t(Ne, { field: e })
+      }
+    ),
+    e.copyable && e.copyText ? /* @__PURE__ */ t(ze, { text: e.copyText, label: e.label }) : null,
+    c ? /* @__PURE__ */ t(
+      z,
+      {
+        size: "sm",
+        intent: "ghost",
+        className: "ds:shrink-0 ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:focus-visible:opacity-100",
+        icon: /* @__PURE__ */ t(Ce, { "aria-hidden": "true" }),
+        "aria-label": r("patientDetails.edit.editField", {
+          field: e.label,
+          defaultValue: "Edit {{field}}"
+        }),
+        onClick: E
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ d(
+    S.Row,
+    {
+      icon: a ?? null,
+      "data-field-id": e.id,
+      className: "ds:group",
+      children: [
+        /* @__PURE__ */ t(S.Term, { children: D }),
+        /* @__PURE__ */ t(S.Detail, { children: T })
+      ]
+    }
+  );
+}
+function Pe({
+  field: e,
+  value: a,
+  onChange: n,
+  invalid: s,
+  errorId: l,
+  locale: u,
+  disabled: r
+}) {
+  const { t: o } = V(), c = s ? "error" : "default";
+  switch (e.editType ?? "text") {
+    case "textarea":
+      return /* @__PURE__ */ t(
+        ge,
+        {
+          size: "sm",
+          value: typeof a == "string" ? a : "",
+          onChange: (i) => n(i.target.value),
+          tone: c,
+          "aria-label": e.label,
+          "aria-invalid": s || void 0,
+          "aria-describedby": l,
+          disabled: r,
+          className: "ds:flex-1"
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ t(
+        ue,
+        {
+          size: "sm",
+          options: e.options ?? [],
+          value: typeof a == "string" ? a : "",
+          onValueChange: (i) => n(i),
+          tone: c,
+          disabled: r,
+          "aria-label": e.label,
+          "aria-invalid": s || void 0,
+          "aria-describedby": l
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ t(
+        fe,
+        {
+          label: e.label,
+          checked: a === !0,
+          onCheckedChange: (i) => n(i),
+          disabled: r
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ t(
+        le,
+        {
+          size: "sm",
+          value: a instanceof Date ? a : void 0,
+          onChange: (i) => n(i ?? null),
+          disabled: r,
+          "aria-label": e.label
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ t(
+        ce,
+        {
+          size: "sm",
+          value: typeof a == "number" ? a : null,
+          onChange: (i) => n(i),
+          mode: e.currency ? "currency" : "decimal",
+          currency: e.currency,
+          locale: u,
+          tone: c,
+          disabled: r,
+          "aria-label": e.label,
+          "aria-invalid": s || void 0,
+          "aria-describedby": l
+        }
+      );
+    case "email":
+      return /* @__PURE__ */ t(
+        oe,
+        {
+          size: "sm",
+          value: typeof a == "string" ? a : "",
+          onChange: (i) => n(i.target.value),
+          "aria-label": e.label,
+          "aria-invalid": s || void 0,
+          "aria-describedby": l,
+          disabled: r,
+          className: "ds:flex-1"
+        }
+      );
+    case "phone":
+      return /* @__PURE__ */ t(
+        pe,
+        {
+          size: "sm",
+          value: typeof a == "string" ? a : "",
+          onChange: (i) => n(i),
+          tone: c,
+          "aria-label": e.label,
+          "aria-invalid": s || void 0,
+          "aria-describedby": l,
+          disabled: r,
+          className: "ds:flex-1"
+        }
+      );
+    case "fiscalCode":
+      return /* @__PURE__ */ t(
+        de,
+        {
+          size: "sm",
+          value: typeof a == "string" ? a : "",
+          onChange: (i) => n(i),
+          tone: c,
+          "aria-label": e.label,
+          "aria-invalid": s || void 0,
+          "aria-describedby": l,
+          disabled: r,
+          className: "ds:flex-1"
+        }
+      );
+    case "text":
+    default:
+      return /* @__PURE__ */ t(
+        be,
+        {
+          size: "sm",
+          value: typeof a == "string" ? a : "",
+          onChange: (i) => n(i.target.value),
+          tone: c,
+          "aria-label": e.label,
+          "aria-invalid": s || void 0,
+          "aria-describedby": l,
+          disabled: r,
+          clearable: !0,
+          placeholder: o("patientDetails.edit.placeholder", {
+            defaultValue: "Enter a value"
+          }),
+          className: "ds:flex-1"
+        }
+      );
+  }
+}
+function ze({
+  text: e,
+  label: a
+}) {
+  const { t: n } = V(), [s, l] = v(!1), [u, r] = v(""), o = P(async () => {
+    try {
+      await navigator.clipboard.writeText(e), l(!0), r(n("keyValuePair.copied", { defaultValue: "Copied" })), setTimeout(() => {
+        l(!1), r("");
+      }, 2e3);
+    } catch {
+      r(
+        n("keyValuePair.notAvailable", { defaultValue: "Copy not available" })
+      ), setTimeout(() => r(""), 3e3);
+    }
+  }, [e, n]);
+  return /* @__PURE__ */ d(q, { children: [
+    /* @__PURE__ */ t(
+      z,
+      {
+        size: "sm",
+        intent: "ghost",
+        icon: s ? /* @__PURE__ */ t(M, { "aria-hidden": "true" }) : /* @__PURE__ */ t(ke, { "aria-hidden": "true" }),
+        "aria-label": n("keyValuePair.copy", {
+          label: a,
+          defaultValue: "Copy {{label}}"
+        }),
+        onClick: o
+      }
+    ),
+    /* @__PURE__ */ t("span", { role: "status", className: "ds:sr-only", children: u })
+  ] });
+}
+function Se() {
+  return /* @__PURE__ */ d("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+    /* @__PURE__ */ d("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ t("span", { className: "ds:size-10 ds:shrink-0 ds:rounded-full ds:bg-[color:var(--muted)]" }),
+      /* @__PURE__ */ t("span", { className: "ds:h-4 ds:w-1/2 ds:rounded-[var(--radius-sm)] ds:bg-[color:var(--muted)]" })
+    ] }),
+    [0, 1, 2].map((e) => /* @__PURE__ */ t(
+      "span",
+      {
+        className: "ds:h-4 ds:w-full ds:rounded-[var(--radius-sm)] ds:bg-[color:var(--muted)]"
+      },
+      e
+    ))
+  ] });
+}
+export {
+  Fe as P,
+  De as p
+};
+//# sourceMappingURL=patient-details-Dlhqb5ig.js.map