@snowball-tech/fractal/dist/InputPinCode/InputPinCode.types.d.ts

Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS

import { ReactNode, FocusEvent, ChangeEvent, ClipboardEvent, KeyboardEvent } from 'react';
import { InputTextProps } from '../InputText/InputText.types.js';
import '../Button/Button.types.js';
import '@snowball-tech/design-tokens/dist/web/typescript/constants';
import '../constants-QFINMz1u.js';
import '../Button/Button.constants.js';

interface InputPinCodeProps extends Omit<InputTextProps, 'button' | 'fullWidth' | 'onBlur' | 'onButtonClick' | 'onFocus' | 'onKeyDown' | 'placeholder' | 'prefix' | 'suffix' | 'type' | 'withButton'> {
    autoFocus?: boolean;
    defaultValue?: string;
    description?: ReactNode;
    disabled?: boolean;
    error?: Error | ReactNode;
    id?: string;
    label?: ReactNode;
    labelElement?: keyof HTMLElementTagNameMap;
    length?: number;
    name?: string;
    placeholders?: string | Array<string>;
    readOnly?: boolean;
    required?: boolean;
    split?: boolean | 'auto';
    splitAt?: number;
    success?: ReactNode;
    value?: string;
    wrapper?: Partial<{
        className: string;
    }>;
    onBlur?: (event: FocusEvent<HTMLInputElement>, index: number) => void;
    onChange?: (event: ChangeEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>, newCode: string) => void;
    onComplete?: (newCode: string) => void;
    onFieldChange?: (event: ChangeEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>, index: number, newDigit: string) => void;
    onFocus?: (event: FocusEvent<HTMLInputElement>, index: number) => void;
    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>, index: number) => void;
}

export type { InputPinCodeProps };