{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-09",
  "title": "With popover",
  "description": "Info button in the trailing addon opens a popover with helper content.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "input-group",
    "button",
    "popover"
  ],
  "files": [
    {
      "path": "registry/patterns/input/input-09.tsx",
      "content": "import { InfoIcon } from 'lucide-react'\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from '@/components/ui/input-group'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\n\nexport function Input09() {\n  return (\n    <InputGroup className=\"max-w-sm\">\n      <InputGroupInput placeholder=\"Enter password\" type=\"password\" />\n      <InputGroupAddon align=\"inline-end\">\n        <Popover>\n          <PopoverTrigger\n            render={\n              <InputGroupButton\n                aria-label=\"Password requirements\"\n                size=\"icon-xs\"\n              >\n                <InfoIcon />\n              </InputGroupButton>\n            }\n          />\n          <PopoverContent align=\"end\" className=\"w-64\">\n            <p className=\"font-medium\">Password requirements</p>\n            <ul className=\"text-muted-foreground list-inside list-disc space-y-1 text-sm\">\n              <li>At least 8 characters</li>\n              <li>One uppercase letter</li>\n              <li>One number or symbol</li>\n            </ul>\n          </PopoverContent>\n        </Popover>\n      </InputGroupAddon>\n    </InputGroup>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/input/input-09.tsx"
    }
  ],
  "type": "registry:block"
}