{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inline-toast",
  "type": "registry:component",
  "title": "Inline Toast",
  "description": "An animated inline toast that provides instant feedback with a built-in copy action.",
  "dependencies": [
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/inline-toast.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { IoCheckmarkCircle } from 'react-icons/io5';\n\nexport interface InlineCopyToastProps {\n  code: string;\n  copyDuration?: number;\n}\n\nexport const InlineToast: FC<InlineCopyToastProps> = ({\n  code,\n  copyDuration = 2000,\n}) => {\n  const [copied, setCopied] = useState<boolean>(false);\n\n  const handleCopy = async (): Promise<void> => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n\n    setTimeout(() => {\n      setCopied(false);\n    }, copyDuration);\n  };\n\n  return (\n    <motion.div\n      layout=\"position\"\n      transition={{ type: 'spring', stiffness: 260, damping: 24 }}\n      className=\"relative flex h-16 min-w-[320px] items-center justify-center overflow-hidden rounded-full border border-[#ecebeb2b] bg-[#F6F6F6] pl-7 pr-2 shadow-sm dark:bg-zinc-900\"\n    >\n      <AnimatePresence>\n        {copied && (\n          <motion.div\n            initial={{ x: '-100%' }}\n            animate={{ x: '0%' }}\n            transition={{\n              duration: copyDuration / 1000,\n              ease: 'linear',\n            }}\n            className=\"absolute inset-0 bg-[#F0F0F0] dark:bg-zinc-800\"\n          />\n        )}\n      </AnimatePresence>\n\n      <div className=\"z-10 flex w-full items-center justify-between gap-7\">\n        <AnimatePresence mode=\"popLayout\">\n          {!copied ? (\n            <motion.div\n              key=\"copy\"\n              initial={{ opacity: 0, filter: 'blur(4px)', scale: 0.95 }}\n              animate={{ opacity: 1, filter: 'blur(0px)', scale: 1 }}\n              exit={{ opacity: 0, filter: 'blur(4px)', scale: 0.95 }}\n              transition={{\n                type: 'spring',\n                bounce: 0,\n                duration: 0.4,\n              }}\n              className=\"flex w-full items-center justify-between\"\n            >\n              <span className=\"text-xl font-bold tracking-wide text-[#868686] dark:text-zinc-500\">\n                {code}\n              </span>\n\n              <motion.button\n                onClick={handleCopy}\n                whileHover={{ y: -1, scale: 1.04 }}\n                whileTap={{ scale: 0.96 }}\n                transition={{\n                  type: 'spring',\n                  stiffness: 350,\n                  damping: 18,\n                }}\n                className=\"relative cursor-pointer overflow-hidden rounded-full bg-[#FEFEFE] px-[26px] py-2.5 text-base font-semibold text-black shadow-[0_6px_12px_rgba(0,0,0,0.08)] dark:bg-zinc-100\"\n              >\n                <motion.span\n                  initial={{ x: '-120%' }}\n                  whileHover={{ x: '120%' }}\n                  transition={{ duration: 0.6, ease: 'easeInOut' }}\n                  className=\"pointer-events-none absolute inset-0 bg-linear-to-r from-transparent via-black/5 to-transparent\"\n                />\n\n                <span className=\"relative z-10\">Copy</span>\n              </motion.button>\n            </motion.div>\n          ) : (\n            <motion.div\n              key=\"copied\"\n              initial={{ opacity: 0, filter: 'blur(4px)', scale: 1.1 }}\n              animate={{ opacity: 1, filter: 'blur(0px)', scale: 1 }}\n              exit={{ opacity: 0, filter: 'blur(4px)', scale: 1.1 }}\n              transition={{\n                type: 'spring',\n                bounce: 0,\n                duration: 0.4,\n              }}\n              className=\"flex w-full items-center justify-center gap-2 text-black dark:text-white\"\n            >\n              <IoCheckmarkCircle size={28} />\n              <span className=\"text-lg font-bold\">Code Copied!</span>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </motion.div>\n  );\n};\n"
    }
  ]
}