@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/esm/components/graph/default-config.js

@@ -0,0 +1,138 @@
+import { resolveCSSColor as o } from "../../utils/colors.js";
+const e = {
+  topColor: "rgba(76, 175, 80, 0.56)",
+  bottomColor: "rgba(76, 175, 80, 0.04)",
+  lineColor: "#02c39a",
+  lineWidth: 2
+}, i = {
+  showLabel: !0,
+  color: "#02c39a",
+  labelBackgroundColor: "#02c39a",
+  width: 2
+};
+function t() {
+  const r = o(
+    "hsl(var(--foreground))",
+    "rgb(0, 0, 0)"
+  );
+  return {
+    timeScale: {
+      borderVisible: !0,
+      borderColor: "rgba(224, 227, 235, 0.1)",
+      visible: !0,
+      fixLeftEdge: !0,
+      fixRightEdge: !0,
+      // Preserve visible time range on resize (e.g. when second series is added
+      // and legend appears). Avoids range shrinking to a few days.
+      lockVisibleTimeRangeOnResize: !0
+    },
+    rightPriceScale: {
+      visible: !0,
+      autoScale: !0,
+      alignLabels: !0,
+      borderVisible: !0,
+      borderColor: "rgba(224, 227, 235, 0.1)",
+      entireTextOnly: !1,
+      textColor: r
+    },
+    layout: {
+      background: {
+        color: "transparent"
+      },
+      textColor: r,
+      fontSize: 14
+    },
+    crosshair: {
+      horzLine: {
+        width: 2,
+        color: "rgba(224, 227, 235, 0.1)",
+        style: 0,
+        labelVisible: !1
+      },
+      vertLine: {
+        width: 2,
+        color: "rgba(224, 227, 235, 0.1)",
+        style: 0,
+        labelVisible: !1
+      }
+    },
+    grid: {
+      vertLines: {
+        visible: !1
+      },
+      horzLines: {
+        visible: !1
+      }
+    }
+  };
+}
+function a() {
+  return {
+    topColor: "rgba(76, 175, 80, 0.56)",
+    bottomColor: "rgba(76, 175, 80, 0.04)",
+    lineColor: e.lineColor,
+    lineWidth: 2
+  };
+}
+function s() {
+  return {
+    showLabel: !0,
+    color: e.lineColor,
+    labelBackgroundColor: e.lineColor,
+    width: 2
+  };
+}
+const b = {
+  timeScale: {
+    borderVisible: !0,
+    borderColor: "rgba(224, 227, 235, 0.1)",
+    visible: !0,
+    fixLeftEdge: !0,
+    fixRightEdge: !0
+  },
+  rightPriceScale: {
+    visible: !0,
+    autoScale: !0,
+    alignLabels: !0,
+    borderVisible: !0,
+    borderColor: "rgba(224, 227, 235, 0.1)",
+    entireTextOnly: !1
+  },
+  layout: {
+    background: {
+      color: "transparent"
+    },
+    textColor: "rgb(0, 0, 0)",
+    fontSize: 14
+  },
+  crosshair: {
+    horzLine: {
+      width: 2,
+      color: "rgba(224, 227, 235, 0.1)",
+      style: 0,
+      labelVisible: !1
+    },
+    vertLine: {
+      width: 2,
+      color: "rgba(224, 227, 235, 0.1)",
+      style: 0,
+      labelVisible: !1
+    }
+  },
+  grid: {
+    vertLines: {
+      visible: !1
+    },
+    horzLines: {
+      visible: !1
+    }
+  }
+};
+export {
+  e as DEFAULT_AREA_SERIES,
+  b as DEFAULT_OPTIONS,
+  i as DEFAULT_VERTICAL_LINE,
+  t as getDefaultOptions,
+  a as getDefaultSeries,
+  s as getDefaultVerticalLine
+};

package/dist/esm/components/graph/formatters.js

@@ -0,0 +1,189 @@
+import { TickMarkType as S } from "lightweight-charts";
+import { DateTime as $ } from "luxon";
+import { isBelowDisplayThreshold as x, FORMAT_CONSTANTS as U, toSignificantDigits as H, formatNumberWithSuffix as I } from "../../utils/format-number.js";
+const { MIN_DISPLAY_THRESHOLD: g, MAX_EXPONENTIAL_THRESHOLD: R } = U, V = (t, e, n = "full") => {
+  if (x(t))
+    return e ? `<${g}${e}` : `<${g}`;
+  if (t === 0)
+    return e ? `0${e}` : "0";
+  const a = I(t, {
+    maxExponentialThreshold: R,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: n === "short" ? 1 : 0,
+    format: n,
+    adaptiveDecimals: n === "short"
+  });
+  return e ? `${a}${e}` : a;
+}, X = 2, O = (t, e) => {
+  if (x(t))
+    return e ? `<${g}${e}` : `<${g}`;
+  if (t === 0)
+    return e ? `0${e}` : "0";
+  const n = H(t, X);
+  return e ? `${n}${e}` : n;
+}, P = 4, C = (t) => {
+  if (x(t))
+    return `<${g}`;
+  if (t === 0)
+    return "0";
+  const e = Math.round(t), n = Math.abs(t - e);
+  return n > 0 && n < 0.01 ? t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "") : H(t, P);
+}, w = (t, e) => {
+  if (x(t))
+    return e ? `<${g} ${e}` : `<${g}`;
+  if (t === 0)
+    return e ? `0 ${e}` : "0";
+  const n = Number.isInteger(t), a = Math.abs(t), c = n && a >= 1e3, s = Math.round(t), o = Math.abs(t - s);
+  if (o > 0 && o < 0.01 && !c) {
+    const D = t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "");
+    return e ? `${D} ${e}` : D;
+  }
+  const l = I(t, {
+    maxExponentialThreshold: R,
+    minimumFractionDigits: n ? 0 : 2,
+    maximumFractionDigits: c ? 1 : n ? 0 : 2,
+    format: c ? "short" : "full",
+    adaptiveDecimals: c
+  });
+  return e ? `${l} ${e}` : l;
+}, N = {
+  "%": O,
+  $: V,
+  token: w,
+  none: C
+}, tt = (t) => N[t] || N.token;
+function et(t, e, n = 4) {
+  if (t === 0)
+    return e ? `0 ${e}` : "0";
+  const a = e && Math.abs(t) >= 1e3 ? 0 : n, c = t.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: a
+  });
+  return e ? `${c} ${e}` : c;
+}
+function rt(t, e, n) {
+  const a = n?.yScaleMin;
+  let c = t.length > 0 ? Math.min(...t) : 0, s = t.length > 0 ? Math.max(...t) : 0, o = [];
+  const u = () => {
+    const r = s - c, i = (c + s) / 2;
+    let f = 1, m = "";
+    i >= 1e9 ? (f = 1e9, m = "B") : i >= 1e6 ? (f = 1e6, m = "M") : i >= 1e3 && (f = 1e3, m = "K");
+    const T = r / 10 / f;
+    let M = 1;
+    if (T > 0) {
+      const L = Math.floor(Math.log10(T));
+      M = Math.max(1, -L), M = Math.min(M, 4);
+    }
+    return { scale: f, suffix: m, decimals: M };
+  }, l = (r, i, f) => {
+    const m = i > 1 ? r / i : r, d = Math.abs(m) >= 1 ? 1 : 4;
+    return i > 1 ? `${(r / i).toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: d,
+      useGrouping: !1
+    })}${f}` : r.toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: d,
+      useGrouping: !1
+    });
+  }, D = 0.02, k = (r) => {
+    if (a !== void 0 && r < a) return "";
+    if (r === 0) return "0";
+    const { scale: i, suffix: f, decimals: m } = u(), d = s - c, F = d > 0 ? o.filter(
+      (h) => Math.abs(h) >= d * D
+    ) : o, M = (d > 0 ? d / 10 : 0) * 0.05, L = Math.abs(r) * 1e-10 || 1e-10;
+    if (F.some(
+      (h) => Math.abs(h - r) < L
+    ))
+      return l(r, i, f);
+    if (F.length > 0 && M > 0) {
+      const h = F.reduce(
+        (p, A) => Math.abs(A - r) < Math.abs(p - r) ? A : p
+      );
+      if (Math.abs(r - h) < M)
+        return l(h, i, f);
+    }
+    const G = i > 1 ? r / i : r, E = Math.abs(G) >= 1 ? Math.min(1, m) : m;
+    return i > 1 ? `${(r / i).toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: E,
+      useGrouping: !1
+    })}${f}` : r.toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: E,
+      useGrouping: !1
+    });
+  };
+  return {
+    formatter: (r) => k(r),
+    tickmarksFormatter: (r) => {
+      const i = /* @__PURE__ */ new Set();
+      return r.map((f) => {
+        const m = k(f);
+        return !m || i.has(m) ? "" : (i.add(m), m);
+      });
+    },
+    updateVisibleRange: (r) => {
+      r.length > 0 && (c = Math.min(...r), s = Math.max(...r));
+    },
+    updateLastValues: (r) => {
+      o = [...r];
+    }
+  };
+}
+const b = (t) => $.fromSeconds(Number(t)).toFormat("dd/LL/yyyy HH:mm"), Y = (t) => $.fromSeconds(Number(t)).toFormat("HH:mm"), y = (t, e) => O(Number(t), e), _ = {
+  time: b,
+  "%": y
+};
+function W(t) {
+  const e = /* @__PURE__ */ new Map();
+  return (n, a, c) => {
+    const s = $.fromSeconds(Number(n));
+    let o;
+    if (t === 0)
+      o = s.toFormat("HH:mm");
+    else
+      switch (a) {
+        case S.Year:
+          o = s.toFormat("yyyy");
+          break;
+        case S.Month:
+          o = s.toFormat("MMM yy");
+          break;
+        case S.DayOfMonth:
+          o = t > 365 ? s.toFormat("dd MMM yy") : s.toFormat("dd MMM");
+          break;
+        case S.Time:
+        case S.TimeWithSeconds:
+          o = s.toFormat("HH:mm");
+          break;
+        default:
+          o = s.toFormat("dd MMM");
+      }
+    let u = e.get(a);
+    return u || (u = /* @__PURE__ */ new Set(), e.set(a, u)), u.has(o) ? " " : (u.add(o), o);
+  };
+}
+const z = (t, e) => {
+  if (t === "time" && e && e.length > 0) {
+    const a = $.fromSeconds(Number(e[0].time)), c = $.fromSeconds(
+      Number(e[e.length - 1].time)
+    ), s = a.hasSame(c, "day"), o = s ? 0 : Math.ceil(c.diff(a, "days").days);
+    return {
+      timeFormatter: s ? Y : b,
+      tickMarkFormatter: W(o)
+    };
+  }
+  const n = _[t] || _.time;
+  return {
+    timeFormatter: n,
+    tickMarkFormatter: (a) => n(a, void 0)
+  };
+}, nt = (t, e) => z(t, e).timeFormatter;
+export {
+  rt as createAdaptiveYAxisFormatter,
+  et as formatExactValue,
+  nt as getXFormatter,
+  z as getXFormatters,
+  tt as getYFormatter
+};

package/dist/esm/components/graph/graph-current-value.js

@@ -0,0 +1,28 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+import { getXFormatter as c, formatExactValue as r } from "./formatters.js";
+function u({
+  point: e,
+  xMeasureUnit: m,
+  yMeasureUnit: t,
+  className: s,
+  decimals: o
+}) {
+  const d = c(m)(e.time, m), n = t !== "%" && t !== "$" && t !== "none" ? t : void 0, x = t === "$" ? `$${r(e.value, void 0, o)}` : t === "%" ? `${r(e.value, void 0, o)}%` : r(e.value, n, o);
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(
+        "absolute top-2 left-2 right-2 z-[100] pointer-events-none",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ l("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: x }),
+        /* @__PURE__ */ l("div", { className: "text-xs sm:text-sm font-medium text-muted-foreground whitespace-nowrap overflow-hidden text-ellipsis mt-0.5", children: d })
+      ]
+    }
+  );
+}
+export {
+  u as GraphCurrentValue
+};

package/dist/esm/components/graph/graph-tooltip.js

@@ -0,0 +1,91 @@
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useRef as k, useState as F, useEffect as S } from "react";
+import { cn as z } from "../../utils/cn.js";
+import { getXFormatter as A, formatExactValue as x } from "./formatters.js";
+import { getSeriesColorPalette as B } from "./graph.js";
+function M({
+  points: d,
+  series: v,
+  xMeasureUnit: g,
+  yMeasureUnit: N,
+  className: $,
+  position: t,
+  containerRef: b,
+  decimals: u
+}) {
+  const w = k(null), [f, a] = F(t), C = A(g);
+  S(() => {
+    if (!t) {
+      a(t);
+      return;
+    }
+    const r = b?.current;
+    if (!r) {
+      a(t);
+      return;
+    }
+    const c = w.current;
+    if (!c) {
+      a(t);
+      return;
+    }
+    const o = r.getBoundingClientRect(), i = c.getBoundingClientRect();
+    let n = t.x, e = t.y;
+    const s = i.width, p = i.height, l = 8;
+    n - s / 2 < l ? n = s / 2 + l : n + s / 2 > o.width - l && (n = o.width - s / 2 - l);
+    const y = p + 8;
+    e - y < l ? e = t.y + 20 : e = t.y - y, a({ x: n, y: e });
+  }, [t, b]);
+  const P = f ? {
+    left: `${f.x}px`,
+    top: `${f.y}px`,
+    transform: "translate(-50%, 0)"
+    // Center horizontally
+  } : {};
+  if (d.size === 0)
+    return null;
+  const R = Array.from(d.values())[0], j = C(R.time, g);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: w,
+      className: z(
+        "absolute z-[100] pointer-events-none whitespace-nowrap",
+        $
+      ),
+      style: P,
+      children: /* @__PURE__ */ h("div", { className: "bg-background/90 backdrop-blur-sm rounded border border-border p-1.5 sm:p-2 space-y-1 sm:space-y-1.5", children: [
+        /* @__PURE__ */ m("div", { className: "text-xs sm:text-sm font-medium text-muted-foreground mb-0.5 sm:mb-1 whitespace-nowrap", children: j }),
+        v.map((r, c) => {
+          const o = d.get(r.label);
+          if (!o) return null;
+          const i = B(c), n = (r.lineColor ?? r.color) || i.line, e = r.yMeasureUnit || N, s = e !== "%" && e !== "$" && e !== "none" ? e : void 0, p = e === "$" ? `$${x(o.value, void 0, u)}` : e === "%" ? `${x(o.value, void 0, u)}%` : x(o.value, s, u);
+          return /* @__PURE__ */ h(
+            "div",
+            {
+              className: "flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm whitespace-nowrap",
+              children: [
+                /* @__PURE__ */ m(
+                  "div",
+                  {
+                    className: "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full flex-shrink-0",
+                    style: { backgroundColor: n }
+                  }
+                ),
+                /* @__PURE__ */ h("span", { className: "text-muted-foreground whitespace-nowrap", children: [
+                  r.label,
+                  ":"
+                ] }),
+                /* @__PURE__ */ m("span", { className: "font-medium text-foreground whitespace-nowrap", children: p })
+              ]
+            },
+            r.label
+          );
+        })
+      ] })
+    }
+  );
+}
+export {
+  M as GraphTooltip
+};

package/dist/esm/components/graph/graph-view.js

@@ -0,0 +1,225 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { cva as A } from "class-variance-authority";
+import * as B from "react";
+import { useMemo as D, useRef as N, useState as M, useEffect as E } from "react";
+import { ArcLoader as I } from "../arc-loader/arc-loader.js";
+import { cn as j } from "../../utils/cn.js";
+import { Graph as O } from "./graph.js";
+const q = A(
+  "relative w-full overflow-hidden rounded-lg border-border border bg-card text-card-foreground",
+  {
+    variants: {
+      variant: {
+        default: "shadow",
+        elevated: "shadow-lg",
+        outlined: "border-2",
+        ghost: "border-0 shadow-none"
+      },
+      size: {
+        sm: "h-48 sm:h-64",
+        default: "h-64 sm:h-96",
+        lg: "h-96 sm:h-[32rem]",
+        xl: "h-[32rem] sm:h-[48rem]",
+        full: "h-full"
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-2",
+        default: "p-4 sm:p-6",
+        lg: "p-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      padding: "default"
+    }
+  }
+), y = B.forwardRef(
+  ({
+    className: n,
+    variant: t,
+    size: l,
+    padding: m,
+    title: r,
+    description: s,
+    toolbar: a,
+    loading: i = !1,
+    emptyMessage: d,
+    error: c,
+    children: f,
+    ...p
+  }, x) => {
+    const u = r || s || a;
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: x,
+        className: j(
+          "flex flex-col",
+          q({ variant: t, size: l, padding: m, className: n })
+        ),
+        ...p,
+        children: [
+          u && /* @__PURE__ */ o("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
+            (r || s) && /* @__PURE__ */ o("div", { className: "flex-1", children: [
+              r && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: r }),
+              s && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: s })
+            ] }),
+            a && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: a })
+          ] }),
+          /* @__PURE__ */ o("div", { className: "relative flex-1 w-full min-h-0", children: [
+            i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2", children: /* @__PURE__ */ e(I, { size: 32, strokeWidth: 3 }) }) }),
+            c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
+              /* @__PURE__ */ e(
+                "svg",
+                {
+                  className: "h-12 w-12",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ e(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm font-medium", children: c })
+            ] }) }),
+            !c && !f && d && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ e(
+                "svg",
+                {
+                  className: "h-12 w-12",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ e(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm", children: d })
+            ] }) }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: j(
+                  "w-full h-full transition-[filter] duration-300 delay-300",
+                  i && "blur-sm pointer-events-none"
+                ),
+                children: !c && f
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+y.displayName = "GraphView";
+function X({
+  series: n,
+  data: t,
+  lineColor: l,
+  color: m,
+  topColor: r,
+  bottomColor: s,
+  graphId: a,
+  onUnselectSeries: i,
+  loading: d,
+  title: c,
+  description: f,
+  toolbar: p,
+  emptyMessage: x = "No data available",
+  error: u,
+  containerClassName: R,
+  variant: V,
+  size: z,
+  padding: G,
+  yMeasureUnit: g,
+  showCurrentValue: w,
+  ...L
+}) {
+  const h = D(() => {
+    if (n && n.length > 0)
+      return n;
+    if (t && t.length > 0) {
+      const W = l ?? m;
+      return [
+        {
+          data: t.map((v) => ({
+            time: typeof v.time == "number" ? v.time : Number(v.time),
+            value: v.value
+          })),
+          label: "Value",
+          yMeasureUnit: g,
+          ...W && { lineColor: W },
+          ...r && { topColor: r },
+          ...s && { bottomColor: s }
+        }
+      ];
+    }
+    return [];
+  }, [n, t, g, l, m, r, s]), H = !d && h.length === 0, b = N(h);
+  h.length > 0 && (b.current = h);
+  const k = d && h.length === 0 ? b.current : h, S = k.length > 0;
+  return /* @__PURE__ */ e(
+    y,
+    {
+      className: R,
+      variant: V,
+      size: z,
+      padding: G,
+      title: c,
+      description: f,
+      toolbar: p,
+      loading: d,
+      error: u,
+      emptyMessage: H ? x : void 0,
+      children: S && !u && /* @__PURE__ */ e(
+        O,
+        {
+          series: k,
+          yMeasureUnit: g,
+          ...i ? { onUnselectSeries: i } : {},
+          ...w !== void 0 ? { showCurrentValue: w } : {},
+          ...L
+        }
+      )
+    }
+  );
+}
+function Y(n = 0) {
+  const t = N(null), l = N(null), [m, r] = M(null);
+  return E(() => {
+    const s = () => {
+      if (t.current && l.current) {
+        const d = l.current.clientWidth, c = t.current.clientWidth;
+        r(d - c - n);
+      }
+    }, a = l.current, i = a ? new ResizeObserver(s) : null;
+    return a && i?.observe(a), () => {
+      a && i?.unobserve(a);
+    };
+  }, [n]), { graphWidth: m, parentRef: l, asideRef: t };
+}
+export {
+  y as GraphView,
+  X as GraphViewWithData,
+  q as graphViewVariants,
+  Y as useGraphAside
+};