retro-react/dist/esm/components/statistics/Statistics.d.ts

A React component library for building retro-style websites

/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
export declare type StatisticsVariant = 'horizontal' | 'vertical';
export declare type StatisticsSize = 'small' | 'medium' | 'large';
export interface StatisticsProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * The numeric value of the statistic.
     *
     */
    number: string;
    /**
     * The description of the number.
     *
     * @default ''
     */
    label?: string;
    /**
     * The size of the displayed number.
     *
     * @default 'medium'
     */
    size?: StatisticsSize;
    /**
     * The icon displayed next to the number. Accepts any React node but is intended to be used with icons.
     *
     * @default undefined
     */
    icon?: React.ReactNode;
    /**
     * The prefix text displayed before the number.
     *
     * @default undefined
     */
    prefix?: string;
    /**
     * The suffix text displayed after the number.
     *
     * @default undefined
     */
    suffix?: string;
    /**
     * The direction of the statistic. Can be either horizontal or vertical.
     *
     * @default 'vertical'
     */
    direction?: StatisticsVariant;
    /**
     * Optional click handler for the entire component.
     *
     * @default undefined
     */
    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    sx?: ThemeUICSSObject;
}
/**
 * The Statistics component is designed to display key numerical information with an optional label.
 * This component is highly customizable, allowing for a selection of colors, sizes, and additional prefix and suffix texts.
 * The component also supports vertical and horizontal layouts and icon display.
 *
 * @example
 * <Statistics number="1,000" label="Total Users" />
 */
export declare const Statistics: import("react").ForwardRefExoticComponent<StatisticsProps & import("react").RefAttributes<HTMLDivElement>>;