import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react/styled-system';
import { MoneyInputValue, CurrencyCode } from './utils';
import { OmitInternalProps } from '../../type-utils/omit-props';
export type { MoneyInputValue, CurrencyCode, MoneyValue } from './utils';
type MoneyInputRecipeProps = {
/**
* Size variant of the money input
* @default "md"
*/
size?: SlotRecipeProps<"nimbusMoneyInput">["size"];
};
export type MoneyInputRootSlotProps = HTMLChakraProps<"div", MoneyInputRecipeProps>;
export type MoneyInputContainerSlotProps = HTMLChakraProps<"div">;
export type MoneyInputCurrencySelectSlotProps = HTMLChakraProps<"div">;
export type MoneyInputCurrencyLabelSlotProps = HTMLChakraProps<"label">;
export type MoneyInputAmountInputSlotProps = HTMLChakraProps<"input">;
export type MoneyInputBadgeSlotProps = HTMLChakraProps<"div">;
export type CustomEvent = {
target: {
id?: string;
name?: string;
value?: string | string[] | null;
};
};
export type ExcludedSlotProps = "onChange" | "onBlur" | "onFocus" | "id" | "name" | "value" | "step";
export type MoneyInputProps = OmitInternalProps & {
/**
* Used as HTML id property. An id is auto-generated when it is not specified.
*/
id?: string;
/**
* The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`).
*/
name?: string;
/**
* Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator.
*/
value: MoneyInputValue;
/**
* List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown.
*/
currencies?: string[];
/**
* Called when input is blurred
*/
onBlur?: (event: CustomEvent) => void;
/**
* Called when input is focused
*/
onFocus?: (event: CustomEvent) => void;
/**
* Called with the event of the input or dropdown when either the currency or the amount have changed.
* @deprecated Use onValueChange, onAmountChange, or onCurrencyChange for better type safety and developer experience.
*/
onChange?: (event: CustomEvent) => void;
/**
* Modern API: Called when the complete value (amount + currency) changes.
* This is the recommended handler for most use cases.
*/
onValueChange?: (value: MoneyInputValue) => void;
/**
* Modern API: Called when only the amount changes.
* Use this for granular control over amount changes.
*/
onAmountChange?: (amount: string) => void;
/**
* Modern API: Called when only the currency changes.
* Use this for granular control over currency changes.
*/
onCurrencyChange?: (currencyCode: CurrencyCode) => void;
/**
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
*/
isDisabled?: boolean;
/**
* Indicates that the field is displaying read-only content
*/
isReadOnly?: boolean;
/**
* Indicates that input has errors
*/
isInvalid?: boolean;
/**
* Indicates that the field is required
*/
isRequired?: boolean;
/**
* Shows high precision badge in case current value uses high precision.
*/
hasHighPrecisionBadge?: boolean;
/**
* Indicates that the currency input cannot be modified.
*/
isCurrencyInputDisabled?: boolean;
/**
* Placeholder text for the amount input
*/
placeholder?: string;
/**
* Focus the input on initial render
*/
autoFocus?: boolean;
};