1"use client";2import * as React from "react";3import { Eye, EyeOff } from "lucide-react";4import { Input } from "@/components/ui/input";5import { cn } from "@/lib/utils";67export const PasswordInput = React.forwardRef<HTMLInputElement, Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & { invalid?: boolean }>(function PasswordInput(8 { className, invalid, ...props },9 ref,10) {11 const [show, setShow] = React.useState(false);12 return (13 <div className="relative">14 <Input ref={ref} type={show ? "text" : "password"} className={cn("pr-10", invalid && "border-danger focus:border-danger focus:ring-danger/25", className)} aria-invalid={invalid || undefined} {...props} />15 <button16 type="button"17 onClick={() => setShow((v) => !v)}18 className="absolute inset-y-0 right-0 flex w-10 items-center justify-center rounded-r-md text-fg-subtle transition-colors hover:text-fg"19 aria-label={show ? "Hide password" : "Show password"}20 aria-pressed={show}21 tabIndex={-1}22 >23 {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}24 </button>25 </div>26 );27});28