import * as React from 'react';
import { P as PatternName } from './pattern-background-z0e5HB0v.js';
import { SectionBackground, SectionSpacing } from './types.js';
import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
import 'react/jsx-runtime';
import './patternSvgs-c5ZNVoTT.js';
import 'class-variance-authority';
import './button-variants-lRElsmTc.js';
import 'class-variance-authority/types';

/**
 * Item configuration for expandable case study cards.
 */
interface ExpandableCaseStudyItem {
    /**
     * Unique identifier for the item
     */
    id: string;
    /**
     * Title of the case study
     */
    title: 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
     */
    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 {
    /**
     * 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 | string;
    /**
     * 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, company logo,
 * badges, and a title with an arrow icon. Ideal for showcasing portfolio items,
 * case studies, or featured projects with visual emphasis on the selected item.
 *
 * @example
 * ```tsx
 * <ExpandableCaseStudyCards
 *   items={[
 *     {
 *       id: "1",
 *       title: "E-commerce Platform Redesign",
 *       href: "/case-studies/ecommerce",
 *       image: "/images/case-1.jpg",
 *       logo: "/logos/client-1.svg",
 *       company: "TechCorp",
 *       badges: ["E-commerce", "UX Design"]
 *     }
 *   ]}
 * />
 * ```
 */
declare function ExpandableCaseStudyCards({ 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 };
