@0xsquid/ui 0.25.1-beta.0 → 0.26.0-beta.0

package/dist/index.d.ts

@@ -63,6 +63,7 @@ type ChainTypeFilter = 'source' | 'destination';
 type StatusFilter = 'success' | 'ongoing' | 'error';
 type AssetsButtonVariant = 'primary' | 'accent';
 type PropertyListItemSize = 'small' | 'large';
+type DropdownPosition = 'top' | 'bottom' | 'center';
 
 interface IconLabelProps {
     isLoading?: boolean;
@@ -365,6 +366,18 @@ declare function ArrowCornerDownRightIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function ChevronDownSmallIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowDownIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowSplit({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function ArrowRotate(): react_jsx_runtime.JSX.Element;
 
@@ -433,7 +446,11 @@ declare function StocksIcon({ size, className, }: {
 
 declare function CollectionIcon(): react_jsx_runtime.JSX.Element;
 
-declare function CompassRound({ size, className, }: {
+declare function CompassRoundOutlinedIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CompassRoundSolidIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
@@ -1263,6 +1280,16 @@ interface DescriptionBlocksProps extends ComponentProps<'div'> {
 declare function DescriptionBlocks({ className, blocks: blocksProp, ...props }: DescriptionBlocksProps): react_jsx_runtime.JSX.Element;
 declare function Inline({ className, children, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 
+interface StopsProps extends React.ComponentProps<'button'> {
+    stopsCount?: string | number;
+    estimatedTime?: string;
+    tooltip?: Omit<TooltipProps, 'children'>;
+    providers: Provider[];
+}
+type Provider = {
+    logoUrl: string;
+};
+
 interface DetailsToolbarProps {
     errorMessage?: string;
     flipButton?: {
@@ -1275,23 +1302,15 @@ interface DetailsToolbarProps {
         tooltip?: Omit<TooltipProps, 'children'>;
         onClick: () => void;
     };
-    estimatedTime?: string;
     isLoading?: boolean;
     isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
-    boostButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
-        onClick?: ({ boostMode }: {
-            boostMode: BoostMode;
-        }) => void;
-        canToggleBoostMode?: boolean;
-        boostMode?: BoostMode;
-    };
+    stopsButton?: StopsProps;
 }
-declare function DetailsToolbar({ errorMessage, estimatedTime, helpButton, isLoading, isEmpty, flipButton, feeButton, boostButton, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, helpButton, isLoading, isEmpty, flipButton, feeButton, stopsButton, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -1299,8 +1318,9 @@ interface DropdownMenuItemProps {
     imageUrl?: string;
     icon?: React.ReactNode;
     onClick?: () => void;
+    link?: string;
 }
-declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, link, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
 
 interface HistoryItemProps {
     firstImageUrl: string;
@@ -1316,7 +1336,7 @@ interface HistoryItemProps {
     onClick?: () => void;
     warningLabel?: string;
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems: _dropdownMenuItemsProp, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
@@ -1341,9 +1361,12 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
     compactOnMobile?: boolean;
     extraPadding?: boolean;
+    dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
 type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuItems: _dropdownMenuItemsProp, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare const ListItemActionsButton: (props: React.ComponentProps<'button'>) => react_jsx_runtime.JSX.Element;
 
 interface MenuItemProps {
     label: string;
@@ -1358,8 +1381,12 @@ interface PropertyListItemProps extends ComponentProps<'li'> {
     icon?: React.ReactNode;
     detail?: React.ReactNode;
     variant?: PropertyListItemSize;
+    showGradientBg?: boolean;
+    labelClassName?: string;
+    iconClassName?: string;
+    detailClassName?: string;
 }
-declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, ...props }: PropertyListItemProps): react_jsx_runtime.JSX.Element;
+declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, showGradientBg, labelClassName, iconClassName, detailClassName, ...props }: PropertyListItemProps): react_jsx_runtime.JSX.Element;
 
 interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
@@ -1730,6 +1757,14 @@ interface TransactionItemProps {
 }
 declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
 
+interface RouteStepProps {
+    imageUrl: string;
+    descriptionBlocks: DescriptionBlock[];
+    subtitle: string;
+    showStepSeparator?: boolean;
+}
+declare function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator, }: RouteStepProps): react_jsx_runtime.JSX.Element;
+
 interface DropdownMenuProps {
     dropdownRef?: React.RefObject<HTMLDivElement>;
     menuRef?: React.RefObject<HTMLDivElement>;
@@ -2426,14 +2461,19 @@ declare function SquidConfigProvider({ theme, children, themeType, }: {
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;
 
-declare function useDropdownMenu(props?: {
+interface UseDropdownMenuParams {
     initialIsModalOpen?: boolean;
-}): {
+    itemsContainerRef?: React.RefObject<HTMLElement>;
+}
+declare function useDropdownMenu(props?: UseDropdownMenuParams): {
     isDropdownOpen: boolean;
     openDropdown: () => void;
     closeDropdown: () => void;
     dropdownRef: React.RefObject<HTMLDivElement>;
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
+    dropdownPosition: DropdownPosition | null;
+    itemRef: React.RefObject<HTMLLIElement>;
+    menuRef: React.RefObject<HTMLDivElement>;
 };
 
 type UseMediaQueryOptions = {
@@ -2524,4 +2564,4 @@ declare const baseTailwindConfig: Config;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRound, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, 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, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, 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, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };
+export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, 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, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, 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, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };

package/package.json

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