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

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

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

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

@@ -0,0 +1 @@
+

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/head-cell/head-cell.js

@@ -1,78 +1,66 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-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 { 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 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 { 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 { cn as n } from "../../utils/cn.js";
-import "luxon";
 import "../../utils/z-index.js";
-function U({
-  title: l,
-  tip: r,
-  arrowPosition: i = "left",
+function R({
+  title: d,
+  tip: i,
+  arrowPosition: n = "left",
   sortDirection: s,
   sortField: p = "this field",
-  sortTip: u,
-  onSort: t,
-  className: h
+  sortTip: f,
+  onSort: e,
+  className: u
 }) {
-  const [x, a] = T.useState(!1), g = !!s || x, c = () => /* @__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: v, className: "size-3 text-muted-foreground" }) : /* @__PURE__ */ e(d, { icon: N, 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" })
     }
-  ), m = () => /* @__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" && c(),
-        l,
-        t && i === "right" && c()
+        e && n === "left" && a(),
+        d,
+        e && n === "right" && a()
       ]
     }
-  ), C = `Sort by ${p}`;
-  return /* @__PURE__ */ o(
+  ), g = `Sort by ${p}`;
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: n("inline-flex items-center gap-1.5", h),
-      onPointerEnter: () => a(!0),
-      onPointerLeave: () => a(!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: m() }),
-          /* @__PURE__ */ e(w, { children: u || C })
-        ] }) }) : m(),
-        r && /* @__PURE__ */ e(f, { children: r })
+        e ? /* @__PURE__ */ t(N, { children: /* @__PURE__ */ r(b, { children: [
+          /* @__PURE__ */ t(w, { asChild: !0, children: c() }),
+          /* @__PURE__ */ t(H, { children: f || g })
+        ] }) }) : c(),
+        i && /* @__PURE__ */ t(y, { children: i })
       ]
     }
   );
 }
-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(f, { children: r })
-  ] });
-}
 export {
-  U as HeadCell,
-  $ 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,14 +1,13 @@
 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 { 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 "luxon";
 import "../../utils/z-index.js";
 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 >= O ? "good" : t > _ ? "medium" : t > b ? "bad" : t > A ? "critical" : "liquidation";
+    return t >= O ? "good" : t > _ ? "medium" : t > b ? "bad" : t > N ? "critical" : "liquidation";
 }, B = C(
   "inline-flex items-center font-medium [text-decoration:inherit]",
   {
@@ -24,7 +23,7 @@ const O = 15e3, _ = 11e3, b = 10500, w = (t) => {
     }
   }
 );
-function L({
+function G({
   value: t,
   debt: s,
   decimals: c = 3,
@@ -34,10 +33,10 @@ function L({
   className: l,
   ...u
 }) {
-  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 = () => {
+  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 x = Number(t);
-    return N(x, c);
+    return A(x, c);
   };
   return /* @__PURE__ */ h(
     "span",
@@ -50,17 +49,14 @@ function L({
       ),
       ...u,
       children: [
-        p && /* @__PURE__ */ n("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ n(g, { 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,
-        v(),
+        p(),
         f && /* @__PURE__ */ n("span", { className: "ml-1.5", children: /* @__PURE__ */ n(D, { zone: o }) })
       ]
     }
   );
 }
 export {
-  _ as BAD_HF,
-  O as GOOD_HF,
-  L 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/health-factor/zones.js

@@ -0,0 +1 @@
+

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

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

@@ -1,13 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
-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/onchain";
+import { Slot as f } from "@radix-ui/react-slot";
+import { cva as m } from "class-variance-authority";
+import * as g from "react";
+import { BaseLink as p } from "../base-link/base-link.js";
 import { cn as h } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const y = p(
+const y = m(
   "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: {
@@ -15,15 +14,14 @@ const y = p(
         outlined: "bg-transparent border border-white/20 hover:border-white/30 disabled:border-white/10",
         filled: "border-0 bg-gray-70 hover:bg-gray-90 disabled:bg-transparent",
         filledDark: "border-0 bg-gray-30 hover:bg-gray-50 disabled:bg-transparent",
-        hollow: "border-0 bg-transparent hover:bg-gray-20 disabled:bg-transparent",
-        empty: "border-0 bg-transparent hover:opacity-80 disabled:bg-transparent"
+        hollow: "border-0 bg-transparent hover:bg-gray-20 disabled:bg-transparent"
       }
     },
     defaultVariants: {
       buttonType: "outlined"
     }
   }
-), v = f.forwardRef(
+), v = g.forwardRef(
   ({
     className: d,
     buttonType: b = "outlined",
@@ -43,7 +41,7 @@ const y = p(
       minWidth: t,
       minHeight: t
     };
-    return i ? /* @__PURE__ */ e(g, { ...i, children: /* @__PURE__ */ e(
+    return i ? /* @__PURE__ */ e(p, { ...i, children: /* @__PURE__ */ e(
       "span",
       {
         className: n,
@@ -52,7 +50,7 @@ const y = p(
         children: r
       }
     ) }) : c ? /* @__PURE__ */ e(
-      m,
+      f,
       {
         ref: l,
         className: n,
@@ -76,6 +74,5 @@ const y = p(
 );
 v.displayName = "IconButton";
 export {
-  v as IconButton,
-  y as iconButtonVariants
+  v as IconButton
 };

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

@@ -1,5 +1,4 @@
-import { IconButton as n, iconButtonVariants as r } from "./icon-button.js";
+import { IconButton as n } from "./icon-button.js";
 export {
-  n as IconButton,
-  r as iconButtonVariants
+  n as IconButton
 };

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

@@ -1,20 +1,19 @@
 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 { FontAwesomeIcon as n } from "@fortawesome/react-fontawesome";
+import { cn as t } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as n } from "../../utils/cn.js";
-import "luxon";
 import "../../utils/z-index.js";
 i.autoAddCss = !1;
-function u({ className: o, ...r }) {
+function l({ className: o, ...r }) {
   return /* @__PURE__ */ m(
-    t,
+    n,
     {
-      className: n("inline-block shrink-0", o),
+      className: t("inline-block shrink-0", o),
       ...r
     }
   );
 }
 export {
-  u as FaIcon
+  l as FaIcon
 };