{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "headless-popover-demo",
  "type": "registry:ui",
  "title": "Headless Popover Demo",
  "description": "Demo showing an animated headless popover.",
  "registryDependencies": [
    "button",
    "input",
    "label",
    "https://animate-ui.com/r/headless-popover"
  ],
  "files": [
    {
      "path": "registry/demo/headless/popover/index.tsx",
      "content": "'use client';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport {\n  Popover,\n  PopoverButton,\n  PopoverPanel,\n} from '@/components/animate-ui/headless/popover';\n\nexport function RadixPopoverDemo() {\n  return (\n    <Popover>\n      <PopoverButton as={Button} variant=\"outline\">\n        Open popover\n      </PopoverButton>\n      <PopoverPanel className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"font-medium leading-none\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverPanel>\n    </Popover>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/headless/popover.tsx"
    }
  ]
}