{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-input",
  "title": "Password Input",
  "description": "Password field with a show/hide toggle.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input"
  ],
  "files": [
    {
      "path": "components/ui/password-input.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { forwardRef, useState } from 'react'\nimport { Eye, EyeOff } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { cn } from '@/lib/utils'\n\nconst PasswordInput = forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(\n  ({ className, ...props }, ref) => {\n    const [showPassword, setShowPassword] = useState(false)\n    const disabled =\n      props.value === '' || props.value === undefined || props.disabled\n\n    return (\n      <div className=\"relative\">\n        <Input\n          type={showPassword ? 'text' : 'password'}\n          className={cn('hide-password-toggle pr-10', className)}\n          ref={ref}\n          {...props}\n        />\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent\"\n          onClick={() => setShowPassword((prev) => !prev)}\n          disabled={disabled}\n        >\n          {showPassword && !disabled ? (\n            <Eye className=\"h-4 w-4\" aria-hidden=\"true\" />\n          ) : (\n            <EyeOff className=\"h-4 w-4\" aria-hidden=\"true\" />\n          )}\n          <span className=\"sr-only\">\n            {showPassword ? 'Hide password' : 'Show password'}\n          </span>\n        </Button>\n\n        {/* hides browsers password toggles */}\n        <style>{`\n\t\t\t\t\t.hide-password-toggle::-ms-reveal,\n\t\t\t\t\t.hide-password-toggle::-ms-clear {\n\t\t\t\t\t\tvisibility: hidden;\n\t\t\t\t\t\tpointer-events: none;\n\t\t\t\t\t\tdisplay: none;\n\t\t\t\t\t}\n\t\t\t\t`}</style>\n      </div>\n    )\n  },\n)\nPasswordInput.displayName = 'PasswordInput'\n\nexport { PasswordInput }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "input"
  ],
  "type": "registry:ui"
}