import * as tailwind_variants from 'tailwind-variants';
import * as react from 'react';
import * as _heroui_system from '@heroui/system';
import { HTMLHeroUIProps, PropGetter } from '@heroui/system';
import { SlotsToClasses, InputOtpSlots, InputOtpVariantProps, InputOtpReturnType } from '@heroui/theme';
import { ReactRef } from '@heroui/react-utils';
import { AriaTextFieldProps } from '@react-types/textfield';
import { OTPInputProps } from 'input-otp';

interface Props extends HTMLHeroUIProps<"div"> {
    /**
     * Ref to the DOM node.
     */
    ref?: ReactRef<HTMLInputElement | null>;
    /**
     * Ref to the container DOM node.
     */
    baseRef?: ReactRef<HTMLDivElement | null>;
    /**
     * Length required for the otp.
     */
    length: number;
    /**
     * Regex string for the allowed keys.
     */
    allowedKeys?: string;
    /**
     * Callback that will be fired when the value has length equal to otp length
     */
    onComplete?: (v?: string) => void;
    /**
     * Boolean to disable the input-otp component.
     */
    isDisabled?: boolean;
    /**
     * Boolean to disable the animation in input-otp component.
     */
    disableAnimation?: boolean;
    /**
     * Classname or List of classes to change the classNames of the element.
     * if `className` is passed, it will be added to the base slot.
     *
     * @example
     * ```ts
     * <InputOtp classNames={{
     *    base:"base-classes",
     *    inputWrapper:"input-wrapper-classes",
     *    input: "input-classes",
     *    segmentWrapper: "segment-wrapper-classes",
     *    segment: "segment-classes",
     *    helperWrapper: "helper-wrapper-classes",
     *    description: "description-classes",
     *    errorMessage: "error-message-classes",
     * }} />
     * ```
     */
    classNames?: SlotsToClasses<InputOtpSlots>;
    /**
     * React aria onChange event.
     */
    onValueChange?: (value: string) => void;
}
type ValueTypes = {
    slots: InputOtpReturnType;
    classNames: SlotsToClasses<InputOtpSlots>;
};
type UseInputOtpProps = Props & InputOtpVariantProps & Omit<AriaTextFieldProps, "onChange"> & Omit<Partial<OTPInputProps>, "render" | "children" | "value" | "onChange" | keyof InputOtpVariantProps>;
declare function useInputOtp(originalProps: UseInputOtpProps): {
    Component: _heroui_system.As<any>;
    inputRef: react.RefObject<HTMLInputElement>;
    length: number;
    value: string;
    type: string | undefined;
    slots: {
        base: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        wrapper: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        input: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        segmentWrapper: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        segment: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        passwordChar: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        caret: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        helperWrapper: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        errorMessage: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        description: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
    } & {
        base: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        wrapper: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        input: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        segmentWrapper: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        segment: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        passwordChar: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        caret: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        helperWrapper: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        errorMessage: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
        description: (slotProps?: ({
            size?: "md" | "sm" | "lg" | undefined;
            color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
            radius?: "none" | "md" | "full" | "sm" | "lg" | undefined;
            isDisabled?: boolean | undefined;
            disableAnimation?: boolean | undefined;
            fullWidth?: boolean | undefined;
            variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
            isInvalid?: boolean | undefined;
            isReadOnly?: boolean | undefined;
        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
    } & {};
    hasHelper: boolean;
    classNames: SlotsToClasses<"description" | "base" | "wrapper" | "errorMessage" | "input" | "segmentWrapper" | "segment" | "passwordChar" | "caret" | "helperWrapper"> | undefined;
    isInvalid: boolean;
    description: react.ReactNode;
    errorMessage: react.ReactNode;
    isFocusVisible: boolean;
    isFocused: boolean;
    getBaseProps: PropGetter;
    getInputOtpProps: (props?: Partial<OTPInputProps>) => Omit<OTPInputProps, "children" | "render"> & {
        ref?: ReactRef<HTMLInputElement>;
    };
    getSegmentWrapperProps: PropGetter;
    getHelperWrapperProps: PropGetter;
    getErrorMessageProps: PropGetter;
    getDescriptionProps: PropGetter;
};
type UseInputOtpReturn = ReturnType<typeof useInputOtp>;

export { type UseInputOtpProps, type UseInputOtpReturn, type ValueTypes, useInputOtp };