@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

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

@@ -1,51 +1,63 @@
-import { jsx as g } from "react/jsx-runtime";
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
+import { PERCENTAGE_FACTOR as v, formatPercentage as p } from "@gearbox-protocol/sdk";
+import { cva as x } 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 "@gearbox-protocol/sdk";
-import { PERCENTAGE_FACTOR as i, 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,
-  ...a
-}) {
-  const n = t !== void 0 && t === 0n, o = (() => {
-    if (!n)
-      return e ?? F(r);
-  })(), m = () => {
-    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 "";
+import "luxon";
+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 = x(
+  "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]"
+      }
     }
-  }, d = () => {
-    if (n) return "N/A";
-    const f = Number(r) / i, l = v(f, u, !1);
-    return String(l);
+  }
+);
+function j({
+  value: t,
+  debt: e,
+  decimals: a = 3,
+  zone: o,
+  zoneType: n = "color",
+  className: m,
+  ...u
+}) {
+  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 p(l, a);
   };
-  return /* @__PURE__ */ g("div", { className: p("font-medium", m(), s), ...a, children: d() });
+  return /* @__PURE__ */ f(
+    "span",
+    {
+      className: C(
+        b(
+          s !== void 0 ? { zone: s } : {}
+        ),
+        m
+      ),
+      ...u,
+      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,
+  j as HealthFactor,
+  N as getHFZones
 };

package/dist/esm/components/help-center-container/help-center-container.js

@@ -1,73 +1,63 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useState as s, useEffect as u } from "react";
+import { useState as s, useEffect as a } from "react";
 import { BlockSync as h } from "../block-sync/block-sync.js";
 import { cn as g } from "../../utils/cn.js";
-function w() {
-  const [t, i] = s(
-    typeof window < "u" ? window.scrollY : 0
-  ), [e, c] = s(
-    typeof document < "u" ? document.documentElement.clientHeight : 0
-  );
-  u(() => {
-    const n = () => {
-      i(window.scrollY);
-    }, o = () => {
-      c(document.documentElement.clientHeight);
-    };
-    return window.addEventListener("scroll", n), window.addEventListener("resize", o), () => {
-      window.removeEventListener("scroll", n), window.removeEventListener("resize", o);
-    };
-  }, []);
-  const d = typeof document < "u" ? Math.max(
-    document.body.scrollHeight,
-    document.documentElement.scrollHeight,
-    document.body.offsetHeight,
-    document.documentElement.offsetHeight,
-    document.body.clientHeight,
-    document.documentElement.clientHeight
-  ) : 0;
-  return {
-    pageVerticalOffset: t,
-    clientHeight: e,
-    clientOffsetHeight: d
-  };
-}
-function E({
-  blockSyncProps: t,
+function y({
+  blockSyncProps: e,
   footerHeight: i,
-  gapFromFooter: e
+  gapFromFooter: t
 }) {
-  const [c, d] = s(e), { pageVerticalOffset: n, clientOffsetHeight: o, clientHeight: l } = w();
-  return u(() => {
-    const r = i + e, m = o - (l + n), a = m < r ? r - m : 0;
-    d(e + a);
-  }, [
-    n,
-    l,
-    o,
-    i,
-    e
-  ]), /* @__PURE__ */ f(
+  const [c, o] = s(t), { pageVerticalOffset: n, clientOffsetHeight: l, clientHeight: d } = H();
+  return a(() => {
+    const r = i + t, m = l - (d + n), u = m < r ? r - m : 0;
+    o(t + u);
+  }, [n, d, l]), /* @__PURE__ */ f(
     "div",
     {
       className: g(
         // Desktop: fixed position with dynamic bottom
         "hidden sm:flex",
-        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]",
-        "transition-[bottom] duration-300 ease-in-out"
+        "fixed right-9 flex-col items-end gap-2 text-xs text-muted-foreground z-[100]"
       ),
       style: { bottom: `${c}px` },
       children: /* @__PURE__ */ f(
         h,
         {
-          blockByChain: t.blockByChain,
-          explorerAddresses: t.explorerAddresses,
-          networkById: t.networkById
+          blockByChain: e.blockByChain,
+          explorerAddresses: e.explorerAddresses,
+          networkById: e.networkById
         }
       )
     }
   );
 }
+const w = () => Math.max(
+  document.body.scrollHeight,
+  document.documentElement.scrollHeight,
+  document.body.offsetHeight,
+  document.documentElement.offsetHeight,
+  document.body.clientHeight,
+  document.documentElement.clientHeight
+);
+function H() {
+  const [e, i] = s(window.scrollY), [t, c] = s(
+    document.documentElement.clientHeight
+  );
+  return a(() => {
+    const o = () => {
+      i(window.scrollY);
+    }, n = () => {
+      c(document.documentElement.clientHeight);
+    };
+    return window.addEventListener("scroll", o), window.addEventListener("resize", n), () => {
+      window.removeEventListener("scroll", o), window.removeEventListener("resize", n);
+    };
+  }, []), {
+    pageVerticalOffset: e,
+    clientHeight: t,
+    clientOffsetHeight: w()
+  };
+}
 export {
-  E as HelpCenterContainer
+  y as HelpCenterContainer
 };

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

@@ -1,18 +1,19 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function d({ children: e, className: t }) {
+import "luxon";
+function u({ children: e, className: t }) {
   return /* @__PURE__ */ r("div", { className: o("space-y-4", t), children: e });
 }
-function u({ title: e, children: t, className: m }) {
+function f({ title: e, children: t, className: m }) {
   return /* @__PURE__ */ s("div", { className: o("space-y-2", m), children: [
     e && /* @__PURE__ */ r("h3", { className: "text-sm font-medium text-foreground", children: e }),
     /* @__PURE__ */ r("div", { className: "text-sm text-muted-foreground", children: t })
   ] });
 }
 export {
-  u as HelpSection,
-  d as HelpSections
+  f as HelpSection,
+  u as HelpSections
 };

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

@@ -1,79 +1,129 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { HelpCircle as s } from "lucide-react";
-import * as l from "react";
-import { cn as t } from "../../utils/cn.js";
-import "sonner";
+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 p from "react";
 import "@gearbox-protocol/sdk";
-import { TooltipProvider as T, Tooltip as h, TooltipTrigger as y, TooltipContent as g } from "../tooltip/tooltip.js";
-const N = l.forwardRef(
+import { cn as s } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+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 = p.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",
+    maxWidth: t,
+    minWidth: a,
+    delayShow: g = 200,
+    placement: y = "bottom",
+    iconSize: i = 14,
+    iconColor: n = "gray-90",
+    iconHoverColor: c = "gray-110",
+    iconVariant: x = "question",
+    onPointerEnter: m,
+    ...d
+  }, f) => {
+    const u = /* @__PURE__ */ e(
+      l,
       {
-        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: i,
+        iconColor: n,
+        iconHoverColor: c,
+        iconVariant: x,
+        onPointerEnter: m,
+        className: r,
+        ...d
       }
-    ) }),
-    /* @__PURE__ */ e(
-      g,
+    );
+    return /* @__PURE__ */ e(
+      C,
       {
-        side: a,
-        sideOffset: m,
-        className: t("max-w-xs"),
-        style: {
-          maxWidth: i,
-          minWidth: n
-        },
+        title: u,
+        placement: y,
+        delayShow: g,
+        maxWidth: t,
+        minWidth: a,
         children: o
       }
-    )
-  ] }) })
+    );
+  }
 );
-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 l = p.forwardRef(
+  ({
+    className: r,
+    iconSize: o = 14,
+    iconColor: t = "gray-90",
+    iconHoverColor: a = "gray-110",
+    iconVariant: g = "question",
+    onPointerEnter: y,
+    ...i
+  }, n) => {
+    const c = 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(c, { size: o })
+      }
+    );
+  }
 );
-H.displayName = "HelpTipIcon";
-const j = l.forwardRef(({ className: r, ...o }, i) => /* @__PURE__ */ e(
+l.displayName = "HelpTipIcon";
+const N = p.forwardRef(({ className: r, ...o }, t) => /* @__PURE__ */ e(
   "span",
   {
-    ref: i,
-    className: t("ml-1.5 inline-block leading-none", r),
+    ref: t,
+    className: s("ml-1.5 inline-block leading-[0]", r),
     ...o
   }
 ));
-j.displayName = "TipWrap";
+N.displayName = "TipWrap";
 export {
-  N as HelpTip,
-  H as HelpTipIcon,
-  j as TipWrap
+  I as HelpTip,
+  l as HelpTipIcon,
+  N as TipWrap
 };

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

@@ -1,28 +1,30 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { HelpCircle as a } from "lucide-react";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { IconQuestionCircle as a } from "@gearbox-protocol/static";
 import * as d from "react";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as c, Tooltip as m, TooltipTrigger as f, TooltipContent as p } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as x } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const h = d.forwardRef(({ label: i, value: l, tip: t, valueDescription: o, className: n }, s) => /* @__PURE__ */ r("div", { ref: s, className: x("flex flex-col gap-2 w-full", n), children: [
-  /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+import "luxon";
+const h = d.forwardRef(({ label: i, value: l, tip: r, valueDescription: t, className: n }, s) => /* @__PURE__ */ o("div", { ref: s, className: x("flex flex-col gap-2 w-full", n), children: [
+  /* @__PURE__ */ o("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
     /* @__PURE__ */ e("span", { children: i }),
-    t && /* @__PURE__ */ e(c, { delayDuration: 0, children: /* @__PURE__ */ r(m, { children: [
+    r && /* @__PURE__ */ e(c, { delayDuration: 0, children: /* @__PURE__ */ o(m, { children: [
       /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           className: "inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-help",
-          children: /* @__PURE__ */ e(a, { className: "h-3.5 w-3.5" })
+          children: /* @__PURE__ */ e(a, { size: 14, className: "size-3.5" })
         }
       ) }),
-      /* @__PURE__ */ e(p, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ e("p", { children: t }) })
+      /* @__PURE__ */ e(p, { side: "top", className: "max-w-xs", children: /* @__PURE__ */ e("p", { children: r }) })
     ] }) })
   ] }),
-  /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ e("div", { className: "text-base font-semibold text-foreground", children: l }),
-    o && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: o })
+    t && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: t })
   ] })
 ] }));
 h.displayName = "HorizontalIndicator";

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

@@ -1,43 +1,81 @@
-import { jsx as a } from "react/jsx-runtime";
-import { Slot as s } from "@radix-ui/react-slot";
-import { cva as d } from "class-variance-authority";
-import * as u from "react";
-import { cn as c } from "../../utils/cn.js";
-import "sonner";
+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";
-const f = d(
-  "inline-flex items-center justify-center rounded-md transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+import { cn as h } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+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: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        outline: "border border-input bg-background hover:bg-secondary hover:text-foreground",
-        ghost: "hover:bg-secondary hover:text-foreground",
-        filled: "bg-secondary text-foreground hover:bg-secondary/80"
-      },
-      size: {
-        sm: "h-6 w-6",
-        default: "h-8 w-8",
-        lg: "h-10 w-10"
+      buttonType: {
+        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"
       }
     },
     defaultVariants: {
-      variant: "default",
-      size: "default"
+      buttonType: "outlined"
     }
   }
-), l = u.forwardRef(
-  ({ className: o, variant: r, size: e, asChild: t = !1, ...n }, i) => /* @__PURE__ */ a(
-    t ? s : "button",
-    {
-      className: c(f({ variant: r, size: e, className: o })),
-      ref: i,
-      ...n
-    }
-  )
+), v = f.forwardRef(
+  ({
+    className: d,
+    buttonType: b = "outlined",
+    size: t = 40,
+    linkProps: i,
+    asChild: c = !1,
+    disabled: a,
+    children: u,
+    ...s
+  }, l) => {
+    const r = u, n = h(
+      y({ buttonType: b, className: d }),
+      "flex items-center justify-center"
+    ), o = {
+      width: t,
+      height: t,
+      minWidth: t,
+      minHeight: t
+    };
+    return i ? /* @__PURE__ */ e(g, { ...i, children: /* @__PURE__ */ e(
+      "span",
+      {
+        className: n,
+        style: o,
+        "aria-disabled": a,
+        children: r
+      }
+    ) }) : c ? /* @__PURE__ */ e(
+      m,
+      {
+        ref: l,
+        className: n,
+        style: o,
+        ...s,
+        children: r
+      }
+    ) : /* @__PURE__ */ e(
+      "button",
+      {
+        ref: l,
+        type: "button",
+        className: n,
+        style: o,
+        disabled: a,
+        ...s,
+        children: r
+      }
+    );
+  }
 );
-l.displayName = "IconButton";
+v.displayName = "IconButton";
 export {
-  l as IconButton,
-  f as iconButtonVariants
+  v as IconButton,
+  y as iconButtonVariants
 };

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

@@ -0,0 +1,21 @@
+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 { cn as n } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+i.autoAddCss = !1;
+function d({ className: o, ...r }) {
+  return /* @__PURE__ */ m(
+    t,
+    {
+      className: n("inline-block shrink-0", o),
+      ...r
+    }
+  );
+}
+export {
+  d as FaIcon
+};

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

@@ -0,0 +1,42 @@
+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";
+export {
+  W 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,
+  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,
+  x as faCreditCard,
+  E as faEllipsisVertical,
+  L as faEnvelope,
+  v 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
+};