{
  "name": "bulb-icon",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "bulb-icon.tsx",
      "content": "'use client';\n\nimport { motion, useAnimation } from 'motion/react';\nimport { Lightbulb } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useEffect, useState } from 'react';\n\ninterface BulbIconProps {\n  className?: string;\n  color?: string;\n  size?: number;\n  isLit?: boolean;\n  startOnHover?: boolean;\n  animationType?: 'pulse' | 'flash';\n}\n\nexport function BulbIcon({\n  className,\n  color = 'currentColor',\n  size = 24,\n  isLit = false,\n  startOnHover = true,\n  animationType = 'pulse',\n}: BulbIconProps) {\n  const controls = useAnimation();\n  const [isHovered, setIsHovered] = useState(false);\n  const shouldAnimate = isLit || (startOnHover && isHovered);\n\n  useEffect(() => {\n    if (shouldAnimate) {\n      if (animationType === 'pulse') {\n        controls.start({\n          scale: [1, 1.1, 1],\n          opacity: [1, 0.8, 1],\n          transition: {\n            duration: 1.5,\n            repeat: Infinity,\n            repeatType: 'loop',\n            ease: 'easeInOut',\n          },\n        });\n      } else if (animationType === 'flash') {\n        controls.start({\n          opacity: [1, 0.2, 1],\n          transition: {\n            duration: 0.5,\n            repeat: Infinity,\n            repeatType: 'reverse',\n            ease: 'linear',\n          },\n        });\n      }\n    } else {\n      controls.stop();\n      controls.set({ scale: 1, opacity: 1 });\n    }\n  }, [shouldAnimate, animationType, controls]);\n\n  return (\n    <div\n      className={cn(\n        'relative flex cursor-pointer items-center justify-center select-none',\n        className\n      )}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {shouldAnimate && (\n        <motion.div\n          initial={{ opacity: 0, scale: 0.8 }}\n          animate={{ opacity: 0.4, scale: 1.5 }}\n          className={cn(\n            'absolute rounded-full blur-md',\n            animationType === 'pulse' ? 'bg-yellow-400/50' : 'bg-red-500/30'\n          )}\n          style={{ width: size, height: size }}\n        />\n      )}\n      <motion.div animate={controls} className='relative z-10'>\n        <Lightbulb\n          size={size}\n          color={\n            shouldAnimate\n              ? animationType === 'pulse'\n                ? '#eab308'\n                : color\n              : color\n          }\n          className={cn(\n            shouldAnimate &&\n              animationType === 'pulse' &&\n              'fill-yellow-400 text-yellow-500'\n          )}\n        />\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}