"use client"; import { useEffect, useId, useMemo, useRef, useState, type Dispatch, type SetStateAction, } from "react"; import { addMonths, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, isSameMonth, isToday, setMonth as setJalaliMonth, setYear as setJalaliYear, startOfMonth, startOfWeek, subMonths, } from "date-fns-jalali"; import { faIR } from "date-fns-jalali/locale/fa-IR"; import { AnimatePresence, motion, MotionConfig } from "motion/react"; import { HugeiconsIcon } from "@hugeicons/react"; import { ArrowDown01Icon, ArrowLeft01Icon, ArrowRight01Icon, Calendar03Icon, Tick02Icon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; const WEEKDAYS = ["ش", "ی", "د", "س", "چ", "پ", "ج"] as const; const ROW_EASE: [number, number, number, number] = [0.215, 0.61, 0.355, 1]; const YEAR_WINDOW_PAST = 80; const YEAR_WINDOW_FUTURE = 20; /** Fixed body height so day / month / year views never resize the shell. */ const PANEL_BODY_CLASS = "relative h-[20.5rem] w-full shrink-0"; const VIEW_SHELL_CLASS = "absolute inset-0"; type PanelView = "days" | "months" | "years"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d); } function formatSelected(date: Date) { return toFaDigits(format(date, "d MMMM yyyy", { locale: faIR })); } function monthLabel(monthIndex: number, year: number) { return format(setJalaliMonth(setJalaliYear(new Date(), year), monthIndex), "MMMM", { locale: faIR, }); } function DayCell(props: { date: Date; index: number; month: Date; selected: Date | null; dayPillId: string; onSelect: (date: Date) => void; }) { const { date, index, month, selected, dayPillId, onSelect } = props; const inMonth = isSameMonth(date, month); const selectedDay = selected ? isSameDay(date, selected) : false; const today = isToday(date); const delay = (index % 7) * 0.016 + Math.floor(index / 7) * 0.028; return ( onSelect(date)} aria-label={toFaDigits(format(date, "EEEE d MMMM yyyy", { locale: faIR }))} aria-pressed={selectedDay} className={clsx( "relative flex h-full min-h-0 w-full items-center justify-center rounded-2xl text-[15px] tabular-nums transition-colors", inMonth ? "text-foreground hover:bg-accent" : "text-muted-foreground/35 hover:bg-accent/40", selectedDay && "text-primary-foreground hover:bg-primary", !selectedDay && today && "font-semibold" )} > {selectedDay ? ( ) : null} {!selectedDay && today ? ( ) : null} {toFaDigits(format(date, "d"))} ); } function EmptyDayCell() { return

; } function MonthGrid(props: { month: Date; onPick: (monthIndex: number) => void; }) { const year = getYear(props.month); const active = getMonth(props.month); return (

{Array.from({ length: 12 }, (_, index) => { const activeMonth = index === active; return ( props.onPick(index)} className={clsx( "relative flex h-full min-h-0 items-center justify-center rounded-2xl px-2 text-base transition-colors", activeMonth ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-accent" )} > {monthLabel(index, year)} ); })}

); } function YearGrid(props: { month: Date; onPick: (year: number) => void; }) { const active = getYear(props.month); const years = useMemo(() => { const start = active - YEAR_WINDOW_PAST; const end = active + YEAR_WINDOW_FUTURE; return Array.from({ length: end - start + 1 }, (_, i) => start + i).reverse(); }, [active]); const listRef = useRef(null); useEffect(() => { const root = listRef.current; if (!root) return; const el = root.querySelector(`[data-year="${active}"]`); el?.scrollIntoView({ block: "center" }); }, [active]); return (

{years.map((year, index) => { const activeYear = year === active; return ( props.onPick(year)} className={clsx( "relative flex h-11 shrink-0 items-center justify-center gap-1.5 rounded-2xl text-base tabular-nums transition-colors", activeYear ? "bg-primary text-primary-foreground" : "text-foreground hover:bg-accent" )} > {toFaDigits(year)} {activeYear ? ( ) : null} ); })}

); } function CaptionChip(props: { label: string; active: boolean; onClick: () => void; ariaLabel: string; }) { return ( ); } function CalendarPanel(props: { month: Date; setMonth: Dispatch>; selected: Date | null; dayPillId: string; onSelect: (date: Date) => void; onClose: () => void; }) { const { month, setMonth, selected, dayPillId, onSelect, onClose } = props; const [view, setView] = useState("days"); const days = useMemo(() => { const start = startOfWeek(startOfMonth(month), { weekStartsOn: 6 }); const end = endOfWeek(endOfMonth(month), { weekStartsOn: 6 }); const interval = eachDayOfInterval({ start, end }); // Always fill 6 weeks so 5-week months do not shrink the panel. while (interval.length < 42) { interval.push(new Date(NaN)); } return interval.slice(0, 42); }, [month]); const year = getYear(month); const monthName = format(month, "MMMM", { locale: faIR }); const goPrev = () => setMonth((m) => subMonths(m, 1)); const goNext = () => setMonth((m) => addMonths(m, 1)); const viewTransition = { type: "tween" as const, duration: 0.18, ease: ROW_EASE, }; return (

{/* In RTL flex: first item sits on the start (right). Previous = right + → */}

setView((v) => (v === "months" ? "days" : "months"))} /> setView((v) => (v === "years" ? "days" : "years"))} />

{/* Last item in RTL = end (left). Next = left + ← */}

{view === "days" ? (

{WEEKDAYS.map((day) => (

{day}

))} {days.map((date, index) => { if (Number.isNaN(date.getTime())) { return ; } return ( ); })}

) : null} {view === "months" ? ( { setMonth((m) => startOfMonth(setJalaliMonth(m, monthIndex))); setView("days"); }} /> ) : null} {view === "years" ? ( { setMonth((m) => startOfMonth(setJalaliYear(m, nextYear))); setView("months"); }} /> ) : null}

); } export type DateFieldProps = { /** Controlled selected date. */ value?: Date | null; /** Uncontrolled initial date. */ defaultValue?: Date | null; onChange?: (date: Date | null) => void; placeholder?: string; className?: string; }; export default function DateField({ value, defaultValue = null, onChange, placeholder = "تاریخ را انتخاب کنید", className, }: DateFieldProps) { const shellId = useId(); const dayPillId = useId(); const rootRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const [uncontrolled, setUncontrolled] = useState(defaultValue); const controlled = value !== undefined; const selected = controlled ? value : uncontrolled; const [month, setMonth] = useState(() => startOfMonth(selected ?? new Date()), ); const open = () => { if (selected) setMonth(startOfMonth(selected)); setIsOpen(true); }; useEffect(() => { if (!isOpen) return; const onPointerDown = (event: PointerEvent) => { if (!rootRef.current?.contains(event.target as Node)) { setIsOpen(false); } }; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") setIsOpen(false); }; document.addEventListener("pointerdown", onPointerDown); document.addEventListener("keydown", onKeyDown); return () => { document.removeEventListener("pointerdown", onPointerDown); document.removeEventListener("keydown", onKeyDown); }; }, [isOpen]); const pick = (date: Date) => { if (!controlled) setUncontrolled(date); onChange?.(date); setMonth(startOfMonth(date)); window.setTimeout(() => setIsOpen(false), 160); }; return (

{!isOpen ? (

{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(); } }} className="relative flex h-16 w-full cursor-pointer items-center gap-3 px-4" > {selected ? formatSelected(selected) : placeholder}

) : ( )}

); }