{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-07",
  "title": "Input with Adornment",
  "description": "An input with adornment component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "input",
    "button"
  ],
  "files": [
    {
      "path": "src/components/customized/input/input-07.tsx",
      "content": "\"use client\";\n\nimport { EyeIcon, EyeOffIcon, LockIcon, MailIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { Button } from \"@/registry/ui/button\";\n\nexport default function InputWithAdornmentDemo() {\n  const [showPassword, setShowPassword] = useState(false);\n\n  const togglePasswordVisibility = () => {\n    setShowPassword(!showPassword);\n  };\n\n  return (\n    <div className=\"w-full max-w-xs space-y-2\">\n      {/* <div className=\"relative flex items-center rounded-md border focus-within:ring-1 focus-within:ring-ring pl-2\"> */}\n      <InputGroup>\n        <InputGroupAddon>\n          <MailIcon className=\"text-muted-foreground\" />\n        </InputGroupAddon>\n        <InputGroupInput\n          className=\"border-0 shadow-none focus-visible:ring-0\"\n          placeholder=\"Email\"\n          type=\"email\"\n        />\n      </InputGroup>\n      {/* </div> */}\n      <InputGroup>\n        <InputGroupAddon>\n          <LockIcon className=\"text-muted-foreground\" />\n        </InputGroupAddon>\n        <InputGroupInput\n          className=\"border-0 shadow-none focus-visible:ring-0\"\n          placeholder=\"Password\"\n          type={showPassword ? \"text\" : \"password\"}\n        />\n\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton onClick={togglePasswordVisibility}>\n            {showPassword ? (\n              <EyeOffIcon className=\"size-4 text-muted-foreground\" />\n            ) : (\n              <EyeIcon className=\"size-4 text-muted-foreground\" />\n            )}\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <Button className=\"w-full\">Log In</Button>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}