@0xsquid/ui 0.3.0 → 0.4.1

package/dist/index.d.ts

@@ -31,21 +31,41 @@ interface ArrowButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 declare function ArrowButton({ label, disabled, ...props }: ArrowButtonProps): react_jsx_runtime.JSX.Element;
 
+interface AssetsButtonProps {
+    tokenImageUrl?: string;
+    chainImageUrl?: string;
+    tokenSymbol?: string;
+    chainBgColor?: string;
+    tokenBgColor?: string;
+    tokenTextColor?: string;
+}
+declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
+
 type TextSize = 'small' | 'medium' | 'large';
 type SwitchSize = 'small' | 'large';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonSize = 'md' | 'lg';
 type SwapDirection = 'from' | 'to';
 type BoostMode = 'normal' | 'boost';
+type SwapStepDescriptionBlock = {
+    type: 'string' | 'image';
+    value: string;
+};
+type SwapStep = {
+    descriptionBlocks: SwapStepDescriptionBlock[];
+    chipContent: React.ReactNode;
+    routeStepOrder: number;
+};
 declare enum DetailsToolbarState {
     FULL = 0,
     LOADING = 1,
     EMPTY = 2,
     ERROR = 3
 }
+type ThemeType = 'light' | 'dark';
 
 interface BoostButtonProps {
-    boostMode?: BoostMode;
+    boostMode: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;
@@ -67,18 +87,13 @@ interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function Chip({ label, icon, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
 
-interface DropdownProps {
-    tokenImageUrl?: string;
-    chainImageUrl?: string;
-    tokenSymbol?: string;
-    chainBgColor?: string;
-    tokenBgColor?: string;
-    tokenTextColor?: string;
-}
-declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: DropdownProps): react_jsx_runtime.JSX.Element;
-
 declare function FeeButton(): react_jsx_runtime.JSX.Element;
 
+interface SettingsButtonProps {
+    label: string;
+}
+declare function SettingsButton({ label }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
+
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     showIcon?: boolean;
@@ -87,9 +102,15 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 declare function Input({ placeholder, showIcon, showPasteButton, className, icon, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
+interface SettingsSliderProps {
+    value: number;
+    type: 'percentage' | 'amount';
+}
+declare function SettingsSlider({ value, type }: SettingsSliderProps): react_jsx_runtime.JSX.Element;
+
 interface SwitchProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
     size: SwitchSize;
 }
 declare function Switch({ checked, onChange, size }: SwitchProps): react_jsx_runtime.JSX.Element;
@@ -101,11 +122,19 @@ interface TooltipProps {
     tooltipContent: React$1.ReactNode;
     threshold?: TooltipThreshold;
     tooltipWidth?: TooltipWidth;
-    className?: string;
+    containerClassName?: string;
+    childrenClassName?: string;
+    tooltipClassName?: string;
 }
-declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, tooltipContent, tooltipWidth, threshold, containerClassName, childrenClassName, tooltipClassName, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-declare function Boost(): react_jsx_runtime.JSX.Element;
+interface BoostProps {
+    boostMode: BoostMode;
+    onToggleBoostMode?: ({ boostMode }: {
+        boostMode: BoostMode;
+    }) => void;
+}
+declare function Boost({ boostMode, onToggleBoostMode }: BoostProps): react_jsx_runtime.JSX.Element;
 
 interface DetailsToolbarProps {
     state?: DetailsToolbarState;
@@ -113,11 +142,15 @@ interface DetailsToolbarProps {
 }
 declare function DetailsToolbar({ state, errorMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
+type Rounded = 'sm' | 'lg';
 interface MenuProps extends React$1.ComponentProps<'div'> {
-    menuClassName?: string;
+    containerClassName?: string;
     contentClassName?: string;
+    title?: string;
+    displayControls?: boolean;
+    rounded?: Rounded;
 }
-declare function Menu({ children, menuClassName, contentClassName, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
+declare function Menu({ children, containerClassName, contentClassName, title, displayControls, rounded, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
 
 interface ModalProps {
     children: React.ReactNode;
@@ -128,8 +161,10 @@ interface NavigationBarProps {
     title?: string;
     displayBackButton?: boolean;
     logoUrl?: string;
+    transparent?: boolean;
+    displayButtonShadows?: boolean;
 }
-declare function NavigationBar({ title, displayBackButton, logoUrl, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 interface ProductCardProps {
     children?: React.ReactNode;
@@ -156,6 +191,29 @@ interface SwapConfigurationProps {
 }
 declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
+interface SwapProgressViewHeaderProps {
+    title: string;
+    description: string;
+}
+declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }: {
+    steps: SwapStep[];
+    currentStepCount: number;
+}): react_jsx_runtime.JSX.Element;
+
+interface TokenPairProps {
+    firstToken: {
+        imageUrl: string;
+        bgColor: string;
+    };
+    secondToken: {
+        imageUrl: string;
+        bgColor: string;
+    };
+}
+declare function TokenPair({ firstToken, secondToken }: TokenPairProps): react_jsx_runtime.JSX.Element;
+
 interface WalletAddressProps {
     ens?: string;
     address?: string;
@@ -164,10 +222,11 @@ declare function WalletAddress({ address, ens }: WalletAddressProps): react_jsx_
 
 interface DropdownMenuItemProps {
     label: string;
+    labelClassName?: string;
     imageUrl?: string;
     icon?: React.ReactNode;
 }
-declare function DropdownMenuItem({ label, imageUrl, icon, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
 
 interface HistoryItemProps {
     firstImageUrl: string;
@@ -212,6 +271,29 @@ interface SectionTitleProps {
 }
 declare function SectionTitle({ title, icon, accessory, actionIcon, className, }: SectionTitleProps): react_jsx_runtime.JSX.Element;
 
+interface SettingsItemProps {
+    icon: React.ReactNode;
+    label: string;
+    controls?: React.ReactNode;
+    transparentControls?: boolean;
+    showHelpIcon?: boolean;
+}
+declare function SettingsItem({ icon, label, controls, transparentControls, showHelpIcon, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
+
+interface SwapDetailListItemProps {
+    label: string;
+    icon: React.ReactNode;
+    detail?: React.ReactNode;
+}
+declare function SwapDetailListItem({ label, detail, icon, }: SwapDetailListItemProps): react_jsx_runtime.JSX.Element;
+
+interface SwapStepItemProps {
+    descriptionBlocks: SwapStepDescriptionBlock[];
+    chipContent: React.ReactNode;
+    showStepSeparator?: boolean;
+}
+declare function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
+
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: string | undefined;
     size: TextSize;
@@ -268,9 +350,20 @@ interface ConfigTheme {
     'accent-gold': string;
 }
 
-declare function SquidConfigProvider({ theme, children, }: {
-    theme?: ConfigTheme;
+declare function SquidConfigProvider({ theme, children, themeType, }: {
+    theme: ConfigTheme;
     children?: React.ReactNode;
+    themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;
 
-export { AddressButton, ArrowButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, Dropdown, DropdownMenuItem, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SquidConfigProvider, SwapConfiguration, Switch, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, WalletAddress };
+declare function useModal(props?: {
+    initialIsModalOpen?: boolean;
+}): {
+    isModalOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+    modalRef: React.RefObject<HTMLDivElement>;
+    openModalButtonRef: React.RefObject<HTMLButtonElement>;
+};
+
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenuItem, type DropdownMenuItemProps, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, WalletAddress, useModal };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -20,7 +20,8 @@
     "release:pre": "release-it --preRelease=beta",
     "release:ci": "release-it --ci",
     "release:dry": "release-it --dry-run",
-    "build": "yarn build-tailwind && rollup -c && cp src/styles/compiled-tailwind.css dist/index.css"
+    "build": "yarn build-tailwind && rollup -c && cp src/styles/compiled-tailwind.css dist/index.css && yarn copy-fonts",
+    "copy-fonts": "cp -r src/styles/fonts dist/fonts"
   },
   "dependencies": {
     "clsx": "2.1.0",

package/dist/cjs/types/components/buttons/Dropdown.d.ts

@@ -1,10 +0,0 @@
-interface DropdownProps {
-    tokenImageUrl?: string;
-    chainImageUrl?: string;
-    tokenSymbol?: string;
-    chainBgColor?: string;
-    tokenBgColor?: string;
-    tokenTextColor?: string;
-}
-export declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/types/components/buttons/Dropdown.d.ts

@@ -1,10 +0,0 @@
-interface DropdownProps {
-    tokenImageUrl?: string;
-    chainImageUrl?: string;
-    tokenSymbol?: string;
-    chainBgColor?: string;
-    tokenBgColor?: string;
-    tokenTextColor?: string;
-}
-export declare function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor, tokenBgColor, tokenTextColor, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
-export {};