@0xsquid/ui 0.20.2 → 0.21.0

package/dist/index.d.ts

@@ -138,8 +138,9 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     containerClassName?: string;
     actionButtonProps?: InputActionButtonProps;
     autoFocusTimeout?: number;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
-declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, autoFocusTimeout, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, autoFocusTimeout, inputRef: inputRefProp, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 type InputActionButtonProps = {
     onClick?: () => void;
     variant?: ButtonVariant;
@@ -215,6 +216,15 @@ interface SwitchProps {
 }
 declare function Switch({ checked, onChange, size, disabled, }: SwitchProps): react_jsx_runtime.JSX.Element;
 
+interface RangeInputProps {
+    label: string;
+    initialValue?: string;
+    onChange?: (value: string) => void;
+    min?: number;
+    max?: number;
+}
+declare function RangeInput({ label, initialValue, onChange, min, max, }: RangeInputProps): react_jsx_runtime.JSX.Element;
+
 interface AssetsButtonProps {
     token?: {
         iconUrl: string;
@@ -278,6 +288,312 @@ interface SettingsButtonProps {
 }
 declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
 
+declare function Approve(): react_jsx_runtime.JSX.Element;
+
+declare function ArrowRightIcon(): react_jsx_runtime.JSX.Element;
+declare function ArrowRightDownIcon(): react_jsx_runtime.JSX.Element;
+declare function ArrowRightUpIcon(): react_jsx_runtime.JSX.Element;
+declare function ChevronArrowIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowTriangle({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ChevronTopSmallIcon(): react_jsx_runtime.JSX.Element;
+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 ChevronLargeRightIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ChevronRightSmallIcon(): react_jsx_runtime.JSX.Element;
+declare function ArrowLeftIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowRightUpCircleIcon(): react_jsx_runtime.JSX.Element;
+declare function ArrowRightDownCircleIcon(): react_jsx_runtime.JSX.Element;
+declare function ArrowOutOfBoxIcon(): react_jsx_runtime.JSX.Element;
+declare function ChevronGrabberVerticalIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SquareArrowTopRight2Icon({ className, size, strokeWidth, }: {
+    className?: string;
+    size?: string;
+    strokeWidth?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SquareArrowTopLeftIcon({ size }: {
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowBottomTopIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowWallDownIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ReorderIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowsSwapIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowUpIcon(): react_jsx_runtime.JSX.Element;
+declare function ArrowCornerDownRightIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function ArrowRotate(): react_jsx_runtime.JSX.Element;
+
+declare function PunkIcon({ size }: {
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function BagIcon(): react_jsx_runtime.JSX.Element;
+
+declare function BankIcon(): react_jsx_runtime.JSX.Element;
+
+declare function BoostBadge(): react_jsx_runtime.JSX.Element;
+
+declare function Calendar(): react_jsx_runtime.JSX.Element;
+
+declare function ChainLink({ size, strokeWidth, }: {
+    size?: string;
+    strokeWidth?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Checkmark1Icon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Checkmark2Icon({ className, size, style, }: {
+    className?: string;
+    size?: string;
+    style?: React.CSSProperties;
+}): react_jsx_runtime.JSX.Element;
+
+declare function ClockIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ClockOutlineIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare const SettingsGearIcon: ({ size, className, }: {
+    className?: string;
+    size?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const ExplosionIcon: ({ size, className, }: {
+    className?: string;
+    size?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare function TimeFliesIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function CoinsIcon(): react_jsx_runtime.JSX.Element;
+declare function CoinsAddIcon(): react_jsx_runtime.JSX.Element;
+declare function Dollar({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function CollectionIcon(): react_jsx_runtime.JSX.Element;
+
+declare function CompassRound({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CircleX({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CircleMinusIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CirclePlusIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Copy({ size, strokeWidth, ...props }: {
+    size?: string;
+    strokeWidth?: string;
+} & ComponentProps<'svg'>): react_jsx_runtime.JSX.Element;
+
+declare function DashboardFast({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function DotGrid1x3HorizontalIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function EmojiSadIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function EmojiMeh({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function EthereumIcon(): react_jsx_runtime.JSX.Element;
+
+declare function FilterIcon(): react_jsx_runtime.JSX.Element;
+
+declare function EmptyHeartIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function FilledHeartIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function BrokenHeartIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function HeartSmallIcon(): react_jsx_runtime.JSX.Element;
+
+declare function HelpIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function GasIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ReceiptBillIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SnapIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function HomeIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function ImageSparkle(): react_jsx_runtime.JSX.Element;
+
+declare function InfinityIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function LightningIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function LinkIcon(props: ComponentProps<'svg'>): react_jsx_runtime.JSX.Element;
+
+interface LoaderProps extends ComponentProps<'svg'> {
+    size?: string;
+    strokeWidth?: string;
+    rotateDuration?: string;
+}
+declare function Loader({ size, strokeWidth, className, rotateDuration, ...props }: LoaderProps): react_jsx_runtime.JSX.Element;
+
+declare function MaxIcon(): react_jsx_runtime.JSX.Element;
+
+declare function NotAllowedIcon(): react_jsx_runtime.JSX.Element;
+
+declare function PercentIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function PathSquareIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function PieChartIcon(): react_jsx_runtime.JSX.Element;
+
+declare function PlusIcon(): react_jsx_runtime.JSX.Element;
+
+declare function RefreshIcon(): react_jsx_runtime.JSX.Element;
+
+declare function SearchIcon(): react_jsx_runtime.JSX.Element;
+
+declare function XSocial({ className, size, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SortIcon(): react_jsx_runtime.JSX.Element;
+
+declare function SparklesIcon(): react_jsx_runtime.JSX.Element;
+declare function SparkleIcon(): react_jsx_runtime.JSX.Element;
+
+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 SwapInputsIcon(): react_jsx_runtime.JSX.Element;
+
+declare function SwapSuccessIcon(): react_jsx_runtime.JSX.Element;
+declare function SwapErrorIcon(): react_jsx_runtime.JSX.Element;
+declare function SwapWarningIcon(): react_jsx_runtime.JSX.Element;
+
+declare function SwapStepSeparator(): react_jsx_runtime.JSX.Element;
+
+declare function TagIcon({ size }: {
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function TagIconFilled(): react_jsx_runtime.JSX.Element;
+
+declare function ThumbsUp({ fill }: {
+    fill?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Tick({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Timeline({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare namespace Timeline {
+    var ArrowDown: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    var ArrowReverse: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    var ArrowRight: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    var ArrowUp: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    var CapBottom: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    var CapTop: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+    var Straight: ({ className, ...props }: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+}
+
+declare function TradingViewStepsIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function TriangleExclamation(): react_jsx_runtime.JSX.Element;
+
+declare function WalletIcon({ size }: {
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function WalletFilledIcon({ size }: {
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+
 interface Props {
     lottieJsonFile: object;
     animReplacement?: JSX.Element;
@@ -981,6 +1297,13 @@ type SettingsControl = {
     onChange: (checked: boolean) => void;
     tooltip?: Omit<TooltipProps, 'children'>;
     disabled?: boolean;
+} | {
+    type: 'options';
+    selectedLabel: string;
+    options: {
+        label: string;
+        onSelect: () => void;
+    }[];
 };
 interface SettingsItemProps {
     icon: React.ReactNode;
@@ -1349,14 +1672,16 @@ interface MenuProps extends react__default.ComponentProps<'div'> {
 }
 declare function Menu({ children, containerClassName, contentClassName, rounded, menuRef, contentWrapperClassName, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
 
+type ModalWidth = 'large' | 'extra-large';
 interface ModalProps {
     children: React.ReactNode;
     className?: string;
     onBackdropClick?: () => void;
     isOpen?: boolean;
     maxHeight?: boolean;
+    width?: ModalWidth;
 }
-declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
 type ModalContentBorderType = 'border' | 'outline';
 interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -2016,4 +2341,4 @@ declare const MEDIA_QUERIES: Record<MediaQuery, {
     value: string;
 }>;
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, ApproveAction, ArrowButton, AssetsButton, type AssetsButtonVariant, AssetsView, BadgeImage, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CaptionText, Chip, Collapse, DescriptionBlocks, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilterButton, HashLink, HeadingText, HistoryItem, type HistoryItemStatus, IconLabel, ImageIcon, IncompleteAction, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, List, ListItem, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, Menu, MenuItem, Modal, ModalContent, ModalContentDivider, NavigationBar, NumericInput, PipeSeparator, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, ReceiveNFTAction, ReceiveTokensAction, RecipientView, STEP_ITEM_HEIGHT, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SizeTransition, SquidConfigProvider, type SquidTheme, StakeAction, StartAction, SuccessAction, SwapAction, SwapConfiguration, SwapDetailsView, SwapHeader, type SwapHeaderProps, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapTransactionView, Switch, TextSkeleton, type ThemeType, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, 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, UsdAmount, WalletLink, WalletsView, WrapAction, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };
+export { 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, 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, linkActionTimelineProps, statusBgClassMap, statusColorClassMap, statusTextClassMap, useDropdownMenu, useMediaQuery };

package/package.json

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