{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "pointer",
	"title": "Pointer",
	"type": "registry:block",
	"description": "A component that displays a pointer when hovering over an element",
	"dependencies": [
		"motion-sv",
		"runed"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { motion, AnimatePresence, useMotionValue } from \"motion-sv\";\n\timport { cn } from \"$UTILS$\";\n\timport { type Snippet } from \"svelte\";\n\timport { watch } from \"runed\";\n\t// import type { HTMLMotionProps } from \"motion-sv\";\n\n\tinterface PointerProps {\n\t\tchildren?: Snippet;\n\t\tclass?: string;\n\t}\n\n\tlet { children, class: className }: PointerProps = $props();\n\n\tconst x = useMotionValue(0);\n\tconst y = useMotionValue(0);\n\tlet isActive = $state(false);\n\tlet containerRef: HTMLDivElement | null = $state(null);\n\n\twatch([() => x, () => y], () => {\n\t\tif (typeof window !== \"undefined\" && containerRef) {\n\t\t\t// Get the parent element directly from the ref\n\t\t\tconst parentElement = containerRef.parentElement;\n\n\t\t\tif (parentElement) {\n\t\t\t\tconsole.log(\"Parent element found:\", parentElement);\n\n\t\t\t\t// Add cursor-none to parent\n\t\t\t\tparentElement.style.cursor = \"none\";\n\n\t\t\t\t// Add event listeners to parent\n\t\t\t\tconst handleMouseMove = (e: MouseEvent) => {\n\t\t\t\t\t// console.log(\"Mouse move event:\", e);\n\t\t\t\t\t// console.log(\"Mouse coordinates:\", e.clientX, e.clientY);\n\t\t\t\t\tconsole.log(x, y);\n\t\t\t\t\tx.set(e.clientX);\n\t\t\t\t\ty.set(e.clientY);\n\t\t\t\t\tisActive = true;\n\t\t\t\t};\n\n\t\t\t\tconst handleMouseEnter = (e: MouseEvent) => {\n\t\t\t\t\tx.set(e.clientX);\n\t\t\t\t\ty.set(e.clientY);\n\n\t\t\t\t\tisActive = true;\n\t\t\t\t};\n\n\t\t\t\tconst handleMouseLeave = () => {\n\t\t\t\t\tisActive = false;\n\t\t\t\t};\n\n\t\t\t\tparentElement.addEventListener(\"mousemove\", handleMouseMove);\n\t\t\t\tparentElement.addEventListener(\"mouseenter\", handleMouseEnter);\n\t\t\t\tparentElement.addEventListener(\"mouseleave\", handleMouseLeave);\n\n\t\t\t\treturn () => {\n\t\t\t\t\tparentElement.style.cursor = \"\";\n\t\t\t\t\tparentElement.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\t\t\tparentElement.removeEventListener(\"mouseenter\", handleMouseEnter);\n\t\t\t\t\tparentElement.removeEventListener(\"mouseleave\", handleMouseLeave);\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\t});\n</script>\n\n<div bind:this={containerRef}></div>\n<AnimatePresence>\n\t{#if isActive}\n\t\t<motion.div\n\t\t\tclass=\"pointer-events-none fixed z-50 transform-[translate(-50%,-50%)]\"\n\t\t\tstyle={{\n\t\t\t\ttop: y,\n\t\t\t\tleft: x,\n\t\t\t}}\n\t\t\tinitial={{\n\t\t\t\tscale: 0,\n\t\t\t\topacity: 0,\n\t\t\t}}\n\t\t\tanimate={{\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t}}\n\t\t\texit={{\n\t\t\t\tscale: 0,\n\t\t\t\topacity: 0,\n\t\t\t}}\n\t\t>\n\t\t\t{#if children}\n\t\t\t\t{@render children()}\n\t\t\t{:else}\n\t\t\t\t<svg\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke-width=\"1\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\theight=\"24\"\n\t\t\t\t\twidth=\"24\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass={cn(\"rotate-[-70deg] stroke-white text-black\", className)}\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"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\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t{/if}\n\t\t</motion.div>\n\t{/if}\n</AnimatePresence>\n",
			"type": "registry:component",
			"target": "magic/pointer/pointer.svelte"
		},
		{
			"content": "export { default as Pointer } from \"./pointer.svelte\";\n",
			"type": "registry:file",
			"target": "magic/pointer/index.ts"
		}
	]
}