{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-button",
  "title": "Status Button",
  "description": "A button with animated states for idle, loading, and success.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/default/example/status-button.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { Tick02Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useMemo, useState } from \"react\";\n\nexport function SaveButton() {\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"success\">(\"idle\");\n\n  const handleClick = () => {\n    setStatus(\"loading\");\n    setTimeout(() => {\n      setStatus(\"success\");\n      setTimeout(() => {\n        setStatus(\"idle\");\n      }, 2000);\n    }, 2500);\n  };\n\n  const text = useMemo(() => {\n    switch (status) {\n      case \"idle\":\n        return \"Save\";\n      case \"loading\":\n        return \"Saving\";\n      case \"success\":\n        return \"Saved\";\n    }\n  }, [status]);\n\n  return (\n    <div className=\"relative inline-flex group font-sans\">\n      <Button\n        onClick={handleClick}\n        className={cn(\n          \"relative rounded-full h-12 px-8 text-base font-medium transition-all duration-300 min-w-[140px] disabled:opacity-100\",\n          status === \"idle\"\n            ? \"transition-colors\"\n            : \"bg-muted text-muted-foreground hover:bg-muted cursor-not-allowed border-muted shadow-sm\"\n        )}\n        variant={\"default\"}\n        disabled={status !== \"idle\"}\n      >\n        <span className=\"flex items-center justify-center\">\n          <AnimatePresence mode=\"popLayout\" initial={false}>\n            {text.split(\"\").map((char, i) => (\n              <motion.span\n                key={`${char}-${i}`}\n                layout\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={{\n                  type: \"spring\",\n                  stiffness: 500,\n                  damping: 30,\n                  mass: 1,\n                }}\n                className=\"inline-block\"\n              >\n                {char}\n              </motion.span>\n            ))}\n          </AnimatePresence>\n        </span>\n      </Button>\n\n      {/* Status Indicator */}\n      <div className={cn(\"absolute -top-1 -right-1 z-10 pointer-events-none\")}>\n        <AnimatePresence mode=\"wait\">\n          {status !== \"idle\" && (\n            <motion.div\n              initial={{ opacity: 0, scale: 0, x: -8, filter: \"blur(4px)\" }}\n              animate={{ opacity: 1, scale: 1, x: 0, filter: \"blur(0px)\" }}\n              exit={{ opacity: 0, scale: 0, x: -8, filter: \"blur(4px)\" }}\n              transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n              className={cn(\n                \"flex items-center justify-center size-6 rounded-full  ring-3 overflow-visible\",\n                status === \"success\"\n                  ? \"bg-primary text-primary-foreground  ring-muted\"\n                  : \"bg-muted text-muted-foreground ring-muted \"\n              )}\n            >\n              <AnimatePresence mode=\"popLayout\">\n                {status === \"loading\" && (\n                  <motion.div\n                    key=\"loader\"\n                    initial={{ opacity: 1 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ scale: 0, opacity: 0 }}\n                    transition={{ duration: 0.2 }}\n                    className=\"absolute inset-0 flex items-center justify-center\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"24\"\n                      height=\"24\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z\"\n                        opacity=\".5\"\n                      />\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z\"\n                        // className=\"animate-spin\"\n                      >\n                        <animateTransform\n                          attributeName=\"transform\"\n                          dur=\"1s\"\n                          from=\"0 12 12\"\n                          repeatCount=\"indefinite\"\n                          to=\"360 12 12\"\n                          type=\"rotate\"\n                        />\n                      </path>\n                    </svg>\n                  </motion.div>\n                )}\n                {status === \"success\" && (\n                  <motion.div\n                    key=\"check\"\n                    initial={{ scale: 0, opacity: 0, filter: \"blur(4px)\" }}\n                    animate={{ scale: 1, opacity: 1, filter: \"blur(0px)\" }}\n                    exit={{ scale: 0, opacity: 0, filter: \"blur(4px)\" }}\n                    transition={{ type: \"spring\", stiffness: 500, damping: 25 }}\n                    className=\"absolute inset-0 flex items-center justify-center\"\n                  >\n                    <HugeiconsIcon icon={Tick02Icon} className=\"size-4\" />\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}