import { ReactNode, HTMLAttributes } from "react";
import { SemanticColor } from "../../../utils/colorUtils";
export type KPISize = "sm" | "md" | "lg";
export type KPIColor = SemanticColor;
export interface KPITheme {
    baseStyle: string;
    valueSizes: Record<KPISize, string>;
    labelStyle: string;
    labelSizes: Record<KPISize, string>;
    trendPositive: string;
    trendNegative: string;
    trendNeutral: string;
    trendSizes: Record<KPISize, string>;
    barFilledColors: Record<KPIColor, string>;
    barEmptyColor: string;
    barSizes: Record<KPISize, {
        height: string;
        width: string;
        gap: string;
    }>;
    subtitleStyle: string;
}
export interface KPIThemeOverrides {
    baseStyle?: string;
    valueSizes?: Partial<Record<KPISize, string>>;
    labelStyle?: string;
    trendPositive?: string;
    trendNegative?: string;
    barFilledColors?: Partial<Record<KPIColor, string>>;
    barEmptyColor?: string;
    subtitleStyle?: string;
}
export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
    /**
     * The main metric value to display (e.g. "$25.5M", "1,234", "89%")
     */
    value: ReactNode;
    /**
     * Label describing the metric (e.g. "Fund raised", "Total Revenue")
     */
    label?: ReactNode;
    /**
     * Percentage change value (e.g. 20, -5.3). Determines trend direction & color.
     */
    trend?: number;
    /**
     * Custom trend label override (default: auto-formats as "+20%" or "-5.3%")
     */
    trendLabel?: ReactNode;
    /**
     * Progress value from 0-100. Controls how many bars are filled.
     */
    progress?: number;
    /**
     * Total number of bars in the visualization.
     * @default 24
     */
    barCount?: number;
    /**
     * Subtitle text below the bars (e.g. "Compared to last month")
     */
    subtitle?: ReactNode;
    /**
     * Icon to display before the label.
     */
    icon?: ReactNode;
    /**
     * Size variant.
     * @default 'md'
     */
    size?: KPISize;
    /**
     * Color for the filled bars and positive trend.
     * @default 'primary'
     */
    color?: KPIColor;
    /**
     * Custom class name.
     */
    className?: string;
    /**
     * Component-level theme overrides.
     */
    theme?: KPIThemeOverrides;
}
