@alfadocs/ui-kit 1.37.0 → 1.39.0

package/dist/_chunks/note-timeline-Dn_XTo1s.js

@@ -0,0 +1,333 @@
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as D, useMemo as g, useRef as y, useEffect as H } from "react";
+import { c as h } from "./index-D2ZczOXr.js";
+import { useTranslation as L } from "react-i18next";
+import { SafeHtml as A } from "../safe-html/index.js";
+import { C as P, S as b } from "./skeleton-B1KTdJ4N.js";
+import { n as B, P as K, F as O, N as q } from "./note-attachment-CwDir3kK.js";
+import { u as G } from "./registry-DvAUVLHh.js";
+const J = {
+  id: "note-timeline",
+  capabilities: [],
+  state: {
+    notes: {
+      type: "Array<{ id?: string; pinned: boolean; flagged: boolean; clinical: boolean }>",
+      descriptionKey: "ui.agent.noteTimeline.state.notes",
+      description: "Structural snapshot of the rendered rows: ids and flags only, never note content or author.",
+      read: (a) => a.getNotes()
+    },
+    visibleCount: {
+      type: "number",
+      descriptionKey: "ui.agent.noteTimeline.state.visibleCount",
+      description: "How many notes are rendered, after the maxItems cap is applied.",
+      read: (a) => a.getVisibleCount()
+    }
+  },
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "note-timeline",
+      description: "Marks the NoteTimeline root. Emits data-empty when there is nothing to show."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop — addresses a specific timeline."
+    }
+  }
+}, N = h(
+  [
+    // Named group so the rail's connector can ask "is my ROW the last one?".
+    // A bare `last:` on the rail asks "am I the last child of my row?", which
+    // is never true — it is the middle of three — so the line ran on past the
+    // final dot and read as more content below.
+    "ds:group/note-row ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
+    "ds:pb-3 ds:last:pb-0"
+  ].join(" ")
+), Q = h(
+  [
+    "type-body-sm ds:[overflow-wrap:break-word]",
+    // `[&_p]:m-0` — the converter wraps each block in <p>; the timeline
+    // controls its own rhythm, so the paragraph margins are dropped.
+    "ds:[&_p]:m-0"
+  ].join(" "),
+  {
+    variants: {
+      // Literal classes, one per supported value: Tailwind generates what it
+      // can see in the source, so an interpolated arbitrary value emits
+      // nothing and the body would silently never clamp.
+      lines: {
+        1: "ds:line-clamp-1",
+        2: "ds:line-clamp-2",
+        3: "ds:line-clamp-3",
+        4: "ds:line-clamp-4",
+        5: "ds:line-clamp-5"
+      }
+    },
+    defaultVariants: { lines: 3 }
+  }
+), T = h(
+  [
+    "ds:absolute ds:top-1 ds:start-0 ds:size-[9px]",
+    "ds:rounded-[var(--radius-full)] ds:border-2",
+    "ds:bg-[color:var(--background)]",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      tone: {
+        default: "ds:border-[color:var(--border)]",
+        pinned: [
+          "ds:border-[color:var(--accent)]",
+          "ds:bg-[color:color-mix(in_srgb,var(--accent)_20%,var(--background))]"
+        ].join(" "),
+        flagged: [
+          "ds:border-[color:var(--warning-readable)]",
+          "ds:bg-[color:color-mix(in_srgb,var(--warning-readable)_20%,var(--background))]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { tone: "default" }
+  }
+);
+function U(a) {
+  return [...a].sort((r, i) => !!r.pinned != !!i.pinned ? r.pinned ? -1 : 1 : i.dateIso.localeCompare(r.dateIso));
+}
+const W = [
+  "ds:absolute ds:inset-0 ds:z-1 ds:m-0 ds:cursor-pointer",
+  "ds:rounded-[var(--radius-sm)] ds:border-0 ds:bg-transparent ds:p-0",
+  "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]"
+].join(" "), X = D(
+  ({
+    id: a,
+    notes: r,
+    maxItems: i = 3,
+    lines: k = 3,
+    locale: C,
+    emptyState: j,
+    "aria-label": I,
+    loading: p = !1,
+    loadingRows: z = 2,
+    className: u,
+    onNoteActivate: o,
+    ...f
+  }, d) => {
+    const { t: m, i18n: S } = L(), l = C ?? S.language, V = g(
+      () => (e) => {
+        try {
+          return new Intl.DateTimeFormat(l, {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit"
+          }).format(new Date(e));
+        } catch {
+          return e;
+        }
+      },
+      [l]
+    ), v = y(!1);
+    p && (v.current = !0);
+    const _ = v.current ? P : "", c = g(
+      () => U(r).slice(0, Math.max(0, i)),
+      [r, i]
+    ), x = y(null), F = (e) => {
+      x.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
+    };
+    H(() => {
+      var e;
+      o && ((e = x.current) == null || e.querySelectorAll("a[href]").forEach((t) => t.setAttribute("tabindex", "-1")));
+    });
+    const w = g(
+      () => ({
+        dayMonth: new Intl.DateTimeFormat(l, {
+          day: "numeric",
+          month: "short"
+        }),
+        year: new Intl.DateTimeFormat(l, { year: "numeric" })
+      }),
+      [l]
+    );
+    return G(
+      J,
+      {
+        getNotes: () => c.map((e) => ({
+          id: e.id,
+          pinned: !!e.pinned,
+          flagged: !!e.flagged,
+          clinical: !!e.clinical
+        })),
+        getVisibleCount: () => c.length
+      },
+      a
+    ), p && c.length === 0 ? /* @__PURE__ */ s(
+      "div",
+      {
+        ref: d,
+        "data-component": "note-timeline",
+        "data-component-id": a,
+        "data-loading": "",
+        "aria-busy": "true",
+        className: ["ds:flex ds:flex-col", u ?? ""].join(" ").trim(),
+        ...f,
+        children: Array.from({ length: Math.max(1, z) }, (e, t) => /* @__PURE__ */ n("div", { "aria-hidden": "true", className: N(), children: [
+          /* @__PURE__ */ n("div", { className: "ds:flex ds:w-12 ds:shrink-0 ds:flex-col ds:items-end ds:gap-[var(--spacing-2xs)] ds:pt-px", children: [
+            /* @__PURE__ */ s(
+              b,
+              {
+                variant: "text",
+                size: "sm",
+                stagger: t * 2,
+                width: "80%"
+              }
+            ),
+            /* @__PURE__ */ s(
+              b,
+              {
+                variant: "text",
+                size: "sm",
+                stagger: t * 2,
+                width: "50%"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: [
+                "ds:relative ds:w-[9px] ds:shrink-0",
+                "ds:before:absolute ds:before:start-[4px] ds:before:top-[14px]",
+                "ds:before:bottom-[-12px] ds:before:w-px",
+                'ds:before:bg-[color:var(--border)] ds:before:content-[""]',
+                "ds:group-last/note-row:before:hidden"
+              ].join(" "),
+              children: /* @__PURE__ */ s("span", { className: T({ tone: "default" }) })
+            }
+          ),
+          /* @__PURE__ */ s("div", { className: "ds:min-w-0 ds:flex-1", children: /* @__PURE__ */ s(
+            b,
+            {
+              variant: "text",
+              size: "sm",
+              lines: t % 2 === 0 ? 3 : 2,
+              stagger: t * 2 + 1
+            }
+          ) })
+        ] }, t))
+      }
+    ) : c.length === 0 ? /* @__PURE__ */ s(
+      "div",
+      {
+        ref: d,
+        "data-component": "note-timeline",
+        "data-component-id": a,
+        "data-empty": "",
+        className: u,
+        ...f,
+        children: j
+      }
+    ) : /* @__PURE__ */ s(
+      "div",
+      {
+        ref: F,
+        "data-component": "note-timeline",
+        "data-component-id": a,
+        role: "list",
+        "aria-busy": p || void 0,
+        "aria-label": I ?? m("noteTimeline.regionLabel"),
+        className: ["ds:flex ds:flex-col", _, u ?? ""].join(" ").trim(),
+        ...f,
+        children: c.map((e) => {
+          const t = new Date(e.dateIso), M = e.pinned ? "pinned" : e.flagged ? "flagged" : "default", E = e.contentFormat === "html" ? e.content : B(e.content), R = !!(o && e.id);
+          return /* @__PURE__ */ n(
+            "div",
+            {
+              role: "listitem",
+              "data-note-id": e.id,
+              "data-pinned": e.pinned ? "" : void 0,
+              "data-flagged": e.flagged ? "" : void 0,
+              className: N(),
+              children: [
+                R ? /* @__PURE__ */ s(
+                  "button",
+                  {
+                    type: "button",
+                    className: W,
+                    "aria-label": m("noteTimeline.openNote", {
+                      date: V(e.dateIso),
+                      defaultValue: "Open note · {{date}}"
+                    }),
+                    onClick: () => o == null ? void 0 : o(e.id)
+                  }
+                ) : null,
+                /* @__PURE__ */ n("div", { className: "ds:w-12 ds:shrink-0 ds:pt-px ds:text-end ds:text-[length:var(--type-meta-size)] ds:leading-[1.3]", children: [
+                  /* @__PURE__ */ s("div", { className: "ds:font-semibold ds:tracking-[0.03em] ds:uppercase", children: w.dayMonth.format(t) }),
+                  /* @__PURE__ */ s("div", { className: "ds:text-[color:var(--muted-foreground)]", children: w.year.format(t) })
+                ] }),
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: [
+                      "ds:relative ds:w-[9px] ds:shrink-0",
+                      "ds:before:absolute ds:before:start-[4px] ds:before:top-[14px]",
+                      "ds:before:bottom-[-12px] ds:before:w-px",
+                      'ds:before:bg-[color:var(--border)] ds:before:content-[""]',
+                      "ds:group-last/note-row:before:hidden"
+                    ].join(" "),
+                    children: /* @__PURE__ */ s("span", { className: T({ tone: M }) })
+                  }
+                ),
+                /* @__PURE__ */ n("div", { className: "ds:min-w-0 ds:flex-1", children: [
+                  /* @__PURE__ */ s(
+                    A,
+                    {
+                      html: E,
+                      profile: e.contentFormat === "html" ? "rich-text" : "markdown",
+                      className: Q({ lines: k })
+                    }
+                  ),
+                  e.author || e.pinned || e.flagged || e.attachedTo ? /* @__PURE__ */ n("div", { className: "ds:mt-[var(--spacing-2xs)] ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)] type-meta ds:text-[color:var(--muted-foreground)]", children: [
+                    e.author ? /* @__PURE__ */ s("span", { children: e.author.name }) : null,
+                    e.pinned ? /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:items-center", children: [
+                      /* @__PURE__ */ s(
+                        K,
+                        {
+                          "aria-hidden": "true",
+                          className: "ds:size-3 ds:text-[color:var(--accent)]"
+                        }
+                      ),
+                      /* @__PURE__ */ s("span", { className: "ds:sr-only", children: m("noteTimeline.pinned") })
+                    ] }) : null,
+                    e.flagged ? /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:items-center", children: [
+                      /* @__PURE__ */ s(
+                        O,
+                        {
+                          "aria-hidden": "true",
+                          className: "ds:size-3 ds:text-[color:var(--warning-readable)]"
+                        }
+                      ),
+                      /* @__PURE__ */ s("span", { className: "ds:sr-only", children: m("noteTimeline.flagged") })
+                    ] }) : null,
+                    /* @__PURE__ */ s(q, { attachedTo: e.attachedTo })
+                  ] }) : null
+                ] })
+              ]
+            },
+            e.id ?? e.dateIso
+          );
+        })
+      }
+    );
+  }
+);
+X.displayName = "NoteTimeline";
+export {
+  X as N,
+  J as n
+};
+//# sourceMappingURL=note-timeline-Dn_XTo1s.js.map