"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn, useMounted } from "@kineticui/core"; export type CountdownProps = { /** Target date/time. */ to: Date | string | number; onComplete?: () => void; /** Hide the days unit when it's zero. */ compact?: boolean; labels?: { days?: string; hours?: string; minutes?: string; seconds?: string }; className?: string; }; function diff(target: number) { const ms = Math.max(0, target - Date.now()); return { done: ms === 0, days: Math.floor(ms / 86_400_000), hours: Math.floor(ms / 3_600_000) % 24, minutes: Math.floor(ms / 60_000) % 60, seconds: Math.floor(ms / 1000) % 60, }; } function Digit({ value }: { value: string }) { return ( {value} ); } /** Live countdown with flip-style digits for launches and sales. */ export function Countdown({ to, onComplete, compact, labels, className }: CountdownProps) { const target = React.useMemo(() => new Date(to).getTime(), [to]); const mounted = useMounted(); const [t, setT] = React.useState(() => diff(target)); const fired = React.useRef(false); React.useEffect(() => { const tick = () => { const d = diff(target); setT(d); if (d.done && !fired.current) { fired.current = true; onComplete?.(); } }; tick(); const id = window.setInterval(tick, 1000); return () => window.clearInterval(id); }, [target, onComplete]); const units = [ { key: "days", v: t.days, label: labels?.days ?? "days" }, { key: "hours", v: t.hours, label: labels?.hours ?? "hours" }, { key: "minutes", v: t.minutes, label: labels?.minutes ?? "min" }, { key: "seconds", v: t.seconds, label: labels?.seconds ?? "sec" }, ].filter((u) => !(compact && u.key === "days" && u.v === 0)); return (

{units.map((u, i) => { const text = mounted ? String(u.v).padStart(2, "0") : "--"; return ( {i > 0 ? : : null}

{text.split("").map((c, j) => ( ))} {u.label}

); })}

); }

Countdown

Installation

Exports