{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"hover-card","type":"registry:ui","title":"Hover Card","description":"A preview that opens when a pointer rests on a link — a person, a ticket, a page.","dependencies":["radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/lib-portal.json"],"files":[{"path":"registry/dashral/hover-card.tsx","type":"registry:file","target":"components/dashral/hover-card.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { usePortalContainer } from \"./lib/portal\"\n\ntype HoverCardProps = Omit<React.ComponentProps<typeof HoverCardPrimitive.Root>, \"children\"> & {\n  /** The link it previews; it must take a ref and focus. */\n  trigger: React.ReactElement\n  /** The preview. */\n  children: React.ReactNode\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  /** The preview panel's classes, e.g. a width. */\n  className?: string\n}\n\n/**\n * A preview that opens when a pointer rests on a link (or it gets keyboard focus), in one tag. For extra detail only:\n * touch screens never show it, so the trigger must make sense on its own — usually a link to the full page.\n */\nfunction HoverCard({ trigger, children, side, align, openDelay = 300, closeDelay = 150, className, ...props }: HoverCardProps) {\n  return (\n    <HoverCardPrimitive.Root data-slot=\"hover-card\" openDelay={openDelay} closeDelay={closeDelay} {...props}>\n      <HoverCardPrimitive.Trigger asChild>{trigger}</HoverCardPrimitive.Trigger>\n      <HoverCardContent side={side} align={align} className={className}>\n        {children}\n      </HoverCardContent>\n    </HoverCardPrimitive.Root>\n  )\n}\n\nfunction HoverCardContent({ className, align = \"center\", sideOffset = 6, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  const portalContainer = usePortalContainer()\n  return (\n    <HoverCardPrimitive.Portal container={portalContainer}>\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-72 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, type HoverCardProps }\n"}]}