@0xsquid/ui 0.7.1 → 0.7.2

package/dist/cjs/index.js

@@ -3048,12 +3048,16 @@ const listItemSizeMap = {
     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 } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName"]);
+    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: 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-w-full 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-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: (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 }) {

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

@@ -12,7 +12,9 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     className?: string;
     onDetailClick?: () => void;
     showDetailOnHoverOnly?: boolean;
+    rounded?: boolean;
+    detailButtonClassName?: string;
 }
 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, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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 LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;

package/dist/esm/index.js

@@ -3046,12 +3046,16 @@ const listItemSizeMap = {
     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 } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName"]);
+    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: 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-w-full 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-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: (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 }) {

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

@@ -12,7 +12,9 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     className?: string;
     onDetailClick?: () => void;
     showDetailOnHoverOnly?: boolean;
+    rounded?: boolean;
+    detailButtonClassName?: string;
 }
 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, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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 LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;

package/dist/index.d.ts

@@ -195,9 +195,11 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     className?: string;
     onDetailClick?: () => void;
     showDetailOnHoverOnly?: boolean;
+    rounded?: boolean;
+    detailButtonClassName?: string;
 }
 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, ...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.2",
   "author": "",
   "license": "MIT",
   "scripts": {