{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "type": "registry:ui",
  "title": "Spotlight Card",
  "description": "A card with a radial spotlight glow that follows the cursor.",
  "files": [
    {
      "path": "registry/sonaui/spotlight-card/spotlight-card.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport {\n  motion,\n  useMotionTemplate,\n  useMotionValue,\n  useReducedMotion,\n} from \"motion/react\";\nimport { type ReactNode, useState } from \"react\";\n\nimport { cn } from \"@/lib/sona-utils\";\n\nexport interface SpotlightCardProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** The content rendered inside the card. */\n  children: ReactNode;\n  /** Additional CSS classes for the card. */\n  className?: string;\n  /**\n   * The color of the spotlight glow. Accepts any CSS color value.\n   * @default \"rgba(255,255,255,0.15)\"\n   */\n  spotlightColor?: string;\n  /**\n   * The radius of the spotlight in pixels.\n   * @default 350\n   */\n  spotlightSize?: number;\n  /**\n   * Disables the spotlight effect.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport default function SpotlightCard({\n  children,\n  className,\n  spotlightColor = \"rgba(255,255,255,0.15)\",\n  spotlightSize = 350,\n  disabled = false,\n  onMouseMove,\n  ...props\n}: SpotlightCardProps) {\n  const shouldReduceMotion = useReducedMotion();\n  // Start off-canvas so the first hover doesn't flash the glow at (0,0).\n  const mouseX = useMotionValue(-spotlightSize);\n  const mouseY = useMotionValue(-spotlightSize);\n\n  const [hasMoved, setHasMoved] = useState(false);\n  const [prevDisabled, setPrevDisabled] = useState(disabled);\n  if (prevDisabled !== disabled) {\n    setPrevDisabled(disabled);\n    if (!disabled) {\n      mouseX.set(-spotlightSize);\n      mouseY.set(-spotlightSize);\n      setHasMoved(false);\n    }\n  }\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {\n    if (disabled || shouldReduceMotion) return;\n    const rect = event.currentTarget.getBoundingClientRect();\n    mouseX.set(event.clientX - rect.left);\n    mouseY.set(event.clientY - rect.top);\n    if (!hasMoved) setHasMoved(true);\n  };\n\n  const background = useMotionTemplate`radial-gradient(${spotlightSize}px circle at ${mouseX}px ${mouseY}px, ${spotlightColor}, transparent 80%)`;\n\n  return (\n    <article\n      onMouseMove={(event) => {\n        handleMouseMove(event);\n        onMouseMove?.(event as React.MouseEvent<HTMLDivElement>);\n      }}\n      className={cn(\n        \"group border-border bg-secondary relative overflow-hidden rounded-xl border p-8\",\n        className,\n      )}\n      {...props}\n    >\n      {!disabled && !shouldReduceMotion && (\n        <motion.div\n          aria-hidden=\"true\"\n          className={cn(\n            \"absolute inset-0 pointer-events-none opacity-0 transition-opacity duration-200 ease-out\",\n            hasMoved && \"group-hover:opacity-100\",\n          )}\n          style={{ background }}\n        />\n      )}\n      <div className=\"relative z-10\">{children}</div>\n    </article>\n  );\n}\n",
      "target": "components/ui/spotlight-card/spotlight-card.tsx"
    }
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@sona-ui/sona-utils"
  ]
}