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

package/dist/esm/components/smart-number-input/smart-number-input.js

@@ -1,179 +1,185 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import { X as G } from "lucide-react";
-import * as H from "react";
-import "../buttons/back-button/back-button.js";
-import { Button as J } from "../buttons/button/button.js";
-import "../buttons/copy-button/copy-button.js";
-import "../buttons/external-button/external-button.js";
-import "../buttons/filter-button/filter-button.js";
-import "../buttons/navigation-button/navigation-button.js";
-import { cn as g } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { cva as c } from "class-variance-authority";
+import * as b from "react";
+import { CurrencyButton as E } from "../currency-button/currency-button.js";
+import { faXmark as G } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as H } from "../icons/fa-icon.js";
+import { useIsMobile as J, useIsTablet as K, useIsDesktop as O } from "../../hooks/use-media-query.js";
+import { bnToInputView as P } from "../../utils/bn-to-input-view.js";
 import "@gearbox-protocol/sdk";
-import "../buttons/tab-button/tab-button.js";
-import { TokenIcon as K } from "../token-icon/token-icon.js";
-function Q(o, r) {
-  let t = o.replace(/^0+(?=\d)/, "");
-  if ((t === "" || t === ".") && (t = "0"), !/^[0-9]*\.?[0-9]*$/.test(t))
-    return [null, null];
-  try {
-    const e = t.split("."), l = e[0] || "0", p = (e[1] || "").slice(0, r).padEnd(r, "0");
-    return [BigInt(l + p), t];
-  } catch {
-    return [null, null];
-  }
-}
-function T(o, r) {
-  const t = o.toString().padStart(r + 1, "0"), e = t.slice(0, -r) || "0", l = t.slice(-r).replace(/0+$/, "");
-  return l ? `${e}.${l}` : e;
-}
-function U(o, r) {
-  const t = T(o, r), e = Number.parseFloat(t);
-  return e === 0 ? "0" : e < 1e-4 ? "< 0.0001" : e.toLocaleString(void 0, { maximumFractionDigits: 4 });
-}
-const W = H.forwardRef(
-  ({
-    amount: o,
-    tokenSymbol: r,
-    tokenIcon: t,
-    token: e,
-    label: l = "Amount",
-    maxBalance: p,
-    maxAmount: n,
-    maxAmountLimit: m,
-    maxButtonLabel: $ = "Max",
-    showMaxButton: j,
-    maxButton: M,
-    chainId: Y,
-    network: Z,
-    disabled: a = !1,
-    active: y = !1,
-    size: N = "default",
-    onAmountChange: b,
-    onSetAmount: c,
-    onMaxClick: h,
-    onTokenSelect: P,
-    onShowSelectDialog: S,
-    onRemove: w,
-    onFocus: z,
-    onBlur: F,
-    className: V
-  }, _) => {
-    const D = j ?? M ?? !0, x = r ?? e?.symbol, I = t ?? (e?.symbol ? /* @__PURE__ */ s(K, { symbol: e.symbol, size: 24 }) : void 0), v = e?.decimals ?? 18, B = p ?? (n !== void 0 ? U(n, v) : void 0), f = P ?? S, E = {
-      sm: "p-3",
-      md: "p-3.5",
-      default: "p-4",
-      lg: "p-5"
-    }, O = {
-      sm: "text-lg",
-      md: "text-xl",
-      default: "text-2xl",
-      lg: "text-3xl"
-    }, R = (u) => {
-      const i = u.target.value;
-      if (!(!/^[0-9]*\.?[0-9]*$/.test(i) && i !== "") && (b && b(i), c)) {
-        const [C, k] = Q(i, v);
-        C !== null && k !== null && c(C, k);
+import { parseInputToBN as Q } from "../../utils/parse-input-to-bn.js";
+import { cn as d } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import { BalanceIndicator as U } from "./balance-indicator.js";
+const W = c(
+  "relative w-full text-foreground bg-gray-20 border border-gray-30 transition-[background-color] duration-100 ease-linear [&:hover]:bg-gray-30 [&:hover]:border-gray-40 data-[active=true]:bg-gray-30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-primary data-[active=true]:outline-offset-[-2px] data-[disabled=true]:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-[7px] h-[60px] rounded-[8px]",
+        md: "pl-4 pr-3 py-[10px] h-[82px] rounded-lg"
       }
-    }, X = () => {
-      if (h) {
-        h();
-        return;
+    },
+    defaultVariants: { size: "md" }
+  }
+), Y = c("font-medium text-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), Z = c(
+  "w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",
+  {
+    variants: {
+      size: {
+        sm: "text-[18px]! leading-[21px]!",
+        md: "text-[28px]! leading-[33px]!"
       }
-      if (c && n !== void 0) {
-        const u = n && m && n > m ? m : n, i = T(u, v);
-        c(u, i);
+    },
+    defaultVariants: { size: "md" }
+  }
+), _ = b.forwardRef(
+  ({
+    amount: v,
+    token: t,
+    label: y = "Amount",
+    maxAmount: a,
+    maxAmountLimit: i,
+    maxButtonLabel: w,
+    chainId: z,
+    network: N,
+    maxButton: C = !0,
+    disabled: r = !1,
+    active: V = !1,
+    size: I = "md",
+    onSetAmount: s,
+    onShowSelectDialog: m,
+    onRemove: p,
+    onFocus: B,
+    onBlur: k
+  }, M) => {
+    const f = t?.decimals ?? 18, j = (o) => {
+      const l = o.target.value, [g, x] = Q(l, f);
+      g === null || x === null || s && s(g, x);
+    }, F = () => {
+      if (s) {
+        const o = a && i && a > i ? i : a || 0n, l = P(o, f);
+        s(o, l);
       }
-    }, q = D && (h || c && n !== void 0);
-    return /* @__PURE__ */ d(
+    }, [L, h] = b.useState(!1), T = () => {
+      h(!0), B?.();
+    }, D = () => {
+      h(!1), k?.();
+    }, n = I ?? "md", R = J(), S = K(), X = O(), $ = R ? 20 : S ? 30 : X ? 26 : 30, q = !!(t || m);
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: _,
-        className: g(
-          "relative rounded-xl border bg-card transition-colors border-border",
-          y && "border-primary",
-          a && "opacity-50 cursor-not-allowed",
-          E[N],
-          V
-        ),
-        "data-active": y,
-        "data-disabled": a,
+        ref: M,
+        className: W({ size: n }),
+        "data-testid": "smart-number-input-root",
+        "data-active": L,
+        "data-disabled": r,
         children: [
-          w && /* @__PURE__ */ s(
-            "button",
+          p && /* @__PURE__ */ e(
+            "div",
             {
-              type: "button",
-              onClick: w,
-              className: "absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",
-              children: /* @__PURE__ */ s(G, { className: "h-3 w-3" })
-            }
-          ),
-          /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ s("span", { className: "text-sm text-muted-foreground", children: l }),
-            B !== void 0 && /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ d("span", { className: "text-sm text-muted-foreground", children: [
-                "Balance: ",
-                B
-              ] }),
-              q && /* @__PURE__ */ s(
-                J,
+              className: "absolute top-0 right-0 flex h-5 w-5 translate-x-1/2 -translate-y-1/2 items-center justify-center",
+              "data-testid": "smart-number-input-close",
+              children: /* @__PURE__ */ e(
+                "button",
                 {
-                  variant: "ghost",
-                  size: "xs",
-                  onClick: X,
-                  disabled: a,
-                  className: "text-primary hover:text-primary/80",
-                  children: $
+                  type: "button",
+                  onClick: p,
+                  className: "flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",
+                  children: /* @__PURE__ */ e(H, { icon: G, className: "size-3" })
                 }
               )
-            ] })
-          ] }),
-          /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ s(
-              "input",
+            }
+          ),
+          /* @__PURE__ */ u("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
+            /* @__PURE__ */ e(
+              "span",
               {
-                type: "text",
-                inputMode: "decimal",
-                autoComplete: "off",
-                autoCorrect: "off",
-                spellCheck: "false",
-                pattern: "^[0-9]*[.,]?[0-9]*$",
-                placeholder: "0",
-                value: o,
-                onChange: R,
-                onFocus: z,
-                onBlur: F,
-                disabled: a || !b && !c,
-                className: g(
-                  "flex-1 bg-transparent border-none outline-none text-foreground font-medium placeholder:text-muted-foreground",
-                  O[N]
-                )
+                className: d(
+                  Y({ size: n }),
+                  "grow shrink-0 basis-0"
+                ),
+                "data-testid": "smart-number-input-label",
+                children: y
               }
             ),
-            (x || I) && /* @__PURE__ */ d(
-              "button",
+            a !== void 0 && t && /* @__PURE__ */ e(
+              U,
               {
-                type: "button",
-                onClick: f,
-                disabled: a || !f,
-                className: g(
-                  "flex items-center gap-2 rounded-full bg-secondary px-3 py-1.5 text-sm font-medium transition-colors",
-                  f && !a && "hover:bg-secondary/80 cursor-pointer",
-                  !f && "cursor-default"
-                ),
-                children: [
-                  I,
-                  x && /* @__PURE__ */ s("span", { children: x })
-                ]
+                title: w,
+                token: t,
+                maxAmount: a,
+                size: n,
+                disabled: r,
+                maxButton: C,
+                onMaxButtonClick: F
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: d(
+                "flex w-full max-w-full shrink-0 basis-full items-center"
+              ),
+              children: [
+                /* @__PURE__ */ e("div", { className: "mr-3 grow shrink-0 basis-0", children: /* @__PURE__ */ e(
+                  "input",
+                  {
+                    type: "text",
+                    inputMode: "decimal",
+                    autoComplete: "off",
+                    autoCorrect: "off",
+                    spellCheck: "false",
+                    pattern: "^[0-9]*[.,]?[0-9]*$",
+                    placeholder: "0",
+                    value: v,
+                    onChange: j,
+                    onFocus: T,
+                    onBlur: D,
+                    disabled: r || !s,
+                    className: d(
+                      Z({ size: n }),
+                      r && "cursor-not-allowed"
+                    ),
+                    "data-testid": "smart-number-input-input",
+                    minLength: 1,
+                    maxLength: 79,
+                    title: "Amount"
+                  }
+                ) }),
+                q ? /* @__PURE__ */ e(
+                  E,
+                  {
+                    active: V,
+                    size: n,
+                    disabled: r,
+                    token: t,
+                    showSelectDialog: m,
+                    chainId: z,
+                    network: N,
+                    maxLength: $,
+                    children: t?.symbol ?? "Select token"
+                  }
+                ) : null
+              ]
+            }
+          )
         ]
       }
     );
   }
 );
-W.displayName = "SmartNumberInput";
+_.displayName = "SmartNumberInput";
 export {
-  W as SmartNumberInput
+  _ as SmartNumberInput
 };

package/dist/esm/components/spinner/spinner.js

@@ -1,11 +1,12 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { Loader2 as d } from "lucide-react";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { IconPending as d } from "@gearbox-protocol/static";
 import * as i from "react";
-import { cn as n } from "../../utils/cn.js";
-import "sonner";
 import "@gearbox-protocol/sdk";
-const o = i.forwardRef(
-  ({ className: s, size: t = "default", label: e, ...a }, m) => {
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const m = i.forwardRef(
+  ({ className: s, size: e = "default", label: r, ...n }, o) => {
     const l = {
       xs: "h-3 w-3",
       sm: "h-4 w-4",
@@ -16,43 +17,44 @@ const o = i.forwardRef(
     return /* @__PURE__ */ c(
       "div",
       {
-        ref: m,
-        className: n(
+        ref: o,
+        className: a(
           "flex flex-col items-center justify-center gap-2",
           s
         ),
-        ...a,
+        ...n,
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ t(
             d,
             {
-              className: n(
+              size: e === "xs" ? 12 : e === "sm" ? 16 : e === "default" ? 24 : e === "lg" ? 32 : 48,
+              className: a(
                 "animate-spin text-muted-foreground",
-                l[t]
+                l[e]
               )
             }
           ),
-          e && /* @__PURE__ */ r("span", { className: "text-sm text-muted-foreground", children: e })
+          r && /* @__PURE__ */ t("span", { className: "text-sm text-muted-foreground", children: r })
         ]
       }
     );
   }
 );
-o.displayName = "Spinner";
-const f = i.forwardRef(({ className: s, fullScreen: t = !1, ...e }, a) => /* @__PURE__ */ r(
+m.displayName = "Spinner";
+const f = i.forwardRef(({ className: s, fullScreen: e = !1, ...r }, n) => /* @__PURE__ */ t(
   "div",
   {
-    ref: a,
-    className: n(
+    ref: n,
+    className: a(
       "flex items-center justify-center bg-background/80 backdrop-blur-sm",
-      t ? "fixed inset-0 z-50" : "absolute inset-0",
+      e ? "fixed inset-0 z-50" : "absolute inset-0",
       s
     ),
-    children: /* @__PURE__ */ r(o, { size: "lg", ...e })
+    children: /* @__PURE__ */ t(m, { size: "lg", ...r })
   }
 ));
 f.displayName = "SpinnerOverlay";
 export {
-  o as Spinner,
+  m as Spinner,
   f as SpinnerOverlay
 };

package/dist/esm/components/spinner-loader/index.js

@@ -0,0 +1,4 @@
+import { SpinnerLoader as o } from "./spinner-loader.js";
+export {
+  o as SpinnerLoader
+};

package/dist/esm/components/spinner-loader/spinner-loader.js

@@ -0,0 +1,30 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as m from "react";
+import "@gearbox-protocol/sdk";
+import { cn as p } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const s = m.forwardRef(
+  ({ size: r = 40, speed: o = "1s", width: i = 4, className: e, style: a, ...t }, n) => /* @__PURE__ */ d(
+    "span",
+    {
+      ref: n,
+      className: p(
+        "inline-block rounded-full border-solid border-gray-20 border-b-gray-110 animate-spin",
+        e
+      ),
+      style: {
+        width: r,
+        height: r,
+        borderWidth: i,
+        animationDuration: o,
+        ...a
+      },
+      ...t
+    }
+  )
+);
+s.displayName = "SpinnerLoader";
+export {
+  s as SpinnerLoader
+};

package/dist/esm/components/split-list/split-list.js

@@ -1,39 +1,58 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as l from "react";
-import { cn as u } from "../../utils/cn.js";
-import "sonner";
+import { jsx as a } from "react/jsx-runtime";
+import { cva as c } from "class-variance-authority";
+import * as t from "react";
 import "@gearbox-protocol/sdk";
-function d(t) {
-  if (t === !0) return "flex-1";
-  if (t === "auto") return "flex-none";
-  if (typeof t == "number") {
-    const r = t / 12;
-    return r === 1 ? "w-full" : r === 0.5 ? "w-1/2" : r === 0.25 ? "w-1/4" : r === 0.75 ? "w-3/4" : r === 1 / 3 ? "w-1/3" : r === 2 / 3 ? "w-2/3" : "";
+import { cn as m } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const u = c(
+  [
+    /* layout */
+    "relative flex items-center",
+    /* padding: 0 18px, no padding on first/last edges */
+    "px-[18px] first:pl-0 last:pr-0",
+    /* vertical divider (::before): 60% height, centered, gray40; hidden on first item */
+    "before:absolute before:left-0 before:top-[20%] before:h-[60%] before:border-l before:border-gray-40 before:content-[''] first:before:border-l-transparent"
+  ].join(" "),
+  {
+    variants: {
+      colSize: {
+        equal: "grow shrink-0 basis-0",
+        auto: "w-auto grow-0 shrink-0 basis-auto"
+      }
+    },
+    defaultVariants: { colSize: "equal" }
   }
-  return "";
-}
-function x({
-  children: t,
-  colSize: r = !0,
-  className: c
-}) {
-  const i = l.Children.toArray(t).filter(Boolean);
-  return /* @__PURE__ */ s("div", { className: u("flex flex-wrap items-stretch", c), children: i.map((e, n) => {
-    const o = typeof r == "function" ? r(n) : r, a = n === i.length - 1, f = d(o), m = typeof o == "number" && !f ? { width: `${o / 12 * 100}%` } : void 0, p = l.isValidElement(e) && e.key ? e.key : `split-item-${n}`;
-    return /* @__PURE__ */ s(
+), b = t.forwardRef(
+  ({ children: i, colSize: e = !0, className: l }, s) => {
+    const n = t.Children.toArray(i).filter(Boolean);
+    return /* @__PURE__ */ a(
       "div",
       {
-        className: u(
-          f,
-          !a && "border-r border-border pr-4 mr-4"
+        ref: s,
+        className: m(
+          "flex w-full flex-row flex-nowrap",
+          "items-stretch",
+          l
         ),
-        style: m,
-        children: e
-      },
-      p
+        children: n.map((r, o) => {
+          const f = typeof e == "function" ? e(o) : e, p = t.isValidElement(r) && r.key != null ? r.key : `split-item-${o}`;
+          return /* @__PURE__ */ a(
+            "div",
+            {
+              className: u({
+                colSize: f === "auto" ? "auto" : "equal"
+              }),
+              children: r
+            },
+            p
+          );
+        })
+      }
     );
-  }) });
-}
+  }
+);
+b.displayName = "SplitList";
 export {
-  x as SplitList
+  b as SplitList
 };

package/dist/esm/components/stat-badge/stat-badge.js

@@ -2,10 +2,12 @@ import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
 import * as v from "react";
 import { StatusTriangle as x } from "../status-triangle/status-triangle.js";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as B, Tooltip as V, TooltipTrigger as T, TooltipContent as w } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const y = l(
   "w-full h-full rounded-lg border transition-colors",
   {

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

@@ -1,15 +1,16 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
 import * as n from "react";
+import "@gearbox-protocol/sdk";
 import { cn as u } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const d = m("rounded-full shrink-0", {
   variants: {
     variant: {
       default: "bg-muted-foreground",
-      success: "bg-green-500",
-      warning: "bg-yellow-500",
+      success: "bg-success",
+      warning: "bg-warning",
       alert: "bg-destructive",
       primary: "bg-primary",
       secondary: "bg-secondary",
@@ -25,24 +26,24 @@ const d = m("rounded-full shrink-0", {
   },
   defaultVariants: {
     variant: "default",
-    size: "default"
+    size: "sm"
   }
-}), l = n.forwardRef(
-  ({ className: t, variant: a, size: r, pulse: e, ...s }, o) => /* @__PURE__ */ i(
+}), c = n.forwardRef(
+  ({ className: t, variant: r, size: a, pulse: s, ...e }, i) => /* @__PURE__ */ o(
     "div",
     {
-      ref: o,
+      ref: i,
       className: u(
-        d({ variant: a, size: r }),
-        e && "animate-pulse",
+        d({ variant: r, size: a }),
+        s && "animate-pulse",
         t
       ),
-      ...s
+      ...e
     }
   )
 );
-l.displayName = "StatusDot";
+c.displayName = "StatusDot";
 export {
-  l as StatusDot,
+  c as StatusDot,
   d as statusDotVariants
 };

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
+};