{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fuse-undo-button",
  "title": "Fuse Undo Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "An archive button that turns into Undo and lights an orange fuse around its outline; the fuse holds still while you hover it, so the chance to undo only runs out once you look away.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/fuse-undo-button.tsx",
      "content": "\"use client\";\n\nimport { Archive, RotateCcw } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { AnimationEvent } from \"react\";\n\ntype FuseState = \"idle\" | \"burning\";\n\nconst fuseKeyframes = `\n@keyframes fuse-undo-burn {\n  from { stroke-dashoffset: 0; }\n  to { stroke-dashoffset: -1.02; }\n}`;\n\nconst rowClass =\n  \"inline-flex items-center gap-[10px] justify-self-center whitespace-nowrap [grid-area:1/1] [transition:opacity_.3s_ease,transform_.45s_cubic-bezier(.16,1,.3,1),visibility_.3s] data-[active=false]:invisible data-[active=false]:opacity-0 motion-reduce:transition-none motion-reduce:data-[active=false]:[transform:none]\";\n\nexport function FuseUndoButton() {\n  const [state, setState] = useState<FuseState>(\"idle\");\n  const [fuse, setFuse] = useState(0);\n\n  const handleBurnEnd = (event: AnimationEvent<SVGRectElement>) => {\n    if (event.animationName === \"fuse-undo-burn\") setState(\"idle\");\n  };\n\n  const handleClick = () => {\n    if (state === \"idle\") {\n      setFuse((current) => current + 1);\n      setState(\"burning\");\n    } else {\n      setState(\"idle\");\n    }\n  };\n\n  return (\n    <>\n      <style>{fuseKeyframes}</style>\n      <button\n        type=\"button\"\n        className=\"group relative inline-flex h-[52px] cursor-pointer appearance-none items-center justify-center rounded-full border-0 bg-[light-dark(#ffffff,#121418)] px-[28px] [font-family:inherit] text-[17px] font-medium leading-none tracking-[-.01em] text-[light-dark(#14181e,#f2f4f6)] [box-shadow:inset_0_0_0_1px_light-dark(#dfe3ea,#2b2f36),0_10px_24px_light-dark(rgba(246,247,249,.35),rgba(0,0,0,.35))] [transition:background-color_.2s_ease] hover:bg-[light-dark(#f0f2f5,#1b1e23)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316] motion-reduce:transition-none\"\n        data-state={state}\n        onClick={handleClick}\n      >\n        <svg\n          key={fuse}\n          className=\"pointer-events-none absolute inset-0 size-full overflow-visible opacity-0 [filter:drop-shadow(0_0_6px_rgba(249,115,22,.55))] [transition:opacity_.35s_ease] group-data-[state=burning]:opacity-100 motion-reduce:transition-none\"\n          aria-hidden=\"true\"\n        >\n          <rect\n            className=\"fill-none stroke-[#f97316] stroke-2 [stroke-linecap:round] [animation-name:fuse-undo-burn] [animation-duration:5s] [animation-timing-function:linear] [animation-fill-mode:forwards] [animation-play-state:paused] group-data-[state=burning]:[animation-play-state:running] group-data-[state=burning]:group-hover:[animation-play-state:paused] group-data-[state=burning]:group-focus-visible:[animation-play-state:paused]\"\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            rx=\"26\"\n            pathLength={1}\n            strokeDasharray=\"1 2\"\n            onAnimationEnd={handleBurnEnd}\n          />\n        </svg>\n        <span className=\"grid\" aria-live=\"polite\">\n          <span className={`${rowClass} data-[active=false]:[transform:translateY(-10px)]`} data-active={state === \"idle\"}>\n            <Archive className=\"shrink-0\" size={20} strokeWidth={2} aria-hidden=\"true\" />\n            Archive\n          </span>\n          <span className={`${rowClass} data-[active=false]:[transform:translateY(10px)]`} data-active={state === \"burning\"}>\n            <RotateCcw className=\"shrink-0\" size={20} strokeWidth={2} aria-hidden=\"true\" />\n            Undo\n          </span>\n        </span>\n      </button>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/fuse-undo-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/fuse-undo-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}