{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "title": "Hover Card",
  "description": "A link preview that opens after a 300ms dwell and stays open while the pointer travels into it. Pair it with Eased Avatar, whose image fades in once loaded so initials never flash.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json",
    "https://eased.dev/r/eased-floating.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/hover-card/hover-card.tsx",
      "content": "\"use client\";\n\nimport { PreviewCard } from \"@base-ui/react/preview-card\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport {\n  FloatingLayer,\n  floatingSurface,\n  floatingTrigger,\n  type FloatingAlign,\n  type FloatingMotion,\n  type FloatingSide,\n} from \"../_primitives/floating/floating\";\n\n/**\n * Groups a hover card's parts. Uncontrolled by default; pass `open` and `onOpenChange` to\n * control it. The card is a visual preview for pointer and keyboard users: it is not exposed\n * to screen readers, so everything in it must also live at the link's destination.\n */\nexport const HoverCard = PreviewCard.Root;\n\nconst TRIGGER_VARIANTS = {\n  link: \"rounded-control-2xs font-medium text-text underline decoration-line-strong decoration-1 underline-offset-2 hover-fine:decoration-text data-popup-open:decoration-text\",\n  mention:\n    \"rounded-control-2xs bg-brand-subtle px-0.5 font-medium text-brand-text hover-fine:bg-surface-hover data-popup-open:bg-surface-active\",\n  unstyled: \"\",\n} as const;\n\nexport type HoverCardTriggerProps = Omit<ComponentProps<typeof PreviewCard.Trigger>, \"className\"> & {\n  /** \"link\" (default, underlined), \"mention\" (an @-chip) or \"unstyled\". */\n  variant?: keyof typeof TRIGGER_VARIANTS;\n  /** How long the pointer must dwell before the card opens, ms. Default 300. */\n  delay?: number;\n  /** Grace period after the pointer leaves, so it can travel into the card, ms. Default 300. */\n  closeDelay?: number;\n  className?: string;\n};\n\n/**\n * The link that previews. Renders an `<a>`: give it an `href` so it is focusable; keyboard\n * focus opens the card too.\n */\nexport function HoverCardTrigger({ variant = \"link\", delay = 300, closeDelay = 300, className = \"\", ...props }: HoverCardTriggerProps) {\n  return (\n    <PreviewCard.Trigger\n      {...props}\n      delay={delay}\n      closeDelay={closeDelay}\n      className={`${floatingTrigger} ${TRIGGER_VARIANTS[variant]} ${className}`}\n    />\n  );\n}\n\nexport type HoverCardContentProps = {\n  /** Preferred side; flips on collision and the enter direction follows. Default \"bottom\". */\n  side?: FloatingSide;\n  /** Default \"start\", so the card lines up with the start of the link. */\n  align?: FloatingAlign;\n  /** Gap to the link, px. Default 8. */\n  sideOffset?: number;\n  alignOffset?: number;\n  motion?: Partial<FloatingMotion>;\n  container?: HTMLElement | null;\n  /** Stacking order. Default 50; raise it inside a higher layer such as a dialog. */\n  zIndex?: number;\n  /** Appended to the card's classes; set a width here (default `w-72`). */\n  className?: string;\n  children?: ReactNode;\n};\n\n/**\n * The card. Same floating motion as Popover: from the link's origin, 5px toward it, out at\n * half the distance. It stays open while the pointer travels into it.\n */\nexport function HoverCardContent({\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset,\n  alignOffset,\n  motion,\n  container,\n  zIndex,\n  className = \"\",\n  children,\n}: HoverCardContentProps) {\n  return (\n    <FloatingLayer\n      parts={PreviewCard}\n      role=\"card\"\n      side={side}\n      align={align}\n      sideOffset={sideOffset}\n      alignOffset={alignOffset}\n      motion={motion}\n      container={container}\n      zIndex={zIndex}\n      className={`${floatingSurface} w-72 max-w-(--available-width) rounded-panel p-4 [--pad:16px] [--radius-outer:var(--eased-radius-panel)] ${className}`}\n    >\n      {children}\n    </FloatingLayer>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/eased/hover-card/hover-card.tsx"
    }
  ],
  "type": "registry:ui"
}