import * as React from 'react';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cz9FycbA.js';
import { O as OptixFlowConfig } from './blocks-BJ3CyHu6.js';
import 'react/jsx-runtime';
import 'class-variance-authority';
import './button-variants-lRElsmTc.js';
import 'class-variance-authority/types';
import '@opensite/hooks/usePlatformFromUrl';

/**
 * Image configuration for masonry motion grid.
 */
interface MasonryMotionGridImage {
    /**
     * Image source URL
     */
    src: string;
    /**
     * Alt text for the image
     */
    alt: string;
    /**
     * Height of the image (CSS value)
     */
    height: string;
    /**
     * Additional CSS classes for the image
     */
    className?: string;
}
interface MasonryMotionGridProps {
    /**
     * Main title content
     */
    title?: React.ReactNode;
    /**
     * Description text below title
     */
    description?: React.ReactNode;
    /**
     * Additional CSS classes for the title
     */
    titleClassName?: string;
    /**
     * Additional CSS classes for the description
     */
    descriptionClassName?: string;
    /**
     * Images for column 1
     */
    column1Images?: MasonryMotionGridImage[];
    /**
     * Images for column 2
     */
    column2Images?: MasonryMotionGridImage[];
    /**
     * Images for column 3
     */
    column3Images?: MasonryMotionGridImage[];
    /**
     * Images for column 4
     */
    column4Images?: MasonryMotionGridImage[];
    /**
     * Custom slot for rendering the grid (overrides column images)
     */
    gridSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the grid container
     */
    gridClassName?: string;
    /**
     * Additional CSS classes for each column
     */
    columnClassName?: string;
    /**
     * Additional CSS classes for each image wrapper
     */
    imageWrapperClassName?: string;
    /**
     * Additional CSS classes for each image
     */
    imageClassName?: string;
    /**
     * Animation duration in seconds
     * @default 0.5
     */
    animationDuration?: number;
    /**
     * Animation delay multiplier for staggered effect
     * @default 0.1
     */
    animationDelayMultiplier?: number;
    /**
     * Whether to show the duplicate grid below
     * @default true
     */
    showDuplicateGrid?: boolean;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name or URL
     */
    pattern?: PatternName | undefined;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Additional CSS classes for the pattern overlay
     */
    patternClassName?: string;
    /**
     * OptixFlow image optimization configuration
     */
    optixFlowConfig?: OptixFlowConfig;
}
/**
 * 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({ title, description, titleClassName, descriptionClassName, column1Images, column2Images, column3Images, column4Images, gridSlot, className, gridClassName, columnClassName, imageWrapperClassName, imageClassName, animationDuration, animationDelayMultiplier, showDuplicateGrid, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: MasonryMotionGridProps): React.JSX.Element;

export { MasonryMotionGrid, type MasonryMotionGridImage, type MasonryMotionGridProps };
