eeff292
import { IconEye as Eye, IconEyeOff as EyeOff } from '@tabler/icons-react'
export interface RevealToggleProps {
revealed: boolean
onToggle: () => void
label?: string
}
/** Trailing show/hide toggle for passphrase fields. */
export function RevealToggle({ revealed, onToggle, label = 'passphrase' }: RevealToggleProps) {
return (
<button
type="button"
onClick={onToggle}
aria-label={revealed ? `Hide ${label}` : `Reveal ${label}`}
className="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
>
{revealed ? <EyeOff size={16} aria-hidden /> : <Eye size={16} aria-hidden />}
</button>
)
}