@gearbox-protocol/permissionless-ui 1.22.0-next.40 → 1.22.0-next.41

package/dist/esm/components/block-sync/block-sync.js

@@ -87,6 +87,7 @@ import "../graph/formatters.js";
 import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
@@ -95,6 +96,7 @@ import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
 import "../../utils/reactochart-compat.js";
+import "../status-elements/status-elements.js";
 import "react-markdown";
 import "remark-gfm";
 import "../navbar/navbar.js";
@@ -126,7 +128,7 @@ import "../vertical-indicator/vertical-indicator.js";
 import "../vertical-list/vertical-list.js";
 import "../with-filter-button/with-filter-button.js";
 const D = 1e3 * 60 * 10;
-function Wr({
+function Yr({
   blockByChain: i,
   explorerAddresses: S,
   networkById: v
@@ -190,5 +192,5 @@ function Wr({
   return i ? /* @__PURE__ */ o(j, { title: d(), children: N() }) : /* @__PURE__ */ o("div", { className: "select-none", children: d() });
 }
 export {
-  Wr as BlockSync
+  Yr as BlockSync
 };

package/dist/esm/components/checkbox/checkbox-labeled.js

@@ -87,6 +87,7 @@ import "../graph/formatters.js";
 import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
@@ -95,6 +96,7 @@ import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 import "../layout/layout/layout.js";
 import "../../utils/reactochart-compat.js";
+import "../status-elements/status-elements.js";
 import "react-markdown";
 import "remark-gfm";
 import "../navbar/navbar.js";

package/dist/esm/components/client-adapters/styled-rounded-image/styled-rounded-image.js

@@ -87,6 +87,7 @@ import "../../graph/formatters.js";
 import "lightweight-charts";
 import "../../graph/graph-view.js";
 import "../../help-tip/help-tip.js";
+import "../../health-factor/health-factor.js";
 import "../../horizontal-indicator/horizontal-indicator.js";
 import "../../layout/col/col.js";
 import "../../layout/container/container.js";
@@ -95,6 +96,7 @@ import "../../layout/grid/grid.js";
 import "../../layout/header/header.js";
 import "../../layout/layout/layout.js";
 import "../../../utils/reactochart-compat.js";
+import "../../status-elements/status-elements.js";
 import "react-markdown";
 import "remark-gfm";
 import "../../navbar/navbar.js";

package/dist/esm/components/complex-input/complex-input.js

@@ -89,6 +89,7 @@ import "../graph/formatters.js";
 import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
@@ -98,6 +99,7 @@ import "../layout/header/header.js";
 import "../layout/layout/layout.js";
 import "../../utils/reactochart-compat.js";
 import { ShortString as j } from "../short-string/short-string.js";
+import "../status-elements/status-elements.js";
 import "react-markdown";
 import "remark-gfm";
 import "../navbar/navbar.js";
@@ -174,7 +176,7 @@ function A({
     ) })
   ] });
 }
-function pr({
+function nr({
   titleProps: e,
   inputProps: n,
   balanceIndicatorProps: s
@@ -237,5 +239,5 @@ function pr({
 }
 export {
   A as BalanceIndicator,
-  pr as ComplexInput
+  nr as ComplexInput
 };

package/dist/esm/components/fadeout-loading/fadeout-loading.js

@@ -1,22 +1,22 @@
-import { jsx as m } from "react/jsx-runtime";
-import * as n from "react";
+import { jsx as s } from "react/jsx-runtime";
+import * as p from "react";
 import "@gearbox-protocol/sdk";
-import { cn as p } from "../../utils/cn.js";
+import { cn as n } from "../../utils/cn.js";
 import "sonner";
-const d = n.forwardRef(
-  ({ className: o, loading: a = !1, duration: t = 150, children: i, style: e, ...r }, s) => /* @__PURE__ */ m(
+const d = p.forwardRef(
+  ({ className: a, loading: o, duration: t = 100, children: r, style: i, ...e }, m) => /* @__PURE__ */ s(
     "span",
     {
-      ref: s,
-      className: p("inline-flex", o),
+      ref: m,
+      className: n(a),
       style: {
-        opacity: a ? 0.5 : 1,
+        opacity: o ? 0.5 : 1,
         transition: `opacity ${t}ms ease-in-out`,
-        ...e
+        ...i
       },
-      "data-loading": a,
-      ...r,
-      children: i
+      "data-loading": o,
+      ...e,
+      children: r
     }
   )
 );

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

@@ -1,51 +1,62 @@
-import { jsx as g } from "react/jsx-runtime";
-import { PERCENTAGE_FACTOR as i } from "@gearbox-protocol/sdk";
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
+import { PERCENTAGE_FACTOR as v, formatPercentage as x } from "@gearbox-protocol/sdk";
+import { cva as p } from "class-variance-authority";
 import "react";
-import { cn as p } from "../../utils/cn.js";
+import { cn as C } from "../../utils/cn.js";
 import "sonner";
-import { formatPercentAmount as v } from "../../utils/format-money.js";
-const x = 15e3, A = 11e3, C = 10500, F = (r) => {
-  if (!r) return;
-  const t = Number(r);
-  return t >= x ? "good" : t > A ? "medium" : t > C ? "bad" : t > i ? "critical" : "liquidation";
-};
-function I({
-  value: r,
-  debt: t,
-  decimals: u = 3,
-  zone: e,
-  showColor: c = !0,
-  className: s,
+import { StatusBars as F } from "../status-elements/status-elements.js";
+const g = 15e3, A = 11e3, H = 10500, N = (t) => {
+  if (t)
+    return t >= g ? "good" : t > A ? "medium" : t > H ? "bad" : t > v ? "critical" : "liquidation";
+}, b = p(
+  "inline-flex items-center font-medium [text-decoration:inherit]",
+  {
+    variants: {
+      zone: {
+        good: "text-success",
+        medium: "text-warning",
+        bad: "text-destructive",
+        critical: "text-destructive",
+        liquidation: "text-liquidation",
+        unset: "[color:unset]"
+      }
+    }
+  }
+);
+function R({
+  value: t,
+  debt: e,
+  decimals: a = 3,
+  zone: o,
+  zoneType: n = "color",
+  className: u,
   ...m
 }) {
-  const n = t !== void 0 && t === 0n, o = (() => {
-    if (!n)
-      return e ?? F(r);
-  })(), a = () => {
-    if (!c || o === void 0) return "";
-    switch (o) {
-      case "good":
-        return "text-green-600";
-      case "medium":
-        return "text-yellow-600";
-      case "bad":
-        return "text-orange-500";
-      case "critical":
-      case "liquidation":
-        return "text-destructive";
-      default:
-        return "";
-    }
-  }, d = () => {
-    if (n) return "N/A";
-    const f = Number(r) / Number(i), l = v(f, u, !1);
-    return String(l);
+  const i = e !== void 0 && e === 0n, r = !i && n === "color" ? o === void 0 ? N(t) : o : void 0, s = r === void 0 ? void 0 : r === null ? "unset" : r, d = () => {
+    if (i) return "N/A";
+    const l = Number(t);
+    return x(l, a);
   };
-  return /* @__PURE__ */ g("div", { className: p("font-medium", a(), s), ...m, children: d() });
+  return /* @__PURE__ */ f(
+    "span",
+    {
+      className: C(
+        b(
+          s !== void 0 ? { zone: s } : {}
+        ),
+        u
+      ),
+      ...m,
+      children: [
+        o && n === "bars" && /* @__PURE__ */ c("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ c(F, { zone: o }) }),
+        d()
+      ]
+    }
+  );
 }
 export {
   A as BAD_HF,
-  x as GOOD_HF,
-  I as HealthFactor,
-  F as getHFZones
+  g as GOOD_HF,
+  R as HealthFactor,
+  N as getHFZones
 };

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

@@ -1,80 +1,129 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { IconQuestionCircle as s } from "@gearbox-protocol/static";
+import { jsx as e } from "react/jsx-runtime";
+import { IconQuestionCircle as u, IconInfo as v } from "@gearbox-protocol/static";
+import { cva as T } from "class-variance-authority";
 import * as l from "react";
 import "@gearbox-protocol/sdk";
-import { cn as t } from "../../utils/cn.js";
+import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import "../tooltip/simple-tooltip.js";
-import { TooltipProvider as T, Tooltip as h, TooltipTrigger as y, TooltipContent as g } from "../tooltip/tooltip.js";
-const N = l.forwardRef(
+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 = l.forwardRef(
   ({
-    className: r,
-    children: o,
-    maxWidth: i,
-    minWidth: n,
-    delayShow: p = 200,
-    delayHide: w = 150,
-    side: a = "bottom",
-    iconSize: c = 14,
-    sideOffset: m = 4,
-    onPointerEnter: d,
-    ...f
-  }, u) => /* @__PURE__ */ e(T, { delayDuration: p, children: /* @__PURE__ */ x(h, { children: [
-    /* @__PURE__ */ e(y, { asChild: !0, children: /* @__PURE__ */ e(
-      "span",
+    className: t,
+    children: r,
+    maxWidth: o,
+    minWidth: a,
+    delayShow: g = 200,
+    placement: y = "bottom",
+    iconSize: n = 14,
+    iconColor: i = "gray-90",
+    iconHoverColor: s = "gray-110",
+    iconVariant: x = "question",
+    onPointerEnter: m,
+    ...d
+  }, f) => {
+    const h = /* @__PURE__ */ e(
+      c,
       {
-        ref: u,
-        className: t(
-          "inline-flex items-center justify-center cursor-help text-muted-foreground hover:text-foreground transition-colors",
-          r
-        ),
-        onPointerEnter: d,
-        ...f,
-        children: /* @__PURE__ */ e(s, { size: c })
+        ref: f,
+        iconSize: n,
+        iconColor: i,
+        iconHoverColor: s,
+        iconVariant: x,
+        onPointerEnter: m,
+        className: t,
+        ...d
       }
-    ) }),
-    /* @__PURE__ */ e(
-      g,
+    );
+    return /* @__PURE__ */ e(
+      C,
       {
-        side: a,
-        sideOffset: m,
-        className: t("max-w-xs"),
-        style: {
-          maxWidth: i,
-          minWidth: n
-        },
-        children: o
+        title: h,
+        placement: y,
+        delayShow: g,
+        maxWidth: o,
+        minWidth: a,
+        children: r
       }
-    )
-  ] }) })
+    );
+  }
 );
-N.displayName = "HelpTip";
-const H = l.forwardRef(
-  ({ className: r, iconSize: o = 14, ...i }, n) => /* @__PURE__ */ e(
-    "span",
-    {
-      ref: n,
-      className: t(
-        "inline-flex items-center justify-center cursor-help text-muted-foreground hover:text-foreground transition-colors",
-        r
-      ),
-      ...i,
-      children: /* @__PURE__ */ e(s, { size: o })
-    }
-  )
+I.displayName = "HelpTip";
+const c = l.forwardRef(
+  ({
+    className: t,
+    iconSize: r = 14,
+    iconColor: o = "gray-90",
+    iconHoverColor: a = "gray-110",
+    iconVariant: g = "question",
+    onPointerEnter: y,
+    ...n
+  }, i) => {
+    const s = g === "question" ? u : v;
+    return /* @__PURE__ */ e(
+      "span",
+      {
+        ref: i,
+        role: "img",
+        "aria-hidden": !0,
+        className: p(
+          "inline-block cursor-help",
+          H({ iconColor: o, iconHoverColor: a }),
+          t
+        ),
+        style: { width: r, height: r },
+        onPointerEnter: y,
+        ...n,
+        children: /* @__PURE__ */ e(s, { size: r })
+      }
+    );
+  }
 );
-H.displayName = "HelpTipIcon";
-const j = l.forwardRef(({ className: r, ...o }, i) => /* @__PURE__ */ e(
+c.displayName = "HelpTipIcon";
+const N = l.forwardRef(({ className: t, ...r }, o) => /* @__PURE__ */ e(
   "span",
   {
-    ref: i,
-    className: t("ml-1.5 inline-block leading-none", r),
-    ...o
+    ref: o,
+    className: p("ml-1.5 inline-block leading-none", t),
+    ...r
   }
 ));
-j.displayName = "TipWrap";
+N.displayName = "TipWrap";
 export {
-  N as HelpTip,
-  H as HelpTipIcon,
-  j as TipWrap
+  I as HelpTip,
+  c as HelpTipIcon,
+  N as TipWrap
 };