@unifold/ui-react 0.1.20 → 0.1.21

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Wallet, AutoSwapResponse, FiatCurrency, ExecutionStatus, FeaturedToken, PaymentNetwork } from '@unifold/core';
+import { AutoSwapResponse, Wallet, FiatCurrency, ExecutionStatus, FeaturedToken, PaymentNetwork } from '@unifold/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
@@ -16,10 +16,12 @@ interface DepositModalProps {
     modalTitle?: string;
     destinationTokenSymbol?: string;
     recipientAddress?: string;
-    destinationChainType?: "ethereum" | "solana" | "bitcoin";
+    destinationChainType?: "ethereum" | "solana" | "bitcoin" | "algorand";
     destinationChainId?: string;
     destinationTokenAddress?: string;
     hideDepositTracker?: boolean;
+    /** Input variant for Transfer Crypto view: "single_input" or "double_input" (default) */
+    transferInputVariant?: "single_input" | "double_input";
     onDepositSuccess?: (data: {
         message: string;
         transaction?: unknown;
@@ -32,7 +34,7 @@ interface DepositModalProps {
     }) => void;
     theme?: "light" | "dark" | "auto";
 }
-declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, hideDepositTracker, onDepositSuccess, onDepositError, theme, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, hideDepositTracker, transferInputVariant, onDepositSuccess, onDepositError, theme, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;
@@ -46,15 +48,14 @@ interface DepositHeaderProps {
 }
 declare function DepositHeader({ title, showBack, showClose, onBack, onClose, badge, }: DepositHeaderProps): react_jsx_runtime.JSX.Element;
 
-interface TransferCryptoProps {
+interface TransferCryptoSingleInputProps {
     userId: string;
     publishableKey: string;
     recipientAddress?: string;
-    destinationChainType?: "ethereum" | "solana" | "bitcoin";
+    destinationChainType?: "ethereum" | "solana" | "bitcoin" | "algorand";
     destinationChainId?: string;
     destinationTokenAddress?: string;
-    copyButtonMode?: "compact" | "fullWidth";
-    onExecutionsChange?: (executions: any[]) => void;
+    onExecutionsChange?: (executions: AutoSwapResponse[]) => void;
     onDepositSuccess?: (data: {
         message: string;
         transaction?: unknown;
@@ -67,29 +68,15 @@ interface TransferCryptoProps {
     }) => void;
     wallets?: Wallet[];
 }
-declare function TransferCrypto(props: TransferCryptoProps): react_jsx_runtime.JSX.Element;
+declare function TransferCryptoSingleInput({ userId, publishableKey, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, onExecutionsChange, onDepositSuccess, onDepositError, wallets: externalWallets, }: TransferCryptoSingleInputProps): react_jsx_runtime.JSX.Element;
 
-interface TransferCrypto2Props {
+interface TransferCryptoDoubleInputProps {
     userId: string;
     publishableKey: string;
     recipientAddress?: string;
+    destinationChainType?: "ethereum" | "solana" | "bitcoin" | "algorand";
     destinationChainId?: string;
     destinationTokenAddress?: string;
-    copyButtonMode?: "compact" | "fullWidth";
-    onExecutionsChange?: (executions: any[]) => void;
-}
-declare function TransferCrypto2(props: TransferCrypto2Props): react_jsx_runtime.JSX.Element;
-
-type LayoutVariant = "horizontal" | "vertical";
-interface TransferCryptoBaseProps {
-    userId: string;
-    publishableKey: string;
-    recipientAddress?: string;
-    destinationChainType?: "ethereum" | "solana" | "bitcoin";
-    destinationChainId?: string;
-    destinationTokenAddress?: string;
-    layoutVariant?: LayoutVariant;
-    showDetailedDropdowns?: boolean;
     onExecutionsChange?: (executions: AutoSwapResponse[]) => void;
     onDepositSuccess?: (data: {
         message: string;
@@ -103,7 +90,7 @@ interface TransferCryptoBaseProps {
     }) => void;
     wallets?: Wallet[];
 }
-declare function TransferCryptoBase({ userId, publishableKey, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, layoutVariant, showDetailedDropdowns, onExecutionsChange, onDepositSuccess, onDepositError, wallets: externalWallets, }: TransferCryptoBaseProps): react_jsx_runtime.JSX.Element;
+declare function TransferCryptoDoubleInput({ userId, publishableKey, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, onExecutionsChange, onDepositSuccess, onDepositError, wallets: externalWallets, }: TransferCryptoDoubleInputProps): react_jsx_runtime.JSX.Element;
 
 interface BuyWithCardProps {
     userId: string;
@@ -114,7 +101,7 @@ interface BuyWithCardProps {
     accentColor?: string;
     destinationTokenSymbol?: string;
     recipientAddress?: string;
-    destinationChainType?: "ethereum" | "solana" | "bitcoin";
+    destinationChainType?: "ethereum" | "solana" | "bitcoin" | "algorand";
     destinationChainId?: string;
     destinationTokenAddress?: string;
     onDepositSuccess?: (data: {
@@ -131,7 +118,8 @@ interface BuyWithCardProps {
     wallets?: Wallet[];
     assetCdnUrl?: string;
 }
-declare function BuyWithCard({ userId, publishableKey, view: externalView, onViewChange, maxAmountUsd, accentColor, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, themeClass, wallets: externalWallets, assetCdnUrl, }: BuyWithCardProps): react_jsx_runtime.JSX.Element;
+declare function BuyWithCard({ userId, publishableKey, view: externalView, onViewChange, maxAmountUsd, accentColor, // Keep prop for backward compatibility but don't use default
+destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, onDepositSuccess, onDepositError, themeClass, wallets: externalWallets, assetCdnUrl, }: BuyWithCardProps): react_jsx_runtime.JSX.Element;
 
 interface CurrencyModalProps {
     open: boolean;
@@ -231,7 +219,7 @@ declare function CurrencyListSection({ title, currencies, selectedCurrency, onSe
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -310,15 +298,257 @@ interface AllowedCountryResult {
  */
 declare function useAllowedCountry(publishableKey?: string): AllowedCountryResult;
 
+/**
+ * Unifold color palette for React (Web)
+ * Matches the React Native theme colors
+ */
+declare const defaultColors: {
+    light: {
+        background: string;
+        card: string;
+        cardHover: string;
+        foreground: string;
+        foregroundMuted: string;
+        foregroundSubtle: string;
+        border: string;
+        borderSecondary: string;
+        primary: string;
+        primaryForeground: string;
+        success: string;
+        successBackground: string;
+        warning: string;
+        warningBackground: string;
+        error: string;
+        errorBackground: string;
+        overlay: string;
+    };
+    dark: {
+        background: string;
+        card: string;
+        cardHover: string;
+        foreground: string;
+        foregroundMuted: string;
+        foregroundSubtle: string;
+        border: string;
+        borderSecondary: string;
+        primary: string;
+        primaryForeground: string;
+        success: string;
+        successBackground: string;
+        warning: string;
+        warningBackground: string;
+        error: string;
+        errorBackground: string;
+        overlay: string;
+    };
+};
+declare const colors: {
+    light: {
+        background: string;
+        card: string;
+        cardHover: string;
+        foreground: string;
+        foregroundMuted: string;
+        foregroundSubtle: string;
+        border: string;
+        borderSecondary: string;
+        primary: string;
+        primaryForeground: string;
+        success: string;
+        successBackground: string;
+        warning: string;
+        warningBackground: string;
+        error: string;
+        errorBackground: string;
+        overlay: string;
+    };
+    dark: {
+        background: string;
+        card: string;
+        cardHover: string;
+        foreground: string;
+        foregroundMuted: string;
+        foregroundSubtle: string;
+        border: string;
+        borderSecondary: string;
+        primary: string;
+        primaryForeground: string;
+        success: string;
+        successBackground: string;
+        warning: string;
+        warningBackground: string;
+        error: string;
+        errorBackground: string;
+        overlay: string;
+    };
+};
+type ThemeColors = typeof defaultColors.light;
+type ThemeMode = "light" | "dark";
+/** Partial theme colors for customization */
+type CustomThemeColors = Partial<ThemeColors>;
+/** Theme customization options */
+interface ThemeConfig {
+    /** Override colors for light mode */
+    light?: CustomThemeColors;
+    /** Override colors for dark mode */
+    dark?: CustomThemeColors;
+}
+/** Font configuration */
+interface FontConfig {
+    /** Regular weight font family */
+    regular?: string;
+    /** Medium weight font family */
+    medium?: string;
+    /** Semi-bold weight font family */
+    semibold?: string;
+    /** Bold weight font family */
+    bold?: string;
+}
+/** Header component tokens */
+interface HeaderTokens {
+    titleColor: string;
+    buttonColor: string;
+}
+/** Card/button component tokens */
+interface CardTokens {
+    backgroundColor: string;
+    titleColor: string;
+    subtitleColor: string;
+    labelColor: string;
+    headerColor: string;
+    labelRightColor: string;
+    labelHighlightRightColor: string;
+    textRightColor: string;
+    subtextRightColor: string;
+    rowLeftLabel: string;
+    rowRightLabel: string;
+    iconColor: string;
+    iconBackgroundColor: string;
+    actionColor: string;
+    actionIcon: string;
+    descriptionColor: string;
+}
+/** Input component tokens */
+interface InputTokens {
+    backgroundColor: string;
+    textColor: string;
+    placeholderColor: string;
+    borderColor: string;
+}
+/** Button component tokens */
+interface ButtonTokens {
+    primaryBackground: string;
+    primaryText: string;
+    secondaryBackground: string;
+    secondaryText: string;
+}
+/** Container/status display component tokens */
+interface ContainerTokens {
+    titleColor: string;
+    subtitleColor: string;
+    actionColor: string;
+    actionTitle: string;
+    buttonColor: string;
+    buttonTitleColor: string;
+    iconBackgroundColor: string;
+    iconColor: string;
+}
+/** Search component tokens */
+interface SearchTokens {
+    backgroundColor: string;
+    inputColor: string;
+    placeholderColor: string;
+}
+/** List component tokens */
+interface ListTokens {
+    titleSectionColor: string;
+}
+/** All resolved component tokens */
+interface ComponentTokens {
+    header: HeaderTokens;
+    card: CardTokens;
+    input: InputTokens;
+    button: ButtonTokens;
+    container: ContainerTokens;
+    search: SearchTokens;
+    list: ListTokens;
+}
+/** Per-component overrides structure */
+interface ComponentOverrides {
+    header?: Partial<HeaderTokens>;
+    card?: Partial<CardTokens>;
+    input?: Partial<InputTokens>;
+    button?: Partial<ButtonTokens>;
+    container?: Partial<ContainerTokens>;
+    search?: Partial<SearchTokens>;
+    list?: Partial<ListTokens>;
+}
+/**
+ * User-provided component overrides (all optional)
+ * Can be flat (applies to both modes) or have light/dark variants
+ */
+interface ComponentConfig extends ComponentOverrides {
+    /** Light mode specific overrides */
+    light?: ComponentOverrides;
+    /** Dark mode specific overrides */
+    dark?: ComponentOverrides;
+}
+/**
+ * Resolve component tokens from base colors + optional overrides
+ *
+ * Override priority (highest wins):
+ * 1. Mode-specific overrides (config.light or config.dark)
+ * 2. Flat overrides (config.header, config.card, etc.)
+ * 3. Base color defaults (semantic colors)
+ */
+declare function resolveComponentTokens(baseColors: ThemeColors, overrides?: ComponentConfig, mode?: ThemeMode): ComponentTokens;
+declare function getColors(mode: ThemeMode): ThemeColors;
+/**
+ * Merge custom colors with default colors
+ */
+declare function mergeColors(mode: ThemeMode, customColors?: CustomThemeColors, accentColor?: string): ThemeColors;
+
+/** Resolved font families for use in styles */
+interface ResolvedFonts {
+    regular: string | undefined;
+    medium: string | undefined;
+    semibold: string | undefined;
+    bold: string | undefined;
+}
 interface ThemeContextValue {
+    /** Legacy theme class (uf-dark or empty string) for backward compatibility */
     themeClass: string;
+    /** Current theme mode */
+    mode: ThemeMode;
+    /** Resolved theme colors */
+    colors: ThemeColors;
+    /** Resolved font families */
+    fonts: ResolvedFonts;
+    /** Component-specific design tokens */
+    components: ComponentTokens;
+    /** Whether dark mode is active */
+    isDark: boolean;
 }
-declare function ThemeProvider({ children, themeClass, }: {
+interface ThemeProviderProps {
     children: React.ReactNode;
-    themeClass: string;
-}): react_jsx_runtime.JSX.Element;
+    /** Force a specific theme mode, or 'auto' to use system preference */
+    mode?: ThemeMode | "auto";
+    /** Simple accent/primary color override (applies to both light and dark) */
+    accentColor?: string;
+    /** Full theme customization per mode */
+    theme?: ThemeConfig;
+    /** Single font family for all weights */
+    fontFamily?: string;
+    /** Granular font family configuration */
+    fonts?: FontConfig;
+    /** Component-specific token overrides (optional, falls back to base colors) */
+    components?: ComponentConfig;
+    /** Legacy themeClass prop for backward compatibility */
+    themeClass?: string;
+}
+declare function ThemeProvider({ children, mode, accentColor, theme, fontFamily, fonts: fontConfig, components: componentConfig, themeClass: legacyThemeClass, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AllowedCountryResult, Button, type ButtonProps, BuyWithCard, CurrencyListItem, CurrencyListSection, CurrencyModal, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCrypto, TransferCrypto2, TransferCryptoBase, TransferCryptoButton, buttonVariants, cn, useAllowedCountry, useTheme };
+export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, cn, colors, defaultColors, getColors, mergeColors, resolveComponentTokens, useAllowedCountry, useTheme };