@gearbox-protocol/ui-kit 3.14.0-next.2 → 3.14.0-next.4

package/dist/cjs/components/smart-number-input/smart-number-input.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("class-variance-authority"),X=require("react"),$=require("../currency-button/currency-button.cjs"),E=require("@fortawesome/free-solid-svg-icons"),G=require("../icons/fa-icon.cjs"),m=require("../../hooks/use-media-query.cjs"),c=require("../../test-ids/smart-number-input.cjs"),H=require("../../utils/bn-to-input-view.cjs");require("@gearbox-protocol/sdk");const J=require("../../utils/parse-input-to-bn.cjs"),p=require("../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../utils/z-index.cjs");const K=require("./balance-indicator.cjs");function U(s){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const a in s)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(s,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:()=>s[a]})}}return t.default=s,Object.freeze(t)}const I=U(X),W=f.cva("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"}},defaultVariants:{size:"md"}}),Y=f.cva("font-medium text-foreground",{variants:{size:{sm:"text-xs",md:"text-sm"}},defaultVariants:{size:"md"}}),Z=f.cva("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]!"}},defaultVariants:{size:"md"}}),N=I.forwardRef(({amount:s,token:t,label:a="Amount",maxAmount:r,maxAmountLimit:l,maxButtonLabel:j,chainId:w,network:q,maxButton:z=!0,disabled:n=!1,active:_=!1,size:V="md",onSetAmount:o,onShowSelectDialog:b,onRemove:x,onFocus:B,onBlur:T},C)=>{const g=t?.decimals??18,M=u=>{const d=u.target.value,[y,v]=J.parseInputToBN(d,g);y===null||v===null||o&&o(y,v)},k=()=>{if(o){const u=r&&l&&r>l?l:r||0n,d=H.bnToInputView(u,g);o(u,d)}},[S,h]=I.useState(!1),O=()=>{h(!0),B?.()},F=()=>{h(!1),T?.()},i=V??"md",L=m.useIsMobile(),D=m.useIsTablet(),P=m.useIsDesktop(),R=L?20:D?30:P?22:30,Q=!!(t||b);return e.jsxs("div",{ref:C,className:W({size:i}),"data-testid":c.smartNumberInputTestIds.root,"data-active":S,"data-disabled":n,children:[x&&e.jsx("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":c.smartNumberInputTestIds.close,children:e.jsx("button",{type:"button",onClick:x,className:"flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",children:e.jsx(G.FaIcon,{icon:E.faXmark,className:"size-3"})})}),e.jsxs("div",{className:"mb-2 flex justify-between text-sm leading-[120%]",children:[e.jsx("span",{className:p.cn(Y({size:i}),"grow shrink-0 basis-0"),"data-testid":c.smartNumberInputTestIds.label,children:a}),r!==void 0&&t&&e.jsx(K.BalanceIndicator,{title:j,token:t,maxAmount:r,size:i,disabled:n,maxButton:z,onMaxButtonClick:k})]}),e.jsxs("div",{className:p.cn("flex w-full max-w-full shrink-0 basis-full items-center"),children:[e.jsx("div",{className:"mr-3 grow shrink-0 basis-0",children:e.jsx("input",{type:"text",inputMode:"decimal",autoComplete:"off",autoCorrect:"off",spellCheck:"false",pattern:"^[0-9]*[.,]?[0-9]*$",placeholder:"0",value:s,onChange:M,onFocus:O,onBlur:F,disabled:n||!o,className:p.cn(Z({size:i}),n&&"cursor-not-allowed"),"data-testid":c.smartNumberInputTestIds.input,minLength:1,maxLength:79,title:"Amount"})}),Q?e.jsx($.CurrencyButton,{active:_,size:i,disabled:n,token:t,showSelectDialog:b,chainId:w,network:q,maxLength:R,children:t?.symbol??"Select token"}):null]})]})});N.displayName="SmartNumberInput";exports.SmartNumberInput=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),I=require("class-variance-authority"),A=require("react"),ee=require("react-dom"),te=require("../currency-button/currency-button.cjs"),ne=require("@fortawesome/free-solid-svg-icons"),re=require("../icons/fa-icon.cjs"),y=require("../../hooks/use-media-query.cjs"),h=require("../../test-ids/smart-number-input.cjs"),se=require("../../utils/bn-to-input-view.cjs");require("@gearbox-protocol/sdk");const ae=require("../../utils/parse-input-to-bn.cjs"),w=require("../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../utils/z-index.cjs");const oe=require("./balance-indicator.cjs");function ie(o){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const i in o)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(o,i);Object.defineProperty(r,i,s.get?s:{enumerable:!0,get:()=>o[i]})}}return r.default=o,Object.freeze(r)}const a=ie(A),ce=I.cva("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"}},defaultVariants:{size:"md"}}),ue=I.cva("font-medium text-foreground",{variants:{size:{sm:"text-xs",md:"text-sm"}},defaultVariants:{size:"md"}}),le=I.cva("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]!"}},defaultVariants:{size:"md"}}),_=a.forwardRef(({amount:o,token:r,label:i="Amount",maxAmount:s,maxAmountLimit:x,maxButtonLabel:k,chainId:B,network:L,maxButton:M=!0,disabled:c=!1,active:S=!1,size:T="md",symbolMaxLength:V,tokenOptions:b,onSetAmount:l,onShowSelectDialog:N,onRemove:j,onFocus:E,onBlur:R},O)=>{const q=r?.decimals??18,D=e=>{const n=e.target.value,[m,g]=ae.parseInputToBN(n,q);m===null||g===null||l&&l(m,g)},F=()=>{if(l){const e=s&&x&&s>x?x:s||0n,n=se.bnToInputView(e,q);l(e,n)}},[P,z]=a.useState(!1),W=()=>{z(!0),E?.()},Q=()=>{z(!1),R?.()},d=T??"md",X=y.useIsMobile(),$=y.useIsTablet(),G=y.useIsDesktop(),H=V??(X?20:$?30:G?22:30),[u,v]=a.useState(!1),f=a.useRef(null),C=a.useRef(null),[J,K]=a.useState({});a.useLayoutEffect(()=>{if(!u||!f.current)return;const e=()=>{const n=f.current?.getBoundingClientRect();n&&K({position:"fixed",top:n.bottom+4,right:window.innerWidth-n.right,minWidth:n.width,zIndex:9999})};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[u]),a.useEffect(()=>{if(!u)return;const e=n=>{const m=n.target,g=f.current?.contains(m),Z=C.current?.contains(m);!g&&!Z&&v(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[u]);const p=!!(b&&b.length>0),U=!c&&p?()=>v(e=>!e):N,Y=!!(r||N||p);return t.jsxs("div",{ref:O,className:ce({size:d}),"data-testid":h.smartNumberInputTestIds.root,"data-active":P,"data-disabled":c,children:[j&&t.jsx("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":h.smartNumberInputTestIds.close,children:t.jsx("button",{type:"button",onClick:j,className:"flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",children:t.jsx(re.FaIcon,{icon:ne.faXmark,className:"size-3"})})}),t.jsxs("div",{className:"mb-2 flex justify-between text-sm leading-[120%]",children:[t.jsx("span",{className:w.cn(ue({size:d}),"grow shrink-0 basis-0"),"data-testid":h.smartNumberInputTestIds.label,children:i}),s!==void 0&&r&&t.jsx(oe.BalanceIndicator,{title:k,token:r,maxAmount:s,size:d,disabled:c,maxButton:M,onMaxButtonClick:F})]}),t.jsxs("div",{className:w.cn("flex w-full max-w-full shrink-0 basis-full items-center"),children:[t.jsx("div",{className:"mr-3 grow shrink-0 basis-0",children:t.jsx("input",{type:"text",inputMode:"decimal",autoComplete:"off",autoCorrect:"off",spellCheck:"false",pattern:"^[0-9]*[.,]?[0-9]*$",placeholder:"0",value:o,onChange:D,onFocus:W,onBlur:Q,disabled:c||!l,className:w.cn(le({size:d}),c&&"cursor-not-allowed"),"data-testid":h.smartNumberInputTestIds.input,minLength:1,maxLength:79,title:"Amount"})}),Y?t.jsxs("div",{ref:f,className:"shrink-0",children:[t.jsx(te.CurrencyButton,{active:p?u:S,size:d,disabled:c,token:r,showSelectDialog:U,chainId:B,network:L,maxLength:H,children:r?.symbol??"Select token"}),p&&u&&ee.createPortal(t.jsx("div",{ref:C,style:J,className:"overflow-hidden rounded-lg border border-gray-30 bg-gray-20 shadow-lg",children:b?.map((e,n)=>t.jsxs("button",{type:"button",onClick:()=>{e.onSelect(),v(!1)},className:"flex w-full items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-gray-30 text-left",children:[e.icon?t.jsx("span",{className:"inline-flex shrink-0 items-center",children:e.icon}):null,t.jsx("span",{className:"truncate",children:e.label})]},n))}),document.body)]}):null]})]})});_.displayName="SmartNumberInput";exports.SmartNumberInput=_;

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

@@ -1,21 +1,22 @@
-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 { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { cva as b } from "class-variance-authority";
+import * as n from "react";
+import { createPortal as _ } from "react-dom";
+import { CurrencyButton as A } from "../currency-button/currency-button.js";
+import { faXmark as ee } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as te } from "../icons/fa-icon.js";
+import { useIsMobile as re, useIsTablet as ne, useIsDesktop as se } from "../../hooks/use-media-query.js";
+import { smartNumberInputTestIds as h } from "../../test-ids/smart-number-input.js";
+import { bnToInputView as oe } from "../../utils/bn-to-input-view.js";
 import "@gearbox-protocol/sdk";
-import { parseInputToBN as U } from "../../utils/parse-input-to-bn.js";
-import { cn as u } from "../../utils/cn.js";
+import { parseInputToBN as ae } from "../../utils/parse-input-to-bn.js";
+import { cn as w } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-import { BalanceIndicator as W } from "./balance-indicator.js";
-const Y = m(
+import { BalanceIndicator as ie } from "./balance-indicator.js";
+const le = b(
   "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: {
@@ -26,7 +27,7 @@ const Y = m(
     },
     defaultVariants: { size: "md" }
   }
-), Z = m("font-medium text-foreground", {
+), ce = b("font-medium text-foreground", {
   variants: {
     size: {
       sm: "text-xs",
@@ -34,7 +35,7 @@ const Y = m(
     }
   },
   defaultVariants: { size: "md" }
-}), _ = m(
+}), de = b(
   "w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",
   {
     variants: {
@@ -45,97 +46,123 @@ const Y = m(
     },
     defaultVariants: { size: "md" }
   }
-), A = v.forwardRef(
+), ue = n.forwardRef(
   ({
-    amount: y,
-    token: t,
-    label: w = "Amount",
-    maxAmount: a,
-    maxAmountLimit: l,
-    maxButtonLabel: z,
-    chainId: N,
-    network: I,
-    maxButton: C = !0,
-    disabled: r = !1,
-    active: V = !1,
-    size: B = "md",
-    onSetAmount: s,
-    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 i = a && l && a > l ? l : a || 0n, d = Q(i, h);
-        s(i, d);
+    amount: I,
+    token: s,
+    label: k = "Amount",
+    maxAmount: i,
+    maxAmountLimit: g,
+    maxButtonLabel: B,
+    chainId: M,
+    network: V,
+    maxButton: E = !0,
+    disabled: o = !1,
+    active: R = !1,
+    size: S = "md",
+    symbolMaxLength: T,
+    tokenOptions: x,
+    onSetAmount: l,
+    onShowSelectDialog: y,
+    onRemove: N,
+    onFocus: j,
+    onBlur: F
+  }, D) => {
+    const z = s?.decimals ?? 18, W = (e) => {
+      const t = e.target.value, [d, p] = ae(t, z);
+      d === null || p === null || l && l(d, p);
+    }, O = () => {
+      if (l) {
+        const e = i && g && i > g ? g : i || 0n, t = oe(e, z);
+        l(e, t);
       }
-    }, [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(
+    }, [P, C] = n.useState(!1), X = () => {
+      C(!0), j?.();
+    }, $ = () => {
+      C(!1), F?.();
+    }, c = S ?? "md", q = re(), G = ne(), H = se(), J = T ?? (q ? 20 : G ? 30 : H ? 22 : 30), [a, v] = n.useState(!1), m = n.useRef(null), L = n.useRef(null), [K, Q] = n.useState({});
+    n.useLayoutEffect(() => {
+      if (!a || !m.current) return;
+      const e = () => {
+        const t = m.current?.getBoundingClientRect();
+        t && Q({
+          position: "fixed",
+          top: t.bottom + 4,
+          right: window.innerWidth - t.right,
+          minWidth: t.width,
+          zIndex: 9999
+        });
+      };
+      return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+        window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+      };
+    }, [a]), n.useEffect(() => {
+      if (!a) return;
+      const e = (t) => {
+        const d = t.target, p = m.current?.contains(d), Z = L.current?.contains(d);
+        !p && !Z && v(!1);
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [a]);
+    const f = !!(x && x.length > 0), U = !o && f ? () => v((e) => !e) : y, Y = !!(s || y || f);
+    return /* @__PURE__ */ u(
       "div",
       {
-        ref: j,
-        className: Y({ size: o }),
-        "data-testid": n.root,
-        "data-active": T,
-        "data-disabled": r,
+        ref: D,
+        className: le({ size: c }),
+        "data-testid": h.root,
+        "data-active": P,
+        "data-disabled": o,
         children: [
-          f && /* @__PURE__ */ e(
+          N && /* @__PURE__ */ r(
             "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": n.close,
-              children: /* @__PURE__ */ e(
+              "data-testid": h.close,
+              children: /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  onClick: f,
+                  onClick: N,
                   className: "flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",
-                  children: /* @__PURE__ */ e(J, { icon: H, className: "size-3" })
+                  children: /* @__PURE__ */ r(te, { icon: ee, className: "size-3" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ c("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
-            /* @__PURE__ */ e(
+          /* @__PURE__ */ u("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
+            /* @__PURE__ */ r(
               "span",
               {
-                className: u(
-                  Z({ size: o }),
+                className: w(
+                  ce({ size: c }),
                   "grow shrink-0 basis-0"
                 ),
-                "data-testid": n.label,
-                children: w
+                "data-testid": h.label,
+                children: k
               }
             ),
-            a !== void 0 && t && /* @__PURE__ */ e(
-              W,
+            i !== void 0 && s && /* @__PURE__ */ r(
+              ie,
               {
-                title: z,
-                token: t,
-                maxAmount: a,
-                size: o,
-                disabled: r,
-                maxButton: C,
-                onMaxButtonClick: L
+                title: B,
+                token: s,
+                maxAmount: i,
+                size: c,
+                disabled: o,
+                maxButton: E,
+                onMaxButtonClick: O
               }
             )
           ] }),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ u(
             "div",
             {
-              className: u(
+              className: w(
                 "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(
+                /* @__PURE__ */ r("div", { className: "mr-3 grow shrink-0 basis-0", children: /* @__PURE__ */ r(
                   "input",
                   {
                     type: "text",
@@ -145,35 +172,63 @@ const Y = m(
                     spellCheck: "false",
                     pattern: "^[0-9]*[.,]?[0-9]*$",
                     placeholder: "0",
-                    value: y,
-                    onChange: F,
-                    onFocus: D,
-                    onBlur: R,
-                    disabled: r || !s,
-                    className: u(
-                      _({ size: o }),
-                      r && "cursor-not-allowed"
+                    value: I,
+                    onChange: W,
+                    onFocus: X,
+                    onBlur: $,
+                    disabled: o || !l,
+                    className: w(
+                      de({ size: c }),
+                      o && "cursor-not-allowed"
                     ),
-                    "data-testid": n.input,
+                    "data-testid": h.input,
                     minLength: 1,
                     maxLength: 79,
                     title: "Amount"
                   }
                 ) }),
-                E ? /* @__PURE__ */ e(
-                  G,
-                  {
-                    active: V,
-                    size: o,
-                    disabled: r,
-                    token: t,
-                    showSelectDialog: p,
-                    chainId: N,
-                    network: I,
-                    maxLength: q,
-                    children: t?.symbol ?? "Select token"
-                  }
-                ) : null
+                Y ? /* @__PURE__ */ u("div", { ref: m, className: "shrink-0", children: [
+                  /* @__PURE__ */ r(
+                    A,
+                    {
+                      active: f ? a : R,
+                      size: c,
+                      disabled: o,
+                      token: s,
+                      showSelectDialog: U,
+                      chainId: M,
+                      network: V,
+                      maxLength: J,
+                      children: s?.symbol ?? "Select token"
+                    }
+                  ),
+                  f && a && _(
+                    /* @__PURE__ */ r(
+                      "div",
+                      {
+                        ref: L,
+                        style: K,
+                        className: "overflow-hidden rounded-lg border border-gray-30 bg-gray-20 shadow-lg",
+                        children: x?.map((e, t) => /* @__PURE__ */ u(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => {
+                              e.onSelect(), v(!1);
+                            },
+                            className: "flex w-full items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-gray-30 text-left",
+                            children: [
+                              e.icon ? /* @__PURE__ */ r("span", { className: "inline-flex shrink-0 items-center", children: e.icon }) : null,
+                              /* @__PURE__ */ r("span", { className: "truncate", children: e.label })
+                            ]
+                          },
+                          t
+                        ))
+                      }
+                    ),
+                    document.body
+                  )
+                ] }) : null
               ]
             }
           )
@@ -182,7 +237,7 @@ const Y = m(
     );
   }
 );
-A.displayName = "SmartNumberInput";
+ue.displayName = "SmartNumberInput";
 export {
-  A as SmartNumberInput
+  ue as SmartNumberInput
 };

package/dist/types/components/smart-number-input/smart-number-input.d.ts

@@ -1,6 +1,14 @@
 import { NetworkType } from '@gearbox-protocol/sdk';
 import { TokenFullData } from '../../types/common';
 import * as React from "react";
+export interface TokenOption {
+    /** Display label for this option. */
+    label: string;
+    /** Optional icon to display before the label. */
+    icon?: React.ReactNode;
+    /** Called when this option is selected. */
+    onSelect: () => void;
+}
 /** A-matching SmartNumberInput size for layout (styles.tsx). */
 export type SmartNumberInputSize = "sm" | "md";
 export interface SmartNumberInputProps {
@@ -28,6 +36,10 @@ export interface SmartNumberInputProps {
     size?: SmartNumberInputSize;
     /** When true, currency dropdown is open (expand icon rotated). */
     active?: boolean;
+    /** Override max character length for token symbol display. When omitted, computed from viewport width. */
+    symbolMaxLength?: number;
+    /** Inline token options for dropdown selection (alternative to onShowSelectDialog). */
+    tokenOptions?: TokenOption[];
     /** Callback when amount changes. Called with (value: bigint, valueView: string). */
     onSetAmount?: (value: bigint, valueView: string) => void;
     /** Callback to show token select dialog. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.14.0-next.2",
+  "version": "3.14.0-next.4",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",