@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.1

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

@@ -1,31 +1,4 @@
-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 { DEFAULT_SERIES_COLORS as o } from "./graph-vocabulary.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
+  o as DEFAULT_SERIES_COLORS
 };

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

@@ -0,0 +1,10 @@
+function c(t) {
+  let r = 0;
+  return t.map((e) => {
+    const l = e.priceScaleId ?? (r === 0 ? "left" : "right");
+    return e.data.length > 0 && r++, { series: e, side: l };
+  });
+}
+export {
+  c as resolvePriceScaleSides
+};

package/dist/esm/components/graph/series-palette.js

@@ -0,0 +1,12 @@
+import { hslToHex as s, generateColorsFromBase as m } from "./colors.js";
+import { DEFAULT_SERIES_COLORS as t } from "./graph-vocabulary.js";
+const c = 137.5;
+function C(o) {
+  if (o < t.length)
+    return t[o];
+  const r = (o - t.length) * c % 360, e = s(r, 70, 50), { topColor: n, bottomColor: l } = m(e);
+  return { line: e, top: n, bottom: l };
+}
+export {
+  C as getSeriesColorPalette
+};

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

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

@@ -1,5 +1,4 @@
-import { HeadCell as a, SimpleHeadCell as d } from "./head-cell.js";
+import { HeadCell as o } from "./head-cell.js";
 export {
-  a as HeadCell,
-  d as SimpleHeadCell
+  o as HeadCell
 };

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

@@ -1,17 +1,14 @@
-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 "luxon";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { formatPercentage as A, PERCENTAGE_FACTOR 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 "../../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 > N ? "critical" : "liquidation";
+}, B = C(
   "inline-flex items-center font-medium [text-decoration:inherit]",
   {
     variants: {
@@ -26,41 +23,40 @@ const A = 15e3, D = 11e3, b = 10500, w = (t) => {
     }
   }
 );
-function k({
+function G({
   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", v = !r && o && e === "bars", i = d ? o === void 0 ? w(t) : o : void 0, a = i === void 0 ? void 0 : i === null ? "unset" : i, p = () => {
     if (r) return "N/A";
-    const v = Number(t);
-    return C(v, c);
+    const x = Number(t);
+    return A(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 }) }),
+        v && /* @__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,
         p(),
-        l && /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(g, { zone: o }) })
+        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,
-  w as getHFZones
+  G as HealthFactor
 };

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

@@ -1,7 +1,4 @@
-import { BAD_HF as t, GOOD_HF as F, HealthFactor as H, getHFZones as r } from "./health-factor.js";
+import { HealthFactor as t } from "./health-factor.js";
 export {
-  t as BAD_HF,
-  F as GOOD_HF,
-  H as HealthFactor,
-  r as getHFZones
+  t as HealthFactor
 };

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

@@ -0,0 +1,41 @@
+import { jsx as r } from "react/jsx-runtime";
+import { faCircleQuestion as p } from "@fortawesome/free-solid-svg-icons";
+import { IconInfo as a } from "@gearbox-protocol/static";
+import * as s from "react";
+import { FaIcon as c } from "../icons/fa-icon.js";
+import { cn as l } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+const f = s.forwardRef(
+  ({
+    className: t,
+    iconSize: o = 14,
+    iconVariant: i = "question",
+    onPointerEnter: e,
+    ...m
+  }, n) => /* @__PURE__ */ r(
+    "span",
+    {
+      ref: n,
+      role: "img",
+      "aria-hidden": !0,
+      className: l(
+        "inline-block cursor-help transition-colors text-gray-90 hover:text-gray-110",
+        t
+      ),
+      onPointerEnter: e,
+      ...m,
+      children: i === "question" ? /* @__PURE__ */ r(
+        c,
+        {
+          icon: p,
+          style: { width: o, height: o }
+        }
+      ) : /* @__PURE__ */ r(a, { size: o })
+    }
+  )
+);
+f.displayName = "HelpTipIcon";
+export {
+  f as HelpTipIcon
+};

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

@@ -1,131 +1,45 @@
-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 { 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";
-const H = T("transition-colors", {
-  variants: {
-    iconColor: {
-      "gray-10": "text-gray-10",
-      "gray-20": "text-gray-20",
-      "gray-30": "text-gray-30",
-      "gray-40": "text-gray-40",
-      "gray-50": "text-gray-50",
-      "gray-60": "text-gray-60",
-      "gray-70": "text-gray-70",
-      "gray-80": "text-gray-80",
-      "gray-90": "text-gray-90",
-      "gray-100": "text-gray-100",
-      "gray-110": "text-gray-110",
-      muted: "text-secondary-foreground",
-      foreground: "text-foreground"
-    },
-    iconHoverColor: {
-      "gray-10": "hover:text-gray-10",
-      "gray-20": "hover:text-gray-20",
-      "gray-30": "hover:text-gray-30",
-      "gray-40": "hover:text-gray-40",
-      "gray-50": "hover:text-gray-50",
-      "gray-60": "hover:text-gray-60",
-      "gray-70": "hover:text-gray-70",
-      "gray-80": "hover:text-gray-80",
-      "gray-90": "hover:text-gray-90",
-      "gray-100": "hover:text-gray-100",
-      "gray-110": "hover:text-gray-110",
-      muted: "hover:text-secondary-foreground",
-      foreground: "hover:text-foreground"
-    }
-  },
-  defaultVariants: { iconColor: "gray-90", iconHoverColor: "gray-110" }
-}), I = c.forwardRef(
+import { jsx as o } from "react/jsx-runtime";
+import * as T from "react";
+import { SimpleTooltip as H } from "../tooltip/simple-tooltip.js";
+import { HelpTipIcon as d } from "./help-tip-icon.js";
+const u = T.forwardRef(
   ({
-    className: r,
-    children: o,
-    maxWidth: t,
-    minWidth: a,
-    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,
+    className: t,
+    children: p,
+    maxWidth: i,
+    minWidth: r,
+    delayShow: e = 200,
+    placement: m = "bottom",
+    iconSize: l = 14,
+    iconVariant: f = "question",
+    onPointerEnter: n,
+    ...s
+  }, a) => {
+    const c = /* @__PURE__ */ o(
+      d,
       {
-        ref: f,
-        iconSize: i,
-        iconColor: n,
-        iconHoverColor: p,
-        iconVariant: m,
-        onPointerEnter: x,
-        className: r,
-        ...d
+        ref: a,
+        iconSize: l,
+        iconVariant: f,
+        onPointerEnter: n,
+        className: t,
+        ...s
       }
     );
-    return /* @__PURE__ */ e(
-      C,
+    return /* @__PURE__ */ o(
+      H,
       {
-        title: u,
-        placement: y,
-        delayShow: g,
-        maxWidth: t,
-        minWidth: a,
-        children: o
+        title: c,
+        placement: m,
+        delayShow: e,
+        maxWidth: i,
+        minWidth: r,
+        children: p
       }
     );
   }
 );
-I.displayName = "HelpTip";
-const l = c.forwardRef(
-  ({
-    className: r,
-    iconSize: o = 14,
-    iconColor: t = "gray-90",
-    iconHoverColor: a = "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 })
-      }
-    );
-  }
-);
-l.displayName = "HelpTipIcon";
-const N = c.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ e(
-  "span",
-  {
-    ref: t,
-    className: s("ml-1.5 inline-block leading-[0]", r),
-    ...o
-  }
-));
-N.displayName = "TipWrap";
+u.displayName = "HelpTip";
 export {
-  I as HelpTip,
-  l as HelpTipIcon,
-  N as TipWrap
+  u as HelpTip
 };

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

@@ -1,6 +1,4 @@
-import { HelpTip as i, HelpTipIcon as o, TipWrap as r } from "./help-tip.js";
+import { HelpTip as o } from "./help-tip.js";
 export {
-  i as HelpTip,
-  o as HelpTipIcon,
-  r as TipWrap
+  o as HelpTip
 };