import * as React from 'react';
import { P as PatternName } from './pattern-background-a7gKHzHy.js';
import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
import 'react/jsx-runtime';
import 'class-variance-authority';
import './button-variants-lRElsmTc.js';
import 'class-variance-authority/types';

/**
 * Image configuration for the gallery section.
 * Supports featured images that span full height and secondary images in a stacked layout.
 */
interface HeroFloatingImagesImage {
    /**
     * Image source URL
     */
    src: string;
    /**
     * Alt text for accessibility
     */
    alt: string;
    /**
     * Whether this is a featured image (displays larger/taller in the gallery)
     */
    featured?: boolean;
    /**
     * Additional CSS classes for the image
     */
    className?: string;
}
interface HeroFloatingImagesProps {
    /**
     * Flexible content slot for the left side of the hero.
     * Renders any content the application/AI builder provides (badges, headings, descriptions, actions, etc.)
     * This allows maximum flexibility without prescribing specific content structure.
     */
    children?: React.ReactNode;
    /**
     * Array of images for the gallery section.
     * First image with `featured: true` (or first image if none marked) displays as the tall featured image.
     * Remaining images display in a stacked layout beside it.
     */
    images?: HeroFloatingImagesImage[];
    /**
     * Custom slot for rendering the gallery (overrides images array).
     * Use when you need complete control over the gallery layout.
     */
    imagesSlot?: React.ReactNode;
    /**
     * Icon name for the zoom indicator on gallery images.
     * Uses DynamicIcon format: "prefix/icon-name"
     * @default "lucide/zoom-in"
     */
    zoomIconName?: string;
    /**
     * Whether to enable lightbox functionality for gallery images.
     * When enabled, clicking an image opens it in a fullscreen lightbox.
     * @default true
     */
    enableLightbox?: boolean;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name
     */
    pattern?: PatternName;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Additional CSS classes for the section wrapper
     */
    className?: string;
    /**
     * Additional CSS classes for the main grid container
     */
    gridClassName?: string;
    /**
     * Additional CSS classes for the content area (left side)
     */
    contentClassName?: string;
    /**
     * Additional CSS classes for the gallery container (right side)
     */
    galleryClassName?: string;
    /**
     * Additional CSS classes for the featured image wrapper
     */
    featuredImageClassName?: string;
    /**
     * Additional CSS classes for secondary image wrappers
     */
    secondaryImageClassName?: string;
    /**
     * Additional CSS classes for all images
     */
    imageClassName?: string;
    /**
     * Additional CSS classes for the zoom indicator overlay
     */
    zoomIndicatorClassName?: string;
    /**
     * OptixFlow image optimization configuration
     */
    optixFlowConfig?: OptixFlowConfig;
}
/**
 * HeroFloatingImages - A split-layout hero with flexible content and an interactive image gallery.
 *
 * Features a two-column layout: content on the left (fully customizable via children prop)
 * and a gallery on the right with a featured tall image and stacked secondary images.
 * Each image has a hover effect with zoom indicator and opens in a lightbox when clicked.
 *
 * The component uses the children prop pattern for maximum flexibility - the application
 * or AI builder can render any content structure without being constrained to specific
 * heading/description/badge props.
 *
 * @example
 * ```tsx
 * <HeroFloatingImages
 *   images={[
 *     { src: "/featured.jpg", alt: "Featured work", featured: true },
 *     { src: "/work-1.jpg", alt: "Project 1" },
 *     { src: "/work-2.jpg", alt: "Project 2" },
 *   ]}
 * >
 *   <Badge className="mb-6 w-fit" variant="secondary">Featured Work</Badge>
 *   <h1 className="mb-6 text-4xl font-bold">Your Headline Here</h1>
 *   <p className="mb-8 text-lg text-muted-foreground">Your description...</p>
 *   <div className="flex gap-4">
 *     <Pressable href="/portfolio" variant="default" size="lg" asButton>
 *       View Portfolio
 *     </Pressable>
 *   </div>
 * </HeroFloatingImages>
 * ```
 */
declare function HeroFloatingImages({ children, images, imagesSlot, zoomIconName, enableLightbox, background, spacing, pattern, patternOpacity, className, gridClassName, contentClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, }: HeroFloatingImagesProps): React.JSX.Element;

export { HeroFloatingImages, type HeroFloatingImagesProps };
