{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hold-to-confirm-demo",
  "title": "Hold to Confirm Demo",
  "description": "Demo usage for the Hold to Confirm component",
  "registryDependencies": [
    "@spectrumui/hold-to-confirm"
  ],
  "files": [
    {
      "path": "app/registry/hold-to-confirm/hold-to-confirm-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { HoldToConfirmButton } from \"@/components/spectrumui/hold-to-confirm\"\n\nexport default function HoldToConfirmDemo() {\n  const [deleted, setDeleted] = useState(false)\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current) clearTimeout(timerRef.current)\n    }\n  }, [])\n\n  const handleConfirm = () => {\n    // Let the button's success morph play before removing the row\n    timerRef.current = setTimeout(() => setDeleted(true), 900)\n  }\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-5 py-10\">\n      <div className=\"w-full max-w-sm\">\n        <AnimatePresence mode=\"wait\" initial={false}>\n          {!deleted ? (\n            <motion.div\n              key=\"project\"\n              exit={{ opacity: 0, y: -8 }}\n              transition={{ duration: 0.2, ease: \"easeOut\" }}\n              className=\"flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900\"\n            >\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-medium text-neutral-900 dark:text-white\">\n                  acme-website\n                </p>\n                <p className=\"mt-0.5 text-xs text-neutral-500 dark:text-neutral-400\">\n                  Production · last deployed 2h ago\n                </p>\n              </div>\n              <HoldToConfirmButton size=\"sm\" onConfirm={handleConfirm} />\n            </motion.div>\n          ) : (\n            <motion.div\n              key=\"deleted\"\n              initial={{ opacity: 0, y: 8 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.2, ease: \"easeOut\" }}\n              className=\"flex items-center justify-center gap-2 rounded-2xl border border-dashed border-neutral-200 p-4 dark:border-neutral-800\"\n            >\n              <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                acme-website was deleted.\n              </p>\n              <button\n                type=\"button\"\n                onClick={() => setDeleted(false)}\n                className=\"text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-neutral-950 dark:text-white dark:hover:text-neutral-300 dark:focus-visible:ring-neutral-300\"\n              >\n                Restore\n              </button>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n      <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n        Press and hold the button — release early to cancel\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/hold-to-confirm-demo.tsx"
    }
  ],
  "type": "registry:component"
}