@0xsquid/ui 0.21.1-beta.0 → 0.22.0

package/dist/cjs/index.js

@@ -2637,24 +2637,41 @@ const mainImageSizeClassMap = {
     md: 'tw-w-10 tw-h-10',
 };
 const loadingSkeletonClassName = 'tw-bg-grey-500';
-function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, }) {
+var ImageState;
+(function (ImageState) {
+    ImageState[ImageState["LOADING"] = 0] = "LOADING";
+    ImageState[ImageState["LOADED"] = 1] = "LOADED";
+    ImageState[ImageState["ERROR"] = 2] = "ERROR";
+})(ImageState || (ImageState = {}));
+function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, placeholderImageUrl, }) {
+    const imageUrl = (_imageUrl === null || _imageUrl === void 0 ? void 0 : _imageUrl.trim()) || placeholderImageUrl;
     const [imagesLoadState, setImageLoadState] = React.useState({
-        badgeLoaded: false,
-        mainImageLoaded: false,
+        badge: ImageState.LOADING,
+        mainImage: ImageState.LOADING,
     });
     const badgeImageClassName = cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]);
     const mainImageClassName = cn('tw-h-full tw-w-full tw-absolute', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs');
-    return imageUrl ? (jsxRuntime.jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [!imagesLoadState.mainImageLoaded && (jsxRuntime.jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) })), jsxRuntime.jsx("img", { src: imageUrl, alt: "", onLoad: () => {
+    return imageUrl ? (jsxRuntime.jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [imagesLoadState.mainImage !== ImageState.LOADED &&
+                (placeholderImageUrl ? (jsxRuntime.jsx("img", { src: placeholderImageUrl, alt: "", className: mainImageClassName })) : (jsxRuntime.jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) }))), jsxRuntime.jsx("img", { src: imageUrl, alt: "", onError: () => {
+                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.ERROR })));
+                }, onLoad: () => {
                     // update state when image is fully loaded
-                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImageLoaded: true })));
+                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.LOADED })));
                 }, className: cn(mainImageClassName, 
                 // hide main image while it is loading, and display it when it is loaded
-                imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') }), badgeUrl ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!imagesLoadState.badgeLoaded && (jsxRuntime.jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) })), jsxRuntime.jsx("img", { src: badgeUrl, alt: "", onLoad: () => {
+                imagesLoadState.mainImage === ImageState.LOADED
+                    ? 'tw-block'
+                    : 'tw-hidden') }), badgeUrl ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [imagesLoadState.badge !== ImageState.LOADED &&
+                        (placeholderImageUrl ? (jsxRuntime.jsx("img", { src: placeholderImageUrl, alt: "", className: badgeImageClassName })) : (jsxRuntime.jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) }))), jsxRuntime.jsx("img", { src: badgeUrl, alt: "", onError: () => {
+                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.ERROR })));
+                        }, onLoad: () => {
                             // update state when badge image is fully loaded
-                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
+                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.LOADED })));
                         }, className: cn(badgeImageClassName, 
                         // hide badge image while it is loading, and display it when it is loaded
-                        imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
+                        imagesLoadState.badge === ImageState.LOADED
+                            ? 'tw-block'
+                            : 'tw-hidden') })] })) : null] })) : null;
 }
 
 /******************************************************************************
@@ -17082,7 +17099,7 @@ const collapsedListItemClassMap = {
     large: 'tw-w-[80px]',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
     const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block');
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -17115,7 +17132,7 @@ function ListItem(_a) {
     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], compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : 'tw-w-full', 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', 
+            : 'tw-w-full', 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, placeholderImageUrl: placeholderImageUrl, 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]', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block'), children: itemTitle })) : (itemTitle), size === 'large' &&
                             ((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
@@ -24435,6 +24452,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         }
     };
     const handleSwitchInputMode = () => {
+        var _a;
         if (inputValue !== '') {
             const convertedAmount = inputMode === InputMode.TOKEN
                 ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
@@ -24442,6 +24460,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
             setInputValue(convertedAmount);
         }
         setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getRawAmounts = (amount) => {
         if (amount === '')
@@ -24489,7 +24508,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const { isTokenAmountVerySmall, isUsdAmountVerySmall } = getRawAmounts(inputValue);
     const amountFormatted = React.useMemo(() => {
         var _a;
-        if (inputValue === '')
+        if (isNaN(Number(inputValue)) || inputValue === '')
             return '0';
         if (inputMode === InputMode.TOKEN) {
             if (direction === 'from') {
@@ -24517,9 +24536,10 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const balanceFormatted = React.useMemo(() => {
         return formatAmount(balance !== null && balance !== void 0 ? balance : '0');
     }, [balance]);
+    const inputRef = React.useRef(null);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: "tw-relative tw-h-[80.6px] tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-h-[75px] mobile-lg:tw-px-squid-m", onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsxRuntime.jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
                         : inputMode === InputMode.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip

package/dist/cjs/types/components/badges/BadgeImage.d.ts

@@ -4,7 +4,12 @@ interface BadgeImageProps {
     size?: BadgeSize;
     extraMarginForBadge?: boolean;
     rounded?: boolean;
+    /**
+     * The URL of the placeholder image. Will be displayed while the images are loading
+     * or if there's an error loading them.
+     */
+    placeholderImageUrl?: string;
 }
 type BadgeSize = 'sm' | 'md';
-export declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -3,6 +3,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
+    placeholderImageUrl?: string;
     subtitle?: string;
     subtitleOnHover?: React.ReactNode;
     detail?: string;
@@ -22,5 +23,5 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     compactOnMobile?: boolean;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/stories/badges/BadgeImage.stories.d.ts

@@ -9,3 +9,7 @@ export declare const ExtraMarginForBadge: Story;
 export declare const Rounded: Story;
 export declare const SizeMedium: Story;
 export declare const SizeSmall: Story;
+export declare const CustomPlaceholderForBrokenImage: Story;
+export declare const CustomPlaceholderForLoadingImage: Story;
+export declare const CustomPlaceholderForBrokenBadgeImage: Story;
+export declare const CustomPlaceholderForLoadingBadgeImage: Story;

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

@@ -4,4 +4,4 @@ declare const meta: Meta<typeof RangeInput>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Warning10: Story;
+export declare const Warning: Story;

package/dist/esm/index.js

@@ -2617,24 +2617,41 @@ const mainImageSizeClassMap = {
     md: 'tw-w-10 tw-h-10',
 };
 const loadingSkeletonClassName = 'tw-bg-grey-500';
-function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, }) {
+var ImageState;
+(function (ImageState) {
+    ImageState[ImageState["LOADING"] = 0] = "LOADING";
+    ImageState[ImageState["LOADED"] = 1] = "LOADED";
+    ImageState[ImageState["ERROR"] = 2] = "ERROR";
+})(ImageState || (ImageState = {}));
+function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, rounded = false, placeholderImageUrl, }) {
+    const imageUrl = (_imageUrl === null || _imageUrl === void 0 ? void 0 : _imageUrl.trim()) || placeholderImageUrl;
     const [imagesLoadState, setImageLoadState] = useState({
-        badgeLoaded: false,
-        mainImageLoaded: false,
+        badge: ImageState.LOADING,
+        mainImage: ImageState.LOADING,
     });
     const badgeImageClassName = cn('tw-absolute -tw-right-1/3 tw-bottom-0 tw-z-10 tw-m-0 -tw-translate-x-1/3 tw-rounded-md tw-border-[1px] tw-border-grey-800', badgeSizeClassMap[size]);
     const mainImageClassName = cn('tw-h-full tw-w-full tw-absolute', rounded ? ' tw-rounded-full' : 'tw-rounded-squid-xs');
-    return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [!imagesLoadState.mainImageLoaded && (jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) })), jsx("img", { src: imageUrl, alt: "", onLoad: () => {
+    return imageUrl ? (jsxs("div", { className: cn('tw-relative', extraMarginForBadge && badgeUrl ? 'tw-mr-1.5' : null, mainImageSizeClassMap[size]), children: [imagesLoadState.mainImage !== ImageState.LOADED &&
+                (placeholderImageUrl ? (jsx("img", { src: placeholderImageUrl, alt: "", className: mainImageClassName })) : (jsx("div", { className: cn(mainImageClassName, loadingSkeletonClassName) }))), jsx("img", { src: imageUrl, alt: "", onError: () => {
+                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.ERROR })));
+                }, onLoad: () => {
                     // update state when image is fully loaded
-                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImageLoaded: true })));
+                    setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { mainImage: ImageState.LOADED })));
                 }, className: cn(mainImageClassName, 
                 // hide main image while it is loading, and display it when it is loaded
-                imagesLoadState.mainImageLoaded ? 'tw-block' : 'tw-hidden') }), badgeUrl ? (jsxs(Fragment, { children: [!imagesLoadState.badgeLoaded && (jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) })), jsx("img", { src: badgeUrl, alt: "", onLoad: () => {
+                imagesLoadState.mainImage === ImageState.LOADED
+                    ? 'tw-block'
+                    : 'tw-hidden') }), badgeUrl ? (jsxs(Fragment, { children: [imagesLoadState.badge !== ImageState.LOADED &&
+                        (placeholderImageUrl ? (jsx("img", { src: placeholderImageUrl, alt: "", className: badgeImageClassName })) : (jsx("div", { className: cn(badgeImageClassName, loadingSkeletonClassName) }))), jsx("img", { src: badgeUrl, alt: "", onError: () => {
+                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.ERROR })));
+                        }, onLoad: () => {
                             // update state when badge image is fully loaded
-                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badgeLoaded: true })));
+                            setImageLoadState((prevState) => (Object.assign(Object.assign({}, prevState), { badge: ImageState.LOADED })));
                         }, className: cn(badgeImageClassName, 
                         // hide badge image while it is loading, and display it when it is loaded
-                        imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
+                        imagesLoadState.badge === ImageState.LOADED
+                            ? 'tw-block'
+                            : 'tw-hidden') })] })) : null] })) : null;
 }
 
 /******************************************************************************
@@ -17062,7 +17079,7 @@ const collapsedListItemClassMap = {
     large: 'tw-w-[80px]',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile"]);
     const subtitleClassName = cn('tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block');
     // 'small' variant does not have detail
     const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -17095,7 +17112,7 @@ function ListItem(_a) {
     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], compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : 'tw-w-full', 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', 
+            : 'tw-w-full', 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, placeholderImageUrl: placeholderImageUrl, 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]', compactOnMobile ? 'tw-hidden mobile-lg:tw-block' : 'tw-block'), children: itemTitle })) : (itemTitle), size === 'large' &&
                             ((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
@@ -24415,6 +24432,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         }
     };
     const handleSwitchInputMode = () => {
+        var _a;
         if (inputValue !== '') {
             const convertedAmount = inputMode === InputMode.TOKEN
                 ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
@@ -24422,6 +24440,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
             setInputValue(convertedAmount);
         }
         setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getRawAmounts = (amount) => {
         if (amount === '')
@@ -24469,7 +24488,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const { isTokenAmountVerySmall, isUsdAmountVerySmall } = getRawAmounts(inputValue);
     const amountFormatted = useMemo(() => {
         var _a;
-        if (inputValue === '')
+        if (isNaN(Number(inputValue)) || inputValue === '')
             return '0';
         if (inputMode === InputMode.TOKEN) {
             if (direction === 'from') {
@@ -24497,9 +24516,10 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const balanceFormatted = useMemo(() => {
         return formatAmount(balance !== null && balance !== void 0 ? balance : '0');
     }, [balance]);
+    const inputRef = useRef(null);
     return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: "tw-relative tw-h-[80.6px] tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] tw-text-heading-small tw-font-heading-regular mobile-lg:tw-h-[75px] mobile-lg:tw-px-squid-m", onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn('tw-w-full tw-px-squid-xs tw-pb-[15px] tw-pt-[5px] mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
                         : inputMode === InputMode.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip

package/dist/esm/types/components/badges/BadgeImage.d.ts

@@ -4,7 +4,12 @@ interface BadgeImageProps {
     size?: BadgeSize;
     extraMarginForBadge?: boolean;
     rounded?: boolean;
+    /**
+     * The URL of the placeholder image. Will be displayed while the images are loading
+     * or if there's an error loading them.
+     */
+    placeholderImageUrl?: string;
 }
 type BadgeSize = 'sm' | 'md';
-export declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -3,6 +3,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
+    placeholderImageUrl?: string;
     subtitle?: string;
     subtitleOnHover?: React.ReactNode;
     detail?: string;
@@ -22,5 +23,5 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     compactOnMobile?: boolean;
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/stories/badges/BadgeImage.stories.d.ts

@@ -9,3 +9,7 @@ export declare const ExtraMarginForBadge: Story;
 export declare const Rounded: Story;
 export declare const SizeMedium: Story;
 export declare const SizeSmall: Story;
+export declare const CustomPlaceholderForBrokenImage: Story;
+export declare const CustomPlaceholderForLoadingImage: Story;
+export declare const CustomPlaceholderForBrokenBadgeImage: Story;
+export declare const CustomPlaceholderForLoadingBadgeImage: Story;

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

@@ -4,4 +4,4 @@ declare const meta: Meta<typeof RangeInput>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const Warning10: Story;
+export declare const Warning: Story;

package/dist/index.d.ts

@@ -11,9 +11,14 @@ interface BadgeImageProps {
     size?: BadgeSize;
     extraMarginForBadge?: boolean;
     rounded?: boolean;
+    /**
+     * The URL of the placeholder image. Will be displayed while the images are loading
+     * or if there's an error loading them.
+     */
+    placeholderImageUrl?: string;
 }
 type BadgeSize = 'sm' | 'md';
-declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
+declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
 
 type TextSize = 'small' | 'medium' | 'large';
 type SwitchSize = 'small' | 'large';
@@ -1224,6 +1229,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
+    placeholderImageUrl?: string;
     subtitle?: string;
     subtitleOnHover?: React.ReactNode;
     detail?: string;
@@ -1243,7 +1249,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     compactOnMobile?: boolean;
 }
 type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
 
 interface MenuItemProps {
     label: string;

package/package.json

@@ -5,14 +5,14 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.21.1-beta.0",
+  "version": "0.22.0",
   "author": "",
   "license": "MIT",
   "resolutions": {
     "string-width": "4.2.3"
   },
   "scripts": {
-    "storybook": "concurrently 'yarn:watch:*'",
+    "dev": "concurrently 'yarn:watch:*'",
     "watch:storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "watch:build-tailwind": "yarn build-tailwind --watch",