import type { ComponentProps, ComponentType, CSSProperties, ReactElement, ReactNode } from 'react';
import type { $Values } from 'utility-types';
import { ChartType } from '../..';
import type { Color } from '../../../common/colors';
import type { Spec } from '../../../specs/spec_type';
import { SpecType } from '../../../specs/spec_type';
import type { LayoutDirection, ValueFormatter } from '../../../utils/common';
/**
 * Props for displaying a secondary metric value with optional label and badge styling.
 *
 * @alpha
 * */
export interface SecondaryMetricProps {
    /** The main value to display */
    value: string;
    /** Optional label to display alongside the value */
    label?: string;
    /** Optional background color for the value badge. If not provided, no badge is displayed */
    badgeColor?: Color;
    /** Optional text color for the value badge. If not provided, it will be computed automatically for contrast */
    badgeTextColor?: Color;
    /** Determines whether the label appears before or after the value */
    labelPosition?: 'before' | 'after';
    /**  Optional CSS properties to apply to the container element */
    style?: CSSProperties;
    /** Optional aria description */
    ariaDescription?: string;
    /** Badge border config:
     * - undefined: no border
     * - `{ mode: 'none' }`: explicitly disable border
     * - `{ mode: 'auto' }`: parent computes a white or black border based on contrast with the badge and metric background colors
     * - `{ mode: 'custom', color: Color }`: use provided color
     */
    badgeBorderColor?: {
        mode: 'none';
    } | {
        mode: 'auto';
    } | {
        mode: 'custom';
        color: Color;
    };
    /** Optional icon displayed next to the text */
    icon?: string;
    /** Determines whether the icon appears before or after the value */
    iconPosition?: 'before' | 'after';
}
/** @alpha */
export type MetricBase = {
    color: Color;
    /**
     * Overrides background color from `Theme.background` and `Theme.metric.emptyBackground`
     */
    background?: Color;
    title?: string;
    valueColor?: Color;
    valueIcon?: ComponentType<{
        width: number;
        height: number;
        color: Color;
        verticalAlign: 'middle';
    }>;
    subtitle?: string;
    /**
     * Optional extra content to display below the subtitle.
     * - Can be a React element, a component type (which will receive `fontSize` and `color` props), or a SecondaryMetricProps object.
     * - If a SecondaryMetricProps object is provided, it will be rendered using the SecondaryMetric component.
     */
    extra?: ReactElement | ComponentType<{
        fontSize: number;
        color: string;
    }> | SecondaryMetricProps;
    icon?: ComponentType<{
        width: number;
        height: number;
        color: Color;
    }>;
    body?: ReactNode;
};
/** @alpha */
export type MetricWText = MetricBase & {
    value: string;
    valueFormatter?: never;
};
/** @alpha */
export type MetricWNumberArrayValues = MetricBase & {
    value: Array<number>;
    valueFormatter: ValueFormatter<number>;
};
/** @alpha */
export type MetricWStringArrayValues = MetricBase & {
    value: Array<string>;
    valueFormatter?: never;
};
/** @alpha */
export type MetricWNumber = MetricBase & {
    value: number;
    target?: number;
    valueFormatter: ValueFormatter;
    /**
     * Used for header display only, defaults to `valueFormatter`
     */
    targetFormatter?: ValueFormatter;
};
/** @alpha */
export type MetricWProgress = MetricWNumber & {
    domainMax: number;
    progressBarDirection: LayoutDirection;
};
/** @alpha */
export declare const MetricTrendShape: Readonly<{
    Bars: "bars";
    Area: "area";
}>;
/** @alpha */
export type MetricTrendShape = $Values<typeof MetricTrendShape>;
/** @alpha */
export type MetricWTrend = (MetricWNumber | MetricWText | MetricWNumberArrayValues | MetricWStringArrayValues) & {
    trend: {
        x: number;
        y: number;
    }[];
    trendShape: MetricTrendShape;
    trendA11yTitle?: string;
    trendA11yDescription?: string;
};
/** @alpha */
export type MetricDatum = MetricWNumber | MetricWText | MetricWNumberArrayValues | MetricWStringArrayValues | MetricWProgress | MetricWTrend;
/** @alpha */
export interface MetricSpec extends Spec {
    specType: typeof SpecType.Series;
    chartType: typeof ChartType.Metric;
    data: (MetricDatum | undefined)[][];
}
/** @alpha */
export declare const Metric: import("react").FC<import("../../../state/spec_factory").SFProps<MetricSpec, "chartType" | "specType", "data", never, "id">>;
/**
 * @deprecated in favor of MetricProps
 * @alpha
 */
export type MetricSpecProps = ComponentProps<typeof Metric>;
/**@alpha */
export type MetricProps = ComponentProps<typeof Metric>;
//# sourceMappingURL=index.d.ts.map