{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-popover",
  "type": "registry:ui",
  "title": "Popover",
  "dependencies": [
    "react-aria-components",
    "react",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/Popover.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {\n  OverlayArrow,\n  Popover as AriaPopover,\n  type PopoverProps as AriaPopoverProps\n} from 'react-aria-components/Popover';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport React from 'react';\nimport {tv} from 'tailwind-variants';\n\nexport interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {\n  showArrow?: boolean;\n  children: React.ReactNode;\n}\n\nconst styles = tv({\n  base: 'font-sans bg-white dark:bg-neutral-900/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas] shadow-2xl rounded-xl bg-clip-padding border border-black/10 dark:border-white/10 text-neutral-700 dark:text-neutral-300 outline-0 overflow-auto',\n  variants: {\n    isEntering: {\n      true: 'animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 ease-out duration-200'\n    },\n    isExiting: {\n      true: 'animate-out fade-out placement-bottom:slide-out-to-top-1 placement-top:slide-out-to-bottom-1 placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 ease-in duration-150'\n    }\n  }\n});\n\nexport function Popover({children, showArrow, className, ...props}: PopoverProps) {\n  let offset = showArrow ? 12 : 8;\n  return (\n    <AriaPopover\n      offset={offset}\n      {...props}\n      className={composeRenderProps(className, (className, renderProps) =>\n        styles({...renderProps, className})\n      )}>\n      {showArrow && (\n        <OverlayArrow className=\"group\">\n          <svg\n            width={12}\n            height={12}\n            viewBox=\"0 0 12 12\"\n            className=\"block fill-white dark:fill-[#1f1f21] forced-colors:fill-[Canvas] stroke-1 stroke-black/10 dark:stroke-neutral-700 forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90\">\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n      )}\n      {children}\n    </AriaPopover>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}