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

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 E, DEFAULT_AREA_SERIES as A, DEFAULT_OPTIONS as i, DEFAULT_VERTICAL_LINE as p, getDefaultOptions as D, getDefaultSeries as I, getDefaultVerticalLine as L } from "./default-config.js";
+import { getXFormatter as l, getXFormatters as T, getYFormatter as G } from "./formatters.js";
+import { DEFAULT_SERIES_COLORS as f, Graph as m, GraphLegend as n, getSeriesColorPalette as V, getVerticalLineLabelStyle as X, getVerticalLineTooltipContent as h } from "./graph.js";
+import { GraphCurrentValue as F } from "./graph-current-value.js";
+import { GraphTooltip as x } from "./graph-tooltip.js";
+import { GraphView as O, GraphViewWithData as u, graphViewVariants as C, useGraphAside as R } from "./graph-view.js";
+import { VertLine as c } 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,
+  r as AXIS_EDGE_LABEL_PADDING_PX,
+  o as AXIS_FONT_SIZE,
+  a as AXIS_TICK_MARK_DENSITY,
+  _ as AXIS_TIME_EDGE_PADDING_PX,
+  E as AXIS_TOP_LABEL_PADDING_PX,
+  A as DEFAULT_AREA_SERIES,
+  i as DEFAULT_OPTIONS,
+  f as DEFAULT_SERIES_COLORS,
+  p as DEFAULT_VERTICAL_LINE,
+  m as Graph,
+  F as GraphCurrentValue,
+  n as GraphLegend,
+  x as GraphTooltip,
+  O 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 VertLine,
+  D as getDefaultOptions,
+  I as getDefaultSeries,
+  L as getDefaultVerticalLine,
+  V as getSeriesColorPalette,
+  X as getVerticalLineLabelStyle,
+  h as getVerticalLineTooltipContent,
+  l as getXFormatter,
+  T as getXFormatters,
+  G as getYFormatter,
   C as graphViewVariants,
-  I as useGraphAside
+  R as useGraphAside
 };

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

@@ -5,13 +5,12 @@ import { faCaretUp as N, faCaretDown as T } from "@fortawesome/free-solid-svg-ic
 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 $({
   title: l,
   tip: r,
   arrowPosition: i = "left",
@@ -21,7 +20,7 @@ function q({
   onSort: t,
   className: h
 }) {
-  const [x, m] = v.useState(!1), g = !!s || x, a = () => /* @__PURE__ */ e(
+  const [x, a] = v.useState(!1), g = !!s || x, c = () => /* @__PURE__ */ e(
     "span",
     {
       className: n(
@@ -30,7 +29,7 @@ function q({
       ),
       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" })
     }
-  ), c = () => /* @__PURE__ */ o(
+  ), m = () => /* @__PURE__ */ o(
     "button",
     {
       type: "button",
@@ -42,9 +41,9 @@ 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}`;
@@ -52,19 +51,19 @@ function q({
     "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(),
+        ] }) }) : m(),
         r && /* @__PURE__ */ e(p, { children: r })
       ]
     }
   );
 }
-function B({
+function q({
   title: l,
   tip: r,
   className: i
@@ -75,6 +74,6 @@ function B({
   ] });
 }
 export {
-  q as HeadCell,
-  B as SimpleHeadCell
+  $ as HeadCell,
+  q as SimpleHeadCell
 };

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

@@ -1,10 +1,9 @@
 import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import { PERCENTAGE_FACTOR as h, formatPercentage as C } from "@gearbox-protocol/sdk";
+import { PERCENTAGE_FACTOR as h, formatPercentage as C } from "@gearbox-protocol/sdk/onchain";
 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 "luxon";
 import "../../utils/z-index.js";
 import { StatusBars as N, HealthDot as g } from "../status-elements/status-elements.js";
@@ -26,7 +25,7 @@ const A = 15e3, D = 11e3, b = 10500, w = (t) => {
     }
   }
 );
-function k({
+function P({
   value: t,
   debt: s,
   decimals: c = 3,
@@ -61,6 +60,6 @@ function k({
 export {
   D as BAD_HF,
   A as GOOD_HF,
-  k as HealthFactor,
+  P as HealthFactor,
   w as getHFZones
 };

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

@@ -2,10 +2,9 @@ import { jsx as e } from "react/jsx-runtime";
 import { IconQuestionCircle as v, IconInfo as h } from "@gearbox-protocol/static";
 import { cva as T } from "class-variance-authority";
 import * as c from "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 import { SimpleTooltip as C } from "../tooltip/simple-tooltip.js";
@@ -54,8 +53,8 @@ const H = T("transition-colors", {
     iconSize: i = 14,
     iconColor: n = "gray-90",
     iconHoverColor: p = "gray-110",
-    iconVariant: m = "question",
-    onPointerEnter: x,
+    iconVariant: x = "question",
+    onPointerEnter: m,
     ...d
   }, f) => {
     const u = /* @__PURE__ */ e(
@@ -65,8 +64,8 @@ const H = T("transition-colors", {
         iconSize: i,
         iconColor: n,
         iconHoverColor: p,
-        iconVariant: m,
-        onPointerEnter: x,
+        iconVariant: x,
+        onPointerEnter: m,
         className: r,
         ...d
       }

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

@@ -0,0 +1,59 @@
+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"
+}) {
+  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 {
+  f as HFIndicator
+};

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

@@ -0,0 +1,4 @@
+import { HFIndicator as t } from "./hf-indicator.js";
+export {
+  t as HFIndicator
+};

package/dist/esm/components/icon-button/icon-button.js

@@ -1,15 +1,14 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Slot as p } from "@radix-ui/react-slot";
-import { cva as u } from "class-variance-authority";
+import { Slot as m } from "@radix-ui/react-slot";
+import { cva as p } from "class-variance-authority";
 import * as f from "react";
 import { BaseLink as g } from "../base-link/base-link.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as h } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const y = u(
+const y = p(
   "inline-flex items-center justify-center p-0 rounded-full transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default disabled:pointer-events-none",
   {
     variants: {
@@ -33,10 +32,10 @@ const y = u(
     linkProps: i,
     asChild: c = !1,
     disabled: a,
-    children: m,
+    children: u,
     ...s
   }, l) => {
-    const e = m, n = h(
+    const e = u, n = h(
       y({ buttonType: b, className: d }),
       "flex items-center justify-center"
     ), o = {
@@ -54,7 +53,7 @@ const y = u(
         children: e
       }
     ) }) : c ? /* @__PURE__ */ r(
-      p,
+      m,
       {
         ref: l,
         className: n,

package/dist/esm/components/icons/fa-icon.js

@@ -2,14 +2,13 @@ import { jsx as m } from "react/jsx-runtime";
 import { config as i } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon as t } from "@fortawesome/react-fontawesome";
 import "react";
-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";
 i.autoAddCss = !1;
-function x({ className: o, ...r }) {
+function k({ className: o, ...r }) {
   return /* @__PURE__ */ m(
     t,
     {
@@ -19,5 +18,5 @@ function x({ className: o, ...r }) {
   );
 }
 export {
-  x as FaIcon
+  k as FaIcon
 };