"use client"; import "@ncdai/react-wheel-picker/style.css"; import { useEffect, useRef, useState, type ComponentProps, type MouseEvent, type ReactNode, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import * as WheelPickerPrimitive from "@ncdai/react-wheel-picker"; import { cn } from "@/lib/utils"; type WheelPickerValue = WheelPickerPrimitive.WheelPickerValue; type WheelPickerOption = WheelPickerPrimitive.WheelPickerOption; type TimerMode = "compact" | "picker" | "running" | "paused"; const SURFACE_DIMENSIONS: Record< TimerMode, { width: number; height: number; borderRadius: number } > = { compact: { width: 300, height: 84, borderRadius: 42 }, picker: { width: 342, height: 286, borderRadius: 48 }, running: { width: 390, height: 180, borderRadius: 48 }, paused: { width: 390, height: 180, borderRadius: 48 }, }; const SURFACE_SPRING = { type: "spring", stiffness: 400, damping: 30, mass: 1.5, } as const; const MIN_MINUTES = 1; const MAX_MINUTES = 60; const DEFAULT_MINUTES = 5; const OPTION_ITEM_HEIGHT = 44; const PROGRESS_COLOR = "#ff9f0a"; /** Estedad digit sidebearings — Chromium ignores letter-spacing on Arabic-script digits. */ const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (digit) => FA_DIGITS[Number(digit)] ?? digit); } function isFaDigitChar(ch: string) { return FA_DIGITS.includes(ch) || (ch >= "0" && ch <= "9"); } function FaDigits({ value, className, ...props }: { value: string | number } & ComponentProps<"span">) { const text = toFaDigits(value); const ariaLabel = typeof props["aria-label"] === "string" ? props["aria-label"] : text; return ( {[...text].map((ch, i) => { const sep = !isFaDigitChar(ch); const isLast = i === text.length - 1; return ( ); })} ); } const MINUTE_OPTIONS: WheelPickerOption[] = Array.from( { length: MAX_MINUTES - MIN_MINUTES + 1 }, (_, index) => { const value = MIN_MINUTES + index; return { label: , value, textValue: `${toFaDigits(value)} دقیقه`, }; }, ); const formatTime = (seconds: number) => { const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; }; const formatTimeFa = (seconds: number) => toFaDigits(formatTime(seconds)); function WheelPickerWrapper({ className, ...props }: ComponentProps) { return ( ); } function WheelPicker({ classNames, ...props }: WheelPickerPrimitive.WheelPickerProps) { return ( ); } function TimerIcon() { return ( ); } type ContentLayerProps = { children: ReactNode; isVisible: boolean; className?: string; }; function ContentLayer({ children, isVisible, className }: ContentLayerProps) { const reduceMotion = useReducedMotion(); return ( {children} ); } type BlurLayerProps = { blur: number; maskFrom: number; maskTo: number; side: "top" | "bottom"; }; // Mask runs from the center row outward, so the heaviest band sits at the wheel's edge. function BlurLayer({ blur, maskFrom, maskTo, side }: BlurLayerProps) { const ramp = (maskTo - maskFrom) / 3; const mask = `linear-gradient(to ${side}, transparent ${maskFrom}%, black ${maskFrom + ramp}%, black ${maskTo - ramp}%, transparent ${maskTo}%)`; return (

); } const BLUR_BANDS = [ { blur: 2, maskFrom: 0, maskTo: 35 }, { blur: 4, maskFrom: 30, maskTo: 65 }, { blur: 7, maskFrom: 60, maskTo: 95 }, ]; type MinutePickerProps = { selectedMinutes: number; onChange: (minutes: number) => void; }; function MinutePicker({ selectedMinutes, onChange }: MinutePickerProps) { const bandHeight = `calc(50% - ${OPTION_ITEM_HEIGHT / 2}px)`; return (

options={MINUTE_OPTIONS} value={selectedMinutes} onValueChange={onChange} infinite visibleCount={20} optionItemHeight={OPTION_ITEM_HEIGHT} dragSensitivity={4} scrollSensitivity={10} classNames={{ optionItem: "pe-16! font-[family-name:var(--font-estedad),Tahoma,Arial,sans-serif]! text-[40px]! font-normal leading-none text-white/30 dark:text-white/30", highlightWrapper: "bg-white/[0.08] font-[family-name:var(--font-estedad),Tahoma,Arial,sans-serif] text-white dark:bg-white/[0.08] dark:text-white data-rwp-focused:inset-ring-white/30 dark:data-rwp-focused:inset-ring-white/30", highlightItem: "pe-16! font-[family-name:var(--font-estedad),Tahoma,Arial,sans-serif]! text-[40px] font-normal leading-none text-white", }} />

{BLUR_BANDS.map((band) => ( ))}

); } type TimerBorderProps = { remainingSeconds: number; totalSeconds: number; width: number; height: number; borderRadius: number; }; const BORDER_STROKE = 6; function TimerBorder({ remainingSeconds, totalSeconds, width, height, borderRadius, }: TimerBorderProps) { const reduceMotion = useReducedMotion(); const progress = totalSeconds === 0 ? 0 : remainingSeconds / totalSeconds; const clamped = Math.min(1, Math.max(0, progress)); // Inset by half the stroke so it isn't clipped; starts at top center, clockwise. const s = BORDER_STROKE / 2; const r = Math.max(0, Math.min(borderRadius - s, height / 2 - s, width / 2 - s)); const path = [ `M ${width / 2} ${s}`, `H ${width - s - r}`, `A ${r} ${r} 0 0 1 ${width - s} ${s + r}`, `V ${height - s - r}`, `A ${r} ${r} 0 0 1 ${width - s - r} ${height - s}`, `H ${s + r}`, `A ${r} ${r} 0 0 1 ${s} ${height - s - r}`, `V ${s + r}`, `A ${r} ${r} 0 0 1 ${s + r} ${s}`, "Z", ].join(" "); return ( ); } const buttonBase = "flex cursor-pointer items-center justify-center rounded-full text-[18px] font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-[#2c2c2c]"; export const SetTimer = () => { const reduceMotion = useReducedMotion(); const [mode, setMode] = useState("compact"); const [selectedMinutes, setSelectedMinutes] = useState(DEFAULT_MINUTES); const [remainingSeconds, setRemainingSeconds] = useState(DEFAULT_MINUTES * 60); const deadlineRef = useRef(null); const [totalSeconds, setTotalSeconds] = useState(DEFAULT_MINUTES * 60); const surfaceRef = useRef(null); const restoreFocusRef = useRef(false); const isTimerActive = mode === "running" || mode === "paused"; const dimensions = SURFACE_DIMENSIONS[mode]; useEffect(() => { if (mode !== "running") return; const tick = () => { if (deadlineRef.current === null) return; const next = Math.max( 0, Math.ceil((deadlineRef.current - Date.now()) / 1000), ); setRemainingSeconds(next); if (next === 0) { deadlineRef.current = null; restoreFocusRef.current = surfaceRef.current?.contains(document.activeElement) ?? false; setMode("picker"); } }; tick(); const interval = window.setInterval(tick, 250); return () => window.clearInterval(interval); }, [mode]); // The layer that held focus just went inert, so hand keyboard focus to the new one. useEffect(() => { if (!restoreFocusRef.current) return; restoreFocusRef.current = false; const layer = isTimerActive ? "running" : mode; surfaceRef.current ?.querySelector( `[data-timer-layer="${layer}"] :is(button, [tabindex="0"])`, ) ?.focus({ preventScroll: true }); }, [mode, isTimerActive]); // detail === 0 means the click came from the keyboard. const trackFocus = (event: MouseEvent) => { restoreFocusRef.current = event.detail === 0; }; const handleOpenPicker = (event: MouseEvent) => { trackFocus(event); setTotalSeconds(selectedMinutes * 60); setRemainingSeconds(selectedMinutes * 60); setMode("picker"); }; const handleStart = (event: MouseEvent) => { trackFocus(event); const seconds = selectedMinutes * 60; setTotalSeconds(seconds); setRemainingSeconds(seconds); deadlineRef.current = Date.now() + seconds * 1000; setMode("running"); }; const handlePauseResume = () => { if (mode === "running") { deadlineRef.current = null; setMode("paused"); return; } if (mode === "paused") { deadlineRef.current = Date.now() + remainingSeconds * 1000; setMode("running"); } }; const handleCancel = (event: MouseEvent) => { trackFocus(event); deadlineRef.current = null; // remainingSeconds stays put so the border doesn't flash full while the layer fades out. setMode("compact"); }; const handleMinutesChange = (minutes: number) => { setTotalSeconds(minutes * 60); setSelectedMinutes(minutes); setRemainingSeconds(minutes * 60); }; return (

شروع

{mode === "paused" ? "ادامه" : "مکث"} لغو

); }; export default SetTimer;