@alfadocs/ui-kit 1.38.0 → 1.39.0

package/dist/_chunks/{note-timeline-D2oPuQP6.js → note-timeline-Dn_XTo1s.js}

@@ -1,12 +1,12 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as M, useRef as S, useMemo as v } from "react";
-import { c as u } from "./index-D2ZczOXr.js";
-import { useTranslation as V } from "react-i18next";
+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 F, S as g } from "./skeleton-B1KTdJ4N.js";
-import { n as E, P as H, F as L, N as R } from "./note-attachment-CwDir3kK.js";
-import { u as D } from "./registry-DvAUVLHh.js";
-const P = {
+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: {
@@ -14,13 +14,13 @@ const P = {
       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: (s) => s.getNotes()
+      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: (s) => s.getVisibleCount()
+      read: (a) => a.getVisibleCount()
     }
   },
   actions: {},
@@ -36,7 +36,7 @@ const P = {
       description: "Sourced from the id prop — addresses a specific timeline."
     }
   }
-}, x = u(
+}, 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
@@ -45,7 +45,7 @@ const P = {
     "ds:group/note-row ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
     "ds:pb-3 ds:last:pb-0"
   ].join(" ")
-), K = u(
+), Q = h(
   [
     "type-body-sm ds:[overflow-wrap:break-word]",
     // `[&_p]:m-0` — the converter wraps each block in <p>; the timeline
@@ -67,7 +67,7 @@ const P = {
     },
     defaultVariants: { lines: 3 }
   }
-), N = u(
+), T = h(
   [
     "ds:absolute ds:top-1 ds:start-0 ds:size-[9px]",
     "ds:rounded-[var(--radius-full)] ds:border-2",
@@ -91,64 +91,93 @@ const P = {
     defaultVariants: { tone: "default" }
   }
 );
-function O(s) {
-  return [...s].sort((r, d) => !!r.pinned != !!d.pinned ? r.pinned ? -1 : 1 : d.dateIso.localeCompare(r.dateIso));
+function U(a) {
+  return [...a].sort((r, i) => !!r.pinned != !!i.pinned ? r.pinned ? -1 : 1 : i.dateIso.localeCompare(r.dateIso));
 }
-const q = M(
+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: s,
+    id: a,
     notes: r,
-    maxItems: d = 3,
-    lines: w = 3,
-    locale: y,
-    emptyState: T,
-    "aria-label": k,
-    loading: i = !1,
-    loadingRows: j = 2,
-    className: l,
-    ...c
-  }, m) => {
-    const { t: p, i18n: C } = V(), f = y ?? C.language, h = S(!1);
-    i && (h.current = !0);
-    const _ = h.current ? F : "", o = v(
-      () => O(r).slice(0, Math.max(0, d)),
-      [r, d]
-    ), b = v(
+    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(f, {
+        dayMonth: new Intl.DateTimeFormat(l, {
           day: "numeric",
           month: "short"
         }),
-        year: new Intl.DateTimeFormat(f, { year: "numeric" })
+        year: new Intl.DateTimeFormat(l, { year: "numeric" })
       }),
-      [f]
+      [l]
     );
-    return D(
-      P,
+    return G(
+      J,
       {
-        getNotes: () => o.map((e) => ({
+        getNotes: () => c.map((e) => ({
           id: e.id,
           pinned: !!e.pinned,
           flagged: !!e.flagged,
           clinical: !!e.clinical
         })),
-        getVisibleCount: () => o.length
+        getVisibleCount: () => c.length
       },
-      s
-    ), i && o.length === 0 ? /* @__PURE__ */ a(
+      a
+    ), p && c.length === 0 ? /* @__PURE__ */ s(
       "div",
       {
-        ref: m,
+        ref: d,
         "data-component": "note-timeline",
-        "data-component-id": s,
+        "data-component-id": a,
         "data-loading": "",
         "aria-busy": "true",
-        className: ["ds:flex ds:flex-col", l ?? ""].join(" ").trim(),
-        ...c,
-        children: Array.from({ length: Math.max(1, j) }, (e, t) => /* @__PURE__ */ n("div", { "aria-hidden": "true", className: x(), children: [
+        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__ */ a(
-              g,
+            /* @__PURE__ */ s(
+              b,
               {
                 variant: "text",
                 size: "sm",
@@ -156,8 +185,8 @@ const q = M(
                 width: "80%"
               }
             ),
-            /* @__PURE__ */ a(
-              g,
+            /* @__PURE__ */ s(
+              b,
               {
                 variant: "text",
                 size: "sm",
@@ -166,7 +195,7 @@ const q = M(
               }
             )
           ] }),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ s(
             "div",
             {
               className: [
@@ -176,11 +205,11 @@ const q = M(
                 'ds:before:bg-[color:var(--border)] ds:before:content-[""]',
                 "ds:group-last/note-row:before:hidden"
               ].join(" "),
-              children: /* @__PURE__ */ a("span", { className: N({ tone: "default" }) })
+              children: /* @__PURE__ */ s("span", { className: T({ tone: "default" }) })
             }
           ),
-          /* @__PURE__ */ a("div", { className: "ds:min-w-0 ds:flex-1", children: /* @__PURE__ */ a(
-            g,
+          /* @__PURE__ */ s("div", { className: "ds:min-w-0 ds:flex-1", children: /* @__PURE__ */ s(
+            b,
             {
               variant: "text",
               size: "sm",
@@ -190,30 +219,30 @@ const q = M(
           ) })
         ] }, t))
       }
-    ) : o.length === 0 ? /* @__PURE__ */ a(
+    ) : c.length === 0 ? /* @__PURE__ */ s(
       "div",
       {
-        ref: m,
+        ref: d,
         "data-component": "note-timeline",
-        "data-component-id": s,
+        "data-component-id": a,
         "data-empty": "",
-        className: l,
-        ...c,
-        children: T
+        className: u,
+        ...f,
+        children: j
       }
-    ) : /* @__PURE__ */ a(
+    ) : /* @__PURE__ */ s(
       "div",
       {
-        ref: m,
+        ref: F,
         "data-component": "note-timeline",
-        "data-component-id": s,
+        "data-component-id": a,
         role: "list",
-        "aria-busy": i || void 0,
-        "aria-label": k ?? p("noteTimeline.regionLabel"),
-        className: ["ds:flex ds:flex-col", _, l ?? ""].join(" ").trim(),
-        ...c,
-        children: o.map((e) => {
-          const t = new Date(e.dateIso), z = e.pinned ? "pinned" : e.flagged ? "flagged" : "default", I = e.contentFormat === "html" ? e.content : E(e.content);
+        "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",
             {
@@ -221,13 +250,25 @@ const q = M(
               "data-note-id": e.id,
               "data-pinned": e.pinned ? "" : void 0,
               "data-flagged": e.flagged ? "" : void 0,
-              className: x(),
+              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__ */ a("div", { className: "ds:font-semibold ds:tracking-[0.03em] ds:uppercase", children: b.dayMonth.format(t) }),
-                  /* @__PURE__ */ a("div", { className: "ds:text-[color:var(--muted-foreground)]", children: b.year.format(t) })
+                  /* @__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__ */ a(
+                /* @__PURE__ */ s(
                   "div",
                   {
                     "aria-hidden": "true",
@@ -238,41 +279,41 @@ const q = M(
                       'ds:before:bg-[color:var(--border)] ds:before:content-[""]',
                       "ds:group-last/note-row:before:hidden"
                     ].join(" "),
-                    children: /* @__PURE__ */ a("span", { className: N({ tone: z }) })
+                    children: /* @__PURE__ */ s("span", { className: T({ tone: M }) })
                   }
                 ),
                 /* @__PURE__ */ n("div", { className: "ds:min-w-0 ds:flex-1", children: [
-                  /* @__PURE__ */ a(
+                  /* @__PURE__ */ s(
                     A,
                     {
-                      html: I,
+                      html: E,
                       profile: e.contentFormat === "html" ? "rich-text" : "markdown",
-                      className: K({ lines: w })
+                      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__ */ a("span", { children: e.author.name }) : null,
+                    e.author ? /* @__PURE__ */ s("span", { children: e.author.name }) : null,
                     e.pinned ? /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:items-center", children: [
-                      /* @__PURE__ */ a(
-                        H,
+                      /* @__PURE__ */ s(
+                        K,
                         {
                           "aria-hidden": "true",
                           className: "ds:size-3 ds:text-[color:var(--accent)]"
                         }
                       ),
-                      /* @__PURE__ */ a("span", { className: "ds:sr-only", children: p("noteTimeline.pinned") })
+                      /* @__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__ */ a(
-                        L,
+                      /* @__PURE__ */ s(
+                        O,
                         {
                           "aria-hidden": "true",
                           className: "ds:size-3 ds:text-[color:var(--warning-readable)]"
                         }
                       ),
-                      /* @__PURE__ */ a("span", { className: "ds:sr-only", children: p("noteTimeline.flagged") })
+                      /* @__PURE__ */ s("span", { className: "ds:sr-only", children: m("noteTimeline.flagged") })
                     ] }) : null,
-                    /* @__PURE__ */ a(R, { attachedTo: e.attachedTo })
+                    /* @__PURE__ */ s(q, { attachedTo: e.attachedTo })
                   ] }) : null
                 ] })
               ]
@@ -284,9 +325,9 @@ const q = M(
     );
   }
 );
-q.displayName = "NoteTimeline";
+X.displayName = "NoteTimeline";
 export {
-  q as N,
-  P as n
+  X as N,
+  J as n
 };
-//# sourceMappingURL=note-timeline-D2oPuQP6.js.map
+//# sourceMappingURL=note-timeline-Dn_XTo1s.js.map