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

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

@@ -1,29 +1,31 @@
-import { DEFAULT_AREA_SERIES as r, DEFAULT_OPTIONS as o, DEFAULT_VERTICAL_LINE as a, getDefaultOptions as p, getDefaultSeries as i, getDefaultVerticalLine as E } from "./default-config.js";
-import { getXFormatter as l, getXFormatters as m, getYFormatter as L } from "./formatters.js";
-import { DEFAULT_SERIES_COLORS as V, Graph as h, getSeriesColorPalette as n, getVerticalLineTooltipContent as A } from "./graph.js";
-import { GraphCurrentValue as S } from "./graph-current-value.js";
-import { GraphTooltip as s } from "./graph-tooltip.js";
-import { GraphView as F, GraphViewWithData as _, graphViewVariants as u, useGraphAside as G } from "./graph-view.js";
-import { VertLine as I } from "./plugins/vertical-line.js";
+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";
 export {
   r as DEFAULT_AREA_SERIES,
   o as DEFAULT_OPTIONS,
-  V as DEFAULT_SERIES_COLORS,
+  n as DEFAULT_SERIES_COLORS,
   a as DEFAULT_VERTICAL_LINE,
-  h as Graph,
-  S as GraphCurrentValue,
-  s as GraphTooltip,
-  F as GraphView,
-  _ as GraphViewWithData,
-  I as VertLine,
-  p as getDefaultOptions,
-  i as getDefaultSeries,
-  E as getDefaultVerticalLine,
-  n as getSeriesColorPalette,
-  A as getVerticalLineTooltipContent,
-  l as getXFormatter,
-  m as getXFormatters,
-  L as getYFormatter,
-  u as graphViewVariants,
-  G as useGraphAside
+  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
 };

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

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

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

@@ -0,0 +1,33 @@
+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"
+}) {
+  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 }) })
+  ] });
+}
+export {
+  d 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/icons/index.js

@@ -1,42 +1,43 @@
-import { faArrowDown as r, faArrowLeft as e, faArrowRight as o, faArrowUp as i, faArrowsUpDown as t, faBars as l, faBolt as s, faCaretDown as C, faCaretLeft as n, faCaretRight as c, faCaretUp as g, faCheck as h, faChevronLeft as w, faChevronRight as p, faCircle as m, faCircleCheck as U, faCircleExclamation as u, faCirclePlus as A, faCircleQuestion as R, faCloud as d, faCog as k, faCreditCard as x, faEllipsisVertical as E, faEnvelope as L, faKeyboard as v, faLifeRing as B, faMagnifyingGlass as D, faMessage as P, faPlus as y, faRightFromBracket as F, faTrash as M, faTriangleExclamation as T, faUser as b, faUserPlus as G, faUsers as I, faWallet as K, faXmark as Q } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as W } from "./fa-icon.js";
+import { faArrowDown as r, faArrowLeft as e, faArrowRight as o, faArrowUp as i, faArrowsUpDown as t, faBars as l, faBolt as C, faCaretDown as s, faCaretLeft as n, faCaretRight as c, faCaretUp as g, faCheck as h, faChevronDown as w, faChevronLeft as p, faChevronRight as m, faCircle as U, faCircleCheck as u, faCircleExclamation as A, faCirclePlus as R, faCircleQuestion as d, faCloud as k, faCog as v, faCreditCard as x, faEllipsisVertical as D, faEnvelope as E, faKeyboard as L, faLifeRing as B, faMagnifyingGlass as P, faMessage as y, faPlus as F, faRightFromBracket as M, faTrash as T, faTriangleExclamation as b, faUser as G, faUserPlus as I, faUsers as K, faWallet as Q, faXmark as V } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as X } from "./fa-icon.js";
 export {
-  W as FaIcon,
+  X as FaIcon,
   r as faArrowDown,
   e as faArrowLeft,
   o as faArrowRight,
   i as faArrowUp,
   t as faArrowsUpDown,
   l as faBars,
-  s as faBolt,
-  C as faCaretDown,
+  C as faBolt,
+  s as faCaretDown,
   n as faCaretLeft,
   c as faCaretRight,
   g as faCaretUp,
   h as faCheck,
-  w as faChevronLeft,
-  p as faChevronRight,
-  m as faCircle,
-  U as faCircleCheck,
-  u as faCircleExclamation,
-  A as faCirclePlus,
-  R as faCircleQuestion,
-  d as faCloud,
-  k as faCog,
+  w as faChevronDown,
+  p as faChevronLeft,
+  m as faChevronRight,
+  U as faCircle,
+  u as faCircleCheck,
+  A as faCircleExclamation,
+  R as faCirclePlus,
+  d as faCircleQuestion,
+  k as faCloud,
+  v as faCog,
   x as faCreditCard,
-  E as faEllipsisVertical,
-  L as faEnvelope,
-  v as faKeyboard,
+  D as faEllipsisVertical,
+  E as faEnvelope,
+  L as faKeyboard,
   B as faLifeRing,
-  D as faMagnifyingGlass,
-  P as faMessage,
-  y as faPlus,
-  F as faRightFromBracket,
-  M as faTrash,
-  T as faTriangleExclamation,
-  b as faUser,
-  G as faUserPlus,
-  I as faUsers,
-  K as faWallet,
-  Q as faXmark
+  P as faMagnifyingGlass,
+  y as faMessage,
+  F as faPlus,
+  M as faRightFromBracket,
+  T as faTrash,
+  b as faTriangleExclamation,
+  G as faUser,
+  I as faUserPlus,
+  K as faUsers,
+  Q as faWallet,
+  V as faXmark
 };