{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight",
  "type": "registry:block",
  "title": "Spotlight",
  "description": "Spotlight",
  "files": [
    {
      "path": "components/usages/spotlightusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Spotlight } from \"@/registry/open-source/spotlight\";\nimport { cn } from \"@/registry/utilities/cn\";\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=\"relative flex h-160 w-full overflow-hidden rounded-md bg-background/96 antialiased md:items-center md:justify-center\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none absolute inset-0 bg-size-[40px_40px] select-none\",\n\t\t\t\t\t\t\"bg-[linear-gradient(to_right,#171717_1px,transparent_1px),linear-gradient(to_bottom,#171717_1px,transparent_1px)]\"\n\t\t\t\t\t)}\n\t\t\t\t/>\n\n\t\t\t\t<Spotlight\n\t\t\t\t\tclassName=\"-top-40 left-0 md:-top-20 md:left-60\"\n\t\t\t\t\tfill=\"white\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"relative z-10 mx-auto w-full max-w-7xl p-4 pt-20 md:pt-0\">\n\t\t\t\t\t<h1 className=\"bg-opacity-50 bg-linear-to-b from-background to-background bg-clip-text text-center text-4xl font-bold text-transparent md:text-7xl\">\n\t\t\t\t\t\tSpotlight <br /> is the new trend.\n\t\t\t\t\t</h1>\n\t\t\t\t\t<p className=\"mx-auto mt-4 max-w-lg text-center text-base font-normal text-secondary\">\n\t\t\t\t\t\tSpotlight effect is a great way to draw attention to a\n\t\t\t\t\t\tspecific part of the page. Here, we are drawing the attention\n\t\t\t\t\t\ttowards the text section of the page. I don&apos;t know why\n\t\t\t\t\t\tbut I&apos;m running out of copy.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/spotlightusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { Spotlight } from \"@/registry/open-source/spotlight\";\nimport { cn } from \"@/registry/utilities/cn\";\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=\"relative flex h-160 w-full overflow-hidden rounded-md bg-background/96 antialiased md:items-center md:justify-center\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"pointer-events-none absolute inset-0 bg-size-[40px_40px] select-none\",\n\t\t\t\t\t\t\"bg-[linear-gradient(to_right,#171717_1px,transparent_1px),linear-gradient(to_bottom,#171717_1px,transparent_1px)]\"\n\t\t\t\t\t)}\n\t\t\t\t/>\n\n\t\t\t\t<Spotlight\n\t\t\t\t\tclassName=\"-top-40 left-0 md:-top-20 md:left-60\"\n\t\t\t\t\tfill=\"white\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"relative z-10 mx-auto w-full max-w-7xl p-4 pt-20 md:pt-0\">\n\t\t\t\t\t<h1 className=\"bg-opacity-50 bg-linear-to-b from-background to-background bg-clip-text text-center text-4xl font-bold text-transparent md:text-7xl\">\n\t\t\t\t\t\tSpotlight <br /> is the new trend.\n\t\t\t\t\t</h1>\n\t\t\t\t\t<p className=\"mx-auto mt-4 max-w-lg text-center text-base font-normal text-secondary\">\n\t\t\t\t\t\tSpotlight effect is a great way to draw attention to a\n\t\t\t\t\t\tspecific part of the page. Here, we are drawing the attention\n\t\t\t\t\t\ttowards the text section of the page. I don&apos;t know why\n\t\t\t\t\t\tbut I&apos;m running out of copy.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/spotlight.tsx",
      "content": "\"use client\";\n\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, SpringOptions, useSpring, useTransform } from \"motion/react\";\n\nexport type SpotlightProps = {\n\tclassName?: string;\n\tsize?: number;\n\tspringOptions?: SpringOptions;\n};\n\nexport function Spotlight({\n\tclassName,\n\tsize = 200,\n\tspringOptions = { bounce: 0 },\n}: SpotlightProps) {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [parentElement, setParentElement] = useState<HTMLElement | null>(null);\n\n\tconst mouseX = useSpring(0, springOptions);\n\tconst mouseY = useSpring(0, springOptions);\n\n\tconst spotlightLeft = useTransform(mouseX, (x) => `${x - size / 2}px`);\n\tconst spotlightTop = useTransform(mouseY, (y) => `${y - size / 2}px`);\n\n\tuseEffect(() => {\n\t\tif (containerRef.current) {\n\t\t\tconst parent = containerRef.current.parentElement;\n\t\t\tif (parent) {\n\t\t\t\tparent.style.position = \"relative\";\n\t\t\t\tparent.style.overflow = \"hidden\";\n\t\t\t\tsetParentElement(parent);\n\t\t\t}\n\t\t}\n\t}, []);\n\n\tconst handleMouseMove = useCallback(\n\t\t(event: MouseEvent) => {\n\t\t\tif (!parentElement) return;\n\t\t\tconst { left, top } = parentElement.getBoundingClientRect();\n\t\t\tmouseX.set(event.clientX - left);\n\t\t\tmouseY.set(event.clientY - top);\n\t\t},\n\t\t[mouseX, mouseY, parentElement]\n\t);\n\n\tuseEffect(() => {\n\t\tif (!parentElement) return;\n\n\t\tconst abortController = new AbortController();\n\n\t\tparentElement.addEventListener(\"mousemove\", handleMouseMove, {\n\t\t\tsignal: abortController.signal,\n\t\t});\n\t\tparentElement.addEventListener(\"mouseenter\", () => setIsHovered(true), {\n\t\t\tsignal: abortController.signal,\n\t\t});\n\t\tparentElement.addEventListener(\"mouseleave\", () => setIsHovered(false), {\n\t\t\tsignal: abortController.signal,\n\t\t});\n\n\t\treturn () => {\n\t\t\tabortController.abort();\n\t\t};\n\t}, [parentElement, handleMouseMove]);\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={containerRef}\n\t\t\tclassName={cn(\n\t\t\t\t\"pointer-events-none absolute rounded-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops),transparent_80%)] blur-xl transition-opacity duration-200\",\n\t\t\t\t\"from-background via-background to-background\",\n\t\t\t\tisHovered ? \"opacity-100\" : \"opacity-0\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={{\n\t\t\t\twidth: size,\n\t\t\t\theight: size,\n\t\t\t\tleft: spotlightLeft,\n\t\t\t\ttop: spotlightTop,\n\t\t\t}}\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"
    }
  ]
}