{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quick-paste",
  "type": "registry:component",
  "title": "Quick Paste",
  "description": "Instantly paste copied content using shortcut-triggered micro interaction panel.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/quick-paste.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { X, ArrowRight } from 'lucide-react';\n\nexport interface PasteData {\n  name: string;\n  image: string;\n}\n\ninterface QuickPasteProps {\n  onPaste: (value: string) => PasteData | null;\n  onClear?: () => void;\n  onContinue?: (data: PasteData) => void;\n  placeholder?: string;\n  submitText?: string;\n  className?: string;\n}\n\nexport const QuickPaste: React.FC<QuickPasteProps> = ({\n  onPaste,\n  onClear,\n  onContinue,\n  placeholder = 'Email Address',\n  submitText = 'Paste',\n  className = '',\n}) => {\n  const [pastedData, setPastedData] = useState<PasteData | null>(null);\n  const [inputValue, setInputValue] = useState('');\n\n  const handlePaste = () => {\n    const data = onPaste(inputValue);\n    if (data) {\n      setPastedData(data);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      handlePaste();\n    }\n  };\n\n  const handleClear = () => {\n    setPastedData(null);\n    setInputValue('');\n    onClear?.();\n  };\n\n  const springConfig = { type: 'spring' as const, bounce: 0.1, duration: 0.4 };\n\n  return (\n    <div\n      className={`flex w-full flex-col items-center justify-center p-4 antialiased select-none ${className}`}\n    >\n      <div className=\"w-full max-w-100\">\n        <LayoutGroup>\n          <motion.div\n            layout\n            transition={springConfig}\n            className=\"flex min-h-16 items-center rounded-full bg-neutral-100 p-1.5 shadow-sm transition-colors duration-300 dark:bg-neutral-900\"\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {pastedData ? (\n                <motion.div\n                  key=\"pasted\"\n                  className=\"flex w-full items-center justify-between pr-1\"\n                >\n                  <motion.div\n                    initial={{\n                      opacity: 0,\n                      scale: 0.9,\n                      filter: 'blur(4px)',\n                      x: -20,\n                    }}\n                    animate={{\n                      opacity: 1,\n                      scale: 1,\n                      filter: 'blur(0px)',\n                      x: 0,\n                    }}\n                    exit={{\n                      opacity: 0,\n                      scale: 0.9,\n                      filter: 'blur(4px)',\n                      x: -20,\n                    }}\n                    transition={{ type: 'spring', bounce: 0, duration: 0.35 }}\n                    className=\"flex items-center rounded-full border border-neutral-200 bg-white py-1.5 pr-4 pl-1.5 shadow-sm transition-colors dark:border-neutral-700 dark:bg-neutral-800\"\n                  >\n                    <img\n                      src={pastedData.image}\n                      alt={pastedData.name}\n                      className=\"mr-3 h-9 w-9 rounded-full border border-neutral-200 object-cover shadow-sm dark:border-neutral-700\"\n                    />\n                    <span className=\"mr-3 max-w-30 truncate text-[15px] font-bold tracking-tight text-neutral-600 transition-colors sm:max-w-none sm:text-[16px] dark:text-neutral-200\">\n                      {pastedData.name}\n                    </span>\n                    <button\n                      title=\"remove\"\n                      onClick={handleClear}\n                      className=\"flex h-5 w-5 items-center justify-center rounded-full bg-neutral-400 text-white transition-colors hover:bg-red-500\"\n                    >\n                      <X size={14} strokeWidth={3} />\n                    </button>\n                  </motion.div>\n\n                  <motion.button\n                    title=\"continue\"\n                    layoutId=\"shared-action-button\"\n                    transition={springConfig}\n                    style={{ borderRadius: 9999 }}\n                    onClick={() => onContinue?.(pastedData)}\n                    className=\"ml-2 flex h-11 w-11 shrink-0 items-center justify-center bg-neutral-900 text-white shadow-lg active:scale-95 dark:bg-white dark:text-black\"\n                  >\n                    <motion.div\n                      layout=\"position\"\n                      initial={{ opacity: 0, scale: 0.8 }}\n                      animate={{ opacity: 1, scale: 1 }}\n                      exit={{ opacity: 0, scale: 0.8 }}\n                      transition={{ duration: 0.2 }}\n                      className=\"flex items-center justify-center\"\n                    >\n                      <ArrowRight size={22} strokeWidth={2.5} />\n                    </motion.div>\n                  </motion.button>\n                </motion.div>\n              ) : (\n                <motion.div\n                  key=\"input\"\n                  initial={{ opacity: 0, filter: 'blur(4px)', x: 0 }}\n                  animate={{ opacity: 1, filter: 'blur(0px)', x: 0 }}\n                  exit={{ opacity: 0, filter: 'blur(4px)', x: 0 }}\n                  transition={{ type: 'spring', bounce: 0, duration: 0.35 }}\n                  className=\"flex w-full items-center justify-between pr-1 pl-4\"\n                >\n                  <input\n                    type=\"text\"\n                    placeholder={placeholder}\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    className=\"mr-2 w-full border-none bg-transparent text-[16px] font-semibold text-neutral-900 transition-colors outline-none placeholder:text-neutral-400 sm:text-[18px] dark:text-white dark:placeholder:text-neutral-600\"\n                  />\n                  <motion.button\n                    layoutId=\"shared-action-button\"\n                    type=\"button\"\n                    transition={springConfig}\n                    style={{ borderRadius: 9999 }}\n                    onClick={handlePaste}\n                    className=\"flex h-11 shrink-0 items-center justify-center bg-blue-600 px-5 text-[14px] font-bold tracking-tight text-white shadow-md hover:bg-blue-700 active:scale-95 sm:px-7 sm:text-[15px]\"\n                  >\n                    <motion.span\n                      layout=\"position\"\n                      initial={{ opacity: 0, scale: 0.8 }}\n                      animate={{ opacity: 1, scale: 1 }}\n                      exit={{ opacity: 0, scale: 0.8 }}\n                      transition={{ duration: 0.2 }}\n                      className=\"whitespace-nowrap\"\n                    >\n                      {submitText}\n                    </motion.span>\n                  </motion.button>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </motion.div>\n        </LayoutGroup>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}