@nivaro/react 0.3.41 → 0.3.43

package/dist/shared/components/Skeletons.js

@@ -0,0 +1,199 @@
+import { jsxs as u, jsx as e, Fragment as f } from "react/jsx-runtime";
+import { cellWidth as b } from "../lib/skeleton-shapes.js";
+import { cn as h } from "../lib/utils.js";
+const k = "block animate-pulse bg-[hsl(var(--nvr-skeleton))] motion-reduce:animate-none";
+function s({
+  shape: r,
+  width: i,
+  className: o,
+  style: a
+}) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": !0,
+      className: h(k, "h-3 rounded", r === "avatar" ? "h-5 rounded-full" : r === "badge" ? "h-4 rounded-full" : "", r === "bool" ? "h-3.5 rounded-[4px]" : "", o),
+      style: { width: i, ...a }
+    }
+  );
+}
+function w({
+  columns: r,
+  rows: i = 12,
+  rowClassName: o = "h-8",
+  cellClassName: a = "px-3 py-1.5",
+  leadingCells: t = 0,
+  trailingCells: l = 0,
+  cellStyle: d,
+  barClassName: n
+}) {
+  return /* @__PURE__ */ e(f, { children: Array.from({ length: i }, (c, x) => /* @__PURE__ */ u(
+    "tr",
+    {
+      "data-skeleton-row": "",
+      "aria-hidden": !0,
+      className: h("border-b border-slate-100 dark:border-slate-800", o),
+      children: [
+        Array.from({ length: t }, (m, p) => /* @__PURE__ */ e("td", { className: a, children: /* @__PURE__ */ e(s, { shape: "bool", width: 14, className: n }) }, `l${p}`)),
+        r.map((m, p) => /* @__PURE__ */ e("td", { style: d == null ? void 0 : d(m.key), className: a, children: /* @__PURE__ */ e(
+          "span",
+          {
+            className: h(
+              "flex h-5 items-center",
+              m.shape === "number" ? "justify-end" : "justify-start"
+            ),
+            children: /* @__PURE__ */ e(
+              s,
+              {
+                shape: m.shape,
+                width: b(m.shape, x, p),
+                className: n
+              }
+            )
+          }
+        ) }, m.key)),
+        Array.from({ length: l }, (m, p) => /* @__PURE__ */ e("td", { className: a, children: /* @__PURE__ */ e(s, { width: 16, className: n }) }, `t${p}`))
+      ]
+    },
+    x
+  )) });
+}
+function v({
+  columns: r,
+  rows: i = 8,
+  header: o,
+  rowClassName: a = "h-9",
+  className: t
+}) {
+  const l = (d) => d.width ? { width: d.width, flex: "none" } : { flex: `${d.grow ?? 1} 1 0%` };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-skeleton": "list",
+      "aria-busy": "true",
+      className: h("divide-y divide-slate-100 dark:divide-slate-800", t),
+      children: [
+        o !== !1 && /* @__PURE__ */ e("div", { className: "flex h-9 items-center gap-3 bg-slate-50 px-3 dark:bg-muted", children: r.map((d, n) => /* @__PURE__ */ e(
+          "span",
+          {
+            className: "min-w-0 truncate text-[11px] font-medium text-slate-500 dark:text-slate-400",
+            style: l(d),
+            children: d.label ?? /* @__PURE__ */ e(s, { width: b("short", 0, n), className: "h-2.5" })
+          },
+          d.key
+        )) }),
+        Array.from({ length: i }, (d, n) => /* @__PURE__ */ e(
+          "div",
+          {
+            "aria-hidden": !0,
+            "data-skeleton-row": "",
+            className: h("flex items-center gap-3 px-3", a),
+            children: r.map((c, x) => /* @__PURE__ */ e(
+              "span",
+              {
+                className: h("min-w-0", c.shape === "number" && "flex justify-end"),
+                style: l(c),
+                children: /* @__PURE__ */ e(s, { shape: c.shape, width: b(c.shape, n, x) })
+              },
+              c.key
+            ))
+          },
+          n
+        ))
+      ]
+    }
+  );
+}
+function $({
+  plan: r,
+  className: i
+}) {
+  const o = r && r.sections.length > 0 ? r.sections : [
+    {
+      key: "a",
+      label: null,
+      fields: [6, 6, 6, 6, 12].map((a, t) => ({ key: `a${t}`, span: a }))
+    },
+    {
+      key: "b",
+      label: null,
+      fields: [4, 4, 4, 12].map((a, t) => ({ key: `b${t}`, span: a }))
+    }
+  ];
+  return /* @__PURE__ */ u("div", { "data-skeleton": "form", "aria-busy": "true", className: h("space-y-4", i), children: [
+    r && r.tabs.length > 1 && /* @__PURE__ */ e("div", { className: "flex items-center gap-1 border-b border-slate-200 dark:border-border", children: r.tabs.map((a, t) => /* @__PURE__ */ e(
+      "span",
+      {
+        className: h(
+          "px-3 py-2 text-[12.5px] font-medium",
+          t === 0 ? "border-b-2 border-nvr-cyan text-slate-700 dark:text-slate-200" : "text-slate-400 dark:text-slate-500"
+        ),
+        children: a
+      },
+      `${a}-${t}`
+    )) }),
+    o.map((a, t) => /* @__PURE__ */ u(
+      "section",
+      {
+        "aria-hidden": !0,
+        className: "rounded-xl border border-slate-200 bg-white dark:border-border dark:bg-card",
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2 px-5 py-3", children: a.label ? /* @__PURE__ */ e("span", { className: "text-[13px] font-medium text-slate-400 dark:text-slate-500", children: a.label }) : /* @__PURE__ */ e(s, { width: b("short", t, 0), className: "h-3.5 max-w-[160px]" }) }),
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-12 gap-x-6 gap-y-3 px-5 pb-5", children: a.fields.map((l, d) => /* @__PURE__ */ u(
+            "div",
+            {
+              className: "min-w-0 space-y-1.5",
+              style: { gridColumn: `span ${l.span}` },
+              children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    width: `${Math.round(30 + (d * 37 + t * 11) % 35)}%`,
+                    className: "h-2.5"
+                  }
+                ),
+                /* @__PURE__ */ e(s, { className: h("w-full rounded-md", l.tall ? "h-28" : "h-9") })
+              ]
+            },
+            l.key
+          )) })
+        ]
+      },
+      a.key
+    ))
+  ] });
+}
+function A({
+  title: r = !0,
+  kpi: i = !1,
+  chart: o = !1,
+  lines: a = 3,
+  className: t,
+  framed: l = !0
+}) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-skeleton": "card",
+      "aria-busy": "true",
+      className: h(
+        "flex flex-col gap-2",
+        l && "rounded-lg border border-slate-200 bg-white p-3 dark:border-border dark:bg-card",
+        t
+      ),
+      children: [
+        r && /* @__PURE__ */ e(s, { width: "38%", className: "h-2.5" }),
+        i && /* @__PURE__ */ e(s, { width: "46%", className: "mt-0.5 h-6 rounded-md" }),
+        o && /* @__PURE__ */ e(s, { className: "h-full min-h-[96px] w-full flex-1 rounded-md" }),
+        !i && !o && Array.from({ length: a }, (d, n) => /* @__PURE__ */ e(s, { width: b("text", n, 3), className: "h-3" }, n))
+      ]
+    }
+  );
+}
+export {
+  A as CardSkeleton,
+  $ as FormSkeleton,
+  v as ListSkeleton,
+  s as SkeletonBar,
+  w as TableSkeletonRows
+};

package/dist/shared/components/SlowNotice.js

@@ -0,0 +1,63 @@
+import { jsx as t, jsxs as o, Fragment as x } from "react/jsx-runtime";
+import { Timer as c } from "lucide-react";
+import { useSlowReason as p } from "../hooks/useSlowReason.js";
+import { elapsedLabel as h } from "../lib/slow-reason.js";
+import { cn as m } from "../lib/utils.js";
+function N({
+  variant: e = "inline",
+  className: r,
+  children: l,
+  reason: a,
+  ...s
+}) {
+  const n = p({ ...s, enabled: !a && s.enabled !== !1 }), i = a ?? n;
+  return i.slow ? /* @__PURE__ */ t(u, { reason: i, variant: e, className: r, extra: l }) : null;
+}
+function u({
+  reason: e,
+  variant: r = "inline",
+  className: l,
+  extra: a
+}) {
+  var i, d;
+  const s = e.text ?? "This is taking a while", n = h(e.elapsedMs);
+  return r === "pill" ? /* @__PURE__ */ o(
+    "span",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-slow-notice": ((i = e.answer) == null ? void 0 : i.kind) ?? "generic",
+      className: m(
+        "nvr-pop-in inline-flex max-w-[min(92vw,520px)] items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-[12px] font-medium text-slate-600 shadow-lg motion-reduce:animate-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300",
+        l
+      ),
+      children: [
+        /* @__PURE__ */ t(c, { "aria-hidden": !0, className: "h-3.5 w-3.5 shrink-0 text-[#00a5cc]" }),
+        /* @__PURE__ */ t("span", { className: "min-w-0 truncate", children: s }),
+        /* @__PURE__ */ t("span", { className: "shrink-0 tabular-nums text-slate-400 dark:text-slate-500", children: n }),
+        a
+      ]
+    }
+  ) : /* @__PURE__ */ o(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "data-slow-notice": ((d = e.answer) == null ? void 0 : d.kind) ?? "generic",
+      className: m("flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px]", l),
+      children: [
+        /* @__PURE__ */ t(c, { "aria-hidden": !0, className: "h-3.5 w-3.5 shrink-0 text-slate-400 dark:text-slate-500" }),
+        /* @__PURE__ */ t("span", { className: "min-w-0 text-slate-600 dark:text-slate-300", children: e.text ? /* @__PURE__ */ o(x, { children: [
+          /* @__PURE__ */ t("span", { className: "text-slate-500 dark:text-slate-400", children: "This is taking a while · " }),
+          e.text
+        ] }) : s }),
+        /* @__PURE__ */ t("span", { className: "tabular-nums text-slate-400 dark:text-slate-500", children: n }),
+        a
+      ]
+    }
+  );
+}
+export {
+  N as SlowNotice,
+  u as SlowNoticeView
+};

package/dist/shared/components/Term.js

@@ -0,0 +1,23 @@
+import { jsx as n, Fragment as m } from "react/jsx-runtime";
+import { findGlossaryTerm as a, uiHint as c } from "../lib/core-glossary.js";
+import { useGlossary as u } from "../lib/glossary.js";
+const i = "cursor-help underline decoration-dotted decoration-1 underline-offset-[3px]";
+function h({
+  id: t,
+  children: s,
+  className: e
+}) {
+  const d = u({ withCore: !0 }), r = a(d, t), o = s ?? (r == null ? void 0 : r.term) ?? t;
+  return r ? /* @__PURE__ */ n(
+    "span",
+    {
+      "data-term": r.overrides ?? r.slug,
+      "data-tip": `${r.term}: ${c(r)}`,
+      className: e ? `${i} ${e}` : i,
+      children: o
+    }
+  ) : /* @__PURE__ */ n(m, { children: o });
+}
+export {
+  h as Term
+};