@gearbox-protocol/ui-kit 4.0.0-next.6 → 4.0.0-next.60

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

@@ -1,31 +1,36 @@
-import { DEFAULT_AREA_SERIES as r, DEFAULT_OPTIONS as o, DEFAULT_VERTICAL_LINE as a, getDefaultOptions as i, getDefaultSeries as p, getDefaultVerticalLine as l } from "./default-config.js";
-import { getXFormatter as g, getXFormatters as E, getYFormatter as f } from "./formatters.js";
-import { DEFAULT_SERIES_COLORS as n, Graph as V, GraphLegend as h, getSeriesColorPalette as S, getVerticalLineLabelStyle as A, getVerticalLineTooltipContent as D } from "./graph.js";
-import { GraphCurrentValue as s } from "./graph-current-value.js";
-import { GraphTooltip as F } from "./graph-tooltip.js";
-import { GraphView as _, GraphViewWithData as u, graphViewVariants as C, useGraphAside as I } from "./graph-view.js";
-import { VertLine as R } from "./plugins/vertical-line.js";
+import { AXIS_EDGE_LABEL_PADDING_PX as r, AXIS_FONT_SIZE as o, AXIS_TICK_MARK_DENSITY as a, AXIS_TIME_EDGE_PADDING_PX as _, AXIS_TOP_LABEL_PADDING_PX as i, DEFAULT_AREA_SERIES as E, getDefaultOptions as p, getDefaultSeries as A, getDefaultVerticalLine as D } from "./default-config.js";
+import { getXFormatter as L, getXFormatters as l } from "./formatters.js";
+import { DEFAULT_SERIES_COLORS as g, Graph as G, GraphLegend as n, VERTICAL_LINE_LABEL_EDGE_PADDING as V, getSeriesColorPalette as f, getStepForwardValue as T, getVerticalLineLabelStyle as X, getVerticalLineTooltipContent as m, seriesIdentity as P, visibleLogicalRangeFor as h } from "./graph.js";
+import { GraphCurrentValue as x } from "./graph-current-value.js";
+import { GraphTooltip as N } from "./graph-tooltip.js";
+import { GraphView as u, GraphViewWithData as C, graphViewVariants as O } from "./graph-view.js";
+import { VertLine as w } from "./plugins/vertical-line.js";
 export {
-  r as DEFAULT_AREA_SERIES,
-  o as DEFAULT_OPTIONS,
-  n as DEFAULT_SERIES_COLORS,
-  a as DEFAULT_VERTICAL_LINE,
-  V as Graph,
-  s as GraphCurrentValue,
-  h as GraphLegend,
-  F as GraphTooltip,
-  _ as GraphView,
-  u as GraphViewWithData,
-  R as VertLine,
-  i as getDefaultOptions,
-  p as getDefaultSeries,
-  l as getDefaultVerticalLine,
-  S as getSeriesColorPalette,
-  A as getVerticalLineLabelStyle,
-  D as getVerticalLineTooltipContent,
-  g as getXFormatter,
-  E as getXFormatters,
-  f as getYFormatter,
-  C as graphViewVariants,
-  I as useGraphAside
+  r as AXIS_EDGE_LABEL_PADDING_PX,
+  o as AXIS_FONT_SIZE,
+  a as AXIS_TICK_MARK_DENSITY,
+  _ as AXIS_TIME_EDGE_PADDING_PX,
+  i as AXIS_TOP_LABEL_PADDING_PX,
+  E as DEFAULT_AREA_SERIES,
+  g as DEFAULT_SERIES_COLORS,
+  G as Graph,
+  x as GraphCurrentValue,
+  n as GraphLegend,
+  N as GraphTooltip,
+  u as GraphView,
+  C as GraphViewWithData,
+  V as VERTICAL_LINE_LABEL_EDGE_PADDING,
+  w as VertLine,
+  p as getDefaultOptions,
+  A as getDefaultSeries,
+  D as getDefaultVerticalLine,
+  f as getSeriesColorPalette,
+  T as getStepForwardValue,
+  X as getVerticalLineLabelStyle,
+  m as getVerticalLineTooltipContent,
+  L as getXFormatter,
+  l as getXFormatters,
+  O as graphViewVariants,
+  P as seriesIdentity,
+  h as visibleLogicalRangeFor
 };

package/dist/esm/components/graph/y-axis-scale.js

@@ -0,0 +1,112 @@
+const d = [
+  [2, 2.5, 2],
+  [2, 2, 2.5],
+  [2.5, 2, 2]
+];
+function F(t) {
+  if (!(t > 0) || !Number.isFinite(t)) return 0.01;
+  const n = 10 ** Math.floor(Math.log10(t) - 3);
+  return Math.min(Math.max(n, 1e-8), t);
+}
+function k(t) {
+  if (t < 0) return !1;
+  if (t > 1e18) return !0;
+  for (let n = t; n > 1; n /= 10)
+    if (n % 10 !== 0) return !1;
+  return !0;
+}
+function T(t, n, i) {
+  return n - t <= i;
+}
+function v(t, n, i) {
+  return Math.abs(t - n) < i;
+}
+function R(t, n, i, a, u) {
+  const c = k(a) ? [2, 2.5, 2] : [], o = a === 0 ? 0 : 1 / a;
+  let e = 10 ** Math.max(0, Math.ceil(Math.log10(t - n))), I = 0, r = u[0] ?? 2;
+  for (; ; ) {
+    const S = T(e, o, 1e-14) && e > o + 1e-14, N = T(
+      e,
+      i * r,
+      1e-14
+    ), m = T(e, 1, 1e-14);
+    if (!(S && N && m)) break;
+    e /= r, I += 1, r = u[I % u.length] ?? 2;
+  }
+  if (e <= o + 1e-14 && (e = o), e = Math.max(1, e), c.length > 0 && v(e, 1, 1e-14))
+    for (I = 0, r = c[0] ?? 2; T(e, i * r, 1e-14) && e > o + 1e-14; )
+      e /= r, I += 1, r = c[I % c.length] ?? 2;
+  return e;
+}
+function p({
+  min: t,
+  max: n,
+  scaleHeightPx: i,
+  fontSizePx: a,
+  tickMarkDensity: u,
+  minMove: c
+}) {
+  const o = Math.max(t, n), e = Math.min(t, n);
+  if (!(o > e) || !(i > 0) || !(a > 0))
+    return c > 0 ? c : 0.01;
+  const I = Math.ceil(a * u), r = (o - e) * I / i, S = c > 0 ? Math.round(1 / c) : 100;
+  let N = Number.POSITIVE_INFINITY;
+  for (const m of d) {
+    const M = R(o, e, r, S, m);
+    M < N && (N = M);
+  }
+  return Number.isFinite(N) && N > 0 ? N : c > 0 ? c : 0.01;
+}
+function b(t, n, i) {
+  if (!(n > 0) || !Number.isFinite(n) || !Number.isFinite(t))
+    return t;
+  const a = t / n, u = i === "floor" ? Math.floor(a + 1e-14) : Math.ceil(a - 1e-14);
+  return Number((u * n).toPrecision(12));
+}
+function q({
+  min: t,
+  max: n,
+  floor: i,
+  scaleHeightPx: a,
+  fontSizePx: u,
+  tickMarkDensity: c,
+  minMove: o,
+  edgePaddingPx: e = 0,
+  edgePaddingTopPx: I
+}) {
+  let r = Math.min(t, n);
+  const S = Math.max(t, n);
+  i !== void 0 && Number.isFinite(i) && r < i && (r = i);
+  const N = S - r, m = o ?? F(N);
+  if (!(N > 0) || !(a > 0)) {
+    const h = m > 0 ? m : 0.01, s = i !== void 0 ? Math.max(r, i) : r;
+    return { min: s, max: s + h * 5, step: h };
+  }
+  let M = r, l = S, _ = p({
+    min: M,
+    max: l,
+    scaleHeightPx: a,
+    fontSizePx: u,
+    tickMarkDensity: c,
+    minMove: m
+  });
+  for (let h = 0; h < 3; h++) {
+    let s = b(r, _, "floor"), f = b(S, _, "ceil");
+    i !== void 0 && Number.isFinite(i) && (s = Math.max(s, i)), f <= s && (f = s + _);
+    const E = Math.max(0, e), P = Math.max(0, I ?? e), C = Math.max(1, a - P - E), x = (f - s) / C, O = s - E * x, L = f + P * x, A = p({
+      min: O,
+      max: L,
+      scaleHeightPx: a,
+      fontSizePx: u,
+      tickMarkDensity: c,
+      minMove: m
+    }), K = A === _ && s === M && f === l;
+    if (M = s, l = f, _ = A, K) break;
+  }
+  return { min: M, max: l, step: _ };
+}
+export {
+  q as niceAxisRange,
+  F as pickMinMove,
+  p as pickTickSpan
+};

package/dist/esm/components/head-cell/head-cell.js

@@ -1,36 +1,34 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import * as v from "react";
-import { HelpTip as p } from "../help-tip/help-tip.js";
-import { faCaretUp as N, faCaretDown as T } from "@fortawesome/free-solid-svg-icons";
+import { faCaretUp as v, faCaretDown as N } from "@fortawesome/free-solid-svg-icons";
+import * as T from "react";
+import { HelpTip as f } from "../help-tip/help-tip.js";
 import { FaIcon as d } from "../icons/fa-icon.js";
 import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as y, Tooltip as b, TooltipTrigger as H, TooltipContent as w } from "../tooltip/tooltip.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as n } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-function q({
+function U({
   title: l,
   tip: r,
   arrowPosition: i = "left",
   sortDirection: s,
-  sortField: f = "this field",
+  sortField: p = "this field",
   sortTip: u,
   onSort: t,
   className: h
 }) {
-  const [x, m] = v.useState(!1), g = !!s || x, a = () => /* @__PURE__ */ e(
+  const [x, a] = T.useState(!1), g = !!s || x, c = () => /* @__PURE__ */ e(
     "span",
     {
       className: n(
         "inline-flex items-center transition-opacity",
         g ? "opacity-100" : "opacity-0"
       ),
-      children: s === "asc" ? /* @__PURE__ */ e(d, { icon: N, className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ e(d, { icon: T, className: "size-3 text-muted-foreground" })
+      children: s === "asc" ? /* @__PURE__ */ e(d, { icon: v, className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ e(d, { icon: N, className: "size-3 text-muted-foreground" })
     }
-  ), c = () => /* @__PURE__ */ o(
+  ), m = () => /* @__PURE__ */ o(
     "button",
     {
       type: "button",
@@ -42,39 +40,39 @@ function q({
         !t && "cursor-default"
       ),
       children: [
-        t && i === "left" && a(),
+        t && i === "left" && c(),
         l,
-        t && i === "right" && a()
+        t && i === "right" && c()
       ]
     }
-  ), C = `Sort by ${f}`;
+  ), C = `Sort by ${p}`;
   return /* @__PURE__ */ o(
     "div",
     {
       className: n("inline-flex items-center gap-1.5", h),
-      onPointerEnter: () => m(!0),
-      onPointerLeave: () => m(!1),
+      onPointerEnter: () => a(!0),
+      onPointerLeave: () => a(!1),
       children: [
         t ? /* @__PURE__ */ e(y, { children: /* @__PURE__ */ o(b, { children: [
-          /* @__PURE__ */ e(H, { asChild: !0, children: c() }),
+          /* @__PURE__ */ e(H, { asChild: !0, children: m() }),
           /* @__PURE__ */ e(w, { children: u || C })
-        ] }) }) : c(),
-        r && /* @__PURE__ */ e(p, { children: r })
+        ] }) }) : m(),
+        r && /* @__PURE__ */ e(f, { children: r })
       ]
     }
   );
 }
-function B({
+function $({
   title: l,
   tip: r,
   className: i
 }) {
   return /* @__PURE__ */ o("div", { className: n("inline-flex items-center gap-1.5", i), children: [
     /* @__PURE__ */ e("span", { className: "text-sm font-medium text-muted-foreground", children: l }),
-    r && /* @__PURE__ */ e(p, { children: r })
+    r && /* @__PURE__ */ e(f, { children: r })
   ] });
 }
 export {
-  q as HeadCell,
-  B as SimpleHeadCell
+  U as HeadCell,
+  $ as SimpleHeadCell
 };

package/dist/esm/components/health-factor/health-factor.js

@@ -1,17 +1,15 @@
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import { PERCENTAGE_FACTOR as h, formatPercentage as C } from "@gearbox-protocol/sdk";
-import { cva as F } from "class-variance-authority";
-import "react";
-import { cn as H } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { PERCENTAGE_FACTOR as A, formatPercentage as N } from "@gearbox-protocol/sdk/onchain";
+import { cva as C } from "class-variance-authority";
+import { cn as F } from "../../utils/cn.js";
+import { APPROXIMATE_SYMBOL as H } from "../../utils/format.js";
 import "luxon";
 import "../../utils/z-index.js";
-import { StatusBars as N, HealthDot as g } from "../status-elements/status-elements.js";
-const A = 15e3, D = 11e3, b = 10500, w = (t) => {
+import { StatusBars as g, HealthDot as D } from "../status-elements/status-elements.js";
+const O = 15e3, _ = 11e3, b = 10500, w = (t) => {
   if (t)
-    return t >= A ? "good" : t > D ? "medium" : t > b ? "bad" : t > h ? "critical" : "liquidation";
-}, V = F(
+    return t >= O ? "good" : t > _ ? "medium" : t > b ? "bad" : t > A ? "critical" : "liquidation";
+}, B = C(
   "inline-flex items-center font-medium [text-decoration:inherit]",
   {
     variants: {
@@ -26,41 +24,43 @@ const A = 15e3, D = 11e3, b = 10500, w = (t) => {
     }
   }
 );
-function k({
+function L({
   value: t,
   debt: s,
   decimals: c = 3,
   zone: o,
-  zoneType: n = "color",
-  className: m,
+  zoneType: e = "color",
+  approximate: m,
+  className: l,
   ...u
 }) {
-  const r = s !== void 0 && s === 0n, d = !r && n === "color", l = !r && o && n === "dot", f = !r && o && n === "bars", e = d ? o === void 0 ? w(t) : o : void 0, a = e === void 0 ? void 0 : e === null ? "unset" : e, p = () => {
+  const r = s !== void 0 && s === 0n, d = !r && e === "color", f = !r && o && e === "dot", p = !r && o && e === "bars", i = d ? o === void 0 ? w(t) : o : void 0, a = i === void 0 ? void 0 : i === null ? "unset" : i, v = () => {
     if (r) return "N/A";
-    const v = Number(t);
-    return C(v, c);
+    const x = Number(t);
+    return N(x, c);
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ h(
     "span",
     {
-      className: H(
-        V(
+      className: F(
+        B(
           a !== void 0 ? { zone: a } : {}
         ),
-        m
+        l
       ),
       ...u,
       children: [
-        f && /* @__PURE__ */ i("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ i(N, { zone: o }) }),
-        p(),
-        l && /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(g, { zone: o }) })
+        p && /* @__PURE__ */ n("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ n(g, { zone: o }) }),
+        m && !r ? /* @__PURE__ */ n("span", { className: "mr-0.5", children: H }) : null,
+        v(),
+        f && /* @__PURE__ */ n("span", { className: "ml-1.5", children: /* @__PURE__ */ n(D, { zone: o }) })
       ]
     }
   );
 }
 export {
-  D as BAD_HF,
-  A as GOOD_HF,
-  k as HealthFactor,
+  _ as BAD_HF,
+  O as GOOD_HF,
+  L as HealthFactor,
   w as getHFZones
 };

package/dist/esm/components/help-tip/help-tip.js

@@ -1,15 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconQuestionCircle as v, IconInfo as h } from "@gearbox-protocol/static";
+import { jsx as t } from "react/jsx-runtime";
+import { faCircleQuestion as u } from "@fortawesome/free-solid-svg-icons";
+import { IconInfo as v } from "@gearbox-protocol/static";
 import { cva as T } from "class-variance-authority";
-import * as c from "react";
-import "@gearbox-protocol/sdk";
-import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
+import * as p from "react";
+import { FaIcon as C } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk/onchain";
+import { cn as l } from "../../utils/cn.js";
 import "luxon";
 import "../../utils/z-index.js";
-import { SimpleTooltip as C } from "../tooltip/simple-tooltip.js";
-const H = T("transition-colors", {
+import { SimpleTooltip as H } from "../tooltip/simple-tooltip.js";
+const I = T("transition-colors", {
   variants: {
     iconColor: {
       "gray-10": "text-gray-10",
@@ -43,89 +43,92 @@ const H = T("transition-colors", {
     }
   },
   defaultVariants: { iconColor: "gray-90", iconHoverColor: "gray-110" }
-}), I = c.forwardRef(
+}), N = p.forwardRef(
   ({
-    className: r,
-    children: o,
-    maxWidth: t,
-    minWidth: a,
+    className: o,
+    children: r,
+    maxWidth: a,
+    minWidth: e,
     delayShow: g = 200,
     placement: y = "bottom",
     iconSize: i = 14,
     iconColor: n = "gray-90",
-    iconHoverColor: p = "gray-110",
-    iconVariant: m = "question",
-    onPointerEnter: x,
-    ...d
-  }, f) => {
-    const u = /* @__PURE__ */ e(
-      l,
+    iconHoverColor: s = "gray-110",
+    iconVariant: x = "question",
+    onPointerEnter: c,
+    ...f
+  }, d) => {
+    const h = /* @__PURE__ */ t(
+      m,
       {
-        ref: f,
+        ref: d,
         iconSize: i,
         iconColor: n,
-        iconHoverColor: p,
-        iconVariant: m,
-        onPointerEnter: x,
-        className: r,
-        ...d
+        iconHoverColor: s,
+        iconVariant: x,
+        onPointerEnter: c,
+        className: o,
+        ...f
       }
     );
-    return /* @__PURE__ */ e(
-      C,
+    return /* @__PURE__ */ t(
+      H,
       {
-        title: u,
+        title: h,
         placement: y,
         delayShow: g,
-        maxWidth: t,
-        minWidth: a,
-        children: o
+        maxWidth: a,
+        minWidth: e,
+        children: r
       }
     );
   }
 );
-I.displayName = "HelpTip";
-const l = c.forwardRef(
+N.displayName = "HelpTip";
+const m = p.forwardRef(
   ({
-    className: r,
-    iconSize: o = 14,
-    iconColor: t = "gray-90",
-    iconHoverColor: a = "gray-110",
+    className: o,
+    iconSize: r = 14,
+    iconColor: a = "gray-90",
+    iconHoverColor: e = "gray-110",
     iconVariant: g = "question",
     onPointerEnter: y,
     ...i
-  }, n) => {
-    const p = g === "question" ? v : h;
-    return /* @__PURE__ */ e(
-      "span",
-      {
-        ref: n,
-        role: "img",
-        "aria-hidden": !0,
-        className: s(
-          "inline-block cursor-help",
-          H({ iconColor: t, iconHoverColor: a }),
-          r
-        ),
-        onPointerEnter: y,
-        ...i,
-        children: /* @__PURE__ */ e(p, { size: o })
-      }
-    );
-  }
+  }, n) => /* @__PURE__ */ t(
+    "span",
+    {
+      ref: n,
+      role: "img",
+      "aria-hidden": !0,
+      className: l(
+        "inline-block cursor-help",
+        I({ iconColor: a, iconHoverColor: e }),
+        o
+      ),
+      onPointerEnter: y,
+      ...i,
+      children: g === "question" ? /* @__PURE__ */ t(
+        C,
+        {
+          icon: u,
+          style: { width: r, height: r }
+        }
+      ) : /* @__PURE__ */ t(v, { size: r })
+    }
+  )
 );
-l.displayName = "HelpTipIcon";
-const N = c.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ e(
+m.displayName = "HelpTipIcon";
+const w = p.forwardRef(({ className: o, ...r }, a) => /* @__PURE__ */ t(
   "span",
   {
-    ref: t,
-    className: s("ml-1.5 inline-block leading-[0]", r),
-    ...o
+    ref: a,
+    className: l("ml-1.5 inline-block leading-[0]", o),
+    ...r
   }
 ));
-N.displayName = "TipWrap";
+w.displayName = "TipWrap";
 export {
-  I as HelpTip,
-  l as HelpTipIcon,
-  N as TipWrap
+  N as HelpTip,
+  m as HelpTipIcon,
+  w as TipWrap
 };

package/dist/esm/components/hf-indicator/hf-indicator.js

@@ -1,33 +1,59 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-const o = [
-  [92, 0.8],
-  [104, 0.6],
-  [116, 0.4],
-  [128, 0.2]
-];
-function a(r) {
-  return 4 - Math.floor((r - 80) / 12);
-}
-function d({
-  value: r = "1.05"
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+const d = {
+  sm: {
+    core: 40,
+    rings: [
+      [46, 0.6],
+      [52, 0.3]
+    ],
+    font: "text-xs"
+  },
+  md: {
+    core: 80,
+    rings: [
+      [92, 0.8],
+      [104, 0.6],
+      [116, 0.4],
+      [128, 0.2]
+    ],
+    font: "text-[21px]"
+  }
+};
+function f({
+  value: o,
+  size: i = "md"
 }) {
-  return /* @__PURE__ */ l("div", { className: "relative m-6 flex w-[80px] h-[80px] justify-center items-center", children: [
-    o.map(([e, n]) => /* @__PURE__ */ t(
-      "div",
-      {
-        className: "absolute top-1/2 left-1/2 rounded-full border border-solid -translate-x-1/2 -translate-y-1/2 bg-transparent",
-        style: {
-          zIndex: a(e),
-          width: `${e}px`,
-          height: `${e}px`,
-          borderColor: `color-mix(in srgb, var(--color-destructive) ${n * 100}%, transparent)`
-        }
-      },
-      e
-    )),
-    /* @__PURE__ */ t("div", { className: "relative z-[5] flex w-[80px] h-[80px] justify-center items-center rounded-full bg-destructive", children: /* @__PURE__ */ t("span", { className: "text-[21px] font-bold", children: r }) })
-  ] });
+  const { core: t, rings: e, font: l } = d[i], n = e[e.length - 1]?.[0] ?? t;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "relative flex shrink-0 items-center justify-center",
+      style: { width: n, height: n },
+      children: [
+        e.map(([r, c]) => /* @__PURE__ */ s(
+          "div",
+          {
+            className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-solid bg-transparent",
+            style: {
+              width: r,
+              height: r,
+              borderColor: `color-mix(in srgb, var(--color-destructive) ${c * 100}%, transparent)`
+            }
+          },
+          r
+        )),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: "relative z-[1] flex items-center justify-center rounded-full bg-destructive",
+            style: { width: t, height: t },
+            children: /* @__PURE__ */ s("span", { className: `${l} font-bold`, children: o })
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  d as HFIndicator
+  f as HFIndicator
 };