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 {
    /**
     * Percent delta vs comparator. Positive = up, negative = down, 0 = flat.
     * Convention: signed. `value={12}` → "↑ 12%". `value={-5}` → "↓ 5%".
     */
    value: number;
    /**
     * Semantic override. By default, up = good (green) and down = bad (red).
     * For metrics where down is good (e.g. response time, error rate), pass
     * `goodDirection="down"` to flip the colors without changing the arrow.
     */
    goodDirection?: "up" | "down";
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** The tinted ±% pill that sits BESIDE a figure. */
interface TrendChipProps extends TrendBase {
    variant?: "chip";
    periodLabel?: never;
    detail?: never;
}
/** The caption UNDER a figure, which names the period the change is against. */
interface TrendLineProps extends TrendBase {
    variant: "line";
    /** Suffix after the percentage, e.g. "vs last month". */
    periodLabel: string;
    /** Optional detail line below, e.g. "Last month: 63". */
    detail?: string;
}
export type TrendProps = TrendChipProps | TrendLineProps;
/**
 * A change against a previous period. Answers "is this good?" — the single most
 * common missing piece on dashboards that show only "what".
 *
 * Two forms, and the figure's layout picks between them: the `chip` sits BESIDE
 * the number as a tinted ±% pill, and `line` sits UNDER it as the "Up X% vs last
 * month" caption chart cards close with — a period, and optionally the
 * comparator itself. A line under every tile of a dense band doubles the band's
 * height, so a band takes the chip.
 *
 * DIRECTION and VALENCE are two axes and are published as two attributes: the
 * arrow follows `data-direction`, the colour follows `data-tone`, and
 * `goodDirection` moves the second without touching the first. Folding them
 * into one would make a selector for "the falling ones" unwritable on a metric
 * where falling is good.
 */
export declare function Trend(props: TrendProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export {};