{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-08",
  "title": "With tooltip",
  "description": "Help icon in the trailing addon opens a tooltip on hover.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "input-group",
    "button",
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/patterns/input/input-08.tsx",
      "content": "import { CircleHelpIcon } from 'lucide-react'\n\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from '@/components/ui/input-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/ui/tooltip'\n\nexport function Input08() {\n  return (\n    <InputGroup className=\"max-w-sm\">\n      <InputGroupInput placeholder=\"API key\" />\n      <InputGroupAddon align=\"inline-end\">\n        <TooltipProvider delay={300}>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <InputGroupButton aria-label=\"API key help\" size=\"icon-xs\">\n                  <CircleHelpIcon />\n                </InputGroupButton>\n              }\n            />\n            <TooltipContent side=\"top\">\n              Find your API key in project settings under Integrations.\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </InputGroupAddon>\n    </InputGroup>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/input/input-08.tsx"
    }
  ],
  "type": "registry:block"
}