{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-input",
  "type": "registry:ui",
  "title": "Password input",
  "description": "A password field with a show and hide toggle inside the input, an eye icon that swaps state and an accessible label. Supports sm, default and lg sizes in React.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/icon-button.json",
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/password-input.tsx",
      "type": "registry:ui",
      "target": "components/ui/password-input.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { inputVariants } from \"@/components/ui/input\"\nimport { IconButton } from \"@/components/ui/icon-button\"\n\ntype PasswordInputProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\"\n}\n\nfunction PasswordInput({ className, size = \"default\", id, disabled, ...props }: PasswordInputProps) {\n  const [show, setShow] = React.useState(false)\n  return (\n    <div className=\"relative\" data-slot=\"password-input\">\n      <input\n        id={id}\n        type={show ? \"text\" : \"password\"}\n        disabled={disabled}\n        className={cn(inputVariants({ size }), \"pr-10\", className)}\n        {...props}\n      />\n      <IconButton\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        aria-label={show ? \"Hide password\" : \"Show password\"}\n        disabled={disabled}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n        onClick={() => setShow((s) => !s)}\n      >\n        {show ? <EyeOffIcon /> : <EyeIcon />}\n      </IconButton>\n    </div>\n  )\n}\nexport { PasswordInput }\n"
    }
  ]
}