import * as react_jsx_runtime from 'react/jsx-runtime';
import React__default from 'react';

/**
 * ExpenseCategoriesBar — WealthX Design System
 *
 * Horizontal stacked percentage bar for categorical breakdowns.
 * Used for both expense categories (`color="secondary"`, default)
 * and income sources (`color="primary"`).
 *
 * - `color="secondary"` (default): segments use `--brand-secondary` (dark navy)
 * - `color="primary"`: segments use `--primary` (tenant green)
 *
 * Hovering a segment shows a tooltip with the category name, icon, and amount.
 *
 * Mirrors the FE component at
 * `frontend/src/components/ExpenseCategoriesBar/index.tsx`
 */
interface ExpenseCategoryPart {
    id: string;
    title: string;
    /** Fraction of total (0–1). Used to size the segment. */
    percentage: number;
    /** Absolute amount in AUD. Shown in the hover tooltip. */
    amount: number;
}
interface ExpenseCategoriesBarProps {
    /** Main heading above the bar (e.g. "Expense Categories"). Omit to hide the header row entirely. */
    title?: string;
    /** Secondary label shown next to the title (e.g. date range or period) */
    subtitle?: string;
    /** Text shown in the info-icon tooltip next to the subtitle */
    tooltipText?: string;
    /** Ordered list of category segments */
    parts?: ExpenseCategoryPart[];
    /** Icon node for each segment, indexed to match `parts` */
    icons?: React__default.ReactNode[];
    /**
     * Bar segment colour scheme.
     * - `"secondary"` (default) — `--brand-secondary` (dark navy); used for expenses
     * - `"primary"` — `--primary` (tenant green); used for income sources
     */
    color?: "primary" | "secondary";
    className?: string;
}
declare function ExpenseCategoriesBar({ title, subtitle, tooltipText, parts, icons, color, className, }: ExpenseCategoriesBarProps): react_jsx_runtime.JSX.Element;

export { ExpenseCategoriesBar, type ExpenseCategoriesBarProps, type ExpenseCategoryPart };