{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "delete-button",
  "title": "Delete Button",
  "description": "A confirmation button with smooth icon transitions.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/delete-button.tsx",
      "content": "\"use client\";\n\nimport { Undo03Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport React, { useEffect, useState } from \"react\";\n\nconst DeleteButton = () => {\n  const [isDeleting, setIsDeleting] = useState(false);\n  const [count, setCount] = useState(10);\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  useEffect(() => {\n    if (!isDeleting) return;\n\n    if (count === 0) return;\n\n    const timer = setTimeout(() => setCount((c) => c - 1), 1000);\n    return () => clearTimeout(timer);\n  }, [isDeleting, count]);\n\n  const handleClick = (newState: boolean) => {\n    if (isAnimating) return;\n    setIsAnimating(true);\n    setIsDeleting(newState);\n    if (newState) setCount(10);\n\n    // Release lock after animation completes\n    setTimeout(() => setIsAnimating(false), 400);\n  };\n\n  // Change Here\n  const deleteText = \"Delete Account\";\n  const cancelText = \"Cancel Deletion\";\n\n  return (\n    <div className=\"flex items-center justify-center\">\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        {!isDeleting ? (\n          // STATE A\n          <motion.button\n            key=\"delete\"\n            layoutId=\"deleteButton\"\n            onClick={() => handleClick(true)}\n            whileTap={{ scale: 0.95 }}\n            style={{ pointerEvents: isAnimating ? \"none\" : \"auto\" }}\n            initial={{\n              backgroundColor: \"#FFEDF1\",\n              filter: \"blur(1px)\",\n              opacity: 1,\n            }}\n            animate={{\n              backgroundColor: \"#FE322A\",\n              filter: \"blur(0px)\",\n              opacity: 1,\n            }}\n            exit={{\n              backgroundColor: \"#FFEDF1\",\n              filter: \"blur(1px)\",\n              opacity: 0,\n            }}\n            className=\"text-white px-5 py-3 rounded-full flex items-center justify-center overflow-hidden\"\n            transition={{\n              layout: { duration: 0.4, ease: [0.77, 0, 0.175, 1] },\n              backgroundColor: { duration: 0.4, ease: \"easeInOut\" },\n              filter: { duration: 0.1, ease: \"easeInOut\" },\n              opacity: { duration: 0.2, ease: \"easeOut\" },\n            }}\n          >\n            <motion.span\n              layoutId=\"buttonText\"\n              className=\"flex\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.1 }}\n            >\n              {deleteText.split(\"\").map((char, i) => (\n                <motion.span\n                  key={`delete-${i}`}\n                  initial={{ y: 20, opacity: 0, scale: 0.3 }}\n                  animate={{ y: 0, opacity: 1, scale: 1 }}\n                  exit={{ y: -20, opacity: 0, scale: 0.3 }}\n                  transition={{\n                    duration: 0.3,\n                    delay: i * 0.005,\n                    ease: [0.785, 0.135, 0.15, 0.86],\n                  }}\n                  style={{ display: \"inline-block\", whiteSpace: \"pre\" }}\n                >\n                  {char}\n                </motion.span>\n              ))}\n            </motion.span>\n          </motion.button>\n        ) : (\n          // STATE B\n          <motion.button\n            key=\"cancel\"\n            layoutId=\"deleteButton\"\n            onClick={() => handleClick(false)}\n            whileTap={{ scale: 0.95 }}\n            style={{ pointerEvents: isAnimating ? \"none\" : \"auto\" }}\n            initial={{\n              backgroundColor: \"#FE322A\",\n              filter: \"blur(1px)\",\n              opacity: 0,\n            }}\n            animate={{\n              backgroundColor: \"#FFEDF1\",\n              filter: \"blur(0px)\",\n              opacity: 1,\n            }}\n            exit={{\n              backgroundColor: \"#FE322A\",\n              filter: \"blur(1px)\",\n              opacity: 0,\n            }}\n            className=\"px-3 py-3 rounded-full flex items-center gap-2 overflow-hidden\"\n            transition={{\n              layout: { duration: 0.4, ease: [0.77, 0, 0.175, 1] },\n              backgroundColor: { duration: 0.4, ease: \"easeInOut\" },\n              filter: { duration: 0.2, ease: \"easeInOut\" },\n              opacity: { duration: 0.2, ease: \"easeIn\" },\n            }}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={{ duration: 0.2, delay: 0.05 }}\n              className=\"bg-[#FE322A] p-1.5 rounded-full flex items-center justify-center shrink-0\"\n            >\n              <HugeiconsIcon icon={Undo03Icon} className=\"h-4 w-4 text-white\" />\n            </motion.div>\n\n            <motion.span\n              layoutId=\"buttonText\"\n              className=\"text-[#FE322A] font-medium flex\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.1 }}\n            >\n              {cancelText.split(\"\").map((char, i) => (\n                <motion.span\n                  key={`cancel-${i}`}\n                  initial={{ y: 20, opacity: 0, scale: 0.3 }}\n                  animate={{ y: 0, opacity: 1, scale: 1 }}\n                  exit={{ y: -20, opacity: 0, scale: 0.3 }}\n                  transition={{\n                    duration: 0.3,\n                    delay: i * 0.006,\n                    ease: [0.785, 0.135, 0.15, 0.86],\n                  }}\n                  style={{ display: \"inline-block\", whiteSpace: \"pre\" }}\n                >\n                  {char}\n                </motion.span>\n              ))}\n            </motion.span>\n\n            <motion.div\n              className=\"bg-[#FE322A] text-white px-4 py-3 rounded-full text-sm font-semibold flex items-center justify-center relative overflow-hidden shrink-0 min-w-[32px]\"\n              initial={{ opacity: 0, scale: 0.5 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.5 }}\n              transition={{ duration: 0.2, delay: 0.1 }}\n            >\n              <AnimatePresence mode=\"popLayout\">\n                <motion.span\n                  key={count}\n                  initial={{\n                    opacity: 0,\n                    y: 10,\n                    scale: 0.8,\n                  }}\n                  animate={{ opacity: 1, y: 0, scale: 1 }}\n                  exit={{\n                    opacity: 0,\n                    y: -10,\n                    scale: 0.8,\n                  }}\n                  transition={{ duration: 0.2, ease: [0.33, 1, 0.68, 1] }}\n                  className=\"absolute\"\n                >\n                  {count}\n                </motion.span>\n              </AnimatePresence>\n            </motion.div>\n          </motion.button>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n\nexport default DeleteButton;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}