{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "title": "Hover Card",
  "description": "A preview card that unfolds from the link you are pointing at.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/hover-card.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/hover-card`: same parts, same props. Swap the import and keep\n   your code. This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport { HoverCardContent as HoverCardContentPart } from \"@ui-sdk/react/hover-card\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/hover-card\"\n\n/* Cascade: each direct child of the card rises in out of a blur a little after the one before it.\n   A keyframe animation, since the children have no earlier style to transition from when the card\n   first appears. The arrow is left out. */\nconst cascadeKeyframes = \"@keyframes kf-cascade{from{opacity:0;translate:0 8px;filter:blur(4px)}}@media (prefers-reduced-motion:reduce){@keyframes kf-cascade{from{opacity:0}}}\"\n\n/* Unfold: the card grows out of its link from 0.86, 8px closer to it and out of a 6px blur,\n   settling on a spring; then its sections cascade in. It leaves in 150ms, shrinking only a little. */\nfunction HoverCardContent<Payload = unknown>({\n  className,\n  ...props\n}: React.ComponentProps<typeof HoverCardContentPart<Payload>>) {\n  return (\n    <>\n      <style href=\"kf-cascade\" precedence=\"default\">\n        {cascadeKeyframes}\n      </style>\n      <HoverCardContentPart<Payload>\n        className={cn(\n          \"origin-(--transform-origin) transition-[opacity,scale,translate,filter] duration-[calc(380ms*var(--kf-speed,1))] ease-spring\",\n          \"data-[side=bottom]:[--kf-from:0_-8px] data-[side=left]:[--kf-from:8px_0] data-[side=right]:[--kf-from:-8px_0] data-[side=top]:[--kf-from:0_8px]\",\n          \"data-starting-style:[translate:var(--kf-from,0_0)] data-starting-style:scale-[0.86] data-starting-style:opacity-0 data-starting-style:blur-[6px]\",\n          \"data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-ending-style:blur-[2px] data-ending-style:duration-[calc(150ms*var(--kf-speed,1))] data-ending-style:ease-house\",\n          \"[&>*:not([data-slot$=-close],[data-slot$=-arrow])]:animate-[kf-cascade_calc(420ms*var(--kf-speed,1))_var(--ease-spring)_backwards]\",\n          \"[&>*:not([data-slot$=-close],[data-slot$=-arrow])]:[animation-delay:calc(calc(40ms*var(--kf-speed,1))+(min(sibling-index(),10)-1)*calc(40ms*var(--kf-speed,1)))]\",\n          \"motion-reduce:transition-none! motion-reduce:[&>*]:animate-none\",\n          className,\n        )}\n        {...props}\n      />\n    </>\n  )\n}\n\nexport { HoverCardContent }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/hover-card.tsx"
    },
    {
      "path": "registry/components/keyframery/hover-card.tsx",
      "content": "\"use client\"\n\n/* Styled hover card: the animated primitive plus the Keyframery look. */\n\nimport {\n  HoverCard as HoverCardRoot,\n  HoverCardArrow as HoverCardArrowPart,\n  HoverCardContent as HoverCardContentPart,\n  HoverCardTrigger as HoverCardTriggerPart,\n} from \"@/components/keyframery/primitives/hover-card\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Keeps UI SDK's default delays (calc(600ms*var(--kf-speed,1)) to open, 300ms to close), so moving the pointer\n   across a page of links never flashes a card at every stop. */\nfunction HoverCard(props: React.ComponentProps<typeof HoverCardRoot>) {\n  return <HoverCardRoot {...props} />\n}\n\n/* A link. Its underline firms up on hover and stays firm while its card is showing. */\nfunction HoverCardTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof HoverCardTriggerPart>) {\n  return (\n    <HoverCardTriggerPart\n      className={cn(\n        \"cursor-pointer rounded-[3px] font-medium text-foreground underline decoration-foreground/25 decoration-1 underline-offset-[3px] outline-none\",\n        \"transition-[text-decoration-color,background-color] duration-[calc(150ms*var(--kf-speed,1))] ease-house\",\n        \"hover:decoration-foreground/70 data-open:decoration-foreground/70\",\n        \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"motion-reduce:transition-none!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The card. The primitive unfolds it out of the link and cascades its sections in. */\nfunction HoverCardContent<Payload = unknown>({\n  className,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof HoverCardContentPart<Payload>>) {\n  return (\n    <HoverCardContentPart<Payload>\n      sideOffset={sideOffset}\n      className={cn(\n        \"m-0 w-72 max-w-[calc(100vw-16px)] border-0 p-4 text-[13px] outline-none\",\n        \"rounded-[14px] bg-popover text-popover-foreground\",\n        \"shadow-[0_0_0_1px_rgb(0_0_0/0.06),0_2px_6px_-2px_rgb(0_0_0/0.08),0_12px_32px_-8px_rgb(0_0_0/0.18)]\",\n        \"dark:shadow-[0_0_0_1px_rgb(255_255_255/0.08),0_12px_32px_-8px_rgb(0_0_0/0.7)]\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* A small point toward the link, drawn with the card's own fill and hairline. */\nfunction HoverCardArrow({\n  className,\n  ...props\n}: React.ComponentProps<typeof HoverCardArrowPart>) {\n  return (\n    <HoverCardArrowPart\n      className={cn(\n        \"pointer-events-none h-[7px] w-3.5 text-popover\",\n        \"data-[side=bottom]:bottom-full data-[side=top]:top-full\",\n        \"data-[side=left]:left-full data-[side=left]:h-3.5 data-[side=left]:w-[7px] data-[side=right]:right-full data-[side=right]:h-3.5 data-[side=right]:w-[7px]\",\n        \"[&>svg]:absolute [&>svg]:top-1/2 [&>svg]:left-1/2 [&>svg]:h-[7px] [&>svg]:w-3.5 [&>svg]:-translate-1/2\",\n        \"data-[side=top]:[&>svg]:rotate-180 data-[side=left]:[&>svg]:rotate-90 data-[side=right]:[&>svg]:-rotate-90\",\n        className,\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 14 7\" aria-hidden className=\"overflow-visible\">\n        <path\n          d=\"M0 7.5 L5.6 1.2 Q7 -0.3 8.4 1.2 L14 7.5\"\n          fill=\"currentColor\"\n          className=\"stroke-black/[0.06] dark:stroke-white/[0.08]\"\n          strokeWidth=\"1\"\n        />\n      </svg>\n    </HoverCardArrowPart>\n  )\n}\n\nexport { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger }\n",
      "type": "registry:component",
      "target": "components/keyframery/hover-card.tsx"
    }
  ],
  "type": "registry:component"
}