"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { ChevronLeft, ChevronRight } from "lucide-react" const dayVariants = cva( "flex size-9 items-center justify-center rounded-xl text-sm transition-colors", { variants: { variant: { default: "text-foreground hover:bg-white/20", selected: "bg-white/20 text-foreground font-semibold ring-1 ring-white/30", range: "bg-white/10 text-foreground rounded-none", rangeStart: "bg-white/20 text-foreground font-semibold ring-1 ring-white/30 rounded-l-xl", rangeEnd: "bg-white/20 text-foreground font-semibold ring-1 ring-white/30 rounded-r-xl", muted: "text-foreground/40 hover:bg-white/10", today: "border-1 border-white/30", }, }, defaultVariants: { variant: "default", }, } ) type CalendarMode = "single" | "range" export interface CalendarProps { mode?: CalendarMode selected?: Date | [Date, Date] onSelect?: (date: Date | [Date, Date]) => void month?: Date onMonthChange?: (date: Date) => void className?: string } function Calendar({ mode = "single", selected, onSelect, month, onMonthChange, className, }: CalendarProps) { const [internalMonth, setInternalMonth] = React.useState(() => month ?? new Date()) const currentMonth = month ?? internalMonth const setMonth = (date: Date) => { if (onMonthChange) { onMonthChange(date) } if (!month) { setInternalMonth(date) } } const year = currentMonth.getFullYear() const monthIndex = currentMonth.getMonth() const firstDay = new Date(year, monthIndex, 1) const startDayOfWeek = firstDay.getDay() const daysInMonth = new Date(year, monthIndex + 1, 0).getDate() const daysInPrevMonth = new Date(year, monthIndex, 0).getDate() const prevMonth = () => setMonth(new Date(year, monthIndex - 1, 1)) const nextMonth = () => setMonth(new Date(year, monthIndex + 1, 1)) const today = new Date() const isToday = (day: number) => today.getFullYear() === year && today.getMonth() === monthIndex && today.getDate() === day const isSelected = (day: number) => { const date = new Date(year, monthIndex, day) if (mode === "single" && selected instanceof Date) { return ( selected.getFullYear() === date.getFullYear() && selected.getMonth() === date.getMonth() && selected.getDate() === date.getDate() ) } if (mode === "range" && Array.isArray(selected)) { const [start, end] = selected if (start && !end) { return ( start.getFullYear() === date.getFullYear() && start.getMonth() === date.getMonth() && start.getDate() === date.getDate() ) } } return false } const isInRange = (day: number) => { if (mode !== "range" || !Array.isArray(selected)) return false const [start, end] = selected if (!start || !end) return false const date = new Date(year, monthIndex, day) const s = start.getTime() const e = end.getTime() const d = date.getTime() return d > Math.min(s, e) && d < Math.max(s, e) } const isRangeStart = (day: number) => { if (mode !== "range" || !Array.isArray(selected)) return false const [start] = selected if (!start) return false const date = new Date(year, monthIndex, day) return ( start.getFullYear() === date.getFullYear() && start.getMonth() === date.getMonth() && start.getDate() === date.getDate() ) } const isRangeEnd = (day: number) => { if (mode !== "range" || !Array.isArray(selected)) return false const [, end] = selected if (!end) return false const date = new Date(year, monthIndex, day) return ( end.getFullYear() === date.getFullYear() && end.getMonth() === date.getMonth() && end.getDate() === date.getDate() ) } const handleDayClick = (day: number) => { const date = new Date(year, monthIndex, day) if (mode === "single") { onSelect?.(date) } else if (mode === "range") { if (!Array.isArray(selected) || !selected[0] || selected[1]) { onSelect?.([date, undefined as unknown as Date]) } else { onSelect?.([selected[0], date]) } } } const getDayVariant = (day: number) => { const dayDate = new Date(year, monthIndex, day) if (mode === "range") { if (isRangeStart(day)) return "rangeStart" as const if (isRangeEnd(day)) return "rangeEnd" as const if (isInRange(day)) return "range" as const } if (isSelected(day)) return "selected" as const if (isToday(day)) return "today" as const return "default" as const } const days: React.ReactNode[] = [] const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] for (let i = 0; i < startDayOfWeek; i++) { const prevDay = daysInPrevMonth - startDayOfWeek + i + 1 days.push( ) } for (let day = 1; day <= daysInMonth; day++) { days.push( ) } const totalCells = days.length const remaining = totalCells % 7 === 0 ? 0 : 7 - (totalCells % 7) for (let i = 1; i <= remaining; i++) { days.push( ) } return (

{currentMonth.toLocaleDateString("en-US", { month: "long", year: "numeric", })}

{dayNames.map((name) => (

{name}

))}

{days}

) } Calendar.displayName = "Calendar" export { Calendar, dayVariants }