{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-spotlight",
  "title": "Testimonial Spotlight",
  "author": "tusharvarshney <tushar@tusharvarshney.com>",
  "description": "Testimonial card with spotlight effect on hover.",
  "registryDependencies": [
    "https://tusharvarshney.com/r/testimonial.json"
  ],
  "files": [
    {
      "path": "src/registry/components/testimonial-spotlight/testimonial-spotlight.tsx",
      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Position = {\n  x: number\n  y: number\n}\n\nconst SPOTLIGHT_OPACITY = 0.5\n\nexport type TestimonialSpotlightProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  | \"children\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onMouseEnter\"\n  | \"onMouseLeave\"\n  | \"onMouseMove\"\n> & {\n  children: React.ReactNode\n  /** The color of the spotlight effect.\n   * @defaultValue \"rgba(255,255,255,0.2)\"\n   */\n  spotlightColor?: string\n  /**\n   * The opacity of the spotlight effect.\n   * @defaultValue 0.5\n   */\n  spotlightOpacity?: number\n  /**\n   * The size of the spotlight effect.\n   * @defaultValue \"60%\"\n   */\n  spotlightSize?: string\n}\n\nexport function TestimonialSpotlight({\n  children,\n  className,\n  spotlightColor = \"rgba(255,255,255,0.2)\",\n  spotlightOpacity = SPOTLIGHT_OPACITY,\n  spotlightSize = \"60%\",\n  ...props\n}: TestimonialSpotlightProps) {\n  const itemRef = useRef<HTMLDivElement>(null)\n\n  const [isFocused, setIsFocused] = useState<boolean>(false)\n  const [opacity, setOpacity] = useState<number>(0)\n  const [position, setPosition] = useState<Position>({ x: 0, y: 0 })\n\n  const handleFocus = () => {\n    setIsFocused(true)\n    setOpacity(spotlightOpacity)\n  }\n\n  const handleBlur = () => {\n    setIsFocused(false)\n    setOpacity(0)\n  }\n\n  const handleMouseEnter = () => {\n    setOpacity(spotlightOpacity)\n  }\n\n  const handleMouseLeave = () => {\n    setOpacity(0)\n  }\n\n  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    if (!itemRef.current || isFocused) return\n\n    const rect = itemRef.current.getBoundingClientRect()\n    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })\n  }\n\n  return (\n    <div\n      ref={itemRef}\n      data-slot=\"testimonial-spotlight\"\n      className={cn(\n        \"relative overflow-hidden rounded-xl bg-card/50 ring-1 ring-foreground/10 ring-inset\",\n        className\n      )}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onMouseMove={handleMouseMove}\n      {...props}\n    >\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out\"\n        style={{\n          opacity,\n          background: `radial-gradient(circle at ${position.x}px ${position.y}px, var(--spotlight-color, ${spotlightColor}), transparent var(--spotlight-size, ${spotlightSize}))`,\n        }}\n      />\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/testimonial-spotlight.tsx"
    }
  ],
  "type": "registry:component"
}