{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "title": "Spotlight Card",
  "description": "A card that catches a light following the pointer, across a whole grid at once.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/spotlight-card/spotlight-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type SpotlightCardProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** A theme custom property or CSS colour for the light. */\n  color?: string\n  /** Radius of the light in pixels. */\n  size?: number\n  /** Lights every card in a group at once when they share a parent. */\n  followGroup?: boolean\n}\n\n/**\n * A card whose border and surface catch a light that follows the pointer. The\n * light is written to custom properties on the element rather than to React\n * state, so moving across a grid of these does not re-render anything.\n */\nexport function SpotlightCard({\n  color = \"--primary\",\n  size = 320,\n  followGroup = false,\n  className,\n  style,\n  children,\n  onPointerMove,\n  onPointerLeave,\n  ...rootProps\n}: SpotlightCardProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  const move = (event: React.PointerEvent<HTMLDivElement>) => {\n    const targets = followGroup\n      ? Array.from(\n          ref.current?.parentElement?.querySelectorAll<HTMLElement>(\n            \"[data-slot='spotlight-card']\"\n          ) ?? []\n        )\n      : [ref.current]\n\n    for (const target of targets) {\n      if (!target) continue\n      const rect = target.getBoundingClientRect()\n      target.style.setProperty(\n        \"--spotlight-x\",\n        `${event.clientX - rect.left}px`\n      )\n      target.style.setProperty(\"--spotlight-y\", `${event.clientY - rect.top}px`)\n      target.style.setProperty(\"--spotlight-on\", \"1\")\n    }\n\n    onPointerMove?.(event)\n  }\n\n  const leave = (event: React.PointerEvent<HTMLDivElement>) => {\n    ref.current?.style.setProperty(\"--spotlight-on\", \"0\")\n    onPointerLeave?.(event)\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"spotlight-card\"\n      onPointerMove={move}\n      onPointerLeave={leave}\n      className={cn(\n        \"border-border bg-card text-card-foreground group relative isolate overflow-hidden rounded-[var(--radius)] border\",\n        \"before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:opacity-[var(--spotlight-on,0)] before:transition-opacity before:duration-300 before:content-[''] motion-reduce:before:transition-none\",\n        \"before:bg-[radial-gradient(var(--spotlight-size)_circle_at_var(--spotlight-x,50%)_var(--spotlight-y,50%),var(--spotlight-color),transparent_70%)]\",\n        className\n      )}\n      style={\n        {\n          \"--spotlight-size\": `${size}px`,\n          \"--spotlight-color\": color.startsWith(\"--\")\n            ? `color-mix(in oklch, var(${color}) 22%, transparent)`\n            : color,\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rootProps}\n    >\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "scene",
    "card",
    "pointer",
    "hover"
  ],
  "type": "registry:ui"
}