{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-radix-hover-card",
  "title": "Radix Hover Card Demo",
  "description": "Demo showing an animated radix hover card.",
  "registryDependencies": [
    "@animate-ui/primitives-radix-hover-card"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/radix/hover-card/index.tsx",
      "content": "import {\n  HoverCard,\n  HoverCardTrigger,\n  HoverCardPortal,\n  HoverCardContent,\n} from '@/components/animate-ui/primitives/radix/hover-card';\n\ninterface RadixHoverCardDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n  followCursor?: boolean | 'x' | 'y';\n}\n\nexport const RadixHoverCardDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n  followCursor,\n}: RadixHoverCardDemoProps) => {\n  return (\n    <HoverCard followCursor={followCursor}>\n      <HoverCardTrigger asChild>\n        <a\n          className=\"size-12 border\"\n          href=\"https://twitter.com/animate_ui\"\n          target=\"_blank\"\n          rel=\"noreferrer noopener\"\n        >\n          <img\n            src=\"https://pbs.twimg.com/profile_images/1950218390741618688/72447Y7e_400x400.jpg\"\n            alt=\"Animate UI\"\n          />\n        </a>\n      </HoverCardTrigger>\n      <HoverCardPortal>\n        <HoverCardContent\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignOffset={alignOffset}\n          className=\"w-80 bg-background border p-4 z-50\"\n        >\n          <div className=\"flex flex-col gap-4\">\n            <img\n              className=\"size-16 rounded-full overflow-hidden border\"\n              src=\"https://pbs.twimg.com/profile_images/1950218390741618688/72447Y7e_400x400.jpg\"\n              alt=\"Animate UI\"\n            />\n            <div className=\"flex flex-col gap-4\">\n              <div>\n                <div className=\"font-bold\">Animate UI</div>\n                <div className=\"text-sm text-muted-foreground\">@animate_ui</div>\n              </div>\n              <div className=\"text-sm text-muted-foreground\">\n                A fully animated, open-source component distribution built with\n                React, TypeScript, Tailwind CSS, and Motion.\n              </div>\n              <div className=\"flex gap-4\">\n                <div className=\"flex gap-1 text-sm items-center\">\n                  <div className=\"font-bold\">0</div>{' '}\n                  <div className=\"text-muted-foreground\">Following</div>\n                </div>\n                <div className=\"flex gap-1 text-sm items-center\">\n                  <div className=\"font-bold\">2,900</div>{' '}\n                  <div className=\"text-muted-foreground\">Followers</div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </HoverCardContent>\n      </HoverCardPortal>\n    </HoverCard>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/primitives/radix/hover-card.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "HoverCard": {
        "followCursor": {
          "value": false,
          "options": {
            "true": true,
            "false": false,
            "x": "x",
            "y": "y"
          }
        }
      },
      "HoverCardContent": {
        "side": {
          "value": "bottom",
          "options": {
            "top": "top",
            "bottom": "bottom",
            "left": "left",
            "right": "right"
          }
        },
        "sideOffset": {
          "value": 4
        },
        "align": {
          "value": "center",
          "options": {
            "start": "start",
            "center": "center",
            "end": "end"
          }
        },
        "alignOffset": {
          "value": 0
        }
      }
    }
  },
  "type": "registry:ui"
}