import { CommonProps, NoticeProps, Refable, TrendIndicatorProps, type Styleable } from "@trackunit/react-components";
import { ActivityColors, CriticalityColors, IntentColors } from "@trackunit/ui-design-tokens";
import { IconName } from "@trackunit/ui-icons";
import { type MouseEventHandler, type ReactElement } from "react";
export interface WidgetKPIProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
    /**
     * The title of the WidgetKPI Card
     */
    title: string;
    /**
     * The value of the WidgetKPI Card
     */
    value: string | number;
    /**
     * The unit of the WidgetKPI Card
     */
    unit?: string;
    /**
     * Whether or not to show the loading state
     */
    loading?: boolean;
    /**
     * Label for the tooltip
     */
    tooltipLabel?: string;
    /**
     * The icon name to be displayed
     */
    iconName?: IconName;
    /**
     * The color of the icon
     */
    iconColor?: "primary" | "warning" | "black" | "danger" | "success" | "neutral" | "info" | IntentColors | ActivityColors | CriticalityColors;
    /**
     * The trend of the WidgetKPI Card
     */
    trends?: Array<Omit<TrendIndicatorProps, "className" | "dataTestId">>;
    /**
     * Custom notice or text to display in the trend area
     * If provided, this will override the trend display
     * Text will be truncated to fit on a single line
     */
    notice?: Pick<NoticeProps, "label" | "iconName" | "iconColor">;
    /**
     * Click handler for the WidgetKPI Card.
     * When provided, the KPI becomes interactive with a hover effect and a visible chevron.
     */
    onClick?: MouseEventHandler<HTMLDivElement>;
}
/**
 * The KPI Widget is a compact and flexible component designed to surface key metrics in a clear, impactful way. It provides at-a-glance insights through bold values, concise labels, and optional contextual elements such as trend indicators or time zones. Its goal is to drive user attention toward meaningful data that prompts action.
 *
 * @param {WidgetKPIProps} props - The props for the WidgetKPI component
 * @returns {ReactElement} WidgetKPI component
 */
export declare const WidgetKPI: ({ title, value, loading, unit, className, "data-testid": dataTestId, tooltipLabel, trends, iconName, iconColor, notice, onClick, ref, style, ...rest }: WidgetKPIProps) => ReactElement;