{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "password-input",
  "title": "Password Input",
  "author": "Matthew Blode",
  "description": "A password input with a toggle button to show or hide the password.",
  "dependencies": ["blode-icons-react"],
  "registryDependencies": ["input"],
  "files": [
    {
      "path": "ui/password-input.tsx",
      "content": "\"use client\";\n\nimport { EyeOpenIcon, EyeSlashIcon } from \"blode-icons-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"@/components/ui/input\";\nimport type { InputProps } from \"@/components/ui/input\";\n\nexport interface PasswordInputProps extends Omit<InputProps, \"type\"> {\n  defaultShowPassword?: boolean;\n  onShowPasswordChange?: (showPassword: boolean) => void;\n  ref?: React.Ref<HTMLInputElement>;\n  showPassword?: boolean;\n}\n\nexport const PasswordInput = ({\n  className,\n  defaultShowPassword = false,\n  disabled,\n  onShowPasswordChange,\n  ref,\n  showPassword: showPasswordProp,\n  ...props\n}: PasswordInputProps) => {\n  const [internalShowPassword, setInternalShowPassword] = useState(defaultShowPassword);\n  const isVisible = showPasswordProp ?? internalShowPassword;\n\n  return (\n    <Input\n      {...props}\n      className={cn(\"pr-10\", className)}\n      disabled={disabled}\n      ref={ref}\n      rightControl={\n        <button\n          aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n          className=\"flex h-[var(--field-height)] cursor-pointer items-center justify-center rounded-[min(var(--radius-md),12px)] px-3 text-muted-foreground/70 outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\"\n          disabled={disabled}\n          onClick={() => {\n            const next = !isVisible;\n            setInternalShowPassword(next);\n            onShowPasswordChange?.(next);\n          }}\n          type=\"button\"\n        >\n          {isVisible ? <EyeSlashIcon className=\"size-5\" /> : <EyeOpenIcon className=\"size-5\" />}\n        </button>\n      }\n      type={isVisible ? \"text\" : \"password\"}\n    />\n  );\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}