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

interface MasonryMotionGridImage {
    src: string;
    alt: string;
    height: string;
}
interface MasonryMotionGridProps {
    column1Images?: MasonryMotionGridImage[];
    column2Images?: MasonryMotionGridImage[];
    column3Images?: MasonryMotionGridImage[];
    column4Images?: MasonryMotionGridImage[];
    className?: string;
    /** Optional Optix Flow configuration for @page-speed/img */
    optixFlowConfig?: {
        apiKey: string;
        compression?: number;
    };
}
/**
 * MasonryMotionGrid displays images in an animated masonry grid layout.
 *
 * Features a 4-column (2 on mobile) masonry grid with staggered image heights.
 * Each image animates into view with scale, opacity, and vertical movement
 * using Framer Motion's whileInView trigger. Alternating columns animate from
 * different directions (up/down) for visual interest. The grid is duplicated
 * below for extended galleries. Ideal for portfolio showcases, photo galleries,
 * or any visual content requiring dynamic presentation.
 *
 * @example
 * ```tsx
 * <MasonryMotionGrid
 *   column1Images={[
 *     { src: "/images/photo-1.jpg", alt: "Photo 1", height: "23rem" }
 *   ]}
 *   column2Images={[
 *     { src: "/images/photo-2.jpg", alt: "Photo 2", height: "13rem" }
 *   ]}
 * />
 * ```
 */
declare function MasonryMotionGrid({ column1Images, column2Images, column3Images, column4Images, className, optixFlowConfig, }: MasonryMotionGridProps): react_jsx_runtime.JSX.Element;

export { MasonryMotionGrid, type MasonryMotionGridImage, type MasonryMotionGridProps };
