@alfadocs/ui-kit 1.36.1 → 1.38.0

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

@@ -1,11 +1,12 @@
-import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as T, useMemo as u } from "react";
-import { c as l } from "./index-D2ZczOXr.js";
-import { useTranslation as k } from "react-i18next";
-import { SafeHtml as j } from "../safe-html/index.js";
-import { n as C, P as I, F as V, N as F } from "./note-attachment-CwDir3kK.js";
-import { u as M } from "./registry-DvAUVLHh.js";
-const _ = {
+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 { 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 = {
   id: "note-timeline",
   capabilities: [],
   state: {
@@ -13,13 +14,13 @@ const _ = {
       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: (t) => t.getNotes()
+      read: (s) => s.getNotes()
     },
     visibleCount: {
       type: "number",
       descriptionKey: "ui.agent.noteTimeline.state.visibleCount",
       description: "How many notes are rendered, after the maxItems cap is applied.",
-      read: (t) => t.getVisibleCount()
+      read: (s) => s.getVisibleCount()
     }
   },
   actions: {},
@@ -35,7 +36,7 @@ const _ = {
       description: "Sourced from the id prop — addresses a specific timeline."
     }
   }
-}, z = l(
+}, x = u(
   [
     // 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
@@ -44,7 +45,7 @@ const _ = {
     "ds:group/note-row ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
     "ds:pb-3 ds:last:pb-0"
   ].join(" ")
-), A = l(
+), K = u(
   [
     "type-body-sm ds:[overflow-wrap:break-word]",
     // `[&_p]:m-0` — the converter wraps each block in <p>; the timeline
@@ -66,7 +67,7 @@ const _ = {
     },
     defaultVariants: { lines: 3 }
   }
-), H = l(
+), N = u(
   [
     "ds:absolute ds:top-1 ds:start-0 ds:size-[9px]",
     "ds:rounded-[var(--radius-full)] ds:border-2",
@@ -90,81 +91,141 @@ const _ = {
     defaultVariants: { tone: "default" }
   }
 );
-function D(t) {
-  return [...t].sort((n, r) => !!n.pinned != !!r.pinned ? n.pinned ? -1 : 1 : r.dateIso.localeCompare(n.dateIso));
+function O(s) {
+  return [...s].sort((r, d) => !!r.pinned != !!d.pinned ? r.pinned ? -1 : 1 : d.dateIso.localeCompare(r.dateIso));
 }
-const P = T(
+const q = M(
   ({
-    id: t,
-    notes: n,
-    maxItems: r = 3,
-    lines: h = 3,
-    locale: b,
-    emptyState: v,
-    "aria-label": x,
-    className: c,
-    ...m
-  }, p) => {
-    const { t: i, i18n: N } = k(), o = b ?? N.language, d = u(
-      () => D(n).slice(0, Math.max(0, r)),
-      [n, r]
-    ), g = u(
+    id: s,
+    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(
       () => ({
-        dayMonth: new Intl.DateTimeFormat(o, {
+        dayMonth: new Intl.DateTimeFormat(f, {
           day: "numeric",
           month: "short"
         }),
-        year: new Intl.DateTimeFormat(o, { year: "numeric" })
+        year: new Intl.DateTimeFormat(f, { year: "numeric" })
       }),
-      [o]
+      [f]
     );
-    return M(
-      _,
+    return D(
+      P,
       {
-        getNotes: () => d.map((e) => ({
+        getNotes: () => o.map((e) => ({
           id: e.id,
           pinned: !!e.pinned,
           flagged: !!e.flagged,
           clinical: !!e.clinical
         })),
-        getVisibleCount: () => d.length
+        getVisibleCount: () => o.length
       },
-      t
-    ), d.length === 0 ? /* @__PURE__ */ a(
+      s
+    ), i && o.length === 0 ? /* @__PURE__ */ a(
       "div",
       {
-        ref: p,
+        ref: m,
         "data-component": "note-timeline",
-        "data-component-id": t,
+        "data-component-id": s,
+        "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: [
+          /* @__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,
+              {
+                variant: "text",
+                size: "sm",
+                stagger: t * 2,
+                width: "80%"
+              }
+            ),
+            /* @__PURE__ */ a(
+              g,
+              {
+                variant: "text",
+                size: "sm",
+                stagger: t * 2,
+                width: "50%"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a(
+            "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__ */ a("span", { className: N({ tone: "default" }) })
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "ds:min-w-0 ds:flex-1", children: /* @__PURE__ */ a(
+            g,
+            {
+              variant: "text",
+              size: "sm",
+              lines: t % 2 === 0 ? 3 : 2,
+              stagger: t * 2 + 1
+            }
+          ) })
+        ] }, t))
+      }
+    ) : o.length === 0 ? /* @__PURE__ */ a(
+      "div",
+      {
+        ref: m,
+        "data-component": "note-timeline",
+        "data-component-id": s,
         "data-empty": "",
-        className: c,
-        ...m,
-        children: v
+        className: l,
+        ...c,
+        children: T
       }
     ) : /* @__PURE__ */ a(
       "div",
       {
-        ref: p,
+        ref: m,
         "data-component": "note-timeline",
-        "data-component-id": t,
+        "data-component-id": s,
         role: "list",
-        "aria-label": x ?? i("noteTimeline.regionLabel"),
-        className: ["ds:flex ds:flex-col", c ?? ""].join(" ").trim(),
-        ...m,
-        children: d.map((e) => {
-          const f = new Date(e.dateIso), w = e.pinned ? "pinned" : e.flagged ? "flagged" : "default", y = e.contentFormat === "html" ? e.content : C(e.content);
-          return /* @__PURE__ */ s(
+        "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);
+          return /* @__PURE__ */ n(
             "div",
             {
               role: "listitem",
               "data-note-id": e.id,
               "data-pinned": e.pinned ? "" : void 0,
               "data-flagged": e.flagged ? "" : void 0,
-              className: z(),
+              className: x(),
               children: [
-                /* @__PURE__ */ s("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: g.dayMonth.format(f) }),
-                  /* @__PURE__ */ a("div", { className: "ds:text-[color:var(--muted-foreground)]", children: g.year.format(f) })
+                /* @__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__ */ a(
                   "div",
@@ -177,41 +238,41 @@ const P = T(
                       'ds:before:bg-[color:var(--border)] ds:before:content-[""]',
                       "ds:group-last/note-row:before:hidden"
                     ].join(" "),
-                    children: /* @__PURE__ */ a("span", { className: H({ tone: w }) })
+                    children: /* @__PURE__ */ a("span", { className: N({ tone: z }) })
                   }
                 ),
-                /* @__PURE__ */ s("div", { className: "ds:min-w-0 ds:flex-1", children: [
+                /* @__PURE__ */ n("div", { className: "ds:min-w-0 ds:flex-1", children: [
                   /* @__PURE__ */ a(
-                    j,
+                    A,
                     {
-                      html: y,
+                      html: I,
                       profile: e.contentFormat === "html" ? "rich-text" : "markdown",
-                      className: A({ lines: h })
+                      className: K({ lines: w })
                     }
                   ),
-                  e.author || e.pinned || e.flagged || e.attachedTo ? /* @__PURE__ */ s("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 || 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.pinned ? /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center", children: [
+                    e.pinned ? /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:items-center", children: [
                       /* @__PURE__ */ a(
-                        I,
+                        H,
                         {
                           "aria-hidden": "true",
                           className: "ds:size-3 ds:text-[color:var(--accent)]"
                         }
                       ),
-                      /* @__PURE__ */ a("span", { className: "ds:sr-only", children: i("noteTimeline.pinned") })
+                      /* @__PURE__ */ a("span", { className: "ds:sr-only", children: p("noteTimeline.pinned") })
                     ] }) : null,
-                    e.flagged ? /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center", children: [
+                    e.flagged ? /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:items-center", children: [
                       /* @__PURE__ */ a(
-                        V,
+                        L,
                         {
                           "aria-hidden": "true",
                           className: "ds:size-3 ds:text-[color:var(--warning-readable)]"
                         }
                       ),
-                      /* @__PURE__ */ a("span", { className: "ds:sr-only", children: i("noteTimeline.flagged") })
+                      /* @__PURE__ */ a("span", { className: "ds:sr-only", children: p("noteTimeline.flagged") })
                     ] }) : null,
-                    /* @__PURE__ */ a(F, { attachedTo: e.attachedTo })
+                    /* @__PURE__ */ a(R, { attachedTo: e.attachedTo })
                   ] }) : null
                 ] })
               ]
@@ -223,9 +284,9 @@ const P = T(
     );
   }
 );
-P.displayName = "NoteTimeline";
+q.displayName = "NoteTimeline";
 export {
-  P as N,
-  _ as n
+  q as N,
+  P as n
 };
-//# sourceMappingURL=note-timeline-CXfSV3yX.js.map
+//# sourceMappingURL=note-timeline-D2oPuQP6.js.map