{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"strip-delete","type":"registry:ui","title":"Strip Delete","description":"Delete a document card and it feeds into a rattling shredder, coming out as strips that scatter and fall, with an undo that drops it back in.","dependencies":["motion","lucide-react"],"registryDependencies":[],"files":[{"path":"registry/ui/strip-delete.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { FileText, RotateCcw, Trash2 } from \"lucide-react\";\n\nexport interface StripDeleteProps {\n /** Document name on the card. */\n title?: string;\n /** Line under the title. */\n subtitle?: string;\n /** Custom card body (defaults to a skeleton page). */\n children?: ReactNode;\n /** Number of strips the card is cut into. */\n strips?: number;\n /** Ms the undo button stays available. 0 keeps it forever. */\n undoTimeout?: number;\n /** Called when the card is shredded. */\n onDelete?: () => void;\n /** Called when undo brings it back. */\n onUndo?: () => void;\n /** Called when the undo window closes. */\n onExpire?: () => void;\n className?: string;\n}\n\ntype Phase = \"idle\" | \"shredding\" | \"gone\" | \"expired\";\nconst CARD_H = 176;\nconst SHRED_MS = 1500;\n\n// Deterministic jitter so SSR and client agree.\nconst rand = (i: number, salt: number) => {\n const x = Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453;\n return x - Math.floor(x);\n};\n\nexport function StripDelete({\n title = \"Q3-forecast.pdf\",\n subtitle = \"2.4 MB ยท edited 3h ago\",\n children,\n strips = 12,\n undoTimeout = 5000,\n onDelete,\n onUndo,\n onExpire,\n className,\n}: StripDeleteProps) {\n const reduce = useReducedMotion();\n const [phase, setPhase] = useState(\"idle\");\n const [round, setRound] = useState(0);\n const timers = useRef([]);\n const undoBtn = useRef(null);\n const deleteBtn = useRef(null);\n useEffect(() => () => timers.current.forEach(clearTimeout), []);\n\n const later = (ms: number, fn: () => void) => timers.current.push(window.setTimeout(fn, ms));\n\n const shred = () => {\n if (phase !== \"idle\") return;\n setPhase(\"shredding\");\n onDelete?.();\n later(reduce ? 200 : SHRED_MS, () => {\n setPhase(\"gone\");\n requestAnimationFrame(() => undoBtn.current?.focus());\n if (undoTimeout > 0)\n later(undoTimeout, () => {\n setPhase(\"expired\");\n onExpire?.();\n });\n });\n };\n const undo = () => {\n timers.current.forEach(clearTimeout);\n timers.current = [];\n setRound((r) => r + 1);\n setPhase(\"idle\");\n onUndo?.();\n requestAnimationFrame(() => deleteBtn.current?.focus());\n };\n\n const body = children ?? (\n
\n
\n \n \n \n
\n

{title}

\n

{subtitle}

\n
\n
\n
\n {[100, 92, 97, 64, 88, 40].map((w, i) => (\n \n ))}\n
\n
\n );\n\n return (\n
\n {/* Card: whole while idle, a stack of adjacent strips while shredding. */}\n
\n \n {phase === \"idle\" && (\n \n {body}\n \n \n \n \n )}\n \n\n {phase === \"shredding\" &&\n !reduce &&\n Array.from({ length: strips }, (_, i) => {\n const a = (i / strips) * 100;\n const b = 100 - ((i + 1) / strips) * 100;\n const drift = (rand(i, round) - 0.5) * 70;\n return (\n \n {body}\n \n );\n })}\n
\n\n {/* The machine sits in front of the strips so they vanish into its mouth. */}\n \n
\n
\n \n \n {phase === \"shredding\" ? \"Shredding\" : \"Ready\"}\n \n
\n \n\n
\n \n {phase === \"gone\" && (\n \n Document shredded\n \n \n Undo\n \n \n )}\n \n
\n \n {phase === \"gone\" ? `${title} shredded. Undo available.` : \"\"}\n \n
\n );\n}\n"}]}