{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "type": "registry:ui",
  "title": "Popover",
  "description": "A small anchored surface for contextual information.",
  "categories": [
    "disclosure"
  ],
  "dependencies": [
    "@radix-ui/react-popover"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/components/popover/popover.tsx",
      "type": "registry:component",
      "target": "@components/xzero/popover/popover.tsx",
      "content": "\"use client\";\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport styles from \"./popover.module.css\";\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverClose = PopoverPrimitive.Close;\n\n/** The trigger anchors the panel, so it opts out of press-scale: a scaled rect measured on open would shift the panel as the trigger springs back. */\nexport const PopoverTrigger = forwardRef<\n  HTMLButtonElement,\n  ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>\n>(function PopoverTrigger({ className, ...props }, ref) {\n  return <PopoverPrimitive.Trigger {...props} ref={ref} className={[styles.anchor, className].filter(Boolean).join(\" \")}/>;\n});\n\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\nexport const PopoverContent = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(function PopoverContent({ className, align = \"start\", sideOffset = 6, collisionPadding = 10, ...props }, ref) {\n  return <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      {...props}\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      className={[styles.content, className].filter(Boolean).join(\" \")}\n    />\n  </PopoverPrimitive.Portal>;\n});\n\nPopoverContent.displayName = \"PopoverContent\";\n"
    },
    {
      "path": "registry/components/popover/popover.module.css",
      "type": "registry:component",
      "target": "@components/xzero/popover/popover.module.css",
      "content": "/* Press feedback on the anchor stays in color. Radix measures the trigger when the panel opens, so a scaled trigger would move the panel. */\n.anchor:active:not(:disabled) { transform: none; }\n.content {\n  --popover-x: 0px;\n  --popover-y: -5px;\n  z-index: 80;\n  min-width: 12rem;\n  max-width: min(22rem, calc(100vw - 20px));\n  padding: 1rem;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-panel);\n  background: var(--surface-raised);\n  color: var(--foreground);\n  box-shadow: var(--shadow-floating);\n  transform-origin: var(--radix-popover-content-transform-origin);\n  transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring);\n}\n/* The panel starts a few pixels toward its trigger and settles on a spring; it leaves faster than it arrives.\n   Transitions instead of keyframes, so a close that interrupts the open, or a reopen during the close, reverses from where the panel is. */\n.content[data-side=\"top\"] { --popover-y: 5px; }\n.content[data-side=\"left\"] { --popover-x: 5px; --popover-y: 0px; }\n.content[data-side=\"right\"] { --popover-x: -5px; --popover-y: 0px; }\n@starting-style {\n  .content[data-state=\"open\"] { opacity: 0; transform: translate(var(--popover-x), var(--popover-y)) scale(.97); }\n}\n/* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */\n.content[data-state=\"closed\"] { opacity: 0; transform: translate(calc(var(--popover-x) * .5), calc(var(--popover-y) * .5)) scale(.98); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); animation: popover-exit var(--duration-fast) linear both; pointer-events: none; }\n.content:focus { outline: none; }\n@keyframes popover-exit { to { --popover-exit: 1; } }\n@media (prefers-reduced-motion: reduce) {\n  .content, .content[data-state=\"closed\"] { transform: none; transition: opacity var(--duration-instant) var(--ease-standard); }\n}\n"
    }
  ],
  "docs": "Docs and live preview: https://ui.xzero.co.uk/components/popover",
  "meta": {
    "tier": "free",
    "kind": "component",
    "tags": [
      "overlay",
      "menu"
    ],
    "docs": "https://ui.xzero.co.uk/components/popover",
    "markdown": "https://ui.xzero.co.uk/components/popover/markdown"
  }
}