@flipdish/ui-library 0.2.1 → 0.3.0

package/dist/components/organisms/Calendar/index.cjs

@@ -0,0 +1,574 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
+var avatarAddButton = require('@flipdish/ui-library/components/atoms/Avatar/components/avatar-add-button');
+var Button = require('@flipdish/ui-library/components/atoms/Button');
+var UtilityButton = require('@flipdish/ui-library/components/atoms/UtilityButton');
+var cell = require('@flipdish/ui-library/components/organisms/DatePicker/components/cell');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var date = require('@internationalized/date');
+var i18n = require('@react-aria/i18n');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var calendarColumnHeader = require('./components/calendar-column-header.cjs');
+var calendarDwViewCell = require('./components/calendar-dw-view-cell.cjs');
+var calendarDwViewEvent = require('./components/calendar-dw-view-event.cjs');
+var calendarHeader = require('./components/calendar-header.cjs');
+var calendarMonthViewCell = require('./components/calendar-month-view-cell.cjs');
+var calendarMonthViewEvent = require('./components/calendar-month-view-event.cjs');
+var calendarRowLabel = require('./components/calendar-row-label.cjs');
+var calendarTimeMarker = require('./components/calendar-time-marker.cjs');
+
+const SLOT_HEIGHT = 48;
+const viewOptions = [
+    { value: 'day', label: 'Day view', addon: '⌘D' },
+    { value: 'week', label: 'Week view', addon: '⌘W' },
+    { value: 'month', label: 'Month view', addon: '⌘M' },
+];
+const getStartOfDay = (date$1, timeZone) => {
+    const zoned = date$1 instanceof date.CalendarDate ? date.toZoned(date$1, timeZone) : date$1;
+    return zoned.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+};
+const getEndOfDay = (date$1, timeZone) => {
+    const zoned = date$1 instanceof date.CalendarDate ? date.toZoned(date$1, timeZone) : date$1;
+    return zoned.set({ hour: 23, minute: 59, second: 59, millisecond: 999 });
+};
+const getDaysInVisibleMonthGrid = (anchorDate, locale) => {
+    const monthStart = date.startOfMonth(anchorDate);
+    const monthEnd = date.endOfMonth(anchorDate);
+    const weekStart = date.startOfWeek(monthStart, locale);
+    const weekEnd = date.endOfWeek(monthEnd, locale);
+    const days = [];
+    let day = weekStart;
+    while (day.compare(weekEnd) <= 0) {
+        days.push(day);
+        day = day.add({ days: 1 });
+    }
+    return days;
+};
+const getEventsForDay = (allEvents, targetDate, timeZone) => {
+    const dayStart = getStartOfDay(targetDate, timeZone);
+    const dayEnd = getEndOfDay(targetDate, timeZone);
+    return allEvents
+        .filter((event) => {
+        // Check if event interval overlaps with the day interval
+        return event.start.compare(dayEnd) < 0 && event.end.compare(dayStart) > 0;
+    })
+        .sort((a, b) => a.start.compare(b.start));
+};
+const PositionedEvent = ({ event, dayStart, timeZone, slotHeight, overlapIndex, setSelectedDate, timeFormatter }) => {
+    const formatTime = (dateTime) => timeFormatter.format(dateTime.toDate());
+    const startZoned = event.start;
+    const endZoned = event.end;
+    // Clamp event start/end times to the visible day boundaries for height calculation
+    const dayEnd = getEndOfDay(dayStart, timeZone); // Calculate dayEnd based on dayStart
+    const clampedStart = startZoned.compare(dayStart) < 0 ? dayStart : startZoned;
+    const clampedEnd = endZoned.compare(dayEnd) > 0 ? dayEnd : endZoned;
+    const startMinutes = clampedStart.hour * 60 + clampedStart.minute;
+    const endMinutes = clampedEnd.hour * 60 + clampedEnd.minute;
+    const durationMinutes = Math.max(15, endMinutes - startMinutes);
+    // Position based on 30-min slots (slotHeight = 24px)
+    const top = (startMinutes / 30) * slotHeight;
+    const height = Math.max(slotHeight / 2, (durationMinutes / 30) * slotHeight); // Min height 15min
+    // Basic overlap handling - simple horizontal offset
+    // const horizontalOffset = overlapIndex * 10;
+    const horizontalOffset = 0;
+    const displayTime = durationMinutes > 30;
+    const supportingText = displayTime ? formatTime(startZoned) : undefined;
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: This is a static element that is used to position the event
+    // biome-ignore lint/a11y/useKeyWithClickEvents: This is a static element that is used to position the event
+    jsxRuntime.jsx("div", { className: "absolute w-full px-1.5 py-1.5", style: {
+            top: `${top}px`,
+            height: `${height}px`,
+            left: `${horizontalOffset}px`,
+            zIndex: overlapIndex,
+        }, onClick: () => setSelectedDate(date.toCalendarDate(startZoned)), children: jsxRuntime.jsx(calendarDwViewEvent.CalendarDwViewEvent, { label: event.title, supportingText: supportingText, color: event.color, withDot: event.dot }) }, event.id));
+};
+const MonthView = ({ currentMonthDate, selectedDate, zonedEvents, locale, timeZone, setSelectedDate, fullDateFormatter, shortWeekdayFormatter, timeFormatter, // Needed for formatTime inside
+className, }) => {
+    const monthStart = date.startOfMonth(currentMonthDate);
+    const monthEnd = date.endOfMonth(currentMonthDate);
+    const weekStart = date.startOfWeek(monthStart, locale);
+    const weekEnd = date.endOfWeek(monthEnd, locale);
+    const formatTimeForMonth = (dateTime) => timeFormatter.format(dateTime.toDate());
+    const days = React.useMemo(() => getDaysInVisibleMonthGrid(currentMonthDate, locale), [currentMonthDate, locale]);
+    const weekdays = React.useMemo(() => {
+        const firstDay = date.startOfWeek(date.today(timeZone), locale);
+        return Array.from({ length: 7 }).map((_, i) => shortWeekdayFormatter.format(firstDay.add({ days: i }).toDate(timeZone)));
+    }, [locale, timeZone, shortWeekdayFormatter]); // Dependencies are passed in
+    const visibleEvents = zonedEvents.filter((event) => {
+        const eventStartDay = date.toCalendarDate(event.start);
+        const eventEndDay = date.toCalendarDate(event.end);
+        return eventStartDay.compare(weekEnd) <= 0 && eventEndDay.compare(weekStart) >= 0;
+    });
+    // Pre-calculate events for each day in the visible grid
+    const eventsByDay = React.useMemo(() => {
+        const map = new Map();
+        days.forEach((day) => {
+            const dateKey = day.toString();
+            const dayEvents = getEventsForDay(visibleEvents, day, timeZone);
+            map.set(dateKey, dayEvents);
+        });
+        return map;
+    }, [days, visibleEvents, timeZone]); // Dependencies: days array, visible events, timezone
+    const MAX_EVENTS_PER_CELL = 3;
+    const todayCalDate = date.today(timeZone);
+    const targetDateForFooter = selectedDate || (date.isSameMonth(currentMonthDate, todayCalDate) ? todayCalDate : null);
+    let eventsForFooter = [];
+    if (targetDateForFooter) {
+        const targetZoned = date.toZoned(targetDateForFooter, timeZone);
+        const targetZonedStart = getStartOfDay(targetZoned, timeZone);
+        const targetZonedEnd = getEndOfDay(targetZoned, timeZone);
+        eventsForFooter = zonedEvents
+            .filter((event) => {
+            const eventStartDay = date.toCalendarDate(event.start);
+            const eventEndDay = date.toCalendarDate(event.end);
+            return (date.isSameDay(eventStartDay, targetDateForFooter) ||
+                date.isSameDay(eventEndDay, targetDateForFooter) ||
+                (event.start.compare(targetZonedEnd) < 0 && event.end.compare(targetZonedStart) > 0));
+        })
+            .sort((a, b) => a.start.compare(b.start));
+    }
+    /**
+     * Calculates how many days an event should visually span from a given start date.
+     *
+     * Multi-day events are rendered as a single element that spans multiple cells.
+     * To avoid duplicate rendering:
+     * - Events render only on their start day
+     * - Multi-week events re-render at the start of each new week they span
+     *
+     * @returns Number of days to span, or null if event should not render on this day
+     */
+    const calculateEventSpan = React.useCallback((event, currentDate) => {
+        const eventStartDay = date.toCalendarDate(event.start);
+        const eventEndDay = date.toCalendarDate(event.end);
+        const startsOnThisDay = date.isSameDay(currentDate, eventStartDay);
+        // Determine if we should render this event on the current date
+        if (!startsOnThisDay && eventStartDay.compare(currentDate) < 0) {
+            // Event started on a previous day
+            const currentDayIndex = days.findIndex((d) => date.isSameDay(d, currentDate));
+            const weekStartIndex = Math.floor(currentDayIndex / 7) * 7;
+            const weekStartDate = days[weekStartIndex];
+            if (!weekStartDate)
+                return null;
+            const isFirstDayOfWeek = date.isSameDay(currentDate, weekStartDate);
+            // Only render at week boundaries for multi-week events
+            if (!isFirstDayOfWeek) {
+                return null; // Already rendered earlier in this week
+            }
+        }
+        // Calculate span: count days from current date until event ends or week ends
+        const currentDayIndex = days.findIndex((d) => date.isSameDay(d, currentDate));
+        const weekEndIndex = Math.floor(currentDayIndex / 7) * 7 + 6;
+        let spanDays = 1;
+        let checkDay = currentDate.add({ days: 1 });
+        let checkDayIndex = currentDayIndex + 1;
+        while (checkDayIndex <= weekEndIndex && checkDay.compare(eventEndDay) <= 0) {
+            spanDays++;
+            checkDay = checkDay.add({ days: 1 });
+            checkDayIndex++;
+        }
+        return spanDays;
+    }, [days]);
+    /**
+     * Creates an optimized layout for multi-day events using a row-packing algorithm.
+     *
+     * Key concepts:
+     * 1. Each event is assigned to a "row" (vertical position within a day cell)
+     * 2. Events spanning multiple days create invisible "placeholder" cells to reserve space
+     * 3. Row assignment uses a greedy algorithm to minimize wasted vertical space
+     * 4. Multi-week events can use different rows in each week for optimal packing
+     *
+     * Example: If Event A (Mon-Wed) is in row 0, Event B (Thu-Fri) can also use row 0
+     * because they don't overlap, preventing wasted space.
+     */
+    const eventRenderMap = React.useMemo(() => {
+        const renderMap = new Map();
+        // Initialize empty arrays for each day
+        // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
+        days.forEach((day) => renderMap.set(day.toString(), []));
+        // Tracking state for the algorithm
+        const eventRowAssignments = new Map(); // eventId -> row number
+        const rowOccupancyByDay = new Map(); // dateKey -> [row0: Set<eventId>, row1: Set<eventId>, ...]
+        // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
+        days.forEach((day) => rowOccupancyByDay.set(day.toString(), []));
+        // Checks if an event is starting at a week boundary (for multi-week events)
+        const isWeekBoundaryStart = (dayIndex, eventStartDay, currentDay) => {
+            const startsOnCurrentDay = date.isSameDay(currentDay, eventStartDay);
+            if (startsOnCurrentDay)
+                return false;
+            const weekStartIndex = Math.floor(dayIndex / 7) * 7;
+            const weekStartDate = days[weekStartIndex];
+            if (!weekStartDate)
+                return false;
+            return date.isSameDay(currentDay, weekStartDate);
+        };
+        // Finds the first available row for an event across all days it spans
+        const findAvailableRow = (startDayIndex, span) => {
+            let row = 0;
+            while (true) {
+                let isAvailable = true;
+                // Check if this row is free for all days in the span
+                for (let offset = 0; offset < span; offset++) {
+                    const dayIndex = startDayIndex + offset;
+                    const day = days[dayIndex];
+                    if (!day)
+                        break;
+                    const dayKey = day.toString();
+                    const occupancy = rowOccupancyByDay.get(dayKey);
+                    if ((occupancy[row]?.size ?? 0) > 0) {
+                        isAvailable = false;
+                        break;
+                    }
+                }
+                if (isAvailable)
+                    return row;
+                row++;
+            }
+        };
+        // Marks a row as occupied for all days an event spans
+        const markRowAsOccupied = (startDayIndex, span, row, eventId) => {
+            for (let offset = 0; offset < span; offset++) {
+                const dayIndex = startDayIndex + offset;
+                const day = days[dayIndex];
+                if (!day)
+                    break;
+                const dayKey = day.toString();
+                const occupancy = rowOccupancyByDay.get(dayKey);
+                let cell = occupancy[row];
+                if (!cell) {
+                    cell = new Set();
+                    occupancy[row] = cell;
+                }
+                cell.add(eventId);
+            }
+        };
+        // Main logic: Process each day and assign rows to events
+        days.forEach((day, dayIndex) => {
+            const dateKey = day.toString();
+            const eventsOnThisDay = eventsByDay.get(dateKey) || [];
+            eventsOnThisDay.forEach((event) => {
+                const span = calculateEventSpan(event, day);
+                if (span === null)
+                    return; // Event doesn't render on this day
+                const eventStartDay = date.toCalendarDate(event.start);
+                const isNewWeekSegment = isWeekBoundaryStart(dayIndex, eventStartDay, day);
+                const hasExistingRow = eventRowAssignments.has(event.id);
+                // Determine row: reuse existing row within same week, or find new row for new week segments
+                let row;
+                if (hasExistingRow && !isNewWeekSegment) {
+                    row = eventRowAssignments.get(event.id);
+                }
+                else {
+                    row = findAvailableRow(dayIndex, span);
+                    eventRowAssignments.set(event.id, row);
+                }
+                // Mark occupancy and add event cell
+                markRowAsOccupied(dayIndex, span, row, event.id);
+                renderMap.get(dateKey).push({ event, span, isPlaceholder: false, row });
+                // Add invisible placeholder cells for subsequent days
+                for (let offset = 1; offset < span; offset++) {
+                    const nextDayIndex = dayIndex + offset;
+                    const nextDay = days[nextDayIndex];
+                    if (!nextDay)
+                        break;
+                    const nextDayKey = nextDay.toString();
+                    renderMap.get(nextDayKey).push({ event, span: 0, isPlaceholder: true, row });
+                }
+            });
+        });
+        // Sort events by row for consistent rendering order
+        // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
+        renderMap.forEach((events) => events.sort((a, b) => a.row - b.row));
+        return renderMap;
+    }, [calculateEventSpan, days, eventsByDay]);
+    return (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-1 flex-col', className), children: [jsxRuntime.jsx("div", { className: "grid grid-cols-7", children: weekdays.map((weekday, index) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: This is a key for the column header
+                jsxRuntime.jsx(calendarColumnHeader.CalendarColumnHeader, { weekDay: weekday, className: "before:border-b" }, index))) }), jsxRuntime.jsx("div", { className: cx.cx('grid flex-1 grid-cols-7', 
+                // 6 rows for >35 days (6 weeks), 5 rows for >28 days (5 weeks), 4 rows for <=28 days (4 weeks)
+                days.length > 35 ? 'grid-rows-6' : days.length > 28 ? 'grid-rows-5' : 'grid-rows-4'), children: days.map((date$1, index) => {
+                    const dateKey = date$1.toString();
+                    const isCurrentMonthFlag = date.isSameMonth(date$1, currentMonthDate);
+                    const isTodayFlag = date.isToday(date$1, timeZone);
+                    const isSelectedFlag = selectedDate ? date.isSameDay(date$1, selectedDate) : false;
+                    // Determine if it's the last row based on the number of weeks
+                    const isLastRow = days.length > 35 ? index >= 35 : days.length > 28 ? index >= 28 : index >= 21;
+                    const isLastColumn = (index + 1) % 7 === 0;
+                    // Retrieve events to render for this day
+                    const eventsToRender = eventRenderMap.get(dateKey) || [];
+                    const dayEvents = eventsByDay.get(dateKey) || [];
+                    const eventsToShow = eventsToRender.slice(0, MAX_EVENTS_PER_CELL);
+                    const remainingEventsCount = Math.max(0, dayEvents.length - MAX_EVENTS_PER_CELL);
+                    return (jsxRuntime.jsxs(calendarMonthViewCell.CalendarMonthViewCell, { day: date$1.day, isDisabled: !isCurrentMonthFlag, state: isSelectedFlag ? 'selected' : isTodayFlag ? 'current' : 'default', className: cx.cx(isLastRow && 'before:border-b-0', isLastColumn && 'before:border-r-0'), onClick: () => isCurrentMonthFlag && setSelectedDate(date$1), children: [jsxRuntime.jsx("div", { className: "flex gap-1 max-md:pl-1 md:flex-col", children: eventsToShow.map(({ event, span, isPlaceholder }) => {
+                                    // If this is a placeholder, render an invisible element to take up space
+                                    if (isPlaceholder) {
+                                        return (jsxRuntime.jsx("div", { className: "pointer-events-none opacity-0", children: jsxRuntime.jsx(calendarMonthViewEvent.CalendarMonthViewEvent, { label: event.title, collapseOnMobile: true, color: event.color, withDot: event.dot }) }, `${event.id}-placeholder`));
+                                    }
+                                    // Regular event rendering
+                                    const eventStartDay = date.toCalendarDate(event.start);
+                                    const eventEndDay = date.toCalendarDate(event.end);
+                                    const startsToday = date.isSameDay(date$1, eventStartDay);
+                                    const endsToday = date.isSameDay(date$1, eventEndDay);
+                                    const continuesPrior = eventStartDay.compare(date$1) < 0;
+                                    const continuesAfter = eventEndDay.compare(date$1) > 0;
+                                    const eventStartsAtDayStart = date.isSameDay(eventStartDay, date.toCalendarDate(getStartOfDay(event.start, timeZone)));
+                                    const eventEndsAtDayEnd = date.isSameDay(eventEndDay, date.toCalendarDate(getEndOfDay(event.end, timeZone)));
+                                    const isAllDayForCell = (continuesPrior && continuesAfter) ||
+                                        (startsToday && continuesAfter && eventStartsAtDayStart) ||
+                                        (continuesPrior && endsToday && eventEndsAtDayEnd);
+                                    const supportingText = isAllDayForCell ? undefined : formatTimeForMonth(event.start);
+                                    // Apply custom width style for multi-day events
+                                    const spanStyle = span > 1
+                                        ? {
+                                            zIndex: 1,
+                                            width: `calc(${span * 100}% + ${(span - 1) * 16}px)`,
+                                        }
+                                        : undefined;
+                                    return (jsxRuntime.jsx("div", { style: spanStyle, className: cx.cx(!isCurrentMonthFlag && 'opacity-50'), children: jsxRuntime.jsx(calendarMonthViewEvent.CalendarMonthViewEvent, { label: event.title, collapseOnMobile: true, supportingText: supportingText, color: event.color, withDot: event.dot }) }, event.id));
+                                }) }), remainingEventsCount > 0 && (jsxRuntime.jsx("div", { className: "truncate text-xs font-semibold text-utility-neutral-500 max-md:pl-1", children: `${remainingEventsCount} more...` }))] }, dateKey));
+                }) }), targetDateForFooter && (jsxRuntime.jsxs("div", { className: "border-t border-secondary px-4 py-5 md:hidden", children: [jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-primary", children: fullDateFormatter.format(targetDateForFooter.toDate(timeZone)) }), eventsForFooter.length > 0 && (jsxRuntime.jsx("div", { className: "mt-4 flex flex-col gap-1.5", children: eventsForFooter.slice(0, 3).map((event) => {
+                            // Use helpers for start/end of day
+                            const eventStartDay = getStartOfDay(event.start, timeZone);
+                            const eventEndDay = getEndOfDay(event.end, timeZone);
+                            const isAllDay = event.start.compare(eventStartDay) <= 0 && event.end.compare(eventEndDay) >= 0;
+                            const supportingText = isAllDay ? 'All day' : formatTimeForMonth(event.start);
+                            return (jsxRuntime.jsx(calendarMonthViewEvent.CalendarMonthViewEvent, { label: event.title, supportingText: supportingText, color: event.color, withDot: event.dot }, `footer-${event.id}`));
+                        }) })), eventsForFooter.length === 0 && jsxRuntime.jsx("p", { className: "mt-4 text-xs font-semibold text-quaternary", children: "No events for this day." }), eventsForFooter.length > 3 && jsxRuntime.jsx("p", { className: "mt-4 text-xs font-semibold text-quaternary", children: `${eventsForFooter.length - 3} more...` })] }))] }));
+};
+const MobileSingleDayGrid = ({ dayToDisplay, dayEvents, timeZone, setSelectedDate, timeFormatter, className }) => {
+    const dayStart = React.useMemo(() => getStartOfDay(dayToDisplay, timeZone), [dayToDisplay, timeZone]); // Calculate once
+    return (jsxRuntime.jsxs("div", { className: cx.cx('relative flex-1', className), children: [Array.from({ length: 48 }).map((_, slotIndex) => (jsxRuntime.jsx(calendarDwViewCell.CalendarDwViewCell
+            // biome-ignore lint/suspicious/noArrayIndexKey: This is a key for the slot
+            , { className: cx.cx('before:border-r-0', slotIndex === 47 && 'before:border-b-0') }, `mobile-slot-${dayToDisplay.toString()}-${slotIndex}`))), dayEvents.map((event, index) => {
+                const overlapIndex = dayEvents.filter((e, i) => i < index && event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
+                const totalOverlapping = dayEvents.filter((e) => event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
+                return (jsxRuntime.jsx(PositionedEvent, { event: event, dayStart: dayStart, timeZone: timeZone, slotHeight: SLOT_HEIGHT, overlapIndex: overlapIndex, totalOverlapping: totalOverlapping, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, event.id));
+            })] }));
+};
+const WeekViewDay = ({ day, isLastDay, visibleEvents, timeZone, slotHeight, setSelectedDate, timeFormatter }) => {
+    const dateKey = day.toString();
+    const dayEvents = React.useMemo(() => getEventsForDay(visibleEvents, day, timeZone), [visibleEvents, day, timeZone]);
+    const dayStart = React.useMemo(() => getStartOfDay(day, timeZone), [day, timeZone]);
+    return (jsxRuntime.jsx("div", { className: "flex flex-col border-secondary", children: jsxRuntime.jsxs("div", { className: "relative flex-1 bg-primary", style: { minHeight: `${48 * slotHeight}px` }, children: [Array.from({ length: 48 }).map((_, slotIndex) => (jsxRuntime.jsx(calendarDwViewCell.CalendarDwViewCell, { className: cx.cx('last:before:border-b-0', isLastDay && 'before:border-r-0') }, `slot-${dateKey}-${
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                slotIndex}`))), dayEvents.map((event, index) => {
+                    const overlapIndex = dayEvents.filter((e, i) => i < index && event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
+                    const totalOverlapping = dayEvents.filter((e) => event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
+                    return (jsxRuntime.jsx(PositionedEvent, { event: event, dayStart: dayStart, timeZone: timeZone, slotHeight: slotHeight, overlapIndex: overlapIndex, totalOverlapping: totalOverlapping, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, event.id));
+                })] }) }));
+};
+const WeekView = ({ currentMonthDate, selectedDate, zonedEvents, locale, timeZone, currentTime, setSelectedDate, shortWeekdayFormatter, timeFormatter, hourOnlyFormatter, className, view, }) => {
+    const currentWeekStart = date.startOfWeek(currentMonthDate, locale);
+    const currentWeekEnd = date.endOfWeek(currentMonthDate, locale);
+    const localCurrentTime = currentTime;
+    const scrollContainerRef = React.useRef(null);
+    const formatTime = (dateTime) => timeFormatter.format(dateTime.toDate());
+    const showTimeMarker = localCurrentTime.compare(date.toZoned(currentWeekStart, timeZone)) >= 0 &&
+        localCurrentTime.compare(date.toZoned(currentWeekEnd, timeZone).add({ days: 1 })) < 0;
+    const days = [];
+    let dayIterator = currentWeekStart;
+    while (dayIterator.compare(currentWeekEnd) <= 0) {
+        days.push(dayIterator);
+        dayIterator = dayIterator.add({ days: 1 });
+    }
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    let timeMarkerTop = 0;
+    if (showTimeMarker) {
+        const startOfVisibleDay = getStartOfDay(localCurrentTime, timeZone);
+        const minutesFromTop = localCurrentTime.hour * 60 + localCurrentTime.minute - (startOfVisibleDay.hour * 60 + startOfVisibleDay.minute);
+        timeMarkerTop = (minutesFromTop / 30) * SLOT_HEIGHT;
+    }
+    const visibleEvents = zonedEvents.filter((event) => {
+        const eventStartDay = date.toCalendarDate(event.start);
+        const eventEndDay = date.toCalendarDate(event.end);
+        return eventStartDay.compare(currentWeekEnd) <= 0 && eventEndDay.compare(currentWeekStart) >= 0;
+    });
+    // Calculate earliest event time for the entire week or default to 8 AM
+    const earliestEventTimeInWeek = React.useMemo(() => {
+        if (visibleEvents.length === 0) {
+            // Default scroll target: 8 AM of the week start day
+            return date.toZoned(currentWeekStart, timeZone).set({ hour: 8 });
+        }
+        // Find the earliest start time across all visible events in the week
+        return visibleEvents.reduce((earliest, current) => {
+            return current.start.compare(earliest.start) < 0 ? current : earliest;
+        }).start;
+    }, [visibleEvents, currentWeekStart, timeZone]);
+    // Effect to scroll to the earliest event - Use useLayoutEffect
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include currentMonthDate in the dependency array to recalculate the earliest event time when the week changes
+    React.useLayoutEffect(() => {
+        // Only scroll if the view is 'week' and the ref is attached
+        if (view === 'week' && scrollContainerRef.current && earliestEventTimeInWeek) {
+            const startMinutes = earliestEventTimeInWeek.hour * 60 + earliestEventTimeInWeek.minute;
+            // Calculate target scroll, ensuring it's not negative
+            let targetScrollTop = Math.max(0, (startMinutes / 30) * SLOT_HEIGHT);
+            // Optional: Add an offset
+            targetScrollTop = Math.max(0, targetScrollTop - SLOT_HEIGHT);
+            // No need for setTimeout with useLayoutEffect for initial scroll
+            if (scrollContainerRef.current) {
+                scrollContainerRef.current.scrollTop = targetScrollTop;
+            }
+        }
+        // Dependency array includes view and earliestEventTimeInWeek
+        // currentMonthDate determines the week, which affects earliestEventTimeInWeek calculation
+    }, [view, earliestEventTimeInWeek, currentMonthDate]);
+    return (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-1 flex-col overflow-auto', className), children: [jsxRuntime.jsx("div", { className: "sticky top-0 z-10 grid grid-cols-7 bg-primary pl-18 shadow-sm dark:border-b dark:border-secondary", children: days.map((day) => {
+                    const isTodayFlag = date.isToday(day, timeZone);
+                    const dayToHighlight = selectedDate && day.compare(currentWeekStart) >= 0 && day.compare(currentWeekEnd) <= 0 ? selectedDate : currentWeekStart;
+                    const isSelectedFlag = date.isSameDay(day, dayToHighlight);
+                    const weekDayShort = shortWeekdayFormatter.format(day.toDate(timeZone));
+                    return (jsxRuntime.jsx(calendarColumnHeader.CalendarColumnHeader, { onClick: () => setSelectedDate(day), weekDay: weekDayShort, day: day.day, state: isSelectedFlag ? 'selected' : isTodayFlag ? 'current' : 'default', className: "cursor-pointer first:before:-left-px first:before:border-l" }, `mobile-header-${day.toString()}`));
+                }) }), jsxRuntime.jsxs("div", { ref: scrollContainerRef, className: "relative flex flex-1 overflow-y-auto", children: [jsxRuntime.jsx("div", { className: "flex h-max w-18 flex-col border-r border-secondary", children: hours.map((hour) => {
+                            const time = new date.CalendarDateTime(currentWeekStart.year, currentWeekStart.month, currentWeekStart.day, hour);
+                            const timeString = hourOnlyFormatter.format(date.toZoned(time, timeZone).toDate());
+                            return jsxRuntime.jsx(calendarRowLabel.CalendarRowLabel, { children: timeString }, `time-${hour}`);
+                        }) }), jsxRuntime.jsx("div", { className: "grid flex-1 grid-cols-7", children: days.map((day, index) => {
+                            const isLastDay = index === days.length - 1;
+                            return (jsxRuntime.jsx(WeekViewDay, { day: day, isLastDay: isLastDay, visibleEvents: visibleEvents, timeZone: timeZone, slotHeight: SLOT_HEIGHT, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, day.toString()));
+                        }) }), showTimeMarker && jsxRuntime.jsx(calendarTimeMarker.CalendarTimeMarker, { style: { top: `${timeMarkerTop}px` }, children: formatTime(localCurrentTime) })] })] }));
+};
+const DayView = ({ dayToDisplay, zonedEvents, locale, timeZone, currentTime, setSelectedDate, shortWeekdayFormatter, timeFormatter, hourOnlyFormatter, selectedDate, className, view, }) => {
+    const currentWeekStart = date.startOfWeek(dayToDisplay, locale);
+    const currentWeekEnd = date.endOfWeek(dayToDisplay, locale);
+    const localCurrentTime = currentTime;
+    const formatTime = (dateTime) => timeFormatter.format(dateTime.toDate());
+    const showTimeMarker = date.isSameDay(date.toCalendarDate(localCurrentTime), dayToDisplay);
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    let timeMarkerTop = 0;
+    if (showTimeMarker) {
+        const minutesFromDayStart = localCurrentTime.hour * 60 + localCurrentTime.minute;
+        timeMarkerTop = (minutesFromDayStart / 30) * SLOT_HEIGHT;
+    }
+    const visibleEvents = React.useMemo(() => getEventsForDay(zonedEvents, dayToDisplay, timeZone), [zonedEvents, dayToDisplay, timeZone]);
+    const highlightedDates = React.useMemo(() => {
+        const datesWithEvents = new Set();
+        zonedEvents.forEach((event) => {
+            let currentDate = date.toCalendarDate(event.start);
+            const endDate = date.toCalendarDate(event.end);
+            // Iterate through each day the event spans
+            while (currentDate.compare(endDate) <= 0) {
+                datesWithEvents.add(currentDate.toString());
+                currentDate = currentDate.add({ days: 1 });
+            }
+        });
+        return datesWithEvents;
+    }, [zonedEvents]);
+    const days = [];
+    let dayIterator = currentWeekStart;
+    while (dayIterator.compare(currentWeekEnd) <= 0) {
+        days.push(dayIterator);
+        dayIterator = dayIterator.add({ days: 1 });
+    }
+    const scrollContainerRef = React.useRef(null);
+    // Calculate earliest event time or default to 8 AM
+    const earliestEventTime = React.useMemo(() => {
+        if (visibleEvents.length === 0) {
+            // Default scroll target: 8 AM of the displayed day
+            return date.toZoned(dayToDisplay, timeZone).set({ hour: 8 });
+        }
+        // Find the earliest start time among visible events
+        return visibleEvents.reduce((earliest, current) => {
+            return current.start.compare(earliest.start) < 0 ? current : earliest;
+        }).start;
+    }, [visibleEvents, dayToDisplay, timeZone]);
+    // Effect to scroll to the earliest event - Use useLayoutEffect
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include view, earliestEventTime, and dayToDisplay in the dependency array to re-trigger on changes
+    React.useLayoutEffect(() => {
+        // Only scroll if the view is 'day' and the ref is attached
+        if (view === 'day' && scrollContainerRef.current && earliestEventTime) {
+            const startMinutes = earliestEventTime.hour * 60 + earliestEventTime.minute;
+            // Calculate target scroll, ensuring it's not negative
+            let targetScrollTop = Math.max(0, (startMinutes / 30) * SLOT_HEIGHT);
+            // Optional: Add an offset to show some context before the first event (e.g., scroll up by one slot height)
+            targetScrollTop = Math.max(0, targetScrollTop - SLOT_HEIGHT);
+            // No need for setTimeout with useLayoutEffect for initial scroll
+            if (scrollContainerRef.current) {
+                scrollContainerRef.current.scrollTop = targetScrollTop;
+            }
+        }
+        // Dependency array includes view, earliestEventTime, and dayToDisplay to re-trigger on changes
+    }, [view, earliestEventTime, dayToDisplay]);
+    return (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-1 flex-col overflow-auto', className), children: [jsxRuntime.jsx("div", { className: "sticky top-0 z-20 grid grid-cols-7 bg-primary shadow-sm lg:hidden dark:border-b dark:border-secondary", children: days.map((day) => {
+                    const isTodayFlag = date.isToday(day, timeZone);
+                    const dayToHighlight = selectedDate && day.compare(currentWeekStart) >= 0 && day.compare(currentWeekEnd) <= 0 ? selectedDate : currentWeekStart;
+                    const isSelectedFlag = date.isSameDay(day, dayToHighlight);
+                    const weekDayShort = shortWeekdayFormatter.format(day.toDate(timeZone));
+                    return (jsxRuntime.jsx(calendarColumnHeader.CalendarColumnHeader, { onClick: () => setSelectedDate(day), weekDay: weekDayShort, day: day.day, state: isSelectedFlag ? 'selected' : isTodayFlag ? 'current' : 'default', className: "cursor-pointer" }, `mobile-header-${day.toString()}`));
+                }) }), jsxRuntime.jsxs("div", { className: "flex h-full flex-1", children: [jsxRuntime.jsxs("div", { ref: scrollContainerRef, className: "relative flex h-full flex-1 overflow-auto", children: [jsxRuntime.jsx("div", { className: "flex h-max w-14 flex-col border-r border-secondary md:w-18", children: hours.map((hour) => {
+                                    const time = new date.CalendarDateTime(dayToDisplay.year, dayToDisplay.month, dayToDisplay.day, hour);
+                                    const timeString = hourOnlyFormatter.format(date.toZoned(time, timeZone).toDate());
+                                    return jsxRuntime.jsx(calendarRowLabel.CalendarRowLabel, { children: timeString }, `time-${hour}`);
+                                }) }), jsxRuntime.jsx(MobileSingleDayGrid, { dayToDisplay: dayToDisplay, dayEvents: visibleEvents, timeZone: timeZone, locale: locale, currentTime: currentTime, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }), showTimeMarker && jsxRuntime.jsx(calendarTimeMarker.CalendarTimeMarker, { style: { top: `${timeMarkerTop}px` }, children: formatTime(localCurrentTime) })] }), jsxRuntime.jsxs("div", { className: "sticky top-0 hidden h-full w-82 flex-col overflow-auto border-l border-secondary mask-b-from-94% lg:flex", children: [jsxRuntime.jsxs(reactAriaComponents.Calendar, { "aria-label": "Calendar", className: "px-6 py-5", value: selectedDate, onChange: (value) => setSelectedDate(value), children: [jsxRuntime.jsxs("header", { className: "mb-3 flex items-center justify-between", children: [jsxRuntime.jsx(Button.Button, { slot: "previous", iconLeading: uiIcons.ChevronLeft, size: "sm", color: "tertiary", className: "size-8" }), jsxRuntime.jsx(reactAriaComponents.Heading, { className: "text-sm font-semibold text-fg-secondary" }), jsxRuntime.jsx(Button.Button, { slot: "next", iconLeading: uiIcons.ChevronRight, size: "sm", color: "tertiary", className: "size-8" })] }), jsxRuntime.jsxs(reactAriaComponents.CalendarGrid, { weekdayStyle: "short", className: "w-max", children: [jsxRuntime.jsx(reactAriaComponents.CalendarGridHeader, { className: "border-b-4 border-transparent", children: (day) => (jsxRuntime.jsx(reactAriaComponents.CalendarHeaderCell, { className: "p-0", children: jsxRuntime.jsx("div", { className: "flex size-10 items-center justify-center text-sm font-medium text-secondary", children: day.slice(0, 2) }) })) }), jsxRuntime.jsx(reactAriaComponents.CalendarGridBody, { className: "[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none", children: (date) => jsxRuntime.jsx(cell.CalendarCell, { date: date, isHighlighted: highlightedDates.has(date.toString()) }) })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 border-t border-secondary px-6 py-5", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsxs("section", { className: "flex w-full justify-between", children: [jsxRuntime.jsx("p", { className: "text-md font-semibold text-primary", children: "Product demo" }), jsxRuntime.jsxs("div", { className: "-mt-2 -mr-2 flex gap-0.5", children: [jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "xs", color: "tertiary", tooltip: "Copy link", icon: uiIcons.Copy01 }), jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "xs", color: "tertiary", tooltip: "Delete", icon: uiIcons.Trash01 }), jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "xs", color: "tertiary", tooltip: "Edit", icon: uiIcons.Edit01 })] })] }), jsxRuntime.jsxs("section", { className: "flex flex-col gap-1.5", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntime.jsx(uiIcons.Calendar, { className: "size-4 stroke-[2.25px] text-fg-quaternary" }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary", children: "Friday, Jan 10, 2027" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntime.jsx(uiIcons.Clock, { className: "size-4 stroke-[2.25px] text-fg-quaternary" }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary", children: "1:30 PM - 3:30 PM" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntime.jsx(uiIcons.BellRinging01, { className: "size-4 stroke-[2.25px] text-fg-quaternary" }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary", children: "10 min before" })] })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs("section", { className: "flex gap-2", children: [jsxRuntime.jsxs("section", { className: "flex flex-row -space-x-2", children: [jsxRuntime.jsx(Avatar.Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/sienna-hewitt?fm=webp&q=80", alt: "Sienna Hewitt", size: "sm" }), jsxRuntime.jsx(Avatar.Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/ammar-foley?fm=webp&q=80", alt: "Ammar Foley", size: "sm" }), jsxRuntime.jsx(Avatar.Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/pippa-wilkinson?fm=webp&q=80", alt: "Pippa Wilkinson", size: "sm" }), jsxRuntime.jsx(Avatar.Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/olly-schroeder?fm=webp&q=80", alt: "Olly Schroeder", size: "sm" }), jsxRuntime.jsx(Avatar.Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/mathilde-lewis?fm=webp&q=80", alt: "Mathilde Lewis", size: "sm" }), jsxRuntime.jsx(Avatar.Avatar, { className: "ring-[1.5px] ring-bg-primary", initials: "OR", size: "sm" })] }), jsxRuntime.jsx(avatarAddButton.AvatarAddButton, { size: "sm" })] }), jsxRuntime.jsxs("section", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-primary", children: "6 guests" }), jsxRuntime.jsx("span", { className: "h-[13px] border-l border-primary" }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary", children: "5 yes" }), jsxRuntime.jsx("span", { className: "h-[13px] border-l border-primary" }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary", children: "1 awaiting" })] })] }), jsxRuntime.jsxs("section", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-primary", children: "About this event" }), jsxRuntime.jsxs("div", { className: "text-sm text-tertiary", children: [jsxRuntime.jsx("p", { children: "Sienna is inviting you to a scheduled Zoom meeting." }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("p", { children: "Topic: Product demo for the new dashboard and Q&A session." }), jsxRuntime.jsx("br", {}), jsxRuntime.jsxs("p", { className: "wrap-break-word whitespace-normal", children: ["Join Zoom Meeting:\u00A0", jsxRuntime.jsx("span", { className: "break-all underline", children: "https://us02web.zoom.us/j/86341969512" }), "\u00A0"] }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx("p", { children: "Meeting ID: 863 4196 9512" })] })] })] })] })] })] }));
+};
+const Calendar = ({ events, view: defaultView = 'month', className }) => {
+    const { locale } = i18n.useLocale();
+    const timeZone = React.useMemo(() => date.getLocalTimeZone(), []);
+    const timeFormatter = i18n.useDateFormatter({ hour: 'numeric', minute: '2-digit', hour12: true });
+    const shortWeekdayFormatter = i18n.useDateFormatter({ weekday: 'short' });
+    const fullDateFormatter = i18n.useDateFormatter({ weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+    const hourOnlyFormatter = i18n.useDateFormatter({ hour: 'numeric', hour12: true });
+    const [currentMonthDate, setCurrentMonthDate] = React.useState(() => date.today(timeZone));
+    const [selectedDate, setSelectedDate] = React.useState(currentMonthDate);
+    const [view, setView] = React.useState(defaultView);
+    const [currentTime, setCurrentTime] = React.useState(() => date.now(timeZone));
+    const [isMounted, setIsMounted] = React.useState(false);
+    React.useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    React.useEffect(() => {
+        const intervalId = setInterval(() => {
+            setCurrentTime(date.now(timeZone));
+        }, 60000);
+        return () => clearInterval(intervalId);
+    }, [timeZone]);
+    const zonedEvents = React.useMemo(() => {
+        return events.map((event) => ({
+            ...event,
+            start: date.parseAbsoluteToLocal(event.start.toISOString()),
+            end: date.parseAbsoluteToLocal(event.end.toISOString()),
+        }));
+    }, [events]);
+    const headerDate = React.useMemo(() => (view === 'day' && selectedDate ? selectedDate.toDate(timeZone) : currentMonthDate.toDate(timeZone)), [view, selectedDate, currentMonthDate, timeZone]);
+    const handleNavigate = (action) => {
+        let newDate;
+        const anchorDate = selectedDate || currentMonthDate; // Use selected or current month anchor
+        if (action === 'TODAY') {
+            newDate = date.today(timeZone);
+        }
+        else {
+            const P = action === 'PREV' ? -1 : 1;
+            switch (view) {
+                case 'month':
+                    newDate = currentMonthDate.add({ months: P });
+                    break;
+                case 'week':
+                    // biome-ignore lint/correctness/noSwitchDeclarations: We need to use a switch statement to handle the different views
+                    const currentWeekStart = date.startOfWeek(anchorDate, locale);
+                    newDate = currentWeekStart.add({ weeks: P });
+                    break;
+                case 'day':
+                    newDate = anchorDate.add({ days: P });
+                    break;
+                default:
+                    newDate = currentMonthDate;
+            }
+        }
+        setCurrentMonthDate(newDate); // Always update month anchor for header consistency
+        if (action === 'TODAY' || view === 'day') {
+            setSelectedDate(newDate); // Select today or the navigated day
+        }
+        else {
+            setSelectedDate(null); // Clear selection when navigating months/weeks
+        }
+    };
+    const dayToDisplay = selectedDate || currentMonthDate;
+    if (!isMounted)
+        return null;
+    return (jsxRuntime.jsxs("div", { role: "application", "aria-label": "Calendar", className: cx.cx('flex flex-col overflow-hidden rounded-xl bg-primary shadow-xs ring ring-secondary', view === 'month' ? 'h-full md:min-h-[912px]' : 'h-[912px]', className), children: [jsxRuntime.jsx(calendarHeader.CalendarHeader, { date: headerDate, selectedView: view, onSelectionChange: setView, viewOptions: viewOptions, onClickPrev: () => handleNavigate('PREV'), onClickNext: () => handleNavigate('NEXT'), onClickToday: () => handleNavigate('TODAY') }), jsxRuntime.jsxs("main", { className: "flex flex-1 overflow-hidden", children: [view === 'month' && (jsxRuntime.jsx(MonthView, { currentMonthDate: currentMonthDate, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, setSelectedDate: setSelectedDate, fullDateFormatter: fullDateFormatter, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter })), view === 'week' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DayView, { dayToDisplay: dayToDisplay, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view, className: "md:hidden" }), jsxRuntime.jsx(WeekView, { currentMonthDate: currentMonthDate, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view, className: "max-md:hidden" })] })), view === 'day' && (jsxRuntime.jsx(DayView, { dayToDisplay: dayToDisplay, selectedDate: selectedDate, zonedEvents: zonedEvents, locale: locale, timeZone: timeZone, currentTime: currentTime, setSelectedDate: setSelectedDate, shortWeekdayFormatter: shortWeekdayFormatter, timeFormatter: timeFormatter, hourOnlyFormatter: hourOnlyFormatter, view: view }))] })] }));
+};
+
+exports.Calendar = Calendar;
+//# sourceMappingURL=index.cjs.map