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

interface BlurVignetteGridImage {
    src: string;
    alt: string;
    colSpan: number;
    height: string;
}
interface BlurVignetteGridProps {
    images?: BlurVignetteGridImage[];
    className?: string;
    /** Optional Optix Flow configuration for @page-speed/img */
    optixFlowConfig?: {
        apiKey: string;
        compression?: number;
    };
}
/**
 * BlurVignetteGrid displays images in a grid with animated blur vignette effect.
 *
 * Features a 5-column grid with varying column spans (2, 3, or 5) and heights.
 * Each image is wrapped in a BlurVignette component that applies a CSS blur
 * mask effect around the edges, which fades out on hover to reveal the full
 * image. Images animate into view with Framer Motion. Ideal for artistic
 * photo galleries, portfolio showcases, or any visual content requiring an
 * elegant, gallery-like presentation.
 *
 * @example
 * ```tsx
 * <BlurVignetteGrid
 *   images={[
 *     { src: "/images/photo-1.jpg", alt: "Photo 1", colSpan: 2, height: "h-82" },
 *     { src: "/images/photo-2.jpg", alt: "Photo 2", colSpan: 3, height: "h-82" }
 *   ]}
 * />
 * ```
 */
declare function BlurVignetteGrid({ images, className, optixFlowConfig, }: BlurVignetteGridProps): react_jsx_runtime.JSX.Element;

export { BlurVignetteGrid, type BlurVignetteGridImage, type BlurVignetteGridProps };
