{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "title": "Popover",
  "dependencies": [
    "@base-ui/react",
    "react-remove-scroll"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/recipes.json",
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/use-media-query.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/popover.tsx",
      "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { createContext, useContext } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  mobilePopupBackdrop,\n  mobilePopupSurface,\n  popupSurface,\n} from \"@/lib/recipes\";\nimport {\n  MOBILE_MEDIA_QUERY,\n  useMediaQuery,\n} from \"../hooks/use-media-query\";\n\nexport type PopoverSide = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nconst PopoverMobileContext = createContext(false);\n\nexport interface PopoverProps\n  extends Omit<\n    React.ComponentProps<typeof PopoverPrimitive.Root>,\n    \"children\"\n  > {\n  children: React.ReactNode;\n}\n\n/** Floating panel anchored to a trigger. Use for notification lists,\n *  filter panels, mini-forms, and any arbitrary content that Menu /\n *  Tooltip / Modal don't fit. */\nexport function Popover({\n  children,\n  modal,\n  ...props\n}: PopoverProps): React.ReactElement {\n  const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY);\n\n  return (\n    <PopoverPrimitive.Root\n      data-slot=\"popover\"\n      modal={isMobile ? true : modal}\n      {...props}\n    >\n      <PopoverMobileContext.Provider value={isMobile}>\n        {children}\n      </PopoverMobileContext.Provider>\n    </PopoverPrimitive.Root>\n  );\n}\n\nexport type PopoverTriggerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Trigger\n>;\n\nexport function PopoverTrigger(\n  props: PopoverTriggerProps,\n): React.ReactElement {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nexport interface PopoverContentProps\n  extends Omit<\n    React.ComponentProps<typeof PopoverPrimitive.Popup>,\n    \"children\"\n  > {\n  /** Desktop placement. Mobile uses a centered modal surface. */\n  side?: PopoverSide;\n  /** Desktop alignment. Mobile uses a centered modal surface. */\n  align?: PopoverAlign;\n  /** Desktop trigger offset. Mobile uses viewport gutters. */\n  sideOffset?: number;\n  /** Desktop positioning anchor. Defaults to the Popover trigger. */\n  anchor?: React.ComponentProps<typeof PopoverPrimitive.Positioner>[\"anchor\"];\n  /** Optional desktop arrow pointing at the trigger. */\n  arrow?: boolean;\n  children?: React.ReactNode;\n}\n\nexport function PopoverContent({\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 6,\n  anchor,\n  arrow,\n  className,\n  children,\n  ...props\n}: PopoverContentProps): React.ReactElement {\n  const isMobile = useContext(PopoverMobileContext);\n\n  if (isMobile) {\n    return (\n      <PopoverPrimitive.Portal>\n        <RemoveScroll>\n        <PopoverPrimitive.Backdrop\n          data-slot=\"popover-backdrop\"\n          className={mobilePopupBackdrop}\n        />\n        <PopoverPrimitive.Positioner className=\"contents\">\n          <PopoverPrimitive.Popup\n            data-slot=\"popover-content\"\n            data-mobile=\"true\"\n            className={cn(\n              mobilePopupSurface,\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </PopoverPrimitive.Popup>\n        </PopoverPrimitive.Positioner>\n        </RemoveScroll>\n      </PopoverPrimitive.Portal>\n    );\n  }\n\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        anchor={anchor}\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className=\"z-[70]\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            popupSurface,\n            \"min-w-[220px] transition-[opacity,scale] duration-[var(--duration-state)] ease-[var(--ease-standard)]\",\n            \"data-starting-style:scale-[0.97] data-starting-style:opacity-0\",\n            \"data-ending-style:scale-[0.97] data-ending-style:opacity-0\",\n            className,\n          )}\n          {...props}\n        >\n          {arrow && (\n            <PopoverPrimitive.Arrow className=\"fill-[color:var(--layer-1)] stroke-[color:var(--hairline-soft)] stroke-1\" />\n          )}\n          {children}\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport type PopoverCloseProps = React.ComponentProps<\n  typeof PopoverPrimitive.Close\n>;\n\n/** Dismisses the popover on click. Wrap a Button via `render`. */\nexport function PopoverClose(props: PopoverCloseProps): React.ReactElement {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nexport { PopoverPrimitive };\n",
      "type": "registry:ui",
      "target": "components/ui/popover.tsx"
    }
  ],
  "type": "registry:ui"
}