{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "title": "Spotlight Card",
  "description": "A card with a soft radial highlight that follows the pointer.",
  "files": [
    {
      "path": "registry/tealmac/spotlight-card.tsx",
      "content": "\"use client\"\n\nimport {\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface SpotlightCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Radius of the spotlight in pixels. */\n  size?: number\n  /** Spotlight colour. Defaults to the theme highlight token. */\n  color?: string\n  children: ReactNode\n}\n\n/**\n * SpotlightCard reveals a soft radial highlight that follows the pointer across\n * the card, plus a matching border glow. The pointer position is stored as CSS\n * custom properties and consumed by two radial-gradient layers, so movement is\n * paint-only and does not re-layout.\n */\nexport function SpotlightCard({\n  size = 240,\n  color = \"var(--highlight)\",\n  className,\n  children,\n  onMouseMove,\n  ...props\n}: SpotlightCardProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  const [pos, setPos] = useState({ x: -9999, y: -9999, active: false })\n\n  function handleMove(e: MouseEvent<HTMLDivElement>) {\n    const el = ref.current\n    if (el) {\n      const r = el.getBoundingClientRect()\n      setPos({ x: e.clientX - r.left, y: e.clientY - r.top, active: true })\n    }\n    onMouseMove?.(e)\n  }\n\n  return (\n    <div\n      ref={ref}\n      onMouseMove={handleMove}\n      onMouseLeave={() => setPos((p) => ({ ...p, active: false }))}\n      className={cn(\n        \"bg-card text-card-foreground relative overflow-hidden rounded-xl border\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 transition-opacity duration-300\"\n        style={{\n          opacity: pos.active ? 1 : 0,\n          background: `radial-gradient(${size}px circle at ${pos.x}px ${pos.y}px, color-mix(in oklab, ${color} 22%, transparent), transparent 70%)`,\n        }}\n      />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n\nexport default SpotlightCard\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}