@0xsquid/ui 0.9.5 → 0.10.1

package/dist/index.css

@@ -788,10 +788,6 @@ video {
   margin-left: -0.25rem;
 }
 
-.-tw-ml-\[5px\] {
-  margin-left: -5px;
-}
-
 .-tw-ml-squid-xs {
   margin-left: -0.625rem;
 }
@@ -888,10 +884,6 @@ video {
   height: 195px;
 }
 
-.tw-h-\[200px\] {
-  height: 200px;
-}
-
 .tw-h-\[205px\] {
   height: 205px;
 }
@@ -900,10 +892,6 @@ video {
   height: 21px;
 }
 
-.tw-h-\[22px\] {
-  height: 22px;
-}
-
 .tw-h-\[240px\] {
   height: 240px;
 }
@@ -948,10 +936,6 @@ video {
   height: 60px;
 }
 
-.tw-h-\[90px\] {
-  height: 90px;
-}
-
 .tw-h-\[95px\] {
   height: 95px;
 }
@@ -1440,6 +1424,20 @@ video {
   animation: tw-fade-out 0.2s ease-out both;
 }
 
+@keyframes tw-hide {
+  0% {
+    display: block;
+  }
+
+  100% {
+    display: none;
+  }
+}
+
+.tw-animate-hide {
+  animation: tw-hide 0s ease-out forwards;
+}
+
 @keyframes tw-loading-gradient {
   0% {
     transform: translateX(-70%);
@@ -1760,10 +1758,6 @@ video {
   border-width: 1px;
 }
 
-.tw-border-\[5px\] {
-  border-width: 5px;
-}
-
 .tw-border-b {
   border-bottom-width: 1px;
 }
@@ -1792,10 +1786,6 @@ video {
   border-color: var(--squid-theme-grey-900);
 }
 
-.tw-border-material-dark-average {
-  border-color: var(--squid-theme-material-dark-average);
-}
-
 .tw-border-material-light-thick {
   border-color: var(--squid-theme-material-light-thick);
 }
@@ -1989,10 +1979,6 @@ video {
   padding: 0.625rem;
 }
 
-.tw-p-squid-xxs {
-  padding: 0.3125rem;
-}
-
 .\!tw-px-squid-m {
   padding-left: 1.25rem !important;
   padding-right: 1.25rem !important;
@@ -2296,10 +2282,18 @@ video {
   line-height: 10px !important;
 }
 
+.\!tw-leading-\[11px\] {
+  line-height: 11px !important;
+}
+
 .\!tw-leading-\[13px\] {
   line-height: 13px !important;
 }
 
+.\!tw-leading-\[17px\] {
+  line-height: 17px !important;
+}
+
 .\!tw-leading-\[18px\] {
   line-height: 18px !important;
 }
@@ -2542,6 +2536,10 @@ video {
   transition-duration: 150ms;
 }
 
+.tw-duration-100 {
+  transition-duration: 100ms;
+}
+
 .tw-duration-200 {
   transition-duration: 200ms;
 }
@@ -2550,6 +2548,10 @@ video {
   transition-duration: 300ms;
 }
 
+.tw-duration-\[50ms\] {
+  transition-duration: 50ms;
+}
+
 .tw-ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2603,13 +2605,15 @@ li {
 }
 
 button,
-input {
+input,
+a {
   outline: 2px solid transparent;
   outline-offset: -1px;
 }
 
 button:focus,
-input:focus {
+input:focus,
+a:focus {
   outline-width: 2px;
   outline-color: var(--squid-theme-royal-500);
 }
@@ -2648,8 +2652,22 @@ input[type='number'] {
   outline-color: var(--squid-theme-status-negative);
 }
 
-.hover\:tw-block:hover {
-  display: block;
+@keyframes tw-display {
+  0% {
+    display: none;
+  }
+
+  100% {
+    display: block;
+  }
+}
+
+.hover\:tw-animate-display-delayed:hover {
+  animation: tw-display 0s var(--squid-animation-display-delayed-duration, 0s) ease-out both;
+}
+
+.hover\:tw-bg-grey-700:hover {
+  background-color: var(--squid-theme-grey-700);
 }
 
 .hover\:tw-bg-material-light-thin:hover {
@@ -2660,6 +2678,10 @@ input[type='number'] {
   color: var(--squid-theme-grey-400);
 }
 
+.hover\:tw-opacity-100:hover {
+  opacity: 1;
+}
+
 .focus\:tw-bg-material-light-thin:focus {
   background-color: var(--squid-theme-material-light-thin);
 }
@@ -2693,14 +2715,16 @@ input[type='number'] {
   display: block;
 }
 
-.tw-group\/list-item:hover .group-hover\/list-item\:tw-flex {
-  display: flex;
-}
-
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden {
   display: none;
 }
 
+.tw-group\/swap-step-item-button:hover .group-hover\/swap-step-item-button\:tw-from-grey-700 {
+  --tw-gradient-from: var(--squid-theme-grey-700) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-0 {
   opacity: 0;
 }
@@ -2709,13 +2733,31 @@ input[type='number'] {
   opacity: 1;
 }
 
+.tw-group\/list-item:hover .group-hover\/list-item\:tw-opacity-100 {
+  opacity: 1;
+}
+
+.tw-group\/list-item:focus .group-focus\/list-item\:tw-opacity-100 {
+  opacity: 1;
+}
+
 .tw-group:disabled .group-disabled\:tw-grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.tw-peer:hover ~ .peer-hover\:tw-block {
-  display: block;
+@keyframes tw-display {
+  0% {
+    display: none;
+  }
+
+  100% {
+    display: block;
+  }
+}
+
+.tw-peer:hover ~ .peer-hover\:tw-animate-display-delayed {
+  animation: tw-display 0s var(--squid-animation-display-delayed-duration, 0s) ease-out both;
 }
 
 .tw-peer:focus ~ .peer-focus\:tw-hidden {
@@ -2753,7 +2795,7 @@ input[type='number'] {
 }
 
 .data-\[boost-mode\=boost\]\:tw-animate-move-to-left-with-spring-bounce[data-boost-mode=boost] {
-  animation: tw-move-to-left-with-spring-bounce var(--boost-animation-duration, 0s) ease-out both;
+  animation: tw-move-to-left-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration, 0s) ease-out both;
 }
 
 @keyframes tw-move-to-right-with-spring-bounce {
@@ -2775,7 +2817,7 @@ input[type='number'] {
 }
 
 .data-\[boost-mode\=normal\]\:tw-animate-move-to-right-with-spring-bounce[data-boost-mode=normal] {
-  animation: tw-move-to-right-with-spring-bounce var(--boost-animation-duration, 0s) ease-out both;
+  animation: tw-move-to-right-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration, 0s) ease-out both;
 }
 
 .tw-group[data-boost-mode=boost] .group-data-\[boost-mode\=boost\]\:tw-left-\[calc\(50\%-2px\)\] {
@@ -2794,6 +2836,14 @@ input[type='number'] {
   background-image: linear-gradient(180deg, #A577D8 0%, #BF91F2 100%);
 }
 
+.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-grey-100 {
+  color: var(--squid-theme-grey-100);
+}
+
+.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-grey-900 {
+  color: var(--squid-theme-grey-900);
+}
+
 .tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-shadow-elevation-dark-2 {
   --tw-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.20), 0px 5px 20px -1px rgba(0, 0, 0, 0.33);
   --tw-shadow-colored: 0px 2px 5px 1px var(--tw-shadow-color), 0px 5px 20px -1px var(--tw-shadow-color);

package/dist/index.d.ts

@@ -72,8 +72,9 @@ interface BoostButtonProps {
         boostMode: BoostMode;
     }) => void;
     boostDisabledMessage?: string;
+    tooltipDisplayDelayMs?: number;
 }
-declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
+declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, tooltipDisplayDelayMs, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
@@ -81,8 +82,9 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     variant: ButtonVariant;
     size: ButtonSize;
     disabled?: boolean;
+    link?: string;
 }
-declare function Button({ label, disabled, size, variant, icon, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ label, disabled, size, variant, icon, link, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -147,8 +149,9 @@ interface TooltipProps {
     containerClassName?: string;
     childrenClassName?: string;
     tooltipClassName?: string;
+    displayDelayMs?: number;
 }
-declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, displayDelayMs, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 interface BoostProps {
     boostMode: BoostMode;
@@ -158,8 +161,9 @@ interface BoostProps {
     estimatedTime: string;
     boostDisabledMessage?: string;
     canToggleBoostMode?: boolean;
+    boostTooltipDisplayDelayMs?: number;
 }
-declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): react_jsx_runtime.JSX.Element;
+declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, boostTooltipDisplayDelayMs, }: BoostProps): react_jsx_runtime.JSX.Element;
 
 interface DetailsToolbarProps {
     errorMessage?: string;
@@ -179,8 +183,9 @@ interface DetailsToolbarProps {
         label: string;
         onClick: () => void;
     };
+    boostTooltipDisplayDelayMs?: number;
 }
-declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -206,7 +211,7 @@ interface HistoryItemProps {
 }
 declare function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel, dropdownMenuItems, itemsContainerRef, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
-interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
     secondaryImageUrl?: string;
@@ -398,8 +403,9 @@ interface SwapConfigurationProps {
     };
     criticalPriceImpactPercentage?: number;
     emptyAddressLabel?: string;
+    onSwapAmountButtonClick?: () => void;
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, onSwapAmountButtonClick, address, error, criticalPriceImpactPercentage, emptyAddressLabel, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -466,7 +472,7 @@ type SquidTheme = {
 };
 
 declare function SquidConfigProvider({ theme, children, themeType, }: {
-    theme: SquidTheme;
+    theme?: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;

package/package.json

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

package/dist/cjs/types/components/views/ProfileView.d.ts

@@ -1 +0,0 @@
-export declare function ProfileView(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/stories/views/ProfileView.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ProfileView } from '../../components/views/ProfileView';
-declare const meta: Meta<typeof ProfileView>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

package/dist/esm/types/components/views/ProfileView.d.ts

@@ -1 +0,0 @@
-export declare function ProfileView(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/stories/views/ProfileView.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ProfileView } from '../../components/views/ProfileView';
-declare const meta: Meta<typeof ProfileView>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;