import * as react_jsx_runtime from 'react/jsx-runtime';
import React__default from 'react';

declare const AtomIcon: ({ ...props }: React.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;

interface UnknownImageProps extends React__default.ImgHTMLAttributes<HTMLImageElement> {
    /** The image source URL - can be IPFS, HTTP, or raw hash */
    src: string;
    /** Whether to wrap the image in an anchor link to the source */
    asLink?: boolean;
}
/**
 * An image component that handles various URL formats including IPFS.
 * Automatically converts IPFS URIs and hashes to gateway URLs.
 *
 * @example
 * <UnknownImage src="ipfs://QmHash123" alt="My image" className="w-10 h-10" />
 */
declare const UnknownImage: ({ asLink, src, ...props }: UnknownImageProps) => react_jsx_runtime.JSX.Element | null;

interface LoadingDotsProps {
    /** Duration of opacity transition in ms */
    transitionDuration?: number;
    /** Whether the dots are visible */
    isVisible?: boolean;
    /** Additional CSS classes */
    className?: string;
}
/**
 * Animated loading dots indicator.
 * Shows three dots with a wave animation.
 *
 * @example
 * <LoadingDots isVisible={isLoading} />
 */
declare function LoadingDots({ transitionDuration, isVisible, className, }: LoadingDotsProps): react_jsx_runtime.JSX.Element;

interface IpfsImageProps extends React__default.ImgHTMLAttributes<HTMLImageElement> {
    /** The image source - can be an ipfs:// URI or regular URL */
    src: string;
}
/**
 * An image component that automatically converts IPFS URIs to gateway URLs.
 *
 * @example
 * <IpfsImage src="ipfs://QmHash123" alt="IPFS image" />
 */
declare const IpfsImage: ({ src, ...props }: IpfsImageProps) => react_jsx_runtime.JSX.Element;

interface TornadoGraphDataPoint {
    /** The range identifier/name */
    name: number;
    /** Vault balance for this range */
    vaultBalance?: number;
    /** Counter vault balance for this range */
    counterVaultBalance?: number;
    /** Aggregate vault balance (positive side) */
    aggregateVaultBalance: number;
    /** Aggregate counter vault balance (negative side) */
    aggregateCounterVaultBalance: number;
}
interface TriplePositionsTornadoMinGraphProps {
    /** Pre-formatted data for the tornado chart */
    data: TornadoGraphDataPoint[];
    /** Color for the "FOR" (vault) bars */
    forColor?: string;
    /** Color for the "AGAINST" (counter vault) bars */
    againstColor?: string;
    /** Additional className for the container */
    className?: string;
}
/**
 * A minimal tornado/butterfly chart for displaying triple position distributions.
 * Shows FOR positions (green) on the right and AGAINST positions (red) on the left.
 *
 * @example
 * <TriplePositionsTornadoMinGraph
 *   data={formattedRanges}
 *   forColor="#31ad31"
 *   againstColor="#bc4535"
 * />
 */
declare const TriplePositionsTornadoMinGraph: ({ data, forColor, againstColor, className, }: TriplePositionsTornadoMinGraphProps) => react_jsx_runtime.JSX.Element | null;

interface TripleAreaChartDataPoint {
    /** The x-axis value (typically position value) */
    xValue: number;
    /** Vault (FOR) position value */
    vault?: number;
    /** Counter vault (AGAINST) position value */
    counterVault?: number;
}
interface TripleAreaChartProps {
    /** Pre-formatted chart data points */
    chartData: TripleAreaChartDataPoint[];
    /** Display variant - 'min' hides axes/grid, 'max' shows full chart */
    variant?: 'min' | 'max';
    /** Color for vault (FOR) area */
    vaultColor?: string;
    /** Color for counter vault (AGAINST) area */
    counterVaultColor?: string;
}
/**
 * An area chart for visualizing triple position distributions.
 * Shows vault (FOR) positions on positive side and counter vault (AGAINST) on negative.
 *
 * @example
 * <TripleAreaChart
 *   chartData={formattedPositions}
 *   variant="min"
 * />
 */
declare const TripleAreaChart: ({ chartData, variant, vaultColor, counterVaultColor, }: TripleAreaChartProps) => react_jsx_runtime.JSX.Element;

interface ErrorBannerProps {
    /** The error message to display */
    error: string;
    /** Optional HTTP status code */
    code?: number;
    /** Additional CSS classes */
    className?: string;
}
/**
 * A simple error banner component for displaying error messages.
 * Centered layout with large heading and subtitle.
 *
 * @example
 * <ErrorBanner error="Page not found" code={404} />
 */
declare const ErrorBanner: ({ error, code, className }: ErrorBannerProps) => react_jsx_runtime.JSX.Element;

export { AtomIcon, ErrorBanner, type ErrorBannerProps, IpfsImage, type IpfsImageProps, LoadingDots, type LoadingDotsProps, type TornadoGraphDataPoint, TripleAreaChart, type TripleAreaChartDataPoint, type TripleAreaChartProps, TriplePositionsTornadoMinGraph, type TriplePositionsTornadoMinGraphProps, UnknownImage, type UnknownImageProps };