@0xsquid/ui 0.6.2 → 0.7.0

package/dist/index.css

@@ -787,10 +787,6 @@ video {
   margin-top: 0.25rem;
 }
 
-.tw-block {
-  display: block;
-}
-
 .tw-inline-block {
   display: inline-block;
 }
@@ -967,10 +963,6 @@ video {
   height: 3.75rem;
 }
 
-.tw-max-h-4 {
-  max-height: 1rem;
-}
-
 .tw-max-h-\[120px\] {
   max-height: 120px;
 }
@@ -983,6 +975,10 @@ video {
   max-height: 535px;
 }
 
+.tw-max-h-\[536px\] {
+  max-height: 536px;
+}
+
 .tw-max-h-\[540px\] {
   max-height: 540px;
 }
@@ -1047,10 +1043,6 @@ video {
   width: 3rem;
 }
 
-.tw-w-16 {
-  width: 4rem;
-}
-
 .tw-w-36 {
   width: 9rem;
 }
@@ -1312,14 +1304,52 @@ 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));
 }
 
-@keyframes tw-pulse {
+@keyframes tw-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.tw-animate-fade-in {
+  animation: tw-fade-in 0.2s ease-out both;
+}
+
+@keyframes tw-fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.tw-animate-fade-out {
+  animation: tw-fade-out 0.2s ease-out both;
+}
+
+@keyframes tw-loading-gradient {
+  0% {
+    transform: translateX(-70%);
+    opacity: 0;
+  }
+
   50% {
-    opacity: .5;
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(70%);
   }
 }
 
-.tw-animate-pulse {
-  animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.tw-animate-loading-gradient {
+  animation: tw-loading-gradient 1s ease-in-out both infinite;
 }
 
 @keyframes tw-slide-to-bottom {
@@ -1335,7 +1365,7 @@ video {
 }
 
 .tw-animate-slide-to-bottom {
-  animation: tw-slide-to-bottom 0.35s ease-out both;
+  animation: tw-slide-to-bottom 0.2s ease-out both;
 }
 
 @keyframes tw-slide-to-top {
@@ -1354,6 +1384,10 @@ video {
   animation: tw-slide-to-top 0.35s ease-out both;
 }
 
+.tw-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .tw-cursor-pointer {
   cursor: pointer;
 }
@@ -1668,10 +1702,6 @@ video {
   background-color: var(--squid-theme-grey-500);
 }
 
-.tw-bg-grey-700 {
-  background-color: var(--squid-theme-grey-700);
-}
-
 .tw-bg-grey-800 {
   background-color: var(--squid-theme-grey-800);
 }
@@ -1684,6 +1714,10 @@ video {
   background-color: inherit;
 }
 
+.tw-bg-material-dark-average {
+  background-color: var(--squid-theme-material-dark-average);
+}
+
 .tw-bg-material-dark-thick {
   background-color: var(--squid-theme-material-dark-thick);
 }
@@ -1722,10 +1756,6 @@ video {
   background-color: transparent;
 }
 
-.tw-bg-opacity-70 {
-  --tw-bg-opacity: 0.7;
-}
-
 .tw-bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -1847,6 +1877,11 @@ video {
   padding-right: 1.25rem;
 }
 
+.tw-px-\[3px\] {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
 .tw-px-\[70px\] {
   padding-left: 70px;
   padding-right: 70px;
@@ -1887,6 +1922,11 @@ video {
   padding-bottom: 0.125rem;
 }
 
+.tw-py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .tw-py-squid-s {
   padding-top: 0.9375rem;
   padding-bottom: 0.9375rem;
@@ -2289,6 +2329,12 @@ video {
   outline-color: var(--squid-theme-material-light-thin);
 }
 
+.tw-backdrop-blur-2xl {
+  --tw-backdrop-blur: blur(40px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .tw-backdrop-blur\/10 {
   --tw-backdrop-blur: blur(10px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -2432,20 +2478,8 @@ li {
   color: var(--squid-theme-grey-600);
 }
 
-.tw-group\/token-action-add:hover .group-hover\/token-action-add\:tw-block {
-  display: block;
-}
-
-.tw-group\/token-action-remove:hover .group-hover\/token-action-remove\:tw-block {
-  display: block;
-}
-
-.tw-group\/token-action-add:hover .group-hover\/token-action-add\:tw-hidden {
-  display: none;
-}
-
-.tw-group\/token-action-remove:hover .group-hover\/token-action-remove\:tw-hidden {
-  display: none;
+.tw-group\/list-item:hover .group-hover\/list-item\:tw-flex {
+  display: flex;
 }
 
 .tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-0 {

package/dist/index.d.ts

@@ -55,7 +55,6 @@ type SwapStepDescriptionBlock = {
 type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
-    routeStepOrder: number;
 };
 type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 type ThemeType = 'light' | 'dark';
@@ -68,7 +67,7 @@ interface BoostButtonProps {
     }) => void;
     boostDisabledMessage?: string;
 }
-declare function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
+declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
@@ -114,8 +113,9 @@ interface SwitchProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     size: SwitchSize;
+    disabled?: boolean;
 }
-declare function Switch({ checked, onChange, size }: SwitchProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ checked, onChange, size, disabled, }: SwitchProps): react_jsx_runtime.JSX.Element;
 
 type TooltipWidth = 'max' | 'container';
 type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
@@ -143,7 +143,7 @@ declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisab
 
 interface DetailsToolbarProps {
     state?: DetailsToolbarState;
-    errorMessage: string;
+    errorMessage?: string;
     boostMode?: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
@@ -154,8 +154,12 @@ interface DetailsToolbarProps {
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
     boostDisabledMessage?: string;
+    helpButton?: {
+        label: string;
+        onClick: () => void;
+    };
 }
-declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -189,9 +193,11 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     mainIcon?: React.ReactNode;
     isSelected?: boolean;
     className?: string;
+    onDetailClick?: () => void;
+    showDetailOnHoverOnly?: boolean;
 }
 type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
 
 interface MenuItemProps {
     label: string;
@@ -240,6 +246,10 @@ interface DropdownMenuProps {
 }
 declare function DropdownMenu({ dropdownRef, items, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
 
+declare function ErrorMessage({ message }: {
+    message: string;
+}): react_jsx_runtime.JSX.Element;
+
 type Rounded = 'sm' | 'lg';
 interface MenuProps extends React$1.ComponentProps<'div'> {
     containerClassName?: string;
@@ -252,8 +262,10 @@ declare function Menu({ children, containerClassName, contentClassName, title, d
 
 interface ModalProps {
     children: React.ReactNode;
+    className?: string;
+    onBackdropClick?: () => void;
 }
-declare function Modal({ children }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick }: ModalProps): react_jsx_runtime.JSX.Element;
 
 interface NavigationBarProps {
     title?: string;
@@ -268,10 +280,7 @@ interface NavigationBarProps {
 }
 declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, label, onAddressButtonClick, isLoading, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
-interface ProductCardProps {
-    children?: React.ReactNode;
-}
-declare function ProductCard({ children }: ProductCardProps): react_jsx_runtime.JSX.Element;
+declare function ProductCard({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
 
 interface SwapConfigurationProps {
     direction: SwapDirection;
@@ -294,8 +303,11 @@ interface SwapConfigurationProps {
     onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
+    error?: {
+        message: string;
+    };
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -303,9 +315,9 @@ interface SwapProgressViewHeaderProps {
 }
 declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): react_jsx_runtime.JSX.Element;
 
-declare function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }: {
+declare function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }: {
     steps: SwapStep[];
-    currentStepCount: number;
+    currentStepIndex: number;
 }): react_jsx_runtime.JSX.Element;
 
 interface TokenPairProps {
@@ -320,12 +332,6 @@ interface TokenPairProps {
 }
 declare function TokenPair({ firstToken, secondToken }: TokenPairProps): react_jsx_runtime.JSX.Element;
 
-interface WalletAddressProps {
-    ens?: string;
-    address?: string;
-}
-declare function WalletAddress({ address, ens }: WalletAddressProps): react_jsx_runtime.JSX.Element;
-
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: string | undefined;
     size: TextSize;
@@ -397,4 +403,4 @@ declare function useModal(props?: {
     openModalButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, WalletAddress, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, useModal };

package/package.json

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

package/dist/cjs/types/components/layout/WalletAddress.d.ts

@@ -1,6 +0,0 @@
-interface WalletAddressProps {
-    ens?: string;
-    address?: string;
-}
-export declare function WalletAddress({ address, ens }: WalletAddressProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/cjs/types/services/internal/walletService.d.ts

@@ -1 +0,0 @@
-export declare const formatWalletAddress: (walletAddress: string | undefined, trimLength?: number) => string;

package/dist/esm/types/components/layout/WalletAddress.d.ts

@@ -1,6 +0,0 @@
-interface WalletAddressProps {
-    ens?: string;
-    address?: string;
-}
-export declare function WalletAddress({ address, ens }: WalletAddressProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/types/services/internal/walletService.d.ts

@@ -1 +0,0 @@
-export declare const formatWalletAddress: (walletAddress: string | undefined, trimLength?: number) => string;