{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pointer",
  "type": "registry:ui",
  "title": "Pointer",
  "description": "A component that displays a pointer when hovering over an element",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/pointer.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport {\n  AnimatePresence,\n  motion,\n  useMotionValue,\n  type HTMLMotionProps,\n} from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A custom pointer component that displays an animated cursor.\n * Add this as a child to any component to enable a custom pointer when hovering.\n * You can pass custom children to render as the pointer.\n *\n * @component\n * @param {HTMLMotionProps<\"div\">} props - The component props\n */\nexport function Pointer({\n  className,\n  style,\n  children,\n  ...props\n}: HTMLMotionProps<\"div\">): React.ReactNode {\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n  const [isActive, setIsActive] = useState<boolean>(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const parentElement =\n      typeof window !== \"undefined\"\n        ? (containerRef.current?.parentElement ?? null)\n        : null\n\n    const handleMouseMove = (e: MouseEvent) => {\n      x.set(e.clientX)\n      y.set(e.clientY)\n      setIsActive(true)\n    }\n\n    const handleMouseEnter = (e: MouseEvent) => {\n      x.set(e.clientX)\n      y.set(e.clientY)\n      setIsActive(true)\n    }\n\n    const handleMouseLeave = () => {\n      setIsActive(false)\n    }\n\n    if (parentElement) {\n      parentElement.style.cursor = \"none\"\n      parentElement.addEventListener(\"mousemove\", handleMouseMove)\n      parentElement.addEventListener(\"mouseenter\", handleMouseEnter)\n      parentElement.addEventListener(\"mouseleave\", handleMouseLeave)\n    }\n\n    return () => {\n      if (parentElement) {\n        parentElement.style.cursor = \"\"\n        parentElement.removeEventListener(\"mousemove\", handleMouseMove)\n        parentElement.removeEventListener(\"mouseenter\", handleMouseEnter)\n        parentElement.removeEventListener(\"mouseleave\", handleMouseLeave)\n      }\n    }\n  }, [x, y])\n\n  return (\n    <>\n      <div ref={containerRef} />\n      <AnimatePresence>\n        {isActive && (\n          <motion.div\n            className=\"pointer-events-none fixed z-50 transform-[translate(-50%,-50%)]\"\n            style={{\n              top: y,\n              left: x,\n              ...style,\n            }}\n            initial={{\n              scale: 0,\n              opacity: 0,\n            }}\n            animate={{\n              scale: 1,\n              opacity: 1,\n            }}\n            exit={{\n              scale: 0,\n              opacity: 0,\n            }}\n            {...props}\n          >\n            {children || (\n              <svg\n                stroke=\"currentColor\"\n                fill=\"currentColor\"\n                strokeWidth=\"1\"\n                viewBox=\"0 0 16 16\"\n                height=\"24\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className={cn(\n                  \"rotate-[-70deg] stroke-white text-black\",\n                  className\n                )}\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\" />\n              </svg>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}