{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "title": "Popover",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A focus-managed compact surface for controls or details, with collision handling, mobile-safe width, and optional close action.",
  "dependencies": [
    "radix-ui",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/popover.tsx",
      "content": "// Ballmac UI: Popover. https://ui.ballmac.com/components/popover\n\"use client\";\n\nimport * as React from \"react\";\nimport { X } from \"lucide-react\";\nimport { Popover as Primitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\nimport { useMessages } from \"@/lib/ballmac/i18n\";\n\ntype PopoverProps = React.ComponentProps<typeof Primitive.Root>;\nfunction Popover(props: PopoverProps) {\n  return <Primitive.Root data-slot=\"popover\" {...props} />;\n}\ntype PopoverTriggerProps = React.ComponentProps<typeof Primitive.Trigger>;\nfunction PopoverTrigger({ className, ...props }: PopoverTriggerProps) {\n  return (\n    <Primitive.Trigger\n      data-slot=\"popover-trigger\"\n      className={className}\n      {...props}\n    />\n  );\n}\ntype PopoverAnchorProps = React.ComponentProps<typeof Primitive.Anchor>;\nfunction PopoverAnchor(props: PopoverAnchorProps) {\n  return <Primitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\ntype PopoverContentProps = React.ComponentProps<typeof Primitive.Content> & {\n  /** Accessible name of the interactive panel. */\n  label: string;\n  /** Show the close control in the top-right corner. */\n  showCloseButton?: boolean;\n  /** Accessible name for the close control. */\n  closeLabel?: string;\n};\nfunction PopoverContent({\n  className,\n  children,\n  label,\n  align = \"center\",\n  sideOffset = 8,\n  showCloseButton = false,\n  closeLabel,\n  ...props\n}: PopoverContentProps) {\n  const msg = useMessages()\n  closeLabel ??= msg(\"popover.closeLabel\", \"Close popover\")\n  return (\n    <Primitive.Portal>\n      <Primitive.Content\n        data-slot=\"popover-content\"\n        aria-label={label}\n        align={align}\n        sideOffset={sideOffset}\n        collisionPadding={12}\n        className={cn(\n          \"z-50 grid w-[min(21rem,calc(100vw-1.5rem))] gap-3 rounded-xl border bg-popover p-4 text-popover-foreground shadow-[0_12px_36px_-10px_rgb(0_0_0/0.2)] outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 motion-reduce:animate-none\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <Primitive.Close\n            data-slot=\"popover-close\"\n            aria-label={closeLabel}\n            className=\"absolute top-2.5 end-2.5 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n          >\n            <X aria-hidden=\"true\" className=\"size-4\" />\n          </Primitive.Close>\n        )}\n      </Primitive.Content>\n    </Primitive.Portal>\n  );\n}\ntype PopoverHeaderProps = React.ComponentProps<\"div\">;\nfunction PopoverHeader({ className, ...props }: PopoverHeaderProps) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"grid gap-1 pe-6\", className)}\n      {...props}\n    />\n  );\n}\ntype PopoverTitleProps = React.ComponentProps<\"h3\">;\nfunction PopoverTitle({ className, ...props }: PopoverTitleProps) {\n  return (\n    <h3\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-semibold\", className)}\n      {...props}\n    />\n  );\n}\ntype PopoverDescriptionProps = React.ComponentProps<\"p\">;\nfunction PopoverDescription({ className, ...props }: PopoverDescriptionProps) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-sm leading-relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverDescription,\n  type PopoverProps,\n  type PopoverTriggerProps,\n  type PopoverAnchorProps,\n  type PopoverContentProps,\n  type PopoverHeaderProps,\n  type PopoverTitleProps,\n  type PopoverDescriptionProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/popover.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "overlay",
      "panel",
      "editor",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Displays a small interactive panel anchored to a control, with managed focus and Escape dismissal.",
      "whenToUse": [
        "Inline editors and compact preferences",
        "Actions needing more room than a menu"
      ],
      "whenNotToUse": [
        "Long or critical forms; use dialog",
        "Noninteractive link previews; use hover-card"
      ],
      "composesWith": [
        "button",
        "input"
      ],
      "a11y": [
        {
          "keys": "Enter / Space",
          "action": "Opens the panel from its trigger"
        },
        {
          "keys": "Tab / Shift+Tab",
          "action": "Moves among panel controls"
        },
        {
          "keys": "Escape",
          "action": "Closes and returns focus to the trigger"
        }
      ],
      "customization": [
        "alignment and side offset",
        "optional close button",
        "controlled open state"
      ]
    },
    "examples": [
      "popover-demo",
      "popover-states"
    ],
    "url": "https://ui.ballmac.com/components/popover"
  },
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}