@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.41

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

@@ -1,20 +1,22 @@
 import { resolveCSSColor as o } from "../../utils/colors.js";
-const e = {
+const l = {
   topColor: "rgba(76, 175, 80, 0.56)",
   bottomColor: "rgba(76, 175, 80, 0.04)",
   lineColor: "#02c39a",
-  lineWidth: 2
-}, i = {
+  lineWidth: 2,
+  lastValueVisible: !1,
+  priceLineVisible: !1
+}, b = {
   showLabel: !0,
   color: "#02c39a",
   labelBackgroundColor: "#02c39a",
   width: 2
-};
-function t() {
+}, t = 'Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', e = 14, i = 5, n = Math.ceil(e / 2) + 2, c = e + 6, u = 40;
+function g() {
   const r = o(
-    "hsl(var(--foreground))",
-    "rgb(0, 0, 0)"
-  );
+    "hsl(var(--muted-foreground))",
+    "rgb(163, 163, 163)"
+  ), a = o("hsl(var(--card))", "rgb(24, 24, 24)");
   return {
     timeScale: {
       borderVisible: !0,
@@ -26,6 +28,16 @@ function t() {
       // and legend appears). Avoids range shrinking to a few days.
       lockVisibleTimeRangeOnResize: !0
     },
+    leftPriceScale: {
+      visible: !1,
+      autoScale: !0,
+      alignLabels: !0,
+      borderVisible: !0,
+      borderColor: "rgba(224, 227, 235, 0.1)",
+      entireTextOnly: !1,
+      tickMarkDensity: i,
+      textColor: r
+    },
     rightPriceScale: {
       visible: !0,
       autoScale: !0,
@@ -33,14 +45,16 @@ function t() {
       borderVisible: !0,
       borderColor: "rgba(224, 227, 235, 0.1)",
       entireTextOnly: !1,
+      tickMarkDensity: i,
       textColor: r
     },
     layout: {
       background: {
-        color: "transparent"
+        color: a
       },
       textColor: r,
-      fontSize: 14
+      fontSize: e,
+      fontFamily: t
     },
     crosshair: {
       horzLine: {
@@ -66,23 +80,25 @@ function t() {
     }
   };
 }
-function a() {
+function f() {
   return {
     topColor: "rgba(76, 175, 80, 0.56)",
     bottomColor: "rgba(76, 175, 80, 0.04)",
-    lineColor: e.lineColor,
-    lineWidth: 2
+    lineColor: l.lineColor,
+    lineWidth: 2,
+    lastValueVisible: !1,
+    priceLineVisible: !1
   };
 }
-function s() {
+function d() {
   return {
     showLabel: !0,
-    color: e.lineColor,
-    labelBackgroundColor: e.lineColor,
+    color: l.lineColor,
+    labelBackgroundColor: l.lineColor,
     width: 2
   };
 }
-const b = {
+const L = {
   timeScale: {
     borderVisible: !0,
     borderColor: "rgba(224, 227, 235, 0.1)",
@@ -102,8 +118,9 @@ const b = {
     background: {
       color: "transparent"
     },
-    textColor: "rgb(0, 0, 0)",
-    fontSize: 14
+    textColor: "rgb(163, 163, 163)",
+    fontSize: e,
+    fontFamily: t
   },
   crosshair: {
     horzLine: {
@@ -129,10 +146,15 @@ const b = {
   }
 };
 export {
-  e as DEFAULT_AREA_SERIES,
-  b as DEFAULT_OPTIONS,
-  i as DEFAULT_VERTICAL_LINE,
-  t as getDefaultOptions,
-  a as getDefaultSeries,
-  s as getDefaultVerticalLine
+  n as AXIS_EDGE_LABEL_PADDING_PX,
+  e as AXIS_FONT_SIZE,
+  i as AXIS_TICK_MARK_DENSITY,
+  u as AXIS_TIME_EDGE_PADDING_PX,
+  c as AXIS_TOP_LABEL_PADDING_PX,
+  l as DEFAULT_AREA_SERIES,
+  L as DEFAULT_OPTIONS,
+  b as DEFAULT_VERTICAL_LINE,
+  g as getDefaultOptions,
+  f as getDefaultSeries,
+  d as getDefaultVerticalLine
 };

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

@@ -1,185 +1,190 @@
-import { TickMarkType as g } from "lightweight-charts";
-import { DateTime as S } from "luxon";
-import { isBelowDisplayThreshold as x, FORMAT_CONSTANTS as X, toSignificantDigits as L, formatNumberWithSuffix as k } from "../../utils/format-number.js";
-const { MIN_DISPLAY_THRESHOLD: M, MAX_EXPONENTIAL_THRESHOLD: I } = X, P = (t, e, o = "full") => {
-  if (x(t))
-    return e ? `<${M}${e}` : `<${M}`;
+import { TickMarkType as S } from "lightweight-charts";
+import { DateTime as D } from "luxon";
+import { isBelowDisplayThreshold as T, FORMAT_CONSTANTS as U, toSignificantDigits as N, formatNumberWithSuffix as I } from "../../utils/format-number.js";
+const { MIN_DISPLAY_THRESHOLD: h, MAX_EXPONENTIAL_THRESHOLD: L } = U, O = (t, e, n = "full") => {
+  if (T(t))
+    return e ? `<${h}${e}` : `<${h}`;
   if (t === 0)
     return e ? `0${e}` : "0";
-  const r = k(t, {
-    maxExponentialThreshold: I,
+  const r = I(t, {
+    maxExponentialThreshold: L,
     minimumFractionDigits: 0,
-    maximumFractionDigits: o === "short" ? 1 : 0,
-    format: o,
-    adaptiveDecimals: o === "short"
+    maximumFractionDigits: n === "short" ? 1 : 0,
+    format: n,
+    adaptiveDecimals: n === "short"
   });
   return e ? `${r}${e}` : r;
-}, U = 2, p = (t, e) => {
-  if (x(t))
-    return e ? `<${M}${e}` : `<${M}`;
+}, X = 2, H = (t, e) => {
+  if (T(t))
+    return e ? `<${h}${e}` : `<${h}`;
   if (t === 0)
     return e ? `0${e}` : "0";
-  const o = L(t, U);
-  return e ? `${o}${e}` : o;
-}, C = 4, w = (t) => {
-  if (x(t))
-    return `<${M}`;
+  const n = N(t, X);
+  return e ? `${n}${e}` : n;
+}, P = 4, w = (t) => {
+  if (T(t))
+    return `<${h}`;
   if (t === 0)
     return "0";
-  const e = Math.round(t), o = Math.abs(t - e);
-  return o > 0 && o < 0.01 ? t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "") : L(t, C);
-}, G = (t, e) => {
-  if (x(t))
-    return e ? `<${M} ${e}` : `<${M}`;
+  const e = Math.round(t), n = Math.abs(t - e);
+  return n > 0 && n < 0.01 ? t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "") : N(t, P);
+}, C = (t, e) => {
+  if (T(t))
+    return e ? `<${h} ${e}` : `<${h}`;
   if (t === 0)
     return e ? `0 ${e}` : "0";
-  const o = Number.isInteger(t), r = Math.abs(t), i = o && r >= 1e3, s = Math.round(t), a = Math.abs(t - s);
-  if (a > 0 && a < 0.01 && !i) {
-    const $ = t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "");
-    return e ? `${$} ${e}` : $;
+  const n = Number.isInteger(t), r = Math.abs(t), c = n && r >= 1e3, s = Math.round(t), i = Math.abs(t - s);
+  if (i > 0 && i < 0.01 && !c) {
+    const F = t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "");
+    return e ? `${F} ${e}` : F;
   }
-  const F = k(t, {
-    maxExponentialThreshold: I,
-    minimumFractionDigits: o ? 0 : 2,
-    maximumFractionDigits: i ? 1 : o ? 0 : 2,
-    format: i ? "short" : "full",
-    adaptiveDecimals: i
+  const M = I(t, {
+    maxExponentialThreshold: L,
+    minimumFractionDigits: n ? 0 : 2,
+    maximumFractionDigits: c ? 1 : n ? 0 : 2,
+    format: c ? "short" : "full",
+    adaptiveDecimals: c
   });
-  return e ? `${F} ${e}` : F;
-}, N = {
-  "%": p,
-  $: P,
-  token: G,
+  return e ? `${M} ${e}` : M;
+}, A = {
+  "%": H,
+  $: O,
+  token: C,
   none: w
-}, J = (t) => N[t] || N.token;
-function Z(t, e, o = 4) {
+}, Z = (t) => A[t] || A.token;
+function V(t, e, n = 4) {
   if (t === 0)
     return e ? `0 ${e}` : "0";
-  const r = e && Math.abs(t) >= 1e3 ? 0 : o, i = t.toLocaleString("en-US", {
+  const r = e && Math.abs(t) >= 1e3 ? 0 : n, c = t.toLocaleString("en-US", {
     minimumFractionDigits: 0,
     maximumFractionDigits: r
   });
-  return e ? `${i} ${e}` : i;
+  return e ? `${c} ${e}` : c;
 }
-function v(t, e, o) {
-  const r = o?.yScaleMin;
-  let i = t.length > 0 ? Math.min(...t) : 0, s = t.length > 0 ? Math.max(...t) : 0, a = [];
-  const u = () => {
-    const n = (i + s) / 2;
-    let c = 1, m = "";
-    return n >= 1e9 ? (c = 1e9, m = "B") : n >= 1e6 ? (c = 1e6, m = "M") : n >= 1e3 && (c = 1e3, m = "K"), { scale: c, suffix: m };
-  }, F = 8, $ = 0.02;
-  let A = 0;
-  const E = (n, c, m, d) => {
-    const h = (c > 1 ? n / c : n).toLocaleString("en-US", {
+function x(t, e) {
+  return !t || e === "none" || e === "token" ? t : e === "$" ? `$${t}` : e === "%" ? `${t}%` : `${t} ${e}`;
+}
+function Y(t) {
+  return t.includes("/");
+}
+function l(t) {
+  return Y(t) ? "none" : t;
+}
+function b(t, e, n) {
+  const r = n?.yScaleMin;
+  let c = t.length > 0 ? Math.min(...t) : 0, s = t.length > 0 ? Math.max(...t) : 0;
+  const i = () => {
+    const o = (c + s) / 2;
+    let a = 1, m = "";
+    return o >= 1e9 ? (a = 1e9, m = "B") : o >= 1e6 ? (a = 1e6, m = "M") : o >= 1e3 && (a = 1e3, m = "K"), { scale: a, suffix: m };
+  }, u = 8;
+  let M = 0;
+  const F = (o, a, m, d) => {
+    const f = (a > 1 ? o / a : o).toLocaleString("en-US", {
       minimumFractionDigits: 0,
       maximumFractionDigits: d,
       useGrouping: !1
     });
-    return c > 1 ? `${h}${m}` : h;
-  }, R = (n, c, m) => {
-    for (let d = 0; d <= F; d++) {
-      const l = /* @__PURE__ */ new Set();
-      let h = !0;
-      for (const D of n) {
-        const f = E(D, c, m, d);
-        if (l.has(f)) {
-          h = !1;
+    return a > 1 ? `${f}${m}` : f;
+  }, p = (o, a, m) => {
+    for (let d = 0; d <= u; d++) {
+      const $ = /* @__PURE__ */ new Set();
+      let f = !0;
+      for (const g of o) {
+        const k = F(g, a, m, d);
+        if ($.has(k)) {
+          f = !1;
           break;
         }
-        l.add(f);
+        $.add(k);
       }
-      if (h) return d;
+      if (f) return d;
     }
-    return F;
-  }, O = (n) => {
-    if (r !== void 0 && n < r) return "";
-    if (n === 0) return "0";
-    const { scale: c, suffix: m } = u();
-    return E(n, c, m, A);
+    return u;
+  }, R = (o) => {
+    if (r !== void 0 && o < r) return "";
+    if (o === 0) return x("0", l(e));
+    const { scale: a, suffix: m } = i();
+    return x(
+      F(o, a, m, M),
+      l(e)
+    );
   };
   return {
-    formatter: (n) => O(n),
-    tickmarksFormatter: (n) => {
-      const { scale: c, suffix: m } = u(), d = s - i, l = d > 0 ? a.filter(
-        (f) => Math.abs(f) >= d * $
-      ) : a, h = n.filter(
+    formatter: (o) => R(o),
+    tickmarksFormatter: (o) => {
+      const { scale: a, suffix: m } = i(), d = o.filter(
         (f) => f !== 0 && !(r !== void 0 && f < r)
       );
-      A = R(
-        [...h, ...l],
-        c,
-        m
-      );
-      const D = /* @__PURE__ */ new Set();
-      return n.map((f) => {
+      M = p(d, a, m);
+      const $ = /* @__PURE__ */ new Set();
+      return o.map((f) => {
         if (r !== void 0 && f < r) return "";
-        const T = f === 0 ? "0" : E(f, c, m, A);
-        return !T || D.has(T) ? "" : (D.add(T), T);
+        const g = f === 0 ? "0" : F(f, a, m, M);
+        return !g || $.has(g) ? "" : ($.add(g), x(g, l(e)));
       });
     },
-    updateVisibleRange: (n) => {
-      n.length > 0 && (i = Math.min(...n), s = Math.max(...n));
-    },
-    updateLastValues: (n) => {
-      a = [...n];
+    updateVisibleRange: (o) => {
+      o.length > 0 && (c = Math.min(...o), s = Math.max(...o));
     }
   };
 }
-const H = (t) => S.fromSeconds(Number(t)).toFormat("dd/LL/yyyy HH:mm"), Y = (t) => S.fromSeconds(Number(t)).toFormat("HH:mm"), V = (t, e) => p(Number(t), e), _ = {
-  time: H,
-  "%": V
+const _ = (t) => D.fromSeconds(Number(t)).toFormat("dd/LL/yyyy HH:mm"), G = (t) => D.fromSeconds(Number(t)).toFormat("HH:mm"), W = (t, e) => H(Number(t), e), E = {
+  time: _,
+  "%": W
 };
-function W(t) {
+function q(t) {
   const e = /* @__PURE__ */ new Map();
-  return (o, r, i) => {
-    const s = S.fromSeconds(Number(o));
-    let a;
+  return (n, r, c) => {
+    const s = D.fromSeconds(Number(n));
+    let i;
     if (t === 0)
-      a = s.toFormat("HH:mm");
+      i = s.toFormat("HH:mm");
     else
       switch (r) {
-        case g.Year:
-          a = s.toFormat("yyyy");
+        case S.Year:
+          i = s.toFormat("yyyy");
           break;
         // Month boundaries (1st of a month) are reported as `Month` ticks by
         // lightweight-charts. Render them the same way as regular day ticks so
         // the axis reads uniformly ("01 Jul") instead of a stray "Jul 2026".
-        case g.Month:
-        case g.DayOfMonth:
-          a = t > 365 ? s.toFormat("dd MMM yyyy") : s.toFormat("dd MMM");
+        case S.Month:
+        case S.DayOfMonth:
+          i = t > 365 ? s.toFormat("dd MMM yyyy") : s.toFormat("dd MMM");
           break;
-        case g.Time:
-        case g.TimeWithSeconds:
-          a = s.toFormat("HH:mm");
+        case S.Time:
+        case S.TimeWithSeconds:
+          i = s.toFormat("HH:mm");
           break;
         default:
-          a = s.toFormat("dd MMM");
+          i = s.toFormat("dd MMM");
       }
     let u = e.get(r);
-    return u || (u = /* @__PURE__ */ new Set(), e.set(r, u)), u.has(a) ? " " : (u.add(a), a);
+    return u || (u = /* @__PURE__ */ new Set(), e.set(r, u)), u.has(i) ? " " : (u.add(i), i);
   };
 }
-const b = (t, e) => {
+const B = (t, e) => {
   if (t === "time" && e && e.length > 0) {
-    const r = S.fromSeconds(Number(e[0].time)), i = S.fromSeconds(
+    const r = D.fromSeconds(Number(e[0].time)), c = D.fromSeconds(
       Number(e[e.length - 1].time)
-    ), s = r.hasSame(i, "day"), a = s ? 0 : Math.ceil(i.diff(r, "days").days);
+    ), s = r.hasSame(c, "day"), i = s ? 0 : Math.ceil(c.diff(r, "days").days);
     return {
-      timeFormatter: s ? Y : H,
-      tickMarkFormatter: W(a)
+      timeFormatter: s ? G : _,
+      tickMarkFormatter: q(i)
     };
   }
-  const o = _[t] || _.time;
+  const n = E[t] || E.time;
   return {
-    timeFormatter: o,
-    tickMarkFormatter: (r) => o(r, void 0)
+    timeFormatter: n,
+    tickMarkFormatter: (r) => n(r, t)
   };
-}, tt = (t, e) => b(t, e).timeFormatter;
+}, v = (t, e) => B(t, e).timeFormatter;
 export {
-  v as createAdaptiveYAxisFormatter,
-  Z as formatExactValue,
-  tt as getXFormatter,
-  b as getXFormatters,
-  J as getYFormatter
+  b as createAdaptiveYAxisFormatter,
+  V as formatExactValue,
+  v as getXFormatter,
+  B as getXFormatters,
+  Z as getYFormatter,
+  Y as isRatioUnit,
+  x as withYAxisUnit
 };

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

@@ -1,28 +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,
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import { cn as a } from "../../utils/cn.js";
+import { getXFormatter as c, isRatioUnit as f, formatExactValue as r } from "./formatters.js";
+function w({
+  point: o,
   xMeasureUnit: m,
   yMeasureUnit: t,
   className: s,
-  decimals: o
+  decimals: e
 }) {
-  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(
+  const d = c(m)(o.time, m), i = t !== "%" && t !== "$" && t !== "none" && !f(t) ? t : void 0, n = t === "$" ? `$${r(o.value, void 0, e)}` : t === "%" ? `${r(o.value, void 0, e)}%` : r(o.value, i, e);
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: i(
+      className: a(
         "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-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: n }),
         /* @__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
+  w as GraphCurrentValue
 };

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

@@ -1,8 +1,8 @@
 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";
+import { getXFormatter as A, isRatioUnit as B, formatExactValue as x } from "./formatters.js";
+import { getSeriesColorPalette as E } from "./graph.js";
 function M({
   points: d,
   series: v,
@@ -36,7 +36,7 @@ function M({
     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 ? {
+  const R = f ? {
     left: `${f.x}px`,
     top: `${f.y}px`,
     transform: "translate(-50%, 0)"
@@ -44,7 +44,7 @@ function M({
   } : {};
   if (d.size === 0)
     return null;
-  const R = Array.from(d.values())[0], j = C(R.time, g);
+  const P = Array.from(d.values())[0], j = C(P.time, g);
   return /* @__PURE__ */ m(
     "div",
     {
@@ -53,13 +53,13 @@ function M({
         "absolute z-[100] pointer-events-none whitespace-nowrap",
         $
       ),
-      style: P,
+      style: R,
       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);
+          const i = E(c), n = (r.lineColor ?? r.color) || i.line, e = r.yMeasureUnit || N, s = e !== "%" && e !== "$" && e !== "none" && !B(e) ? 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",
             {