{"name":"password-input","title":"Password Input","description":"Text input with visibility toggle for passwords.","type":"registry:ui","docs":"/components/password-input","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/input"],"files":[{"path":"components/ui/password-input.tsx","target":"components/ui/password-input.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\n\nimport { Input } from \"@/components/ui/input\";\n\nexport default function PasswordInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  const id = useId();\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n\n  return (\n    <div className=\"relative\">\n      <Input\n        id={id}\n        className={cn(\"pe-12\", className)}\n        placeholder=\"Password\"\n        type={isVisible ? \"text\" : \"password\"}\n        {...props}\n      />\n      <button\n        className=\"focus:z-10 absolute inset-y-0 flex justify-center items-center hover:bg-accent disabled:opacity-50 focus-visible:border-ring rounded-e-xl outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 w-12 h-full text-muted-foreground/80 hover:text-foreground transition-colors duration-200 disabled:cursor-not-allowed disabled:pointer-events-none end-0\"\n        type=\"button\"\n        onClick={toggleVisibility}\n        aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n        aria-pressed={isVisible}\n        aria-controls=\"password\"\n      >\n        {isVisible ? (\n          <EyeOffIcon size={16} aria-hidden=\"true\" />\n        ) : (\n          <EyeIcon size={16} aria-hidden=\"true\" />\n        )}\n      </button>\n    </div>\n  );\n}\n"}]}