{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "title": "Hover Card",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A compact preview of a linked resource that appears on hover or keyboard focus without hiding essential information.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/hover-card.tsx",
      "content": "// Ballmac UI: Hover Card. https://ui.ballmac.com/components/hover-card\n\"use client\";\n\nimport * as React from \"react\";\nimport { HoverCard as Primitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\n\ntype HoverCardProps = React.ComponentProps<typeof Primitive.Root>;\nfunction HoverCard(props: HoverCardProps) {\n  return <Primitive.Root data-slot=\"hover-card\" {...props} />;\n}\ntype HoverCardTriggerProps = React.ComponentProps<typeof Primitive.Trigger>;\nfunction HoverCardTrigger({ className, ...props }: HoverCardTriggerProps) {\n  return (\n    <Primitive.Trigger\n      data-slot=\"hover-card-trigger\"\n      className={cn(\n        \"rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype HoverCardContentProps = React.ComponentProps<typeof Primitive.Content> & {\n  /** Space in pixels between the trigger and preview. */\n  sideOffset?: number;\n};\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 8,\n  ...props\n}: HoverCardContentProps) {\n  return (\n    <Primitive.Portal>\n      <Primitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        collisionPadding={12}\n        className={cn(\n          \"z-50 w-[min(20rem,calc(100vw-1.5rem))] 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    </Primitive.Portal>\n  );\n}\nexport {\n  HoverCard,\n  HoverCardTrigger,\n  HoverCardContent,\n  type HoverCardProps,\n  type HoverCardTriggerProps,\n  type HoverCardContentProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/hover-card.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "preview",
      "link",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Adds optional context to a link for pointer and keyboard users; the link remains useful without the preview.",
      "whenToUse": [
        "Preview a project or profile without navigating",
        "Show supplementary link metadata"
      ],
      "whenNotToUse": [
        "Interactive actions inside a panel; use popover",
        "Information required to complete a task"
      ],
      "composesWith": [
        "avatar",
        "badge"
      ],
      "a11y": [
        {
          "keys": "Tab",
          "action": "Focuses the linked trigger and opens its preview"
        },
        {
          "keys": "Escape",
          "action": "Dismisses the preview"
        }
      ],
      "customization": [
        "side and alignment",
        "open and close delays"
      ]
    },
    "examples": [
      "hover-card-demo",
      "hover-card-states"
    ],
    "url": "https://ui.ballmac.com/components/hover-card"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}