@0xsquid/ui 0.15.6 → 0.16.1

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 }) }));
 };
 
 /*
@@ -6713,8 +6714,8 @@ function SettingsItem({ icon, label, control, link, transparent = false, helpToo
     const helpIcon = !!helpTooltip && (jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-400" }));
     const showDetailsBorder = !!control && !link && !(control.type === 'switch');
     return (jsxRuntime.jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxRuntime.jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: helpIcon }))] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
-                        'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsxRuntime.jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [control.type === 'amount' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsxRuntime.jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsxRuntime.jsx(SettingsSlider, { type: control.type, value: control.value, onChange: control.onChange, hasDecimals: false, max: 999 })] })), control.type === 'switch' &&
-                                (control.tooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsxRuntime.jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", hasDecimals: control.hasDecimals, max: control.max, min: control.min })] }))] }))) })] })) }));
+                        'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsxRuntime.jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [control.type === 'amount' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsxRuntime.jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsxRuntime.jsx(SettingsSlider, { type: control.type, value: control.value, isSelected: control.value !== control.resetValueControl.value, onChange: control.onChange, decimalsFormat: control.decimalsFormat, max: 999 })] })), control.type === 'switch' &&
+                                (control.tooltip ? (jsxRuntime.jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsxRuntime.jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsxRuntime.jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", isSelected: control.value !== control.resetValueControl.value, decimalsFormat: control.decimalsFormat, max: control.max, min: control.min })] }))] }))) })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -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, isSelected, }) {
+    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-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.jsxs("button", { className: cn('tw-relative tw-flex tw-h-full 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', isSelected && 'tw-outline tw-outline-2 tw-outline-royal-500'), 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 = {
@@ -7251,7 +7299,7 @@ function generateMarkerLines(count) {
 }
 
 function SettingsButton({ label, isSelected = false, onClick, }) {
-    return (jsxRuntime.jsx("button", { onClick: onClick, className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
+    return (jsxRuntime.jsx("button", { onClick: onClick, className: cn('tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline tw-outline-2 tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 var v$5 = "5.10.0";

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,10 @@
 export interface SettingsSliderProps {
-    value: number;
+    value: number | undefined;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-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, isSelected, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/lists/SettingsItem.d.ts

@@ -2,26 +2,27 @@
 import { TooltipProps } from '../controls';
 export type SettingsControl = {
     type: 'percentage';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     min?: number;
     max?: number;
-    hasDecimals?: boolean;
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
         onSelect: () => void;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'amount';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     options: {
         value: number;
     }[];
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'switch';

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 }) }));
 };
 
 /*
@@ -6693,8 +6694,8 @@ function SettingsItem({ icon, label, control, link, transparent = false, helpToo
     const helpIcon = !!helpTooltip && (jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-400" }));
     const showDetailsBorder = !!control && !link && !(control.type === 'switch');
     return (jsx("li", { className: cn('tw-h-[50px] tw-self-stretch tw-px-squid-xs', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-800'), children: jsxs(ContentTag, Object.assign({ className: cn('tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xs tw-text-grey-300', link && 'hover:tw-bg-material-light-thin') }, contentTagProps, { children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), helpTooltip ? (jsx(Tooltip, Object.assign({}, helpTooltip, { children: helpIcon }))) : (jsx(Fragment, { children: helpIcon }))] }), jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', showDetailsBorder &&
-                        'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxs(Fragment, { children: [control.type === 'amount' && (jsxs(Fragment, { children: [jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsx(SettingsSlider, { type: control.type, value: control.value, onChange: control.onChange, hasDecimals: false, max: 999 })] })), control.type === 'switch' &&
-                                (control.tooltip ? (jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", hasDecimals: control.hasDecimals, max: control.max, min: control.min })] }))] }))) })] })) }));
+                        'tw-rounded-squid-xs tw-border tw-border-solid tw-border-material-light-thin tw-bg-material-dark-thin'), children: !!link ? (jsx(SquareArrowTopRight2Icon, { className: "tw-text-material-light-average" })) : (!!control && (jsxs(Fragment, { children: [control.type === 'amount' && (jsxs(Fragment, { children: [jsx(SettingsButton, { onClick: () => control.onChange(control.resetValueControl.value), label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value }), control.options.map(({ value }, index, _controls) => (jsx(SettingsButton, { label: '$' + value, isSelected: control.value === value, onClick: () => control.onChange(value) }, index))), jsx(SettingsSlider, { type: control.type, value: control.value, isSelected: control.value !== control.resetValueControl.value, onChange: control.onChange, decimalsFormat: control.decimalsFormat, max: 999 })] })), control.type === 'switch' &&
+                                (control.tooltip ? (jsx(Tooltip, Object.assign({}, control.tooltip, { children: jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }) }))) : (jsx(Switch, { size: "large", checked: control.checked, onChange: control.onChange, disabled: control.disabled }))), control.type === 'percentage' && (jsxs(Fragment, { children: [jsx(SettingsButton, { label: control.resetValueControl.label, isSelected: control.resetValueControl.value === control.value, onClick: control.resetValueControl.onSelect }), jsx(SettingsSlider, { onChange: control.onChange, value: control.value, type: "percentage", isSelected: control.value !== control.resetValueControl.value, decimalsFormat: control.decimalsFormat, max: control.max, min: control.min })] }))] }))) })] })) }));
 }
 
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
@@ -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, isSelected, }) {
+    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-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { className: cn('tw-relative tw-flex tw-h-full 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', isSelected && 'tw-outline tw-outline-2 tw-outline-royal-500'), 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 = {
@@ -7231,7 +7279,7 @@ function generateMarkerLines(count) {
 }
 
 function SettingsButton({ label, isSelected = false, onClick, }) {
-    return (jsx("button", { onClick: onClick, className: cn('tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline-royal-500'), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
+    return (jsx("button", { onClick: onClick, className: cn('tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin', isSelected && 'tw-outline tw-outline-2 tw-outline-royal-500'), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
 var v$5 = "5.10.0";

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,10 @@
 export interface SettingsSliderProps {
-    value: number;
+    value: number | undefined;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-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, isSelected, }: SettingsSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/lists/SettingsItem.d.ts

@@ -2,26 +2,27 @@
 import { TooltipProps } from '../controls';
 export type SettingsControl = {
     type: 'percentage';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     min?: number;
     max?: number;
-    hasDecimals?: boolean;
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
         onSelect: () => void;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'amount';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     options: {
         value: number;
     }[];
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'switch';

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,6 +924,10 @@ video {
   height: 240px;
 }
 
+.tw-h-\[26px\] {
+  height: 26px;
+}
+
 .tw-h-\[30px\] {
   height: 30px;
 }
@@ -1157,6 +1157,10 @@ video {
   width: 150px;
 }
 
+.tw-w-\[160px\] {
+  width: 160px;
+}
+
 .tw-w-\[180px\] {
   width: 180px;
 }
@@ -1169,6 +1173,10 @@ video {
   width: 22px;
 }
 
+.tw-w-\[26px\] {
+  width: 26px;
+}
+
 .tw-w-\[299px\] {
   width: 299px;
 }
@@ -1229,14 +1237,6 @@ video {
   width: 72px;
 }
 
-.tw-w-\[80px\] {
-  width: 80px;
-}
-
-.tw-w-\[84px\] {
-  width: 84px;
-}
-
 .tw-w-\[90px\] {
   width: 90px;
 }
@@ -1287,8 +1287,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 +1378,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 +2032,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 +2072,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 +2173,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 +2209,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;
@@ -163,14 +167,15 @@ interface NumericInputProps {
 declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxDecimals, formatIfVerySmall, showDetails, isLoading, direction, amountUsd, }: NumericInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
-    value: number;
+    value: number | undefined;
     type: 'percentage' | 'amount';
-    onChange?: (value: number) => void;
-    hasDecimals?: boolean;
+    onChange?: (value: number | undefined) => void;
+    decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-declare function SettingsSlider({ value, type, onChange, hasDecimals, max, min, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
+declare function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected, }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
@@ -297,26 +302,27 @@ declare function SectionTitle({ title, icon, accessory, actionIcon, className, .
 
 type SettingsControl = {
     type: 'percentage';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     min?: number;
     max?: number;
-    hasDecimals?: boolean;
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
         onSelect: () => void;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'amount';
-    value: number;
-    onChange: (value: number) => void;
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
     options: {
         value: number;
     }[];
+    decimalsFormat?: number;
     resetValueControl: {
         label: string;
-        value: number;
+        value: number | undefined;
     };
 } | {
     type: 'switch';

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.1",
   "author": "",
   "license": "MIT",
   "resolutions": {