@corvu/otp-field/dist/index.d.ts

Unstyled, accessible and customizable UI primitives for SolidJS

import * as solid_js from 'solid-js';
import { Accessor, ValidComponent, JSX } from 'solid-js';
import { Ref, ElementOf } from '@corvu/utils/dom';
import { DynamicProps } from '@corvu/utils/dynamic';
export { DynamicProps } from '@corvu/utils/dynamic';

type OtpFieldContextValue = {
    /** The value of the OTP Field. */
    value: Accessor<string>;
    /** Whether the OTP Field is currently focused. */
    isFocused: Accessor<boolean>;
    /** Whether the OTP Field is currently hovered. */
    isHovered: Accessor<boolean>;
    /** Whether the user is currently inserting a value and a fake caret should be shown. */
    isInserting: Accessor<boolean>;
    /** The maximum number of chars in the OTP Field. */
    maxLength: Accessor<number>;
    /** The currently active slots in the OTP Field. */
    activeSlots: Accessor<number[]>;
    /** Whether to create extra space on the right for password managers. */
    shiftPWManagers: Accessor<boolean>;
};
/** Context which exposes various properties to interact with the OTP Field. Optionally provide a contextId to access a keyed context. */
declare const useOtpFieldContext: (contextId?: string) => OtpFieldContextValue;

type OtpFieldInputCorvuProps = {
    /**
     * Regex pattern for the input. `null` disables the pattern and allow all chars.
     * @defaultValue `'^\\d*$'`
     */
    pattern?: string | null;
    /** Override the styles to apply when JavaScript is disabled. corvu provides a default for this but you're free to define your own styling. `null` disables the fallback. */
    noScriptCSSFallback?: string | null;
    /**
     * The `id` of the OTP Field context. Useful if you have nested OTP Fields and want to create components that belong to an OTP Field higher up in the tree.
     */
    contextId?: string;
};
type OtpFieldInputSharedElementProps<T extends ValidComponent = 'input'> = {
    ref: Ref<ElementOf<T>>;
    onInput: JSX.EventHandlerUnion<ElementOf<T>, InputEvent>;
    onFocus: JSX.EventHandlerUnion<ElementOf<T>, FocusEvent>;
    onBlur: JSX.EventHandlerUnion<ElementOf<T>, FocusEvent>;
    onMouseOver: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
    onMouseLeave: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
    onKeyDown: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
    onKeyUp: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
    inputMode: string;
    autocomplete: string | undefined;
    disabled: boolean | undefined;
    spellcheck: boolean | undefined;
    style: string | JSX.CSSProperties;
};
type OtpFieldInputElementProps = OtpFieldInputSharedElementProps & {
    pattern: string | undefined;
    'data-corvu-otp-field-input': '' | null;
};
type OtpFieldInputProps<T extends ValidComponent = 'input'> = OtpFieldInputCorvuProps & Partial<OtpFieldInputSharedElementProps<T>>;
/** The hidden input element for the OTP Field.
 *
 * @data `data-corvu-otp-field-input` - Present on every OTP Field input element.
 */
declare const OtpFieldInput: <T extends ValidComponent = "input">(props: DynamicProps<T, OtpFieldInputProps<T>>) => JSX.Element;

type OtpFieldRootCorvuProps = {
    /** Max number of chars. Is required. */
    maxLength: number;
    /** The value of the OTP Field. */
    value?: string;
    /** Callback fired when the OTP Field value changes. */
    onValueChange?: (value: string) => void;
    /** Callback fired when the OTP Field is filled. */
    onComplete?: (value: string) => void;
    /**
     * Whether to create extra space on the right for password managers.
     * @defaultValue `true`
     */
    shiftPWManagers?: boolean;
    /**
     * The `id` of the OTP Field context. Useful if you have nested OTP Fields and want to create components that belong to an OTP Field higher up in the tree.
     */
    contextId?: string;
};
type OtpFieldRootSharedElementProps<T extends ValidComponent = 'div'> = {
    ref: Ref<ElementOf<T>>;
    style: string | JSX.CSSProperties;
    children: JSX.Element | ((props: OtpFieldRootChildrenProps) => JSX.Element);
};
type OtpFieldRootElementProps = OtpFieldRootSharedElementProps & {
    'data-corvu-otp-field-root': '' | null;
};
type OtpFieldRootProps<T extends ValidComponent = 'div'> = OtpFieldRootCorvuProps & Partial<OtpFieldRootSharedElementProps<T>>;
/** Props that are passed to the Root component children callback. */
type OtpFieldRootChildrenProps = {
    /** The value of the OTP Field. */
    value: string;
    /** Whether the OTP Field is currently focused. */
    isFocused: boolean;
    /** Whether the OTP Field is currently hovered. */
    isHovered: boolean;
    /** Whether the user is currently inserting a value and a fake caret should be shown. */
    isInserting: boolean;
    /** The maximum number of chars in the OTP Field. */
    maxLength: number;
    /** The currently active slots in the OTP Field. */
    activeSlots: number[];
    /** Whether to create extra space on the right for password managers. */
    shiftPWManagers: boolean;
};
/** OTP Field root component. Is the wrapper to position the hidden OTP Field input element and provides the context.
 *
 * @data `data-corvu-otp-field-root` - Present on every OTP Field root element.
 */
declare const OtpFieldRoot: <T extends ValidComponent = "div">(props: DynamicProps<T, OtpFieldRootProps<T>>) => JSX.Element;

declare const OtpField: (<T extends solid_js.ValidComponent = "div">(props: DynamicProps<T, OtpFieldRootProps<T>>) => solid_js.JSX.Element) & {
    Input: <T extends solid_js.ValidComponent = "input">(props: DynamicProps<T, OtpFieldInputProps<T>>) => solid_js.JSX.Element;
    useContext: (contextId?: string) => OtpFieldContextValue;
};

export { type OtpFieldContextValue as ContextValue, OtpFieldInput as Input, type OtpFieldInputCorvuProps as InputCorvuProps, type OtpFieldInputElementProps as InputElementProps, type OtpFieldInputProps as InputProps, type OtpFieldInputSharedElementProps as InputSharedElementProps, OtpFieldRoot as Root, type OtpFieldRootChildrenProps as RootChildrenProps, type OtpFieldRootCorvuProps as RootCorvuProps, type OtpFieldRootElementProps as RootElementProps, type OtpFieldRootProps as RootProps, type OtpFieldRootSharedElementProps as RootSharedElementProps, OtpField as default, useOtpFieldContext as useContext };