4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:Te22b,import { addDays, addMonths, addYears, eachDayOfInterval, endOfMonth, endOfWeek, endOfYear, format, getDay, getHours, getMinutes, getMonth, getYear, isAfter, isBefore, isSameDay, isSameMonth, isToday, isWeekend, isWithinInterval, type Locale, setHours, setMinutes, setMonth, setYear, startOfDay, startOfMonth, startOfWeek, startOfYear, subDays, subMonths, subYears, } from "date-fns"; import { enUS } from "date-fns/locale"; import { AlertCircle, Calendar as CalendarIcon, Check, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Clock, X, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import * as React from "react"; import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react"; import { Button } from "@/components/ui/button"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; // ============================================================================ // TYPES // ============================================================================ export type CalendarMode = "single" | "range" | "multiple"; export type CalendarView = "days" | "months" | "years" | "time"; export type CalendarSize = "sm" | "md" | "lg"; export interface DateRange { from: Date | undefined; to: Date | undefined; } export interface PresetRange { label: string; getValue: () => DateRange; } export interface CalendarLocale { weekdays: string[]; weekdaysShort: string[]; months: string[]; monthsShort: string[]; today: string; clear: string; close: string; selectTime: string; backToCalendar: string; selected: string; weekNumber: string; } // Base props shared by all modes interface BaseCalendarProps { // Display placeholder?: string; disabled?: boolean; readOnly?: boolean; required?: boolean; className?: string; size?: CalendarSize; // Constraints minDate?: Date; maxDate?: Date; disabledDates?: Date[]; disabledDaysOfWeek?: number[]; disableWeekends?: boolean; disablePastDates?: boolean; disableFutureDates?: boolean; // Validation error?: boolean; errorMessage?: string; // Features showTime?: boolean; use24Hour?: boolean; minuteStep?: number; showWeekNumbers?: boolean; showTodayButton?: boolean; showClearButton?: boolean; weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6; monthsToShow?: 1 | 2 | 3; // Range presets showPresets?: boolean; presets?: PresetRange[]; // Events highlightedDates?: { date: Date; color?: string; label?: string }[]; // Customization formatStr?: string; closeOnSelect?: boolean; locale?: Locale; localeStrings?: Partial; // Callbacks onMonthChange?: (date: Date) => void; onYearChange?: (date: Date) => void; onViewChange?: (view: CalendarView) => void; onOpen?: () => void; onClose?: () => void; // Accessibility id?: string; name?: string; "aria-label"?: string; "aria-describedby"?: string; // Custom renderers renderDay?: (date: Date, defaultRender: React.ReactNode) => React.ReactNode; renderHeader?: ( date: Date, defaultRender: React.ReactNode, ) => React.ReactNode; // Form integration onBlur?: () => void; onFocus?: () => void; } // Single date selection mode interface SingleModeProps extends BaseCalendarProps { mode?: "single"; value?: Date; defaultValue?: Date; onChange?: (value: Date | undefined) => void; } // Range selection mode interface RangeModeProps extends BaseCalendarProps { mode: "range"; value?: DateRange; defaultValue?: DateRange; onChange?: (value: DateRange | undefined) => void; } // Multiple dates selection mode interface MultipleModeProps extends BaseCalendarProps { mode: "multiple"; value?: Date[]; defaultValue?: Date[]; onChange?: (value: Date[]) => void; } // Union type for all calendar props (external API) export type AnimatedCalendarProps = | SingleModeProps | RangeModeProps | MultipleModeProps; // Internal unified type for component implementation interface InternalCalendarProps extends BaseCalendarProps { mode?: CalendarMode; value?: Date | DateRange | Date[]; defaultValue?: Date | DateRange | Date[]; onChange?: (value: Date | DateRange | Date[] | undefined) => void; } // ============================================================================ // CONSTANTS & DEFAULTS // ============================================================================ const defaultLocaleStrings: CalendarLocale = { weekdays: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ], weekdaysShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], months: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ], monthsShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ], today: "Today", clear: "Clear", close: "Close", selectTime: "Select time", backToCalendar: "Back to calendar", selected: "selected", weekNumber: "Week", }; const defaultPresets: PresetRange[] = [ { label: "Today", getValue: () => ({ from: startOfDay(new Date()), to: startOfDay(new Date()), }), }, { label: "Yesterday", getValue: () => ({ from: startOfDay(subDays(new Date(), 1)), to: startOfDay(subDays(new Date(), 1)), }), }, { label: "Last 7 days", getValue: () => ({ from: startOfDay(subDays(new Date(), 6)), to: startOfDay(new Date()), }), }, { label: "Last 30 days", getValue: () => ({ from: startOfDay(subDays(new Date(), 29)), to: startOfDay(new Date()), }), }, { label: "This month", getValue: () => ({ from: startOfMonth(new Date()), to: endOfMonth(new Date()), }), }, { label: "Last month", getValue: () => ({ from: startOfMonth(subMonths(new Date(), 1)), to: endOfMonth(subMonths(new Date(), 1)), }), }, { label: "This year", getValue: () => ({ from: startOfYear(new Date()), to: endOfYear(new Date()), }), }, ]; const sizeClasses = { sm: { cell: "h-7 w-7 text-xs", header: "text-sm", container: "p-2" }, md: { cell: "h-9 w-9 text-sm", header: "text-base", container: "p-4" }, lg: { cell: "h-11 w-11 text-base", header: "text-lg", container: "p-5" }, }; // ============================================================================ // ANIMATION VARIANTS // ============================================================================ const slideVariants = { enter: (direction: number) => ({ x: direction > 0 ? 280 : -280, opacity: 0 }), center: { x: 0, opacity: 1 }, exit: (direction: number) => ({ x: direction < 0 ? 280 : -280, opacity: 0 }), }; const fadeScale = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, }; // ============================================================================ // UTILITY HOOKS // ============================================================================ function useControllableState( controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void, ): [T, (value: T) => void] { const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue); const isControlled = controlledValue !== undefined; const value = isControlled ? controlledValue : uncontrolledValue; const setValue = useCallback( (newValue: T) => { if (!isControlled) { setUncontrolledValue(newValue); } onChange?.(newValue); }, [isControlled, onChange], ); return [value, setValue]; } // ============================================================================ // SUB-COMPONENTS // ============================================================================ // Time Picker const TimePicker = React.memo( ({ value, onChange, use24Hour = true, minuteStep = 5, size = "md", localeStrings, disabled, }: { value: Date; onChange: (date: Date) => void; use24Hour?: boolean; minuteStep?: number; size?: CalendarSize; localeStrings: CalendarLocale; disabled?: boolean; }) => { const hours = getHours(value); const minutes = getMinutes(value); const isPM = hours >= 12; const displayHours = use24Hour ? hours : hours % 12 || 12; const sizes = sizeClasses[size]; const updateTime = useCallback( (newHours: number, newMinutes: number) => { let updated = setHours(value, Math.max(0, Math.min(23, newHours))); updated = setMinutes(updated, Math.max(0, Math.min(59, newMinutes))); onChange(updated); }, [value, onChange], ); const incrementHour = () => updateTime((hours + 1) % 24, minutes); const decrementHour = () => updateTime((hours - 1 + 24) % 24, minutes); const incrementMinute = () => updateTime(hours, (minutes + minuteStep) % 60); const decrementMinute = () => updateTime(hours, (minutes - minuteStep + 60) % 60); const toggleAMPM = () => updateTime(isPM ? hours - 12 : hours + 12, minutes); return (

e.stopPropagation()} > {/* Hours */}

e.stopPropagation()} onChange={(e) => { const val = parseInt(e.target.value, 10) || 0; if (use24Hour) { updateTime(Math.min(23, Math.max(0, val)), minutes); } else { const newHours = Math.min(12, Math.max(1, val)); updateTime( isPM ? newHours === 12 ? 12 : newHours + 12 : newHours === 12 ? 0 : newHours, minutes, ); } }} disabled={disabled} className={cn( "pointer-events-auto w-12 rounded border-none bg-transparent text-center font-bold font-mono focus:outline-none focus:ring-2 focus:ring-primary", sizes.header, )} aria-label="Hours" maxLength={2} />

: {/* Minutes */}

e.stopPropagation()} onChange={(e) => { const val = parseInt(e.target.value, 10) || 0; updateTime(hours, Math.min(59, Math.max(0, val))); }} disabled={disabled} className={cn( "pointer-events-auto w-12 rounded border-none bg-transparent text-center font-bold font-mono focus:outline-none focus:ring-2 focus:ring-primary", sizes.header, )} aria-label="Minutes" maxLength={2} />

{/* AM/PM */} {!use24Hour && ( )}

); }, ); TimePicker.displayName = "TimePicker"; // Month Picker const MonthPicker = React.memo( ({ currentMonth, onSelect, minDate, maxDate, size = "md", localeStrings, disabled, prefersReducedMotion, }: { currentMonth: Date; onSelect: (month: number) => void; minDate?: Date; maxDate?: Date; size?: CalendarSize; localeStrings: CalendarLocale; disabled?: boolean; prefersReducedMotion: boolean; }) => { const currentYear = getYear(currentMonth); const currentMonthIndex = getMonth(currentMonth); const _sizes = sizeClasses[size]; const isMonthDisabled = useCallback( (month: number) => { if (disabled) return true; const date = new Date(currentYear, month, 1); if (minDate && isBefore(endOfMonth(date), startOfDay(minDate))) return true; if (maxDate && isAfter(startOfMonth(date), startOfDay(maxDate))) return true; return false; }, [currentYear, minDate, maxDate, disabled], ); return ( ); }, ); MonthPicker.displayName = "MonthPicker"; // Year Picker const YearPicker = React.memo( ({ currentYear, onSelect, minDate, maxDate, size: _size = "md", disabled, prefersReducedMotion, }: { currentYear: number; onSelect: (year: number) => void; minDate?: Date; maxDate?: Date; size?: CalendarSize; disabled?: boolean; prefersReducedMotion: boolean; }) => { const [startYear, setStartYear] = useState(currentYear - 6); const years = useMemo( () => Array.from({ length: 12 }, (_, i) => startYear + i), [startYear], ); const isYearDisabled = useCallback( (year: number) => { if (disabled) return true; if (minDate && year < getYear(minDate)) return true; if (maxDate && year > getYear(maxDate)) return true; return false; }, [minDate, maxDate, disabled], ); return ( ); }, ); YearPicker.displayName = "YearPicker"; // Presets Panel const PresetsPanel = React.memo( ({ presets, onSelect, disabled, }: { presets: PresetRange[]; onSelect: (range: DateRange) => void; disabled?: boolean; }) => (

Quick Select {presets.map((preset, index) => ( !disabled && onSelect(preset.getValue())} disabled={disabled} className="w-full rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50" > {preset.label} ))}

), ); PresetsPanel.displayName = "PresetsPanel"; // ============================================================================ // MAIN CALENDAR CONTENT // ============================================================================ const CalendarContent = React.memo( ({ mode = "single", value, onChange, minDate, maxDate, disabledDates = [], disabledDaysOfWeek = [], disableWeekends = false, disablePastDates = false, disableFutureDates = false, showTime = false, use24Hour = true, minuteStep = 5, showWeekNumbers = false, showTodayButton = true, showClearButton = true, weekStartsOn = 0, monthsToShow = 1, showPresets = false, presets = defaultPresets, highlightedDates = [], closeOnSelect = true, size = "md", disabled = false, readOnly = false, localeStrings = defaultLocaleStrings, locale = enUS, onMonthChange, onYearChange, onViewChange, renderDay, onClose, id, }: InternalCalendarProps & { onClose?: () => void; localeStrings: CalendarLocale; }) => { const prefersReducedMotion = useReducedMotion() ?? false; const calendarRef = useRef(null); const announcerRef = useRef(null); const sizes = sizeClasses[size]; // Get initial date from value const getInitialDate = useCallback(() => { if (!value) return new Date(); if (mode === "single" && value instanceof Date) return value; if (mode === "range") return (value as DateRange).from || new Date(); if (mode === "multiple" && Array.isArray(value)) return value[0] || new Date(); return new Date(); }, [value, mode]); const [currentMonth, setCurrentMonth] = useState(getInitialDate); const [direction, setDirection] = useState(0); const [view, setView] = useState("days"); const [focusedDate, setFocusedDate] = useState(null); const [rangeHover, setRangeHover] = useState(null); const [rangeStart, setRangeStart] = useState( mode === "range" ? (value as DateRange)?.from : undefined, ); // Announce changes for screen readers const announce = useCallback((message: string) => { if (announcerRef.current) { announcerRef.current.textContent = message; } }, []); // View change handler const handleViewChange = useCallback( (newView: CalendarView) => { setView(newView); onViewChange?.(newView); announce(`Switched to ${newView} view`); }, [onViewChange, announce], ); // Generate calendar days const generateDays = useCallback( (month: Date) => { const monthStart = startOfMonth(month); const monthEnd = endOfMonth(month); const calendarStart = startOfWeek(monthStart, { weekStartsOn }); const calendarEnd = endOfWeek(monthEnd, { weekStartsOn }); return eachDayOfInterval({ start: calendarStart, end: calendarEnd }); }, [weekStartsOn], ); const getWeekDays = useCallback(() => { const days = [...localeStrings.weekdaysShort]; return [...days.slice(weekStartsOn), ...days.slice(0, weekStartsOn)]; }, [weekStartsOn, localeStrings.weekdaysShort]); // Navigation handlers const navigate = useCallback( (delta: number, type: "month" | "year") => { setDirection(delta); setCurrentMonth((prev) => { const newDate = type === "month" ? delta > 0 ? addMonths(prev, 1) : subMonths(prev, 1) : delta > 0 ? addYears(prev, 1) : subYears(prev, 1); if (type === "month") onMonthChange?.(newDate); else onYearChange?.(newDate); announce(format(newDate, "MMMM yyyy", { locale })); return newDate; }); }, [onMonthChange, onYearChange, announce, locale], ); // Check if day is disabled const isDayDisabled = useCallback( (day: Date) => { if (disabled || readOnly) return true; const dayStart = startOfDay(day); const today = startOfDay(new Date()); if (minDate && isBefore(dayStart, startOfDay(minDate))) return true; if (maxDate && isAfter(dayStart, startOfDay(maxDate))) return true; if (disabledDates.some((d) => isSameDay(d, day))) return true; if (disableWeekends && isWeekend(day)) return true; if (disabledDaysOfWeek.includes(getDay(day))) return true; if (disablePastDates && isBefore(dayStart, today)) return true; if (disableFutureDates && isAfter(dayStart, today)) return true; return false; }, [ disabled, readOnly, minDate, maxDate, disabledDates, disableWeekends, disabledDaysOfWeek, disablePastDates, disableFutureDates, ], ); // Date selection handler const handleSelectDate = useCallback( (day: Date) => { if (isDayDisabled(day)) return; if (mode === "single") { const dateToSet = showTime && value instanceof Date ? setMinutes(setHours(day, getHours(value)), getMinutes(value)) : day; onChange?.(dateToSet); announce(`Selected ${format(dateToSet, "PPPP", { locale })}`); if (closeOnSelect && !showTime) onClose?.(); } else if (mode === "range") { if (!rangeStart) { setRangeStart(day); onChange?.({ from: day, to: undefined }); announce(`Range start: ${format(day, "PP", { locale })}`); } else { const range = isBefore(day, rangeStart) ? { from: day, to: rangeStart } : { from: rangeStart, to: day }; onChange?.(range); setRangeStart(undefined); announce( `Range: ${format(range.from, "PP", { locale })} to ${format(range.to, "PP", { locale })}`, ); if (closeOnSelect) onClose?.(); } } else if (mode === "multiple") { const currentDates = (value as Date[]) || []; const exists = currentDates.some((d) => isSameDay(d, day)); const newDates = exists ? currentDates.filter((d) => !isSameDay(d, day)) : [...currentDates, day]; onChange?.(newDates); announce( `${exists ? "Deselected" : "Selected"} ${format(day, "PP", { locale })}. ${newDates.length} dates selected.`, ); } }, [ mode, onChange, onClose, rangeStart, showTime, value, closeOnSelect, isDayDisabled, announce, locale, ], ); // Selection state checks const isDaySelected = useCallback( (day: Date) => { if (mode === "single" && value instanceof Date) return isSameDay(day, value); if (mode === "range" && value) { const range = value as DateRange; return ( (range.from && isSameDay(day, range.from)) || (range.to && isSameDay(day, range.to)) ); } if (mode === "multiple" && Array.isArray(value)) { return value.some((d) => isSameDay(d, day)); } return false; }, [mode, value], ); const isDayInRange = useCallback( (day: Date) => { if (mode !== "range") return false; const range = value as DateRange | undefined; // Completed range if (range?.from && range?.to) { return ( isWithinInterval(day, { start: range.from, end: range.to }) && !isSameDay(day, range.from) && !isSameDay(day, range.to) ); } // Hover preview if (rangeStart && rangeHover) { const start = isBefore(rangeHover, rangeStart) ? rangeHover : rangeStart; const end = isBefore(rangeHover, rangeStart) ? rangeStart : rangeHover; return ( isWithinInterval(day, { start, end }) && !isSameDay(day, start) && !isSameDay(day, end) ); } return false; }, [mode, value, rangeStart, rangeHover], ); const getHighlight = useCallback( (day: Date) => { return highlightedDates.find((h) => isSameDay(h.date, day)); }, [highlightedDates], ); // Keyboard navigation useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (view !== "days" || disabled || readOnly) return; const baseDate = focusedDate || (value instanceof Date ? value : new Date()); let newDate = baseDate; let handled = true; switch (e.key) { case "ArrowLeft": newDate = addDays(baseDate, -1); break; case "ArrowRight": newDate = addDays(baseDate, 1); break; case "ArrowUp": newDate = addDays(baseDate, -7); break; case "ArrowDown": newDate = addDays(baseDate, 7); break; case "Home": newDate = startOfMonth(baseDate); break; case "End": newDate = endOfMonth(baseDate); break; case "PageUp": newDate = e.shiftKey ? subYears(baseDate, 1) : subMonths(baseDate, 1); break; case "PageDown": newDate = e.shiftKey ? addYears(baseDate, 1) : addMonths(baseDate, 1); break; case "Enter": case " ": if (focusedDate && !isDayDisabled(focusedDate)) { handleSelectDate(focusedDate); } e.preventDefault(); return; case "Escape": onClose?.(); e.preventDefault(); return; default: handled = false; } if (handled) { e.preventDefault(); setFocusedDate(newDate); if (!isSameMonth(newDate, currentMonth)) { setDirection(isAfter(newDate, currentMonth) ? 1 : -1); setCurrentMonth(startOfMonth(newDate)); } announce(format(newDate, "EEEE, MMMM d, yyyy", { locale })); } }; const el = calendarRef.current; if (el) { el.addEventListener("keydown", handleKeyDown); return () => el.removeEventListener("keydown", handleKeyDown); } }, [ focusedDate, view, currentMonth, value, disabled, readOnly, isDayDisabled, handleSelectDate, onClose, announce, locale, ]); // Action handlers const handleClear = useCallback(() => { onChange?.(undefined); setRangeStart(undefined); announce("Selection cleared"); }, [onChange, announce]); const handlePresetSelect = useCallback( (range: DateRange) => { onChange?.(range); if (range.from) setCurrentMonth(range.from); announce( `Selected: ${range.from && range.to ? `${format(range.from, "PP")} to ${format(range.to, "PP")}` : "preset"}`, ); if (closeOnSelect) onClose?.(); }, [onChange, closeOnSelect, onClose, announce], ); const handleMonthSelect = useCallback( (month: number) => { const newDate = setMonth(currentMonth, month); setCurrentMonth(newDate); handleViewChange("days"); onMonthChange?.(newDate); }, [currentMonth, handleViewChange, onMonthChange], ); const handleYearSelect = useCallback( (year: number) => { const newDate = setYear(currentMonth, year); setCurrentMonth(newDate); handleViewChange("months"); onYearChange?.(newDate); }, [currentMonth, handleViewChange, onYearChange], ); const handleTimeChange = useCallback( (newDate: Date) => { if (mode === "single") { // Ensure we have a valid date, use today if needed const baseDate = value instanceof Date ? value : startOfDay(new Date()); const updatedDate = setMinutes( setHours(baseDate, getHours(newDate)), getMinutes(newDate), ); onChange?.(updatedDate); announce( `Time set to ${format(updatedDate, use24Hour ? "HH:mm" : "hh:mm a")}`, ); } }, [mode, onChange, use24Hour, announce, value], ); const goToToday = useCallback(() => { const today = new Date(); setDirection(isAfter(today, currentMonth) ? 1 : -1); setCurrentMonth(today); if (mode === "single" && !isDayDisabled(today)) { handleSelectDate(today); } }, [currentMonth, mode, isDayDisabled, handleSelectDate]); // Render single day cell const renderDayCell = useCallback( (day: Date, monthDate: Date, index: number) => { const isCurrentMonth = isSameMonth(day, monthDate); const isSelected = isDaySelected(day); const isTodayDate = isToday(day); const isDisabled = isDayDisabled(day); const inRange = isDayInRange(day); const highlight = getHighlight(day); const isFocused = focusedDate && isSameDay(day, focusedDate); const dayContent = ( handleSelectDate(day)} onMouseEnter={() => { if (mode === "range" && rangeStart && !isDisabled) setRangeHover(day); }} onMouseLeave={() => setRangeHover(null)} onFocus={() => setFocusedDate(day)} disabled={isDisabled} className={cn( sizes.cell, "relative flex items-center justify-center rounded-lg font-medium outline-none transition-all", !isCurrentMonth && "text-muted-foreground/40", isDisabled && "cursor-not-allowed opacity-25", !isSelected && isCurrentMonth && !inRange && "text-foreground hover:bg-accent", isSelected && "bg-primary text-primary-foreground shadow-sm", isTodayDate && !isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-background", inRange && "rounded-none bg-primary/15", isFocused && "ring-2 ring-ring ring-offset-1", )} > {format(day, "d")} {/* Today indicator */} {isTodayDate && !isSelected && ( )} {/* Event highlight */} {highlight && ( )} ); return renderDay ? renderDay(day, dayContent) : dayContent; }, [ sizes.cell, isDaySelected, isDayDisabled, isDayInRange, getHighlight, focusedDate, handleSelectDate, mode, rangeStart, prefersReducedMotion, locale, renderDay, ], ); // Render month grid const renderMonthGrid = useCallback( (monthDate: Date, isSecondary = false) => { const days = generateDays(monthDate); return (

{isSecondary && (

{format(monthDate, "MMMM yyyy", { locale })}

)} {/* Week days header */}

{showWeekNumbers && (

)} {getWeekDays().map((day, i) => (

{day}

))}

{/* Days grid */} {days.map((day, index) => { const showWeekNumber = showWeekNumbers && index % 7 === 0; return ( {showWeekNumber && (

{format(day, "w")}

)} {renderDayCell(day, monthDate, index)} ); })}

); }, [ generateDays, getWeekDays, showWeekNumbers, sizes, direction, prefersReducedMotion, renderDayCell, locale, localeStrings.weekdays, weekStartsOn, ], ); const calendarWidth = monthsToShow === 1 ? "w-auto" : monthsToShow === 2 ? "min-w-[580px]" : "min-w-[860px]"; return ( {/* Screen reader announcer */}

{/* Presets panel */} {showPresets && mode === "range" && ( )}

{/* Header */}

{/* View content */} {view === "days" && ( {renderMonthGrid(currentMonth)} {monthsToShow >= 2 && ( <>

{renderMonthGrid(addMonths(currentMonth, 1), true)} )} {monthsToShow === 3 && ( <>

{renderMonthGrid(addMonths(currentMonth, 2), true)} )} )} {view === "months" && ( )} {view === "years" && ( )} {view === "time" && mode === "single" && ( )} {/* Time toggle */} {showTime && mode === "single" && view === "days" && ( )} {view === "time" && ( )} {/* Footer */} {(showTodayButton || showClearButton || (mode === "multiple" && value)) && view === "days" && (

{showTodayButton && ( )} {mode === "multiple" && Array.isArray(value) && value.length > 0 && ( {value.length} {localeStrings.selected} )}

{showClearButton && value && ( )}

)}

); }, ); CalendarContent.displayName = "CalendarContent"; // ============================================================================ // POPOVER CALENDAR // ============================================================================ export function AnimatedCalendar({ mode = "single", value: controlledValue, defaultValue, onChange, placeholder = "Pick a date", disabled = false, readOnly = false, required = false, error = false, errorMessage, className, size = "md", formatStr, showTime, use24Hour = true, locale = enUS, localeStrings: customLocaleStrings, onOpen, onClose, onBlur, onFocus, id, name, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: AnimatedCalendarProps) { const [isOpen, setIsOpen] = useState(false); const generatedId = useId(); const triggerId = id || generatedId; const errorId = `${triggerId}-error`; const localeStrings = useMemo( () => ({ ...defaultLocaleStrings, ...customLocaleStrings, }), [customLocaleStrings], ); // Internal state uses unified type for implementation type InternalValue = Date | DateRange | Date[] | undefined; const [value, setValue] = useControllableState( controlledValue as InternalValue, (defaultValue ?? (mode === "multiple" ? [] : undefined)) as InternalValue, onChange as ((value: InternalValue) => void) | undefined, ); const handleOpenChange = useCallback( (open: boolean) => { setIsOpen(open); if (open) { onOpen?.(); onFocus?.(); } else { onClose?.(); onBlur?.(); } }, [onOpen, onClose, onFocus, onBlur], ); const getDisplayValue = useMemo(() => { if (!value) return placeholder; if (mode === "single" && value instanceof Date) { const fmt = formatStr || (showTime ? (use24Hour ? "PPP HH:mm" : "PPP hh:mm a") : "PPP"); return format(value, fmt, { locale }); } if (mode === "range") { const range = value as DateRange; if (range.from && range.to) { return `${format(range.from, "MMM d", { locale })} – ${format(range.to, "MMM d, yyyy", { locale })}`; } if (range.from) return `${format(range.from, "MMM d, yyyy", { locale })} – ...`; return placeholder; } if (mode === "multiple" && Array.isArray(value)) { if (value.length === 0) return placeholder; const firstDate = value[0]; if (value.length === 1 && firstDate) return format(firstDate, "PPP", { locale }); return `${value.length} dates selected`; } return placeholder; }, [value, mode, placeholder, formatStr, showTime, use24Hour, locale]); const sizeClasses = { sm: "w-[240px] h-8 text-xs", md: "w-[280px] h-10 text-sm", lg: "w-[320px] h-12 text-base", }; return (

void } disabled={disabled} readOnly={readOnly} showTime={showTime} use24Hour={use24Hour} size={size} locale={locale} localeStrings={localeStrings as CalendarLocale} onClose={() => handleOpenChange(false)} /> {/* Hidden input for form integration */} {name && ( )} {/* Error message */} {error && errorMessage && (

{errorMessage}

)}

); } // ============================================================================ // STANDALONE CALENDAR // ============================================================================ export function AnimatedCalendarStandalone({ localeStrings: customLocaleStrings, ...props }: Omit< AnimatedCalendarProps, "placeholder" | "onOpen" | "onClose" | "onBlur" | "onFocus" >) { const localeStrings = useMemo( () => ({ ...defaultLocaleStrings, ...customLocaleStrings, }), [customLocaleStrings], ); return ( ); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}]]}],["$","$L4f",null,{"namespace":"@jolyui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"ui/calender.tsx","content":"$51","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]