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

/**
 * A stat with circular progress indicator.
 * Used to display metrics with visual progress rings.
 */
interface CircularStat {
    /**
     * The label for the stat
     */
    label: React.ReactNode;
    /**
     * The stat value (0-100 for percentage display)
     */
    value: number;
    /**
     * Suffix for the value (e.g., "%", "")
     */
    suffix?: string;
    /**
     * Additional info text
     */
    info: React.ReactNode;
    /**
     * Additional CSS classes for the stat card
     */
    className?: string;
}
/**
 * A category of stats.
 * Used to group related stats under a common category tab.
 */
interface StatCategory {
    /**
     * Unique identifier for the category
     */
    id: string;
    /**
     * Display name for the category
     */
    name: React.ReactNode;
    /**
     * Stats for this category
     */
    stats: CircularStat[];
    /**
     * Additional CSS classes for the category
     */
    className?: string;
}
/**
 * Props for the StatsCircularProgress component.
 * A tabbed stats display featuring circular progress indicators organized by category.
 */
interface StatsCircularProgressProps {
    /**
     * Badge content above the heading
     */
    badge?: React.ReactNode;
    /**
     * Custom badge slot (overrides badge)
     */
    badgeSlot?: React.ReactNode;
    /**
     * Main heading content
     */
    heading?: React.ReactNode;
    /**
     * Description content below the heading
     */
    description?: React.ReactNode;
    /**
     * Array of stat categories
     */
    categories?: StatCategory[];
    /**
     * Custom slot for rendering categories (overrides categories array)
     */
    categoriesSlot?: React.ReactNode;
    /**
     * Default selected category ID
     */
    defaultCategory?: string;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     */
    spacing?: SectionSpacing;
    /**
     * Background pattern
     */
    pattern?: PatternName;
    /**
     * Pattern opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Additional CSS classes for the pattern
     */
    patternClassName?: string;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the container
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for the header
     */
    headerClassName?: string;
    /**
     * Additional CSS classes for the badge
     */
    badgeClassName?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for the description
     */
    descriptionClassName?: string;
    /**
     * Additional CSS classes for the tabs
     */
    tabsClassName?: string;
    /**
     * Additional CSS classes for the stats grid
     */
    statsClassName?: string;
    /**
     * Additional CSS classes for stat cards
     */
    statCardClassName?: string;
    /**
     * Additional CSS classes for stat values
     */
    statValueClassName?: string;
    /**
     * Additional CSS classes for stat labels
     */
    statLabelClassName?: string;
    /**
     * Additional CSS classes for stat info
     */
    statInfoClassName?: string;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * StatsCircularProgress - A tabbed stats display featuring circular progress indicators
 * organized by category (Business, Technical, Customer). Each stat shows a visual
 * circular progress ring with the value centered inside, along with a label and
 * additional info. Includes both desktop tabs and mobile dropdown for category
 * selection. Ideal for KPI dashboards, performance reports, or multi-dimensional
 * metrics visualization.
 *
 * @example
 * ```tsx
 * <StatsCircularProgress
 *   badge="Performance"
 *   heading="Key Performance Indicators"
 *   categories={[
 *     { id: "business", name: "Business", stats: [...] },
 *   ]}
 * />
 * ```
 */
declare function StatsCircularProgress({ sectionId, badge, badgeSlot, heading, description, categories, categoriesSlot, defaultCategory, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, tabsClassName, statsClassName, statCardClassName, statValueClassName, statLabelClassName, statInfoClassName, }: StatsCircularProgressProps): react_jsx_runtime.JSX.Element;

export { type CircularStat, type StatCategory, StatsCircularProgress, type StatsCircularProgressProps };
