@0xsquid/ui 2.2.11 → 2.3.1

package/dist/index.d.ts

@@ -84,6 +84,12 @@ interface IconLabelProps {
 }
 declare function IconLabel({ src, children, rounded }: IconLabelProps): react_jsx_runtime.JSX.Element;
 
+interface ImageGroupProps {
+    imageUrls: string[];
+    badgeUrl?: string;
+}
+declare function ImageGroup({ imageUrls, badgeUrl }: ImageGroupProps): react_jsx_runtime.JSX.Element;
+
 declare const LoadingProvider: react.Provider<boolean | null>;
 interface LoadingSkeletonProps {
     className?: string;
@@ -128,6 +134,11 @@ interface WalletLinkProps {
 }
 declare function WalletLink({ imageURI, address }: WalletLinkProps): react_jsx_runtime.JSX.Element;
 
+interface AccountsButtonProps extends React.ComponentProps<"button"> {
+    imageUrls: string[];
+}
+declare function AccountsButton({ imageUrls, ...props }: AccountsButtonProps): react_jsx_runtime.JSX.Element;
+
 interface AddressButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label: string;
     imageUrl?: string;
@@ -303,6 +314,11 @@ interface FilterButtonProps {
 }
 declare function FilterButton({ selected, numApplied, onClick, }: FilterButtonProps): react_jsx_runtime.JSX.Element;
 
+interface IconButtonProps extends React.ComponentProps<"button"> {
+    icon: React.ReactNode;
+}
+declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
 interface SettingsButtonProps {
     label: string;
     isSelected?: boolean;
@@ -310,11 +326,6 @@ interface SettingsButtonProps {
 }
 declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
 
-interface IconButtonProps extends React.ComponentProps<"button"> {
-    icon: React.ReactNode;
-}
-declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-
 declare function Approve(): react_jsx_runtime.JSX.Element;
 
 declare function ArrowRightIcon(): react_jsx_runtime.JSX.Element;
@@ -336,9 +347,7 @@ declare function ChevronLargeDownIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function ChevronTopIcon({ className }: {
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
+declare function ChevronTopIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 declare function ChevronLargeRightIcon({ size, className, }: {
     size?: string;
     className?: string;
@@ -643,6 +652,21 @@ declare function CommandIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function NewsIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CelebrateIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SmileFilledIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function StarLinesIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function EmptyHeartIcon({ className }: {
     className?: string;
@@ -1542,8 +1566,9 @@ interface ModalProps {
     maxHeight?: boolean;
     width?: ModalWidth;
     animateOpacity?: boolean;
+    backdropStyle?: React.CSSProperties;
 }
-declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, animateOpacity, }: ModalProps): false | react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, animateOpacity, backdropStyle, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
 type ModalContentBorderType = "border" | "outline";
 interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1673,8 +1698,6 @@ interface Token$1 {
     name: string;
     symbol: string;
     image: string;
-    color: string;
-    textColor: string;
     chainId: string;
 }
 interface Chain {
@@ -1702,10 +1725,18 @@ interface TokenDetailsViewProps {
     }>;
     initialTimeframe?: Timeframe;
     onTimeframeChange?: (timeframe: Timeframe) => void;
-    onSwapFrom: (token: Pick<Token$1, "address" | "chainId">) => void;
-    onSwapTo: (token: Pick<Token$1, "address" | "chainId">) => void;
+    footerButtons: FooterButtonProps[];
+    backdropStyle?: React.CSSProperties;
+    colors?: {
+        backgroundColor: string;
+        textColor: string;
+    };
+}
+interface FooterButtonProps extends React.ComponentProps<"button"> {
+    label: string;
+    icon: React.ReactNode;
 }
-declare const TokenDetailsView: ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, isFavorite, Chart, initialTimeframe, onTimeframeChange, onSwapFrom, onSwapTo, }: TokenDetailsViewProps) => react_jsx_runtime.JSX.Element;
+declare const TokenDetailsView: ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, isFavorite, Chart, initialTimeframe, onTimeframeChange, footerButtons, backdropStyle, colors, }: TokenDetailsViewProps) => react_jsx_runtime.JSX.Element;
 
 interface TokenPairProps {
     firstToken?: {
@@ -2529,8 +2560,9 @@ interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
         isLoading?: boolean;
         width?: string;
     };
+    truncate?: boolean;
 }
-declare function CaptionText({ children, bold, loading, tight, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
+declare function CaptionText({ children, bold, loading, tight, truncate, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
 
 interface HeadingTextProps {
     children?: ReactNode;
@@ -2928,7 +2960,8 @@ declare function hexToRgb(hex: string): {
     a: number;
 } | null;
 declare function rgbToHex(r: number, g: number, b: number): string;
-declare function blendColors(foreground: string, background: string, factor?: number): string | null;
+declare function blendColors(foreground: string, background: string): string | null;
+declare function adjustColorForContrast(foreground: string, background: string, factor?: number): string | null;
 declare const isValidHexColor: (hex: string) => boolean;
 declare function parseColor(color: string): RGB | null;
 declare const getColorBrightness: (color: string) => number;
@@ -16905,4 +16938,4 @@ declare const transactionRejectedAnimation: {
     markers: never[];
 };
 
-export { ANIMATION_DURATIONS, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, Image, ImageIcon, type ImageProps, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type PublicTheme, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, type TokenGroupProps, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountsButton, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type PublicTheme, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, type TokenGroupProps, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

package/package.json

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