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

/**
 * A calculator-section row showing a color swatch, label, optional info
 * tooltip, a money value, and an optional pencil edit trigger.
 *
 * Two modes:
 *
 * **Display + external callback** (`onEdit` only):
 *   Shows a formatted string and calls `onEdit` when the pencil is clicked.
 *   The parent handles the edit flow (e.g. opens a drawer).
 *
 * **Inline edit** (`numericValue` + `onValueChange`):
 *   Shows a formatted value in display state. Clicking the pencil (or the
 *   value itself) switches the row to an `<Input>` field. Committing via
 *   blur or Enter saves the value and returns to display state.
 *   `value` is used as the display-mode formatted string; `numericValue` /
 *   `onValueChange` drive the input.
 *
 * The pencil slot is always reserved (invisible when no edit prop) so value
 * text stays column-aligned in mixed read-only / editable row groups.
 */
interface EditableMoneyItemProps {
    /** Row label (e.g. "Current Expenses") */
    label: string;
    /** Pre-formatted display string (e.g. "$5,000") */
    value: string;
    /** CSS color used for the swatch border and tinted fill */
    color: string;
    /** Fill opacity for the swatch background (default: 0.4) */
    fillOpacity?: number;
    /** Optional tooltip text shown on the info icon */
    tooltip?: string;
    /** Called when the pencil is clicked (use without numericValue / onValueChange) */
    onEdit?: () => void;
    /** Raw numeric value — enables inline edit when paired with onValueChange */
    numericValue?: number;
    /** Called with the new number when the inline input is committed */
    onValueChange?: (value: number) => void;
    className?: string;
}
declare function EditableMoneyItem({ label, value, color, fillOpacity, tooltip, onEdit, numericValue, onValueChange, className, }: EditableMoneyItemProps): react_jsx_runtime.JSX.Element;

export { EditableMoneyItem, type EditableMoneyItemProps };