beta-parity-react/ui/PINField/index.d.ts

Beta Parity React Components

import React from 'react';
import './index.css';
declare const sizeMap: {
    readonly sm: "small";
    readonly md: "medium";
};
/**
 * Props for the PINField component.
 *
 * Extends properties from the `HTMLDivElement` element.
 */
export interface PINFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    /**
     * Controls the visibility of the PIN values.
     *
     * @default false
     * @memberof PINFieldProps
     */
    masked?: boolean;
    /**
     * Configuration for groups of inputs and their separators.
     * Each number in the array represents a group length.
     * Example: [2, 3, 2] will render 2 inputs, then a separator, then 3 inputs,
     * then a separator, then 2 inputs.
     *
     * @default [4]
     * @memberof PINFieldProps
     */
    groups?: number[];
    /**
     * The class name for the PIN field.
     *
     * @default ""
     * @memberof PINFieldProps
     */
    value?: string;
    /**
     * The separator character to use between groups.
     *
     * @default "-"
     * @memberof PINFieldProps
     */
    separator?: string;
    /**
     * Flag to reset the PIN field. When changed to true, the field will clear all inputs.
     * Should be reset to false after handling.
     *
     * @default false
     * @memberof PINFieldProps
     */
    reset?: boolean;
    /**
     * Indicates whether the field is in a read-only state.
     *
     * @default false
     * @memberof PINFieldProps
     */
    readOnly?: boolean;
    /**
     * Indicates whether the field is disabled.
     *
     * @default false
     * @memberof PINFieldProps
     */
    disabled?: boolean;
    /**
     * Indicates whether the field is in an invalid state.
     *
     * @default false
     * @memberof PINFieldProps
     */
    invalid?: boolean;
    /**
     * The size of the PIN field inputs.
     *
     * @default "medium"
     * @memberof PINFieldProps
     */
    size?: keyof typeof sizeMap;
    /**
     * Define the theme of the PIN field.
     *
     * @default "default"
     * @memberof PINFieldProps
     */
    theme?: 'default' | 'alternative';
    /**
     * The callback function that is called when the PIN value changes.
     *
     * @param {string} value - The current complete PIN value.
     * @memberof PINFieldProps
     */
    onChange?: (value: string) => void;
    /**
     * The callback function that is called when all inputs are filled.
     *
     * @param {string} value - The complete PIN value.
     * @memberof PINFieldProps
     */
    onComplete?: (value: string) => void;
    /**
     * The placeholder character to display in empty inputs.
     *
     * @default "•"
     * @memberof PINFieldProps
     */
    placeholder?: string;
}
/**
 * **Parity PINField**
 *
 * @see {@link https://beta-parity-react.vercel.app/pinfield Parity PINField}
 */
export declare const PINField: React.ForwardRefExoticComponent<PINFieldProps & React.RefAttributes<HTMLDivElement>>;
export {};
//# sourceMappingURL=index.d.ts.map