@0xsquid/ui 0.23.2 → 0.24.0

package/dist/index.d.ts

@@ -4,6 +4,8 @@ import * as react from 'react';
 import react__default, { ReactNode, ComponentProps } from 'react';
 import * as framer_motion from 'framer-motion';
 import { motion } from 'framer-motion';
+import { Config } from 'tailwindcss';
+import { ClassValue } from 'clsx';
 
 interface BadgeImageProps {
     imageUrl?: string;
@@ -52,7 +54,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';
@@ -97,12 +99,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;
@@ -370,7 +367,11 @@ declare function PunkIcon({ size }: {
     size?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function BagIcon(): react_jsx_runtime.JSX.Element;
+declare function ShoppingBagIcon(): 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;
 
@@ -420,6 +421,10 @@ declare function Dollar({ className, size, }: {
     className?: string;
     size?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function StocksIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function CollectionIcon(): react_jsx_runtime.JSX.Element;
 
@@ -439,6 +444,18 @@ declare function CirclePlusIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function CircleXFilledIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function TranslateIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function PowerIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function Copy({ size, strokeWidth, ...props }: {
     size?: string;
@@ -463,6 +480,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;
 
@@ -499,6 +520,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;
 
@@ -546,6 +583,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;
 
@@ -556,9 +605,16 @@ 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;
+declare function SwapIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function SwapSuccessIcon(): react_jsx_runtime.JSX.Element;
 declare function SwapErrorIcon(): react_jsx_runtime.JSX.Element;
@@ -604,6 +660,36 @@ 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 DockIconProps {
+    isSelected?: boolean;
+}
+declare function DockIconSwap({ isSelected }: DockIconProps): react_jsx_runtime.JSX.Element;
+declare function DockIconCheckout({ isSelected }: DockIconProps): react_jsx_runtime.JSX.Element;
+declare function DockIconScan({ isSelected }: DockIconProps): react_jsx_runtime.JSX.Element;
+declare function DockIconAnalytics({ isSelected }: DockIconProps): react_jsx_runtime.JSX.Element;
+declare function DockIconProfile({ isSelected }: DockIconProps): react_jsx_runtime.JSX.Element;
+declare function DockIconHelp({ isSelected }: DockIconProps): react_jsx_runtime.JSX.Element;
+
 interface Props {
     lottieJsonFile: object;
     animReplacement?: JSX.Element;
@@ -1612,15 +1698,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;
@@ -1633,8 +1721,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>;
@@ -1727,6 +1816,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;
@@ -2298,11 +2406,14 @@ 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;
+    'highlight-700': string;
 };
 
 declare function SquidConfigProvider({ theme, children, themeType, }: {
@@ -2347,6 +2458,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;
@@ -2357,4 +2508,16 @@ declare const MEDIA_QUERIES: Record<MediaQuery, {
 declare const lightTheme: SquidTheme;
 declare const darkTheme: SquidTheme;
 
-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, darkTheme, lightTheme, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
+declare const baseTailwindConfig: Config;
+
+/**
+ * Combines multiple class names into a single string
+ *
+ * @example cn('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]') → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
+ *
+ * @param inputs - The class names to be combined.
+ * @returns The combined class names as a string.
+ */
+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, 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 };

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",
+  "version": "0.24.0",
   "author": "",
   "license": "MIT",
   "resolutions": {