{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "title": "Popover",
  "description": "An accessible popup anchored to a button.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "@lumi-ui/arrow-svg"
  ],
  "files": [
    {
      "path": "registry/ui/popover.tsx",
      "content": "\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { ArrowSvg } from \"@/registry/ui/arrow-svg\";\n\nfunction Popover<Payload>(props: BasePopover.Root.Props<Payload>) {\n  return <BasePopover.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger<Payload>({\n  className,\n  ...props\n}: BasePopover.Trigger.Props<Payload>) {\n  return (\n    <BasePopover.Trigger\n      className={cn(\"relative select-none\", className)}\n      data-slot=\"popover-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverBackdrop({ className, ...props }: BasePopover.Backdrop.Props) {\n  return (\n    <BasePopover.Backdrop\n      className={cn(\"fixed inset-0\", className)}\n      data-slot=\"popover-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverPortal({ className, ...props }: BasePopover.Portal.Props) {\n  return (\n    <BasePopover.Portal\n      className={cn(className)}\n      data-slot=\"popover-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverPositioner({\n  className,\n  ...props\n}: BasePopover.Positioner.Props) {\n  return (\n    <BasePopover.Positioner\n      className={cn(\"max-w-(--available-width)\", className)}\n      data-slot=\"popover-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverPopup({ className, ...props }: BasePopover.Popup.Props) {\n  return (\n    <BasePopover.Popup\n      className={cn(\"relative\", className)}\n      data-slot=\"popover-popup\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverArrow({ className, ...props }: BasePopover.Arrow.Props) {\n  return (\n    <BasePopover.Arrow\n      className={cn(\n        \"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n        className,\n      )}\n      data-slot=\"popover-arrow\"\n      {...props}\n    >\n      <ArrowSvg />\n    </BasePopover.Arrow>\n  );\n}\n\nfunction PopoverTitle({ className, ...props }: BasePopover.Title.Props) {\n  return (\n    <BasePopover.Title\n      className={cn(\"text-base font-semibold\", className)}\n      data-slot=\"popover-title\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: BasePopover.Description.Props) {\n  return (\n    <BasePopover.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"popover-description\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverViewport({ className, ...props }: BasePopover.Viewport.Props) {\n  return (\n    <BasePopover.Viewport\n      className={cn(\"relative size-full\", className)}\n      data-slot=\"popover-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverClose({ className, ...props }: BasePopover.Close.Props) {\n  return (\n    <BasePopover.Close\n      className={cn(className)}\n      data-slot=\"popover-close\"\n      {...props}\n    />\n  );\n}\n\nfunction PopoverContent({\n  children,\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 8,\n  showArrow = false,\n  matchAnchorWidth = false,\n  ...props\n}: BasePopover.Popup.Props &\n  Pick<\n    BasePopover.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > & {\n    showArrow?: boolean;\n    matchAnchorWidth?: boolean;\n  }) {\n  return (\n    <BasePopover.Portal>\n      <BasePopover.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          matchAnchorWidth && \"w-(--anchor-width)\",\n          \"max-h-(--available-height)\",\n        )}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <BasePopover.Popup\n          className={cn(\n            \"relative p-3 bg-popover text-popover-foreground rounded-md shadow-md\",\n            \"animate-popup overlay-outline\",\n            className,\n          )}\n          data-slot=\"popover-content\"\n          {...props}\n        >\n          {showArrow && <PopoverArrow />}\n          {children}\n        </BasePopover.Popup>\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  );\n}\n\nconst createPopoverHandle = BasePopover.createHandle;\n\nexport {\n  Popover,\n  PopoverClose,\n  PopoverPopup,\n  PopoverPositioner,\n  PopoverTrigger,\n  PopoverBackdrop,\n  PopoverPortal,\n  PopoverArrow,\n  PopoverTitle,\n  PopoverDescription,\n  PopoverViewport,\n  createPopoverHandle,\n  // Composite component\n  PopoverContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}