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

/**
 * Section header block used above each chart on the Money (Transactions) page.
 *
 * Two layout variants:
 *
 * `layout="vertical"` (default)
 * ┌─────────────────────────────────────────┐
 * │  $37,085            [optional action]    │
 * │  Cash Balance                            │
 * │  30 Days Total                           │
 * │  (Based on connected bank transactions)  │
 * └─────────────────────────────────────────┘
 *
 * `layout="horizontal"`
 * ┌─────────────────────────────────────────┐
 * │  CASH BALANCE               $37,085     │
 * │  (Based on connected bank transactions) │
 * └─────────────────────────────────────────┘
 */
interface TransactionsSummaryBlockProps {
    /** Pre-formatted total value — e.g. "$37,085" — displayed prominently */
    value: string;
    /** Section label — e.g. "Cash Balance", "Income", "Expense" */
    label: string;
    /** Period text — e.g. "30 Days Total" (vertical layout only) */
    period?: string;
    /** Small footnote — e.g. "(Based on connected bank transactions)" */
    footnote?: string;
    /** Optional trailing element — e.g. a Button for "Set Goal" (vertical layout only) */
    action?: React__default.ReactNode;
    /**
     * Layout variant.
     * - `"vertical"` (default): value large on top, label + period below
     * - `"horizontal"`: label small-caps left, value large right — mirrors Borrowing Capacity style
     */
    layout?: "vertical" | "horizontal";
    className?: string;
}
declare function TransactionsSummaryBlock({ value, label, period, footnote, action, layout, className, }: TransactionsSummaryBlockProps): react_jsx_runtime.JSX.Element;

export { TransactionsSummaryBlock, type TransactionsSummaryBlockProps };