{
  "name": "pointer-highlight",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/pointer-highlight.tsx",
      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"motion/react\";\nimport { useRef, useEffect, useState } from \"react\";\n\nexport function PointerHighlight({\n  children,\n  rectangleClassName,\n  pointerClassName,\n  containerClassName,\n}: {\n  children: React.ReactNode;\n  rectangleClassName?: string;\n  pointerClassName?: string;\n  containerClassName?: string;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n  useEffect(() => {\n    if (containerRef.current) {\n      const { width, height } = containerRef.current.getBoundingClientRect();\n      setDimensions({ width, height });\n    }\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const { width, height } = entry.contentRect;\n        setDimensions({ width, height });\n      }\n    });\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        resizeObserver.unobserve(containerRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <div\n      className={cn(\"relative w-fit\", containerClassName)}\n      ref={containerRef}\n    >\n      {children}\n      {dimensions.width > 0 && dimensions.height > 0 && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-0\"\n          initial={{ opacity: 0, scale: 0.95, originX: 0, originY: 0 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5, ease: \"easeOut\" }}\n        >\n          <motion.div\n            className={cn(\n              \"absolute inset-0 border border-neutral-800 dark:border-neutral-200\",\n              rectangleClassName,\n            )}\n            initial={{\n              width: 0,\n              height: 0,\n            }}\n            whileInView={{\n              width: dimensions.width,\n              height: dimensions.height,\n            }}\n            transition={{\n              duration: 1,\n              ease: \"easeInOut\",\n            }}\n          />\n          <motion.div\n            className=\"pointer-events-none absolute\"\n            initial={{ opacity: 0 }}\n            whileInView={{\n              opacity: 1,\n              x: dimensions.width + 4,\n              y: dimensions.height + 4,\n            }}\n            style={{\n              rotate: -90,\n            }}\n            transition={{\n              opacity: { duration: 0.1, ease: \"easeInOut\" },\n              duration: 1,\n              ease: \"easeInOut\",\n            }}\n          >\n            <Pointer\n              className={cn(\"h-5 w-5 text-blue-500\", pointerClassName)}\n            />\n          </motion.div>\n        </motion.div>\n      )}\n    </div>\n  );\n}\n\nconst Pointer = ({ ...props }: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"1\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      viewBox=\"0 0 16 16\"\n      height=\"1em\"\n      width=\"1em\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z\"></path>\n    </svg>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/pointer-highlight.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Pointer Highlight"
}