@buun_group/brutalist-ui
Version:
A brutalist-styled component library
73 lines (72 loc) • 1.98 kB
TypeScript
/**
* @module InputOTP
* @description A one-time password input component that provides an intuitive interface for entering verification codes. Features automatic focus management, paste support, and full keyboard navigation.
*/
import { CSSProperties } from 'react';
/**
* Props for the InputOTP component
*/
export interface InputOTPProps {
/**
* Number of input fields to display
* @default 6
*/
length?: number;
/**
* Current value of the OTP input (controlled)
* @default ''
*/
value?: string;
/**
* Callback function called when the value changes
*/
onChange?: (value: string) => void;
/**
* Callback function called when all fields are filled
*/
onComplete?: (value: string) => void;
/**
* Visual variant for validation states
* @default 'default'
*/
variant?: 'default' | 'error' | 'success';
/**
* Size variant for the input fields
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/**
* Whether the input is disabled
* @default false
*/
disabled?: boolean;
/**
* Whether to automatically focus the first input on mount
* @default false
*/
autoFocus?: boolean;
/**
* Input type - 'text' allows any characters, 'number' restricts to digits only
* @default 'text'
*/
type?: 'text' | 'number';
/**
* Placeholder character to show in empty fields
* @default '•'
*/
placeholder?: string;
/**
* Additional CSS classes to apply to the container
*/
className?: string;
/**
* Custom inline styles (supports utility classes)
*/
style?: CSSProperties;
/**
* Whether to apply the brutalist shadow effect to input fields
* @default true
*/
brutalistShadow?: boolean;
}
export declare const InputOTP: import("react").ForwardRefExoticComponent<InputOTPProps & import("react").RefAttributes<HTMLDivElement>>;