@0xsquid/ui 0.20.0 → 0.20.1-beta.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;
 }
 
 /******************************************************************************
@@ -17068,7 +17085,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);
@@ -17101,7 +17118,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
@@ -60273,6 +60290,7 @@ exports.InteractionTransactionView = InteractionTransactionView;
 exports.Join = Join;
 exports.List = List;
 exports.ListItem = ListItem;
+exports.Loader = Loader;
 exports.LoadingProvider = LoadingProvider;
 exports.LoadingSkeleton = LoadingSkeleton;
 exports.MEDIA_QUERIES = MEDIA_QUERIES;

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/icons/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/dist/cjs/types/components/index.d.ts

@@ -5,3 +5,4 @@ export * from './layout';
 export * from './lists';
 export * from './typography';
 export * from './views';
+export * from './icons';

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/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;
 }
 
 /******************************************************************************
@@ -17048,7 +17065,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);
@@ -17081,7 +17098,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
@@ -60197,4 +60214,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", children: children }));
 }
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, TextSkeleton, Timestamp, Toast, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, AssetsView, BadgeImage, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, FeesAction, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, SettingsItem, SettingsSlider, SizeTransition, SquidConfigProvider, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepsCollapsed, SwapTransactionView, Switch, TextSkeleton, Timestamp, Toast, TokenPair, Tooltip, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap$1 as statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };

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/icons/index.d.ts

@@ -0,0 +1 @@
+export { Loader } from './Loader';

package/dist/esm/types/components/index.d.ts

@@ -5,3 +5,4 @@ export * from './layout';
 export * from './lists';
 export * from './typography';
 export * from './views';
+export * from './icons';

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/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';
@@ -905,6 +910,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
+    placeholderImageUrl?: string;
     subtitle?: string;
     subtitleOnHover?: React.ReactNode;
     detail?: string;
@@ -924,7 +930,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;
@@ -1949,6 +1955,13 @@ declare function TransactionViewLayout({ isLoading, header, properties, actions,
 
 declare function WalletsView(): react_jsx_runtime.JSX.Element;
 
+interface LoaderProps extends ComponentProps<'svg'> {
+    size?: string;
+    strokeWidth?: string;
+    rotateDuration?: string;
+}
+declare function Loader({ size, strokeWidth, className, rotateDuration, ...props }: LoaderProps): react_jsx_runtime.JSX.Element;
+
 type SquidTheme = {
     'content-100': string;
     'content-200': string;
@@ -2015,4 +2028,4 @@ declare const MEDIA_QUERIES: Record<MediaQuery, {
     value: string;
 }>;
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, type AssetsButtonVariant, AssetsView, BadgeImage, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, type HistoryItemStatus, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SquidConfigProvider, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, type SwapHeaderProps, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapTransactionView, Switch, TextSkeleton, type ThemeType, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, type AssetsButtonVariant, AssetsView, BadgeImage, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, type HistoryItemStatus, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SquidConfigProvider, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, type SwapHeaderProps, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapTransactionView, Switch, TextSkeleton, type ThemeType, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };

package/package.json

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