Password Input

1"use client"
2
3import * as React from "react"
4import { Input } from "./input"
5import { cn } from "@/lib/utils"
6import { Button } from "./button"
7import { Eye, EyeOff } from "lucide-react"
8
9const PasswordInput = ({
10  className,
11  ...props
12}: React.InputHTMLAttributes<HTMLInputElement>) => {
13  const [showPassword, setShowPassword] = React.useState(false)
14
15  const handleTogglePasswordVisibility = () => {
16    setShowPassword((prev) => !prev)
17  }
18
19  return (
20    <div className="relative">
21      <Input
22        type={showPassword ? "text" : "password"}
23        className={cn("pr-10", className)}
24        {...props}
25      />
26      <Button
27        type="button"
28        variant="ghost"
29        size="icon"
30        className="absolute right-0 top-0 hover:bg-transparent"
31        onClick={handleTogglePasswordVisibility}
32      >
33        {showPassword ? (
34          <EyeOff className="size-4 text-muted-foreground" />
35        ) : (
36          <Eye className="size-4 text-muted-foreground" />
37        )}
38        <span className="sr-only">
39          {showPassword ? "Hide password" : "Show password"}
40        </span>
41      </Button>
42    </div>
43  )
44}
45
46export { PasswordInput }