import * as React from 'react';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
import 'react/jsx-runtime';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';

/**
 * Image item configuration for the blur vignette grid.
 */
interface BlurVignetteGridImage {
    /**
     * Image source URL
     */
    src: string;
    /**
     * Alt text for accessibility
     */
    alt: string;
    /**
     * Number of columns to span (1-5)
     */
    colSpan: number;
    /**
     * Height class for the image (e.g., "h-82", "h-100")
     */
    height: string;
    /**
     * Additional CSS classes for the image
     */
    className?: string;
}
/**
 * Configuration for the blur vignette effect.
 */
interface BlurVignetteConfig {
    /**
     * Border radius of the vignette
     * @default "24px"
     */
    radius?: string;
    /**
     * Inset distance from edges
     * @default "10px"
     */
    inset?: string;
    /**
     * Length of the blur transition
     * @default "100px"
     */
    transitionLength?: string;
    /**
     * Blur intensity
     * @default "3px"
     */
    blur?: string;
}
interface BlurVignetteGridProps {
    /**
     * 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;
    /**
     * Array of images to display in the grid
     */
    images?: BlurVignetteGridImage[];
    /**
     * Custom slot for rendering images (overrides images array)
     */
    imagesSlot?: React.ReactNode;
    /**
     * Configuration for the blur vignette effect
     */
    vignetteConfig?: BlurVignetteConfig;
    /**
     * Number of grid columns
     * @default 5
     */
    gridColumns?: number;
    /**
     * Gap between grid items
     * @default "gap-4"
     */
    gridGap?: string;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the grid container
     */
    gridClassName?: string;
    /**
     * Additional CSS classes for each grid item
     */
    itemClassName?: string;
    /**
     * Additional CSS classes for each image
     */
    imageClassName?: string;
    /**
     * 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;
    /**
     * Additional CSS classes for the container
     */
    containerClassName?: string;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * 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" }
 *   ]}
 *   vignetteConfig={{ radius: "24px", blur: "3px" }}
 * />
 * ```
 */
declare function BlurVignetteGrid({ sectionId, title, description, titleClassName, descriptionClassName, images, imagesSlot, vignetteConfig, containerClassName, gridColumns, gridGap, className, gridClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: BlurVignetteGridProps): React.JSX.Element;

export { BlurVignetteGrid, type BlurVignetteGridImage, type BlurVignetteGridProps };
