@0xsquid/ui 0.23.2 → 0.23.3-beta.0

package/dist/cjs/index.js

@@ -18192,7 +18192,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
                                                     : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? 'tw-text-grey-600'
-                                                    : 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
+                                                    : 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
                     decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
                     symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
                     price: tokenPrice,
@@ -25576,18 +25576,19 @@ const RegExpNonZeroValue = /[^0.]/;
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
 const notInteractiveChipClassName = 'tw-cursor-not-allowed';
 const loadingClassName = 'tw-opacity-50';
-var InputMode;
-(function (InputMode) {
-    InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
-    InputMode[InputMode["USD"] = 1] = "USD";
-})(InputMode || (InputMode = {}));
-function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
-    token: '0.001',
-    usd: '0.01',
-}, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, }) {
-    var _a;
+var UserInputType;
+(function (UserInputType) {
+    UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
+    UserInputType[UserInputType["USD"] = 1] = "USD";
+})(UserInputType || (UserInputType = {}));
+function NumericInput(_a) {
+    var _b;
+    var { priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
+        token: '0.001',
+        usd: '0.01',
+    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton"]);
     const [inputValue, setInputValue] = React$1.useState('');
-    const [inputMode, setInputMode] = React$1.useState(InputMode.TOKEN);
+    const [userInputType, setUserInputType] = React$1.useState(UserInputType.TOKEN);
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     React$1.useEffect(() => {
         if (forcedAmount !== undefined) {
@@ -25596,11 +25597,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [forcedAmount]);
     const updateInputValue = React$1.useCallback((newValue) => {
         const safeNewValue = trimExtraDecimals(newValue, token.decimals);
-        const formattedAmount = inputMode === InputMode.TOKEN
+        const formattedAmount = userInputType === UserInputType.TOKEN
             ? safeNewValue
             : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
         setInputValue(formattedAmount);
-    }, [inputMode, token.price, direction, token.decimals]);
+    }, [userInputType, token.price, direction, token.decimals]);
     const onBalanceButtonClick = React$1.useCallback(() => {
         if (balanceChipClickable) {
             updateInputValue(balance);
@@ -25612,7 +25613,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     ]);
     const handleInputChange = (e) => {
         let value = e.target.value.replace(/,/g, '.'); // Replace commas with dots
-        const maxDecimalsForInputType = inputMode === InputMode.TOKEN ? token.decimals : maxUsdDecimals;
+        const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
             setInputValue(value);
@@ -25631,12 +25632,14 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const handleSwitchInputMode = () => {
         var _a;
         if (inputValue !== '') {
-            const convertedAmount = inputMode === InputMode.TOKEN
+            const convertedAmount = userInputType === UserInputType.TOKEN
                 ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
                 : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
             setInputValue(convertedAmount);
         }
-        setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
+        setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
+            ? UserInputType.USD
+            : UserInputType.TOKEN);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getRawAmounts = (amount) => {
@@ -25647,7 +25650,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                 isTokenAmountVerySmall: false,
                 isUsdAmountVerySmall: false,
             };
-        if (inputMode === InputMode.TOKEN) {
+        if (userInputType === UserInputType.TOKEN) {
             const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
             const tokenRawAmount = amount;
             const isTokenAmountVerySmall = !!tokenRawAmount &&
@@ -25687,7 +25690,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         var _a;
         if (isNaN(Number(inputValue)) || inputValue === '')
             return '0';
-        if (inputMode === InputMode.TOKEN) {
+        if (userInputType === UserInputType.TOKEN) {
             if (direction === 'from') {
                 return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
             }
@@ -25700,13 +25703,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         }
     }, [
         inputValue,
-        inputMode,
+        userInputType,
         token.price,
         direction,
         inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
     ]);
     const AmountChip = isInteractive ? 'button' : 'div';
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
+    const priceImpactClass = ((_b = Number(priceImpactPercentage)) !== null && _b !== void 0 ? _b : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
     const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
@@ -25717,13 +25720,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const inputRef = React$1.useRef(null);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', userInputType === UserInputType.USD && 'tw-pl-[33px]') }, props))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
-                        : inputMode === InputMode.TOKEN
+                        : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
                             : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
                                 ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
+                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
                                                     ? formatIfVerySmall.token
                                                     : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
                                                 ? formatIfVerySmall.token

package/dist/cjs/types/components/controls/NumericInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SwapDirection } from '../../types/components';
 import { TooltipProps } from './Tooltip';
 interface Token {
@@ -5,7 +6,7 @@ interface Token {
     symbol: string;
     decimals: number;
 }
-interface NumericInputProps {
+interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     token: Token;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
@@ -33,5 +34,5 @@ interface NumericInputProps {
         tooltip?: Omit<TooltipProps, 'children'>;
     };
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/index.js

@@ -18172,7 +18172,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
                                                     : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? 'tw-text-grey-600'
-                                                    : 'tw-text-royal-400' })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
+                                                    : 'tw-text-royal-400' })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
                     decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
                     symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
                     price: tokenPrice,
@@ -25556,18 +25556,19 @@ const RegExpNonZeroValue = /[^0.]/;
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
 const notInteractiveChipClassName = 'tw-cursor-not-allowed';
 const loadingClassName = 'tw-opacity-50';
-var InputMode;
-(function (InputMode) {
-    InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
-    InputMode[InputMode["USD"] = 1] = "USD";
-})(InputMode || (InputMode = {}));
-function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
-    token: '0.001',
-    usd: '0.01',
-}, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, }) {
-    var _a;
+var UserInputType;
+(function (UserInputType) {
+    UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
+    UserInputType[UserInputType["USD"] = 1] = "USD";
+})(UserInputType || (UserInputType = {}));
+function NumericInput(_a) {
+    var _b;
+    var { priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
+        token: '0.001',
+        usd: '0.01',
+    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton"]);
     const [inputValue, setInputValue] = useState('');
-    const [inputMode, setInputMode] = useState(InputMode.TOKEN);
+    const [userInputType, setUserInputType] = useState(UserInputType.TOKEN);
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     useEffect(() => {
         if (forcedAmount !== undefined) {
@@ -25576,11 +25577,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [forcedAmount]);
     const updateInputValue = useCallback((newValue) => {
         const safeNewValue = trimExtraDecimals(newValue, token.decimals);
-        const formattedAmount = inputMode === InputMode.TOKEN
+        const formattedAmount = userInputType === UserInputType.TOKEN
             ? safeNewValue
             : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
         setInputValue(formattedAmount);
-    }, [inputMode, token.price, direction, token.decimals]);
+    }, [userInputType, token.price, direction, token.decimals]);
     const onBalanceButtonClick = useCallback(() => {
         if (balanceChipClickable) {
             updateInputValue(balance);
@@ -25592,7 +25593,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     ]);
     const handleInputChange = (e) => {
         let value = e.target.value.replace(/,/g, '.'); // Replace commas with dots
-        const maxDecimalsForInputType = inputMode === InputMode.TOKEN ? token.decimals : maxUsdDecimals;
+        const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
             setInputValue(value);
@@ -25611,12 +25612,14 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const handleSwitchInputMode = () => {
         var _a;
         if (inputValue !== '') {
-            const convertedAmount = inputMode === InputMode.TOKEN
+            const convertedAmount = userInputType === UserInputType.TOKEN
                 ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
                 : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
             setInputValue(convertedAmount);
         }
-        setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
+        setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
+            ? UserInputType.USD
+            : UserInputType.TOKEN);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getRawAmounts = (amount) => {
@@ -25627,7 +25630,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                 isTokenAmountVerySmall: false,
                 isUsdAmountVerySmall: false,
             };
-        if (inputMode === InputMode.TOKEN) {
+        if (userInputType === UserInputType.TOKEN) {
             const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
             const tokenRawAmount = amount;
             const isTokenAmountVerySmall = !!tokenRawAmount &&
@@ -25667,7 +25670,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         var _a;
         if (isNaN(Number(inputValue)) || inputValue === '')
             return '0';
-        if (inputMode === InputMode.TOKEN) {
+        if (userInputType === UserInputType.TOKEN) {
             if (direction === 'from') {
                 return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
             }
@@ -25680,13 +25683,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         }
     }, [
         inputValue,
-        inputMode,
+        userInputType,
         token.price,
         direction,
         inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
     ]);
     const AmountChip = isInteractive ? 'button' : 'div';
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
+    const priceImpactClass = ((_b = Number(priceImpactPercentage)) !== null && _b !== void 0 ? _b : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
     const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
@@ -25697,13 +25700,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const inputRef = useRef(null);
     return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', userInputType === UserInputType.USD && 'tw-pl-[33px]') }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
-                        : inputMode === InputMode.TOKEN
+                        : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
                             : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
                                 ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
+                                : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
                                                     ? formatIfVerySmall.token
                                                     : amountFormatted })] }) })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsx(CaptionText, { children: isTokenAmountVerySmall
                                                 ? formatIfVerySmall.token

package/dist/esm/types/components/controls/NumericInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SwapDirection } from '../../types/components';
 import { TooltipProps } from './Tooltip';
 interface Token {
@@ -5,7 +6,7 @@ interface Token {
     symbol: string;
     decimals: number;
 }
-interface NumericInputProps {
+interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     token: Token;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
@@ -33,5 +34,5 @@ interface NumericInputProps {
         tooltip?: Omit<TooltipProps, 'children'>;
     };
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -174,7 +174,7 @@ interface Token$1 {
     symbol: string;
     decimals: number;
 }
-interface NumericInputProps {
+interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     token: Token$1;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
@@ -202,7 +202,7 @@ interface NumericInputProps {
         tooltip?: Omit<TooltipProps, 'children'>;
     };
 }
-declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): react_jsx_runtime.JSX.Element;
+declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number | undefined;

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.23.2",
+  "version": "0.23.3-beta.0",
   "author": "",
   "license": "MIT",
   "resolutions": {