spb/polyllm

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