{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "type": "registry:ui",
  "title": "Hover Card",
  "description": "Rich preview popover that opens on hover — user cards, link previews, and definitions.",
  "dependencies": [
    "@radix-ui/react-hover-card",
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/hover-card.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview HoverCard — premium animated hover-triggered popover card with Motion spring entrance for previewing content on hover.\n * @module packages/ui/components/ui/hover-card\n * @layer core\n *\n * @component\n * @example\n * import { HoverCard, HoverCardTrigger, HoverCardContent } from '@saasflare/ui';\n *\n * <HoverCard>\n *   <HoverCardTrigger>Hover me</HoverCardTrigger>\n *   <HoverCardContent>\n *     <p>Preview content appears here.</p>\n *   </HoverCardContent>\n * </HoverCard>\n */\n\nimport * as React from \"react\"\nimport { m } from \"motion/react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion, springBouncy } from \"@saasflare/ui\"\n\n/**\n * Rich preview card shown when an element is hovered, opened without a click.\n * Root of the composition — owns open state and wires {@link HoverCardTrigger}\n * and {@link HoverCardContent} together. Use for non-interactive previews\n * (profiles, link previews); for click-opened interactive panels reach for\n * Popover.\n *\n * @component\n * @layer core\n */\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\n/**\n * Element that opens the hover card on hover or keyboard focus. Also serves as\n * the positioning anchor for {@link HoverCardContent}.\n *\n * @component\n * @layer core\n */\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n}\n\n/**\n * Props for {@link HoverCardContent}. Extends the Radix HoverCard content props\n * with the Saasflare theming axes (`surface`, `radius`, `animated`,\n * `iconWeight`).\n */\ninterface HoverCardContentProps\n  extends Omit<React.ComponentProps<typeof HoverCardPrimitive.Content>, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {}\n\n/**\n * The floating preview panel rendered while the hover card is open. Portals to\n * the body, enters with a spring scale/fade, and resolves\n * `surface`/`radius`/`animated` against the <SaasflareProvider> context.\n *\n * @component\n * @layer core\n */\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: HoverCardContentProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, springBouncy)\n\n  return (\n    <HoverCardPrimitive.Portal>\n      <HoverCardPrimitive.Content\n        {...props}\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        asChild\n      >\n        <m.div\n          data-surface={sf.surface}\n          data-radius={sf.radius}\n          data-animated={String(sf.animated)}\n          initial={motion.disabled ? false : { opacity: 0, scale: 0.95, y: 4 }}\n          animate={{ opacity: 1, scale: 1, y: 0 }}\n          exit={motion.disabled ? undefined : { opacity: 0, scale: 0.95 }}\n          transition={motion.transition}\n          className={cn(\n            \"z-50 w-64 origin-[var(--radix-hover-card-content-transform-origin)] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden\",\n            className\n          )}\n        />\n      </HoverCardPrimitive.Content>\n    </HoverCardPrimitive.Portal>\n  )\n}\n\n/** Props for {@link HoverCardArrow}. Pure pass-through to the Radix HoverCard arrow. */\ninterface HoverCardArrowProps\n  extends React.ComponentProps<typeof HoverCardPrimitive.Arrow> {}\n\n/**\n * Arrow connecting the hover card to its trigger.\n *\n * Renders inside `<HoverCardContent>` (consumes Popper context), so it must be a\n * child of the content panel. Position/rotation are computed by Radix from the\n * resolved `side`/`align`; no props are required by default. Fill follows the\n * `bg-popover` token via `fill-popover` so it inherits palette + light/dark\n * automatically. The 1px card border is not auto-continued onto the arrow (Radix\n * limitation) and the arrow fill stays token-fixed under non-default `surface`\n * overrides — pass a `className` to adjust either if needed.\n *\n * @component\n * @layer core\n * @example\n * <HoverCardContent>\n *   <HoverCardArrow />\n *   <p>Preview content appears here.</p>\n * </HoverCardContent>\n */\nfunction HoverCardArrow({ className, ...props }: HoverCardArrowProps) {\n  return (\n    <HoverCardPrimitive.Arrow\n      data-slot=\"hover-card-arrow\"\n      width={12}\n      height={6}\n      className={cn(\"fill-popover\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardArrow, type HoverCardContentProps, type HoverCardArrowProps }\n",
      "target": "components/ui/hover-card.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/hover-card.json"
  }
}