{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-cursor-demo",
  "title": "Custom Cursor Demo",
  "description": "Demo showing Custom Cursor component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/custom-cursor",
    "https://systaliko-ui.vercel.app/r/button"
  ],
  "files": [
    {
      "path": "registry/demo/components/custom-cursor/index.tsx",
      "content": "'use client';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\nimport {\n  CustomCursor,\n  CustomCursorProvider,\n} from '@/components/systaliko-ui/components/custom-cursor';\nimport { MapPinIcon } from 'lucide-react';\n\nexport function CustomCursorDemo() {\n  return (\n    <CustomCursorProvider>\n      {({ setCursorStyle, setCursorChildren, containerRef }) => {\n        const handleHeadingCursor = () => {\n          setCursorStyle({\n            scale: 6,\n            mixBlendMode: 'difference',\n          });\n        };\n\n        const handleMouseLeave = () => {\n          setCursorChildren(\n            <div className=\"bg-primary min-w-5 min-h-5 rounded-full\" />,\n          );\n          setCursorStyle({});\n        };\n\n        const handleLinkCursor = () => {\n          setCursorChildren(\n            <div className=\"w-40 h-60 overflow-hidden rounded-md shadow\">\n              <img\n                src=\"https://images.pexels.com/photos/20475203/pexels-photo-20475203.jpeg\"\n                alt=\"tokyo\"\n                className=\"size-full object-cover\"\n              />\n            </div>,\n          );\n        };\n\n        const handleButtonCursor = () =>\n          setCursorStyle({ scale: 0.4, mixBlendMode: 'difference' });\n\n        const handleImageCursor = () =>\n          setCursorChildren(\n            <div className=\"flex items-center gap-1 text-xs px-2.5 py-px rounded-full text-white font-medium border border-border/50 ring ring-ring/10  backdrop-blur\">\n              Visit Tokyo\n              <MapPinIcon className=\"w-3.5\" />\n            </div>,\n          );\n\n        return (\n          <div\n            ref={containerRef}\n            className=\"relative container flex justify-between gap-12 flex-wrap items-center py-12 px-6 min-h-svh\"\n          >\n            <CustomCursor />\n\n            <div className=\"flex flex-1 flex-col gap-4 items-start\">\n              <h1\n                className=\"text-4xl text-balance tracking-tight font-semibold\"\n                onMouseEnter={handleHeadingCursor}\n                onMouseLeave={handleMouseLeave}\n              >\n                Explore the World with interactive travel experiences\n              </h1>\n              <p className=\"text-sm text-balance\">\n                Discover breathtaking destinations, unique cultures, and\n                unforgettable adventures. Let your curiosity guide you as you\n                embark on journeys that inspire and transform.\n              </p>\n\n              <div className=\"flex gap-4\">\n                <Button\n                  onMouseEnter={handleButtonCursor}\n                  onMouseLeave={handleMouseLeave}\n                  size=\"sm\"\n                >\n                  Book now\n                </Button>\n                <Button\n                  variant={'link'}\n                  onMouseEnter={handleLinkCursor}\n                  onMouseLeave={handleMouseLeave}\n                  className=\"text-primary\"\n                  size=\"sm\"\n                >\n                  Learn more\n                </Button>\n              </div>\n            </div>\n\n            <div\n              className=\"relative w-2/3 md:w-1/4 ring-2 ring-violet-500/10 shadow rounded-md overflow-hidden\"\n              onMouseEnter={handleImageCursor}\n              onMouseLeave={handleMouseLeave}\n            >\n              <img\n                src=\"https://images.pexels.com/photos/20475203/pexels-photo-20475203.jpeg\"\n                alt=\"tokyo\"\n                className=\"size-full object-cover\"\n              />\n            </div>\n          </div>\n        );\n      }}\n    </CustomCursorProvider>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/custom-cursor-demo.tsx"
    }
  ],
  "type": "registry:ui"
}