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