@primer/react-brand/lib/Statistic/Statistic.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import { TextProps } from '../';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/statistic/base.css';
export declare const StatisticSizes: readonly ["small", "medium", "large"];
export declare const StatisticSpacingValues: readonly ["none", "condensed", "normal", "spacious"];
type StatisticSpacingValues = (typeof StatisticSpacingValues)[number];
export type StatisticSize = (typeof StatisticSizes)[number];
type ResponsiveMap<T> = {
    narrow?: T;
    regular?: T;
    wide?: T;
};
export type StatisticProps = BaseProps<HTMLAnchorElement> & {
    /**
     * The size of the Statistic
     */
    size?: StatisticSize;
    /**
     * Adding padding to all internal sides of the component
     */
    padding?: StatisticSpacingValues | ResponsiveMap<StatisticSpacingValues>;
    /**
     * Specify alternative  appearance
     */
    variant?: 'default' | 'boxed';
    /**
     * Escape-hatch for inserting custom React components.
     * Warning:
     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
     */
    leadingComponent?: React.FunctionComponent;
    /**
     * Escape-hatch for inserting custom React components.
     * Warning:
     *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.
     *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.
     */
    trailingComponent?: React.FunctionComponent;
    /**
     * Optional attirbute for testing
     */
    ['data-testid']?: string;
} & BaseProps<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
type StatisticDescriptionProps = BaseProps<HTMLSpanElement> & Omit<TextProps, 'variant' | 'as'> & {
    variant?: 'default' | 'muted' | 'accent';
};
/**
 * Use the statistic component display concise numerical information
 * @see https://primer.style/brand/components/Statistic
 */
export declare const Statistic: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<StatisticProps>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
    Heading: React.ForwardRefExoticComponent<(Omit<{
        font?: import("../").TextFontVariants;
        size?: typeof import("../").TextSizes[number];
        variant?: typeof import("../").TextVariants[number];
        weight?: import("../").TextWeightVariants | import("../").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../").TextTags[number];
    } & React.HTMLAttributes<HTMLParagraphElement> & BaseProps<HTMLParagraphElement> & {
        as?: "p";
    }, "ref"> | Omit<{
        font?: import("../").TextFontVariants;
        size?: typeof import("../").TextSizes[number];
        variant?: typeof import("../").TextVariants[number];
        weight?: import("../").TextWeightVariants | import("../").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../").TextTags[number];
    } & React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
        as?: "span";
    }, "ref"> | Omit<{
        font?: import("../").TextFontVariants;
        size?: typeof import("../").TextSizes[number];
        variant?: typeof import("../").TextVariants[number];
        weight?: import("../").TextWeightVariants | import("../").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../").TextTags[number];
    } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
        as?: "div";
    }, "ref"> | Omit<{
        font?: import("../").TextFontVariants;
        size?: typeof import("../").TextSizes[number];
        variant?: typeof import("../").TextVariants[number];
        weight?: import("../").TextWeightVariants | import("../").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../").TextTags[number];
    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
        as?: "strong";
    }, "ref"> | Omit<{
        font?: import("../").TextFontVariants;
        size?: typeof import("../").TextSizes[number];
        variant?: typeof import("../").TextVariants[number];
        weight?: import("../").TextWeightVariants | import("../").ResponsiveWeightMap;
        align?: "start" | "center" | "end";
        hasAntiAliasing?: boolean;
    } & {
        as?: typeof import("../").TextTags[number];
    } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
        as?: "em";
    }, "ref">) & React.RefAttributes<HTMLParagraphElement>>;
    Description: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<StatisticDescriptionProps>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    testIds: {
        root: string;
    };
};
export {};