@super-calendar/native 2.3.2 → 2.4.0

package/dist/{MonthList-CFXm7BK_.js → MonthList-Aczb2RSY.js}

@@ -104,6 +104,40 @@ const CalendarThemeProvider = CalendarThemeContext.Provider;
 /** Read the active {@link CalendarTheme} from context. Useful inside custom renderers. */
 const useCalendarTheme = () => (0, react.useContext)(CalendarThemeContext);
 //#endregion
+//#region src/utils/slots.ts
+/**
+* Build a slot resolver for one render. `slot(name, defaults)` returns the
+* props to spread on that element: the resolved `style` array and, when the
+* consumer supplied one, a `className` for the Tailwind runtime to pick up.
+*/
+function createSlots({ classNames, styles }) {
+	return (name, defaults) => {
+		const slotClass = classNames?.[name];
+		return {
+			style: [
+				defaults?.base,
+				slotClass ? void 0 : defaults?.themed,
+				styles?.[name]
+			],
+			...slotClass ? { className: slotClass } : null
+		};
+	};
+}
+const SlotStylesContext = (0, react.createContext)({});
+/** Provide a component's `classNames`/`styles` maps to its internal slots. */
+function SlotStylesProvider({ classNames, styles, children }) {
+	const value = (0, react.useMemo)(() => ({
+		classNames,
+		styles
+	}), [classNames, styles]);
+	return (0, react.createElement)(SlotStylesContext.Provider, { value }, children);
+}
+/** Resolve slots against the nearest {@link SlotStylesProvider}'s maps. */
+function useSlots() {
+	const maps = (0, react.useContext)(SlotStylesContext);
+	return (0, react.useMemo)(() => createSlots(maps), [maps]);
+}
+//#endregion
 //#region src/utils/useWebPagerKeys.ts
 const getDocument = () => globalThis.document;
 const isTextEntry = (element) => {
@@ -168,8 +202,12 @@ 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, weekdayFormat = "short", 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, eventAccessibilityLabel, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, renderCustomDateForMonth, onDayPointerDown, onDayPointerEnter }) {
+function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat = "short", 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, eventAccessibilityLabel, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, renderCustomDateForMonth, onDayPointerDown, onDayPointerEnter, classNames, styles: styleOverrides }) {
 	const theme = useCalendarTheme();
+	const slot = createSlots({
+		classNames,
+		styles: styleOverrides
+	});
 	const selection = (0, _super_calendar_core.useCalendarSelection)();
 	const selectedDates = selectedDatesProp ?? selection.selectedDates;
 	const selectedRange = selectedRangeProp ?? selection.selectedRange;
@@ -226,15 +264,14 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, week
 	const showGrid = events.length > 0;
 	const renderDay = (day) => {
 		const isCurrentMonth = (0, date_fns.isSameMonth)(day, date);
-		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
-			styles$3.dayCell,
-			showGrid && {
+		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { ...slot("day", {
+			base: styles$3.dayCell,
+			themed: [showGrid && {
 				borderTopWidth: react_native.StyleSheet.hairlineWidth,
 				borderRightWidth: react_native.StyleSheet.hairlineWidth,
 				borderColor: theme.colors.gridLine
-			},
-			theme.containers.dayCell
-		] }, day.toISOString());
+			}, theme.containers.dayCell]
+		}) }, day.toISOString());
 		const dayEvents = eventsByDay.get((0, date_fns.startOfDay)(day).toISOString()) ?? [];
 		const isToday = (0, _super_calendar_core.getIsToday)(day);
 		const isHighlighted = activeDate ? (0, _super_calendar_core.isSameCalendarDay)(day, activeDate) : isToday;
@@ -261,19 +298,21 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, week
 		const handleLongPressDay = isDisabled || !onLongPressDay ? void 0 : () => onLongPressDay(day);
 		const eventCount = dayEvents.length;
 		const accessibilityLabel = `${(0, date_fns.format)(day, "EEEE, d LLLL yyyy", { locale })}${isToday ? ", today" : ""}${isSelected ? ", selected" : ""}${isDisabled ? ", unavailable" : ""}, ${eventCount} ${eventCount === 1 ? "event" : "events"}`;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.TouchableOpacity, {
-			style: [
-				styles$3.dayCell,
-				showGrid && styles$3.dayCellEvents,
+		const daySlot = slot("day", {
+			base: [styles$3.dayCell, showGrid && styles$3.dayCellEvents],
+			themed: [
 				showGrid && {
 					borderTopWidth: react_native.StyleSheet.hairlineWidth,
 					borderRightWidth: react_native.StyleSheet.hairlineWidth,
 					borderColor: theme.colors.gridLine
 				},
 				(0, _super_calendar_core.isWeekend)(day) && { backgroundColor: theme.colors.weekendBackground },
-				calendarCellStyle?.(day),
 				theme.containers.dayCell
-			],
+			]
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.TouchableOpacity, {
+			...daySlot,
+			style: [daySlot.style, calendarCellStyle?.(day)],
 			activeOpacity: showGrid ? .2 : 1,
 			...showGrid ? null : {
 				onPressIn: () => setPressedKey(dayKey),
@@ -298,48 +337,54 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, week
 			children: [
 				hasBand ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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
-						}
-					]
+					...slot("rangeBand", {
+						base: [
+							styles$3.rangeBand,
+							{ pointerEvents: "none" },
+							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
+							}
+						],
+						themed: { backgroundColor: theme.colors.rangeBackground }
+					})
 				}) : null,
 				renderCustomDateForMonth ? renderCustomDateForMonth(day) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.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 },
-						theme.containers.dayBadge
-					],
+					...slot("dayBadge", {
+						base: [
+							styles$3.dateBadge,
+							showGrid && styles$3.dateBadgeEvents,
+							!showGrid && pressedKey === dayKey && { opacity: .2 }
+						],
+						themed: [
+							isFilledBadge && {
+								backgroundColor: isHighlighted ? theme.colors.todayBackground : theme.colors.selectedBackground,
+								borderRadius: theme.todayBadgeRadius
+							},
+							isHovered && !isFilledBadge && {
+								backgroundColor: theme.colors.hoverBackground,
+								borderRadius: theme.todayBadgeRadius
+							},
+							theme.containers.dayBadge
+						]
+					}),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-						style: [theme.text.dateCell, { color: dateColor }],
+						...slot("dayBadgeText", { themed: [theme.text.dateCell, { color: dateColor }] }),
 						allowFontScaling: false,
 						children: (0, date_fns.format)(day, "d")
 					})
@@ -355,11 +400,10 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, week
 					})
 				}, keyExtractor(event, index))),
 				hiddenCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-					style: [
-						theme.text.more,
-						styles$3.moreLabel,
-						{ color: theme.colors.textMuted }
-					],
+					...slot("more", {
+						base: styles$3.moreLabel,
+						themed: [theme.text.more, { color: theme.colors.textMuted }]
+					}),
 					onPress: onPressMore ? () => onPressMore(dayEvents, day) : void 0,
 					accessibilityRole: "button",
 					accessibilityLabel: `Show ${hiddenCount} more events`,
@@ -377,33 +421,37 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, week
 		style: styles$3.root,
 		children: [
 			showTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-				style: [
-					styles$3.title,
-					theme.text.monthTitle,
-					{ color: theme.colors.text }
-				],
+				...slot("title", {
+					base: styles$3.title,
+					themed: [theme.text.monthTitle, { color: theme.colors.text }]
+				}),
 				allowFontScaling: false,
 				children: (0, date_fns.format)(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}) : null,
 			showWeekdays ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: [styles$3.weekdayHeader, theme.containers.weekdayHeader],
+				...slot("weekdays", {
+					base: styles$3.weekdayHeader,
+					themed: theme.containers.weekdayHeader
+				}),
 				children: weekdayLabels.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-					style: [
-						theme.text.weekday,
-						styles$3.weekdayLabel,
-						{ color: theme.colors.textMuted }
-					],
+					...slot("weekday", {
+						base: styles$3.weekdayLabel,
+						themed: [theme.text.weekday, { color: theme.colors.textMuted }]
+					}),
 					allowFontScaling: false,
 					children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), { locale })
 				}, day.toISOString()))
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: styles$3.container,
+				...slot("grid", { base: styles$3.container }),
 				onLayout: handleLayout,
-				children: weeks.map((week) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-					style: [styles$3.weekRow, theme.containers.weekRow],
-					children: week.map((day) => renderDay(day))
-				}, week[0].toISOString()))
+				children: weeks.map((week) => /* @__PURE__ */ (0, react.createElement)(react_native.View, {
+					...slot("week", {
+						base: styles$3.weekRow,
+						themed: theme.containers.weekRow
+					}),
+					key: week[0].toISOString()
+				}, week.map((day) => renderDay(day))))
 			})
 		]
 	});
@@ -479,8 +527,12 @@ const styles$3 = react_native.StyleSheet.create({
 const isWeb$1 = react_native.Platform.OS === "web";
 const PAGE_WINDOW$1 = 60;
 const PAGE_VIEWABILITY = { itemVisiblePercentThreshold: 90 };
-function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat = "short", locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe = false, swipeEnabled = true, showSixWeeks = false, activeDate, renderHeaderForMonthView, renderCustomDateForMonth }) {
+function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat = "short", locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe = false, swipeEnabled = true, showSixWeeks = false, activeDate, renderHeaderForMonthView, renderCustomDateForMonth, classNames, styles: styleOverrides }) {
 	const theme = useCalendarTheme();
+	const slot = (0, react.useMemo)(() => createSlots({
+		classNames,
+		styles: styleOverrides
+	}), [classNames, styleOverrides]);
 	const { width, height } = (0, react_native.useWindowDimensions)();
 	const listRef = (0, react.useRef)(null);
 	const containerRef = (0, react.useRef)(null);
@@ -548,6 +600,10 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, wee
 		weekStartsOn,
 		isRTL
 	]);
+	const listExtraData = (0, react.useMemo)(() => ({
+		events,
+		activeDate
+	}), [events, activeDate]);
 	const snapToIndices = (0, react.useMemo)(() => monthDates.map((_, index) => index), [monthDates]);
 	const keyExtractorList = (0, react.useCallback)((item) => item.toISOString(), []);
 	const getFixedItemSize = (0, react.useCallback)(() => containerWidth, [containerWidth]);
@@ -579,7 +635,9 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, wee
 			onPressEvent,
 			onLongPressEvent,
 			onPressMore,
-			renderCustomDateForMonth
+			renderCustomDateForMonth,
+			classNames,
+			styles: styleOverrides
 		})
 	}), [
 		containerWidth,
@@ -603,25 +661,27 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, wee
 		onPressEvent,
 		onLongPressEvent,
 		onPressMore,
-		renderCustomDateForMonth
+		renderCustomDateForMonth,
+		classNames,
+		styleOverrides
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		ref: containerRef,
 		style: [styles$2.container, theme.containers.monthContainer],
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-				style: [
-					styles$2.monthTitle,
-					theme.text.monthTitle,
-					{ color: theme.colors.text }
-				],
+				...slot("title", {
+					base: styles$2.monthTitle,
+					themed: [theme.text.monthTitle, { color: theme.colors.text }]
+				}),
 				allowFontScaling: false,
 				children: (0, date_fns.format)(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}),
 			renderHeaderForMonthView ? renderHeaderForMonthView(weekDays) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthWeekdayHeader, {
 				weekDays,
 				weekdayFormat,
-				locale
+				locale,
+				slot
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 				style: styles$2.pager,
@@ -633,6 +693,7 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, wee
 					ref: listRef,
 					style: isWeb$1 ? [styles$2.pagerList, styles$2.webNoScroll] : styles$2.pagerList,
 					data: monthDates,
+					extraData: listExtraData,
 					horizontal: true,
 					recycleItems: false,
 					keyExtractor: keyExtractorList,
@@ -671,16 +732,18 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, wee
 * ```
 */
 const MonthPager = (0, react.memo)(MonthPagerInner);
-const MonthWeekdayHeader = ({ weekDays, weekdayFormat = "short", locale }) => {
+const MonthWeekdayHeader = ({ weekDays, weekdayFormat = "short", locale, slot }) => {
 	const theme = useCalendarTheme();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-		style: [styles$2.weekdayHeader, theme.containers.weekdayHeader],
+		...slot("weekdays", {
+			base: styles$2.weekdayHeader,
+			themed: theme.containers.weekdayHeader
+		}),
 		children: weekDays.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-			style: [
-				theme.text.weekday,
-				styles$2.weekdayLabel,
-				{ color: theme.colors.textMuted }
-			],
+			...slot("weekday", {
+				base: styles$2.weekdayLabel,
+				themed: [theme.text.weekday, { color: theme.colors.textMuted }]
+			}),
 			allowFontScaling: false,
 			children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), { locale })
 		}, day.toISOString()))
@@ -796,11 +859,24 @@ 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, weekdayFormat = "short", 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, eventAccessibilityLabel, keyExtractor = defaultKeyExtractor, onPressDay, onLongPressDay, onPressEvent = noop, onLongPressEvent, onPressMore, onSelectDrag, onChangeVisibleMonth, renderMonthHeader }) {
+function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekdayFormat = "short", 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, eventAccessibilityLabel, keyExtractor = defaultKeyExtractor, onPressDay, onLongPressDay, onPressEvent = noop, onLongPressEvent, onPressMore, onSelectDrag, onChangeVisibleMonth, renderMonthHeader, classNames, styles: styleOverrides }) {
 	const theme = useCalendarTheme();
+	const slot = (0, react.useMemo)(() => createSlots({
+		classNames,
+		styles: styleOverrides
+	}), [classNames, styleOverrides]);
 	const listRef = (0, react.useRef)(null);
 	const weekRowHeight = weekRowHeightProp ?? (events.length > 0 ? DEFAULT_EVENT_WEEK_ROW_HEIGHT : DEFAULT_WEEK_ROW_HEIGHT);
 	const [firstViewableIndex, setFirstViewableIndex] = (0, react.useState)(0);
+	const listExtraData = (0, react.useMemo)(() => ({
+		events,
+		activeDate,
+		firstViewableIndex
+	}), [
+		events,
+		activeDate,
+		firstViewableIndex
+	]);
 	const [anchorDate] = (0, react.useState)(date);
 	const anchor = (0, react.useMemo)(() => (0, date_fns.startOfMonth)(anchorDate), [anchorDate]);
 	const monthDates = (0, react.useMemo)(() => Array.from({ length: 121 }, (_, i) => (0, date_fns.addMonths)(anchor, i - PAGE_WINDOW)), [anchor]);
@@ -905,16 +981,17 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekdayFormat
 		if (autoScrollRef.current?.dir === dir) return;
 		stopAutoScroll();
 		const max = Math.max(0, offsets[offsets.length - 1] - viewportRef.current.height);
+		const 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);
 		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),
+			id,
 			dir
 		};
 	}, [
@@ -994,7 +1071,10 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekdayFormat
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 			style: [styles.monthHeader, { height: monthHeaderHeight }],
 			children: renderMonthHeader ? renderMonthHeader(item) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-				style: [styles.monthTitle, { color: theme.colors.text }],
+				...slot("title", {
+					base: styles.monthTitle,
+					themed: [styles.monthTitleText, { color: theme.colors.text }]
+				}),
 				children: (0, date_fns.format)(item, "LLLL yyyy", { locale })
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
@@ -1024,7 +1104,9 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekdayFormat
 				onLongPressEvent,
 				onPressMore,
 				onDayPointerDown: isWeb && dragEnabled ? onDayPointerDown : void 0,
-				onDayPointerEnter: isWeb && dragEnabled ? onDayPointerEnter : void 0
+				onDayPointerEnter: isWeb && dragEnabled ? onDayPointerEnter : void 0,
+				classNames,
+				styles: styleOverrides
 			})
 		})]
 	}), [
@@ -1055,14 +1137,17 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekdayFormat
 		onLongPressEvent,
 		onPressMore,
 		onDayPointerDown,
-		onDayPointerEnter
+		onDayPointerEnter,
+		slot,
+		classNames,
+		styleOverrides
 	]);
 	const list = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react_native.LegendList, {
 		ref: listRef,
 		style: styles.list,
 		data: monthDates,
 		recycleItems: false,
-		extraData: firstViewableIndex,
+		extraData: listExtraData,
 		keyExtractor: keyExtractorList,
 		getFixedItemSize,
 		initialScrollIndex: initialIndex,
@@ -1084,9 +1169,15 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekdayFormat
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 			style: styles.container,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: [styles.weekdayHeader, { borderBottomColor: theme.colors.gridLine }],
+				...slot("weekdays", {
+					base: styles.weekdayHeader,
+					themed: { borderBottomColor: theme.colors.gridLine }
+				}),
 				children: weekDays.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-					style: [styles.weekdayLabel, { color: theme.colors.textMuted }],
+					...slot("weekday", {
+						base: styles.weekdayLabel,
+						themed: [styles.weekdayLabelText, { color: theme.colors.textMuted }]
+					}),
 					allowFontScaling: false,
 					children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), { locale })
 				}, day.toISOString()))
@@ -1133,8 +1224,8 @@ const styles = react_native.StyleSheet.create({
 	container: { flex: 1 },
 	list: { flex: 1 },
 	monthHeader: { justifyContent: "center" },
-	monthTitle: {
-		paddingHorizontal: 8,
+	monthTitle: { paddingHorizontal: 8 },
+	monthTitleText: {
 		fontSize: 17,
 		fontWeight: "700"
 	},
@@ -1146,7 +1237,9 @@ const styles = react_native.StyleSheet.create({
 	},
 	weekdayLabel: {
 		flex: 1,
-		textAlign: "center",
+		textAlign: "center"
+	},
+	weekdayLabelText: {
 		fontSize: 12,
 		fontWeight: "600"
 	}
@@ -1182,6 +1275,18 @@ Object.defineProperty(exports, "MonthView", {
 		return MonthView;
 	}
 });
+Object.defineProperty(exports, "SlotStylesProvider", {
+	enumerable: true,
+	get: function() {
+		return SlotStylesProvider;
+	}
+});
+Object.defineProperty(exports, "createSlots", {
+	enumerable: true,
+	get: function() {
+		return createSlots;
+	}
+});
 Object.defineProperty(exports, "darkTheme", {
 	enumerable: true,
 	get: function() {
@@ -1206,6 +1311,12 @@ Object.defineProperty(exports, "useCalendarTheme", {
 		return useCalendarTheme;
 	}
 });
+Object.defineProperty(exports, "useSlots", {
+	enumerable: true,
+	get: function() {
+		return useSlots;
+	}
+});
 Object.defineProperty(exports, "useWebPagerKeys", {
 	enumerable: true,
 	get: function() {