@agent-factory-platform/ui-kit 0.7.1 → 0.9.0

package/dist/charts/series.js

@@ -0,0 +1,584 @@
+import { jsx as t, jsxs as p, Fragment as L } from "react/jsx-runtime";
+import { useId as B } from "react";
+import { ResponsiveContainer as C, AreaChart as X, CartesianGrid as T, XAxis as _, YAxis as $, ReferenceArea as V, ReferenceLine as A, Tooltip as D, Area as R, ReferenceDot as U, ComposedChart as E, Bar as K, Line as J, LineChart as tt, Treemap as et } from "recharts";
+import { ChartTooltip as z } from "./chart-tooltip.js";
+import { CHART as e, gridProps as F, axisProps as k, CATEGORICAL as Y } from "./theme.js";
+function q(i) {
+  return [...i].sort((h, d) => d.size - h.size).slice(0, Math.min(3, i.length));
+}
+function it(i, h, d) {
+  if (!i.length || !h.length || d !== void 0 && !Number.isFinite(d) || [...i, ...h].some((x) => !Number.isFinite(x.price) || !Number.isFinite(x.size) || x.size < 0)) return null;
+  const o = [...i].sort((x, M) => M.price - x.price), r = [...h].sort((x, M) => x.price - M.price);
+  let c = 0, l = 0;
+  const a = o.map((x) => ({ price: x.price, bid: c += x.size, size: x.size })), s = r.map((x) => ({ price: x.price, ask: l += x.size, size: x.size })), u = o[0].price, m = r[0].price, n = d ?? (u + m) / 2, v = a[a.length - 1].price, b = s[s.length - 1].price, y = Math.max(n - v, b - n, Number.EPSILON), f = [n - y, n + y], g = [
+    { price: f[0], bid: c },
+    ...a.reverse(),
+    { price: n, bid: 0 },
+    { price: n, ask: 0 },
+    ...s,
+    { price: f[1], ask: l }
+  ];
+  return {
+    center: n,
+    bestBid: u,
+    bestAsk: m,
+    data: g,
+    domain: f,
+    bidTotal: c,
+    askTotal: l,
+    spread: m - u,
+    bidWalls: q(a),
+    askWalls: q(s)
+  };
+}
+function mt({ bids: i, asks: h, mid: d, height: o = 280, valueFormat: r = (m) => m.toLocaleString(), sizeFormat: c = (m) => m.toLocaleString(void 0, { maximumFractionDigits: 2 }), bidLabel: l = "Bid", askLabel: a = "Ask", spreadLabel: s = "Spread", ariaLabel: u = "Cumulative depth" }) {
+  const m = B().replace(/:/g, ""), n = it(i, h, d);
+  if (!n) return /* @__PURE__ */ t("div", { className: "grid h-72 place-items-center text-graphite", children: "-" });
+  const v = n.bidTotal + n.askTotal, b = v > 0 ? n.bidTotal / v : 0.5, y = 1 - b;
+  return /* @__PURE__ */ p("div", { role: "img", "aria-label": u, className: "flex min-w-0 flex-col", style: { height: o }, children: [
+    /* @__PURE__ */ p("div", { className: "mb-2 shrink-0 rounded-lg border border-border/70 bg-surface-muted/55 px-3 py-2", children: [
+      /* @__PURE__ */ p("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2", children: [
+        /* @__PURE__ */ p("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ p("span", { className: "inline-flex items-center gap-1.5 text-micro uppercase tracking-[0.04em] text-graphite", children: [
+            /* @__PURE__ */ t("span", { className: "size-1.5 rounded-full bg-up shadow-[0_0_8px_var(--color-up)]", "aria-hidden": !0 }),
+            l
+          ] }),
+          /* @__PURE__ */ p("div", { className: "mt-0.5 flex min-w-0 items-baseline gap-1.5 font-data tabular-nums", children: [
+            /* @__PURE__ */ t("strong", { className: "truncate text-data text-up", children: r(n.bestBid) }),
+            /* @__PURE__ */ t("span", { className: "truncate text-micro text-graphite", children: c(n.bidTotal) })
+          ] })
+        ] }),
+        /* @__PURE__ */ p("div", { className: "min-w-[6.75rem] rounded-md bg-surface-raised/80 px-2.5 py-1 text-center shadow-subtle ring-1 ring-border/70", children: [
+          /* @__PURE__ */ t("span", { className: "block text-micro uppercase tracking-[0.04em] text-graphite", children: s }),
+          /* @__PURE__ */ t("strong", { className: "mt-0.5 block font-data text-caption tabular-nums text-ink", children: r(n.spread) })
+        ] }),
+        /* @__PURE__ */ p("div", { className: "min-w-0 text-right", children: [
+          /* @__PURE__ */ p("span", { className: "inline-flex items-center gap-1.5 text-micro uppercase tracking-[0.04em] text-graphite", children: [
+            a,
+            /* @__PURE__ */ t("span", { className: "size-1.5 rounded-full bg-down shadow-[0_0_8px_var(--color-down)]", "aria-hidden": !0 })
+          ] }),
+          /* @__PURE__ */ p("div", { className: "mt-0.5 flex min-w-0 items-baseline justify-end gap-1.5 font-data tabular-nums", children: [
+            /* @__PURE__ */ t("span", { className: "truncate text-micro text-graphite", children: c(n.askTotal) }),
+            /* @__PURE__ */ t("strong", { className: "truncate text-data text-down", children: r(n.bestAsk) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ p("div", { "data-testid": "depth-imbalance", className: "mt-2 grid h-1.5 gap-0.5 overflow-hidden rounded-indicator bg-surface-canvas", style: { gridTemplateColumns: `${b}fr ${y}fr` }, "aria-hidden": !0, children: [
+        /* @__PURE__ */ t("span", { className: "rounded-l-indicator bg-up" }),
+        /* @__PURE__ */ t("span", { className: "rounded-r-indicator bg-down" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "min-h-0 flex-1 overflow-hidden rounded-lg bg-[radial-gradient(circle_at_50%_0,var(--color-surface-muted),transparent_52%)] ring-1 ring-border/40", children: /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ p(X, { data: n.data, margin: { top: 12, right: 8, left: 8, bottom: 2 }, accessibilityLayer: !1, tabIndex: -1, className: "outline-none", children: [
+      /* @__PURE__ */ p("defs", { children: [
+        /* @__PURE__ */ p("linearGradient", { id: `${m}-bid`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ t("stop", { offset: "0%", stopColor: e.up, stopOpacity: 0.5 }),
+          /* @__PURE__ */ t("stop", { offset: "55%", stopColor: e.up, stopOpacity: 0.16 }),
+          /* @__PURE__ */ t("stop", { offset: "100%", stopColor: e.up, stopOpacity: 0.025 })
+        ] }),
+        /* @__PURE__ */ p("linearGradient", { id: `${m}-ask`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ t("stop", { offset: "0%", stopColor: e.down, stopOpacity: 0.5 }),
+          /* @__PURE__ */ t("stop", { offset: "55%", stopColor: e.down, stopOpacity: 0.16 }),
+          /* @__PURE__ */ t("stop", { offset: "100%", stopColor: e.down, stopOpacity: 0.025 })
+        ] })
+      ] }),
+      /* @__PURE__ */ t(T, { ...F }),
+      /* @__PURE__ */ t(_, { dataKey: "price", type: "number", domain: n.domain, allowDataOverflow: !0, ...k, tickFormatter: r, minTickGap: 52 }),
+      /* @__PURE__ */ t($, { orientation: "right", ...k, width: 58, tickFormatter: (f) => c(Number(f)) }),
+      /* @__PURE__ */ t(V, { x1: n.bestBid, x2: n.bestAsk, fill: e.ink, fillOpacity: 0.055, strokeOpacity: 0 }),
+      /* @__PURE__ */ t(A, { x: n.bestBid, stroke: e.up, strokeOpacity: 0.32, strokeDasharray: "2 4" }),
+      /* @__PURE__ */ t(A, { x: n.bestAsk, stroke: e.down, strokeOpacity: 0.32, strokeDasharray: "2 4" }),
+      /* @__PURE__ */ t(A, { x: n.center, stroke: e.ink, strokeOpacity: 0.66, strokeDasharray: "3 3" }),
+      /* @__PURE__ */ t(D, { content: /* @__PURE__ */ t(z, { labelFormat: (f) => r(Number(f)), valueFormat: (f) => c(Number(f)) }) }),
+      /* @__PURE__ */ t(R, { type: "stepAfter", dataKey: "bid", name: l, stroke: e.up, strokeWidth: 2, fill: `url(#${m}-bid)`, dot: !1, activeDot: { r: 3, strokeWidth: 1, stroke: e.surface, fill: e.up }, connectNulls: !1, isAnimationActive: !1 }),
+      /* @__PURE__ */ t(R, { type: "stepBefore", dataKey: "ask", name: a, stroke: e.down, strokeWidth: 2, fill: `url(#${m}-ask)`, dot: !1, activeDot: { r: 3, strokeWidth: 1, stroke: e.surface, fill: e.down }, connectNulls: !1, isAnimationActive: !1 }),
+      n.bidWalls.map((f) => /* @__PURE__ */ t(U, { x: f.price, y: f.bid, r: 2.75, fill: e.up, stroke: e.surface, strokeWidth: 1 }, `bid-wall-${f.price}`)),
+      n.askWalls.map((f) => /* @__PURE__ */ t(U, { x: f.price, y: f.ask, r: 2.75, fill: e.down, stroke: e.surface, strokeWidth: 1 }, `ask-wall-${f.price}`))
+    ] }) }) })
+  ] });
+}
+function ht({
+  data: i,
+  positiveLabel: h,
+  negativeLabel: d,
+  positiveTone: o = "up",
+  negativeTone: r = "down",
+  orientation: c = "vertical",
+  numericAxis: l = !1,
+  reference: a,
+  height: s = 320,
+  axisFormat: u = String,
+  valueFormat: m = String,
+  ariaLabel: n
+}) {
+  const v = B().replace(/:/g, ""), b = c === "horizontal", y = o === "down" ? e.down : o === "blue" ? e.blue : e.up, f = r === "up" ? e.up : r === "blue" ? e.blue : e.down, g = Math.max(1, ...i.flatMap((w) => [Math.abs(w.positive), Math.abs(w.negative)])) * 1.08, x = [-g, -g / 2, 0, g / 2, g], M = i.map((w) => ({
+    ...w,
+    axis: l ? Number(w.label) : w.label,
+    positive: Math.abs(w.positive),
+    negative: -Math.abs(w.negative)
+  })), O = {
+    ...k,
+    domain: [-g, g],
+    ticks: x,
+    tickFormatter: (w) => m(Math.abs(w))
+  }, I = {
+    ...k,
+    dataKey: "axis",
+    tickFormatter: u
+  };
+  return /* @__PURE__ */ t("div", { role: n ? "img" : void 0, "aria-label": n, style: { height: s }, className: "w-full min-w-0 overflow-visible [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none", children: /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ p(E, { data: M, layout: b ? "vertical" : "horizontal", stackOffset: "sign", margin: { top: 12, right: 12, left: 8, bottom: 2 }, accessibilityLayer: !1, tabIndex: -1, children: [
+    /* @__PURE__ */ p("defs", { children: [
+      /* @__PURE__ */ p("linearGradient", { id: `${v}-positive-v`, x1: "0", y1: "1", x2: "0", y2: "0", children: [
+        /* @__PURE__ */ t("stop", { offset: "0%", stopColor: y, stopOpacity: 0.35 }),
+        /* @__PURE__ */ t("stop", { offset: "100%", stopColor: y, stopOpacity: 0.92 })
+      ] }),
+      /* @__PURE__ */ p("linearGradient", { id: `${v}-negative-v`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ t("stop", { offset: "0%", stopColor: f, stopOpacity: 0.35 }),
+        /* @__PURE__ */ t("stop", { offset: "100%", stopColor: f, stopOpacity: 0.92 })
+      ] }),
+      /* @__PURE__ */ p("linearGradient", { id: `${v}-positive-h`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+        /* @__PURE__ */ t("stop", { offset: "0%", stopColor: y, stopOpacity: 0.35 }),
+        /* @__PURE__ */ t("stop", { offset: "100%", stopColor: y, stopOpacity: 0.92 })
+      ] }),
+      /* @__PURE__ */ p("linearGradient", { id: `${v}-negative-h`, x1: "1", y1: "0", x2: "0", y2: "0", children: [
+        /* @__PURE__ */ t("stop", { offset: "0%", stopColor: f, stopOpacity: 0.35 }),
+        /* @__PURE__ */ t("stop", { offset: "100%", stopColor: f, stopOpacity: 0.92 })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(T, { ...F, vertical: b, horizontal: !b }),
+    b ? /* @__PURE__ */ p(L, { children: [
+      /* @__PURE__ */ t(_, { type: "number", ...O }),
+      /* @__PURE__ */ t($, { type: "category", width: 84, ...I }),
+      /* @__PURE__ */ t(A, { x: 0, stroke: e.axis }),
+      a && /* @__PURE__ */ t(A, { y: l ? Number(a.value) : a.value, stroke: e.warning, strokeWidth: 1.5, strokeDasharray: "5 3", label: { value: a.label, position: "insideTopRight", fill: e.warning, fontSize: 10, fontFamily: e.font } })
+    ] }) : /* @__PURE__ */ p(L, { children: [
+      /* @__PURE__ */ t(_, { type: l ? "number" : "category", domain: l ? ["dataMin", "dataMax"] : void 0, ...I, minTickGap: 28 }),
+      /* @__PURE__ */ t($, { type: "number", width: 62, ...O }),
+      /* @__PURE__ */ t(A, { y: 0, stroke: e.axis }),
+      a && /* @__PURE__ */ t(A, { x: l ? Number(a.value) : a.value, stroke: e.warning, strokeWidth: 1.5, strokeDasharray: "5 3", label: { value: a.label, position: "insideTop", fill: e.warning, fontSize: 10, fontFamily: e.font } })
+    ] }),
+    /* @__PURE__ */ t(D, { cursor: { fill: e.dove, fillOpacity: 0.08 }, content: /* @__PURE__ */ t(z, { valueFormat: (w) => m(Math.abs(Number(w))), labelFormat: u }) }),
+    /* @__PURE__ */ t(K, { dataKey: "positive", name: h, fill: `url(#${v}-positive-${b ? "h" : "v"})`, stackId: "direction", maxBarSize: b ? 24 : 18, radius: b ? [0, 4, 4, 0] : [4, 4, 0, 0], isAnimationActive: !1 }),
+    /* @__PURE__ */ t(K, { dataKey: "negative", name: d, fill: `url(#${v}-negative-${b ? "h" : "v"})`, stackId: "direction", maxBarSize: b ? 24 : 18, radius: b ? [4, 0, 0, 4] : [0, 0, 4, 4], isAnimationActive: !1 })
+  ] }) }) });
+}
+function pt({ data: i, primaryLabel: h, secondaryLabel: d, primaryFormat: o = String, secondaryFormat: r = String, labelFormat: c = String, height: l = 320, ariaLabel: a }) {
+  const s = B().replace(/:/g, ""), u = G(i.map((n) => n.primary), !1), m = G(i.map((n) => n.secondary), !1);
+  return /* @__PURE__ */ t("div", { role: a ? "img" : void 0, "aria-label": a, style: { height: l }, className: "w-full min-w-0 overflow-visible [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none", children: /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ p(E, { data: i, margin: { top: 10, right: 8, left: 2, bottom: 0 }, accessibilityLayer: !1, tabIndex: -1, children: [
+    /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ p("linearGradient", { id: `${s}-primary`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ t("stop", { offset: "0%", stopColor: e.up, stopOpacity: 0.22 }),
+      /* @__PURE__ */ t("stop", { offset: "100%", stopColor: e.up, stopOpacity: 0.02 })
+    ] }) }),
+    /* @__PURE__ */ t(T, { ...F }),
+    /* @__PURE__ */ t(_, { dataKey: "label", type: "number", scale: "time", domain: ["dataMin", "dataMax"], ...k, tickFormatter: c, minTickGap: 64 }),
+    /* @__PURE__ */ t($, { yAxisId: "primary", ...k, width: W(u, o), tickFormatter: o, domain: u }),
+    /* @__PURE__ */ t($, { yAxisId: "secondary", orientation: "right", ...k, width: W(m, r), tickFormatter: r, domain: m }),
+    /* @__PURE__ */ t(D, { content: /* @__PURE__ */ t(z, { labelFormat: c, valueFormat: (n, v) => v === d ? r(n) : o(n) }) }),
+    /* @__PURE__ */ t(R, { yAxisId: "primary", type: "monotone", dataKey: "primary", name: h, stroke: e.up, strokeWidth: 1.75, fill: `url(#${s}-primary)`, dot: !1, activeDot: { r: 3 }, isAnimationActive: !1 }),
+    /* @__PURE__ */ t(J, { yAxisId: "secondary", type: "monotone", dataKey: "secondary", name: d, stroke: e.blue, strokeWidth: 1.75, dot: !1, activeDot: { r: 3 }, isAnimationActive: !1 })
+  ] }) }) });
+}
+function ft({ data: i, primaryLabel: h, secondaryLabel: d, primaryFormat: o = String, secondaryFormat: r = String, labelFormat: c = String, height: l = 320, ariaLabel: a }) {
+  const s = G(i.map((m) => m.primary), !0), u = G(i.map((m) => m.secondary), !0);
+  return /* @__PURE__ */ t("div", { role: a ? "img" : void 0, "aria-label": a, style: { height: l }, className: "w-full min-w-0 overflow-visible [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none", children: /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ p(E, { data: i, margin: { top: 10, right: 8, left: 2, bottom: 0 }, accessibilityLayer: !1, tabIndex: -1, children: [
+    /* @__PURE__ */ t(T, { ...F }),
+    /* @__PURE__ */ t(_, { dataKey: "label", ...k, tickFormatter: c }),
+    /* @__PURE__ */ t($, { yAxisId: "primary", ...k, width: W(s, o), tickFormatter: o, domain: s }),
+    /* @__PURE__ */ t($, { yAxisId: "secondary", orientation: "right", ...k, width: W(u, r), tickFormatter: r, domain: u }),
+    /* @__PURE__ */ t(D, { cursor: { fill: e.dove, fillOpacity: 0.08 }, content: /* @__PURE__ */ t(z, { labelFormat: c, valueFormat: (m, n) => n === d ? r(m) : o(m) }) }),
+    /* @__PURE__ */ t(K, { yAxisId: "primary", dataKey: "primary", name: h, fill: e.blue, fillOpacity: 0.78, maxBarSize: 32, radius: [4, 4, 0, 0], isAnimationActive: !1 }),
+    /* @__PURE__ */ t(K, { yAxisId: "secondary", dataKey: "secondary", name: d, fill: e.up, fillOpacity: 0.78, maxBarSize: 32, radius: [4, 4, 0, 0], isAnimationActive: !1 })
+  ] }) }) });
+}
+function ut({ data: i, primaryLabel: h, secondaryLabel: d, valueFormat: o = String, labelFormat: r = String, height: c = 320, ariaLabel: l }) {
+  const a = B().replace(/:/g, ""), s = Math.max(1, ...i.flatMap((u) => [u.primary, u.secondary])) * 1.08;
+  return /* @__PURE__ */ t("div", { role: l ? "img" : void 0, "aria-label": l, style: { height: c }, className: "w-full min-w-0 overflow-visible [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none", children: /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ p(E, { data: i, margin: { top: 10, right: 8, left: 2, bottom: 0 }, accessibilityLayer: !1, tabIndex: -1, children: [
+    /* @__PURE__ */ p("defs", { children: [
+      /* @__PURE__ */ p("linearGradient", { id: `${a}-primary`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ t("stop", { offset: "0%", stopColor: e.up, stopOpacity: 0.9 }),
+        /* @__PURE__ */ t("stop", { offset: "100%", stopColor: e.up, stopOpacity: 0.34 })
+      ] }),
+      /* @__PURE__ */ p("linearGradient", { id: `${a}-secondary`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ t("stop", { offset: "0%", stopColor: e.down, stopOpacity: 0.9 }),
+        /* @__PURE__ */ t("stop", { offset: "100%", stopColor: e.down, stopOpacity: 0.34 })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(T, { ...F }),
+    /* @__PURE__ */ t(_, { dataKey: "label", ...k, tickFormatter: r }),
+    /* @__PURE__ */ t($, { ...k, width: W([0, s], o), tickFormatter: o, domain: [0, s] }),
+    /* @__PURE__ */ t(D, { cursor: { fill: e.dove, fillOpacity: 0.08 }, content: /* @__PURE__ */ t(z, { labelFormat: r, valueFormat: o }) }),
+    /* @__PURE__ */ t(K, { dataKey: "primary", name: h, fill: `url(#${a}-primary)`, maxBarSize: 32, radius: [4, 4, 0, 0], isAnimationActive: !1 }),
+    /* @__PURE__ */ t(K, { dataKey: "secondary", name: d, fill: `url(#${a}-secondary)`, maxBarSize: 32, radius: [4, 4, 0, 0], isAnimationActive: !1 })
+  ] }) }) });
+}
+function Q({ markers: i }) {
+  return i.map((h) => /* @__PURE__ */ t(
+    U,
+    {
+      x: h.timestamp,
+      y: h.value,
+      r: 2.75,
+      fill: e.surface,
+      stroke: h.tone === "down" ? e.down : e.up,
+      strokeWidth: 1.6,
+      ifOverflow: "hidden"
+    },
+    h.id
+  ));
+}
+function W(i, h) {
+  const d = [i[0], i[1], (i[0] + i[1]) / 2];
+  let o = 4;
+  for (const r of d)
+    Number.isFinite(r) && (o = Math.max(o, String(h(r)).length));
+  return Math.min(120, Math.max(84, Math.round(o * 8.2) + 24));
+}
+function G(i, h) {
+  if (!i.length) return [0, 1];
+  const d = Math.min(...i), o = Math.max(...i);
+  if (!h) {
+    const u = Math.max(o - d, Math.abs(o) * 0.02, 1) * 0.12;
+    return [d - u, o + u];
+  }
+  const r = Math.min(0, d), c = Math.max(0, o), l = c - r, a = Math.max(1, l > 0 ? l * 0.12 : Math.abs(c || r) * 0.1);
+  return [r >= 0 ? 0 : r - a, c + a];
+}
+function yt({
+  data: i,
+  height: h = 280,
+  name: d = "Value",
+  valueFormat: o = String,
+  timestampFormat: r = String,
+  tooltipContent: c,
+  markers: l = [],
+  tone: a = "signed",
+  referenceValue: s,
+  includeZero: u = !0,
+  showLastDot: m = !1,
+  onActiveValueChange: n,
+  testId: v,
+  ariaLabel: b
+}) {
+  const y = B().replace(/:/g, ""), f = [...i.map((N) => N.value), s].filter((N) => typeof N == "number" && Number.isFinite(N)), g = G(f, u), x = g[0], M = g[1], O = x >= 0 ? 1 : M <= 0 ? 0 : M / (M - x || 1), I = Math.max(...f, 0) - Math.min(...f, 0), w = u && i.length > 0 && Math.abs(i[0].value) <= Math.max(1, Math.abs(I) * 5e-3), P = W(g, o);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": v,
+      role: b ? "img" : void 0,
+      "aria-label": b,
+      style: { height: h },
+      className: "w-full min-w-0 overflow-visible [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:overflow-visible [&_.recharts-wrapper]:outline-none [&_.recharts-yAxis_.recharts-cartesian-axis-tick-value]:overflow-visible",
+      children: /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ p(
+        X,
+        {
+          data: i,
+          margin: { top: 8, right: 8, left: 2, bottom: 0 },
+          accessibilityLayer: !1,
+          tabIndex: -1,
+          onMouseMove: (N) => {
+            if (!n) return;
+            const S = N == null ? void 0 : N.activeTooltipIndex, j = typeof S == "number" ? S : Number(S);
+            n(Number.isFinite(j) && i[j] ? i[j].value : null);
+          },
+          onMouseLeave: () => n == null ? void 0 : n(null),
+          children: [
+            /* @__PURE__ */ p("defs", { children: [
+              /* @__PURE__ */ p("linearGradient", { id: `${y}-signed-stroke`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ t("stop", { offset: 0, stopColor: e.up }),
+                /* @__PURE__ */ t("stop", { offset: O, stopColor: e.up }),
+                /* @__PURE__ */ t("stop", { offset: O, stopColor: e.down }),
+                /* @__PURE__ */ t("stop", { offset: 1, stopColor: e.down })
+              ] }),
+              /* @__PURE__ */ p("linearGradient", { id: `${y}-signed-fill`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ t("stop", { offset: 0, stopColor: e.up, stopOpacity: 0.3 }),
+                /* @__PURE__ */ t("stop", { offset: O, stopColor: e.up, stopOpacity: 0.08 }),
+                /* @__PURE__ */ t("stop", { offset: O, stopColor: e.down, stopOpacity: 0.08 }),
+                /* @__PURE__ */ t("stop", { offset: 1, stopColor: e.down, stopOpacity: 0.3 })
+              ] }),
+              /* @__PURE__ */ t("pattern", { id: `${y}-signed-hatch`, patternUnits: "userSpaceOnUse", width: 5, height: 5, patternTransform: "rotate(45)", children: /* @__PURE__ */ t("line", { x1: 0, y1: 0, x2: 0, y2: 5, stroke: e.ink, strokeWidth: 1.1, strokeOpacity: 0.14 }) })
+            ] }),
+            /* @__PURE__ */ t(T, { ...F }),
+            /* @__PURE__ */ t(_, { dataKey: "timestamp", type: "number", scale: "time", domain: ["dataMin", "dataMax"], ...k, tickFormatter: r, minTickGap: 64 }),
+            /* @__PURE__ */ t(
+              $,
+              {
+                ...k,
+                domain: g,
+                width: P,
+                tickFormatter: o,
+                tick: { ...k.tick, width: P },
+                interval: "preserveStartEnd"
+              }
+            ),
+            a === "signed" && u && f.some((N) => N < 0) && /* @__PURE__ */ t(A, { y: 0, stroke: e.axis, strokeDasharray: "3 5" }),
+            s != null && /* @__PURE__ */ t(A, { y: s, stroke: e.axis, strokeDasharray: "3 5" }),
+            /* @__PURE__ */ t(D, { content: c ?? /* @__PURE__ */ t(z, { valueFormat: o, labelFormat: r }) }),
+            /* @__PURE__ */ t(
+              R,
+              {
+                type: "monotone",
+                dataKey: "value",
+                name: d,
+                stroke: a === "blue" ? e.blue : a === "up" ? e.up : a === "warning" ? e.warning : `url(#${y}-signed-stroke)`,
+                strokeWidth: 1.8,
+                fill: a === "blue" ? e.sky : a === "up" ? e.up : a === "warning" ? e.warning : `url(#${y}-signed-fill)`,
+                fillOpacity: a === "blue" ? 0.45 : a === "up" || a === "warning" ? 0.1 : 1,
+                dot: (N) => {
+                  var H;
+                  const S = N.index ?? -1;
+                  if (!(N.cx != null && N.cy != null && (m && S === i.length - 1 || w && S === 0 && a === "signed"))) return /* @__PURE__ */ t("g", {}, `signed-dot-${S}`);
+                  const Z = ((H = i[S]) == null ? void 0 : H.value) ?? 0;
+                  return /* @__PURE__ */ t(
+                    "circle",
+                    {
+                      cx: N.cx,
+                      cy: N.cy,
+                      r: S === 0 ? 3 : 4,
+                      fill: Z < 0 ? e.down : e.up,
+                      stroke: e.surface,
+                      strokeWidth: 1
+                    },
+                    S === 0 ? "signed-origin-dot" : "signed-last-dot"
+                  );
+                },
+                activeDot: { r: 3, stroke: e.surface, strokeWidth: 1.5 },
+                isAnimationActive: !1
+              }
+            ),
+            a === "signed" && /* @__PURE__ */ t(R, { type: "monotone", dataKey: "value", stroke: "none", fill: `url(#${y}-signed-hatch)`, dot: !1, activeDot: !1, isAnimationActive: !1, legendType: "none" }),
+            /* @__PURE__ */ t(Q, { markers: l })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function at(i, h = !1) {
+  const d = /* @__PURE__ */ new Set();
+  for (const a of i) {
+    if (!a.id || ["timestamp", "value", "__proto__", "constructor", "prototype"].includes(a.id) || d.has(a.id))
+      throw new RangeError("Series IDs must be unique and cannot use reserved data keys");
+    d.add(a.id);
+  }
+  const o = [...new Set(i.flatMap((a) => a.data.map((s) => s.timestamp)))].sort((a, s) => a - s), r = i.map((a) => a.data.slice().sort((s, u) => s.timestamp - u.timestamp)), c = r.map(() => 0), l = r.map(() => {
+  });
+  return o.map((a) => {
+    const s = { timestamp: a, value: 0 };
+    return r.forEach((u, m) => {
+      for (; c[m] < u.length && u[c[m]].timestamp <= a; )
+        l[m] = u[c[m]].value, c[m] += 1;
+      l[m] != null ? (s[i[m].id] = l[m], s.value += l[m]) : h && (s[i[m].id] = 0);
+    }), s;
+  });
+}
+function gt({
+  series: i,
+  height: h = 280,
+  valueFormat: d = String,
+  timestampFormat: o = String,
+  tooltipContent: r,
+  markers: c = [],
+  includeZero: l = !0,
+  onActiveValueChange: a,
+  testId: s,
+  ariaLabel: u
+}) {
+  const m = at(i, l), n = i.flatMap((y) => y.data.map((f) => f.value)).filter(Number.isFinite), v = G(n, l), b = W(v, d);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": s,
+      role: u ? "img" : void 0,
+      "aria-label": u,
+      style: { height: h },
+      className: "w-full min-w-0 overflow-visible [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:overflow-visible [&_.recharts-wrapper]:outline-none",
+      children: /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ p(
+        tt,
+        {
+          data: m,
+          margin: { top: 8, right: 8, left: 2, bottom: 0 },
+          accessibilityLayer: !1,
+          tabIndex: -1,
+          onMouseMove: (y) => {
+            if (!a) return;
+            const f = y == null ? void 0 : y.activeTooltipIndex, g = typeof f == "number" ? f : Number(f);
+            a(Number.isFinite(g) && m[g] ? m[g].value : null);
+          },
+          onMouseLeave: () => a == null ? void 0 : a(null),
+          children: [
+            /* @__PURE__ */ t(T, { ...F }),
+            /* @__PURE__ */ t(_, { dataKey: "timestamp", type: "number", scale: "time", domain: ["dataMin", "dataMax"], ...k, tickFormatter: o, minTickGap: 64 }),
+            /* @__PURE__ */ t($, { ...k, domain: v, width: b, tickFormatter: d, tick: { ...k.tick, width: b }, interval: "preserveStartEnd" }),
+            l && n.some((y) => y < 0) && /* @__PURE__ */ t(A, { y: 0, stroke: e.axis, strokeDasharray: "3 5" }),
+            /* @__PURE__ */ t(D, { content: r ?? /* @__PURE__ */ t(z, { valueFormat: d, labelFormat: o }) }),
+            i.map((y, f) => /* @__PURE__ */ t(
+              J,
+              {
+                type: "monotone",
+                dataKey: y.id,
+                name: y.name,
+                stroke: y.color ?? Y[f % Y.length],
+                strokeWidth: 2,
+                dot: !1,
+                activeDot: { r: 3, stroke: e.surface, strokeWidth: 1.5 },
+                connectNulls: !1,
+                isAnimationActive: !1
+              },
+              y.id
+            )),
+            /* @__PURE__ */ t(Q, { markers: c })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function xt({
+  data: i,
+  height: h = 280,
+  name: d = "Value",
+  valueFormat: o = String,
+  timestampFormat: r = String,
+  tooltipContent: c,
+  onActiveValueChange: l,
+  testId: a,
+  ariaLabel: s
+}) {
+  const u = B().replace(/:/g, ""), m = i.map((g) => g.value).filter(Number.isFinite), n = Math.max(0, ...m), v = Math.max(0.05, n > 0 ? n * 0.12 : 0.2), b = [0, n + v], y = W(b, o), f = i.map((g) => ({
+    timestamp: g.timestamp,
+    value: Math.max(0, Number.isFinite(g.value) ? g.value : 0)
+  }));
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": a,
+      role: s ? "img" : void 0,
+      "aria-label": s,
+      style: { height: h },
+      className: "w-full min-w-0 overflow-visible [&_.recharts-surface]:overflow-visible [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:overflow-visible [&_.recharts-wrapper]:outline-none",
+      children: /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ p(
+        E,
+        {
+          data: f,
+          margin: { top: 8, right: 8, left: 2, bottom: 0 },
+          accessibilityLayer: !1,
+          tabIndex: -1,
+          onMouseMove: (g) => {
+            if (!l) return;
+            const x = g == null ? void 0 : g.activeTooltipIndex, M = typeof x == "number" ? x : Number(x);
+            l(Number.isFinite(M) && f[M] ? f[M].value : null);
+          },
+          onMouseLeave: () => l == null ? void 0 : l(null),
+          children: [
+            /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ p("pattern", { id: `${u}-bar-hatch`, patternUnits: "userSpaceOnUse", width: 6, height: 6, patternTransform: "rotate(45)", children: [
+              /* @__PURE__ */ t("rect", { width: 6, height: 6, fill: e.sky }),
+              /* @__PURE__ */ t("line", { x1: 0, y1: 0, x2: 0, y2: 6, stroke: e.blue, strokeWidth: 1.4, strokeOpacity: 0.78 }),
+              /* @__PURE__ */ t("line", { x1: 3, y1: 0, x2: 3, y2: 6, stroke: e.ink, strokeWidth: 0.9, strokeOpacity: 0.14 })
+            ] }) }),
+            /* @__PURE__ */ t(T, { ...F }),
+            /* @__PURE__ */ t(_, { dataKey: "timestamp", type: "number", scale: "time", domain: ["dataMin", "dataMax"], ...k, tickFormatter: r, minTickGap: 64 }),
+            /* @__PURE__ */ t(
+              $,
+              {
+                ...k,
+                domain: b,
+                width: y,
+                tickFormatter: o,
+                tick: { ...k.tick, width: y },
+                interval: "preserveStartEnd"
+              }
+            ),
+            /* @__PURE__ */ t(D, { content: c ?? /* @__PURE__ */ t(z, { valueFormat: o, labelFormat: r }), cursor: { fill: e.dove, fillOpacity: 0.12 } }),
+            /* @__PURE__ */ t(
+              K,
+              {
+                dataKey: "value",
+                name: d,
+                fill: `url(#${u}-bar-hatch)`,
+                maxBarSize: 36,
+                radius: [3, 3, 0, 0],
+                isAnimationActive: !1
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+function rt(i) {
+  const h = `weighted-heatmap-${B()}`, { x: d, y: o, width: r, height: c, name: l, depth: a } = i;
+  if (a === 0) return null;
+  const s = Number.isFinite(i.change) ? Number(i.change) : 0, u = Number.isFinite(i.value) ? Number(i.value) : 0, m = Math.max(1e-6, Number(i.intensityMax) || 10), n = typeof i.valueFormat == "function" ? i.valueFormat : String, v = typeof i.changeFormat == "function" ? i.changeFormat : (S) => `${S >= 0 ? "+" : ""}${S.toFixed(2)}%`, b = s >= 0, y = n(u), f = v(s), g = i, x = typeof i.hrefForItem == "function" ? i.hrefForItem(g) : void 0, M = typeof i.itemAriaLabel == "function" ? i.itemAriaLabel(g) : `${l ?? ""} · ${y} · ${f}`, O = r > 72 && c > 58, I = r > 44 && c > 28, w = O ? 16 : I ? 12 : 0, P = w > 0 && typeof i.renderIcon == "function" ? i.renderIcon(g, w) : void 0, N = /* @__PURE__ */ p(L, { children: [
+    /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: h, children: /* @__PURE__ */ t("rect", { x: d + 3, y: o + 3, width: Math.max(0, r - 6), height: Math.max(0, c - 6), rx: 3 }) }) }),
+    /* @__PURE__ */ t(
+      "rect",
+      {
+        x: d + 1,
+        y: o + 1,
+        width: Math.max(0, r - 2),
+        height: Math.max(0, c - 2),
+        rx: 4,
+        fill: b ? e.up : e.down,
+        fillOpacity: Math.min(0.9, 0.52 + Math.abs(s) / m * 0.38),
+        className: "origin-center transition-transform duration-150 motion-reduce:transition-none",
+        style: { transformBox: "fill-box" },
+        children: /* @__PURE__ */ t("title", { children: `${l ?? ""} · ${y} · ${f}` })
+      }
+    ),
+    P && /* @__PURE__ */ t("foreignObject", { clipPath: `url(#${h})`, x: d + 7, y: o + 7, width: w, height: w, className: "pointer-events-none overflow-hidden", children: /* @__PURE__ */ t("div", { style: { width: w, height: w }, className: "grid place-items-center", children: P }) }),
+    O ? /* @__PURE__ */ p(L, { children: [
+      /* @__PURE__ */ t("text", { clipPath: `url(#${h})`, x: d + r / 2, y: o + c / 2 - 13, textAnchor: "middle", fill: "var(--color-on-status)", fontFamily: e.font, fontSize: 12, fontWeight: 600, children: l ?? "" }),
+      /* @__PURE__ */ t("text", { clipPath: `url(#${h})`, x: d + r / 2, y: o + c / 2 + 4, textAnchor: "middle", fill: "var(--color-on-status)", fontFamily: e.font, fontSize: 11, children: y }),
+      /* @__PURE__ */ t("text", { clipPath: `url(#${h})`, x: d + r / 2, y: o + c / 2 + 21, textAnchor: "middle", fill: "var(--color-on-status)", fontFamily: e.font, fontSize: 11, children: f })
+    ] }) : I ? /* @__PURE__ */ p(L, { children: [
+      /* @__PURE__ */ t("text", { clipPath: `url(#${h})`, x: d + r / 2, y: o + c / 2 - 3, textAnchor: "middle", fill: "var(--color-on-status)", fontFamily: e.font, fontSize: 11, fontWeight: 600, children: l ?? "" }),
+      /* @__PURE__ */ t("text", { clipPath: `url(#${h})`, x: d + r / 2, y: o + c / 2 + 13, textAnchor: "middle", fill: "var(--color-on-status)", fontFamily: e.font, fontSize: 10, children: f })
+    ] }) : /* @__PURE__ */ t("text", { clipPath: `url(#${h})`, x: d + 4, y: o + Math.min(c - 4, Math.max(11, c / 2 + 3)), fill: "var(--color-on-status)", fontFamily: e.font, fontSize: 9, fontWeight: 600, children: l ?? "" })
+  ] });
+  return x ? /* @__PURE__ */ t("a", { href: x, "aria-label": M, "data-weighted-heatmap-name": l, className: "group outline-none", children: N }) : /* @__PURE__ */ t("g", { "aria-label": M, "data-weighted-heatmap-name": l, className: "group outline-none", children: N });
+}
+function ot({ active: i, payload: h, valueFormat: d, changeFormat: o, valueLabel: r, changeLabel: c, renderIcon: l }) {
+  var u;
+  const a = (u = h == null ? void 0 : h[0]) == null ? void 0 : u.payload, s = (a == null ? void 0 : a.payload) ?? a;
+  return !i || !s || typeof s.name != "string" ? null : /* @__PURE__ */ p("div", { role: "tooltip", className: "min-w-40 rounded-panel border border-border bg-surface-raised px-3 py-2 shadow-pop", style: { fontFamily: e.font }, children: [
+    /* @__PURE__ */ p("div", { className: "mb-2 flex items-center gap-2 text-body-sm font-[600] text-ink", children: [
+      typeof l == "function" && l(s, 16),
+      /* @__PURE__ */ t("span", { children: s.name })
+    ] }),
+    /* @__PURE__ */ p("div", { className: "flex items-center justify-between gap-4 text-caption", children: [
+      /* @__PURE__ */ t("span", { className: "text-graphite", children: r }),
+      /* @__PURE__ */ t("span", { className: "font-data tabular-nums text-ink", children: d(s.value) })
+    ] }),
+    /* @__PURE__ */ p("div", { className: "mt-1 flex items-center justify-between gap-4 text-caption", children: [
+      /* @__PURE__ */ t("span", { className: "text-graphite", children: c }),
+      /* @__PURE__ */ t("span", { className: s.change >= 0 ? "text-up" : "text-down", children: o(s.change) })
+    ] })
+  ] });
+}
+function bt({ data: i, height: h = 300, ariaLabel: d = "Weighted heatmap", valueFormat: o = String, changeFormat: r = (n) => `${n >= 0 ? "+" : ""}${n.toFixed(2)}%`, intensityMax: c = 10, valueLabel: l = "Value", changeLabel: a = "Change", renderIcon: s, hrefForItem: u, itemAriaLabel: m }) {
+  return /* @__PURE__ */ p("div", { "data-weighted-heatmap-root": !0, role: "img", "aria-label": d, className: "h-full w-full [&_.recharts-surface]:outline-none", style: { height: h }, children: [
+    /* @__PURE__ */ t("style", { children: `
+        [data-weighted-heatmap-root] [data-weighted-heatmap-name]:hover > rect,
+        [data-weighted-heatmap-root] [data-weighted-heatmap-name]:focus-visible > rect {
+          transform: scale(1.015);
+          stroke: var(--color-rust);
+          stroke-width: 1.5px;
+        }
+      ` }),
+    /* @__PURE__ */ t(C, { width: "100%", height: "100%", children: /* @__PURE__ */ t(et, { data: i, dataKey: "value", nameKey: "name", content: /* @__PURE__ */ t(rt, { valueFormat: o, changeFormat: r, intensityMax: c, renderIcon: s, hrefForItem: u, itemAriaLabel: m }), isAnimationActive: !1, children: /* @__PURE__ */ t(D, { cursor: !1, content: /* @__PURE__ */ t(ot, { valueFormat: o, changeFormat: r, valueLabel: l, changeLabel: a, renderIcon: s }) }) }) })
+  ] });
+}
+export {
+  mt as DepthChart,
+  ht as DivergingBarChart,
+  ft as DualAxisBarChart,
+  pt as DualAxisLineChart,
+  ut as GroupedBarChart,
+  gt as MultiLineChart,
+  yt as SignedAreaChart,
+  xt as TimeBarChart,
+  bt as WeightedHeatmap,
+  at as alignTimeLineSeries,
+  it as buildDepthSeries,
+  W as chartYAxisWidth
+};

package/dist/charts/theme.js

@@ -0,0 +1,35 @@
+const r = {
+  rust: "var(--color-rust)",
+  blue: "var(--color-data-blue)",
+  ink: "var(--color-ink)",
+  ash: "var(--color-ash)",
+  graphite: "var(--color-graphite)",
+  dove: "var(--color-dove)",
+  grid: "var(--color-chart-grid)",
+  axis: "var(--color-chart-axis)",
+  canvas: "var(--color-surface-canvas)",
+  surface: "var(--color-surface-raised)",
+  up: "var(--color-up)",
+  down: "var(--color-down)",
+  warning: "var(--color-warning)",
+  apricot: "var(--color-apricot-wash)",
+  sky: "var(--color-sky-wash)",
+  white: "var(--color-surface-raised)",
+  font: "var(--font-sohne)"
+}, a = ["var(--color-data-1)", "var(--color-data-2)", "var(--color-data-3)", "var(--color-data-4)", "var(--color-data-5)"], o = {
+  tick: { fill: r.graphite, fontSize: 12, fontFamily: r.font },
+  tickLine: !1,
+  axisLine: { stroke: r.axis },
+  tickMargin: 8
+}, c = {
+  stroke: r.grid,
+  strokeOpacity: 1,
+  strokeDasharray: "2 6",
+  vertical: !1
+};
+export {
+  a as CATEGORICAL,
+  r as CHART,
+  o as axisProps,
+  c as gridProps
+};

package/dist/charts/time-combo.js

@@ -0,0 +1,17 @@
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { ResponsiveContainer as c, ComposedChart as h, CartesianGrid as f, XAxis as y, YAxis as C, ReferenceLine as g, Tooltip as k, Bar as A, Line as x } from "recharts";
+import { ChartTooltip as T } from "./chart-tooltip.js";
+import { gridProps as b, axisProps as n, CHART as v, CATEGORICAL as o } from "./theme.js";
+function K({ data: s, series: l, height: d = 320, timestampFormat: r = String, valueFormat: t = String, ariaLabel: m = "Time series comparison" }) {
+  return /* @__PURE__ */ a("div", { role: "img", "aria-label": m, style: { height: d }, className: "w-full min-w-0", children: /* @__PURE__ */ a(c, { width: "100%", height: "100%", children: /* @__PURE__ */ p(h, { data: s, margin: { top: 10, right: 8, left: 4, bottom: 0 }, children: [
+    /* @__PURE__ */ a(f, { ...b }),
+    /* @__PURE__ */ a(y, { dataKey: "timestamp", type: "number", scale: "time", domain: ["dataMin", "dataMax"], ...n, tickFormatter: r, minTickGap: 64 }),
+    /* @__PURE__ */ a(C, { ...n, width: 84, tickFormatter: t }),
+    /* @__PURE__ */ a(g, { y: 0, stroke: v.axis }),
+    /* @__PURE__ */ a(k, { content: /* @__PURE__ */ a(T, { labelFormat: r, valueFormat: t }) }),
+    l.map((i, e) => i.kind === "bar" ? /* @__PURE__ */ a(A, { dataKey: i.id, name: i.name, fill: i.color ?? o[e % o.length], fillOpacity: i.opacity ?? 0.3, maxBarSize: 18, isAnimationActive: !1 }, i.id) : /* @__PURE__ */ a(x, { type: "monotone", dataKey: i.id, name: i.name, stroke: i.color ?? o[e % o.length], strokeOpacity: i.opacity ?? 1, strokeDasharray: i.dashed ? "4 3" : void 0, strokeWidth: 2, dot: !1, isAnimationActive: !1 }, i.id))
+  ] }) }) });
+}
+export {
+  K as TimeComboChart
+};