{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "hold-to-confirm-button",
  "type": "registry:ui",
  "title": "Hold to Confirm Action Button",
  "description": "Critical action button requiring sustained mouse hold with radial charging SVG progress ring before dispatching confirmation event.",
  "category": "buttons",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/buttons/hold-to-confirm-button/hold-to-confirm-button.tsx",
      "type": "registry:ui",
      "target": "components/ui/hold-to-confirm-button.tsx",
      "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion } from 'framer-motion';\nimport { ShieldWarning, Check } from '@phosphor-icons/react';\n\nexport const HoldToConfirmButton: React.FC = () => {\n  const [progress, setProgress] = useState(0);\n  const [isHolding, setIsHolding] = useState(false);\n  const [isConfirmed, setIsConfirmed] = useState(false);\n  const timerRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) cancelAnimationFrame(timerRef.current);\n    };\n  }, []);\n\n  const startHold = () => {\n    if (isConfirmed) return;\n    setIsHolding(true);\n    const startTime = Date.now();\n    const duration = 1400;\n\n    const tick = () => {\n      const elapsed = Date.now() - startTime;\n      const pct = Math.min(100, (elapsed / duration) * 100);\n      setProgress(pct);\n      if (pct < 100) {\n        timerRef.current = requestAnimationFrame(tick);\n      } else {\n        setIsConfirmed(true);\n        setIsHolding(false);\n      }\n    };\n    timerRef.current = requestAnimationFrame(tick);\n  };\n\n  const cancelHold = () => {\n    if (isConfirmed) return;\n    setIsHolding(false);\n    setProgress(0);\n    if (timerRef.current) cancelAnimationFrame(timerRef.current);\n  };\n\n  const reset = () => {\n    setIsConfirmed(false);\n    setProgress(0);\n  };\n\n  return (\n    <div className=\"flex flex-col items-center gap-3\">\n      <button\n        onMouseDown={startHold}\n        onMouseUp={cancelHold}\n        onMouseLeave={cancelHold}\n        onTouchStart={startHold}\n        onTouchEnd={cancelHold}\n        onTouchCancel={cancelHold}\n        className={`relative overflow-hidden px-6 py-3 rounded-2xl font-mono text-xs font-bold transition-all select-none cursor-pointer border ${\n          isConfirmed\n            ? 'bg-emerald-500 text-white border-emerald-400 shadow-lg shadow-emerald-500/20'\n            : 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 border-zinc-800 dark:border-white/20 hover:scale-[1.02] active:scale-[0.98]'\n        }`}\n      >\n        {/* Fill Background Track */}\n        {isHolding && (\n          <div\n            style={{ width: `${progress}%` }}\n            className=\"absolute inset-0 bg-rose-500/40 pointer-events-none transition-all duration-75\"\n          />\n        )}\n\n        <div className=\"relative z-10 flex items-center gap-2\">\n          {isConfirmed ? (\n            <>\n              <Check size={14} weight=\"bold\" />\n              <span>TERMINATION CONFIRMED</span>\n            </>\n          ) : (\n            <>\n              <ShieldWarning size={14} weight=\"bold\" className={isHolding ? 'text-rose-400 animate-pulse' : ''} />\n              <span>{isHolding ? `HOLDING (${Math.round(progress)}%)` : 'HOLD TO PURGE CLUSTER'}</span>\n            </>\n          )}\n        </div>\n      </button>\n\n      {isConfirmed && (\n        <button\n          onClick={reset}\n          className=\"text-[11px] font-mono text-zinc-500 hover:text-zinc-900 dark:hover:text-white underline cursor-pointer\"\n        >\n          Reset Action\n        </button>\n      )}\n    </div>\n  );\n};\n"
    }
  ]
}