@0xsquid/ui 0.10.1 → 0.10.2

package/dist/cjs/index.js

@@ -2757,12 +2757,12 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
     }, [chainBgColor, tokenBgColor]);
     return (jsxRuntime.jsxs("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
-                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
-                    backgroundColor: tokenBgColor,
-                }, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px] tw-rounded-full" }) })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
+                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                            backgroundColor: tokenBgColor,
+                        } }), jsxRuntime.jsx("img", { src: tokenImageUrl, alt: tokenSymbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: tokenTextColor,
-                }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
+                }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !tokenImageUrl && 'tw-w-[135px]'), children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
 const CSS_VARS = {
@@ -3034,9 +3034,10 @@ function generateMarkerLines(count) {
     return allShadows.join(', ');
 }
 
+const baseButtonClassName = 'tw-flex tw-items-center tw-gap-squid-xxs tw-justify-center tw-border';
 const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
-    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-min-w-[60px] tw-h-squid-xl',
+    lg: 'tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
 };
 const buttonVariantClassMap = {
     primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
@@ -3045,7 +3046,7 @@ const buttonVariantClassMap = {
 };
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
-const buttonDisabledClass = 'tw-bg-grey-800 tw-text-grey-600 tw-cursor-not-allowed';
+const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
 function Button(_a) {
     var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
     const children = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
@@ -3055,7 +3056,7 @@ function Button(_a) {
         icon) : (
         // icon and label
         jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null }));
-    const className = cn(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 
     // disabled styles
     disabled && buttonDisabledClass, 
     // custom classes from props

package/dist/esm/index.js

@@ -2755,12 +2755,12 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
     }, [chainBgColor, tokenBgColor]);
     return (jsxs("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
-                }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
-                    backgroundColor: tokenBgColor,
-                }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px] tw-rounded-full" }) })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
+                }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                            backgroundColor: tokenBgColor,
+                        } }), jsx("img", { src: tokenImageUrl, alt: tokenSymbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: tokenTextColor,
-                }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
+                }, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', !tokenImageUrl && 'tw-w-[135px]'), children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-opacity-66" })] })] }));
 }
 
 const CSS_VARS = {
@@ -3032,9 +3032,10 @@ function generateMarkerLines(count) {
     return allShadows.join(', ');
 }
 
+const baseButtonClassName = 'tw-flex tw-items-center tw-gap-squid-xxs tw-justify-center tw-border';
 const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
-    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-min-w-[60px] tw-h-squid-xl',
+    lg: 'tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
 };
 const buttonVariantClassMap = {
     primary: 'tw-bg-royal-500 group-data-[squid-theme-type=light]:tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100 tw-border-material-light-thin',
@@ -3043,7 +3044,7 @@ const buttonVariantClassMap = {
 };
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
-const buttonDisabledClass = 'tw-bg-grey-800 tw-text-grey-600 tw-cursor-not-allowed';
+const buttonDisabledClass = '!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed';
 function Button(_a) {
     var { label, disabled, size, variant, icon, link } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon", "link"]);
     const children = (jsx(Fragment, { children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
@@ -3053,7 +3054,7 @@ function Button(_a) {
         icon) : (
         // icon and label
         jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null }));
-    const className = cn(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
+    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonVariantClassMap[variant], 
     // disabled styles
     disabled && buttonDisabledClass, 
     // custom classes from props

package/dist/index.css

@@ -1096,6 +1096,10 @@ video {
   width: 1.5px;
 }
 
+.tw-w-\[135px\] {
+  width: 135px;
+}
+
 .tw-w-\[140px\] {
   width: 140px;
 }
@@ -1112,6 +1116,10 @@ video {
   width: 190px;
 }
 
+.tw-w-\[22px\] {
+  width: 22px;
+}
+
 .tw-w-\[299px\] {
   width: 299px;
 }
@@ -1325,11 +1333,6 @@ 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-\[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));
-}
-
 .-tw-translate-x-full {
   --tw-translate-x: -100%;
   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));
@@ -1698,10 +1701,6 @@ video {
   border-radius: 0.75rem;
 }
 
-.tw-rounded-bl-full {
-  border-bottom-left-radius: 9999px;
-}
-
 .tw-rounded-bl-squid-l {
   border-bottom-left-radius: 1.875rem;
 }
@@ -1718,10 +1717,6 @@ video {
   border-top-left-radius: 25px;
 }
 
-.tw-rounded-tl-full {
-  border-top-left-radius: 9999px;
-}
-
 .tw-rounded-tl-squid-l {
   border-top-left-radius: 1.875rem;
 }
@@ -1815,6 +1810,10 @@ video {
   background-color: var(--squid-theme-grey-600) !important;
 }
 
+.\!tw-bg-grey-800 {
+  background-color: var(--squid-theme-grey-800) !important;
+}
+
 .\!tw-bg-royal-400 {
   background-color: var(--squid-theme-royal-400) !important;
 }
@@ -2374,6 +2373,10 @@ video {
   letter-spacing: -1.05px;
 }
 
+.\!tw-text-grey-600 {
+  color: var(--squid-theme-grey-600) !important;
+}
+
 .tw-text-\[\#FBFBFD\] {
   --tw-text-opacity: 1;
   color: rgb(251 251 253 / var(--tw-text-opacity));

package/package.json

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