@gearbox-protocol/ui-kit 3.7.1 → 3.8.1-next.1

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

@@ -1,15 +1,16 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { cva as x } from "class-variance-authority";
-import { TextButton as u } from "../text-button/text-button.js";
-import { TokenTemplate as f } from "../token-template/token-template.js";
+import { cva as u } from "class-variance-authority";
+import { TextButton as f } from "../text-button/text-button.js";
+import { TokenTemplate as b } from "../token-template/token-template.js";
+import { balanceIndicatorTestIds as s } from "../../test-ids/smart-number-input.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as r } from "../../utils/cn.js";
+import { cn as o } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const b = x("font-normal leading-[130%] text-foreground", {
+const h = u("font-normal leading-[130%] text-foreground", {
   variants: {
     size: {
       sm: "text-xs",
@@ -18,35 +19,35 @@ const b = x("font-normal leading-[130%] text-foreground", {
   },
   defaultVariants: { size: "md" }
 });
-function V({
-  title: s = "Balance",
-  className: i,
-  maxAmount: l,
-  token: c,
-  disabled: d,
-  maxButton: p = !0,
-  onMaxButtonClick: a,
-  size: e = "sm"
+function A({
+  title: i = "Balance",
+  className: l,
+  maxAmount: c,
+  token: d,
+  disabled: p,
+  maxButton: x = !0,
+  onMaxButtonClick: e,
+  size: r = "sm"
 }) {
-  const o = !d && p, n = /* @__PURE__ */ t(f, { value: l, token: c, showSymbol: !1 });
+  const a = !p && x, n = /* @__PURE__ */ t(b, { value: c, token: d, showSymbol: !1 });
   return /* @__PURE__ */ m(
     "div",
     {
-      className: r("flex shrink-0 basis-auto items-center", i),
-      "data-testid": "balance-indicator",
+      className: o("flex shrink-0 basis-auto items-center", l),
+      "data-testid": s.root,
       children: [
-        /* @__PURE__ */ m("span", { className: r(b({ size: e })), children: [
-          s,
+        /* @__PURE__ */ m("span", { className: o(h({ size: r })), children: [
+          i,
           ": ",
-          o && e === "sm" ? /* @__PURE__ */ t(u, { onClick: a, children: n }) : n
+          a && r === "sm" ? /* @__PURE__ */ t(f, { onClick: e, children: n }) : n
         ] }),
-        o && e !== "sm" && /* @__PURE__ */ t("div", { className: "ml-2", children: /* @__PURE__ */ t(
+        a && r !== "sm" && /* @__PURE__ */ t("div", { className: "ml-2", children: /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: a,
-            "data-testid": "balance-max",
-            className: r(
+            onClick: e,
+            "data-testid": s.max,
+            className: o(
               "rounded-[6px] border-0 py-[3px] px-1 text-[11px]! leading-[13px]!",
               "text-center uppercase text-foreground",
               "bg-gray-70 hover:bg-gray-90 transition-colors"
@@ -59,5 +60,5 @@ function V({
   );
 }
 export {
-  V as BalanceIndicator
+  A as BalanceIndicator
 };

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

@@ -1,20 +1,21 @@
-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 { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { cva as m } from "class-variance-authority";
+import * as v from "react";
+import { CurrencyButton as G } from "../currency-button/currency-button.js";
+import { faXmark as H } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as J } from "../icons/fa-icon.js";
+import { useIsMobile as K, useIsTablet as O, useIsDesktop as P } from "../../hooks/use-media-query.js";
+import { smartNumberInputTestIds as n } from "../../test-ids/smart-number-input.js";
+import { bnToInputView as Q } from "../../utils/bn-to-input-view.js";
 import "@gearbox-protocol/sdk";
-import { parseInputToBN as Q } from "../../utils/parse-input-to-bn.js";
-import { cn as d } from "../../utils/cn.js";
+import { parseInputToBN as U } from "../../utils/parse-input-to-bn.js";
+import { cn as u } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-import { BalanceIndicator as U } from "./balance-indicator.js";
-const W = c(
+import { BalanceIndicator as W } from "./balance-indicator.js";
+const Y = m(
   "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: {
@@ -25,7 +26,7 @@ const W = c(
     },
     defaultVariants: { size: "md" }
   }
-), Y = c("font-medium text-foreground", {
+), Z = m("font-medium text-foreground", {
   variants: {
     size: {
       sm: "text-xs",
@@ -33,7 +34,7 @@ const W = c(
     }
   },
   defaultVariants: { size: "md" }
-}), Z = c(
+}), _ = m(
   "w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",
   {
     variants: {
@@ -44,93 +45,93 @@ const W = c(
     },
     defaultVariants: { size: "md" }
   }
-), _ = b.forwardRef(
+), A = v.forwardRef(
   ({
-    amount: v,
+    amount: y,
     token: t,
-    label: y = "Amount",
+    label: w = "Amount",
     maxAmount: a,
-    maxAmountLimit: i,
-    maxButtonLabel: w,
-    chainId: z,
-    network: N,
+    maxAmountLimit: l,
+    maxButtonLabel: z,
+    chainId: N,
+    network: I,
     maxButton: C = !0,
     disabled: r = !1,
     active: V = !1,
-    size: I = "md",
+    size: B = "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 = () => {
+    onShowSelectDialog: p,
+    onRemove: f,
+    onFocus: k,
+    onBlur: M
+  }, j) => {
+    const h = t?.decimals ?? 18, F = (i) => {
+      const d = i.target.value, [x, b] = U(d, h);
+      x === null || b === null || s && s(x, b);
+    }, L = () => {
       if (s) {
-        const o = a && i && a > i ? i : a || 0n, l = P(o, f);
-        s(o, l);
+        const i = a && l && a > l ? l : a || 0n, d = Q(i, h);
+        s(i, 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 ? 22 : 30, q = !!(t || m);
-    return /* @__PURE__ */ u(
+    }, [T, g] = v.useState(!1), D = () => {
+      g(!0), k?.();
+    }, R = () => {
+      g(!1), M?.();
+    }, o = B ?? "md", S = K(), X = O(), $ = P(), q = S ? 20 : X ? 30 : $ ? 22 : 30, E = !!(t || p);
+    return /* @__PURE__ */ c(
       "div",
       {
-        ref: M,
-        className: W({ size: n }),
-        "data-testid": "smart-number-input-root",
-        "data-active": L,
+        ref: j,
+        className: Y({ size: o }),
+        "data-testid": n.root,
+        "data-active": T,
         "data-disabled": r,
         children: [
-          p && /* @__PURE__ */ e(
+          f && /* @__PURE__ */ e(
             "div",
             {
               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",
+              "data-testid": n.close,
               children: /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: p,
+                  onClick: f,
                   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" })
+                  children: /* @__PURE__ */ e(J, { icon: H, className: "size-3" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ u("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
+          /* @__PURE__ */ c("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
             /* @__PURE__ */ e(
               "span",
               {
-                className: d(
-                  Y({ size: n }),
+                className: u(
+                  Z({ size: o }),
                   "grow shrink-0 basis-0"
                 ),
-                "data-testid": "smart-number-input-label",
-                children: y
+                "data-testid": n.label,
+                children: w
               }
             ),
             a !== void 0 && t && /* @__PURE__ */ e(
-              U,
+              W,
               {
-                title: w,
+                title: z,
                 token: t,
                 maxAmount: a,
-                size: n,
+                size: o,
                 disabled: r,
                 maxButton: C,
-                onMaxButtonClick: F
+                onMaxButtonClick: L
               }
             )
           ] }),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ c(
             "div",
             {
-              className: d(
+              className: u(
                 "flex w-full max-w-full shrink-0 basis-full items-center"
               ),
               children: [
@@ -144,32 +145,32 @@ const W = c(
                     spellCheck: "false",
                     pattern: "^[0-9]*[.,]?[0-9]*$",
                     placeholder: "0",
-                    value: v,
-                    onChange: j,
-                    onFocus: T,
-                    onBlur: D,
+                    value: y,
+                    onChange: F,
+                    onFocus: D,
+                    onBlur: R,
                     disabled: r || !s,
-                    className: d(
-                      Z({ size: n }),
+                    className: u(
+                      _({ size: o }),
                       r && "cursor-not-allowed"
                     ),
-                    "data-testid": "smart-number-input-input",
+                    "data-testid": n.input,
                     minLength: 1,
                     maxLength: 79,
                     title: "Amount"
                   }
                 ) }),
-                q ? /* @__PURE__ */ e(
-                  E,
+                E ? /* @__PURE__ */ e(
+                  G,
                   {
                     active: V,
-                    size: n,
+                    size: o,
                     disabled: r,
                     token: t,
-                    showSelectDialog: m,
-                    chainId: z,
-                    network: N,
-                    maxLength: $,
+                    showSelectDialog: p,
+                    chainId: N,
+                    network: I,
+                    maxLength: q,
                     children: t?.symbol ?? "Select token"
                   }
                 ) : null
@@ -181,7 +182,7 @@ const W = c(
     );
   }
 );
-_.displayName = "SmartNumberInput";
+A.displayName = "SmartNumberInput";
 export {
-  _ as SmartNumberInput
+  A as SmartNumberInput
 };