import * as React from 'react';
interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
    title: string;
    value: string | number;
    description?: string;
    trend?: {
        value: number;
        label?: string;
    };
    icon?: React.ReactNode;
    /**
     * Tailwind class for the icon text/foreground color.
     * @default "text-muted-foreground"
     */
    iconColor?: string;
    /**
     * Tailwind class for the icon background color.
     * @default "bg-muted"
     */
    iconBg?: string;
}
/**
 * KPI metric card for dashboard overview pages.
 *
 * @description
 * Standardized layout for displaying a metric title, a large value, an
 * optional icon, and an optional trend indicator with automatic up/down/neutral
 * icon and color. Built on top of `<Card>`.
 *
 * @ai-rules
 * 1. Provide the `icon` as a Lucide React element with `className="size-5"`.
 * 2. `trend.value` is a raw number (e.g., `20.1` for +20.1%) — the component
 *    displays `Math.abs(value)%` automatically. Do NOT pre-format as string.
 * 3. `value` IS a pre-formatted display string: `"$45,231"`, `"3.6%"`, etc.
 * 4. `trend.label` takes precedence over `description` for below-value text.
 */
declare const StatsCard: React.ForwardRefExoticComponent<StatsCardProps & React.RefAttributes<HTMLDivElement>>;
export { StatsCard };
export type { StatsCardProps };