import { default as React, ReactNode } from 'react';
/**
 * Loading state
 */
export type LoadingState = 'idle' | 'loading' | 'success' | 'error' | 'timeout';
/**
 * Loading phase for progressive display
 */
export type LoadingPhase = 'initial' | 'spinner' | 'skeleton' | 'message' | 'timeout';
/**
 * Loading config
 */
export interface LoadingConfig {
    /** Minimum display time for loading state (ms) */
    minDisplayTime: number;
    /** Delay before showing spinner (ms) */
    spinnerDelay: number;
    /** Delay before showing skeleton (ms) */
    skeletonDelay: number;
    /** Delay before showing message (ms) */
    messageDelay: number;
    /** Timeout threshold (ms) */
    timeoutThreshold: number;
    /** Enable accessibility announcements */
    announceChanges: boolean;
}
/**
 * Loading context value
 */
export interface LoadingContextValue {
    state: LoadingState;
    phase: LoadingPhase;
    message: string | null;
    progress: number | null;
    error: Error | null;
    startLoading: (message?: string) => void;
    stopLoading: () => void;
    setProgress: (progress: number) => void;
    setError: (error: Error) => void;
    reset: () => void;
}
/**
 * Loading provider props
 */
export interface LoadingProviderProps {
    children: ReactNode;
    config?: Partial<LoadingConfig>;
    onTimeout?: () => void;
    onError?: (error: Error) => void;
}
/**
 * Loading indicator props
 */
export interface LoadingIndicatorProps {
    /** Loading state override */
    loading?: boolean;
    /** Minimum display time */
    minDisplayTime?: number;
    /** Delay before showing */
    delay?: number;
    /** Loading message */
    message?: string;
    /** Show spinner */
    showSpinner?: boolean;
    /** Spinner size */
    size?: 'sm' | 'md' | 'lg';
    /** Custom spinner component */
    spinner?: ReactNode;
    /** Overlay mode */
    overlay?: boolean;
    /** Full screen mode */
    fullScreen?: boolean;
    /** Additional class names */
    className?: string;
}
/**
 * Progressive loader props
 */
export interface ProgressiveLoaderProps {
    /** Loading state */
    loading: boolean;
    /** Error state */
    error?: Error | null;
    /** Success component */
    children: ReactNode;
    /** Initial placeholder */
    initialPlaceholder?: ReactNode;
    /** Spinner placeholder */
    spinnerPlaceholder?: ReactNode;
    /** Skeleton placeholder */
    skeletonPlaceholder?: ReactNode;
    /** Timeout message */
    timeoutMessage?: ReactNode;
    /** Error fallback */
    errorFallback?: (error: Error, retry: () => void) => ReactNode;
    /** Configuration */
    config?: Partial<LoadingConfig>;
    /** Retry function */
    onRetry?: () => void;
}
/**
 * Use loading context
 */
export declare function useLoading(): LoadingContextValue;
/**
 * Use optional loading context (returns null if not in provider)
 */
export declare function useOptionalLoading(): LoadingContextValue | null;
/**
 * Loading state provider
 */
export declare function LoadingProvider({ children, config: configOverride, onTimeout, onError, }: LoadingProviderProps): React.ReactElement;
/**
 * Loading indicator with delay and minimum display time
 */
export declare function LoadingIndicator({ loading, minDisplayTime, delay, message, showSpinner, size, spinner, overlay, fullScreen, className, }: LoadingIndicatorProps): React.ReactElement | null;
/**
 * Progressive loader with phased placeholders
 */
export declare function ProgressiveLoader({ loading, error, children, initialPlaceholder, spinnerPlaceholder, skeletonPlaceholder, timeoutMessage, errorFallback, config: configOverride, onRetry, }: ProgressiveLoaderProps): React.ReactElement;
export interface ProgressBarProps {
    /** Progress value (0-100) */
    value: number;
    /** Show percentage text */
    showPercentage?: boolean;
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
    /** Color variant */
    variant?: 'primary' | 'success' | 'warning' | 'error';
    /** Animated progress */
    animated?: boolean;
    /** Striped pattern */
    striped?: boolean;
    /** Indeterminate state */
    indeterminate?: boolean;
    /** Custom label */
    label?: string;
    /** Additional class names */
    className?: string;
}
/**
 * Progress bar component
 */
export declare function ProgressBar({ value, showPercentage, size, variant, animated, striped, indeterminate, label, className, }: ProgressBarProps): React.ReactElement;
/**
 * Hook for managing async loading state
 */
export declare function useLoadingState(config?: Partial<LoadingConfig>): {
    isLoading: boolean;
    phase: LoadingPhase;
    error: Error | null;
    startLoading: () => void;
    stopLoading: () => void;
    setError: (error: Error) => void;
    reset: () => void;
    wrapAsync: <T>(promise: Promise<T>) => Promise<T>;
};
/**
 * CSS for loading states (include in your stylesheets)
 */
export declare const loadingStateStyles = "\n  .loading-indicator {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n  }\n\n  .loading-indicator--sm { font-size: 0.875rem; }\n  .loading-indicator--md { font-size: 1rem; }\n  .loading-indicator--lg { font-size: 1.25rem; }\n\n  .loading-indicator--overlay {\n    position: absolute;\n    inset: 0;\n    background: rgba(255, 255, 255, 0.8);\n    z-index: 100;\n  }\n\n  .loading-indicator--fullscreen {\n    position: fixed;\n    inset: 0;\n    background: rgba(255, 255, 255, 0.95);\n    z-index: 9999;\n  }\n\n  .loading-spinner {\n    animation: spin 1s linear infinite;\n  }\n\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n\n  .progress-bar {\n    position: relative;\n    width: 100%;\n    background: #e5e7eb;\n    border-radius: 9999px;\n    overflow: hidden;\n  }\n\n  .progress-bar--sm { height: 0.25rem; }\n  .progress-bar--md { height: 0.5rem; }\n  .progress-bar--lg { height: 1rem; }\n\n  .progress-bar__fill {\n    height: 100%;\n    background: currentColor;\n    transition: width 0.3s ease;\n  }\n\n  .progress-bar--primary { color: #3b82f6; }\n  .progress-bar--success { color: #22c55e; }\n  .progress-bar--warning { color: #f59e0b; }\n  .progress-bar--error { color: #ef4444; }\n\n  .progress-bar--indeterminate .progress-bar__fill {\n    width: 30%;\n    animation: indeterminate 1.5s infinite linear;\n  }\n\n  @keyframes indeterminate {\n    0% { transform: translateX(-100%); }\n    100% { transform: translateX(400%); }\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n";