{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "password-input",
  "title": "Password Input",
  "description": "An input component for passwords with a visibility toggle.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/flowui/components/password-input.tsx",
      "content": "// This component extends Shadcn UI's input\r\n\r\n\"use client\";\r\n\r\ntype PasswordInputProps = {\r\n    className?: string;\r\n    containerClassName?: string;\r\n    iconClassName?: string;\r\n    visibleIcon?: LucideIcon;\r\n    hiddenIcon?: LucideIcon;\r\n} & ComponentPropsWithoutRef<\"input\">;\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Eye, EyeOff, LucideIcon } from \"lucide-react\";\r\nimport { ComponentPropsWithoutRef, forwardRef, ReactNode, useState } from \"react\";\r\n\r\nexport const PasswordInput = forwardRef<\r\n    HTMLInputElement,\r\n    PasswordInputProps\r\n>(\r\n    ({\r\n        className,\r\n        containerClassName,\r\n        iconClassName,\r\n        disabled,\r\n        visibleIcon = Eye,\r\n        hiddenIcon = EyeOff,\r\n        ...props\r\n    },\r\n        ref\r\n    ) => {\r\n        // State to handle password visibility\r\n        const [visible, setVisible] = useState<boolean>(false);\r\n\r\n        // Icon selection based on the visibility state\r\n        const Icon = visible ? visibleIcon : hiddenIcon;\r\n\r\n        // Function to handle the visibility toggle\r\n        const handleVisibility = () => {\r\n            if (!disabled) {\r\n                setVisible((prev) => !prev);\r\n            }\r\n        }\r\n        return (\r\n            <div\r\n                className={cn(\r\n                    \"relative flex items-center border rounded-md\",\r\n                    containerClassName\r\n                )}\r\n            >\r\n                <input\r\n                    ref={ref}\r\n                    type={visible ? \"text\" : \"password\"}\r\n                    disabled={disabled}\r\n                    className={cn(\r\n                        \"w-full flex rounded-md px-3 py-1.5 pe-10 focus:outline-0 disabled:cursor-not-allowed disabled:opacity-50\",\r\n                        className\r\n                    )}\r\n                    {...props}\r\n                />\r\n                <button\r\n                    type=\"button\"\r\n                    onClick={handleVisibility}\r\n                    disabled={disabled}\r\n                    aria-label={visible ? \"Hide password\" : \"Show password\"}\r\n                    className={cn(\r\n                        \"absolute right-0 me-3 inline-flex justify-center items-center\"\r\n                    )}\r\n                >\r\n                    <Icon\r\n                        className={cn(\r\n                            \"size-5 text-muted-foreground hover:text-foreground focus:outline-none\",\r\n                            disabled && \"hover:text-red-500\",\r\n                            iconClassName\r\n                        )}\r\n                    />\r\n                </button>\r\n            </div>\r\n        )\r\n    }\r\n);",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}