@0xsquid/ui 2.4.2 → 2.4.3

package/dist/cjs/index.js

@@ -3501,7 +3501,7 @@ exports.ImageState = void 0;
     ImageState[ImageState["LOADED"] = 1] = "LOADED";
     ImageState[ImageState["ERROR"] = 2] = "ERROR";
 })(exports.ImageState || (exports.ImageState = {}));
-const sizeClassMap = {
+const sizeClassMap$1 = {
     small: "tw-w-squid-s",
     medium: "tw-w-squid-m",
     large: "tw-w-squid-l",
@@ -3544,7 +3544,7 @@ const borderClassMap = {
 };
 function Image$1(_a) {
     var { src, size = "medium", className: propsClassName, placeholderImageUrl, border = "none", rounded = "xxs", shadow = false, children, containerProps } = _a, props = __rest$1(_a, ["src", "size", "className", "placeholderImageUrl", "border", "rounded", "shadow", "children", "containerProps"]);
-    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap[size], propsClassName, roundedClassMap$1[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
+    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$1[size], propsClassName, roundedClassMap$1[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
     const [imageState, setImageState] = React$1.useState(exports.ImageState.LOADED);
     return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [border === "gradient" && (jsxRuntime.jsx("span", { style: {
                     borderRadius: gradientRoundedClassMap[rounded],
@@ -3635,12 +3635,24 @@ function IconLabel({ src, children, rounded }) {
     return (jsxRuntime.jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsxRuntime.jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { children: children })) : (children)] }));
 }
 
-function ImageGroup({ imageUrls, badge }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xxl tw-w-squid-xxl tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-rounded-squid-s tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: {
-                    width: "24px",
-                    height: "24px",
-                    borderRadius: "7.5px",
-                } }, url))), badge != null && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
+const sizeClassMap = {
+    large: "tw-h-squid-xxl tw-w-squid-xxl tw-rounded-squid-s",
+    small: "tw-h-squid-xl tw-w-squid-xl tw-rounded-squid-xs",
+};
+const customImageStylesMap = {
+    large: {
+        width: "24px",
+        height: "24px",
+        borderRadius: "7.5px",
+    },
+    small: {
+        width: "16px",
+        height: "16px",
+        borderRadius: "5px",
+    },
+};
+function ImageGroup({ imageUrls, badge, size = "large", }) {
+    return (jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap[size]), children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -19327,7 +19339,7 @@ const collapsedListItemClassMap = {
     large: "tw-w-[80px]",
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected = false, onDetailClick, showDetailOnHoverOnly, rounded = "xxs", detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected = false, onDetailClick, showDetailOnHoverOnly, rounded = "xxs", detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent, imageGroup } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent", "imageGroup"]);
     const { isDropdownOpen, dropdownRef, openDropdown, closeDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
         itemsContainerRef,
     });
@@ -19382,7 +19394,7 @@ function ListItem(_a) {
     };
     return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative 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 || isDropdownOpen) && "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 !== null && mainIcon !== void 0 ? mainIcon : (jsxRuntime.jsx(BadgeImage, { image: {
+            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative 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 || isDropdownOpen) && "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 !== null && mainIcon !== void 0 ? mainIcon : (imageGroup != null ? (jsxRuntime.jsx(ImageGroup, { size: "small", imageUrls: imageGroup })) : (jsxRuntime.jsx(BadgeImage, { image: {
                                 src: mainImageUrl,
                                 placeholderImageUrl,
                                 size: "xlarge",
@@ -19394,7 +19406,7 @@ function ListItem(_a) {
                                     size: "medium",
                                     border: "outline-lg",
                                 }
-                                : undefined })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (jsxRuntime.jsx(Image$1, { size: "large", src: mainImageUrl, placeholderImageUrl: placeholderImageUrl, rounded: rounded })) })), 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", 
+                                : undefined }))) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (jsxRuntime.jsx(Image$1, { size: "large", src: mainImageUrl, placeholderImageUrl: placeholderImageUrl, rounded: rounded })) })), 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

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

@@ -1,7 +1,9 @@
 import { type ImageProps } from "./Image";
+type ImageGroupSize = "small" | "large";
 interface ImageGroupProps {
     imageUrls: string[];
     badge?: Omit<ImageProps, "border" | "size">;
+    size?: ImageGroupSize;
 }
-export declare function ImageGroup({ imageUrls, badge }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageGroup({ imageUrls, badge, size, }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -25,9 +25,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     extraPadding?: boolean;
     dropdownMenuContent?: React.ReactNode;
     itemsContainerRef?: React.RefObject<HTMLElement>;
+    imageGroup?: string[];
 }
 type ListItemSize = "small" | "large";
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuContent, ...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, extraPadding, itemsContainerRef, dropdownMenuContent, imageGroup, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListItemActionsButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     isActive?: boolean | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -3,6 +3,7 @@ import { ImageGroup } from "../../components/badges/ImageGroup";
 declare const meta: Meta<typeof ImageGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Large: Story;
+export declare const Small: Story;
 export declare const Badge: Story;
 export declare const CustomBadgeContent: Story;

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
+export declare const LargeWithImageGroup: Story;
 export declare const LargeInteractive: Story;
 export declare const LargeWithLongTitle: Story;
 export declare const LargeWithLongTitleAndSubtitle: Story;

package/dist/esm/index.js

@@ -3481,7 +3481,7 @@ var ImageState;
     ImageState[ImageState["LOADED"] = 1] = "LOADED";
     ImageState[ImageState["ERROR"] = 2] = "ERROR";
 })(ImageState || (ImageState = {}));
-const sizeClassMap = {
+const sizeClassMap$1 = {
     small: "tw-w-squid-s",
     medium: "tw-w-squid-m",
     large: "tw-w-squid-l",
@@ -3524,7 +3524,7 @@ const borderClassMap = {
 };
 function Image$1(_a) {
     var { src, size = "medium", className: propsClassName, placeholderImageUrl, border = "none", rounded = "xxs", shadow = false, children, containerProps } = _a, props = __rest$1(_a, ["src", "size", "className", "placeholderImageUrl", "border", "rounded", "shadow", "children", "containerProps"]);
-    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap[size], propsClassName, roundedClassMap$1[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
+    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$1[size], propsClassName, roundedClassMap$1[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
     const [imageState, setImageState] = useState(ImageState.LOADED);
     return (jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [border === "gradient" && (jsx("span", { style: {
                     borderRadius: gradientRoundedClassMap[rounded],
@@ -3615,12 +3615,24 @@ function IconLabel({ src, children, rounded }) {
     return (jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsx(CaptionText, { children: children })) : (children)] }));
 }
 
-function ImageGroup({ imageUrls, badge }) {
-    return (jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xxl tw-w-squid-xxl tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-rounded-squid-s tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", children: [imageUrls.map((url) => (jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: {
-                    width: "24px",
-                    height: "24px",
-                    borderRadius: "7.5px",
-                } }, url))), badge != null && (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
+const sizeClassMap = {
+    large: "tw-h-squid-xxl tw-w-squid-xxl tw-rounded-squid-s",
+    small: "tw-h-squid-xl tw-w-squid-xl tw-rounded-squid-xs",
+};
+const customImageStylesMap = {
+    large: {
+        width: "24px",
+        height: "24px",
+        borderRadius: "7.5px",
+    },
+    small: {
+        width: "16px",
+        height: "16px",
+        borderRadius: "5px",
+    },
+};
+function ImageGroup({ imageUrls, badge, size = "large", }) {
+    return (jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap[size]), children: [imageUrls.map((url) => (jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -19307,7 +19319,7 @@ const collapsedListItemClassMap = {
     large: "tw-w-[80px]",
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected = false, onDetailClick, showDetailOnHoverOnly, rounded = "xxs", detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected = false, onDetailClick, showDetailOnHoverOnly, rounded = "xxs", detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent, imageGroup } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent", "imageGroup"]);
     const { isDropdownOpen, dropdownRef, openDropdown, closeDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
         itemsContainerRef,
     });
@@ -19362,7 +19374,7 @@ function ListItem(_a) {
     };
     return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative 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 || isDropdownOpen) && "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 !== null && mainIcon !== void 0 ? mainIcon : (jsx(BadgeImage, { image: {
+            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative 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 || isDropdownOpen) && "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 !== null && mainIcon !== void 0 ? mainIcon : (imageGroup != null ? (jsx(ImageGroup, { size: "small", imageUrls: imageGroup })) : (jsx(BadgeImage, { image: {
                                 src: mainImageUrl,
                                 placeholderImageUrl,
                                 size: "xlarge",
@@ -19374,7 +19386,7 @@ function ListItem(_a) {
                                     size: "medium",
                                     border: "outline-lg",
                                 }
-                                : undefined })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (jsx(Image$1, { size: "large", src: mainImageUrl, placeholderImageUrl: placeholderImageUrl, rounded: rounded })) })), 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", 
+                                : undefined }))) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (jsx(Image$1, { size: "large", src: mainImageUrl, placeholderImageUrl: placeholderImageUrl, rounded: rounded })) })), 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

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

@@ -1,7 +1,9 @@
 import { type ImageProps } from "./Image";
+type ImageGroupSize = "small" | "large";
 interface ImageGroupProps {
     imageUrls: string[];
     badge?: Omit<ImageProps, "border" | "size">;
+    size?: ImageGroupSize;
 }
-export declare function ImageGroup({ imageUrls, badge }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageGroup({ imageUrls, badge, size, }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -25,9 +25,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     extraPadding?: boolean;
     dropdownMenuContent?: React.ReactNode;
     itemsContainerRef?: React.RefObject<HTMLElement>;
+    imageGroup?: string[];
 }
 type ListItemSize = "small" | "large";
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuContent, ...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, extraPadding, itemsContainerRef, dropdownMenuContent, imageGroup, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListItemActionsButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     isActive?: boolean | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -3,6 +3,7 @@ import { ImageGroup } from "../../components/badges/ImageGroup";
 declare const meta: Meta<typeof ImageGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Large: Story;
+export declare const Small: Story;
 export declare const Badge: Story;
 export declare const CustomBadgeContent: Story;

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
+export declare const LargeWithImageGroup: Story;
 export declare const LargeInteractive: Story;
 export declare const LargeWithLongTitle: Story;
 export declare const LargeWithLongTitleAndSubtitle: Story;

package/dist/index.d.ts

@@ -84,11 +84,13 @@ interface IconLabelProps {
 }
 declare function IconLabel({ src, children, rounded }: IconLabelProps): react_jsx_runtime.JSX.Element;
 
+type ImageGroupSize = "small" | "large";
 interface ImageGroupProps {
     imageUrls: string[];
     badge?: Omit<ImageProps, "border" | "size">;
+    size?: ImageGroupSize;
 }
-declare function ImageGroup({ imageUrls, badge }: ImageGroupProps): react_jsx_runtime.JSX.Element;
+declare function ImageGroup({ imageUrls, badge, size, }: ImageGroupProps): react_jsx_runtime.JSX.Element;
 
 declare const LoadingProvider: react.Provider<boolean | null>;
 interface LoadingSkeletonProps {
@@ -2136,9 +2138,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     extraPadding?: boolean;
     dropdownMenuContent?: React.ReactNode;
     itemsContainerRef?: React.RefObject<HTMLElement>;
+    imageGroup?: string[];
 }
 type ListItemSize = "small" | "large";
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuContent, ...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, extraPadding, itemsContainerRef, dropdownMenuContent, imageGroup, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
 declare const ListItemActionsButton: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
     isActive?: boolean | undefined;
 }, "ref"> & react.RefAttributes<HTMLButtonElement>>;

package/package.json

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