{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pointer",
  "type": "registry:block",
  "title": "Pointer",
  "description": "Pointer",
  "files": [
    {
      "path": "components/usages/pointerusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Pointer } from \"@/registry/open-source/pointer\";\nimport { motion } from \"motion/react\";\n\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"../ui/card\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"grid grid-cols-1 gap-6 md:grid-cols-2 md:grid-rows-2\">\n\t\t\t\t<Card className=\"col-span-1 row-span-1 overflow-hidden border-none bg-linear-to-br from-slate-50 to-slate-100 shadow-lg transition-shadow hover:shadow-xl dark:from-slate-900 dark:to-slate-800\">\n\t\t\t\t\t<CardHeader className=\"relative pb-2\">\n\t\t\t\t\t\t<CardTitle className=\"text-xl font-bold\">\n\t\t\t\t\t\t\tAnimated Pointer\n\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t<CardDescription className=\"text-sm text-slate-600 dark:text-slate-400\">\n\t\t\t\t\t\t\tAnimated pointer\n\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className=\"relative flex h-40 items-center justify-center p-6\">\n\t\t\t\t\t\t<span className=\"pointer-events-none text-center text-xl font-medium text-slate-800 dark:text-slate-200\">\n\t\t\t\t\t\t\tMove your cursor here\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</CardContent>\n\t\t\t\t\t<Pointer>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: [0.8, 1, 0.8],\n\t\t\t\t\t\t\t\trotate: [0, 5, -5, 0],\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 1.5,\n\t\t\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\twidth=\"40\"\n\t\t\t\t\t\t\t\theight=\"40\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 40 40\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclassName=\"text-pink-600\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.path\n\t\t\t\t\t\t\t\t\td=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tanimate={{ scale: [1, 1.2, 1] }}\n\t\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\t\tduration: 0.8,\n\t\t\t\t\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</Pointer>\n\t\t\t\t</Card>\n\n\t\t\t\t<Card className=\"col-span-1 row-span-1 overflow-hidden border-none bg-linear-to-br from-blue-50 to-blue-100 shadow-lg transition-shadow hover:shadow-xl dark:from-blue-900 dark:to-blue-800\">\n\t\t\t\t\t<CardHeader className=\"relative pb-2\">\n\t\t\t\t\t\t<CardTitle className=\"text-xl font-bold\">\n\t\t\t\t\t\t\tColored Pointer\n\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t<CardDescription className=\"text-sm text-blue-700 dark:text-blue-300\">\n\t\t\t\t\t\t\tA custom pointer with different color\n\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className=\"relative flex h-40 items-center justify-center p-6\">\n\t\t\t\t\t\t<span className=\"pointer-events-none text-center text-xl font-medium text-blue-800 dark:text-blue-200\">\n\t\t\t\t\t\t\tTry me out\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</CardContent>\n\t\t\t\t\t<Pointer className=\"fill-blue-500\" />\n\t\t\t\t</Card>\n\n\t\t\t\t<Card className=\"col-span-1 row-span-1 overflow-hidden border-none bg-linear-to-br from-purple-50 to-purple-100 shadow-lg transition-shadow hover:shadow-xl dark:from-purple-900 dark:to-purple-800\">\n\t\t\t\t\t<CardHeader className=\"relative pb-2\">\n\t\t\t\t\t\t<CardTitle className=\"text-xl font-bold\">\n\t\t\t\t\t\t\tCustom Shape\n\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t<CardDescription className=\"text-sm text-purple-700 dark:text-purple-300\">\n\t\t\t\t\t\t\tA pointer with a custom SVG shape\n\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className=\"relative flex h-40 items-center justify-center p-6\">\n\t\t\t\t\t\t<span className=\"pointer-events-none text-center text-xl font-medium text-purple-800 dark:text-purple-200\">\n\t\t\t\t\t\t\tHover here\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</CardContent>\n\t\t\t\t\t<Pointer>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tcx=\"12\"\n\t\t\t\t\t\t\t\tcy=\"12\"\n\t\t\t\t\t\t\t\tr=\"10\"\n\t\t\t\t\t\t\t\tclassName=\"fill-purple-500\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"5\" className=\"fill-white\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</Pointer>\n\t\t\t\t</Card>\n\n\t\t\t\t<Card className=\"col-span-1 row-span-1 overflow-hidden border-none bg-linear-to-br from-green-50 to-green-100 shadow-lg transition-shadow hover:shadow-xl dark:from-green-900 dark:to-green-800\">\n\t\t\t\t\t<CardHeader className=\"relative pb-2\">\n\t\t\t\t\t\t<CardTitle className=\"text-xl font-bold\">\n\t\t\t\t\t\t\tEmoji Pointer\n\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t<CardDescription className=\"text-sm text-green-700 dark:text-green-300\">\n\t\t\t\t\t\t\tUsing an emoji as a custom pointer\n\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className=\"relative flex h-40 items-center justify-center p-6\">\n\t\t\t\t\t\t<span className=\"pointer-events-none text-center text-xl font-medium text-green-800 dark:text-green-200\">\n\t\t\t\t\t\t\tCheck this out\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</CardContent>\n\t\t\t\t\t<Pointer>\n\t\t\t\t\t\t<div className=\"text-2xl\">👆</div>\n\t\t\t\t\t</Pointer>\n\t\t\t\t</Card>\n\t\t\t</div>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/pointerusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Pointer } from \"@/registry/open-source/pointer\";\nimport { motion } from \"motion/react\";\n\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardHeader,\n\tCardTitle,\n} from \"../ui/card\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"grid grid-cols-1 gap-6 md:grid-cols-2 md:grid-rows-2\">\n\t\t\t\t<Card className=\"col-span-1 row-span-1 overflow-hidden border-none bg-linear-to-br from-slate-50 to-slate-100 shadow-lg transition-shadow hover:shadow-xl dark:from-slate-900 dark:to-slate-800\">\n\t\t\t\t\t<CardHeader className=\"relative pb-2\">\n\t\t\t\t\t\t<CardTitle className=\"text-xl font-bold\">\n\t\t\t\t\t\t\tAnimated Pointer\n\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t<CardDescription className=\"text-sm text-slate-600 dark:text-slate-400\">\n\t\t\t\t\t\t\tAnimated pointer\n\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className=\"relative flex h-40 items-center justify-center p-6\">\n\t\t\t\t\t\t<span className=\"pointer-events-none text-center text-xl font-medium text-slate-800 dark:text-slate-200\">\n\t\t\t\t\t\t\tMove your cursor here\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</CardContent>\n\t\t\t\t\t<Pointer>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: [0.8, 1, 0.8],\n\t\t\t\t\t\t\t\trotate: [0, 5, -5, 0],\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 1.5,\n\t\t\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\twidth=\"40\"\n\t\t\t\t\t\t\t\theight=\"40\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 40 40\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclassName=\"text-pink-600\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.path\n\t\t\t\t\t\t\t\t\td=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t\tanimate={{ scale: [1, 1.2, 1] }}\n\t\t\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\t\t\tduration: 0.8,\n\t\t\t\t\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</Pointer>\n\t\t\t\t</Card>\n\n\t\t\t\t<Card className=\"col-span-1 row-span-1 overflow-hidden border-none bg-linear-to-br from-blue-50 to-blue-100 shadow-lg transition-shadow hover:shadow-xl dark:from-blue-900 dark:to-blue-800\">\n\t\t\t\t\t<CardHeader className=\"relative pb-2\">\n\t\t\t\t\t\t<CardTitle className=\"text-xl font-bold\">\n\t\t\t\t\t\t\tColored Pointer\n\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t<CardDescription className=\"text-sm text-blue-700 dark:text-blue-300\">\n\t\t\t\t\t\t\tA custom pointer with different color\n\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className=\"relative flex h-40 items-center justify-center p-6\">\n\t\t\t\t\t\t<span className=\"pointer-events-none text-center text-xl font-medium text-blue-800 dark:text-blue-200\">\n\t\t\t\t\t\t\tTry me out\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</CardContent>\n\t\t\t\t\t<Pointer className=\"fill-blue-500\" />\n\t\t\t\t</Card>\n\n\t\t\t\t<Card className=\"col-span-1 row-span-1 overflow-hidden border-none bg-linear-to-br from-purple-50 to-purple-100 shadow-lg transition-shadow hover:shadow-xl dark:from-purple-900 dark:to-purple-800\">\n\t\t\t\t\t<CardHeader className=\"relative pb-2\">\n\t\t\t\t\t\t<CardTitle className=\"text-xl font-bold\">\n\t\t\t\t\t\t\tCustom Shape\n\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t<CardDescription className=\"text-sm text-purple-700 dark:text-purple-300\">\n\t\t\t\t\t\t\tA pointer with a custom SVG shape\n\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className=\"relative flex h-40 items-center justify-center p-6\">\n\t\t\t\t\t\t<span className=\"pointer-events-none text-center text-xl font-medium text-purple-800 dark:text-purple-200\">\n\t\t\t\t\t\t\tHover here\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</CardContent>\n\t\t\t\t\t<Pointer>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\tcx=\"12\"\n\t\t\t\t\t\t\t\tcy=\"12\"\n\t\t\t\t\t\t\t\tr=\"10\"\n\t\t\t\t\t\t\t\tclassName=\"fill-purple-500\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"5\" className=\"fill-white\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</Pointer>\n\t\t\t\t</Card>\n\n\t\t\t\t<Card className=\"col-span-1 row-span-1 overflow-hidden border-none bg-linear-to-br from-green-50 to-green-100 shadow-lg transition-shadow hover:shadow-xl dark:from-green-900 dark:to-green-800\">\n\t\t\t\t\t<CardHeader className=\"relative pb-2\">\n\t\t\t\t\t\t<CardTitle className=\"text-xl font-bold\">\n\t\t\t\t\t\t\tEmoji Pointer\n\t\t\t\t\t\t</CardTitle>\n\t\t\t\t\t\t<CardDescription className=\"text-sm text-green-700 dark:text-green-300\">\n\t\t\t\t\t\t\tUsing an emoji as a custom pointer\n\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent className=\"relative flex h-40 items-center justify-center p-6\">\n\t\t\t\t\t\t<span className=\"pointer-events-none text-center text-xl font-medium text-green-800 dark:text-green-200\">\n\t\t\t\t\t\t\tCheck this out\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</CardContent>\n\t\t\t\t\t<Pointer>\n\t\t\t\t\t\t<div className=\"text-2xl\">👆</div>\n\t\t\t\t\t</Pointer>\n\t\t\t\t</Card>\n\t\t\t</div>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/pointer.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport {\n\tAnimatePresence,\n\tHTMLMotionProps,\n\tmotion,\n\tuseMotionValue,\n} from \"motion/react\";\n\ninterface PointerProps extends Omit<HTMLMotionProps<\"div\">, \"ref\"> {}\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 {PointerProps} props - The component props\n */\nexport function Pointer({\n\tclassName,\n\tstyle,\n\tchildren,\n\t...props\n}: PointerProps): JSX.Element {\n\tconst x = useMotionValue(0);\n\tconst y = useMotionValue(0);\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (typeof window !== \"undefined\" && containerRef.current) {\n\t\t\t// Get the parent element directly from the ref\n\t\t\tconst parentElement = containerRef.current.parentElement;\n\n\t\t\tif (parentElement) {\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\tx.set(e.clientX);\n\t\t\t\t\ty.set(e.clientY);\n\t\t\t\t};\n\n\t\t\t\tconst handleMouseEnter = () => {\n\t\t\t\t\tsetIsActive(true);\n\t\t\t\t};\n\n\t\t\t\tconst handleMouseLeave = () => {\n\t\t\t\t\tsetIsActive(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(\n\t\t\t\t\t\t\"mouseenter\",\n\t\t\t\t\t\thandleMouseEnter\n\t\t\t\t\t);\n\t\t\t\t\tparentElement.removeEventListener(\n\t\t\t\t\t\t\"mouseleave\",\n\t\t\t\t\t\thandleMouseLeave\n\t\t\t\t\t);\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\t}, [x, y]);\n\n\treturn (\n\t\t<>\n\t\t\t<div ref={containerRef} />\n\t\t\t<AnimatePresence>\n\t\t\t\t{isActive && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName=\"transform-[translate(-50%,-50%)] pointer-events-none fixed z-50\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttop: y,\n\t\t\t\t\t\t\tleft: x,\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tinitial={{\n\t\t\t\t\t\t\tscale: 0,\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\tscale: 0,\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children || (\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"1\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"rotate-[-70deg] stroke-white text-foreground\",\n\t\t\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<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\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</motion.div>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>\n\t\t</>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}