{
  "name": "popover",
  "type": "registry:ui",
  "title": "Popover",
  "description": "A floating panel anchored to a trigger element.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "cn@^0.3.0"
  ],
  "registryDependencies": [
    "https://raw.githubusercontent.com/wunder-ui/wunderui/main/r/styles.json"
  ],
  "files": [
    {
      "path": "components/ui/popover.tsx",
      "type": "registry:ui",
      "target": "components/ui/popover.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  sideOffset = 8,\n  side,\n  align,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, \"sideOffset\" | \"side\" | \"align\" | \"anchor\">) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner className=\"isolate z-50 outline-none\" sideOffset={sideOffset} side={side} align={align} anchor={anchor}>\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"z-50 rounded-lg border border-border bg-popover [--surface:var(--popover)] p-3 text-sm text-popover-foreground shadow-lg outline-none\",\n            \"data-open:animate-in data-open:fade-in-0 origin-(--transform-origin) data-open:zoom-in-95 data-open:duration-base data-open:ease-overshoot data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-99 data-closed:duration-fast data-closed:ease-exit\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\n/** Closes the popover it sits in — render it as an icon button for an ×, or around Cancel/Apply. */\nfunction PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverClose }\n"
    },
    {
      "path": "lib/utils.ts",
      "type": "registry:lib",
      "target": "lib/utils.ts",
      "content": "import type { CnFunction } from \"cn\"\nimport { createCn } from \"cn/config\"\n\n/**\n * clsx + tailwind-merge, taught WunderUI's own theme utilities so they merge\n * in the right group: `text-label-sm` is a font size (not a text colour, which\n * dropped it next to `text-text-tertiary`), `bg-gradient-*` a background image\n * (not a colour that `bg-card` would remove), and the motion utilities\n * `ease-entrance …` and `duration-fast …` replace each other.\n */\nexport const cn: CnFunction = createCn({\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: [\"label-sm\"] }],\n      \"bg-image\": [\n        {\n          bg: [\n            \"gradient-primary\",\n            \"gradient-indigo\",\n            \"gradient-blue\",\n            \"gradient-purple\",\n            \"gradient-pink\",\n            \"gradient-red\",\n            \"gradient-orange\",\n            \"gradient-yellow\",\n            \"gradient-green\",\n            \"gradient-alternative\",\n            \"gradient-slate\",\n            \"gradient-dark\",\n          ],\n        },\n      ],\n      ease: [{ ease: [\"entrance\", \"exit\", \"move\", \"overshoot\", \"spring\"] }],\n      duration: [{ duration: [\"instant\", \"fast\", \"base\", \"slow\", \"deliberate\", \"ambient\"] }],\n    },\n  },\n})\n"
    }
  ],
  "docs": "https://wunderui.com/components/popover",
  "meta": {
    "group": "Feedback & Overlays",
    "exports": [
      "Popover",
      "PopoverClose",
      "PopoverContent",
      "PopoverTrigger"
    ]
  }
}