import "./waterfall_chart.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type StyleProps } from "./style_props";
/**
 * What a bar STANDS for, which is also what decides where it starts.
 *
 * `basis` and `total` are LEVELS — they stand on zero, so their `value` is read
 * as an absolute height. `delta` is a STEP — it floats between the level before
 * it and the level after, so its `value` is read as a signed contribution.
 */
export type WaterfallKind = "basis" | "delta" | "total";
export interface WaterfallItem {
    key: string;
    /** The step's name, under the bar ("Giá vốn", "Ad spend"). */
    label: string;
    /** `basis`/`total`: the level the bar reaches. `delta`: the signed step. */
    value: number;
    /** Default `delta`. */
    kind?: WaterfallKind;
    /**
     * A neutral QUALIFIER under the label — a count, a period, a basis of
     * calculation. Never a problem or a state: one bar's meta being a fact and
     * another's a complaint is what makes the row read inconsistent.
     */
    meta?: string;
    /**
     * Override the derived colour. The defaults already carry the meaning —
     * a step that ADDS is `emerald`, one that SUBTRACTS is `red`, a basis is
     * neutral, and a closing total takes the colour of its own sign — so reach
     * for this only when the domain colours a step against its arithmetic.
     */
    color?: string;
}
/** One bar's resolved geometry, in value units and as a fraction of the span. */
export interface WaterfallBar {
    key: string;
    label: string;
    meta?: string;
    kind: WaterfallKind;
    value: number;
    color: string;
    /** The lower and upper level this bar spans, in value units. */
    from: number;
    to: number;
    /** Where the bar starts, as a 0–1 fraction of the plotted span. */
    offset: number;
    /** How much of the plotted span the bar covers, 0–1. */
    size: number;
    /** The running level this bar leaves behind — where its connector sits. */
    level: number;
    /** That same level as a 0–1 fraction of the plotted span. */
    levelFraction: number;
}
export interface WaterfallLayout {
    bars: WaterfallBar[];
    /** The plotted span, which always includes zero. */
    min: number;
    max: number;
    /** Zero as a 0–1 fraction of the span — where the baseline is drawn. */
    zeroFraction: number;
}
/**
 * Walk the items into bar geometry. Pure, exported and separately tested,
 * because a bridge is only worth drawing if the floating bars land on the
 * levels the arithmetic says they do — and that is the one part of the chart
 * no screenshot can confirm.
 */
export declare function waterfallLayout(items: WaterfallItem[]): WaterfallLayout;
export interface WaterfallChartProps extends StyleProps {
    items: WaterfallItem[];
    /**
     * `vertical` is the classic bridge — columns left to right, the shape most
     * readers already know. `horizontal` turns it into rows, which is what a
     * narrow container or long step names need: a column 70px wide cannot hold
     * "Giá vốn và phí giao hàng" and a rotated label is not an answer.
     */
    orientation?: "vertical" | "horizontal";
    /** Formats every figure on the chart. Pass the surface's own money formatter. */
    formatNumber?: (n: number) => string;
    /** Plot height in px for `vertical`; bar thickness for `horizontal`. */
    height?: number;
    emptyLabel?: string;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * The BRIDGE: an opening level, the signed steps that move it, and the level
 * they close at — revenue walked down to net, budget walked to actual, opening
 * balance walked to closing. Each step floats between the level before it and
 * the level after, connectors carry the eye across, and the run of colour says
 * which way the money went without the reader adding anything up.
 *
 * Pick it over `Ledger` when the reader is scanning for SHAPE — which step is
 * the big one, does the total survive — and over `BarChart` whenever the bars
 * are steps in one arithmetic rather than independent quantities: a bar chart
 * of a P&L draws five columns that all start at zero and states a comparison
 * nobody meant. `Ledger` stays right where the figures must be read exactly and
 * reconciled line by line; a dashboard wants this.
 *
 * The steps must be the arithmetic, all of it — a bridge earns its trust by
 * closing on the total it draws, so derive the steps and the close from ONE
 * computation rather than from two that can drift apart.
 */
export declare function WaterfallChart(props: WaterfallChartProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;