import "./trend.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
interface TrendBase extends StyleProps {
    /** Signed percent delta: `12` → "↑ 12%", `-5` → "↓ 5%", 0 flat. */
    value: number;
    /** Up is good by default; `"down"` flips the colour, not the arrow (response time, error rate); `"none"`
     *  keeps the arrow in the neutral tone, for a sum with no known good side. */
    goodDirection?: "up" | "down" | "none";
    /** The BCP-47 tag the magnitude is grouped and pointed by; absent, the pack's. */
    locale?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** The tinted ±% pill beside a figure. */
interface TrendChipProps extends TrendBase {
    variant?: "chip";
    periodLabel?: never;
    detail?: never;
}
/** The caption under a figure, naming the comparison period. */
interface TrendLineProps extends TrendBase {
    variant: "line";
    /** E.g. "vs last month". */
    periodLabel: string;
    /** E.g. "Last month: 63". */
    detail?: string;
}
export type TrendProps = TrendChipProps | TrendLineProps;
/** A change against a previous period: is this good? The `chip` sits beside the number; the `line` sits
 *  under it as a card's closing caption, too tall for every tile of a dense band. Direction and valence
 *  are two attributes (`data-direction`, `data-tone`), so "the falling ones" stays selectable where
 *  falling is good. */
export declare function Trend(props: TrendProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export {};