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-Cz9FycbA.js';
import './blocks-BJ3CyHu6.js';
import 'class-variance-authority';
import './button-variants-lRElsmTc.js';
import 'class-variance-authority/types';
import '@opensite/hooks/usePlatformFromUrl';

/**
 * A single stat entry with value, change, and trend.
 * Used to display metrics with trend indicators and comparison periods.
 */
interface TimelineStat {
    /**
     * The label for the stat
     */
    label: React.ReactNode;
    /**
     * The stat value (e.g., "1,284", "32,891", "5.2%")
     */
    value: React.ReactNode;
    /**
     * The percentage change
     */
    change: number;
    /**
     * Whether the trend is up or down
     */
    trend: "up" | "down";
    /**
     * Label for the comparison period
     */
    previousLabel: React.ReactNode;
    /**
     * If true, a downward trend is considered positive (e.g., for support tickets)
     */
    inversePositive?: boolean;
    /**
     * Additional CSS classes for the stat card
     */
    className?: string;
}
/**
 * A time period with its associated stats.
 * Groups metrics by time range for tabbed display.
 */
interface TimePeriod {
    /**
     * Unique identifier for the period
     */
    id: string;
    /**
     * Display label for the period
     */
    label: React.ReactNode;
    /**
     * Stats for this time period
     */
    stats: TimelineStat[];
    /**
     * Additional CSS classes for the period
     */
    className?: string;
}
/**
 * Props for the StatsTimelineTabs component.
 * A tabbed stats display showing metrics across different time periods with color-coded trend indicators.
 */
interface StatsTimelineTabsProps {
    /**
     * Badge content above the heading
     */
    badge?: React.ReactNode;
    /**
     * Custom slot for badge (overrides badge prop)
     */
    badgeSlot?: React.ReactNode;
    /**
     * Main heading content
     */
    heading?: React.ReactNode;
    /**
     * Description content below the heading
     */
    description?: React.ReactNode;
    /**
     * Array of time periods with their stats
     */
    periods?: TimePeriod[];
    /**
     * Custom slot for tabs content (overrides periods array)
     */
    tabsSlot?: React.ReactNode;
    /**
     * Default selected period ID
     */
    defaultPeriod?: 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 container
     */
    tabsClassName?: string;
    /**
     * Additional CSS classes for the tabs list
     */
    tabsListClassName?: string;
    /**
     * Additional CSS classes for the stats grid
     */
    statsGridClassName?: string;
    /**
     * Additional CSS classes for stat cards
     */
    statCardClassName?: string;
}
/**
 * StatsTimelineTabs - A tabbed stats display showing metrics across different time periods
 * (weekly, monthly, quarterly, yearly). Features a badge header, centered tab navigation,
 * and a responsive grid of stat cards with color-coded trend indicators. Each stat shows
 * the value, percentage change, and comparison period. Ideal for analytics dashboards,
 * performance reports, or any time-series data visualization.
 *
 * @example
 * ```tsx
 * <StatsTimelineTabs
 *   badge="Performance Timeline"
 *   heading="Growth Progression"
 *   description="Track our key metrics over different time periods"
 *   defaultPeriod="monthly"
 * />
 * ```
 */
declare function StatsTimelineTabs({ badge, badgeSlot, heading, description, periods, tabsSlot, defaultPeriod, background, pattern, patternOpacity, patternClassName, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, tabsClassName, tabsListClassName, statsGridClassName, statCardClassName, }: StatsTimelineTabsProps): react_jsx_runtime.JSX.Element;

export { StatsTimelineTabs, type StatsTimelineTabsProps, type TimePeriod, type TimelineStat };
