import { ReactNode, MouseEvent } from 'react';
import { HORIZONTAL_PADDING } from './AnalyticsSummaryCard.constants';
import { ValuesOf } from '../utils/typeUtils';
/** Controls spacing size from left and right sides. */
export type AnalyticsSummaryCardHorizontalPadding = ValuesOf<typeof HORIZONTAL_PADDING>;
export interface AnalyticsSummaryCardProps {
    /** Applied as data-hook HTML attribute that can be used in the tests. */
    dataHook?: string;
    /** Specifies a CSS class name to be appended to the component's root element.
     * @internal
     */
    className?: string;
    /** Text for the title. */
    title?: string;
    /** Text for title tooltip. */
    titleTooltip?: string;
    /** Sets the main value of the card, displayed as a large heading. */
    value: string;
    /** Text for value tooltip. */
    valueTooltip?: string;
    /** A number to be displayed as the trend, a positive number is green with an arrow facing up and a negative number is red with an arrow facing down. */
    trend?: number;
    /** Invert color and arrow direction of Trend. */
    invertedTrend?: boolean;
    /** Show/Hide trend.
     * @default false
     */
    isTrendVisible?: boolean;
    /** Whether component is loading.
     * @default false
     */
    isLoading?: boolean;
    /** CTA button React Node.
     * @default null
     */
    ctaButton?: ReactNode;
    /** Fires when CTA button is clicked. */
    onCTAClick?: (event: MouseEvent<HTMLDivElement>) => void;
    /** Always show CTA button.
     * @default false
     */
    alwaysShowCTA?: boolean;
    /** Card would be clickable. */
    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
    /** Fires when chart is hovered.
     * @default noop
     */
    onChartHover?: (index: number) => void;
    /** Indicates the starting index of the highlighted area of the chart. */
    chartHighlightedStartingIndex?: number;
    /** Chart width.
     * @default 69
     */
    chartWidth?: number;
    /** Sets the data points of the sparkline chart. Each point has a `label` date, plotted on the x axis, and a numeric `value`, plotted on the y axis. */
    chartData: {
        label: Date;
        value: number;
    }[];
    /** Chart tooltip content. */
    getChartTooltipContent?: (index: number) => ReactNode;
    /** Sets the color of the chart. */
    chartColorHex?: string;
    /** Chart animation duration.
     * @default 300
     */
    chartAnimationDuration?: number;
    /** Footer - node.
     * @default null
     */
    footer?: ReactNode;
    /** Adds a border and corner radius.
     * @default false
     */
    border?: boolean;
    /** Controls spacing size from left and right sides.
     * @default small
     */
    horizontalPadding?: AnalyticsSummaryCardHorizontalPadding;
}
//# sourceMappingURL=AnalyticsSummaryCard.types.d.ts.map