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