{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "title": "Popover",
  "description": "Displays rich content in a portal, anchored to a trigger.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/base/ui/popover.tsx",
      "content": "\"use client\"\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * PopoverContent renders through a Portal, so it doesn't inherit `dir` from a\n * nearby wrapper (only from document.documentElement). PopoverTrigger\n * measures the ambient direction where it's actually rendered and pushes it\n * here so PopoverContent can apply it explicitly to the portaled popup.\n */\nconst PopoverDirContext = React.createContext<{\n  dir: \"ltr\" | \"rtl\"\n  setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n  const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n\n  return (\n    <PopoverDirContext.Provider value={contextValue}>\n      <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n    </PopoverDirContext.Provider>\n  )\n}\n\nfunction PopoverTrigger({\n  className,\n  ...props\n}: PopoverPrimitive.Trigger.Props) {\n  const ref = React.useRef<HTMLButtonElement>(null)\n  const { setDir } = React.useContext(PopoverDirContext)\n\n  React.useEffect(() => {\n    function update() {\n      if (!ref.current) return\n      setDir(getComputedStyle(ref.current).direction === \"rtl\" ? \"rtl\" : \"ltr\")\n    }\n\n    update()\n\n    const observer = new MutationObserver(update)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"dir\"],\n      subtree: true,\n    })\n\n    return () => observer.disconnect()\n  }, [setDir])\n\n  return (\n    <PopoverPrimitive.Trigger\n      ref={ref}\n      data-slot=\"popover-trigger\"\n      className={className}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverContent({\n  className,\n  sideOffset = 6,\n  align,\n  side,\n  children,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<PopoverPrimitive.Positioner.Props, \"align\" | \"side\"> & {\n    sideOffset?: number\n  }) {\n  const { dir } = React.useContext(PopoverDirContext)\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        dir={dir}\n        data-slot=\"popover-positioner\"\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        className=\"z-50 outline-none\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"w-72 origin-[var(--transform-origin)] rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md duration-150 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport { Popover, PopoverContent, PopoverTrigger }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}