{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "title": "Spotlight Card",
  "description": "Card with a radial spotlight that follows the pointer.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/spotlight-card/spotlight-card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link SpotlightCard}. */\nexport type SpotlightCardProps = React.ComponentPropsWithoutRef<\"div\">;\n\ntype Point = { x: number; y: number };\n\n/**\n * Card with a radial spotlight that tracks the pointer across its surface.\n *\n * @example\n * ```tsx\n * <SpotlightCard>Hover me</SpotlightCard>\n * ```\n */\nexport const SpotlightCard = ({\n  children,\n  className,\n  ref,\n  ...props\n}: SpotlightCardProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const [point, setPoint] = React.useState<Point | undefined>();\n\n  const handlePointerMove = (\n    event: React.PointerEvent<HTMLDivElement>,\n  ): void => {\n    const bounds = event.currentTarget.getBoundingClientRect();\n    setPoint({\n      x: event.clientX - bounds.left,\n      y: event.clientY - bounds.top,\n    });\n  };\n\n  const handlePointerLeave = (): void => {\n    setPoint(undefined);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"relative overflow-hidden rounded-xl border bg-card p-6\",\n        className,\n      )}\n      onPointerLeave={handlePointerLeave}\n      onPointerMove={handlePointerMove}\n      ref={ref}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 transition-opacity duration-300\"\n        style={{\n          background: point\n            ? `radial-gradient(180px circle at ${point.x}px ${point.y}px, oklch(var(--foreground) / 0.10), transparent 65%)`\n            : undefined,\n          opacity: point ? 1 : 0,\n        }}\n      />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  );\n};\nSpotlightCard.displayName = \"SpotlightCard\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}