@0xsquid/ui 0.7.1 → 0.7.3

package/dist/cjs/index.js

@@ -3043,17 +3043,26 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
                     ] })) : null] }) }));
 }
 
+function LoadingSkeleton({ className, height = '20', }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsxRuntime.jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsxRuntime.jsx("g", { mask: "url(#mask0_1083_18992)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsxRuntime.jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsxRuntime.jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1083_18992", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
+}
+
 const listItemSizeMap = {
     small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs',
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly"]);
-    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && '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: false })) })) : (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-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
+    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && '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-xs', 
                     // 'large' variant has extra padding
-                    size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxRuntime.jsxs("button", { onClick: onDetailClick, className: cn('tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' &&
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null)] }), jsxRuntime.jsxs("button", { onClick: (event) => {
+                        // prevent click event from bubbling up to parent
+                        event.stopPropagation();
+                        onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
+                    }, className: cn('tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-hidden group-hover/list-item:tw-flex'
-                        : 'tw-flex'), children: [size === 'large' && detail ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })] }) })));
+                        : 'tw-flex', detailButtonClassName), children: [size === 'large' && detail ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })] }) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3075,9 +3084,6 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
     return (jsxRuntime.jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsxRuntime.jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), isLoading ? (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-text-grey-500" })) : typeof detail === 'string' ? (jsxRuntime.jsx(CaptionText, { children: detail })) : (detail)] }) }));
 }
-function LoadingSkeleton({ className }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: "20", viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsxRuntime.jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsxRuntime.jsx("g", { mask: "url(#mask0_1083_18992)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsxRuntime.jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsxRuntime.jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1083_18992", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
-}
 
 function SwapStepSeparator() {
     return (jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsxRuntime.jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));

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

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

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

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

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

@@ -4,6 +4,8 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
+export declare const LargeWithLongTitle: Story;
+export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;
@@ -12,7 +14,9 @@ export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
+export declare const LargeLoading: Story;
 export declare const Small: Story;
+export declare const SmallWithLongTitle: Story;
 export declare const SmallWithIcon: Story;
 export declare const SmallShowDetailOnHoverOnly: Story;
 export declare const SmallSelected: Story;

package/dist/esm/index.js

@@ -3041,17 +3041,26 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
                     ] })) : null] }) }));
 }
 
+function LoadingSkeleton({ className, height = '20', }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsx("g", { mask: "url(#mask0_1083_18992)", children: jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsx("clipPath", { id: "clip0_1083_18992", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
+}
+
 const listItemSizeMap = {
     small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs',
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly"]);
-    return (jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("div", { className: cn('tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && '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: false })) })) : (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-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
+    return (jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("div", { className: cn('tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && '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-xs', 
                     // 'large' variant has extra padding
-                    size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxs("button", { onClick: onDetailClick, className: cn('tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' &&
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null)] }), jsxs("button", { onClick: (event) => {
+                        // prevent click event from bubbling up to parent
+                        event.stopPropagation();
+                        onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
+                    }, className: cn('tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-hidden group-hover/list-item:tw-flex'
-                        : 'tw-flex'), children: [size === 'large' && detail ? (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })] }) })));
+                        : 'tw-flex', detailButtonClassName), children: [size === 'large' && detail ? (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })] }) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3073,9 +3082,6 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
     return (jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), isLoading ? (jsx(LoadingSkeleton, { className: "tw-text-grey-500" })) : typeof detail === 'string' ? (jsx(CaptionText, { children: detail })) : (detail)] }) }));
 }
-function LoadingSkeleton({ className }) {
-    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: "20", viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsx("g", { mask: "url(#mask0_1083_18992)", children: jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsx("clipPath", { id: "clip0_1083_18992", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
-}
 
 function SwapStepSeparator() {
     return (jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));

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

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

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

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

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

@@ -4,6 +4,8 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
+export declare const LargeWithLongTitle: Story;
+export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;
@@ -12,7 +14,9 @@ export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
+export declare const LargeLoading: Story;
 export declare const Small: Story;
+export declare const SmallWithLongTitle: Story;
 export declare const SmallWithIcon: Story;
 export declare const SmallShowDetailOnHoverOnly: Story;
 export declare const SmallSelected: Story;

package/dist/index.css

@@ -1139,10 +1139,18 @@ video {
   width: 54px;
 }
 
+.tw-w-\[56\%\] {
+  width: 56%;
+}
+
 .tw-w-\[60px\] {
   width: 60px;
 }
 
+.tw-w-\[67\%\] {
+  width: 67%;
+}
+
 .tw-w-\[72px\] {
   width: 72px;
 }
@@ -1245,6 +1253,10 @@ video {
   max-width: 72px;
 }
 
+.tw-max-w-full {
+  max-width: 100%;
+}
+
 .tw-max-w-list-item-large {
   max-width: 23.75rem;
 }
@@ -1279,6 +1291,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-tw-translate-x-6 {
+  --tw-translate-x: -1.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-tw-translate-x-\[2px\] {
   --tw-translate-x: -2px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/index.d.ts

@@ -195,9 +195,14 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     className?: string;
     onDetailClick?: () => void;
     showDetailOnHoverOnly?: boolean;
+    rounded?: boolean;
+    detailButtonClassName?: string;
+    loading?: {
+        subtitle?: boolean;
+    };
 }
 type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
 
 interface MenuItemProps {
     label: string;

package/package.json

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