indas-ui 0.0.1 → 0.1.0

package/dist/components/forms/date-picker/DatePicker.js

@@ -0,0 +1,712 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as Popover from '@radix-ui/react-popover';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Calendar, ChevronLeft, ChevronRight, Clock, X, CalendarDays, ArrowRight } from 'lucide-react';
+import { cn, getLocalDateString } from '../../../lib/utils.js';
+import { Button } from '../../ui/index.js';
+import { Input } from '../../ui/index.js';
+import { Dropdown } from '../../index.js';
+import { MONTHS, WEEKDAYS, PERIOD_OPTIONS, TIME_OPTIONS, getDaysInMonth, getFirstDayOfMonth } from './shared-utils.js';
+// ============================================
+// DatePicker Component (Single/Range dates without time)
+// ============================================
+export function DatePicker({ value, onChange, mode = 'single', placeholder = 'Select date...', label, error, disabled = false, minDate, maxDate, className, showTime = false, showFromTo = false, returnFormat = 'date', inline = false, iconOnly = false, popoverAlign, presets }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [currentMonth, setCurrentMonth] = React.useState(new Date());
+    const [secondMonth, setSecondMonth] = React.useState(() => {
+        const next = new Date();
+        next.setMonth(next.getMonth() + 1);
+        return next;
+    });
+    const [selectedRange, setSelectedRange] = React.useState(() => {
+        if (mode === 'range' && value && typeof value === 'object' && 'from' in value) {
+            return { from: value.from, to: value.to };
+        }
+        return {};
+    });
+    // Sync selectedRange from external value prop changes (e.g. default dates set by parent)
+    React.useEffect(() => {
+        if (mode !== 'range')
+            return;
+        if (value && typeof value === 'object' && 'from' in value) {
+            const v = value;
+            setSelectedRange(prev => {
+                if (prev.from?.getTime() === v.from?.getTime() && prev.to?.getTime() === v.to?.getTime()) {
+                    return prev;
+                }
+                return { from: v.from, to: v.to };
+            });
+        }
+    }, [value, mode]);
+    const [tempTime, setTempTime] = React.useState({ hours: 12, minutes: 0 });
+    const [fromTime, setFromTime] = React.useState({ hours: 9, minutes: 0, period: 'AM' });
+    const [toTime, setToTime] = React.useState({ hours: 6, minutes: 0, period: 'PM' });
+    const [rangeStart, setRangeStart] = React.useState(null);
+    const [showMonthYearScroller, setShowMonthYearScroller] = React.useState(false);
+    const [selectedTime, setSelectedTime] = React.useState('');
+    const [selectedPeriod, setSelectedPeriod] = React.useState('');
+    const [hoveredDate, setHoveredDate] = React.useState(null);
+    const [inputValue, setInputValue] = React.useState('');
+    const [focusedDate, setFocusedDate] = React.useState(null);
+    const containerRef = React.useRef(null);
+    const yearScrollerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const inputWrapperRef = React.useRef(null);
+    const calendarRef = React.useRef(null);
+    // Helper to convert date based on returnFormat
+    const convertDate = (date) => {
+        if (!date)
+            return undefined;
+        return returnFormat === 'string' ? getLocalDateString(date) : date;
+    };
+    const convertDateRange = (range) => {
+        if (returnFormat === 'date')
+            return range;
+        // For string format, we keep it as DateRange for now since it's more complex
+        // Users can destructure and convert if needed
+        return range;
+    };
+    // Auto-select today's date for single mode on mount
+    React.useEffect(() => {
+        if (mode === 'single' && !value && onChange) {
+            const now = new Date();
+            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+            onChange(today);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode]); // Run when mode changes
+    // Scroll to current year when month/year scroller opens
+    React.useEffect(() => {
+        if (showMonthYearScroller && yearScrollerRef.current) {
+            const currentYear = new Date().getFullYear();
+            const yearElement = yearScrollerRef.current.querySelector(`[data-year="${currentYear}"]`);
+            if (yearElement) {
+                yearElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+        }
+    }, [showMonthYearScroller]);
+    // Note: Radix Popover handles click-outside automatically via onOpenChange
+    // We only need to prevent closing when interacting with nested Radix portals (like Dropdowns)
+    // Normalize date to midnight local time (removes time component)
+    const normalizeDateToMidnight = (date) => {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+    };
+    const formatDate = (date) => {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = MONTHS[date.getMonth()].slice(0, 3);
+        const year = date.getFullYear();
+        return `${day} ${month}, ${year}`;
+    };
+    const formatDateShort = (date) => {
+        if (!date)
+            return '--';
+        return date.toLocaleDateString('en-GB', {
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric'
+        });
+    };
+    const formatDisplayValue = () => {
+        if (!value)
+            return '';
+        if (mode === 'single' && value instanceof Date) {
+            return showTime
+                ? `${formatDate(value)} ${value.toLocaleTimeString('en-GB', {
+                    hour: '2-digit', minute: '2-digit', hour12: false
+                })}`
+                : formatDate(value);
+        }
+        if (mode === 'range' && typeof value === 'object' && !Array.isArray(value)) {
+            const { from, to } = value;
+            if (from && to) {
+                return `${formatDate(from)} → ${formatDate(to)}`;
+            }
+            if (from) {
+                // Only show the from date, let placeholder handle the rest
+                return `${formatDate(from)} → `;
+            }
+        }
+        return '';
+    };
+    const getPlaceholder = () => {
+        if (mode === 'range') {
+            if (typeof value === 'object' && 'from' in value) {
+                const { from, to } = value;
+                if (from && !to) {
+                    return 'Start Date → End Date';
+                }
+            }
+            return 'Start Date → End Date';
+        }
+        return placeholder;
+    };
+    // Parse date from string input (supports multiple formats)
+    const parseDate = (str) => {
+        if (!str)
+            return null;
+        // Try parsing common date formats
+        // Format 1: "DD MMM, YYYY" (e.g., "1 Oct, 2025")
+        const format1 = /(\d{1,2})\s+([a-zA-Z]{3}),?\s+(\d{4})/;
+        const match1 = str.match(format1);
+        if (match1) {
+            const day = parseInt(match1[1]);
+            const monthStr = match1[2];
+            const year = parseInt(match1[3]);
+            const monthIndex = MONTHS.findIndex(m => m.toLowerCase().startsWith(monthStr.toLowerCase()));
+            if (monthIndex !== -1) {
+                return new Date(year, monthIndex, day, 0, 0, 0, 0);
+            }
+        }
+        // Format 2: "DD/MM/YYYY" or "DD-MM-YYYY"
+        const format2 = /(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/;
+        const match2 = str.match(format2);
+        if (match2) {
+            const day = parseInt(match2[1]);
+            const month = parseInt(match2[2]) - 1; // 0-indexed
+            const year = parseInt(match2[3]);
+            return new Date(year, month, day, 0, 0, 0, 0);
+        }
+        // Format 3: ISO format or native Date parsing
+        const date = new Date(str);
+        if (!isNaN(date.getTime())) {
+            return date;
+        }
+        return null;
+    };
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        // Auto-add arrow separator when typing a complete date in range mode
+        if (mode === 'range') {
+            // Check if user just typed a complete date pattern (e.g., "1 Jan, 2025 ")
+            // Pattern: digits, space, 3+ letters, optional comma, space, 4 digits, space
+            const completePattern = /^\d{1,2}\s+[a-zA-Z]{3,}\,?\s+\d{4}\s+$/;
+            if (completePattern.test(newValue) && !newValue.includes('→')) {
+                // Auto-add arrow and space
+                setInputValue(newValue.trim() + ' → ');
+            }
+        }
+    };
+    const handleInputKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleInputBlur();
+            setIsOpen(false);
+        }
+        else if (e.key === 'Escape') {
+            setInputValue(formatDisplayValue());
+            setIsOpen(false);
+        }
+        else if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {
+            // Stop propagation to prevent grid's Ctrl+A from triggering
+            e.stopPropagation();
+        }
+    };
+    const handleInputBlur = () => {
+        const newValue = inputValue.trim();
+        if (!newValue)
+            return;
+        if (mode === 'single') {
+            const parsedDate = parseDate(newValue);
+            if (parsedDate && !isDateDisabled(parsedDate)) {
+                onChange?.(convertDate(parsedDate));
+            }
+            else {
+                // Reset to previous valid value if parsing fails
+                setInputValue(formatDisplayValue());
+            }
+        }
+        else if (mode === 'range') {
+            // Parse range format "DD MMM, YYYY → DD MMM, YYYY"
+            const parts = newValue.split('→').map(s => s.trim());
+            if (parts.length === 2) {
+                let fromDate = parseDate(parts[0]);
+                let toDate = parseDate(parts[1]);
+                // Auto-swap if dates are in reverse order
+                if (fromDate && toDate && toDate < fromDate) {
+                    [fromDate, toDate] = [toDate, fromDate];
+                }
+                if (fromDate && toDate && !isDateDisabled(fromDate) && !isDateDisabled(toDate)) {
+                    onChange?.({ from: fromDate, to: toDate });
+                }
+                else if (fromDate && !isDateDisabled(fromDate)) {
+                    onChange?.({ from: fromDate });
+                }
+                else {
+                    // Reset to previous valid value if parsing fails
+                    setInputValue(formatDisplayValue());
+                }
+            }
+            else if (parts.length === 1) {
+                const fromDate = parseDate(parts[0]);
+                if (fromDate && !isDateDisabled(fromDate)) {
+                    onChange?.({ from: fromDate });
+                }
+                else {
+                    // Reset to previous valid value if parsing fails
+                    setInputValue(formatDisplayValue());
+                }
+            }
+        }
+    };
+    // Sync inputValue with value prop
+    React.useEffect(() => {
+        setInputValue(formatDisplayValue());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    const isDateDisabled = (date) => {
+        if (minDate && date < minDate)
+            return true;
+        if (maxDate && date > maxDate)
+            return true;
+        return false;
+    };
+    const isDateSelected = (date) => {
+        if (mode === 'single' && value instanceof Date) {
+            return date.toDateString() === value.toDateString();
+        }
+        if (mode === 'range' && typeof value === 'object' && 'from' in value) {
+            const { from, to } = value;
+            if (from && to) {
+                // Compare date strings to ensure same day comparison (ignore time)
+                const dateStr = date.toDateString();
+                const fromStr = from.toDateString();
+                const toStr = to.toDateString();
+                const dateTime = new Date(dateStr).getTime();
+                const fromTime = new Date(fromStr).getTime();
+                const toTime = new Date(toStr).getTime();
+                return dateTime >= fromTime && dateTime <= toTime;
+            }
+            if (from) {
+                return date.toDateString() === from.toDateString();
+            }
+        }
+        return false;
+    };
+    const isDateInRange = (date) => {
+        if (mode !== 'range' || !value || typeof value !== 'object' || !('from' in value))
+            return false;
+        const { from, to } = value;
+        // ONLY show hover preview when selecting range (not for finalized ranges)
+        // This is for the preview effect when from is selected but to is not yet
+        if (from && !to && hoveredDate) {
+            const minDate = from < hoveredDate ? from : hoveredDate;
+            const maxDate = from < hoveredDate ? hoveredDate : from;
+            const dateTime = date.getTime();
+            const minTime = minDate.getTime();
+            const maxTime = maxDate.getTime();
+            return dateTime >= minTime && dateTime <= maxTime;
+        }
+        // Don't return true for finalized ranges - let isDateSelected handle that
+        return false;
+    };
+    const handleDateClick = (date) => {
+        if (isDateDisabled(date))
+            return;
+        if (mode === 'single') {
+            if (showTime) {
+                const newDate = new Date(date);
+                newDate.setHours(tempTime.hours);
+                newDate.setMinutes(tempTime.minutes);
+                onChange?.(convertDate(newDate));
+            }
+            else {
+                // Normalize to midnight local time to avoid timezone issues
+                const normalizedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+                onChange?.(convertDate(normalizedDate));
+            }
+            setIsOpen(false);
+            return;
+        }
+        if (mode === 'range') {
+            const currentValue = value || {};
+            if (!currentValue.from || (currentValue.from && currentValue.to)) {
+                // Start new range
+                setSelectedRange({ from: date });
+                setRangeStart(date);
+                onChange?.({ from: date });
+            }
+            else if (currentValue.from && !currentValue.to) {
+                // Complete range
+                const from = currentValue.from;
+                const to = date;
+                if (date >= from) {
+                    setSelectedRange({ from, to });
+                    onChange?.({ from, to });
+                }
+                else {
+                    setSelectedRange({ from: date, to: from });
+                    onChange?.({ from: date, to: from });
+                }
+                setRangeStart(null);
+                setIsOpen(false);
+            }
+        }
+    };
+    // Keyboard navigation for calendar
+    const handleCalendarKeyDown = React.useCallback((e) => {
+        if (!isOpen)
+            return;
+        const currentFocus = focusedDate || (mode === 'single' && value instanceof Date ? value : new Date());
+        let newFocus = null;
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                newFocus = new Date(currentFocus);
+                newFocus.setDate(newFocus.getDate() - 1);
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                newFocus = new Date(currentFocus);
+                newFocus.setDate(newFocus.getDate() + 1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                newFocus = new Date(currentFocus);
+                newFocus.setDate(newFocus.getDate() - 7);
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                newFocus = new Date(currentFocus);
+                newFocus.setDate(newFocus.getDate() + 7);
+                break;
+            case 'Home':
+                e.preventDefault();
+                newFocus = new Date(currentFocus.getFullYear(), currentFocus.getMonth(), 1);
+                break;
+            case 'End':
+                e.preventDefault();
+                newFocus = new Date(currentFocus.getFullYear(), currentFocus.getMonth() + 1, 0);
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                newFocus = new Date(currentFocus);
+                newFocus.setMonth(newFocus.getMonth() - 1);
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                newFocus = new Date(currentFocus);
+                newFocus.setMonth(newFocus.getMonth() + 1);
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (!isDateDisabled(currentFocus)) {
+                    handleDateClick(currentFocus);
+                }
+                return;
+        }
+        if (newFocus && !isDateDisabled(newFocus)) {
+            setFocusedDate(newFocus);
+            setCurrentMonth(newFocus);
+        }
+    }, [isOpen, focusedDate, mode, value]);
+    const calculateQuickRange = (time, period) => {
+        const now = new Date();
+        const currentYear = now.getFullYear();
+        const currentMonth = now.getMonth();
+        const currentQuarter = Math.floor(currentMonth / 3);
+        let from;
+        let to;
+        switch (period) {
+            case 'Day':
+                if (time === 'This') {
+                    // Today
+                    from = now;
+                    to = now;
+                }
+                else if (time === 'Last') {
+                    // Yesterday
+                    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+                    from = yesterday;
+                    to = yesterday;
+                }
+                else { // Next
+                    // Tomorrow
+                    const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
+                    from = tomorrow;
+                    to = tomorrow;
+                }
+                break;
+            case 'Week':
+                const dayOfWeek = now.getDay();
+                if (time === 'This') {
+                    // This week: from start of week to today
+                    from = new Date(now.getTime() - dayOfWeek * 24 * 60 * 60 * 1000);
+                    to = now;
+                }
+                else if (time === 'Last') {
+                    // Last week: full week
+                    from = new Date(now.getTime() - (dayOfWeek + 7) * 24 * 60 * 60 * 1000);
+                    to = new Date(now.getTime() - dayOfWeek * 24 * 60 * 60 * 1000);
+                }
+                else { // Next
+                    // Next week: full week
+                    from = new Date(now.getTime() + (7 - dayOfWeek) * 24 * 60 * 60 * 1000);
+                    to = new Date(now.getTime() + (14 - dayOfWeek) * 24 * 60 * 60 * 1000);
+                }
+                break;
+            case 'Month':
+                if (time === 'This') {
+                    // This month: from 1st to today
+                    from = new Date(currentYear, currentMonth, 1);
+                    to = now;
+                }
+                else if (time === 'Last') {
+                    // Last month: full month
+                    from = new Date(currentYear, currentMonth - 1, 1);
+                    to = new Date(currentYear, currentMonth, 0);
+                }
+                else { // Next
+                    // Next month: full month
+                    from = new Date(currentYear, currentMonth + 1, 1);
+                    to = new Date(currentYear, currentMonth + 2, 0);
+                }
+                break;
+            case 'Quarter':
+                if (time === 'This') {
+                    // This quarter: from start to today
+                    from = new Date(currentYear, currentQuarter * 3, 1);
+                    to = now;
+                }
+                else if (time === 'Last') {
+                    // Last quarter: full quarter
+                    const lastQuarter = currentQuarter - 1;
+                    const lastQuarterYear = lastQuarter < 0 ? currentYear - 1 : currentYear;
+                    const lastQuarterMonth = lastQuarter < 0 ? 9 : lastQuarter * 3;
+                    from = new Date(lastQuarterYear, lastQuarterMonth, 1);
+                    to = new Date(lastQuarterYear, lastQuarterMonth + 3, 0);
+                }
+                else { // Next
+                    // Next quarter: full quarter
+                    const nextQuarter = currentQuarter + 1;
+                    const nextQuarterYear = nextQuarter > 3 ? currentYear + 1 : currentYear;
+                    const nextQuarterMonth = nextQuarter > 3 ? 0 : nextQuarter * 3;
+                    from = new Date(nextQuarterYear, nextQuarterMonth, 1);
+                    to = new Date(nextQuarterYear, nextQuarterMonth + 3, 0);
+                }
+                break;
+            case 'Year':
+                if (time === 'This') {
+                    // This year: from Jan 1 to today
+                    from = new Date(currentYear, 0, 1);
+                    to = now;
+                }
+                else if (time === 'Last') {
+                    // Last year: full year
+                    from = new Date(currentYear - 1, 0, 1);
+                    to = new Date(currentYear - 1, 11, 31);
+                }
+                else { // Next
+                    // Next year: full year
+                    from = new Date(currentYear + 1, 0, 1);
+                    to = new Date(currentYear + 1, 11, 31);
+                }
+                break;
+            default:
+                from = now;
+                to = now;
+        }
+        return { from, to };
+    };
+    const handleQuickSelect = () => {
+        const range = calculateQuickRange(selectedTime, selectedPeriod);
+        onChange?.(range);
+        setIsOpen(false);
+    };
+    const handleLastMonthClick = () => {
+        const currentYear = new Date().getFullYear();
+        const currentMonth = new Date().getMonth();
+        const range = {
+            from: new Date(currentYear, currentMonth - 1, 1),
+            to: new Date(currentYear, currentMonth, 0)
+        };
+        onChange?.(range);
+        setIsOpen(false);
+    };
+    // Shared Quick Select component for range mode (used in both inline and popover)
+    const renderQuickSelect = (closeOnSelect = true) => (_jsxs("div", { className: "mt-3 pt-3 border-t border-[rgb(var(--bd-default))]", onClick: (e) => e.stopPropagation(), children: [_jsx("h4", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] mb-2", children: "Quick Select" }), _jsxs("div", { className: "flex flex-nowrap gap-2 items-center overflow-x-auto pb-1", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                            const now = new Date();
+                            const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 0, 0, 0, 0);
+                            onChange?.({ from: yesterday, to: yesterday });
+                            if (closeOnSelect)
+                                setIsOpen(false);
+                        }, className: "h-7 px-3 text-xs font-semibold hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))] whitespace-nowrap", children: "Yesterday" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                            const now = new Date();
+                            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+                            onChange?.({ from: today, to: today });
+                            if (closeOnSelect)
+                                setIsOpen(false);
+                        }, className: "h-7 px-3 text-xs font-semibold hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))] whitespace-nowrap", children: "Today" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                            const now = new Date();
+                            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+                            const sevenDaysAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6, 0, 0, 0, 0);
+                            onChange?.({ from: sevenDaysAgo, to: today });
+                            if (closeOnSelect)
+                                setIsOpen(false);
+                        }, className: "h-7 px-3 text-xs font-semibold hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))] whitespace-nowrap", children: "Last 7 Days" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                            const now = new Date();
+                            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+                            const thirtyDaysAgo = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 29, 0, 0, 0, 0);
+                            onChange?.({ from: thirtyDaysAgo, to: today });
+                            if (closeOnSelect)
+                                setIsOpen(false);
+                        }, className: "h-7 px-3 text-xs font-semibold hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))] whitespace-nowrap", children: "Last 30 Days" }), _jsx("div", { className: "h-5 w-px bg-[rgb(var(--bd-default))]" }), _jsx(Dropdown, { value: selectedTime, onValueChange: (val) => {
+                            setSelectedTime(val);
+                            if (val && selectedPeriod) {
+                                const range = calculateQuickRange(val, selectedPeriod);
+                                onChange?.(range);
+                                if (range.from && range.to) {
+                                    setCurrentMonth(new Date(range.from));
+                                    setSecondMonth(new Date(range.to));
+                                }
+                                if (closeOnSelect)
+                                    setIsOpen(false);
+                            }
+                        }, options: TIME_OPTIONS.map(opt => ({ value: opt, label: opt })), placeholder: "Time", autoWidth: true, searchable: false, triggerClassName: "!h-7 text-xs font-semibold" }), _jsx(Dropdown, { value: selectedPeriod, onValueChange: (val) => {
+                            setSelectedPeriod(val);
+                            if (selectedTime && val) {
+                                const range = calculateQuickRange(selectedTime, val);
+                                onChange?.(range);
+                                if (range.from && range.to) {
+                                    setCurrentMonth(new Date(range.from));
+                                    setSecondMonth(new Date(range.to));
+                                }
+                                if (closeOnSelect)
+                                    setIsOpen(false);
+                            }
+                        }, options: PERIOD_OPTIONS.map(opt => ({ value: opt, label: opt })), placeholder: "Period", autoWidth: true, searchable: false, triggerClassName: "!h-7 text-xs font-semibold" })] })] }));
+    const navigateMonth = (direction) => {
+        const newMonth = new Date(currentMonth);
+        newMonth.setMonth(newMonth.getMonth() + (direction === 'next' ? 1 : -1));
+        setCurrentMonth(newMonth);
+        // Sync second month for range mode
+        if (mode === 'range') {
+            const newSecondMonth = new Date(newMonth);
+            newSecondMonth.setMonth(newSecondMonth.getMonth() + 1);
+            setSecondMonth(newSecondMonth);
+        }
+    };
+    // Navigate first calendar independently
+    const navigateFirstCalendar = (direction) => {
+        const newMonth = new Date(currentMonth);
+        newMonth.setMonth(newMonth.getMonth() + (direction === 'next' ? 1 : -1));
+        setCurrentMonth(newMonth);
+    };
+    // Navigate second calendar independently
+    const navigateSecondCalendar = (direction) => {
+        const newMonth = new Date(secondMonth);
+        newMonth.setMonth(newMonth.getMonth() + (direction === 'next' ? 1 : -1));
+        setSecondMonth(newMonth);
+    };
+    const handleTodayClick = () => {
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+        setCurrentMonth(today);
+        if (mode === 'single') {
+            onChange?.(convertDate(today));
+            setIsOpen(false);
+        }
+    };
+    const handleMonthYearSelect = (year, month) => {
+        const newMonth = new Date(year, month, 1);
+        setCurrentMonth(newMonth);
+        setShowMonthYearScroller(false);
+    };
+    const generateYearOptions = () => {
+        const currentYear = new Date().getFullYear();
+        const startYear = currentYear - 50;
+        const endYear = currentYear + 10;
+        const years = [];
+        for (let year = startYear; year <= endYear; year++) {
+            years.push(year);
+        }
+        return years;
+    };
+    const renderCalendarDays = (monthToRender) => {
+        const daysInMonth = getDaysInMonth(monthToRender);
+        const firstDayOfMonth = getFirstDayOfMonth(monthToRender);
+        const days = [];
+        // Empty cells for days before month starts
+        for (let i = 0; i < firstDayOfMonth; i++) {
+            days.push(_jsx("div", { className: "h-7 w-7" }, `empty-${i}`));
+        }
+        // Days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(monthToRender.getFullYear(), monthToRender.getMonth(), day);
+            const isSelected = isDateSelected(date);
+            const isInRange = isDateInRange(date);
+            const isDisabled = isDateDisabled(date);
+            const isToday = date.toDateString() === new Date().toDateString();
+            const isFocused = focusedDate && date.toDateString() === focusedDate.toDateString();
+            days.push(_jsx("button", { onMouseEnter: () => mode === 'range' && !isDisabled && setHoveredDate(date), onMouseLeave: () => mode === 'range' && setHoveredDate(null), className: cn('h-7 w-7 rounded text-[11px] font-medium transition-all duration-200 ease-out', 'text-[rgb(var(--fg-default))]', // Default text color for all dates
+                !isSelected && !isDisabled && 'hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--fg-default))] hover:shadow-sm', isSelected && 'bg-[rgb(var(--color-primary))] !text-white shadow-md hover:brightness-110', isInRange && !isSelected && 'bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))]', isToday && !isSelected && 'text-[rgb(var(--color-primary))] font-bold border border-[rgb(var(--color-primary))]', isFocused && !isSelected && 'ring-2 ring-[rgb(var(--color-primary))] ring-offset-1', isDisabled && 'text-[rgb(var(--fg-disabled))] cursor-not-allowed hover:bg-transparent hover:text-[rgb(var(--fg-disabled))] hover:shadow-none'), onClick: () => handleDateClick(date), disabled: isDisabled, children: day }, day));
+        }
+        return days;
+    };
+    const renderSingleCalendar = (monthToRender, showMonthNavigation = false, isFirst = false) => {
+        return (_jsxs("div", { className: "flex-1", children: [showMonthNavigation && (_jsxs("div", { className: "flex items-center justify-center gap-2 mb-1.5", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => isFirst ? navigateFirstCalendar('prev') : navigateSecondCalendar('prev'), className: "h-6 w-6 p-0 hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))] transition-all duration-200", children: _jsx(ChevronLeft, { className: "h-3 w-3" }) }), _jsxs("button", { onClick: () => setShowMonthYearScroller(true), className: "text-xs font-semibold text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-primary))] transition-colors duration-200 cursor-pointer", children: [MONTHS[monthToRender.getMonth()], " ", monthToRender.getFullYear()] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => isFirst ? navigateFirstCalendar('next') : navigateSecondCalendar('next'), className: "h-6 w-6 p-0 hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))] transition-all duration-200", children: _jsx(ChevronRight, { className: "h-3 w-3" }) })] })), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: WEEKDAYS.map(day => (_jsx("div", { className: "h-6 w-6 flex items-center justify-center font-semibold text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))] rounded text-[10px]", children: day.charAt(0) }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: renderCalendarDays(monthToRender) })] }));
+    };
+    // Inline mode - render calendar directly without popover
+    if (inline) {
+        return (_jsxs("div", { className: cn('relative w-full', className), ref: containerRef, children: [label && (_jsx("label", { className: "block text-sm font-medium text-[rgb(var(--fg-muted))] mb-2", children: label })), _jsxs("div", { ref: calendarRef, className: cn("bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))]", mode === 'range' ? 'p-2' : 'p-3'), onKeyDown: handleCalendarKeyDown, tabIndex: -1, children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: mode === 'single' && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleTodayClick, className: "text-xs px-2 py-1 h-6 font-medium text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--bg-hover))]", children: "Today" })) }), mode === 'single' && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => navigateMonth('prev'), className: "h-6 w-6 p-0", children: _jsx(ChevronLeft, { className: "h-3 w-3" }) }), _jsxs(motion.button, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, onClick: () => setShowMonthYearScroller(!showMonthYearScroller), className: "text-sm px-2 py-0.5 font-bold text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-primary))] rounded-lg hover:bg-[rgb(var(--bg-hover))] whitespace-nowrap", children: [MONTHS[currentMonth.getMonth()].slice(0, 3), " ", currentMonth.getFullYear()] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => navigateMonth('next'), className: "h-6 w-6 p-0", children: _jsx(ChevronRight, { className: "h-3 w-3" }) })] })), _jsx("div", { className: "flex items-center gap-2", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => { if (mode === 'range') {
+                                            setSelectedRange({});
+                                            onChange?.({ from: undefined, to: undefined });
+                                        }
+                                        else {
+                                            onChange?.(convertDate(undefined));
+                                        } ; setSelectedTime(''); setSelectedPeriod(''); setInputValue(''); }, className: "text-xs px-2 py-1 h-6 font-medium text-red-500 hover:bg-red-50", children: "Clear" }) })] }), _jsxs("div", { className: "flex flex-col", children: [mode === 'range' ? (_jsxs("div", { className: "flex flex-col sm:flex-row gap-3", children: [renderSingleCalendar(currentMonth, true, true), _jsx("div", { className: "hidden sm:block w-px bg-[rgb(var(--bd-default))] my-1" }), _jsx("div", { className: "sm:hidden h-px bg-[rgb(var(--bd-default))] mx-1" }), renderSingleCalendar(secondMonth, true, false)] })) : (_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "grid grid-cols-7 gap-2 mb-2", children: WEEKDAYS.map(day => (_jsx("div", { className: "h-8 w-8 flex items-center justify-center font-semibold text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))] rounded-lg text-xs", children: day.charAt(0) }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-2", children: renderCalendarDays(currentMonth) })] })), mode === 'range' && renderQuickSelect(false)] }), _jsx(AnimatePresence, { children: showMonthYearScroller && (_jsxs(motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2 }, className: "absolute inset-0 bg-[rgb(var(--bg-surface))] rounded-xl z-10 p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h4", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: "Select Date" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setShowMonthYearScroller(false), className: "h-6 w-6 p-0", children: _jsx(X, { className: "h-3 w-3" }) })] }), _jsx("div", { ref: yearScrollerRef, className: "max-h-[calc(100%-60px)] overflow-y-auto space-y-4", children: generateYearOptions().reverse().map((year) => (_jsxs("div", { className: "space-y-2", "data-year": year, children: [_jsx("div", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] sticky top-0 bg-[rgb(var(--bg-surface))] py-1", children: year }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: MONTHS.map((month, monthIndex) => {
+                                                        const isSelected = currentMonth.getFullYear() === year && currentMonth.getMonth() === monthIndex;
+                                                        return (_jsx(motion.button, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, onClick: () => handleMonthYearSelect(year, monthIndex), className: cn('p-2 text-xs font-medium rounded-lg', isSelected ? 'bg-[rgb(var(--color-primary))] text-[rgb(var(--color-primary-foreground))] shadow-md' : 'hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-default))]'), children: month.slice(0, 3) }, `${year}-${monthIndex}`));
+                                                    }) })] }, year))) })] })) })] }), error && _jsx("p", { className: "mt-1 text-sm text-red-600", children: error })] }));
+    }
+    // Default popover mode
+    return (_jsxs("div", { className: cn('relative w-full', className), ref: containerRef, children: [label && (_jsx("label", { className: "block text-sm font-medium text-[rgb(var(--fg-muted))] mb-2", children: label })), _jsxs(Popover.Root, { open: !disabled && isOpen, onOpenChange: (open) => !disabled && setIsOpen(open), children: [_jsx(Popover.Trigger, { asChild: true, disabled: disabled, children: iconOnly ? (_jsxs("button", { type: "button", className: cn('relative flex items-center gap-1 text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] transition-colors p-0.5 flex-shrink-0', (selectedRange.from || selectedRange.to) && 'text-[rgb(var(--color-primary))]', className), title: selectedRange.from || selectedRange.to
+                                ? `Date filter: ${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}` : ''}`
+                                : 'Select date range', children: [_jsx(CalendarDays, { className: "h-3.5 w-3.5 flex-shrink-0" }), _jsx("span", { className: "hidden sm:inline text-xs", children: selectedRange.from || selectedRange.to
+                                        ? `${selectedRange.from ? new Date(selectedRange.from).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }) : ''}${selectedRange.to ? ` – ${new Date(selectedRange.to).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}` : ''}`
+                                        : 'Date' }), (selectedRange.from || selectedRange.to) && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-[rgb(var(--color-primary))] ring-1 ring-[rgb(var(--bg-surface))]" }))] })) : (_jsx("div", { className: "relative", ref: inputWrapperRef, children: _jsx(Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, placeholder: getPlaceholder(), disabled: disabled, error: error, className: cn('pl-2 pr-9 text-xs w-full', error && 'border-red-300'), onFocus: () => !disabled && setIsOpen(true), rightIcon: Calendar, onRightIconClick: () => !disabled && setIsOpen(!isOpen) }) })) }), _jsx(Popover.Portal, { container: typeof document !== 'undefined' ? document.body : undefined, children: _jsxs(Popover.Content, { ref: calendarRef, className: cn("z-[300] bg-[rgb(var(--bg-surface))] rounded-xl shadow-2xl border border-[rgb(var(--bd-default))] backdrop-blur-sm", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", mode === 'range' ? 'w-[95vw] sm:w-auto sm:min-w-[580px] p-2' : 'w-[95vw] sm:w-auto sm:min-w-[280px] p-3', 'max-w-[calc(100vw-2rem)]'), side: "bottom", align: popoverAlign ?? (mode === 'range' ? 'end' : 'start'), sideOffset: 8, avoidCollisions: true, collisionPadding: 16, sticky: "always", onOpenAutoFocus: (e) => e.preventDefault(), onKeyDown: handleCalendarKeyDown, tabIndex: -1, onInteractOutside: (e) => {
+                                // Prevent closing when interacting with nested Radix portals (like Dropdowns)
+                                const target = e.target;
+                                if (target?.closest('[data-radix-popper-content-wrapper]')) {
+                                    e.preventDefault();
+                                }
+                            }, style: {
+                                boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05)'
+                            }, children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: mode === 'single' && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleTodayClick, className: "text-xs px-2 py-1 h-6 font-medium text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--bg-hover))] transition-all duration-200", children: "Today" })) }), mode === 'single' && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => navigateMonth('prev'), className: "h-6 w-6 p-0 hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))] transition-all duration-200", children: _jsx(ChevronLeft, { className: "h-3 w-3" }) }), _jsxs(motion.button, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, onClick: () => setShowMonthYearScroller(!showMonthYearScroller), className: "text-sm px-2 py-0.5 font-bold text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-primary))] transition-colors duration-200 rounded-lg hover:bg-[rgb(var(--bg-hover))] whitespace-nowrap", children: [MONTHS[currentMonth.getMonth()].slice(0, 3), " ", currentMonth.getFullYear()] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => navigateMonth('next'), className: "h-6 w-6 p-0 hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))] transition-all duration-200", children: _jsx(ChevronRight, { className: "h-3 w-3" }) })] })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                        if (mode === 'range') {
+                                                            setSelectedRange({});
+                                                            onChange?.({ from: undefined, to: undefined });
+                                                        }
+                                                        else {
+                                                            onChange?.(convertDate(undefined));
+                                                        }
+                                                        setSelectedTime('');
+                                                        setSelectedPeriod('');
+                                                        setInputValue('');
+                                                    }, className: "text-xs px-2 py-1 h-6 font-medium text-red-500 hover:bg-red-50 transition-all duration-200", children: "Clear" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setIsOpen(false), className: "h-6 w-6 p-0 hover:bg-red-50 hover:text-red-600 transition-all duration-200", children: _jsx(X, { className: "h-3 w-3" }) })] })] }), _jsxs("div", { className: "flex flex-col", children: [mode === 'range' ? (_jsxs("div", { className: "flex gap-3", children: [renderSingleCalendar(currentMonth, true, true), _jsx("div", { className: "w-px bg-[rgb(var(--bd-default))] my-1" }), renderSingleCalendar(secondMonth, true, false)] })) : (_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "grid grid-cols-7 gap-2 mb-2", children: WEEKDAYS.map(day => (_jsx("div", { className: "h-8 w-8 flex items-center justify-center font-semibold text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))] rounded-lg text-xs", children: day.charAt(0) }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-2", children: renderCalendarDays(currentMonth) })] })), mode === 'single' && !showTime && (_jsxs("div", { className: "mt-3 pt-3 border-t border-[rgb(var(--bd-default))]", children: [_jsx("h4", { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-2", children: "Quick Select" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleTodayClick, className: "flex-1 h-6 text-xs hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))]", children: "Today" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                                                const now = new Date();
+                                                                const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 0, 0, 0, 0);
+                                                                onChange?.(convertDate(yesterday));
+                                                                setIsOpen(false);
+                                                            }, className: "flex-1 h-6 text-xs hover:bg-[rgb(var(--bg-hover))] hover:text-[rgb(var(--color-primary))]", children: "Yesterday" })] })] })), mode === 'single' && showTime && (_jsxs("div", { className: "mt-3 pt-3 border-t border-[rgb(var(--bd-default))]", children: [_jsx("h4", { className: "text-xs font-medium text-[rgb(var(--fg-muted))] mb-2", children: "Time" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "From" }), _jsxs("div", { className: "flex items-center gap-1 px-2 border border-[rgb(var(--bd-default))] rounded h-7 bg-[rgb(var(--bg-subtle))]", children: [_jsx(Clock, { className: "h-3 w-3 text-[rgb(var(--fg-muted))]" }), _jsx("input", { type: "number", min: "1", max: "12", value: fromTime.hours.toString().padStart(2, '0'), onChange: (e) => {
+                                                                                const val = Math.min(12, Math.max(1, parseInt(e.target.value) || 1));
+                                                                                setFromTime(prev => ({ ...prev, hours: val }));
+                                                                            }, className: "w-6 text-center text-xs bg-transparent text-[rgb(var(--fg-default))] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" }), _jsx("span", { className: "text-[rgb(var(--fg-muted))] text-xs", children: ":" }), _jsx("input", { type: "number", min: "0", max: "59", value: fromTime.minutes.toString().padStart(2, '0'), onChange: (e) => {
+                                                                                const val = Math.min(59, Math.max(0, parseInt(e.target.value) || 0));
+                                                                                setFromTime(prev => ({ ...prev, minutes: val }));
+                                                                            }, className: "w-6 text-center text-xs bg-transparent text-[rgb(var(--fg-default))] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" }), _jsx("button", { type: "button", onClick: () => setFromTime(prev => ({ ...prev, period: prev.period === 'AM' ? 'PM' : 'AM' })), className: "ml-1 text-[10px] font-semibold px-1.5 py-0.5 rounded bg-[rgb(var(--color-primary))]/10 text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]/20 transition-colors", children: fromTime.period })] })] }), _jsx(ArrowRight, { className: "h-3 w-3 text-[rgb(var(--fg-muted))]" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: "To" }), _jsxs("div", { className: "flex items-center gap-1 px-2 border border-[rgb(var(--bd-default))] rounded h-7 bg-[rgb(var(--bg-subtle))]", children: [_jsx(Clock, { className: "h-3 w-3 text-[rgb(var(--fg-muted))]" }), _jsx("input", { type: "number", min: "1", max: "12", value: toTime.hours.toString().padStart(2, '0'), onChange: (e) => {
+                                                                                const val = Math.min(12, Math.max(1, parseInt(e.target.value) || 1));
+                                                                                setToTime(prev => ({ ...prev, hours: val }));
+                                                                            }, className: "w-6 text-center text-xs bg-transparent text-[rgb(var(--fg-default))] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" }), _jsx("span", { className: "text-[rgb(var(--fg-muted))] text-xs", children: ":" }), _jsx("input", { type: "number", min: "0", max: "59", value: toTime.minutes.toString().padStart(2, '0'), onChange: (e) => {
+                                                                                const val = Math.min(59, Math.max(0, parseInt(e.target.value) || 0));
+                                                                                setToTime(prev => ({ ...prev, minutes: val }));
+                                                                            }, className: "w-6 text-center text-xs bg-transparent text-[rgb(var(--fg-default))] focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" }), _jsx("button", { type: "button", onClick: () => setToTime(prev => ({ ...prev, period: prev.period === 'AM' ? 'PM' : 'AM' })), className: "ml-1 text-[10px] font-semibold px-1.5 py-0.5 rounded bg-[rgb(var(--color-primary))]/10 text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary))]/20 transition-colors", children: toTime.period })] })] })] })] })), mode === 'range' && renderQuickSelect(true)] }), _jsx(AnimatePresence, { children: showMonthYearScroller && (_jsxs(motion.div, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2 }, className: "absolute inset-0 bg-[rgb(var(--bg-surface))] rounded-xl z-10 p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h4", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: "Select Date" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setShowMonthYearScroller(false), className: "h-6 w-6 p-0", children: _jsx(X, { className: "h-3 w-3" }) })] }), _jsx("div", { ref: yearScrollerRef, className: "max-h-[calc(100%-60px)] overflow-y-auto space-y-4", children: generateYearOptions().reverse().map((year) => (_jsxs("div", { className: "space-y-2", "data-year": year, children: [_jsx("div", { className: "text-xs font-semibold text-[rgb(var(--fg-muted))] sticky top-0 bg-[rgb(var(--bg-surface))] py-1", children: year }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: MONTHS.map((month, monthIndex) => {
+                                                                const isSelected = currentMonth.getFullYear() === year && currentMonth.getMonth() === monthIndex;
+                                                                return (_jsx(motion.button, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, onClick: () => handleMonthYearSelect(year, monthIndex), className: cn('p-2 text-xs font-medium rounded-lg transition-all duration-200', isSelected
+                                                                        ? 'bg-[rgb(var(--color-primary))] text-[rgb(var(--color-primary-foreground))] shadow-md'
+                                                                        : 'hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-default))]'), children: month.slice(0, 3) }, `${year}-${monthIndex}`));
+                                                            }) })] }, year))) })] })) })] }) })] }), error && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: error }))] }));
+}