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; };