{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "SwipeToast-TS-TW", "title": "SwipeToast", "description": "Toast that swipes down to dismiss and burns a thin fuse for its remaining time.", "type": "registry:component", "files": [ { "type": "registry:component", "path": "SwipeToast/SwipeToast.tsx", "content": "'use client';\n\nimport React, { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';\nimport { animate, motion, useMotionValue, useReducedMotion, useTransform } from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { Cancel01Icon } from '@hugeicons/core-free-icons';\n\nexport type SwipeToastCloseReason = 'timeout' | 'swipe' | 'action' | 'close' | 'escape' | 'programmatic';\nexport type SwipeToastFuse = 'bottom' | 'top' | 'none';\nexport type SwipeToastPhase = 'open' | 'closing' | 'gone';\n\nexport interface SwipeToastProps {\n title?: ReactNode;\n description?: ReactNode;\n icon?: ReactNode;\n actionLabel?: ReactNode;\n onAction?: () => void;\n open?: boolean;\n onClose?: (reason: SwipeToastCloseReason) => void;\n background?: string;\n color?: string;\n fuseColor?: string;\n width?: number;\n radius?: number;\n slideMs?: number;\n settleBounce?: number;\n swipeDistance?: number;\n duration?: number;\n fuse?: SwipeToastFuse;\n pauseOnHover?: boolean;\n closeButton?: boolean;\n inline?: boolean;\n dismissible?: boolean;\n className?: string;\n}\n\ntype Sample = [number, number];\n\ninterface Drag {\n id: number;\n startY: number;\n grab: number | null;\n moved: boolean;\n hist: Sample[];\n}\n\ninterface Latest {\n onClose?: (reason: SwipeToastCloseReason) => void;\n onAction?: () => void;\n slideMs: number;\n inline: boolean;\n}\n\nconst EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];\nconst FLICK = 0.11;\nconst DEAD_ZONE = 3;\nconst RESIST_PX = 24;\nconst COLLAPSE_MS = 200;\nconst EXIT = 0.7;\nconst BURN = [{ transform: 'scaleX(1)' }, { transform: 'scaleX(0)' }];\nconst HAS_STARTING_STYLE = typeof window !== 'undefined' && 'CSSStartingStyleRule' in window;\n\nconst rubberband = (over: number, dim: number, c = 0.55) => (over * dim * c) / (dim + c * Math.abs(over));\nconst velocityOf = (hist: Sample[]) => {\n if (hist.length < 2) return 0;\n const [t0, y0] = hist[0];\n const [t1, y1] = hist[hist.length - 1];\n return performance.now() - t1 > 100 ? 0 : (y1 - y0) / Math.max(1, t1 - t0);\n};\n\nconst SwipeToast: React.FC = ({\n title = 'File archived',\n description = '',\n icon,\n actionLabel = '',\n onAction,\n open = true,\n onClose,\n background = '#27272a',\n color = '#f5f5f5',\n fuseColor = '#f5a524',\n width = 356,\n radius = 12,\n slideMs = 400,\n settleBounce = 0.2,\n swipeDistance = 40,\n duration = 4000,\n fuse = 'bottom',\n pauseOnHover = true,\n closeButton = false,\n inline = false,\n dismissible = true,\n className = ''\n}) => {\n const reduce = useReducedMotion();\n const [phase, setPhase] = useState('open');\n const [instant, setInstant] = useState(false);\n const [mounted, setMounted] = useState(HAS_STARTING_STYLE);\n const cardRef = useRef(null);\n const fuseRef = useRef(null);\n const anim = useRef(null);\n const drag = useRef(null);\n const flags = useRef({ hover: false, interacting: false, focus: false, hidden: false });\n const lastInput = useRef<'pointer' | 'keyboard'>('pointer');\n const pendingClose = useRef(null);\n const closeTimer = useRef | undefined>(undefined);\n const reason = useRef('timeout');\n const leaving = useRef(false);\n const phaseRef = useRef(phase);\n phaseRef.current = phase;\n const latest = useRef({} as Latest);\n latest.current = { onClose, onAction, slideMs, inline };\n\n const y = useMotionValue(0);\n const fade = useMotionValue(1);\n const transform = useTransform(y, v => `translateY(${v}px)`);\n\n const syncFuse = () => {\n const a = anim.current;\n if (!a) return;\n const f = flags.current;\n if (f.hover || f.interacting || f.focus || f.hidden) a.pause();\n else if (a.playState === 'paused') a.play();\n };\n const finish = (why: SwipeToastCloseReason) => {\n setPhase('gone');\n leaving.current = false;\n if (latest.current.inline) closeTimer.current = setTimeout(() => latest.current.onClose?.(why), COLLAPSE_MS);\n else latest.current.onClose?.(why);\n };\n const close = (why: SwipeToastCloseReason) => {\n if (phaseRef.current !== 'open' || leaving.current) return;\n if (drag.current) {\n pendingClose.current = why;\n return;\n }\n anim.current?.pause();\n reason.current = why;\n const now = why === 'escape' || ((why === 'action' || why === 'close') && lastInput.current === 'keyboard');\n setInstant(now);\n setPhase('closing');\n clearTimeout(closeTimer.current);\n closeTimer.current = setTimeout(() => finish(why), now ? 0 : latest.current.slideMs * EXIT + 60);\n };\n const rescue = () => {\n clearTimeout(closeTimer.current);\n setInstant(false);\n y.set(0);\n fade.set(1);\n setPhase('open');\n };\n\n useEffect(() => {\n if (!open) close('programmatic');\n else if (phaseRef.current !== 'open') rescue();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n useEffect(() => {\n if (!HAS_STARTING_STYLE) requestAnimationFrame(() => setMounted(true));\n }, []);\n useEffect(() => {\n if (phase !== 'open' || duration <= 0 || !fuseRef.current) return undefined;\n anim.current?.cancel();\n const a = fuseRef.current.animate(BURN, { duration, easing: 'linear', fill: 'forwards' });\n a.onfinish = () => close('timeout');\n anim.current = a;\n syncFuse();\n return () => {\n a.onfinish = null;\n a.pause();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [phase, duration]);\n useEffect(() => {\n if (!pauseOnHover) {\n flags.current.hover = false;\n syncFuse();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [pauseOnHover]);\n useEffect(() => {\n const onVisibility = () => {\n flags.current.hidden = document.hidden;\n syncFuse();\n };\n document.addEventListener('visibilitychange', onVisibility);\n return () => {\n document.removeEventListener('visibilitychange', onVisibility);\n clearTimeout(closeTimer.current);\n anim.current?.cancel();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const swipeOut = (dy: number, v: number) => {\n anim.current?.pause();\n leaving.current = true;\n pendingClose.current = null;\n if (!reduce && cardRef.current) {\n animate(y, dy + cardRef.current.offsetHeight, { type: 'spring', duration: 0.3, bounce: 0, velocity: v * 1000 });\n }\n animate(fade, 0, { duration: 0.2, ease: EASE_OUT }).then(() => finish('swipe'));\n };\n const onPointerDown = (e: React.PointerEvent) => {\n lastInput.current = 'pointer';\n if (\n e.button !== 0 ||\n !dismissible ||\n drag.current ||\n leaving.current ||\n (e.target as HTMLElement).closest('button')\n )\n return;\n if (phaseRef.current === 'closing') rescue();\n try {\n cardRef.current?.setPointerCapture(e.pointerId);\n } catch {}\n y.stop();\n drag.current = {\n id: e.pointerId,\n startY: e.clientY,\n grab: null,\n moved: false,\n hist: [[performance.now(), y.get()]]\n };\n flags.current.interacting = true;\n syncFuse();\n };\n const onPointerMove = (e: React.PointerEvent) => {\n const d = drag.current;\n if (!d || d.id !== e.pointerId) return;\n if (d.grab === null) {\n if (Math.abs(e.clientY - d.startY) < DEAD_ZONE) return;\n d.grab = e.clientY - y.get();\n if (cardRef.current) cardRef.current.dataset.swiping = '';\n }\n const raw = e.clientY - d.grab;\n const next = raw >= 0 ? raw : rubberband(raw, RESIST_PX);\n y.set(next);\n d.moved = true;\n d.hist.push([performance.now(), next]);\n if (d.hist.length > 4) d.hist.shift();\n };\n const onPointerUp = (e: React.PointerEvent) => {\n const d = drag.current;\n if (!d || d.id !== e.pointerId) return;\n drag.current = null;\n if (cardRef.current) delete cardRef.current.dataset.swiping;\n try {\n cardRef.current?.releasePointerCapture(e.pointerId);\n } catch {}\n flags.current.interacting = false;\n const dy = y.get();\n const v = velocityOf(d.hist);\n if (dy > 0 && (v > FLICK || (dy >= swipeDistance && v >= 0))) {\n swipeOut(dy, v);\n return;\n }\n if (d.moved) {\n animate(\n y,\n 0,\n reduce\n ? { duration: 0.2, ease: EASE_OUT }\n : { type: 'spring', duration: 0.5, bounce: settleBounce, velocity: v * 1000 }\n );\n }\n const queued = pendingClose.current;\n pendingClose.current = null;\n if (queued) close(queued);\n else syncFuse();\n };\n\n return (\n 0 ? fuse : 'none'}\n data-dismissible={dismissible ? 'true' : 'false'}\n data-instant={instant ? '' : undefined}\n data-mounted={mounted ? 'true' : 'false'}\n style={\n {\n '--st-bg': background,\n '--st-ink': color,\n '--st-fuse': fuseColor,\n '--st-w': `${width}px`,\n '--st-radius': `${radius}px`,\n '--st-slide': `${slideMs}ms`,\n '--st-gap': '10px'\n } as CSSProperties\n }\n >\n
\n
\n {\n if (pauseOnHover && e.pointerType === 'mouse') {\n flags.current.hover = true;\n syncFuse();\n }\n }}\n onPointerLeave={e => {\n if (e.pointerType === 'mouse') {\n flags.current.hover = false;\n syncFuse();\n }\n }}\n onFocus={() => {\n flags.current.focus = true;\n syncFuse();\n }}\n onBlur={e => {\n if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n flags.current.focus = false;\n syncFuse();\n }\n }}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') lastInput.current = 'keyboard';\n if (e.key === 'Escape' && dismissible) {\n e.stopPropagation();\n close('escape');\n }\n }}\n >\n {icon ? (\n \n {icon}\n \n ) : null}\n \n {title}\n {description ? (\n \n {description}\n \n ) : null}\n \n {actionLabel ? (\n {\n latest.current.onAction?.();\n close('action');\n }}\n >\n {actionLabel}\n \n ) : null}\n {closeButton ? (\n close('close')}\n >\n \n \n ) : null}\n \n \n
\n
\n \n );\n};\n\nexport default SwipeToast;\n" } ], "registryDependencies": [], "dependencies": [ "motion@^12.23.12", "@hugeicons/react@^1.1.10", "@hugeicons/core-free-icons@^4.3.3" ] }