{
  "name": "popover-style-primary",
  "title": "popover-style-default",
  "type": "registry:block",
  "registryDependencies": [
    "https://retroui.dev/r/popover.json",
    "https://retroui.dev/r/label.json",
    "https://retroui.dev/r/input.json",
    "https://retroui.dev/r/button.json"
  ],
  "dependencies": ["lucide-react"],
  "files": [
    {
      "path": "preview/components/popover-style-primary.tsx",
      "target": "components/retroui/preview/popover-style-primary.tsx",
      "type": "registry:block",
      "content": "\"use client\";\n\nimport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  Label,\n  Button,\n  Input,\n} from \"@/components/retroui\";\n\nexport default function PopoverStylePrimary() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button>Open Popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 font-sans\" variant=\"primary\">\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\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
    }
  ]
}