import React from 'react';
import { SemanticColor } from '../../../utils/colorUtils';
export type MetricSize = 'sm' | 'md' | 'lg';
export type MetricColor = SemanticColor;
export type MetricVariant = 'filled' | 'glass';
export type TrendDirection = 'up' | 'down';
export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The main value to display (number or formatted string)
     */
    value: string | number;
    /**
     * Label describing the metric
     */
    label: React.ReactNode;
    /**
     * Optional subtitle or secondary text
     */
    subtitle?: React.ReactNode;
    /**
     * Trend value to display (e.g., "+10.34%", "-5.2%")
     * Also acts as boolean - if provided, trend badge is shown
     */
    trendValue?: React.ReactNode;
    /**
     * Trend direction - determines icon and color
     * @default 'up'
     */
    trendDirection?: TrendDirection;
    /**
     * Optional trend chart (can be LineChart, AreaChart, BarChart, etc.)
     */
    trendChart?: React.ReactNode;
    /**
     * Size variant
     * @default 'md'
     */
    size?: MetricSize;
    /**
     * Visual style variant
     * @default 'filled'
     */
    variant?: MetricVariant;
    /**
     * Semantic color for icon and accents
     * @default 'primary'
     */
    color?: MetricColor;
    /**
     * Optional icon to display
     */
    icon?: React.ReactNode;
    /**
     * Custom className for styling overrides
     */
    className?: string;
}
export interface MetricTheme {
    baseStyle: string;
    variants: Record<MetricVariant, string>;
    variantColors: Record<MetricVariant, string>;
    iconContainerVariantColors: Record<MetricVariant, Record<MetricColor, string>>;
    sizes: Record<MetricSize, {
        container: string;
        contentPadding: string;
        iconContainer: string;
        label: string;
        value: string;
        subtitle: string;
    }>;
    labelStyle: string;
    valueStyle: string;
    subtitleStyle: string;
    iconContainerStyle: string;
}
export interface MetricThemeOverrides {
    baseStyle?: string;
    variants?: Partial<Record<MetricVariant, string>>;
    variantColors?: Partial<Record<MetricVariant, string>>;
    iconContainerVariantColors?: Partial<Record<MetricVariant, Partial<Record<MetricColor, string>>>>;
    sizes?: Partial<Record<MetricSize, Partial<{
        container: string;
        contentPadding: string;
        iconContainer: string;
        label: string;
        value: string;
        subtitle: string;
    }>>>;
    labelStyle?: string;
    valueStyle?: string;
    subtitleStyle?: string;
    iconContainerStyle?: string;
}
