@0xsquid/ui 0.15.6 → 0.16.0

package/dist/cjs/index.js

@@ -2918,11 +2918,12 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick, containerClassName } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick", "containerClassName"]);
-    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsxRuntime.jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
+    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps } = _a, props = __rest(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps"]);
+    const showActionButton = !!actionButtonProps;
+    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsxRuntime.jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showActionButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
-const PasteButton = ({ onClick }) => {
-    return (jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", onClick: onClick, className: "!tw-h-[30px] !tw-w-fit tw-min-w-0 !tw-px-2", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
+const InputActionButton = ({ onClick, variant = 'tertiary', label = 'Paste', }) => {
+    return (jsxRuntime.jsx(Button, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
 };
 
 /*
@@ -7154,18 +7155,65 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                                             : amountFormatted }), ' ', jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsx("input", { min: min !== null && min !== void 0 ? min : 0, max: max !== null && max !== void 0 ? max : 99, step: hasDecimals ? 0.1 : 1, placeholder: "0", type: "number", onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.target.value));
-                }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
-                    ? 'tw-w-[84px] tw-pr-[52px] tw-text-right'
-                    : 'tw-w-[80px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsxRuntime.jsx(PercentageDecorator, {}), type === 'amount' && jsxRuntime.jsx(AmountDecorator, {})] }));
-}
-function PercentageDecorator() {
-    return (jsxRuntime.jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsxRuntime.jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
-}
-function AmountDecorator() {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-absolute tw-left-squid-xs tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "$" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) })] }));
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
+    const [isInputVisible, setIsInputVisible] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState(String(value !== null && value !== void 0 ? value : 0));
+    React.useEffect(() => {
+        if (!isInputVisible)
+            return;
+        const handleOutsideClick = (event) => {
+            var _a;
+            const clickedElementIsDifferentThanMenu = event.target !== menuRef.current;
+            const clickedElementIsDifferentThanSlider = event.target !== sliderRef.current;
+            const sliderContainsClickedElement = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+            const hideInput = clickedElementIsDifferentThanMenu &&
+                (!clickedElementIsDifferentThanSlider || !sliderContainsClickedElement);
+            if (hideInput) {
+                handleCloseInput();
+            }
+        };
+        document.addEventListener('click', handleOutsideClick);
+        return () => {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, [isInputVisible]);
+    const menuRef = React.useRef(null);
+    const sliderRef = React.useRef(null);
+    const handleSubmit = React.useCallback((value) => {
+        handleCloseInput();
+        onChange === null || onChange === void 0 ? void 0 : onChange(value === '' ? undefined : Number(value));
+    }, [onChange]);
+    const handleKeyDown = React.useCallback((e) => {
+        // block unwanted (but still valid) characters
+        if (['e', 'E', '+', '-'].includes(e.key))
+            return e.preventDefault();
+        // close input when pressing escape
+        if (e.key === 'Escape')
+            return handleCloseInput();
+    }, []);
+    const handleOpenInput = React.useCallback(() => {
+        setIsInputVisible(true);
+    }, []);
+    const handleCloseInput = React.useCallback(() => {
+        setIsInputVisible(false);
+    }, []);
+    return (jsxRuntime.jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsxs("button", { className: cn('tw-relative tw-flex tw-h-[32px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', value === 0 || value === undefined
+                    ? 'tw-text-grey-600'
+                    : 'tw-text-grey-300', isInputVisible ? 'tw-bg-material-light-thin' : 'tw-bg-transparent'), children: [value !== null && value !== void 0 ? value : 0, jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === 'percentage' ? '%' : '$' })] }), jsxRuntime.jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsxRuntime.jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsxRuntime.jsx("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        handleSubmit(inputValue);
+                    }, children: jsxRuntime.jsx(Input, { autoFocus: true, min: min, max: max, onKeyDown: handleKeyDown, step: decimalsFormat, placeholder: "0", type: "number", defaultValue: value, value: inputValue, onChange: (e) => {
+                            const isValid = e.target.checkValidity();
+                            if (!isValid)
+                                return;
+                            setInputValue(e.target.value);
+                        }, showIcon: false, actionButtonProps: {
+                            label: 'Ok',
+                            onClick: () => {
+                                handleSubmit(inputValue);
+                            },
+                            variant: 'primary',
+                        } }) }) }))] }));
 }
 
 const switchSizeClassMap = {

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

@@ -1,12 +1,17 @@
 /// <reference types="react" />
+import { ButtonVariant } from '../../types/components';
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     showIcon?: boolean;
-    showPasteButton?: boolean;
     icon?: React.ReactNode;
     isError?: boolean;
-    onPasteButtonClick?: () => void;
     containerClassName?: string;
+    actionButtonProps?: InputActionButtonProps;
 }
-export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+type InputActionButtonProps = {
+    onClick?: () => void;
+    variant?: ButtonVariant;
+    label?: string;
+};
 export {};

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

@@ -1,9 +1,9 @@
 export interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
 }
-export declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/stories/controls/Input.stories.d.ts

@@ -5,5 +5,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithoutIcon: Story;
-export declare const WithPasteButton: Story;
+export declare const WithActionButton: Story;
 export declare const Error: Story;

package/dist/cjs/types/stories/controls/SettingsSlider.stories.d.ts

@@ -5,3 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Percentage: Story;
 export declare const Amount: Story;
+export declare const PercentageWith1DecimalPlaceAllowed: Story;
+export declare const AmountWith2DecimalPlacesAllowed: Story;
+export declare const PercentageMax50: Story;
+export declare const AmountMax999: Story;

package/dist/esm/index.js

@@ -2898,11 +2898,12 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon, isError = false, onPasteButtonClick, containerClassName } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon", "isError", "onPasteButtonClick", "containerClassName"]);
-    return (jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, { onClick: onPasteButtonClick }) })) : null] }));
+    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps } = _a, props = __rest(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps"]);
+    const showActionButton = !!actionButtonProps;
+    return (jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showActionButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
-const PasteButton = ({ onClick }) => {
-    return (jsx(Button, { size: "md", variant: "tertiary", onClick: onClick, className: "!tw-h-[30px] !tw-w-fit tw-min-w-0 !tw-px-2", children: jsx(CaptionText, { children: "Paste" }) }));
+const InputActionButton = ({ onClick, variant = 'tertiary', label = 'Paste', }) => {
+    return (jsx(Button, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsx(CaptionText, { children: label }) }));
 };
 
 /*
@@ -7134,18 +7135,65 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                                             : amountFormatted }), ' ', jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: cn('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceChipTag, { onClick: onBalanceButtonClick, className: cn(buttonClassName, isInteractive && interactiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxs(CaptionText, { children: [balanceFormatted, " ", token.symbol] }), jsx(MaxIcon, {})] })] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }) {
-    return (jsxs("div", { className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsx("input", { min: min !== null && min !== void 0 ? min : 0, max: max !== null && max !== void 0 ? max : 99, step: hasDecimals ? 0.1 : 1, placeholder: "0", type: "number", onChange: (e) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(Number(e.target.value));
-                }, className: cn('tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-bg-transparent tw-p-squid-xs tw-text-caption !tw-font-medium tw-leading-[10px] tw-text-grey-300 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', type === 'percentage'
-                    ? 'tw-w-[84px] tw-pr-[52px] tw-text-right'
-                    : 'tw-w-[80px] tw-pl-[20px] tw-pr-[32px] tw-text-left'), value: value }), type === 'percentage' && jsx(PercentageDecorator, {}), type === 'amount' && jsx(AmountDecorator, {})] }));
-}
-function PercentageDecorator() {
-    return (jsxs("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: [jsx(CaptionText, { className: "tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "%" }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
-}
-function AmountDecorator() {
-    return (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-absolute tw-left-squid-xs tw-translate-y-[0.5px] !tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: "$" }), jsx("div", { className: "tw-absolute tw-right-squid-xs tw-flex tw-items-center tw-justify-center tw-gap-squid-xs !tw-font-medium tw-leading-[10px]", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) })] }));
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
+    const [isInputVisible, setIsInputVisible] = useState(false);
+    const [inputValue, setInputValue] = useState(String(value !== null && value !== void 0 ? value : 0));
+    useEffect(() => {
+        if (!isInputVisible)
+            return;
+        const handleOutsideClick = (event) => {
+            var _a;
+            const clickedElementIsDifferentThanMenu = event.target !== menuRef.current;
+            const clickedElementIsDifferentThanSlider = event.target !== sliderRef.current;
+            const sliderContainsClickedElement = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+            const hideInput = clickedElementIsDifferentThanMenu &&
+                (!clickedElementIsDifferentThanSlider || !sliderContainsClickedElement);
+            if (hideInput) {
+                handleCloseInput();
+            }
+        };
+        document.addEventListener('click', handleOutsideClick);
+        return () => {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, [isInputVisible]);
+    const menuRef = useRef(null);
+    const sliderRef = useRef(null);
+    const handleSubmit = useCallback((value) => {
+        handleCloseInput();
+        onChange === null || onChange === void 0 ? void 0 : onChange(value === '' ? undefined : Number(value));
+    }, [onChange]);
+    const handleKeyDown = useCallback((e) => {
+        // block unwanted (but still valid) characters
+        if (['e', 'E', '+', '-'].includes(e.key))
+            return e.preventDefault();
+        // close input when pressing escape
+        if (e.key === 'Escape')
+            return handleCloseInput();
+    }, []);
+    const handleOpenInput = useCallback(() => {
+        setIsInputVisible(true);
+    }, []);
+    const handleCloseInput = useCallback(() => {
+        setIsInputVisible(false);
+    }, []);
+    return (jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { className: cn('tw-relative tw-flex tw-h-[32px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption !tw-font-medium tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', value === 0 || value === undefined
+                    ? 'tw-text-grey-600'
+                    : 'tw-text-grey-300', isInputVisible ? 'tw-bg-material-light-thin' : 'tw-bg-transparent'), children: [value !== null && value !== void 0 ? value : 0, jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === 'percentage' ? '%' : '$' })] }), jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsx("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        handleSubmit(inputValue);
+                    }, children: jsx(Input, { autoFocus: true, min: min, max: max, onKeyDown: handleKeyDown, step: decimalsFormat, placeholder: "0", type: "number", defaultValue: value, value: inputValue, onChange: (e) => {
+                            const isValid = e.target.checkValidity();
+                            if (!isValid)
+                                return;
+                            setInputValue(e.target.value);
+                        }, showIcon: false, actionButtonProps: {
+                            label: 'Ok',
+                            onClick: () => {
+                                handleSubmit(inputValue);
+                            },
+                            variant: 'primary',
+                        } }) }) }))] }));
 }
 
 const switchSizeClassMap = {

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

@@ -1,12 +1,17 @@
 /// <reference types="react" />
+import { ButtonVariant } from '../../types/components';
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     showIcon?: boolean;
-    showPasteButton?: boolean;
     icon?: React.ReactNode;
     isError?: boolean;
-    onPasteButtonClick?: () => void;
     containerClassName?: string;
+    actionButtonProps?: InputActionButtonProps;
 }
-export declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+type InputActionButtonProps = {
+    onClick?: () => void;
+    variant?: ButtonVariant;
+    label?: string;
+};
 export {};

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

@@ -1,9 +1,9 @@
 export interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
 }
-export declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/stories/controls/Input.stories.d.ts

@@ -5,5 +5,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithoutIcon: Story;
-export declare const WithPasteButton: Story;
+export declare const WithActionButton: Story;
 export declare const Error: Story;

package/dist/esm/types/stories/controls/SettingsSlider.stories.d.ts

@@ -5,3 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Percentage: Story;
 export declare const Amount: Story;
+export declare const PercentageWith1DecimalPlaceAllowed: Story;
+export declare const AmountWith2DecimalPlacesAllowed: Story;
+export declare const PercentageMax50: Story;
+export declare const AmountMax999: Story;

package/dist/index.css

@@ -693,10 +693,6 @@ video {
   left: 1.875rem;
 }
 
-.tw-left-squid-xs {
-  left: 0.625rem;
-}
-
 .tw-right-0 {
   right: 0px;
 }
@@ -928,10 +924,18 @@ video {
   height: 240px;
 }
 
+.tw-h-\[26px\] {
+  height: 26px;
+}
+
 .tw-h-\[30px\] {
   height: 30px;
 }
 
+.tw-h-\[32px\] {
+  height: 32px;
+}
+
 .tw-h-\[40px\] {
   height: 40px;
 }
@@ -1157,6 +1161,10 @@ video {
   width: 150px;
 }
 
+.tw-w-\[160px\] {
+  width: 160px;
+}
+
 .tw-w-\[180px\] {
   width: 180px;
 }
@@ -1169,6 +1177,10 @@ video {
   width: 22px;
 }
 
+.tw-w-\[26px\] {
+  width: 26px;
+}
+
 .tw-w-\[299px\] {
   width: 299px;
 }
@@ -1229,14 +1241,6 @@ video {
   width: 72px;
 }
 
-.tw-w-\[80px\] {
-  width: 80px;
-}
-
-.tw-w-\[84px\] {
-  width: 84px;
-}
-
 .tw-w-\[90px\] {
   width: 90px;
 }
@@ -1287,8 +1291,8 @@ video {
   width: 3.75rem;
 }
 
-.tw-min-w-0 {
-  min-width: 0px;
+.\!tw-min-w-0 {
+  min-width: 0px !important;
 }
 
 .tw-min-w-96 {
@@ -1378,11 +1382,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.tw-translate-y-\[0\.5px\] {
-  --tw-translate-y: 0.5px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .tw-rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2037,11 +2036,6 @@ video {
   padding: 3.75rem;
 }
 
-.\!tw-px-2 {
-  padding-left: 0.5rem !important;
-  padding-right: 0.5rem !important;
-}
-
 .\!tw-px-4 {
   padding-left: 1rem !important;
   padding-right: 1rem !important;
@@ -2082,11 +2076,6 @@ video {
   padding-right: 3px;
 }
 
-.tw-px-\[70px\] {
-  padding-left: 70px;
-  padding-right: 70px;
-}
-
 .tw-px-squid-l {
   padding-left: 1.875rem;
   padding-right: 1.875rem;
@@ -2188,16 +2177,12 @@ video {
   padding-left: 0.25rem;
 }
 
-.tw-pl-\[20px\] {
-  padding-left: 20px;
-}
-
 .tw-pl-\[33px\] {
   padding-left: 33px;
 }
 
-.tw-pl-\[44px\] {
-  padding-left: 44px;
+.tw-pl-\[40px\] {
+  padding-left: 40px;
 }
 
 .tw-pl-\[7px\] {
@@ -2228,12 +2213,12 @@ video {
   padding-right: 1rem;
 }
 
-.tw-pr-\[32px\] {
-  padding-right: 32px;
+.tw-pr-\[40px\] {
+  padding-right: 40px;
 }
 
-.tw-pr-\[52px\] {
-  padding-right: 52px;
+.tw-pr-\[70px\] {
+  padding-right: 70px;
 }
 
 .tw-pr-squid-m {

package/dist/index.d.ts

@@ -124,13 +124,17 @@ declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonP
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     showIcon?: boolean;
-    showPasteButton?: boolean;
     icon?: React.ReactNode;
     isError?: boolean;
-    onPasteButtonClick?: () => void;
     containerClassName?: string;
+    actionButtonProps?: InputActionButtonProps;
 }
-declare function Input({ placeholder, showIcon, showPasteButton, className, icon, isError, onPasteButtonClick, containerClassName, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+type InputActionButtonProps = {
+    onClick?: () => void;
+    variant?: ButtonVariant;
+    label?: string;
+};
 
 interface Token$1 {
     price: number;
@@ -165,12 +169,12 @@ declare function NumericInput({ priceImpactPercentage, balance, error, criticalP
 interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
 }
-declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
+declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;

package/package.json

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