@super-calendar/native 2.0.0

package/dist/MonthList-CyrEJ_U6.mjs

@@ -0,0 +1,1030 @@
+import { addMonths, differenceInCalendarMonths, format, isSameMonth, startOfDay, startOfMonth } from "date-fns";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { CalendarSelectionProvider, buildMonthWeeks, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventTimeLabel, getIsToday, getWeekDays, groupEventsByDay, isAllDayEvent, isDateSelectable, isSameCalendarDay, isWeekend, lightColors, monthEventCapacity, monthVisibleCount, rangeBandKind, titleEllipsizeMode, titleNumberOfLines, useCalendarSelection } from "@super-calendar/core";
+import { LegendList } from "@legendapp/list/react-native";
+import { Platform, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+//#region src/theme.ts
+const defaultTheme = {
+	colors: lightColors,
+	text: {
+		dayNumber: {
+			fontSize: 22,
+			fontWeight: "700"
+		},
+		weekday: {
+			fontSize: 13,
+			fontWeight: "700"
+		},
+		dateCell: {
+			fontSize: 13,
+			fontWeight: "700"
+		},
+		hourLabel: { fontSize: 10 },
+		more: {
+			fontSize: 11,
+			fontWeight: "700"
+		},
+		eventTitle: {
+			fontSize: 12,
+			fontWeight: "700",
+			lineHeight: 16
+		}
+	},
+	todayBadgeRadius: 999,
+	rangeBandHeight: 22
+};
+/**
+* A ready-made dark palette. Pass it straight to `<Calendar theme={darkTheme} />`,
+* or switch on the system scheme with React Native's `useColorScheme()`. Shares
+* {@link defaultTheme}'s typography and metrics; only the colours change.
+*/
+const darkTheme = {
+	colors: darkColors,
+	text: defaultTheme.text,
+	todayBadgeRadius: defaultTheme.todayBadgeRadius,
+	rangeBandHeight: defaultTheme.rangeBandHeight
+};
+/** Deep-merge a partial theme over {@link defaultTheme}. */
+function mergeTheme(theme) {
+	if (!theme) return defaultTheme;
+	return {
+		colors: {
+			...defaultTheme.colors,
+			...theme.colors
+		},
+		text: {
+			...defaultTheme.text,
+			...theme.text
+		},
+		todayBadgeRadius: theme.todayBadgeRadius ?? defaultTheme.todayBadgeRadius,
+		rangeBandHeight: theme.rangeBandHeight ?? defaultTheme.rangeBandHeight
+	};
+}
+const CalendarThemeContext = createContext(defaultTheme);
+const CalendarThemeProvider = CalendarThemeContext.Provider;
+const useCalendarTheme = () => useContext(CalendarThemeContext);
+//#endregion
+//#region src/utils/useWebPagerKeys.ts
+const getDocument = () => globalThis.document;
+const isTextEntry = (element) => {
+	const tag = element?.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || element?.isContentEditable === true;
+};
+/**
+* Web-only: page the calendar with the ← / → arrow keys, standing in for the
+* horizontal swipe that the grid disables on web. No-op off web or when
+* `enabled` is false. `onPage(delta)` receives -1 (previous) or +1 (next).
+*/
+function useWebPagerKeys(enabled, onPage) {
+	useEffect(() => {
+		if (Platform.OS !== "web" || !enabled) return;
+		const doc = getDocument();
+		if (!doc) return;
+		const handler = (event) => {
+			if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+			if (isTextEntry(doc.activeElement)) return;
+			if (event.key === "ArrowRight") {
+				event.preventDefault();
+				onPage(1);
+			} else if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				onPage(-1);
+			}
+		};
+		doc.addEventListener("keydown", handler);
+		return () => doc.removeEventListener("keydown", handler);
+	}, [enabled, onPage]);
+}
+//#endregion
+//#region src/components/MonthView.tsx
+const isWeb$2 = Platform.OS === "web";
+const DAY_CELL_PADDING_TOP = 4;
+const DATE_BADGE_HEIGHT = 24;
+const BAND_CENTER_Y = 16;
+const CELL_ROW_GAP = 2;
+const CHIP_PADDING_V = 2;
+const FALLBACK_VISIBLE_COUNT = 3;
+const numericStyle = (value, fallback) => typeof value === "number" ? value : fallback;
+function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, locale, sortedMonthView = true, moreLabel = "{moreCount} More", showAdjacentMonths = true, disableMonthEventCellPress = false, isRTL = false, showSixWeeks = false, showTitle = true, showWeekdays = true, activeDate, selectedDates: selectedDatesProp, selectedRange: selectedRangeProp, fillCellOnSelection = false, minDate: minDateProp, maxDate: maxDateProp, isDateDisabled: isDateDisabledProp, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, renderCustomDateForMonth, onDayPointerDown, onDayPointerEnter }) {
+	const theme = useCalendarTheme();
+	const selection = useCalendarSelection();
+	const selectedDates = selectedDatesProp ?? selection.selectedDates;
+	const selectedRange = selectedRangeProp ?? selection.selectedRange;
+	const minDate = minDateProp ?? selection.minDate;
+	const maxDate = maxDateProp ?? selection.maxDate;
+	const isDateDisabled = isDateDisabledProp ?? selection.isDateDisabled;
+	const RenderEventComponent = renderEvent;
+	const [gridHeight, setGridHeight] = useState(0);
+	const [hoveredKey, setHoveredKey] = useState(null);
+	const [pressedKey, setPressedKey] = useState(null);
+	const weeks = useMemo(() => buildMonthWeeks(date, weekStartsOn, {
+		showSixWeeks,
+		isRTL
+	}), [
+		date,
+		weekStartsOn,
+		isRTL,
+		showSixWeeks
+	]);
+	const weekdayLabels = useMemo(() => {
+		const days = getWeekDays(date, weekStartsOn);
+		return isRTL ? days.reverse() : days;
+	}, [
+		date,
+		weekStartsOn,
+		isRTL
+	]);
+	const capacity = useMemo(() => {
+		if (maxVisibleEventCount != null) return {
+			full: maxVisibleEventCount,
+			withMore: maxVisibleEventCount
+		};
+		if (gridHeight <= 0 || weeks.length === 0) return {
+			full: FALLBACK_VISIBLE_COUNT,
+			withMore: FALLBACK_VISIBLE_COUNT
+		};
+		const rowHeight = gridHeight / weeks.length;
+		const fontSize = numericStyle(theme.text.eventTitle.fontSize, 12);
+		const chipRowHeight = numericStyle(theme.text.eventTitle.lineHeight, Math.ceil(fontSize * 1.3)) + CHIP_PADDING_V * 2 + CELL_ROW_GAP;
+		const moreFontSize = numericStyle(theme.text.more.fontSize, 11);
+		const moreRowHeight = Math.ceil(moreFontSize * 1.3) + CELL_ROW_GAP;
+		return monthEventCapacity(rowHeight - DAY_CELL_PADDING_TOP - DATE_BADGE_HEIGHT, chipRowHeight, moreRowHeight);
+	}, [
+		maxVisibleEventCount,
+		gridHeight,
+		weeks.length,
+		theme
+	]);
+	const eventsByDay = useMemo(() => {
+		const map = groupEventsByDay(events);
+		if (sortedMonthView) for (const list of map.values()) list.sort(compareDayEvents);
+		return map;
+	}, [events, sortedMonthView]);
+	const showGrid = events.length > 0;
+	const renderDay = (day) => {
+		const isCurrentMonth = isSameMonth(day, date);
+		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ jsx(View, { style: [styles$3.dayCell, showGrid && {
+			borderTopWidth: StyleSheet.hairlineWidth,
+			borderRightWidth: StyleSheet.hairlineWidth,
+			borderColor: theme.colors.gridLine
+		}] }, day.toISOString());
+		const dayEvents = eventsByDay.get(startOfDay(day).toISOString()) ?? [];
+		const isToday = getIsToday(day);
+		const isHighlighted = activeDate ? isSameCalendarDay(day, activeDate) : isToday;
+		const { isDisabled, isSelected, isInRange, isRangeStart, isRangeEnd } = daySelectionState(day, {
+			selectedDates,
+			selectedRange
+		}, {
+			minDate,
+			maxDate,
+			isDateDisabled
+		});
+		const visibleCount = monthVisibleCount(dayEvents.length, capacity);
+		const hiddenCount = dayEvents.length - visibleCount;
+		const isFilledBadge = dayBadgeKind({ isSelected }, isHighlighted) !== "none";
+		const hasBand = rangeBandKind({
+			isInRange,
+			isRangeStart,
+			isRangeEnd
+		}, fillCellOnSelection) !== "none";
+		const dayKey = day.toISOString();
+		const isHovered = isWeb$2 && !isDisabled && !showGrid && hoveredKey === dayKey;
+		const dateColor = isDisabled ? theme.colors.textDisabled : isFilledBadge ? isHighlighted ? theme.colors.todayText : theme.colors.selectedText : isCurrentMonth ? theme.colors.text : theme.colors.textDisabled;
+		const handlePressDay = isDisabled || !onPressDay ? void 0 : () => onPressDay(day);
+		const handleLongPressDay = isDisabled || !onLongPressDay ? void 0 : () => onLongPressDay(day);
+		const eventCount = dayEvents.length;
+		const accessibilityLabel = `${format(day, "EEEE, d LLLL yyyy", { locale })}${isToday ? ", today" : ""}${isSelected ? ", selected" : ""}${isDisabled ? ", unavailable" : ""}, ${eventCount} ${eventCount === 1 ? "event" : "events"}`;
+		return /* @__PURE__ */ jsxs(TouchableOpacity, {
+			style: [
+				styles$3.dayCell,
+				showGrid && styles$3.dayCellEvents,
+				showGrid && {
+					borderTopWidth: StyleSheet.hairlineWidth,
+					borderRightWidth: StyleSheet.hairlineWidth,
+					borderColor: theme.colors.gridLine
+				},
+				isWeekend(day) && { backgroundColor: theme.colors.weekendBackground },
+				calendarCellStyle?.(day)
+			],
+			activeOpacity: showGrid ? .2 : 1,
+			...showGrid ? null : {
+				onPressIn: () => setPressedKey(dayKey),
+				onPressOut: () => setPressedKey((k) => k === dayKey ? null : k)
+			},
+			onPress: handlePressDay,
+			onLongPress: handleLongPressDay,
+			disabled: isDisabled || !onPressDay && !onLongPressDay,
+			...isWeb$2 && !isDisabled ? {
+				onPointerEnter: () => {
+					if (!showGrid) setHoveredKey(dayKey);
+					if (onDayPointerDown) onDayPointerEnter?.(day);
+				},
+				onPointerLeave: () => {
+					if (!showGrid) setHoveredKey((k) => k === dayKey ? null : k);
+				},
+				...onDayPointerDown ? { onPointerDown: () => onDayPointerDown(day) } : {}
+			} : null,
+			role: "cell",
+			...isWeb$2 && showGrid ? { focusable: false } : null,
+			accessibilityLabel,
+			children: [
+				hasBand ? /* @__PURE__ */ jsx(View, {
+					testID: "month-range-band",
+					style: [
+						styles$3.rangeBand,
+						{ pointerEvents: "none" },
+						{ backgroundColor: theme.colors.rangeBackground },
+						fillCellOnSelection ? {
+							top: 0,
+							bottom: 0
+						} : {
+							top: BAND_CENTER_Y - theme.rangeBandHeight / 2,
+							height: theme.rangeBandHeight
+						},
+						!fillCellOnSelection && isRangeStart && {
+							left: "50%",
+							marginLeft: -24 / 2,
+							borderTopLeftRadius: theme.rangeBandHeight / 2,
+							borderBottomLeftRadius: theme.rangeBandHeight / 2
+						},
+						!fillCellOnSelection && isRangeEnd && {
+							right: "50%",
+							marginRight: -24 / 2,
+							borderTopRightRadius: theme.rangeBandHeight / 2,
+							borderBottomRightRadius: theme.rangeBandHeight / 2
+						}
+					]
+				}) : null,
+				renderCustomDateForMonth ? renderCustomDateForMonth(day) : /* @__PURE__ */ jsx(View, {
+					style: [
+						styles$3.dateBadge,
+						showGrid && styles$3.dateBadgeEvents,
+						isFilledBadge && {
+							backgroundColor: isHighlighted ? theme.colors.todayBackground : theme.colors.selectedBackground,
+							borderRadius: theme.todayBadgeRadius
+						},
+						isHovered && !isFilledBadge && {
+							backgroundColor: theme.colors.hoverBackground,
+							borderRadius: theme.todayBadgeRadius
+						},
+						!showGrid && pressedKey === dayKey && { opacity: .2 }
+					],
+					children: /* @__PURE__ */ jsx(Text, {
+						style: [theme.text.dateCell, { color: dateColor }],
+						allowFontScaling: false,
+						children: format(day, "d")
+					})
+				}),
+				dayEvents.slice(0, visibleCount).map((event, index) => /* @__PURE__ */ jsx(View, {
+					style: styles$3.monthEvent,
+					children: /* @__PURE__ */ jsx(RenderEventComponent, {
+						event,
+						mode: "month",
+						isAllDay: isAllDayEvent(event),
+						onPress: disableMonthEventCellPress ? () => {} : () => onPressEvent(event),
+						onLongPress: disableMonthEventCellPress || !onLongPressEvent ? void 0 : () => onLongPressEvent(event)
+					})
+				}, keyExtractor(event, index))),
+				hiddenCount > 0 ? /* @__PURE__ */ jsx(Text, {
+					style: [
+						theme.text.more,
+						styles$3.moreLabel,
+						{ color: theme.colors.textMuted }
+					],
+					onPress: onPressMore ? () => onPressMore(dayEvents, day) : void 0,
+					accessibilityRole: "button",
+					accessibilityLabel: `Show ${hiddenCount} more events`,
+					allowFontScaling: false,
+					children: moreLabel.replace("{moreCount}", String(hiddenCount))
+				}) : null
+			]
+		}, day.toISOString());
+	};
+	const handleLayout = (event) => {
+		const next = event.nativeEvent.layout.height;
+		setGridHeight((prev) => prev === next ? prev : next);
+	};
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$3.root,
+		children: [
+			showTitle ? /* @__PURE__ */ jsx(Text, {
+				style: [styles$3.title, { color: theme.colors.text }],
+				allowFontScaling: false,
+				children: format(date, "MMMM yyyy", locale ? { locale } : void 0)
+			}) : null,
+			showWeekdays ? /* @__PURE__ */ jsx(View, {
+				style: styles$3.weekdayHeader,
+				children: weekdayLabels.map((day) => /* @__PURE__ */ jsx(Text, {
+					style: [
+						theme.text.weekday,
+						styles$3.weekdayLabel,
+						{ color: theme.colors.textMuted }
+					],
+					allowFontScaling: false,
+					children: format(day, "EEE", { locale })
+				}, day.toISOString()))
+			}) : null,
+			/* @__PURE__ */ jsx(View, {
+				style: styles$3.container,
+				onLayout: handleLayout,
+				children: weeks.map((week) => /* @__PURE__ */ jsx(View, {
+					style: styles$3.weekRow,
+					children: week.map((day) => renderDay(day))
+				}, week[0].toISOString()))
+			})
+		]
+	});
+}
+const MonthView = memo(MonthViewInner);
+const styles$3 = StyleSheet.create({
+	root: { flex: 1 },
+	title: {
+		fontSize: 17,
+		fontWeight: "700",
+		paddingTop: 10,
+		paddingHorizontal: 14,
+		paddingBottom: 6
+	},
+	weekdayHeader: {
+		flexDirection: "row",
+		paddingBottom: 4
+	},
+	weekdayLabel: {
+		flex: 1,
+		textAlign: "center"
+	},
+	container: { flex: 1 },
+	weekRow: {
+		flex: 1,
+		flexDirection: "row"
+	},
+	dayCell: {
+		flex: 1,
+		alignItems: "center",
+		paddingTop: 4,
+		gap: 2,
+		overflow: "hidden"
+	},
+	dayCellEvents: { alignItems: "stretch" },
+	dateBadge: {
+		justifyContent: "center",
+		alignItems: "center",
+		height: 24,
+		width: 24
+	},
+	dateBadgeEvents: {
+		alignSelf: "flex-end",
+		marginRight: 4
+	},
+	rangeBand: {
+		position: "absolute",
+		left: 0,
+		right: 0
+	},
+	monthEvent: { marginHorizontal: 4 },
+	moreLabel: {
+		marginTop: 2,
+		marginHorizontal: 4
+	}
+});
+//#endregion
+//#region src/components/MonthPager.tsx
+const isWeb$1 = Platform.OS === "web";
+const PAGE_WINDOW$1 = 60;
+const PAGE_VIEWABILITY = { itemVisiblePercentThreshold: 90 };
+function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe = false, swipeEnabled = true, showSixWeeks = false, activeDate, renderHeaderForMonthView, renderCustomDateForMonth }) {
+	const theme = useCalendarTheme();
+	const { width, height } = useWindowDimensions();
+	const listRef = useRef(null);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (!isWeb$1) return;
+		const root = containerRef.current;
+		if (!root) return;
+		const raf = requestAnimationFrame(() => {
+			for (const el of root.querySelectorAll("*")) {
+				if (el.scrollWidth <= el.clientWidth + 20 || el.clientWidth <= 100) continue;
+				const overflowX = getComputedStyle(el).overflowX;
+				if (overflowX === "auto" || overflowX === "scroll") {
+					el.style.overflowX = "hidden";
+					el.style.touchAction = "pan-y";
+				}
+			}
+		});
+		return () => cancelAnimationFrame(raf);
+	}, []);
+	const [pageHeight, setPageHeight] = useState(height);
+	const [containerWidth, setContainerWidth] = useState(width);
+	const [anchorDate] = useState(date);
+	const anchor = useMemo(() => startOfMonth(anchorDate), [anchorDate]);
+	const monthDates = useMemo(() => Array.from({ length: 121 }, (_, i) => addMonths(anchor, i - PAGE_WINDOW$1)), [anchor]);
+	const activeIndex = useCallback((target) => differenceInCalendarMonths(startOfMonth(target), anchor) + PAGE_WINDOW$1, [anchor])(date);
+	const viewedIndexRef = useRef(activeIndex);
+	const pendingScrollIndexRef = useRef(null);
+	const handleViewableItemsChanged = useCallback((info) => {
+		if (isWeb$1) return;
+		const settled = info.viewableItems.find((token) => token.isViewable);
+		if (settled?.index == null) return;
+		if (pendingScrollIndexRef.current != null) {
+			if (settled.index === pendingScrollIndexRef.current) {
+				pendingScrollIndexRef.current = null;
+				viewedIndexRef.current = settled.index;
+			}
+			return;
+		}
+		if (settled.index === viewedIndexRef.current) return;
+		viewedIndexRef.current = settled.index;
+		if (settled.item) onChangeDate(settled.item);
+	}, [onChangeDate]);
+	useEffect(() => {
+		if (activeIndex === viewedIndexRef.current) return;
+		viewedIndexRef.current = activeIndex;
+		pendingScrollIndexRef.current = activeIndex;
+		listRef.current?.scrollToIndex({
+			index: activeIndex,
+			animated: false
+		});
+	}, [activeIndex]);
+	useWebPagerKeys(swipeEnabled, useCallback((delta) => {
+		const target = monthDates[activeIndex + delta];
+		if (target) onChangeDate(target);
+	}, [
+		monthDates,
+		activeIndex,
+		onChangeDate
+	]));
+	const weekDays = useMemo(() => {
+		const days = getWeekDays(anchor, weekStartsOn);
+		return isRTL ? days.reverse() : days;
+	}, [
+		anchor,
+		weekStartsOn,
+		isRTL
+	]);
+	const snapToIndices = useMemo(() => monthDates.map((_, index) => index), [monthDates]);
+	const keyExtractorList = useCallback((item) => item.toISOString(), []);
+	const getFixedItemSize = useCallback(() => containerWidth, [containerWidth]);
+	const renderItem = useCallback(({ item }) => /* @__PURE__ */ jsx(View, {
+		style: {
+			width: containerWidth,
+			height: pageHeight
+		},
+		children: /* @__PURE__ */ jsx(MonthView, {
+			date: item,
+			events,
+			showTitle: false,
+			showWeekdays: false,
+			maxVisibleEventCount,
+			weekStartsOn,
+			locale,
+			sortedMonthView,
+			moreLabel,
+			showAdjacentMonths,
+			disableMonthEventCellPress,
+			isRTL,
+			showSixWeeks,
+			activeDate,
+			calendarCellStyle,
+			renderEvent,
+			keyExtractor,
+			onPressDay,
+			onLongPressDay,
+			onPressEvent,
+			onLongPressEvent,
+			onPressMore,
+			renderCustomDateForMonth
+		})
+	}), [
+		containerWidth,
+		pageHeight,
+		events,
+		maxVisibleEventCount,
+		weekStartsOn,
+		locale,
+		sortedMonthView,
+		moreLabel,
+		showAdjacentMonths,
+		disableMonthEventCellPress,
+		isRTL,
+		showSixWeeks,
+		activeDate,
+		calendarCellStyle,
+		renderEvent,
+		keyExtractor,
+		onPressDay,
+		onLongPressDay,
+		onPressEvent,
+		onLongPressEvent,
+		onPressMore,
+		renderCustomDateForMonth
+	]);
+	return /* @__PURE__ */ jsxs(View, {
+		ref: containerRef,
+		style: styles$2.container,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				style: [styles$2.monthTitle, { color: theme.colors.text }],
+				allowFontScaling: false,
+				children: format(date, "MMMM yyyy", locale ? { locale } : void 0)
+			}),
+			renderHeaderForMonthView ? renderHeaderForMonthView(weekDays) : /* @__PURE__ */ jsx(MonthWeekdayHeader, {
+				weekDays,
+				locale
+			}),
+			/* @__PURE__ */ jsx(View, {
+				style: styles$2.pager,
+				onLayout: (event) => {
+					setPageHeight(event.nativeEvent.layout.height);
+					setContainerWidth(event.nativeEvent.layout.width);
+				},
+				children: /* @__PURE__ */ jsx(LegendList, {
+					ref: listRef,
+					style: isWeb$1 ? [styles$2.pagerList, styles$2.webNoScroll] : styles$2.pagerList,
+					data: monthDates,
+					horizontal: true,
+					recycleItems: false,
+					keyExtractor: keyExtractorList,
+					getFixedItemSize,
+					...isWeb$1 ? null : {
+						scrollEnabled: swipeEnabled,
+						pagingEnabled: !freeSwipe,
+						snapToIndices: freeSwipe ? snapToIndices : void 0
+					},
+					initialScrollIndex: activeIndex,
+					showsHorizontalScrollIndicator: false,
+					viewabilityConfig: PAGE_VIEWABILITY,
+					onViewableItemsChanged: handleViewableItemsChanged,
+					renderItem
+				}, pageHeight)
+			})
+		]
+	});
+}
+const MonthPager = memo(MonthPagerInner);
+const MonthWeekdayHeader = ({ weekDays, locale }) => {
+	const theme = useCalendarTheme();
+	return /* @__PURE__ */ jsx(View, {
+		style: styles$2.weekdayHeader,
+		children: weekDays.map((day) => /* @__PURE__ */ jsx(Text, {
+			style: [
+				theme.text.weekday,
+				styles$2.weekdayLabel,
+				{ color: theme.colors.textMuted }
+			],
+			allowFontScaling: false,
+			children: format(day, "EEE", { locale })
+		}, day.toISOString()))
+	});
+};
+const styles$2 = StyleSheet.create({
+	container: { flex: 1 },
+	pager: { flex: 1 },
+	pagerList: { flex: 1 },
+	webNoScroll: { overflow: "hidden" },
+	monthTitle: {
+		fontSize: 17,
+		fontWeight: "700",
+		paddingTop: 10,
+		paddingHorizontal: 14,
+		paddingBottom: 6
+	},
+	weekdayHeader: {
+		flexDirection: "row",
+		paddingBottom: 4
+	},
+	weekdayLabel: {
+		flex: 1,
+		textAlign: "center"
+	}
+});
+//#endregion
+//#region src/components/DefaultMonthEvent.tsx
+/**
+* A lightweight event chip for the month grid and the date picker: the same
+* titled box as {@link DefaultEvent} but with no Reanimated dependency (it drops
+* the pinch-zoom time reveal, which only applies to the week/day grid). It's the
+* default renderer for `MonthList`, so the `/picker` entry point stays free of
+* Reanimated.
+*/
+function DefaultMonthEvent({ event, mode, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, cellStyle, onPress, onLongPress }) {
+	const theme = useCalendarTheme();
+	const isAllDayEvent = isAllDay ?? false;
+	const timeLabel = eventTimeLabel({
+		mode,
+		isAllDay: isAllDayEvent,
+		start: event.start,
+		end: event.end,
+		ampm,
+		showTime,
+		allDayLabel
+	});
+	const ellipsizeMode = titleEllipsizeMode(ellipsizeTitle);
+	const accessibilityLabel = eventAccessibilityLabel({
+		title: event.title,
+		isAllDay: isAllDayEvent,
+		start: event.start,
+		end: event.end,
+		ampm,
+		allDayLabel
+	});
+	return /* @__PURE__ */ jsxs(TouchableOpacity, {
+		style: [
+			styles$1.box,
+			{ backgroundColor: theme.colors.eventBackground },
+			event.disabled && styles$1.disabled,
+			cellStyle
+		],
+		onPress,
+		onLongPress,
+		activeOpacity: .7,
+		accessibilityRole: "button",
+		accessibilityLabel,
+		accessibilityState: { disabled: event.disabled ?? false },
+		children: [event.title ? /* @__PURE__ */ jsx(Text, {
+			style: [
+				theme.text.eventTitle,
+				styles$1.title,
+				{ color: theme.colors.eventText }
+			],
+			numberOfLines: titleNumberOfLines(mode, isAllDayEvent),
+			ellipsizeMode,
+			allowFontScaling: false,
+			children: event.title
+		}) : null, timeLabel ? /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(Text, {
+			style: [styles$1.time, { color: theme.colors.eventText }],
+			numberOfLines: 2,
+			ellipsizeMode,
+			allowFontScaling: false,
+			children: timeLabel
+		}) }) : null]
+	});
+}
+const styles$1 = StyleSheet.create({
+	box: {
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: "auto",
+		borderRadius: 6,
+		paddingVertical: 2,
+		paddingHorizontal: 4,
+		overflow: "hidden"
+	},
+	title: { flexShrink: 1 },
+	time: { fontSize: 11 },
+	disabled: { opacity: .5 }
+});
+//#endregion
+//#region src/components/MonthList.tsx
+const isWeb = Platform.OS === "web";
+const PAGE_WINDOW = 60;
+const VIEWABILITY = { itemVisiblePercentThreshold: 60 };
+const DEFAULT_MONTH_HEADER_HEIGHT = 44;
+const DEFAULT_WEEK_ROW_HEIGHT = 56;
+const DEFAULT_EVENT_WEEK_ROW_HEIGHT = 96;
+const LONG_PRESS_MS = 500;
+const AUTOSCROLL_EDGE_PX = 64;
+const AUTOSCROLL_STEP_PX = 14;
+const AUTOSCROLL_INTERVAL_MS = 16;
+const NO_EVENTS = [];
+const noop = () => {};
+const defaultKeyExtractor = (event) => `${event.start.toISOString()}|${event.end.toISOString()}|${event.title ?? ""}`;
+function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight: weekRowHeightProp, monthHeaderHeight = DEFAULT_MONTH_HEADER_HEIGHT, maxVisibleEventCount, locale, sortedMonthView, moreLabel, showAdjacentMonths = false, disableMonthEventCellPress, isRTL, activeDate, selectedDates, selectedRange, fillCellOnSelection, minDate, maxDate, isDateDisabled, calendarCellStyle, renderEvent = DefaultMonthEvent, keyExtractor = defaultKeyExtractor, onPressDay, onLongPressDay, onPressEvent = noop, onLongPressEvent, onPressMore, onSelectDrag, onChangeVisibleMonth, renderMonthHeader }) {
+	const theme = useCalendarTheme();
+	const listRef = useRef(null);
+	const weekRowHeight = weekRowHeightProp ?? (events.length > 0 ? DEFAULT_EVENT_WEEK_ROW_HEIGHT : DEFAULT_WEEK_ROW_HEIGHT);
+	const [firstViewableIndex, setFirstViewableIndex] = useState(0);
+	const [anchorDate] = useState(date);
+	const anchor = useMemo(() => startOfMonth(anchorDate), [anchorDate]);
+	const monthDates = useMemo(() => Array.from({ length: 121 }, (_, i) => addMonths(anchor, i - PAGE_WINDOW)), [anchor]);
+	const initialIndex = useMemo(() => differenceInCalendarMonths(startOfMonth(date), anchor) + PAGE_WINDOW, [date, anchor]);
+	const weekDays = useMemo(() => {
+		const days = getWeekDays(anchor, weekStartsOn);
+		return isRTL ? days.reverse() : days;
+	}, [
+		anchor,
+		weekStartsOn,
+		isRTL
+	]);
+	const selection = useMemo(() => ({
+		selectedDates,
+		selectedRange,
+		minDate,
+		maxDate,
+		isDateDisabled
+	}), [
+		selectedDates,
+		selectedRange,
+		minDate,
+		maxDate,
+		isDateDisabled
+	]);
+	const keyExtractorList = useCallback((item) => item.toISOString(), []);
+	const monthWeeks = useMemo(() => monthDates.map((month) => buildMonthWeeks(month, weekStartsOn, { isRTL })), [
+		monthDates,
+		weekStartsOn,
+		isRTL
+	]);
+	const blockHeightAt = useCallback((index) => monthHeaderHeight + monthWeeks[index].length * weekRowHeight, [
+		monthWeeks,
+		weekRowHeight,
+		monthHeaderHeight
+	]);
+	const getFixedItemSize = useCallback((_item, index) => blockHeightAt(index), [blockHeightAt]);
+	const offsets = useMemo(() => {
+		const out = [0];
+		for (let i = 0; i < monthWeeks.length; i++) out.push(out[i] + blockHeightAt(i));
+		return out;
+	}, [monthWeeks, blockHeightAt]);
+	const dragStartRef = useRef(null);
+	const dragMovedRef = useRef(false);
+	const pointerDownRef = useRef(false);
+	const scrollYRef = useRef(0);
+	const viewportRef = useRef({
+		width: 0,
+		height: 0
+	});
+	const lastPanRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const autoScrollRef = useRef(null);
+	const isSelectable = useCallback((day) => isDateSelectable(day, {
+		minDate,
+		maxDate,
+		isDateDisabled
+	}), [
+		minDate,
+		maxDate,
+		isDateDisabled
+	]);
+	const dayAtContent = useCallback((x, contentY) => {
+		const width = viewportRef.current.width;
+		if (width <= 0) return null;
+		const clampedY = Math.min(Math.max(contentY, 0), offsets[offsets.length - 1] - 1);
+		let index = 0;
+		while (index < monthWeeks.length - 1 && offsets[index + 1] <= clampedY) index++;
+		const localY = clampedY - offsets[index] - monthHeaderHeight;
+		if (localY < 0) return null;
+		const weeks = monthWeeks[index];
+		const row = Math.min(weeks.length - 1, Math.max(0, Math.floor(localY / weekRowHeight)));
+		const col = Math.min(6, Math.max(0, Math.floor(x / (width / 7))));
+		const day = weeks[row]?.[col];
+		if (!day) return null;
+		if (!showAdjacentMonths && !isSameMonth(day, monthDates[index])) return null;
+		return isSelectable(day) ? day : null;
+	}, [
+		offsets,
+		monthWeeks,
+		monthDates,
+		weekRowHeight,
+		monthHeaderHeight,
+		showAdjacentMonths,
+		isSelectable
+	]);
+	const extendTo = useCallback((day) => {
+		const start = dragStartRef.current;
+		if (!start || !day) return;
+		if (day.getTime() !== start.getTime()) dragMovedRef.current = true;
+		onSelectDrag?.(start, day);
+	}, [onSelectDrag]);
+	const stopAutoScroll = useCallback(() => {
+		if (autoScrollRef.current) {
+			clearInterval(autoScrollRef.current.id);
+			autoScrollRef.current = null;
+		}
+	}, []);
+	const startAutoScroll = useCallback((dir) => {
+		if (autoScrollRef.current?.dir === dir) return;
+		stopAutoScroll();
+		const max = Math.max(0, offsets[offsets.length - 1] - viewportRef.current.height);
+		autoScrollRef.current = {
+			id: setInterval(() => {
+				const next = Math.min(max, Math.max(0, scrollYRef.current + dir * AUTOSCROLL_STEP_PX));
+				scrollYRef.current = next;
+				listRef.current?.scrollToOffset({
+					offset: next,
+					animated: false
+				});
+				extendTo(dayAtContent(lastPanRef.current.x, next + lastPanRef.current.y));
+			}, AUTOSCROLL_INTERVAL_MS),
+			dir
+		};
+	}, [
+		offsets,
+		stopAutoScroll,
+		extendTo,
+		dayAtContent
+	]);
+	const dragGesture = useMemo(() => {
+		if (!onSelectDrag) return void 0;
+		return Gesture.Pan().activateAfterLongPress(LONG_PRESS_MS).runOnJS(true).onStart((event) => {
+			lastPanRef.current = {
+				x: event.x,
+				y: event.y
+			};
+			dragMovedRef.current = false;
+			dragStartRef.current = dayAtContent(event.x, scrollYRef.current + event.y);
+		}).onUpdate((event) => {
+			lastPanRef.current = {
+				x: event.x,
+				y: event.y
+			};
+			const height = viewportRef.current.height;
+			if (event.y < AUTOSCROLL_EDGE_PX) startAutoScroll(-1);
+			else if (height > 0 && event.y > height - AUTOSCROLL_EDGE_PX) startAutoScroll(1);
+			else stopAutoScroll();
+			extendTo(dayAtContent(event.x, scrollYRef.current + event.y));
+		}).onFinalize(() => {
+			stopAutoScroll();
+			dragStartRef.current = null;
+		});
+	}, [
+		onSelectDrag,
+		dayAtContent,
+		extendTo,
+		startAutoScroll,
+		stopAutoScroll
+	]);
+	const onDayPointerDown = useCallback((day) => {
+		pointerDownRef.current = true;
+		dragMovedRef.current = false;
+		dragStartRef.current = isSelectable(day) ? day : null;
+	}, [isSelectable]);
+	const onDayPointerEnter = useCallback((day) => {
+		if (pointerDownRef.current && dragStartRef.current && isSelectable(day)) extendTo(day);
+	}, [extendTo, isSelectable]);
+	useEffect(() => {
+		if (!isWeb || !onSelectDrag) return;
+		const end = () => {
+			pointerDownRef.current = false;
+			dragStartRef.current = null;
+		};
+		const target = globalThis;
+		target.addEventListener?.("pointerup", end);
+		return () => target.removeEventListener?.("pointerup", end);
+	}, [onSelectDrag]);
+	const handlePressDay = useCallback((day) => {
+		if (dragMovedRef.current) {
+			dragMovedRef.current = false;
+			return;
+		}
+		onPressDay?.(day);
+	}, [onPressDay]);
+	const handleScroll = useCallback((event) => {
+		scrollYRef.current = event.nativeEvent.contentOffset.y;
+	}, []);
+	const handleViewableItemsChanged = useCallback((info) => {
+		const settled = info.viewableItems.find((token) => token.isViewable);
+		if (settled?.item && onChangeVisibleMonth) onChangeVisibleMonth(settled.item);
+		const topIndex = settled?.index;
+		if (isWeb && typeof topIndex === "number") setFirstViewableIndex((prev) => prev === topIndex ? prev : topIndex);
+	}, [onChangeVisibleMonth]);
+	const dragEnabled = onSelectDrag != null;
+	const renderItem = useCallback(({ item, index }) => /* @__PURE__ */ jsxs(MonthBlock, {
+		height: blockHeightAt(index),
+		inert: isWeb && events.length > 0 && index < firstViewableIndex,
+		children: [/* @__PURE__ */ jsx(View, {
+			style: [styles.monthHeader, { height: monthHeaderHeight }],
+			children: renderMonthHeader ? renderMonthHeader(item) : /* @__PURE__ */ jsx(Text, {
+				style: [styles.monthTitle, { color: theme.colors.text }],
+				children: format(item, "LLLL yyyy", { locale })
+			})
+		}), /* @__PURE__ */ jsx(View, {
+			style: styles.grid,
+			children: /* @__PURE__ */ jsx(MonthView, {
+				date: item,
+				events,
+				showTitle: false,
+				showWeekdays: false,
+				maxVisibleEventCount,
+				weekStartsOn,
+				locale,
+				sortedMonthView,
+				moreLabel,
+				showAdjacentMonths,
+				disableMonthEventCellPress,
+				isRTL,
+				activeDate,
+				fillCellOnSelection,
+				calendarCellStyle,
+				renderEvent,
+				keyExtractor,
+				onPressDay: dragEnabled ? handlePressDay : onPressDay,
+				onLongPressDay,
+				onPressEvent,
+				onLongPressEvent,
+				onPressMore,
+				onDayPointerDown: isWeb && dragEnabled ? onDayPointerDown : void 0,
+				onDayPointerEnter: isWeb && dragEnabled ? onDayPointerEnter : void 0
+			})
+		})]
+	}), [
+		blockHeightAt,
+		firstViewableIndex,
+		monthHeaderHeight,
+		renderMonthHeader,
+		theme,
+		locale,
+		events,
+		maxVisibleEventCount,
+		weekStartsOn,
+		sortedMonthView,
+		moreLabel,
+		showAdjacentMonths,
+		disableMonthEventCellPress,
+		isRTL,
+		activeDate,
+		fillCellOnSelection,
+		calendarCellStyle,
+		renderEvent,
+		keyExtractor,
+		dragEnabled,
+		handlePressDay,
+		onPressDay,
+		onLongPressDay,
+		onPressEvent,
+		onLongPressEvent,
+		onPressMore,
+		onDayPointerDown,
+		onDayPointerEnter
+	]);
+	const list = /* @__PURE__ */ jsx(LegendList, {
+		ref: listRef,
+		style: styles.list,
+		data: monthDates,
+		recycleItems: false,
+		extraData: firstViewableIndex,
+		keyExtractor: keyExtractorList,
+		getFixedItemSize,
+		initialScrollIndex: initialIndex,
+		showsVerticalScrollIndicator: false,
+		scrollEventThrottle: 16,
+		onScroll: handleScroll,
+		viewabilityConfig: VIEWABILITY,
+		onViewableItemsChanged: handleViewableItemsChanged,
+		onLayout: (event) => {
+			viewportRef.current = {
+				width: event.nativeEvent.layout.width,
+				height: event.nativeEvent.layout.height
+			};
+		},
+		renderItem
+	});
+	return /* @__PURE__ */ jsx(CalendarSelectionProvider, {
+		value: selection,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: styles.container,
+			children: [/* @__PURE__ */ jsx(View, {
+				style: [styles.weekdayHeader, { borderBottomColor: theme.colors.gridLine }],
+				children: weekDays.map((day) => /* @__PURE__ */ jsx(Text, {
+					style: [styles.weekdayLabel, { color: theme.colors.textMuted }],
+					allowFontScaling: false,
+					children: format(day, "EEE", { locale })
+				}, day.toISOString()))
+			}), dragGesture && !isWeb ? /* @__PURE__ */ jsx(GestureDetector, {
+				gesture: dragGesture,
+				children: list
+			}) : list]
+		})
+	});
+}
+function MonthBlock({ height, inert, children }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!isWeb) return;
+		const node = ref.current;
+		if (node) node.inert = inert;
+	}, [inert]);
+	return /* @__PURE__ */ jsx(View, {
+		ref,
+		style: { height },
+		children
+	});
+}
+const MonthList = memo(MonthListInner);
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+	list: { flex: 1 },
+	monthHeader: { justifyContent: "center" },
+	monthTitle: {
+		paddingHorizontal: 8,
+		fontSize: 17,
+		fontWeight: "700"
+	},
+	grid: { flex: 1 },
+	weekdayHeader: {
+		flexDirection: "row",
+		paddingVertical: 8,
+		borderBottomWidth: StyleSheet.hairlineWidth
+	},
+	weekdayLabel: {
+		flex: 1,
+		textAlign: "center",
+		fontSize: 12,
+		fontWeight: "600"
+	}
+});
+//#endregion
+export { useWebPagerKeys as a, defaultTheme as c, MonthView as i, mergeTheme as l, DefaultMonthEvent as n, CalendarThemeProvider as o, MonthPager as r, darkTheme as s, MonthList as t, useCalendarTheme as u };