@payfit/unity-components/dist/esm/components/number-input/NumberInput.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { ReactElement } from 'react';
import { NumberFieldProps } from 'react-aria-components/NumberField';
export declare const numberInput: import('tailwind-variants').TVReturnType<{
    isReadOnly: {
        true: {
            base: string[];
            prefix: string[];
            wrapper: string[];
            input: string[];
            suffix: string[];
        };
        false: {
            base: string[];
            prefix: string[];
            suffix: string[];
            wrapper: string[];
            input: string[];
            state: string[];
            button: string;
        };
    };
}, {
    base: string[];
    wrapper: string[];
    input: string[];
    prefix: string[];
    suffix: string[];
    state: string[];
    controls: string[];
}, undefined, {
    isReadOnly: {
        true: {
            base: string[];
            prefix: string[];
            wrapper: string[];
            input: string[];
            suffix: string[];
        };
        false: {
            base: string[];
            prefix: string[];
            suffix: string[];
            wrapper: string[];
            input: string[];
            state: string[];
            button: string;
        };
    };
}, {
    base: string[];
    wrapper: string[];
    input: string[];
    prefix: string[];
    suffix: string[];
    state: string[];
    controls: string[];
}, import('tailwind-variants').TVReturnType<{
    isReadOnly: {
        true: {
            base: string[];
            prefix: string[];
            wrapper: string[];
            input: string[];
            suffix: string[];
        };
        false: {
            base: string[];
            prefix: string[];
            suffix: string[];
            wrapper: string[];
            input: string[];
            state: string[];
            button: string;
        };
    };
}, {
    base: string[];
    wrapper: string[];
    input: string[];
    prefix: string[];
    suffix: string[];
    state: string[];
    controls: string[];
}, undefined, unknown, unknown, undefined>>;
type StyleWithoutCurrency = Exclude<Intl.NumberFormatOptions['style'], 'currency'>;
interface FormatOptions extends Omit<Intl.NumberFormatOptions, 'currency' | 'style'> {
    style?: StyleWithoutCurrency;
}
export interface NumberProps extends VariantProps<typeof numberInput>, Omit<NumberFieldProps, 'className' | 'style' | 'formatOptions' | 'children'> {
    withControls?: boolean;
    /** Element to display before the input field */
    prefix?: ReactElement;
    /** Element to display after the input field */
    suffix?: ReactElement;
    /** Whether the field is in a loading state */
    isLoading?: boolean;
    /**
     * Clear button click handler
     */
    onClearButtonPress?: () => void;
    /** Format options for the number input */
    formatOptions?: FormatOptions;
}
/**
 * The `NumberInput` component renders an input field specifically designed for numeric values. It provides features like
 * increment/decrement controls, formatting options, and various states including loading, invalid, disabled, and read-only.
 * The component supports prefix and suffix elements, clear button functionality, and can be integrated with form validation.
 * @param {NumberProps} props - The props for the `NumberInput` component
 * @example
 * ```tsx
 * import { NumberInput } from '@payfit/unity-components'
 *
 * // Basic usage
 * <NumberInput aria-label="Amount" />
 *
 * // With controls and formatting
 * <NumberInput
 *   withControls
 *   minValue={0}
 *   maxValue={1000}
 *   step={10}
 *   formatOptions={{
 *     minimumFractionDigits: 2,
 *     maximumFractionDigits: 2
 *   }}
 *   aria-label="Amount"
 * />
 *
 * // With prefix
 * <NumberInput
 *   prefix={<Icon src="CurrencyEuroOutlined" size={20} />}
 *   aria-label="Amount"
 * />
 * ```
 * @see {@link NumberProps} for all available props
 * @remarks {@link https://www.payfit.design/24f360409/p/545bd2-number-field|Design docs}
 */
declare const NumberInput: import('react').ForwardRefExoticComponent<NumberProps & import('react').RefAttributes<HTMLInputElement>>;
export { NumberInput };