{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-components-radix-popover",
  "title": "Popover Demo",
  "description": "Demo showing a popover.",
  "registryDependencies": [
    "@animate-ui/components-radix-popover"
  ],
  "files": [
    {
      "path": "registry/demo/components/radix/popover/index.tsx",
      "content": "import {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n} from '@/components/animate-ui/components/radix/popover';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\ninterface RadixPopoverDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport const RadixPopoverDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: RadixPopoverDemoProps) => {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className=\"w-80\"\n      >\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"leading-none font-medium\">Dimensions</h4>\n            <p className=\"text-muted-foreground text-sm\">\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      </PopoverContent>\n    </Popover>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/components/radix/popover.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "PopoverContent": {
        "side": {
          "value": "bottom",
          "options": {
            "top": "top",
            "bottom": "bottom",
            "left": "left",
            "right": "right"
          }
        },
        "sideOffset": {
          "value": 4
        },
        "align": {
          "value": "center",
          "options": {
            "start": "start",
            "center": "center",
            "end": "end"
          }
        },
        "alignOffset": {
          "value": 0
        }
      }
    }
  },
  "type": "registry:ui"
}