@0xsquid/ui 0.16.0 → 0.16.2

package/dist/cjs/index.js

@@ -2591,8 +2591,8 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
                         imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
 }
 
-function LoadingSkeleton({ className, height = '20', }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
+function LoadingSkeleton({ className, height = '20', width = '100', }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
 }
 
 /******************************************************************************
@@ -6679,13 +6679,26 @@ function ListItem(_a) {
             },
         }
         : {};
+    // There are two possible ways to handle loading state:
+    // Can be boolean or string
+    // If boolean and true, it will show a full loading skeleton
+    // If it's a non empty string, means that we want to display the skeleton + some text
+    const loadingComponent = () => {
+        if ((loading === null || loading === void 0 ? void 0 : loading.subtitle) === true) {
+            return (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-text-grey-500", height: "10", width: "50" }));
+        }
+        if (typeof (loading === null || loading === void 0 ? void 0 : loading.subtitle) === 'string' && loading.subtitle.length > 0) {
+            return (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(LoadingSkeleton, { className: "tw-text-grey-500", width: "50" }), jsxRuntime.jsx(CaptionText, { className: subtitleClassName, children: loading.subtitle })] }));
+        }
+        return null;
+    };
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? 'button' : 'div';
     const itemProps = isInteractive ? props : {};
     return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
                     size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]'), children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
                         : 'tw-flex', isDetailInteractive && 'hover:tw-bg-material-light-thin', detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })) })));
 }
@@ -6714,8 +6727,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, }) {
@@ -7155,7 +7168,7 @@ 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, decimalsFormat, max, min, }) {
+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(() => {
@@ -7197,9 +7210,9 @@ function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
     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
+    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'), 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) => {
+                    : '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) => {
@@ -7299,7 +7312,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/badges/LoadingSkeleton.d.ts

@@ -1,4 +1,5 @@
-export declare function LoadingSkeleton({ className, height, }: {
+export declare function LoadingSkeleton({ className, height, width, }: {
     className?: string;
     height?: string;
+    width?: string;
 }): import("react/jsx-runtime").JSX.Element;

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 | undefined) => void;
     decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-export declare function SettingsSlider({ value, type, onChange, decimalsFormat, 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/ListItem.d.ts

@@ -16,7 +16,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     rounded?: boolean;
     detailButtonClassName?: string;
     loading?: {
-        subtitle?: boolean;
+        subtitle?: boolean | string;
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }

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/esm/index.js

@@ -2571,8 +2571,8 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
                         imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
 }
 
-function LoadingSkeleton({ className, height = '20', }) {
-    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { stopColor: "currentColor" }), jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
+function LoadingSkeleton({ className, height = '20', width = '100', }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { stopColor: "currentColor" }), jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
 }
 
 /******************************************************************************
@@ -6659,13 +6659,26 @@ function ListItem(_a) {
             },
         }
         : {};
+    // There are two possible ways to handle loading state:
+    // Can be boolean or string
+    // If boolean and true, it will show a full loading skeleton
+    // If it's a non empty string, means that we want to display the skeleton + some text
+    const loadingComponent = () => {
+        if ((loading === null || loading === void 0 ? void 0 : loading.subtitle) === true) {
+            return (jsx(LoadingSkeleton, { className: "tw-text-grey-500", height: "10", width: "50" }));
+        }
+        if (typeof (loading === null || loading === void 0 ? void 0 : loading.subtitle) === 'string' && loading.subtitle.length > 0) {
+            return (jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(LoadingSkeleton, { className: "tw-text-grey-500", width: "50" }), jsx(CaptionText, { className: subtitleClassName, children: loading.subtitle })] }));
+        }
+        return null;
+    };
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? 'button' : 'div';
     const itemProps = isInteractive ? props : {};
     return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
                     size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]'), children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
                         : 'tw-flex', isDetailInteractive && 'hover:tw-bg-material-light-thin', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })) })));
 }
@@ -6694,8 +6707,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, }) {
@@ -7135,7 +7148,7 @@ 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, decimalsFormat, max, min, }) {
+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(() => {
@@ -7177,9 +7190,9 @@ function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, }) {
     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
+    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'), 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) => {
+                    : '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) => {
@@ -7279,7 +7292,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/badges/LoadingSkeleton.d.ts

@@ -1,4 +1,5 @@
-export declare function LoadingSkeleton({ className, height, }: {
+export declare function LoadingSkeleton({ className, height, width, }: {
     className?: string;
     height?: string;
+    width?: string;
 }): import("react/jsx-runtime").JSX.Element;

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 | undefined) => void;
     decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-export declare function SettingsSlider({ value, type, onChange, decimalsFormat, 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/ListItem.d.ts

@@ -16,7 +16,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     rounded?: boolean;
     detailButtonClassName?: string;
     loading?: {
-        subtitle?: boolean;
+        subtitle?: boolean | string;
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }

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/index.css

@@ -932,10 +932,6 @@ video {
   height: 30px;
 }
 
-.tw-h-\[32px\] {
-  height: 32px;
-}
-
 .tw-h-\[40px\] {
   height: 40px;
 }
@@ -1377,11 +1373,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-x-6 {
-  --tw-translate-x: -1.5rem;
-  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));

package/dist/index.d.ts

@@ -13,9 +13,10 @@ interface BadgeImageProps {
 type BadgeSize = 'sm' | 'md';
 declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
 
-declare function LoadingSkeleton({ className, height, }: {
+declare function LoadingSkeleton({ className, height, width, }: {
     className?: string;
     height?: string;
+    width?: string;
 }): react_jsx_runtime.JSX.Element;
 
 interface UsdAmountProps {
@@ -167,14 +168,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 | undefined) => void;
     decimalsFormat?: number;
     min?: number;
     max?: number;
+    isSelected?: boolean;
 }
-declare function SettingsSlider({ value, type, onChange, decimalsFormat, 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;
@@ -276,7 +278,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     rounded?: boolean;
     detailButtonClassName?: string;
     loading?: {
-        subtitle?: boolean;
+        subtitle?: boolean | string;
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
@@ -301,26 +303,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.16.0",
+  "version": "0.16.2",
   "author": "",
   "license": "MIT",
   "resolutions": {