{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morphing-button",
  "type": "registry:component",
  "title": "Morphing Button",
  "description": "An animated button that smoothly morphs into an expanded interactive state.",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/morphing-button.tsx",
      "type": "registry:component",
      "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { FaBell } from 'react-icons/fa6';\n\ninterface MorphingButtonProps {\n  buttonText?: string;\n  placeholder?: string;\n  onSubmit?: (email: string) => void;\n  className?: string;\n}\n\nexport const MorphingButton: React.FC<MorphingButtonProps> = ({\n  buttonText = 'Notify Me',\n  placeholder = 'Email',\n  onSubmit,\n  className = '',\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [email, setEmail] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target as Node)\n      ) {\n        setIsExpanded(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [isExpanded]);\n\n  const handleToggle = (e: React.MouseEvent) => {\n    if (!isExpanded) {\n      e.stopPropagation();\n      setIsExpanded(true);\n    } else if (email) {\n      onSubmit?.(email);\n      setIsExpanded(false);\n      setEmail('');\n    }\n  };\n\n  const springConfig = {\n    type: 'spring',\n    stiffness: 240,\n    damping: 18,\n    mass: 1.1,\n  } as const;\n\n  return (\n    <div className=\"flex w-full flex-col items-center justify-center gap-12 p-8 transition-colors duration-500\">\n      <div\n        className={`flex items-center justify-center will-change-transform ${className}`}\n      >\n        <motion.div\n          ref={containerRef}\n          layout\n          transition={springConfig}\n          style={{ borderRadius: 32 }}\n          className={`relative flex items-center overflow-hidden border-[1.1px] border-[#e7e6e6a6] transition-colors duration-300 dark:border-white/5 ${\n            isExpanded\n              ? 'w-84 bg-[#F4F4F4] p-1 shadow-sm dark:bg-[#1C1C1E] dark:shadow-xl'\n              : 'w-auto bg-[#F4F4F4] p-0 dark:bg-[#1C1C1E]'\n          }`}\n        >\n          <AnimatePresence mode=\"popLayout\">\n            {isExpanded && (\n              <motion.div\n                key=\"input-container\"\n                initial={{ opacity: 0, x: -10 }}\n                animate={{ opacity: 1, x: 0 }}\n                exit={{ opacity: 0 }}\n                transition={{ ...springConfig }}\n                className=\"flex flex-1 items-center px-4\"\n              >\n                <motion.input\n                  ref={inputRef}\n                  layout\n                  type=\"email\"\n                  value={email}\n                  onChange={(e) => setEmail(e.target.value)}\n                  placeholder={placeholder}\n                  className=\"w-full bg-transparent text-xl font-semibold text-[#18181B] placeholder-[#A1A1AA] transition-colors outline-none dark:text-[#fefefe] dark:placeholder-[#B2B2B2]\"\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' && email) {\n                      onSubmit?.(email);\n                      setIsExpanded(false);\n                      setEmail('');\n                    }\n                  }}\n                />\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          <motion.button\n            layout\n            onClick={handleToggle}\n            transition={springConfig}\n            className={`relative flex items-center justify-center gap-3 rounded-full font-bold whitespace-nowrap transition-colors duration-300 ${\n              isExpanded\n                ? 'bg-[#FEFEFE] px-5 py-3 text-black shadow-sm hover:bg-[#fafafa] dark:bg-[#2C2C2E] dark:text-white dark:shadow-lg dark:hover:bg-[#3A3A3C]'\n                : 'bg-[#F4F4F4] px-6 py-4 text-black hover:bg-[#ebeaea] dark:bg-[#1C1C1E] dark:text-white dark:hover:bg-[#252529]'\n            }`}\n          >\n            <AnimatePresence mode=\"popLayout\" initial={false}>\n              {!isExpanded && (\n                <motion.span\n                  key=\"bell-icon\"\n                  layout\n                  className=\"origin-right\"\n                  initial={{ opacity: 0, scale: 0, filter: 'blur(4px)' }}\n                  animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}\n                  exit={{ opacity: 0, scale: 0, filter: 'blur(4px)' }}\n                  transition={springConfig}\n                >\n                  <FaBell className=\"h-6 w-6 text-black/90 dark:text-[#fefefe]\" />\n                </motion.span>\n              )}\n            </AnimatePresence>\n\n            <motion.span layout=\"position\" className=\"text-xl tracking-tight\">\n              {buttonText}\n            </motion.span>\n          </motion.button>\n        </motion.div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}