{
  "name": "ui-components-passwordinput",
  "type": "registry:component",
  "dependencies": [
    "@radix-ui/react-icons"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui-components/PasswordInput.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { EyeClosedIcon, EyeOpenIcon } from \"@radix-ui/react-icons\";\nimport React from \"react\";\nimport { cn } from \"<%- config.aliases.utils %>\";\nimport { Button } from \"../ui/button\";\nimport { Input } from \"../ui/input\";\nimport { Label } from \"../ui/label\";\n\nexport interface PasswordInputProps {\n\tlabel?: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tplaceholder?: string;\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tminLength?: number;\n\tshowHint?: boolean;\n\thintText?: string;\n\tautoComplete?: \"current-password\" | \"new-password\";\n\thasError?: boolean;\n\tautoFocus?: boolean;\n\tclassName?: string;\n\tsize?: \"default\" | \"sm\" | \"lg\";\n\tid?: string;\n\tonVisibilityChange?: (visible: boolean) => void;\n\tdefaultVisible?: boolean;\n}\n\nexport function PasswordInput({\n\tlabel = \"Password\",\n\tvalue,\n\tonChange,\n\tplaceholder = \"Enter your password\",\n\tdisabled = false,\n\trequired = true,\n\tminLength = 8,\n\tshowHint = false,\n\thintText,\n\tautoComplete = \"current-password\",\n\thasError = false,\n\tautoFocus = false,\n\tclassName = \"\",\n\tsize = \"default\",\n\tid,\n\tonVisibilityChange,\n\tdefaultVisible = false,\n}: PasswordInputProps) {\n\tconst [isVisible, setIsVisible] = React.useState(defaultVisible);\n\tconst [isFocused, setIsFocused] = React.useState(false);\n\tconst inputId =\n\t\tid || `password-input-${Math.random().toString(36).substr(2, 9)}`;\n\n\tconst handleVisibilityToggle = () => {\n\t\tconst newVisibility = !isVisible;\n\t\tsetIsVisible(newVisibility);\n\t\tonVisibilityChange?.(newVisibility);\n\t};\n\n\treturn (\n\t\t<div className={cn(\"space-y-2 w-full\", className)}>\n\t\t\t{label && (\n\t\t\t\t<Label htmlFor={inputId} className=\"text-sm font-medium\">\n\t\t\t\t\t{label}\n\t\t\t\t</Label>\n\t\t\t)}\n\n\t\t\t<div className=\"relative\">\n\t\t\t\t<Input\n\t\t\t\t\tid={inputId}\n\t\t\t\t\ttype={isVisible ? \"text\" : \"password\"}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n\t\t\t\t\t\tonChange(e.target.value)\n\t\t\t\t\t}\n\t\t\t\t\tonFocus={() => setIsFocused(true)}\n\t\t\t\t\tonBlur={() => setIsFocused(false)}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\trequired={required}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tautoComplete={autoComplete}\n\t\t\t\t\tautoFocus={autoFocus}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pr-10\",\n\t\t\t\t\t\thasError && \"border-destructive focus:ring-destructive\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={handleVisibilityToggle}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute right-0 top-0 h-10 w-10 hover:bg-transparent\",\n\t\t\t\t\t\t!isFocused && \"text-muted-foreground\",\n\t\t\t\t\t\tisFocused && isVisible && \"text-accent-foreground\",\n\t\t\t\t\t\tisFocused && !isVisible && \"text-secondary-foreground\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{isVisible ? (\n\t\t\t\t\t\t<EyeOpenIcon className=\"h-4 w-4\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<EyeClosedIcon className=\"h-4 w-4\" />\n\t\t\t\t\t)}\n\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\t{isVisible ? \"Hide password\" : \"Show password\"}\n\t\t\t\t\t</span>\n\t\t\t\t</Button>\n\t\t\t</div>\n\n\t\t\t{showHint && (\n\t\t\t\t<p className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t{hintText || `Minimum ${minLength} characters`}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/passwordinput.tsx"
    }
  ]
}