{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "import { InfoIcon } from \"lucide-react\";\nimport { InputGroup } from \"~/registry/ui/input-group\";\nimport { Label } from \"~/registry/ui/label\";\nimport { Tooltip } from \"~/registry/ui/tooltip\";\n\nexport function InputGroupLabelDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup.Root>\n        <InputGroup.Input id=\"email\" placeholder=\"shadcn\" />\n        <InputGroup.Addon>\n          <Label htmlFor=\"email\">@</Label>\n        </InputGroup.Addon>\n      </InputGroup.Root>\n      <InputGroup.Root>\n        <InputGroup.Input id=\"email-2\" placeholder=\"shadcn@vercel.com\" />\n        <InputGroup.Addon align=\"block-start\">\n          <Label className=\"text-foreground\" htmlFor=\"email-2\">\n            Email\n          </Label>\n          <Tooltip.Root>\n            <InputGroup.Button\n              aria-label=\"Help\"\n              className=\"ml-auto rounded-full\"\n              size=\"icon-xs\"\n              variant=\"ghost\"\n            >\n              <InfoIcon />\n            </InputGroup.Button>\n\n            <Tooltip.Content>\n              <p>We&apos;ll use this to send you notifications</p>\n\n              <Tooltip.Arrow />\n            </Tooltip.Content>\n          </Tooltip.Root>\n        </InputGroup.Addon>\n      </InputGroup.Root>\n    </div>\n  );\n}\n",
      "path": "src/registry/examples/input-group/input-group-label-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "input-group-label-demo",
  "registryDependencies": [
    "@kanpeki/input-group",
    "@kanpeki/label"
  ],
  "type": "registry:example"
}