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

/**
 * Item configuration for expandable case study cards.
 */
interface ExpandableCaseStudyItem {
    /**
     * Unique identifier for the item
     */
    id: string;
    /**
     * Title of the case study
     */
    title: React.ReactNode;
    /**
     * Optional description for the case study
     */
    description?: React.ReactNode;
    /**
     * Link URL for the case study
     */
    href: string;
    /**
     * Background image source URL
     */
    image: string;
    /**
     * Alt text for the background image
     */
    imageAlt?: string;
    /**
     * Company logo source URL (optional)
     */
    logo?: string;
    /**
     * Alt text for the logo
     */
    logoAlt?: string;
    /**
     * Company name
     */
    company?: string;
    /**
     * Array of badge labels
     */
    badges?: React.ReactNode[];
    /**
     * Additional CSS classes for the item
     */
    className?: string;
}
interface ExpandableCaseStudyCardsProps {
    /**
     * Section title (displayed above cards)
     */
    title?: string;
    /**
     * Section description/subtitle (displayed above cards)
     */
    description?: string;
    /**
     * Array of case study items to display
     */
    items?: ExpandableCaseStudyItem[];
    /**
     * Custom slot for rendering items (overrides items array)
     */
    itemsSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the cards container
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for each card
     */
    cardClassName?: string;
    /**
     * Additional CSS classes for each image
     */
    imageClassName?: string;
    /**
     * Additional CSS classes for each logo
     */
    logoClassName?: string;
    /**
     * Additional CSS classes for the badges container
     */
    badgesClassName?: string;
    /**
     * Additional CSS classes for each badge
     */
    badgeClassName?: 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;
}
/**
 * ExpandableCaseStudyCards displays case study cards that expand on hover.
 *
 * Features a horizontal row of cards where the hovered card expands to 60% width
 * while others shrink to 20%. Each card shows a background image, title with optional
 * description, badges, and an arrow icon. Ideal for showcasing portfolio items,
 * case studies, or featured projects with visual emphasis on the selected item.
 *
 * @example
 * ```tsx
 * <ExpandableCaseStudyCards
 *   title="Our Work"
 *   description="Featured case studies"
 *   items={[
 *     {
 *       id: "1",
 *       title: "E-commerce Platform Redesign",
 *       description: "A complete overhaul of the shopping experience",
 *       href: "/case-studies/ecommerce",
 *       image: "/images/case-1.jpg",
 *       badges: ["E-commerce", "UX Design"]
 *     },
 *     {
 *       id: "2",
 *       title: "Mobile App Launch",
 *       description: "Cross-platform development for iOS and Android",
 *       href: "/case-studies/mobile-app",
 *       image: "/images/case-2.jpg",
 *       logo: "/logos/client-2.svg",
 *       company: "TechCorp",
 *       badges: ["Mobile", "React Native"]
 *     }
 *   ]}
 *   background="gray"
 *   spacing="lg"
 * />
 * ```
 */
declare function ExpandableCaseStudyCards({ title, description, items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;

export { ExpandableCaseStudyCards, type ExpandableCaseStudyCardsProps, type ExpandableCaseStudyItem };
