{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "popover",
  "title": "Popover",
  "type": "registry:primitives",
  "description": "Floating card anchored to a trigger button for quick settings, filters, and inline forms.",
  "dependencies": [
    "@radix-ui/react-popover"
  ],
  "usage": "import { Popover, PopoverTrigger, PopoverContent, Button, Input, Label } from \"@etherealui/react\"\n\nexport function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Configure dimensions</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"space-y-3\">\n        <div className=\"text-xs font-semibold\">Dimensions</div>\n        <div className=\"space-y-1.5\">\n          <Label>Max width</Label>\n          <Input defaultValue=\"100%\" />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}",
  "files": [
    {
      "path": "packages/ui/src/primitives/tooltip.tsx",
      "target": "components/ui/popover.tsx",
      "type": "registry:primitives",
      "content": "import * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { cn } from \"../utils/cn\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\nconst Tooltip = TooltipPrimitive.Root\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 6, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-900 px-2.5 py-1.5 text-xs text-white shadow-md dark:border-zinc-800 dark:bg-zinc-100 dark:text-zinc-900\",\n        className\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nconst Popover = PopoverPrimitive.Root\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 6, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-xl border border-zinc-200 bg-white p-4 text-zinc-900 shadow-lg outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n}\n"
    }
  ]
}