import * as react_jsx_runtime from 'react/jsx-runtime';

/**
 * A stat with icon, value, label, and optional avatars
 */
interface CardGroupStat {
    /**
     * Icon name in format: prefix/name (e.g., "lucide/users")
     */
    icon: string;
    /**
     * The stat value (e.g., "2,000+", "4.9/5", "99.9%")
     */
    value: string;
    /**
     * The label for the stat
     */
    label: string;
    /**
     * Whether to show avatar stack
     */
    showAvatars?: boolean;
}
/**
 * Props for the StatsCardGroup component
 */
interface StatsCardGroupProps {
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Array of stats to display
     */
    stats?: CardGroupStat[];
    /**
     * Avatar images to display in the stack
     */
    avatars?: Array<{
        src: string;
        alt: string;
    }>;
    /**
     * Optional configuration for image optimization
     */
    optixFlowConfig?: {
        apiKey: string;
        compression?: number;
    };
}
/**
 * StatsCardGroup - A compact stats display featuring three metrics in a bordered
 * card with icons and optional avatar stacks. Each stat shows an icon, large value,
 * and label. The first stat can include a stacked avatar group to represent users
 * or customers. Ideal for social proof sections, trust indicators, or compact
 * dashboard summaries.
 *
 * @example
 * ```tsx
 * <StatsCardGroup
 *   stats={[
 *     { icon: "lucide/users", value: "2,000+", label: "Happy Customers", showAvatars: true },
 *     { icon: "lucide/star", value: "4.9/5", label: "Average Rating" },
 *   ]}
 * />
 * ```
 */
declare function StatsCardGroup({ className, stats, avatars, optixFlowConfig, }: StatsCardGroupProps): react_jsx_runtime.JSX.Element;

export { type CardGroupStat, StatsCardGroup, type StatsCardGroupProps };
