@0xsquid/ui 0.23.2-beta.0 → 0.23.2-beta.2

package/dist/index.d.ts

@@ -53,7 +53,7 @@ declare enum SwapState {
 }
 type ThemeType = 'light' | 'dark';
 type ActionStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
-type TransactionStateVariant = 'full' | 'compact';
+type TransactionStateVariant = 'full' | 'compact' | 'small';
 type TokenPairVariant = 'horizontal' | 'vertical';
 type TokenPairSize = 'small' | 'medium';
 type ImageIconVariant = 'square' | 'round' | 'proportional';
@@ -98,12 +98,7 @@ interface LoadingBlockProps extends ComponentProps<'div'> {
 }
 declare function BlockSkeleton({ isLoading, className, children, ...props }: LoadingBlockProps): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
 
-declare const statusBgClassMap: Record<ActionStatus, string>;
 declare const statusTextClassMap: Record<ActionStatus, string>;
-declare const statusColorClassMap: {
-    bg: Record<ActionStatus, string>;
-    text: Record<ActionStatus, string>;
-};
 interface TransactionStateProps extends React.HTMLAttributes<HTMLDivElement> {
     status: ActionStatus;
     variant?: TransactionStateVariant;
@@ -372,6 +367,10 @@ declare function PunkIcon({ size }: {
 }): react_jsx_runtime.JSX.Element;
 
 declare function BagIcon(): react_jsx_runtime.JSX.Element;
+declare function BackpackIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function BankIcon(): react_jsx_runtime.JSX.Element;
 
@@ -464,6 +463,10 @@ declare function EmojiMeh({ className, size, }: {
     className?: string;
     size?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function SmileIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function EthereumIcon(): react_jsx_runtime.JSX.Element;
 
@@ -500,6 +503,22 @@ declare function SnapIcon({ size, className, }: {
 declare function HomeIcon({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function MenuSwapIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ColorPaletteIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ConsoleIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function BubblesIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function ImageSparkle(): react_jsx_runtime.JSX.Element;
 
@@ -547,6 +566,18 @@ declare function XSocial({ className, size, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function GithubIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function DiscordIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function MirrorIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function SortIcon(): react_jsx_runtime.JSX.Element;
 
@@ -557,7 +588,10 @@ declare function SquareArrowCenter(): react_jsx_runtime.JSX.Element;
 
 declare function DockSwapIcon(): react_jsx_runtime.JSX.Element;
 
-declare function SquidLogo(): react_jsx_runtime.JSX.Element;
+declare function SquidLogo({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function SwapInputsIcon(): react_jsx_runtime.JSX.Element;
 
@@ -605,6 +639,26 @@ declare function WalletFilledIcon({ size }: {
     size?: string;
 }): react_jsx_runtime.JSX.Element;
 
+declare function CrossAnimatedIcon({ size, isOpen, transitionDuration, className, }: {
+    size?: number;
+    isOpen?: boolean;
+    transitionDuration?: React.CSSProperties['transitionDuration'];
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SunriseIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SunIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function MoonIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 interface Props {
     lottieJsonFile: object;
     animReplacement?: JSX.Element;
@@ -1613,15 +1667,17 @@ declare function TransactionAction({ type, props }: TransactionActionProps): rea
 
 declare function linkActionTimelineProps(actions: TransactionActionProps[], collapsed: boolean): TransactionActionProps[];
 
+type TransactionItemVariant = 'compact' | 'full';
+type TransactionItemType = {
+    icon?: ReactNode;
+    name: string;
+};
 interface TransactionItemProps {
     className?: string;
     isLoading?: boolean;
     status?: ActionStatus;
     image?: ReactNode;
-    type?: {
-        icon?: ReactNode;
-        name: string;
-    };
+    type?: TransactionItemType;
     hash?: string;
     fromChain?: {
         logoURI: string;
@@ -1634,8 +1690,9 @@ interface TransactionItemProps {
     fromAmount?: string;
     toAmount?: string;
     timestamp?: number;
+    variant?: TransactionItemVariant;
 }
-declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
+declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuProps {
     dropdownRef?: React.RefObject<HTMLDivElement>;
@@ -1728,6 +1785,25 @@ declare function NavigationBar({ title, displayBackButton, logoUrl, transparent,
 
 declare function PipeSeparator({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 
+interface CollapsibleMenuProps {
+    menuRef: React.MutableRefObject<HTMLDivElement | null>;
+    size: {
+        open: {
+            width: string;
+            height: string;
+        };
+        closed: {
+            width: string;
+            height: string;
+        };
+    };
+    children?: React.ReactNode;
+    isOpen?: boolean;
+    transitionDuration?: React.CSSProperties['transitionDuration'];
+    className?: string;
+}
+declare function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }: CollapsibleMenuProps): react_jsx_runtime.JSX.Element;
+
 declare function ProductCard({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
 declare function BorderedContainer({ children, className, }: {
     children: React.ReactNode;
@@ -2299,8 +2375,10 @@ type SquidTheme = {
     'content-700': string;
     'content-800': string;
     'content-900': string;
+    'accent-300': string;
     'accent-400': string;
     'accent-500': string;
+    'accent-700': string;
     'status-positive': string;
     'status-negative': string;
     'status-warning': string;
@@ -2348,6 +2426,46 @@ type UseMediaQueryOptions = {
  */
 declare function useMediaQuery(query: string, { defaultValue, initializeWithValue, }?: UseMediaQueryOptions): boolean;
 
+declare function useCollapsibleMenu(): {
+    isMenuOpen: boolean;
+    toggleMenu: () => void;
+    menuRef: react.RefObject<HTMLDivElement>;
+};
+
+declare function useOnResize(ref: React.RefObject<HTMLElement>, callback: (rect: DOMRectReadOnly) => void): void;
+declare function useRect(ref: React.RefObject<HTMLElement>): DOMRectReadOnly;
+
+declare function useVersion<T>(value: T, equal?: (a: T, b: T) => boolean): number;
+
+declare const useTimer: ({ immediateStart, }: {
+    immediateStart?: boolean;
+}) => {
+    timer: string;
+    stopTimer: () => void;
+    startTimer: () => void;
+};
+
+declare const CSS_VARS: {
+    MOVE_WITH_SPRING_BOUNCE_DURATION: string;
+    DISPLAY_DELAYED_DURATION: string;
+    COLLAPSE_ROUTE_DURATION: string;
+    EXPAND_ROUTE_DURATION: string;
+    FADE_IN_DURATION: string;
+    FADE_OUT_DURATION: string;
+    SCALE_AND_FADE_UP_DURATION: string;
+    SCALE_AND_FADE_DOWN_DURATION: string;
+    TRANSLATE_TOP_OR_BOTTOM: string;
+    SHOW_MODAL_DURATION: string;
+    HIDE_MODAL_DURATION: string;
+    SLIDE_TO_TOP_DURATION: string;
+    SLIDE_TO_BOTTOM_DURATION: string;
+    BLUR_IN_DURATION: string;
+    BLUR_OUT_DURATION: string;
+    COLLAPSIBLE_MENU_OPEN_WIDTH: string;
+    COLLAPSIBLE_MENU_OPEN_HEIGHT: string;
+    COLLAPSIBLE_MENU_CLOSED_WIDTH: string;
+    COLLAPSIBLE_MENU_CLOSED_HEIGHT: string;
+};
 type MediaQuery = 'MOBILE_LG' | 'MOBILE_SM_HEIGHT' | 'MOBILE_XS' | 'MOBILE_XS_HEIGHT';
 declare const MEDIA_QUERIES: Record<MediaQuery, {
     media: string;
@@ -2360,4 +2478,4 @@ declare const darkTheme: SquidTheme;
 
 declare const baseTailwindConfig: Config;
 
-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, BadgeImage, BagIcon, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollectionIcon, CompassRound, Copy, DashboardFast, DescriptionBlocks, DetailsToolbar, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, 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, Modal, ModalContent, ModalContentDivider, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, 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, SizeTransition, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, 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, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, darkTheme, lightTheme, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
+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, BagIcon, 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, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRound, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, 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, 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, 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, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, 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, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, 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.23.2-beta.0",
+  "version": "0.23.2-beta.2",
   "author": "",
   "license": "MIT",
   "resolutions": {