{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-spotlight",
  "title": "Glass Spotlight",
  "description": "A spotlight component that highlights specific areas of the UI with a glass morphism effect.",
  "files": [
    {
      "path": "registry/innovative/glass-spotlight.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { X, ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface SpotlightStep {\n  target: string // CSS selector\n  title: string\n  description: string\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\"\n}\n\ninterface GlassSpotlightProps {\n  steps: SpotlightStep[]\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  onComplete?: () => void\n}\n\nfunction GlassSpotlight({ steps, open = false, onOpenChange, onComplete }: GlassSpotlightProps) {\n  const [currentStep, setCurrentStep] = React.useState(0)\n  const [targetRect, setTargetRect] = React.useState<DOMRect | null>(null)\n\n  const step = steps[currentStep]\n\n  React.useLayoutEffect(() => {\n    if (!open || !step) return\n\n    const target = document.querySelector(step.target)\n    if (target) {\n      const rect = target.getBoundingClientRect()\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setTargetRect(rect)\n      target.scrollIntoView({ behavior: \"smooth\", block: \"center\" })\n    }\n  }, [open, step, currentStep])\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      if (!step) return\n      const target = document.querySelector(step.target)\n      if (target) {\n        setTargetRect(target.getBoundingClientRect())\n      }\n    }\n\n    window.addEventListener(\"resize\", handleResize)\n    return () => window.removeEventListener(\"resize\", handleResize)\n  }, [step])\n\n  const handleNext = () => {\n    if (currentStep < steps.length - 1) {\n      setCurrentStep((prev) => prev + 1)\n    } else {\n      onComplete?.()\n      onOpenChange?.(false)\n      setCurrentStep(0)\n    }\n  }\n\n  const handlePrev = () => {\n    if (currentStep > 0) {\n      setCurrentStep((prev) => prev - 1)\n    }\n  }\n\n  const handleClose = () => {\n    onOpenChange?.(false)\n    setCurrentStep(0)\n  }\n\n  if (!open || !targetRect) return null\n\n  const padding = 8\n  const tooltipWidth = 320\n\n  // Calculate tooltip position\n  let tooltipStyle: React.CSSProperties = {}\n  const placement = step.placement || \"bottom\"\n\n  switch (placement) {\n    case \"top\":\n      tooltipStyle = {\n        left: targetRect.left + targetRect.width / 2 - tooltipWidth / 2,\n        bottom: window.innerHeight - targetRect.top + padding + 12,\n      }\n      break\n    case \"bottom\":\n      tooltipStyle = {\n        left: targetRect.left + targetRect.width / 2 - tooltipWidth / 2,\n        top: targetRect.bottom + padding + 12,\n      }\n      break\n    case \"left\":\n      tooltipStyle = {\n        right: window.innerWidth - targetRect.left + padding + 12,\n        top: targetRect.top + targetRect.height / 2 - 60,\n      }\n      break\n    case \"right\":\n      tooltipStyle = {\n        left: targetRect.right + padding + 12,\n        top: targetRect.top + targetRect.height / 2 - 60,\n      }\n      break\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-50\">\n      {/* Overlay with cutout */}\n      <svg className=\"absolute inset-0 w-full h-full\">\n        <defs>\n          <mask id=\"spotlight-mask\">\n            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n            <rect\n              x={targetRect.left - padding}\n              y={targetRect.top - padding}\n              width={targetRect.width + padding * 2}\n              height={targetRect.height + padding * 2}\n              rx=\"12\"\n              fill=\"black\"\n            />\n          </mask>\n        </defs>\n        <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"rgba(0,0,0,0.75)\" mask=\"url(#spotlight-mask)\" />\n      </svg>\n\n      {/* Spotlight border */}\n      <div\n        className=\"absolute rounded-xl pointer-events-none animate-pulse\"\n        style={{\n          left: targetRect.left - padding,\n          top: targetRect.top - padding,\n          width: targetRect.width + padding * 2,\n          height: targetRect.height + padding * 2,\n          boxShadow: \"0 0 0 2px rgba(6, 182, 212, 0.5), 0 0 20px rgba(6, 182, 212, 0.3)\",\n        }}\n      />\n\n      {/* Tooltip */}\n      <div\n        className=\"fixed z-50\"\n        style={{\n          ...tooltipStyle,\n          width: tooltipWidth,\n        }}\n      >\n        <div className=\"relative\">\n          {/* Glow */}\n          <div className=\"absolute -inset-2 rounded-xl bg-linear-to-r from-cyan-500/30 to-blue-500/30 blur-lg opacity-70\" />\n\n          {/* Card */}\n          <div className=\"relative rounded-xl border border-white/20 bg-black/90 backdrop-blur-xl p-4 shadow-[0_8px_32px_rgba(0,0,0,0.4)]\">\n            {/* Glass highlight */}\n            <div className=\"absolute inset-0 rounded-xl bg-linear-to-b from-white/10 to-transparent pointer-events-none\" />\n\n            <div className=\"relative\">\n              {/* Header */}\n              <div className=\"flex items-center justify-between mb-2\">\n                <span className=\"text-xs text-white/40\">\n                  Step {currentStep + 1} of {steps.length}\n                </span>\n                <button\n                  onClick={handleClose}\n                  className=\"p-1 rounded-lg text-white/40 hover:text-white hover:bg-white/10 transition-colors\"\n                >\n                  <X className=\"w-4 h-4\" />\n                </button>\n              </div>\n\n              {/* Content */}\n              <h4 className=\"font-semibold text-white mb-2\">{step.title}</h4>\n              <p className=\"text-sm text-white/60 mb-4\">{step.description}</p>\n\n              {/* Navigation */}\n              <div className=\"flex items-center justify-between\">\n                <button\n                  onClick={handlePrev}\n                  disabled={currentStep === 0}\n                  className={cn(\n                    \"flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm\",\n                    \"transition-colors\",\n                    currentStep === 0\n                      ? \"text-white/20 cursor-not-allowed\"\n                      : \"text-white/60 hover:text-white hover:bg-white/10\",\n                  )}\n                >\n                  <ChevronLeft className=\"w-4 h-4\" />\n                  Back\n                </button>\n\n                <button\n                  onClick={handleNext}\n                  className={cn(\n                    \"flex items-center gap-1 px-4 py-1.5 rounded-lg text-sm font-medium\",\n                    \"bg-linear-to-r from-cyan-500 to-blue-500 text-white\",\n                    \"hover:from-cyan-400 hover:to-blue-400 transition-all\",\n                  )}\n                >\n                  {currentStep === steps.length - 1 ? \"Finish\" : \"Next\"}\n                  {currentStep < steps.length - 1 && <ChevronRight className=\"w-4 h-4\" />}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport { GlassSpotlight }\nexport type { SpotlightStep }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}