d1a56f0529
111 files across 14 directories: common, tree-editor, kb-accelerator, copilot, assistant, analytics, library, procedural, procedural-editor, public, script-editor, ui, admin, step-library. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
33 lines
970 B
TypeScript
33 lines
970 B
TypeScript
import { useState } from 'react'
|
|
import { Eye, EyeOff } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
className?: string
|
|
}
|
|
|
|
export function PasswordInput({ className, ...props }: PasswordInputProps) {
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
return (
|
|
<div className="relative">
|
|
<input
|
|
{...props}
|
|
type={visible ? 'text' : 'password'}
|
|
className={cn(className, 'pr-10')}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setVisible((v) => !v)}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
|
|
tabIndex={-1}
|
|
title={visible ? 'Hide password' : 'Show password'}
|
|
>
|
|
{visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PasswordInput
|