retro-react
Version:
A React component library for building retro-style websites
62 lines (61 loc) • 2.41 kB
TypeScript
/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
export declare type PasswordInputVariants = 'outlined' | 'filled' | 'terminal' | 'classic';
export declare type PasswordInputSizes = 'small' | 'medium' | 'large' | string;
export interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
/**
* The variant of the PasswordInput.
* - classic: Deep sunken Windows 95/98 dialog style with heavy inset shadow
* - filled: Prominent raised 3D button-like appearance with outer shadow
* - outlined: Clean flat design with simple border and focus ring
* - terminal: Subtle dark terminal aesthetic with soft green text
*
* @default 'filled'
*/
variant?: PasswordInputVariants;
/**
* The size of the PasswordInput.
* Supports predefined sizes: 'small', 'medium', 'large'
* Or custom size string for font-size
*
* @default 'medium'
*/
size?: PasswordInputSizes;
/**
* Whether to show a toggle button to reveal/hide the password.
*
* @default true
*/
showToggle?: boolean;
/**
* A function to be called when the password changes.
*/
onPasswordChange?: (password: string) => void;
/**
* Theme-UI sx prop for additional styling
*/
sx?: ThemeUICSSObject;
}
/**
* Retro-themed password input inspired by classic 90s computing aesthetics.
*
* Features four distinct authentic variants:
* - Classic: Deep sunken Windows 95/98 dialog inputs with heavy inset shadows
* - Filled: Prominent raised 3D button-style with outer drop shadows
* - Outlined: Clean flat design with simple borders and focus rings
* - Terminal: Subtle dark console style with soft phosphor green text
*
* @example
* // Deep Windows 95 sunken style
* <PasswordInput variant="classic" placeholder="Enter password..." />
*
* // Prominent 3D raised input (default)
* <PasswordInput placeholder="Enter password..." />
*
* // Clean flat outlined style
* <PasswordInput variant="outlined" placeholder="Password..." />
*
* // Subtle terminal style
* <PasswordInput variant="terminal" placeholder="Enter passphrase..." />
*/
export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;