main
import {
IconAlertCircle as AlertCircle,
IconEye as Eye,
IconEyeOff as EyeOff,
IconKey as KeyRound,
IconLock as LockKeyhole,
IconMail as Mail,
IconUser as UserRound,
} from '@tabler/icons-react'
import { useState } from 'react'
import { t } from '@/shared/i18n'
export interface FieldProps {
name: string
label: string
value: string
onInput?: (value: string) => void
placeholder?: string
type?: 'text' | 'email' | 'password'
icon?: 'mail' | 'lock' | 'user' | 'key'
helper?: string
error?: string
autoComplete?: string
disabled?: boolean
readOnly?: boolean
maxLength?: number
}
const fieldIcons = { mail: Mail, lock: LockKeyhole, user: UserRound, key: KeyRound }
export function Field({
name,
label,
value,
onInput,
placeholder,
type = 'text',
icon = 'mail',
helper,
error,
autoComplete,
disabled,
readOnly,
maxLength,
}: FieldProps) {
const [show, setShow] = useState(false)
const Icon = fieldIcons[icon]
const description = error || helper
return (
<div className="flex min-w-0 flex-col gap-2">
<label htmlFor={name} className="text-sm leading-normal font-medium">
{label}
</label>
<div
className={`flex h-12 items-center gap-3 rounded-lg border bg-field pl-3 transition-colors focus-within:border-focus ${error ? 'border-danger' : 'border-control-border'} ${disabled ? 'bg-disabled text-disabled-ink' : ''}`}
>
<Icon size={18} className="shrink-0 text-icon" strokeWidth={1.6} />
<input
id={name}
name={name}
type={type === 'password' && show ? 'text' : type}
value={value}
onChange={(event) => onInput?.(event.currentTarget.value)}
placeholder={placeholder}
autoComplete={autoComplete}
disabled={disabled}
readOnly={readOnly}
maxLength={maxLength}
autoCapitalize="none"
spellCheck={false}
aria-invalid={!!error}
aria-describedby={description ? `${name}-description` : undefined}
className={`h-full min-w-0 flex-1 border-0 bg-transparent text-base text-ink outline-none placeholder:text-muted disabled:cursor-not-allowed ${type === 'email' ? 'font-latin' : ''} ${type === 'password' ? '' : 'pr-3'}`}
/>
{type === 'password' && (
<button
type="button"
disabled={disabled}
aria-label={show ? t('ui.field.conceal', { label }) : t('ui.field.reveal', { label })}
aria-pressed={show}
onClick={() => setShow(!show)}
className="mr-px flex size-11 shrink-0 items-center justify-center rounded-md text-icon hover:text-ink"
>
{show ? <Eye size={18} strokeWidth={1.6} /> : <EyeOff size={18} strokeWidth={1.6} />}
</button>
)}
</div>
{description && (
<p
id={`${name}-description`}
className={`flex items-start gap-1 text-xs leading-normal ${error ? 'text-danger' : 'text-muted'}`}
>
{error && <AlertCircle size={14} className="mt-0.5 shrink-0" />}
{description}
</p>
)}
</div>
)
}