@julo-ui/otp-input/dist/types-cc693119.d.ts

React Input Component for entering sequences of digits

import { DescendantsManager } from '@chakra-ui/descendant';
import * as _julo_ui_system from '@julo-ui/system';
import { PropGetter, HTMLJuloProps } from '@julo-ui/system';
import * as _chakra_ui_descendant_dist_use_descendant from '@chakra-ui/descendant/dist/use-descendant';
import * as react from 'react';
import * as _chakra_ui_descendant_dist_descendant from '@chakra-ui/descendant/dist/descendant';

declare const OtpInputDescendantsProvider: react.Provider<_chakra_ui_descendant_dist_descendant.DescendantsManager<HTMLInputElement, {}>>;
declare const useOtpInputDescendantsContext: () => _chakra_ui_descendant_dist_descendant.DescendantsManager<HTMLInputElement, {}>;
declare const useOtpInputDescendants: () => _chakra_ui_descendant_dist_descendant.DescendantsManager<HTMLInputElement, {}>;
declare const useOtpInputDescendant: (options?: {
    disabled?: boolean | undefined;
    id?: string | undefined;
} | undefined) => {
    descendants: _chakra_ui_descendant_dist_use_descendant.UseDescendantsReturn;
    index: number;
    enabledIndex: number;
    register: (node: HTMLInputElement | null) => void;
};
type UseOtpInputReturn = ReturnType<typeof useOtpInput>;
declare function useOtpInput(props: UseOtpInputProps): {
    getRootProps: PropGetter;
    getInputProps: PropGetter<Omit<_julo_ui_system.PropsOf<"input">, "ref"> & _julo_ui_system.JuloProps & {
        index: number;
    }>;
    fieldId: string;
    descendants: _chakra_ui_descendant_dist_descendant.DescendantsManager<HTMLInputElement, {}>;
    values: string[];
    setValue: (value: string, index: number, handleFocus?: boolean) => void;
    setValues: react.Dispatch<react.SetStateAction<string[]>>;
    clearValue: () => void;
};

interface OtpInputProps extends Omit<HTMLJuloProps<'div'>, keyof UseOtpInputProps>, UseOtpInputProps {
}
interface UseOtpInputProps {
    /**
     * If `true`, the otp input receives focus on mount
     */
    autoFocus?: boolean;
    /**
     * The value of the otp input. This is the value
     * that will be returned when the otp input is filled
     */
    value?: string;
    /**
     * The default value of the otp input
     */
    defaultValue?: string;
    /**
     * Function called on input change
     */
    onChange?: (value: string) => void;
    /**
     * Function called when all inputs have valid values
     */
    onComplete?: (value: string) => void;
    /**
     * The placeholder for the otp input
     */
    placeholder?: string;
    /**
     * If `true`, focus will move automatically to the next input once filled
     * @default true
     */
    manageFocus?: boolean;
    /**
     * If `true`, the otp input component signals to its fields that they should
     * use `autocomplete="one-time-code"`.
     *
     * @default true
     */
    otp?: boolean;
    /**
     * The top-level id string that will be applied to the input fields.
     * The index of the input will be appended to this top-level id.
     *
     * @example
     * if id="foo", the first input will have `foo-0`
     */
    id?: string;
    /**
     * If `true`, the otp input component is put in the disabled state
     */
    isDisabled?: boolean;
    /**
     * If `true`, the otp input component is put in the invalid state
     */
    isInvalid?: boolean;
    /**
     * The type of values the otp-input should allow
     */
    type?: 'alphanumeric' | 'number';
    /**
     * If `true`, the input's value will be masked just like `type=password`
     */
    mask?: boolean;
}
interface UseOtpInputContextProps extends Omit<UseOtpInputReturn, 'descendants' | 'getRootProps'>, Pick<UseOtpInputProps, 'isDisabled' | 'isInvalid'> {
}
interface OtpInputProviderProps {
    children: React.ReactNode;
    value: {
        descendants: DescendantsManager<HTMLInputElement>;
    } & UseOtpInputContextProps;
}

export { OtpInputDescendantsProvider as O, UseOtpInputReturn as U, useOtpInputDescendants as a, useOtpInputDescendant as b, useOtpInput as c, OtpInputProps as d, UseOtpInputProps as e, UseOtpInputContextProps as f, OtpInputProviderProps as g, useOtpInputDescendantsContext as u };