@gearbox-protocol/permissionless-ui 1.22.0-next.34 → 1.22.0-next.36

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

@@ -1,10 +1,11 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { cva as y } from "class-variance-authority";
-import * as v from "react";
+import { cva as D } from "class-variance-authority";
+import * as T from "react";
 import "@gearbox-protocol/sdk";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
-const _ = y(
+import { useIconSlotWidths as j } from "./use-icon-slot-widths.js";
+const R = D(
   e(
     // Layout + typography (matches styled-components: 14/17)
     "flex w-full border shadow-sm transition-colors",
@@ -67,35 +68,40 @@ const _ = y(
       variant: "default"
     }
   }
-), K = v.forwardRef(
+), P = T.forwardRef(
   ({
     hasError: t,
-    errorMessage: s,
+    errorMessage: a,
     value: h,
     size: b,
     colorTheme: p,
     variant: g,
     className: x,
+    style: m,
     startingIcon: o,
     onStartingIconClick: i,
     endingIcon: l,
     onEndingIconClick: n,
     ...d
-  }, m) => {
-    const u = p ?? "filledDark", c = u === "filledLight" ? "text-gray-50" : "text-gray-110";
+  }, y) => {
+    const u = p ?? "filledDark", c = u === "filledLight" ? "text-gray-50" : "text-gray-110", { setStartRef: w, setEndRef: v, inputPaddingStyle: _ } = j(), k = (s) => (C) => {
+      C.key === "Enter" && s?.();
+    }, N = {
+      ...m,
+      ..._(!!o, !!l)
+    };
     return /* @__PURE__ */ f("div", { className: "flex flex-col space-y-2", children: [
       /* @__PURE__ */ f("div", { className: "relative", children: [
         o && /* @__PURE__ */ r(
           "button",
           {
+            ref: w,
             type: "button",
             onClick: i,
-            onKeyDown: ((a) => (w) => {
-              w.key === "Enter" && a?.();
-            })(i),
+            onKeyDown: k(i),
             className: e(
-              "absolute left-0 top-1/2 transform -translate-y-1/2",
-              "w-9 h-9 flex items-center justify-center",
+              "absolute left-0 top-1/2 -translate-y-1/2",
+              "flex h-9 min-w-9 px-3 items-center justify-center",
               c,
               i ? "cursor-pointer" : "cursor-default"
             ),
@@ -105,31 +111,31 @@ const _ = y(
         /* @__PURE__ */ r(
           "input",
           {
-            ref: m,
+            ref: y,
             ...d,
             value: h,
             "data-error": t ? "true" : "false",
+            style: N,
             className: e(
-              _({
+              R({
                 size: b,
                 colorTheme: u,
                 variant: t ? "error" : g
               }),
-              o && "pl-9",
-              l && "pr-9",
               x
             ),
-            onWheel: d.type === "number" ? (a) => a.currentTarget.blur() : void 0
+            onWheel: d.type === "number" ? (s) => s.currentTarget.blur() : void 0
           }
         ),
         l && /* @__PURE__ */ r(
           "button",
           {
+            ref: v,
             type: "button",
             onClick: n,
             className: e(
-              "absolute right-0 top-1/2 transform -translate-y-1/2 w-9 h-9",
-              "flex items-center justify-center",
+              "absolute right-0 top-1/2 -translate-y-1/2",
+              "flex h-9 min-w-9 px-3 items-center justify-center",
               c,
               n ? "cursor-pointer" : "cursor-default"
             ),
@@ -137,11 +143,11 @@ const _ = y(
           }
         )
       ] }),
-      t && s && /* @__PURE__ */ r("p", { className: "text-destructive text-sm", children: s })
+      t && a && /* @__PURE__ */ r("p", { className: "text-destructive text-sm", children: a })
     ] });
   }
 );
 export {
-  K as Input,
-  _ as inputVariants
+  P as Input,
+  R as inputVariants
 };

package/dist/esm/components/input/use-icon-slot-widths.js

@@ -0,0 +1,41 @@
+import * as e from "react";
+const c = 36;
+function i(n, s) {
+  const u = () => s(n.getBoundingClientRect().width);
+  u();
+  const r = new ResizeObserver(u);
+  return r.observe(n), () => r.disconnect();
+}
+function S() {
+  const [n, s] = e.useState(
+    null
+  ), [u, r] = e.useState(null), l = e.useRef(null), o = e.useRef(null), d = e.useCallback((t) => {
+    if (l.current?.(), l.current = null, !t) {
+      s(null);
+      return;
+    }
+    l.current = i(t, s);
+  }, []), a = e.useCallback((t) => {
+    if (o.current?.(), o.current = null, !t) {
+      r(null);
+      return;
+    }
+    o.current = i(t, r);
+  }, []), f = e.useCallback(
+    (t, R) => ({
+      paddingLeft: t ? n ?? c : void 0,
+      paddingRight: R ? u ?? c : void 0
+    }),
+    [n, u]
+  );
+  return {
+    startSlotWidth: n,
+    endSlotWidth: u,
+    setStartRef: d,
+    setEndRef: a,
+    inputPaddingStyle: f
+  };
+}
+export {
+  S as useIconSlotWidths
+};

package/dist/esm/components/short-string/short-string.js

@@ -1,24 +1,20 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import "../tooltip/simple-tooltip.js";
-import { TooltipProvider as m, Tooltip as c, TooltipTrigger as f, TooltipContent as d } from "../tooltip/tooltip.js";
+import { jsx as r } from "react/jsx-runtime";
+import { SimpleTooltip as m } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as u } from "../../utils/cn.js";
+import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import { isLongString as T, shortenString as a } from "../../utils/shorten-string.js";
-import { Z_INDEX as S } from "../../utils/z-index.js";
-function O({
+import { isLongString as u, shortenString as S } from "../../utils/shorten-string.js";
+function g({
   children: o,
   maxLength: t,
-  showTooltip: l = !0,
+  showTooltip: f = !0,
   className: i
 }) {
-  const e = (n, p) => p === "text-overflow" ? /* @__PURE__ */ r("span", { className: u("inline-block max-w-full truncate", i), children: n }) : /* @__PURE__ */ r("span", { className: i, children: a(n, p) });
-  return typeof o == "string" && t !== void 0 ? l && (t === "text-overflow" || T(o, t)) ? /* @__PURE__ */ r(m, { delayDuration: 200, children: /* @__PURE__ */ s(c, { children: [
-    /* @__PURE__ */ r(f, { asChild: !0, children: e(o, t) }),
-    /* @__PURE__ */ r(d, { className: S.TOOLTIP, children: /* @__PURE__ */ r("p", { children: o }) })
-  ] }) }) : e(o, t) : o;
+  const n = (e, p) => p === "text-overflow" ? /* @__PURE__ */ r("span", { className: s("inline-block max-w-full truncate", i), children: e }) : /* @__PURE__ */ r("span", { className: i, children: S(e, p) });
+  return typeof o == "string" && t !== void 0 ? f && (t === "text-overflow" || u(o, t)) ? /* @__PURE__ */ r(m, { title: n(o, t), children: o }) : n(o, t) : o;
 }
 export {
-  O as ShortString
+  g as ShortString
 };

package/dist/esm/components/status-elements/index.js

@@ -0,0 +1,5 @@
+import { HealthDot as o, StatusBars as r } from "./status-elements.js";
+export {
+  o as HealthDot,
+  r as StatusBars
+};

package/dist/esm/components/status-elements/status-elements.js

@@ -0,0 +1,48 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+const s = {
+  good: "bg-success",
+  medium: "bg-warning",
+  bad: "bg-destructive",
+  critical: "bg-destructive",
+  liquidation: "bg-liquidation"
+}, l = {
+  good: 3,
+  medium: 2,
+  bad: 1,
+  critical: 1,
+  liquidation: 1
+}, u = 3;
+function b({ zone: t, size: i = 8 }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: o("rounded-full shrink-0", s[t]),
+      style: { width: i, height: i },
+      "aria-hidden": !0
+    }
+  );
+}
+function v({ zone: t }) {
+  const i = l[t], n = s[t], c = ["first", "second", "third"], d = Array.from({ length: u }, (e, r) => ({
+    key: c[r],
+    isActive: r < i
+  })).reverse();
+  return /* @__PURE__ */ a("div", { className: "flex w-2 flex-wrap gap-0.5", "aria-hidden": !0, children: d.map(({ key: e, isActive: r }) => /* @__PURE__ */ a(
+    "div",
+    {
+      className: o(
+        "h-[3px] w-full min-w-[3px] flex-1 rounded-[1.5px]",
+        r ? n : "bg-gray-50"
+      )
+    },
+    e
+  )) });
+}
+export {
+  b as HealthDot,
+  v as StatusBars
+};

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

@@ -4,7 +4,7 @@ import * as f from "react";
 import "@gearbox-protocol/sdk";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
-const y = t("rounded-lg p-5", {
+const p = t("rounded-lg p-5 text-[14px]", {
   variants: {
     backgroundColor: {
       transparent: "bg-transparent",
@@ -48,7 +48,7 @@ const y = t("rounded-lg p-5", {
     backgroundColor: "transparent",
     borderColor: "dark"
   }
-}), p = t(
+}), y = t(
   // Translated from styled-components:
   // - absolute, top/left 0, w/h 100%, overflow hidden, pointer-events none
   // - border-radius: theme borderRadius.sm
@@ -80,7 +80,7 @@ const y = t("rounded-lg p-5", {
       ref: d,
       className: e(
         r ? "relative" : "",
-        y({
+        p({
           textColor: g,
           backgroundColor: a,
           borderColor: n
@@ -95,7 +95,7 @@ const y = t("rounded-lg p-5", {
             className: e(
               "absolute inset-0 h-full w-full overflow-hidden pointer-events-none rounded-lg z-0",
               "after:absolute after:top-0 after:left-0 after:block after:w-1 after:h-full after:content-['']",
-              p({ attributeColor: r })
+              y({ attributeColor: r })
             )
           }
         ),
@@ -107,5 +107,5 @@ const y = t("rounded-lg p-5", {
 c.displayName = "TipCard";
 export {
   c as TipCard,
-  y as tipCardVariants
+  p as tipCardVariants
 };

package/dist/esm/components/token-symbol/token-symbol.js

@@ -1,17 +1,16 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { cva as T } from "class-variance-authority";
-import N from "react";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { cva as N } from "class-variance-authority";
+import x from "react";
 import { RoundedImage as y } from "../rounded-image/rounded-image.js";
-import { ShortString as x } from "../short-string/short-string.js";
-import { TokenIcon as s } from "../token-icon/token-icon.js";
-import "../tooltip/simple-tooltip.js";
-import { TooltipProvider as I, Tooltip as S, TooltipTrigger as b, TooltipContent as _ } from "../tooltip/tooltip.js";
+import { ShortString as S } from "../short-string/short-string.js";
+import { TokenIcon as c } from "../token-icon/token-icon.js";
+import { SimpleTooltip as b } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
 import "@gearbox-protocol/sdk";
-import { cn as O } from "../../utils/cn.js";
+import { cn as I } from "../../utils/cn.js";
 import "sonner";
-import { getNetworkIcon as R } from "../../utils/network-icons.js";
-import { Z_INDEX as j } from "../../utils/z-index.js";
-const z = T("", {
+import { getNetworkIcon as T } from "../../utils/network-icons.js";
+const R = N("", {
   variants: {
     marginSize: {
       sm: "gap-1",
@@ -23,32 +22,32 @@ const z = T("", {
     marginSize: "md"
   }
 });
-function C(r) {
+function _(r) {
   if (r)
     return typeof r == "string" ? r : r.icon ? { icon: r.icon } : r.symbol;
 }
-function D(r) {
+function j(r) {
   if (r)
     return typeof r == "string" ? r : r.title;
 }
-const P = N.forwardRef(
+const z = x.forwardRef(
   ({
     className: r,
     marginSize: d = "lg",
     token: n,
-    title: l,
+    title: m,
     size: a = 24,
     showSymbol: f = !1,
     showIcon: p = !0,
     maxLength: g,
     chainId: V,
-    comment: m,
-    network: t,
+    comment: l,
+    network: i,
     ...u
   }, h) => {
-    const o = C(n), v = l || D(n), c = () => t ? /* @__PURE__ */ i("div", { className: "relative", children: [
+    const o = _(n), v = m || j(n), s = () => i ? /* @__PURE__ */ t("div", { className: "relative", children: [
       /* @__PURE__ */ e(
-        s,
+        c,
         {
           symbol: o,
           size: a,
@@ -58,43 +57,40 @@ const P = N.forwardRef(
       /* @__PURE__ */ e("div", { className: "absolute -top-[10px] -right-[7px]", children: /* @__PURE__ */ e(
         y,
         {
-          src: R(t),
-          alt: t,
+          src: T(i),
+          alt: i,
           size: 14,
           rounded: !0
         }
       ) })
     ] }) : /* @__PURE__ */ e(
-      s,
+      c,
       {
         symbol: o,
         size: a,
         className: "shrink-0 self-center"
       }
     );
-    return /* @__PURE__ */ i(
+    return /* @__PURE__ */ t(
       "div",
       {
         ref: h,
-        className: O(
+        className: I(
           "flex items-center",
-          z({ marginSize: d }),
+          R({ marginSize: d }),
           r
         ),
         ...u,
         children: [
-          p && o && (t !== void 0 ? /* @__PURE__ */ e(I, { delayDuration: 200, children: /* @__PURE__ */ i(S, { children: [
-            /* @__PURE__ */ e(b, { asChild: !0, children: c() }),
-            /* @__PURE__ */ e(_, { className: j.TOOLTIP, children: /* @__PURE__ */ i("p", { children: [
-              "Network: ",
-              t
-            ] }) })
-          ] }) }) : c()),
-          (l || f) && /* @__PURE__ */ i("div", { className: "flex items-center gap-1 self-center", children: [
-            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(x, { maxLength: g, children: v }) }),
-            m && /* @__PURE__ */ i("div", { className: "text-md text-muted-foreground leading-tight", children: [
+          p && o && (i !== void 0 ? /* @__PURE__ */ t(b, { title: s(), children: [
+            "Network: ",
+            i
+          ] }) : s()),
+          (m || f) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
+            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: g, children: v }) }),
+            l && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
               "(",
-              m,
+              l,
               ")"
             ] })
           ] })
@@ -103,7 +99,7 @@ const P = N.forwardRef(
     );
   }
 );
-P.displayName = "TokenSymbol";
+z.displayName = "TokenSymbol";
 export {
-  P as TokenSymbol
+  z as TokenSymbol
 };

package/dist/esm/components/token-template/token-template.js

@@ -1,24 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
 import "react";
-import "@gearbox-protocol/sdk";
-import { cn as f } from "../../utils/cn.js";
+import { bnToPrettyView as T } from "../../utils/bn-to-pretty-view.js";
+import "clsx";
+import "tailwind-merge";
 import "sonner";
-import { negativeTokenTemplate as T, tokenTemplate as l } from "../../utils/templates.js";
-import { tokenTemplateString as N } from "../../utils/templates.js";
-function h({
-  value: t,
+import "@gearbox-protocol/sdk";
+import { negativeTokenTemplate as I, tokenTemplateString as N } from "../../utils/templates.js";
+import { FormattedNumberString as d } from "../formatted-number/formatted-number.js";
+import { ShortString as g } from "../short-string/short-string.js";
+function A({
+  value: r,
   token: e,
-  precision: o,
-  spaceSymbol: r = " ",
-  maxLength: m,
-  allowNegative: n = !1,
-  className: p
+  precision: m,
+  formatter: n = T,
+  noFormattedAmountValue: i = "-",
+  showSymbol: p = !0,
+  maxLength: a = 1 / 0,
+  ...f
 }) {
-  const i = n ? T(t, e, o, r) : l(t, e, o, r, m);
-  return /* @__PURE__ */ a("span", { className: f(p), children: i });
+  const { decimals: l = 18, title: s } = e || {}, t = n(r, l, m), c = t === i;
+  return /* @__PURE__ */ u("span", { children: [
+    /* @__PURE__ */ o(d, { value: t, ...f }),
+    " ",
+    !c && p && /* @__PURE__ */ o(g, { maxLength: a, children: s })
+  ] });
 }
 export {
-  h as TokenTemplate,
-  T as negativeTokenTemplate,
+  A as TokenTemplate,
+  I as negativeTokenTemplate,
   N as tokenTemplateString
 };

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as x } from "react/jsx-runtime";
-import * as s from "@radix-ui/react-tooltip";
+import * as r from "@radix-ui/react-tooltip";
 import * as o from "react";
 import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
@@ -20,7 +20,7 @@ function S({
   className: A,
   triggerClassName: h
 }) {
-  const [L, N] = o.useState(!1), c = o.useRef(null), r = o.useRef(null), l = m !== void 0, a = l ? m : L, t = o.useCallback(
+  const [L, N] = o.useState(!1), c = o.useRef(null), s = o.useRef(null), l = m !== void 0, a = l ? m : L, t = o.useCallback(
     (e) => {
       l ? k?.(e) : N(e);
     },
@@ -45,7 +45,7 @@ function S({
     if (n !== "click" || !a) return;
     const e = (d) => {
       const v = d.target;
-      c.current && !c.current.contains(v) && r.current && !r.current.contains(v) && t(!1);
+      c.current && !c.current.contains(v) && s.current && !s.current.contains(v) && t(!1);
     }, w = (d) => {
       d.key === "Escape" && t(!1);
     };
@@ -55,6 +55,7 @@ function S({
   }, [n, a, t]);
   const y = P === "modal-tooltip", b = T && !y, W = p(
     // Base
+    "break-all",
     "z-50 pointer-events-auto",
     "animate-in fade-in-0 duration-100",
     "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-75",
@@ -63,21 +64,21 @@ function S({
     A
   );
   return /* @__PURE__ */ i(
-    s.Provider,
+    r.Provider,
     {
       delayDuration: n === "click" ? 0 : f,
       skipDelayDuration: 0,
       children: /* @__PURE__ */ x(
-        s.Root,
+        r.Root,
         {
           open: a,
           onOpenChange: H,
           delayDuration: n === "click" ? 0 : f,
           children: [
-            /* @__PURE__ */ i(s.Trigger, { asChild: !0, children: n === "click" ? /* @__PURE__ */ i(
+            /* @__PURE__ */ i(r.Trigger, { asChild: !0, children: n === "click" ? /* @__PURE__ */ i(
               "button",
               {
-                ref: r,
+                ref: s,
                 type: "button",
                 onClick: I,
                 onKeyDown: K,
@@ -90,13 +91,13 @@ function S({
             ) : /* @__PURE__ */ i(
               "span",
               {
-                ref: r,
+                ref: s,
                 className: p("inline-flex", h),
                 children: u
               }
             ) }),
-            /* @__PURE__ */ i(s.Portal, { children: /* @__PURE__ */ x(
-              s.Content,
+            /* @__PURE__ */ i(r.Portal, { children: /* @__PURE__ */ x(
+              r.Content,
               {
                 ref: c,
                 side: R,
@@ -106,7 +107,7 @@ function S({
                 children: [
                   D,
                   b && /* @__PURE__ */ i(
-                    s.Arrow,
+                    r.Arrow,
                     {
                       width: j,
                       height: C,

package/dist/esm/components/with-title/with-title.js

@@ -1,30 +1,43 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as s } from "../../utils/cn.js";
+import { cn as i } from "../../utils/cn.js";
 import "sonner";
-const l = {
-  default: "text-sm",
-  sm: "text-xs",
-  lg: "text-base"
-};
-function c({
-  title: i,
+const l = a("", {
+  variants: {
+    size: {
+      sm: "text-[14px] mb-[14px]",
+      default: "text-body mb-[18px]",
+      md: "text-lg mb-[22px]",
+      lg: "text-[21px] mb-[22px]"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+function u({
+  title: m,
   children: t,
   size: o = "default",
-  className: m
+  className: r
 }) {
-  return /* @__PURE__ */ r("div", { className: s("flex flex-col gap-2", m), children: [
+  return /* @__PURE__ */ x("div", { className: i("flex flex-col"), children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: s("text-muted-foreground font-medium", l[o]),
-        children: i
+        className: i(
+          "text-foreground font-medium",
+          l({ size: o }),
+          r
+        ),
+        children: m
       }
     ),
     t !== void 0 && /* @__PURE__ */ e("div", { children: t })
   ] });
 }
 export {
-  c as WithTitle
+  u as WithTitle
 };