{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "type": "registry:ui",
  "title": "Hover card",
  "description": "A card that appears below a trigger on mouse hover to preview extra detail such as a user profile or link summary. A light take on the shadcn hover card.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/hover-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/hover-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nfunction HoverCard({ trigger, children, className }: { trigger: React.ReactNode; children: React.ReactNode; className?: string }) {\n  const [open, setOpen] = React.useState(false)\n  return (\n    <span data-slot=\"hover-card\" className=\"relative inline-flex\" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>\n      {trigger}\n      {open ? (\n        <span className={cn(\"absolute top-full left-0 z-50 mt-2 w-64 rounded-xl border border-border bg-raised p-3 text-sm shadow-lg\", className)}>\n          {children}\n        </span>\n      ) : null}\n    </span>\n  )\n}\nexport { HoverCard }\n"
    }
  ]
}