import * as React$1 from 'react';
import { ComponentProps, ReactNode } from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { Variants } from 'framer-motion';
import { ClassValue } from 'clsx';

declare function ChevronArrowWithAnim({ className, strokeWidth, isOpen, }: {
    className?: string;
    strokeWidth?: number;
    isOpen?: boolean;
}): React$1.JSX.Element;

/**
 * A reusable close button icon (X mark) styled with TUWA color scheme.
 */
declare const CloseIcon: React$1.ForwardRefExoticComponent<React$1.SVGAttributes<SVGSVGElement> & React$1.RefAttributes<SVGSVGElement>>;

/**
 * Props for the FallbackIcon component.
 */
interface FallbackIconProps {
    /**
     * Whether to show a pulse animation to indicate a loading state.
     * @default false
     */
    animate?: boolean;
    /**
     * Text content to display inside the fallback circle (e.g., "?", "!", or empty).
     * @default ''
     */
    content?: string;
    /**
     * Additional CSS class names to apply to the container.
     */
    className?: string;
}
/**
 * A reusable placeholder component used for Suspense fallbacks (loading)
 * or Error fallbacks (when an icon is missing or fails to load).
 *
 * @param props - {@link FallbackIconProps}
 * @returns The rendered fallback element.
 */
declare const FallbackIcon: ({ animate, content, className }: FallbackIconProps) => React$1.JSX.Element;

/**
 * Props for the GithubFallbackIcon component.
 */
interface GithubFallbackIconProps extends Omit<ComponentProps<'img'>, 'src'> {
    /**
     * Path to the SVG file within the web3icons repository.
     * @example "networks/background/ethereum.svg"
     */
    githubSrc: string;
    /**
     * Optional fill color to apply to the first `<path>` element.
     * Used for testnet/devnet visual differentiation.
     */
    firstPathFill?: string;
}
/**
 * Fetches and displays an SVG icon from the web3icons GitHub repository.
 *
 * Used as a fallback when the bundled `@web3icons/react` library
 * doesn't have a specific icon available.
 *
 * @param props - {@link GithubFallbackIconProps}
 * @returns Loading indicator, the fetched icon, or an error fallback
 */
declare function GithubFallbackIcon({ githubSrc, className, alt, firstPathFill, ...props }: GithubFallbackIconProps): React$1.JSX.Element;

declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
declare const DialogOverlay: {
    ({ className, backdropAnimation }: {
        backdropAnimation?: Variants;
        className?: string;
    }): React$1.JSX.Element;
    displayName: string | undefined;
};
declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
    modalAnimation?: Variants;
    backdropAnimation?: Variants;
} & React$1.RefAttributes<HTMLDivElement>>;
declare const DialogHeader: {
    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
    displayName: string;
};
declare const DialogFooter: {
    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
    displayName: string;
};
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;

interface NetworkIconProps {
    chainId: number | string;
    variant?: 'background' | 'branded' | 'mono';
    className?: string;
}
declare function NetworkIcon({ chainId, variant, className }: NetworkIconProps): React$1.JSX.Element;

declare function StarsBackground({ starsCount }: {
    starsCount?: number;
}): React$1.JSX.Element;

/**
 * Props for the SvgImg component.
 */
interface SvgImgProps extends Omit<ComponentProps<'img'>, 'src' | 'draggable'> {
    /** Base64-encoded SVG data URL */
    src: string;
}
/**
 * Renders an SVG as an isolated `<img>` element.
 *
 * Prevents SVG ID conflicts and disables drag/selection behavior.
 *
 * @param props - {@link SvgImgProps}
 */
declare function SvgImg({ src, alt, ...props }: SvgImgProps): React$1.JSX.Element;

/**
 * Props for the SvgToImg component.
 */
interface SvgToImgProps extends Omit<ComponentProps<'img'>, 'ref' | 'src' | 'children'> {
    /** Child SVG element to render while converting */
    children: (ref: (node: SVGSVGElement | null) => void) => ReactNode;
    /**
     * Unique identifier for the icon. When this changes, the cached image is reset.
     * Prevents showing stale icons when content changes dynamically.
     */
    iconId: string | number;
    /**
     * Optional fill color to apply to the first `<path>` element.
     * Used for testnet/devnet visual differentiation.
     * @example "var(--tuwa-testnet-icons)"
     */
    firstPathFill?: string;
}
/**
 * Converts an SVG element to an `<img>` tag with a base64-encoded data URL.
 *
 * This component solves the problem of duplicate SVG `id` attributes
 * when rendering multiple identical icons on the same page.
 *
 * Uses a render prop pattern to inject a callback ref that captures
 * the SVG immediately when it mounts.
 *
 * @param props - {@link SvgToImgProps}
 * @returns The converted image or the original children while loading
 *
 * @example
 * ```tsx
 * <SvgToImg iconId={chainId} firstPathFill={TESTNET_FILL}>
 *   {(ref) => <NetworkIconLazy ref={ref} chainId={chainId} />}
 * </SvgToImg>
 * ```
 */
declare function SvgToImg({ children, iconId, alt, firstPathFill, ...props }: SvgToImgProps): React$1.JSX.Element;

/**
 * @file This file contains a reusable close button component, designed primarily for toast notifications.
 */
/**
 * Defines the props for the ToastCloseButton component.
 */
type ToastCloseButtonProps = {
    /**
     * The function to call when the button is clicked. This is typically provided by the
     * toast library (e.g., react-toastify) to dismiss the notification.
     */
    closeToast?: (e: React.MouseEvent<HTMLElement>) => void;
    /**
     * Optional custom aria-label for accessibility.
     */
    ariaLabel?: string;
    /**
     * Optional custom title for the button tooltip.
     */
    title?: string;
    /**
     * Optional custom className for the button container.
     */
    className?: string;
    /**
     * Optional custom className for the close icon SVG.
     */
    iconClassName?: string;
};
/**
 * A simple, styled close button component ('X' icon) intended for use within toast notifications.
 * It uses theme-aware CSS variables for styling and i18n labels for accessibility.
 */
declare function ToastCloseButton({ closeToast, ariaLabel, title, className, iconClassName, }: ToastCloseButtonProps): React$1.JSX.Element;

/**
 * Props for the WalletIcon component.
 */
interface WalletIconProps {
    /**
     * The unique identifier of the wallet.
     * Examples: 'metamask', 'phantom', 'coinbase', 'walletconnect'.
     */
    walletName: string;
    /**
     * Visual style variant for the icon.
     * @default 'background'
     */
    variant?: 'background' | 'branded' | 'mono';
    /** Additional CSS class names. */
    className?: string;
}
/**
 * Renders a wallet icon based on the wallet name.
 *
 * It handles logic for:
 * 1. Rendering a custom SVG for 'impersonatedwallet' (Watch mode).
 * 2. Normalizing IDs for common wallets (e.g. 'walletconnect' -> 'wallet-connect').
 * 3. Lazy loading other icons from @web3icons/react.
 *
 * @param props - {@link WalletIconProps}
 * @returns The wallet icon or a fallback UI.
 */
declare function WalletIcon({ walletName, variant, className }: WalletIconProps): React$1.JSX.Element;

/**
 * @file This file contains a custom React hook for copying text to the clipboard.
 */
/**
 * A custom React hook that provides functionality to copy text to the clipboard.
 * It also manages a "copied" state with a timeout for user feedback.
 *
 * @param {number} [timeout=2000] - The duration in milliseconds to keep the `isCopied` state as true.
 * @returns {{
 * isCopied: boolean;
 * copy: (text: string) => Promise<void>;
 * error: Error | null;
 * }} An object containing the `isCopied` state, the `copy` function, and any potential error.
 *
 * @example
 * const MyComponent = () => {
 * const { isCopied, copy } = useCopyToClipboard();
 * const textToCopy = '0x123...';
 *
 * return (
 * <button onClick={() => copy(textToCopy)}>
 * {isCopied ? 'Copied!' : 'Copy Address'}
 * </button>
 * );
 * }
 */
declare function useCopyToClipboard(timeout?: number): {
    isCopied: boolean;
    copy: (text: string) => Promise<void>;
    error: Error | null;
};

/**
 * A custom hook to detect if a media query matches the current screen dimensions.
 * Handles SSR gracefully.
 * @param {string} query - The media query string (e.g., '(max-width: 767px)').
 * @returns {boolean} Whether the query matches or not.
 */
declare function useMediaQuery(query: string): boolean;

declare const standardButtonClasses = "novacore:cursor-pointer novacore:rounded-[var(--tuwa-rounded-corners)] novacore:bg-[var(--tuwa-standart-button-bg)] novacore:px-3 novacore:py-2 novacore:flex novacore:items-center novacore:gap-1 novacore:text-sm novacore:font-mono novacore:font-semibold novacore:text-[var(--tuwa-text-primary)] novacore:transition-colors novacore:hover:bg-[var(--tuwa-standart-button-hover)] novacore:disabled:cursor-not-allowed novacore:disabled:opacity-50 novacore:min-h-[36px]";

/**
 * @file This file contains a utility function for conditionally merging Tailwind CSS classes.
 */

/**
 * A utility function to conditionally join class names together and resolve
 * conflicting Tailwind CSS classes.
 *
 * It combines the functionality of `clsx` and `tailwind-merge`.
 *
 * @param {...ClassValue[]} inputs - A list of class values to be combined.
 * This can include strings, numbers, objects, arrays, and booleans.
 * @returns {string} The final, merged class name string.
 *
 * @example
 * cn('p-4', 'bg-red-500', { 'font-bold': true }); // => 'p-4 bg-red-500 font-bold'
 * cn('p-2', 'p-4'); // => 'p-4' (tailwind-merge resolves the conflict)
 *
 * @see https://github.com/dcastil/tailwind-merge
 * @see https://github.com/lukeed/clsx
 */
declare function cn(...inputs: ClassValue[]): string;

/**
 * @file This file contains a utility for performing a deep (recursive) merge of two objects.
 */
/**
 * Recursively merges the properties of a source object into a target object.
 * This function creates a new object and does not mutate the original target.
 *
 * @template T - The type of the objects being merged.
 * @param {T} target - The base object.
 * @param {Partial<T>} source - The object with properties to merge into the target.
 * @returns {T} A new object representing the merged result.
 *
 * @example
 * const defaults = { a: 1, b: { c: 2, d: 3 } };
 * const custom = { b: { c: 99 } };
 * const result = deepMerge(defaults, custom);
 * // result will be { a: 1, b: { c: 99, d: 3 } }
 */
declare function deepMerge<T extends object>(target: T, source: Partial<T>): T;

/**
 * Result of chain name resolution.
 */
interface ChainInfo {
    /** Human-readable network name (e.g., "Ethereum", "Solana Devnet") */
    name: string;
    /** Normalized network identifier for icon libraries (e.g., "ethereum", "solana") */
    id: string;
    /** Original chain ID as provided */
    chainId: number | string;
    /** File path for icon resolution */
    filePath: string;
}
/**
 * Retrieves blockchain network information based on its chain ID.
 *
 * Supports both EVM and non-EVM chain identifiers:
 * - **Numeric IDs (EVM):** e.g., `1` → "Ethereum", `137` → "Polygon"
 * - **String IDs (Non-EVM):** e.g., `"solana:devnet"` → "Solana Devnet"
 *
 * For string IDs with environment suffixes (like "solana:devnet"),
 * the suffix is appended to the name if it's a known dev/test environment.
 *
 * @param chainId - Chain identifier (number for EVM, string for non-EVM)
 * @returns Chain information object with name, id, and original chainId
 *
 * @example
 * ```ts
 * // EVM network
 * getChainName(1)
 * // → { name: "Ethereum", id: "ethereum", chainId: 1 }
 *
 * // Solana devnet
 * getChainName("solana:devnet")
 * // → { name: "Solana Devnet", id: "solana", chainId: "solana:devnet" }
 *
 * // Unknown network
 * getChainName(999999)
 * // → { name: "Unknown", id: "unknown", chainId: 999999 }
 * ```
 */
declare function getChainName(chainId: number | string): ChainInfo;

/**
 * Determines if the current chain is a Solana development or test network.
 *
 * It strictly checks if the ID is a string containing 'solana' AND
 * indicates a non-production environment ('devnet' or 'testnet').
 *
 * @param chainId - The chain identifier (e.g., "solana:devnet", 1, "ethereum").
 * @returns {boolean} True only if it is a Solana dev/test chain.
 */
declare function isSolanaDev(chainId: number | string): boolean;

/**
 * @fileoverview Utility function to determine if the current environment supports touch input.
 * This is safe to use in Next.js applications as it checks for the `window` object existence.
 */
/**
 * Determines if the current browsing device supports touch input,
 * while also excluding large screens (typically desktop-sized touch monitors).
 *
 * It checks for:
 * 1. The presence of 'ontouchstart' or navigator.maxTouchPoints > 0 or '(pointer: coarse)'.
 * 2. ONLY returns true if the screen width is less than or equal to the specified threshold (e.g., 1200px).
 *
 * This function is safe for server-side rendering (SSR) environments like Next.js.
 *
 * @param {number} [maxWidth=1200] The maximum screen width (in pixels) for a device to be considered 'touch' (default is 1200).
 * @returns {boolean} Returns true if the environment is determined to support touch input AND is within the width limit, otherwise false.
 */
declare function isTouchDevice(maxWidth?: number): boolean;

/**
 * Resolves a CSS variable to its computed value.
 * Returns the original value if it's not a CSS variable.
 *
 * @param value - Color value, potentially a CSS variable like `var(--my-color)`
 * @returns Resolved color value (e.g., `#ff0000`) or original if not a variable
 */
declare function resolveCssVariable(value: string): string;
/**
 * Modifies the fill attribute of the first `<path>` element in an SVG string.
 * Uses DOMParser for safe XML manipulation.
 * Automatically resolves CSS variables (e.g., `var(--color)`) to their computed values.
 *
 * @param svgString - The original SVG markup
 * @param fillColor - The color to apply (supports CSS variables)
 * @returns Modified SVG string
 */
declare function applyFirstPathFill(svgString: string, fillColor: string): string;
/**
 * Encodes an SVG string to a base64 data URL.
 *
 * @param svgString - The SVG markup
 * @param firstPathFill - Optional fill color to apply to the first path
 * @returns Base64-encoded data URL
 */
declare function svgToBase64(svgString: string, firstPathFill?: string): string;
/**
 * Formats a name string into a GitHub-compatible SVG filename.
 *
 * Converts spaces to hyphens and lowercases the string,
 * then appends the `.svg` extension.
 *
 * @param name - The name to format (e.g., "Wallet Connect", "MetaMask")
 * @returns Formatted filename (e.g., "wallet-connect.svg", "metamask.svg")
 *
 * @example
 * ```ts
 * formatIconNameForGithub("Wallet Connect")
 * // → "wallet-connect.svg"
 *
 * formatIconNameForGithub("MetaMask")
 * // → "metamask.svg"
 *
 * formatIconNameForGithub("coinbase")
 * // → "coinbase.svg"
 * ```
 */
declare const formatIconNameForGithub: (name: string) => string;

/**
 * @file This file contains a utility function for truncating a string with a center ellipsis.
 */
/**
 * Truncates a string by showing a specified number of characters from the start and end,
 * with an ellipsis in the middle. If the string is too short to be truncated, it's returned as is.
 *
 * @param {string} str - The string to truncate.
 * @param {number} from - The number of characters to show from the beginning of the string.
 * @param {number} to - The number of characters to show from the end of the string.
 * @returns {string} The truncated string, or the original string if it's too short.
 *
 * @example
 * const hash = '0x1234567890abcdef1234567890abcdef';
 * textCenterEllipsis(hash, 6, 4); // => "0x1234...cdef"
 *
 * textCenterEllipsis('short', 6, 4); // => "short"
 */
declare function textCenterEllipsis(str: string | undefined | null, from: number, to: number): string;

export { type ChainInfo, ChevronArrowWithAnim, CloseIcon, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, FallbackIcon, type FallbackIconProps, GithubFallbackIcon, NetworkIcon, StarsBackground, SvgImg, type SvgImgProps, SvgToImg, ToastCloseButton, type ToastCloseButtonProps, WalletIcon, applyFirstPathFill, cn, deepMerge, formatIconNameForGithub, getChainName, isSolanaDev, isTouchDevice, resolveCssVariable, standardButtonClasses, svgToBase64, textCenterEllipsis, useCopyToClipboard, useMediaQuery };