import { ReactNode } from "react";
interface ContentLoadingContainerProps {
    /**
     * Whether the content is currently loading
     */
    isLoading: boolean;
    /**
     * The actual content to display when not loading
     */
    children: ReactNode;
    /**
     * The skeleton component to show during loading
     */
    skeletonComponent: ReactNode;
    /**
     * Additional CSS classes
     */
    className?: string;
    /**
     * Minimum height to prevent layout jumps
     */
    minHeight?: string;
    /**
     * Loading overlay opacity (0-1)
     */
    loadingOpacity?: number;
    /**
     * Transition duration in milliseconds
     */
    transitionDuration?: number;
}
/**
 * ContentLoadingContainer
 *
 * A unified loading container that wraps card grids and manages loading states
 * while keeping UI controls persistent. This component:
 *
 * - Shows skeleton loading only in content area
 * - Maintains consistent layout dimensions during loading
 * - Provides smooth transitions between loading and loaded states
 * - Prevents layout jumps by preserving container height
 * - Supports customizable skeleton components for different content types
 *
 * Usage:
 * ```tsx
 * <ContentLoadingContainer
 *   isLoading={isLoadingVendors}
 *   skeletonComponent={<CardSkeletonGrid variant="vendor" count={12} />}
 *   minHeight="min-h-[800px]"
 * >
 *   <VendorGrid vendors={vendors} />
 * </ContentLoadingContainer>
 * ```
 */
export declare function ContentLoadingContainer({ isLoading, children, skeletonComponent, className, minHeight, loadingOpacity, transitionDuration, }: ContentLoadingContainerProps): import("react").JSX.Element;
/**
 * Hook for managing content loading states with common patterns
 */
export declare function useContentLoading(isLoading: boolean): {
    containerProps: {
        'aria-busy': boolean;
        'data-loading': boolean;
    };
    getSkeletonCount: (contentType: "vendor" | "blog") => 12 | 6;
    getMinHeight: (contentType: "vendor" | "blog") => "min-h-[300px] md:min-h-[800px]" | "min-h-[400px] md:min-h-[900px]";
};
export {};
//# sourceMappingURL=content-loading-container.d.ts.map