43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import React, { ComponentProps } from 'react';
|
|
import { Eye, EyeOff, Lock } from 'lucide-react';
|
|
import { Input } from './Input';
|
|
import { Box } from './primitives/Box';
|
|
|
|
interface PasswordFieldProps extends ComponentProps<typeof Input> {
|
|
showPassword?: boolean;
|
|
onTogglePassword?: () => void;
|
|
}
|
|
|
|
/**
|
|
* PasswordField
|
|
*
|
|
* A specialized input for passwords with visibility toggling.
|
|
* Stateless UI component.
|
|
*/
|
|
export function PasswordField({ showPassword, onTogglePassword, ...props }: PasswordFieldProps) {
|
|
return (
|
|
<Box position="relative" fullWidth>
|
|
<Input
|
|
{...props}
|
|
type={showPassword ? 'text' : 'password'}
|
|
icon={<Lock size={16} />}
|
|
/>
|
|
{onTogglePassword && (
|
|
<Box
|
|
as="button"
|
|
type="button"
|
|
onClick={onTogglePassword}
|
|
position="absolute"
|
|
right="3"
|
|
top={props.label ? "34px" : "50%"}
|
|
style={props.label ? {} : { transform: 'translateY(-50%)' }}
|
|
zIndex={10}
|
|
className="text-gray-500 hover:text-gray-300 transition-colors"
|
|
>
|
|
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|