{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "morphing-button-base",
  "type": "registry:component",
  "title": "Morphing Button (base)",
  "description": "Theme-ready base variant of 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=\"theme-injected 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          className={`border-border/60 relative flex rounded-lg items-center overflow-hidden border-[1.1px] transition-colors duration-300 ${\n            isExpanded ? 'bg-card w-84 p-1 shadow-sm' : 'bg-card w-auto p-0'\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=\"text-card-foreground placeholder:text-muted-foreground w-full bg-transparent text-xl font-semibold transition-colors outline-none\"\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-lg font-bold whitespace-nowrap transition-colors duration-300 ${\n              isExpanded\n                ? 'bg-primary text-primary-foreground hover:bg-primary/90 px-5 py-3 shadow-sm'\n                : 'bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-4'\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=\"text-primary-foreground h-6 w-6\" />\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"
    }
  ]
}