@0xsquid/ui 0.11.0 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/index.js +23 -12
  2. package/dist/cjs/types/components/lists/ListItem.d.ts +2 -1
  3. package/dist/cjs/types/components/lists/SectionTitle.d.ts +2 -2
  4. package/dist/esm/index.js +23 -12
  5. package/dist/esm/types/components/lists/ListItem.d.ts +2 -1
  6. package/dist/esm/types/components/lists/SectionTitle.d.ts +2 -2
  7. package/dist/index.css +16 -14
  8. package/dist/index.d.ts +4 -3
  9. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -2963,10 +2963,20 @@ const switchSizeClassMap = {
2963
2963
  small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
2964
2964
  large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
2965
2965
  };
2966
- const switchCircleSizeClassMap = {
2966
+ const switchKnobSizeClassMap = {
2967
2967
  small: 'tw-w-4 tw-h-4',
2968
2968
  large: 'tw-w-6 tw-h-6',
2969
2969
  };
2970
+ const switchKnobCheckedClassMap = {
2971
+ large: {
2972
+ checked: 'tw-left-[26px]',
2973
+ unchecked: 'tw-left-[2px]',
2974
+ },
2975
+ small: {
2976
+ checked: 'tw-left-[17px]',
2977
+ unchecked: 'tw-left-[1px]',
2978
+ },
2979
+ };
2970
2980
  function Switch({ checked = false, onChange, size, disabled = false, }) {
2971
2981
  return (
2972
2982
  // Switch container
@@ -2980,11 +2990,11 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
2980
2990
  filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
2981
2991
  }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all',
2982
2992
  // size styles
2983
- switchCircleSizeClassMap[size],
2984
- // disabled and checked styles
2985
- checked
2986
- ? 'tw-translate-x-0 group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
2987
- : '-tw-translate-x-full tw-bg-grey-500') })] }));
2993
+ switchKnobSizeClassMap[size],
2994
+ // checked styles
2995
+ switchKnobCheckedClassMap[size][checked ? 'checked' : 'unchecked'], checked
2996
+ ? 'group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
2997
+ : 'tw-bg-grey-500') })] }));
2988
2998
  }
2989
2999
 
2990
3000
  const borderRadiusClassMap = {
@@ -3271,7 +3281,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
3271
3281
  setDropdownPosition('top');
3272
3282
  }
3273
3283
  }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
3274
- return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsxRuntime.jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
3284
+ return (jsxRuntime.jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsxRuntime.jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsxRuntime.jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsxRuntime.jsx("div", { className: cn(!!dropdownMenuItems &&
3275
3285
  'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: statusInfo.label && (jsxRuntime.jsx(CaptionText, { className: statusInfo.className, children: statusInfo.label })) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef,
3276
3286
  // only show dropdown menu if there is a position defined for it
3277
3287
  isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
@@ -3282,10 +3292,10 @@ const listItemSizeMap = {
3282
3292
  large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
3283
3293
  };
3284
3294
  function ListItem(_a) {
3285
- 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"]);
3295
+ var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
3286
3296
  // 'small' variant does not have detail
3287
3297
  const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
3288
- return (jsxRuntime.jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item 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',
3298
+ 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], className), children: jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item 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',
3289
3299
  // 'large' variant has extra padding
3290
3300
  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-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
3291
3301
  ((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-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxRuntime.jsxs("button", { onClick: (event) => {
@@ -3294,15 +3304,16 @@ function ListItem(_a) {
3294
3304
  onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
3295
3305
  }, className: cn('tw-flex tw-w-fit 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
3296
3306
  ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
3297
- : 'tw-flex', detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) }));
3307
+ : 'tw-flex', detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) })));
3298
3308
  }
3299
3309
 
3300
3310
  function MenuItem({ label, imageUrl, icon }) {
3301
3311
  return (jsxRuntime.jsxs("li", { className: "tw-mx-squid-xxs tw-inline-flex tw-max-h-list-item-small tw-items-center tw-justify-start tw-gap-squid-xxs tw-rounded-squid-xs tw-bg-grey-900 tw-py-squid-xxs tw-pl-squid-xxs tw-pr-squid-xl tw-text-grey-300", children: [jsxRuntime.jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsxRuntime.jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsxRuntime.jsx(CaptionText, { children: label })] }));
3302
3312
  }
3303
3313
 
3304
- function SectionTitle({ title, icon, accessory, actionIcon, className, }) {
3305
- return (jsxRuntime.jsxs("header", { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsxRuntime.jsx(CaptionText, { children: title }), accessory ? (jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] }));
3314
+ function SectionTitle(_a) {
3315
+ var { title, icon, accessory, actionIcon, className } = _a, props = __rest(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
3316
+ return (jsxRuntime.jsxs("header", Object.assign({}, props, { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsxRuntime.jsx(CaptionText, { children: title }), accessory ? (jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
3306
3317
  }
3307
3318
 
3308
3319
  function HelpIcon({ size = '20', className, }) {
package/dist/cjs/types/components/lists/ListItem.d.ts CHANGED
@@ -17,7 +17,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
17
17
  loading?: {
18
18
  subtitle?: boolean;
19
19
  };
20
+ containerProps?: React.HTMLAttributes<HTMLLIElement>;
20
21
  }
21
22
  type ListItemSize = 'small' | 'large';
22
- 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;
23
+ export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
23
24
  export {};
package/dist/cjs/types/components/lists/SectionTitle.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  /// <reference types="react" />
2
- interface SectionTitleProps {
2
+ interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  title: string;
4
4
  icon?: React.ReactNode;
5
5
  accessory?: string | null;
6
6
  actionIcon?: React.ReactNode;
7
7
  className?: string;
8
8
  }
9
- export declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
10
10
  export {};
package/dist/esm/index.js CHANGED
@@ -2961,10 +2961,20 @@ const switchSizeClassMap = {
2961
2961
  small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
2962
2962
  large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
2963
2963
  };
2964
- const switchCircleSizeClassMap = {
2964
+ const switchKnobSizeClassMap = {
2965
2965
  small: 'tw-w-4 tw-h-4',
2966
2966
  large: 'tw-w-6 tw-h-6',
2967
2967
  };
2968
+ const switchKnobCheckedClassMap = {
2969
+ large: {
2970
+ checked: 'tw-left-[26px]',
2971
+ unchecked: 'tw-left-[2px]',
2972
+ },
2973
+ small: {
2974
+ checked: 'tw-left-[17px]',
2975
+ unchecked: 'tw-left-[1px]',
2976
+ },
2977
+ };
2968
2978
  function Switch({ checked = false, onChange, size, disabled = false, }) {
2969
2979
  return (
2970
2980
  // Switch container
@@ -2978,11 +2988,11 @@ function Switch({ checked = false, onChange, size, disabled = false, }) {
2978
2988
  filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
2979
2989
  }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all',
2980
2990
  // size styles
2981
- switchCircleSizeClassMap[size],
2982
- // disabled and checked styles
2983
- checked
2984
- ? 'tw-translate-x-0 group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
2985
- : '-tw-translate-x-full tw-bg-grey-500') })] }));
2991
+ switchKnobSizeClassMap[size],
2992
+ // checked styles
2993
+ switchKnobCheckedClassMap[size][checked ? 'checked' : 'unchecked'], checked
2994
+ ? 'group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900'
2995
+ : 'tw-bg-grey-500') })] }));
2986
2996
  }
2987
2997
 
2988
2998
  const borderRadiusClassMap = {
@@ -3269,7 +3279,7 @@ function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount,
3269
3279
  setDropdownPosition('top');
3270
3280
  }
3271
3281
  }, [isDropdownOpen, menuRef, dropdownPosition, itemRef]);
3272
- return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn(!!dropdownMenuItems &&
3282
+ return (jsx("li", { ref: itemRef, className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [!!statusBadge[status].badge && (jsx("span", { className: cn('tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-10 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-full tw-border tw-border-grey-900 tw-p-0.5', statusBadge[status].containerClassName), children: statusBadge[status].badge })), jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), !!dropdownMenuItems && (jsx("button", { className: "tw-peer tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity focus:tw-opacity-100 group-hover/history-item:tw-opacity-100", onClick: openDropdown, ref: openDropdownButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })), jsx("div", { className: cn(!!dropdownMenuItems &&
3273
3283
  'tw-transition-opacity group-hover/history-item:tw-hidden group-hover/history-item:tw-opacity-0 peer-focus:tw-hidden peer-focus:tw-opacity-0'), children: statusInfo.label && (jsx(CaptionText, { className: statusInfo.className, children: statusInfo.label })) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isDropdownOpen && !!dropdownMenuItems ? (jsx(DropdownMenu, { menuRef: menuRef,
3274
3284
  // only show dropdown menu if there is a position defined for it
3275
3285
  isHidden: !dropdownPosition, className: cn(!!dropdownPosition && dropdownPositionClassMap[dropdownPosition]), dropdownRef: dropdownRef, items: dropdownMenuItems })) : null] }) }));
@@ -3280,10 +3290,10 @@ const listItemSizeMap = {
3280
3290
  large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
3281
3291
  };
3282
3292
  function ListItem(_a) {
3283
- 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"]);
3293
+ var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps"]);
3284
3294
  // 'small' variant does not have detail
3285
3295
  const showDetail = size === 'large' && (!!detail || !!icon || showDetailOnHoverOnly);
3286
- return (jsx("li", { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item 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',
3296
+ return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("button", Object.assign({}, props, { className: cn('tw-group/list-item 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',
3287
3297
  // 'large' variant has extra padding
3288
3298
  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-[17px]", children: itemTitle })) : (itemTitle), size === 'large' &&
3289
3299
  ((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-max-w-full tw-truncate !tw-leading-[11px] tw-text-grey-500", children: subtitle })) : null)] }), showDetail && (jsxs("button", { onClick: (event) => {
@@ -3292,15 +3302,16 @@ function ListItem(_a) {
3292
3302
  onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
3293
3303
  }, className: cn('tw-flex tw-w-fit 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
3294
3304
  ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
3295
- : 'tw-flex', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) }));
3305
+ : 'tw-flex', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))] })) })));
3296
3306
  }
3297
3307
 
3298
3308
  function MenuItem({ label, imageUrl, icon }) {
3299
3309
  return (jsxs("li", { className: "tw-mx-squid-xxs tw-inline-flex tw-max-h-list-item-small tw-items-center tw-justify-start tw-gap-squid-xxs tw-rounded-squid-xs tw-bg-grey-900 tw-py-squid-xxs tw-pl-squid-xxs tw-pr-squid-xl tw-text-grey-300", children: [jsx("div", { className: "tw-h-squid-m tw-w-squid-m", children: imageUrl ? (jsx("img", { className: "tw-h-full tw-w-full tw-rounded-squid-xxs", src: imageUrl, alt: "" })) : icon ? (icon) : null }), jsx(CaptionText, { children: label })] }));
3300
3310
  }
3301
3311
 
3302
- function SectionTitle({ title, icon, accessory, actionIcon, className, }) {
3303
- return (jsxs("header", { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] }));
3312
+ function SectionTitle(_a) {
3313
+ var { title, icon, accessory, actionIcon, className } = _a, props = __rest(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
3314
+ return (jsxs("header", Object.assign({}, props, { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
3304
3315
  }
3305
3316
 
3306
3317
  function HelpIcon({ size = '20', className, }) {
package/dist/esm/types/components/lists/ListItem.d.ts CHANGED
@@ -17,7 +17,8 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
17
17
  loading?: {
18
18
  subtitle?: boolean;
19
19
  };
20
+ containerProps?: React.HTMLAttributes<HTMLLIElement>;
20
21
  }
21
22
  type ListItemSize = 'small' | 'large';
22
- 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;
23
+ export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
23
24
  export {};
package/dist/esm/types/components/lists/SectionTitle.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  /// <reference types="react" />
2
- interface SectionTitleProps {
2
+ interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  title: string;
4
4
  icon?: React.ReactNode;
5
5
  accessory?: string | null;
6
6
  actionIcon?: React.ReactNode;
7
7
  className?: string;
8
8
  }
9
- export declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
10
10
  export {};
package/dist/index.css CHANGED
@@ -681,6 +681,22 @@ video {
681
681
  left: 15px;
682
682
  }
683
683
 
684
+ .tw-left-\[17px\] {
685
+ left: 17px;
686
+ }
687
+
688
+ .tw-left-\[1px\] {
689
+ left: 1px;
690
+ }
691
+
692
+ .tw-left-\[26px\] {
693
+ left: 26px;
694
+ }
695
+
696
+ .tw-left-\[2px\] {
697
+ left: 2px;
698
+ }
699
+
684
700
  .tw-left-\[54px\] {
685
701
  left: 54px;
686
702
  }
@@ -757,10 +773,6 @@ video {
757
773
  z-index: 20;
758
774
  }
759
775
 
760
- .tw-z-30 {
761
- z-index: 30;
762
- }
763
-
764
776
  .tw-z-40 {
765
777
  z-index: 40;
766
778
  }
@@ -1349,16 +1361,6 @@ video {
1349
1361
  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));
1350
1362
  }
1351
1363
 
1352
- .-tw-translate-x-full {
1353
- --tw-translate-x: -100%;
1354
- 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));
1355
- }
1356
-
1357
- .tw-translate-x-0 {
1358
- --tw-translate-x: 0px;
1359
- 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));
1360
- }
1361
-
1362
1364
  .tw-translate-x-1\/4 {
1363
1365
  --tw-translate-x: 25%;
1364
1366
  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 CHANGED
@@ -233,9 +233,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
233
233
  loading?: {
234
234
  subtitle?: boolean;
235
235
  };
236
+ containerProps?: React.HTMLAttributes<HTMLLIElement>;
236
237
  }
237
238
  type ListItemSize = 'small' | 'large';
238
- 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;
239
+ declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
239
240
 
240
241
  interface MenuItemProps {
241
242
  label: string;
@@ -244,14 +245,14 @@ interface MenuItemProps {
244
245
  }
245
246
  declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
246
247
 
247
- interface SectionTitleProps {
248
+ interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
248
249
  title: string;
249
250
  icon?: React.ReactNode;
250
251
  accessory?: string | null;
251
252
  actionIcon?: React.ReactNode;
252
253
  className?: string;
253
254
  }
254
- declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
255
+ declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): react_jsx_runtime.JSX.Element;
255
256
 
256
257
  type SettingsControl = {
257
258
  type: 'percentage';
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "0.11.0",
8
+ "version": "0.11.1",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "scripts": {