"use client"; import { Undo03Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { useDialKit } from "dialkit"; import { AnimatePresence, motion } from "motion/react"; import React, { useEffect, useLayoutEffect, useRef, useState } from "react"; const SOFT_LIGHT = "#FFEDF1"; const SOFT_DARK = "#3a1822"; function useClosestDark() { const ref = useRef(null); const [isDark, setIsDark] = useState(false); useLayoutEffect(() => { const el = ref.current; if (!el) return; const sync = () => setIsDark(Boolean(el.closest(".dark"))); sync(); const obs = new MutationObserver(sync); let node: HTMLElement | null = el; while (node) { obs.observe(node, { attributes: true, attributeFilter: ["class"] }); node = node.parentElement; } return () => obs.disconnect(); }, []); return [ref, isDark] as const; } const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (digit) => FA_DIGITS[Number(digit)] ?? digit); } /** Word tokens — never split Persian letters (breaks joining). */ function splitLabel(text: string) { return text.split(/(\s+)/).filter((part) => part.length > 0); } export const dialConfig = { deleteText: "حذف حساب", cancelText: "لغو حذف", countdown: [10, 3, 20, 1], deleteColor: "#FE322A", softColor: SOFT_LIGHT, layout: { type: "easing", duration: 0.4, ease: [0.77, 0, 0.175, 1], }, char: { type: "easing", duration: 0.3, ease: [0.785, 0.135, 0.15, 0.86], }, } as const; type DeleteParams = { deleteText: string; cancelText: string; countdown: number; deleteColor: string; softColor: string; layout: typeof dialConfig.layout; char: typeof dialConfig.char; }; const DeleteButton = () => { const params = useDialKit("Delete Button", dialConfig as never) as DeleteParams; const [rootRef, isDark] = useClosestDark(); const softColor = isDark ? SOFT_DARK : params.softColor || SOFT_LIGHT; const [isDeleting, setIsDeleting] = useState(false); const [count, setCount] = useState(params.countdown); const [isAnimating, setIsAnimating] = useState(false); useEffect(() => { if (!isDeleting) return; if (count === 0) return; const timer = setTimeout(() => setCount((c) => c - 1), 1000); return () => clearTimeout(timer); }, [isDeleting, count]); const handleClick = (newState: boolean) => { if (isAnimating) return; setIsAnimating(true); setIsDeleting(newState); if (newState) setCount(params.countdown); setTimeout(() => setIsAnimating(false), params.layout.duration * 1000); }; const deleteText = params.deleteText; const cancelText = params.cancelText; return (

{!isDeleting ? ( handleClick(true)} whileTap={{ scale: 0.95 }} style={{ pointerEvents: isAnimating ? "none" : "auto" }} initial={{ backgroundColor: softColor, filter: "blur(1px)", opacity: 1, }} animate={{ backgroundColor: params.deleteColor, filter: "blur(0px)", opacity: 1, }} exit={{ backgroundColor: softColor, filter: "blur(1px)", opacity: 0, }} className="flex items-center justify-center overflow-hidden rounded-full px-5 py-3 text-white shadow-[0_10px_24px_-12px_rgba(254,50,42,0.55)]" transition={{ layout: { duration: params.layout.duration, ease: [...params.layout.ease] }, backgroundColor: { duration: 0.4, ease: "easeInOut" }, filter: { duration: 0.1, ease: "easeInOut" }, opacity: { duration: 0.2, ease: "easeOut" }, }} > {splitLabel(deleteText).map((part, i) => ( {part} ))} ) : ( handleClick(false)} whileTap={{ scale: 0.95 }} style={{ pointerEvents: isAnimating ? "none" : "auto" }} initial={{ backgroundColor: params.deleteColor, filter: "blur(1px)", opacity: 0, }} animate={{ backgroundColor: softColor, filter: "blur(0px)", opacity: 1, }} exit={{ backgroundColor: params.deleteColor, filter: "blur(1px)", opacity: 0, }} className="flex items-center gap-2 overflow-hidden rounded-full px-3 py-3 ring-1 ring-black/5 dark:ring-white/10" transition={{ layout: { duration: params.layout.duration, ease: [...params.layout.ease] }, backgroundColor: { duration: 0.4, ease: "easeInOut" }, filter: { duration: 0.2, ease: "easeInOut" }, opacity: { duration: 0.2, ease: "easeIn" }, }} > {splitLabel(cancelText).map((part, i) => ( {part} ))} {toFaDigits(count)} )}

); }; export default DeleteButton;