@super-calendar/native 2.3.1 → 2.4.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { a as withEventAccessibilityLabel, c as darkTheme, d as useCalendarTheme, i as MonthView, l as defaultTheme, n as DefaultMonthEvent, o as useWebPagerKeys, r as MonthPager, s as CalendarThemeProvider, t as MonthList, u as mergeTheme } from "./MonthList-BidXJMfm.mjs";
-import { addDays, differenceInCalendarDays, endOfDay, endOfMonth, endOfWeek, format, getHours, getISOWeek, getMinutes, isSameDay, startOfDay, startOfMonth, startOfWeek } from "date-fns";
+import { a as withEventAccessibilityLabel, c as createSlots, d as darkTheme, f as defaultTheme, i as MonthView, l as useSlots, m as useCalendarTheme, n as DefaultMonthEvent, o as useWebPagerKeys, p as mergeTheme, r as MonthPager, s as SlotStylesProvider, t as MonthList, u as CalendarThemeProvider } from "./MonthList-zPLklHAY.mjs";
+import { addDays, addMonths, addWeeks, differenceInCalendarDays, endOfDay, endOfMonth, endOfWeek, format, getHours, getISOWeek, getMinutes, isSameDay, startOfDay, startOfMonth, startOfWeek } from "date-fns";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import Animated, { runOnJS, scrollTo, useAnimatedReaction, useAnimatedRef, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue } from "react-native-reanimated";
-import { buildMonthGrid, buildMonthWeeks, cellRangeFromDrag, closedHourBands, daySelectionState, eventAccessibilityLabel, eventChipLayout, eventTimeLabel, eventsInTimeZone, expandRecurringEvents, formatHour, getIsToday, getIsToday as getIsToday$1, getViewDays, getViewDays as getViewDays$1, getWeekDays, isAllDayEvent, isAllDayEvent as isAllDayEvent$1, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isSameCalendarDay as isSameCalendarDay$1, isWeekend, isWeekend as isWeekend$1, isWithinDateRange, layoutDayEvents, layoutDayEvents as layoutDayEvents$1, minutesIntoDay, nextDateRange, resolveDraggedBounds, snapDeltaMinutes, titleEllipsizeMode, titleNumberOfLines, toZonedTime, useDateRange, useMonthGrid, viewDayCount, weekdayFormatToken, weekdayFormatToken as weekdayFormatToken$1 } from "@super-calendar/core";
+import Animated, { runOnJS, scrollTo, useAnimatedReaction, useAnimatedRef, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useReducedMotion, useSharedValue } from "react-native-reanimated";
+import { buildMonthGrid, buildMonthWeeks, cellRangeFromDrag, closedHourBands, daySelectionState, eventAccessibilityLabel, eventChipLayout, eventTimeLabel, eventsInTimeZone, eventsInTimeZone as eventsInTimeZone$1, expandRecurringEvents, expandRecurringEvents as expandRecurringEvents$1, formatHour, getIsToday, getIsToday as getIsToday$1, getViewDays, getViewDays as getViewDays$1, getWeekDays, isAllDayEvent, isAllDayEvent as isAllDayEvent$1, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isSameCalendarDay as isSameCalendarDay$1, isWeekend, isWeekend as isWeekend$1, isWithinDateRange, layoutDayEvents, layoutDayEvents as layoutDayEvents$1, minutesIntoDay, nextDateRange, parseICalendar, resolveDraggedBounds, snapDeltaMinutes, titleEllipsizeMode, titleNumberOfLines, toICalendar, toZonedTime, useDateRange, useMonthGrid, viewDayCount, weekdayFormatToken, weekdayFormatToken as weekdayFormatToken$1 } from "@super-calendar/core";
 import { LegendList } from "@legendapp/list/react-native";
 import { Platform, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from "react-native";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 //#region src/components/Agenda.tsx
 /**
@@ -13,8 +13,12 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
 * start, grouped under a date header per day. The consumer controls which
 * events (and therefore which date range) are shown.
 */
-function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLongPressEvent, onPressDay, activeDate, itemSeparatorComponent }) {
+function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLongPressEvent, onPressDay, activeDate, itemSeparatorComponent, classNames, styles: styleOverrides }) {
 	const theme = useCalendarTheme();
+	const slot = useMemo(() => createSlots({
+		classNames,
+		styles: styleOverrides
+	}), [classNames, styleOverrides]);
 	const RenderEventComponent = renderEvent;
 	const rows = useMemo(() => {
 		const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
@@ -43,14 +47,20 @@ function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLon
 		if (item.kind === "header") {
 			const isHighlighted = activeDate ? isSameDay(item.date, activeDate) : getIsToday$1(item.date);
 			return /* @__PURE__ */ jsx(Text, {
-				style: [styles$4.header, { color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted }],
+				...slot("dayHeader", {
+					base: styles$4.header,
+					themed: [styles$4.headerText, { color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted }]
+				}),
 				onPress: onPressDay ? () => onPressDay(item.date) : void 0,
 				accessibilityRole: onPressDay ? "button" : "header",
 				children: format(item.date, "EEEE, d LLLL", { locale })
 			});
 		}
 		return /* @__PURE__ */ jsx(View, {
-			style: [styles$4.eventRow, theme.containers.agendaRow],
+			...slot("eventRow", {
+				base: styles$4.eventRow,
+				themed: theme.containers.agendaRow
+			}),
 			children: /* @__PURE__ */ jsx(RenderEventComponent, {
 				event: item.event,
 				mode: "schedule",
@@ -66,10 +76,14 @@ function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLon
 		onPressDay,
 		onPressEvent,
 		onLongPressEvent,
-		RenderEventComponent
+		RenderEventComponent,
+		slot
 	]);
 	if (rows.length === 0) return /* @__PURE__ */ jsx(Text, {
-		style: [styles$4.empty, { color: theme.colors.textMuted }],
+		...slot("empty", {
+			base: styles$4.empty,
+			themed: [styles$4.emptyText, { color: theme.colors.textMuted }]
+		}),
 		children: "No events"
 	});
 	return /* @__PURE__ */ jsx(LegendList, {
@@ -84,21 +98,23 @@ function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLon
 const styles$4 = StyleSheet.create({
 	list: { flex: 1 },
 	header: {
-		fontSize: 13,
-		fontWeight: "600",
 		paddingTop: 12,
 		paddingBottom: 4,
 		paddingHorizontal: 12
 	},
+	headerText: {
+		fontSize: 13,
+		fontWeight: "600"
+	},
 	eventRow: {
 		paddingHorizontal: 12,
 		paddingVertical: 2
 	},
 	empty: {
-		fontSize: 14,
 		paddingVertical: 16,
 		paddingHorizontal: 12
-	}
+	},
+	emptyText: { fontSize: 14 }
 });
 //#endregion
 //#region src/components/DefaultEvent.tsx
@@ -114,7 +130,7 @@ const numericStyle = (value, fallback) => typeof value === "number" ? value : fa
 * only shows once a full line is free beneath the title. Pass your own
 * `renderEvent` to `<Calendar>` to replace it entirely.
 */
-function DefaultEvent({ event, mode, boxHeight, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, accessibilityLabel: accessibilityLabelProp, cellStyle, onPress, onLongPress }) {
+function DefaultEvent({ event, mode, boxHeight, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, accessibilityLabel: accessibilityLabelProp, accessibilityActions, onAccessibilityAction, cellStyle, onPress, onLongPress }) {
 	const theme = useCalendarTheme();
 	const isAllDayEvent = isAllDay ?? false;
 	const timeLabel = eventTimeLabel({
@@ -176,6 +192,8 @@ function DefaultEvent({ event, mode, boxHeight, isAllDay, ampm = false, showTime
 		accessibilityRole: "button",
 		accessibilityLabel,
 		accessibilityState: { disabled: event.disabled ?? false },
+		accessibilityActions,
+		onAccessibilityAction,
 		children: /* @__PURE__ */ jsxs(Animated.View, {
 			testID: "event-chip-content",
 			style: [styles$3.content, contentStyle],
@@ -298,6 +316,7 @@ function useWebGridZoom(enabled, target, cellHeight, committedCellHeight, minHei
 */
 function AllDayLane({ days, events, mode, hourColumnWidth, dayWidth, renderEvent, keyExtractor, onPressEvent, onLongPressEvent }) {
 	const theme = useCalendarTheme();
+	const slot = useSlots();
 	const RenderEventComponent = renderEvent;
 	const allDay = events.filter(isAllDayEvent$1);
 	const perDay = days.map((day) => {
@@ -307,26 +326,27 @@ function AllDayLane({ days, events, mode, hourColumnWidth, dayWidth, renderEvent
 	});
 	if (perDay.every((list) => list.length === 0)) return null;
 	return /* @__PURE__ */ jsxs(View, {
-		style: [
-			styles$2.lane,
-			{ borderBottomColor: theme.colors.gridLine },
-			theme.containers.allDayLane
-		],
+		...slot("allDayLane", {
+			base: styles$2.lane,
+			themed: [{ borderBottomColor: theme.colors.gridLine }, theme.containers.allDayLane]
+		}),
 		children: [/* @__PURE__ */ jsx(View, {
 			style: [styles$2.gutter, { width: hourColumnWidth }],
 			children: /* @__PURE__ */ jsx(Text, {
-				style: [styles$2.label, { color: theme.colors.textMuted }],
+				...slot("allDayLabel", {
+					base: styles$2.label,
+					themed: { color: theme.colors.textMuted }
+				}),
 				allowFontScaling: false,
 				children: "all-day"
 			})
 		}), days.map((day, dayIndex) => /* @__PURE__ */ jsx(View, {
-			style: [
-				styles$2.column,
-				{ width: dayWidth },
-				theme.containers.allDayColumn
-			],
+			...slot("allDayColumn", {
+				base: [styles$2.column, { width: dayWidth }],
+				themed: theme.containers.allDayColumn
+			}),
 			children: perDay[dayIndex].map((event, index) => /* @__PURE__ */ jsx(View, {
-				style: styles$2.chip,
+				...slot("allDayEvent", { base: styles$2.chip }),
 				children: /* @__PURE__ */ jsx(RenderEventComponent, {
 					event,
 					mode,
@@ -391,6 +411,7 @@ function useNow(enabled) {
 function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWidth, dayIndex, dayCount, mode, renderEvent, snapMinutes, onPress, onLongPress, onDragEvent, onDragStart, showDragHandle }) {
 	const RenderEventComponent = renderEvent;
 	const theme = useCalendarTheme();
+	const slot = useSlots();
 	const draggable = onDragEvent != null && !positioned.event.disabled;
 	const resizable = draggable && !positioned.continuesAfter;
 	const moveOffset = useSharedValue(0);
@@ -506,22 +527,58 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWid
 	]);
 	const handlePress = () => onPress(positioned.event);
 	const handleLongPress = !draggable && onLongPress ? () => onLongPress(positioned.event) : void 0;
+	const unit = (n) => `${n} minute${n === 1 ? "" : "s"}`;
+	const accessibilityActions = draggable ? [
+		{
+			name: "move-later",
+			label: `Move ${unit(snapMinutes)} later`
+		},
+		{
+			name: "move-earlier",
+			label: `Move ${unit(snapMinutes)} earlier`
+		},
+		...resizable ? [{
+			name: "extend",
+			label: `Extend by ${unit(snapMinutes)}`
+		}, {
+			name: "shrink",
+			label: `Shorten by ${unit(snapMinutes)}`
+		}] : []
+	] : void 0;
+	const handleAccessibilityAction = draggable ? (e) => {
+		switch (e.nativeEvent.actionName) {
+			case "move-later":
+				commitDrag(snapMinutes, snapMinutes);
+				break;
+			case "move-earlier":
+				commitDrag(-snapMinutes, -snapMinutes);
+				break;
+			case "extend":
+				commitDrag(0, snapMinutes);
+				break;
+			case "shrink":
+				commitDrag(0, -snapMinutes);
+				break;
+		}
+	} : void 0;
+	const eventSlot = slot("event", {
+		base: [styles$1.eventBox, {
+			left,
+			width
+		}],
+		themed: theme.containers.timeGridEvent
+	});
 	const box = /* @__PURE__ */ jsxs(Animated.View, {
-		style: [
-			styles$1.eventBox,
-			{
-				left,
-				width
-			},
-			boxStyle,
-			theme.containers.timeGridEvent
-		],
+		...eventSlot,
+		style: [eventSlot.style, boxStyle],
 		children: [/* @__PURE__ */ jsx(RenderEventComponent, {
 			event: positioned.event,
 			mode,
 			boxHeight,
 			continuesBefore: positioned.continuesBefore,
 			continuesAfter: positioned.continuesAfter,
+			accessibilityActions,
+			onAccessibilityAction: handleAccessibilityAction,
 			onPress: handlePress,
 			onLongPress: handleLongPress
 		}), resizable ? /* @__PURE__ */ jsx(GestureDetector, {
@@ -540,6 +597,7 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWid
 }
 const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label, ampm, hourComponent }) => {
 	const theme = useCalendarTheme();
+	const slot = useSlots();
 	const animatedStyle = useAnimatedStyle(() => ({ top: (hour - minHour) * cellHeight.value }), [hour, minHour]);
 	return /* @__PURE__ */ jsxs(Animated.View, {
 		style: [
@@ -551,52 +609,61 @@ const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label, ampm, hour
 			style: { width: hourColumnWidth },
 			children: hourComponent(hour, ampm)
 		}) : /* @__PURE__ */ jsx(Text, {
-			style: [
-				theme.text.hourLabel,
-				styles$1.hourLabel,
-				{
-					width: hourColumnWidth,
-					color: theme.colors.textMuted
-				}
-			],
+			...slot("hourLabel", {
+				base: [styles$1.hourLabel, { width: hourColumnWidth }],
+				themed: [theme.text.hourLabel, { color: theme.colors.textMuted }]
+			}),
 			allowFontScaling: false,
 			children: label
-		}), /* @__PURE__ */ jsx(View, { style: [styles$1.hourLine, { backgroundColor: theme.colors.gridLine }] })]
+		}), /* @__PURE__ */ jsx(View, { ...slot("gridLines", {
+			base: styles$1.hourLine,
+			themed: { backgroundColor: theme.colors.gridLine }
+		}) })]
 	});
 };
 const TimeslotLine = ({ hour, minHour, fraction, cellHeight, hourColumnWidth }) => {
 	const theme = useCalendarTheme();
+	const slot = useSlots();
 	const animatedStyle = useAnimatedStyle(() => ({ top: (hour - minHour + fraction) * cellHeight.value }), [
 		hour,
 		minHour,
 		fraction
 	]);
-	return /* @__PURE__ */ jsx(Animated.View, { style: [
-		styles$1.timeslotLine,
-		styles$1.nonInteractive,
-		{
-			left: hourColumnWidth,
-			backgroundColor: theme.colors.gridLine
-		},
-		animatedStyle
-	] });
+	const lineSlot = slot("gridLines", {
+		base: [
+			styles$1.timeslotLine,
+			styles$1.nonInteractive,
+			{ left: hourColumnWidth }
+		],
+		themed: { backgroundColor: theme.colors.gridLine }
+	});
+	return /* @__PURE__ */ jsx(Animated.View, {
+		...lineSlot,
+		style: [lineSlot.style, animatedStyle]
+	});
 };
 const NowIndicator = ({ cellHeight, nowHours, minHour, left, width, color }) => {
 	const theme = useCalendarTheme();
+	const slot = useSlots();
 	const animatedStyle = useAnimatedStyle(() => ({ top: (nowHours - minHour) * cellHeight.value }), [nowHours, minHour]);
-	return /* @__PURE__ */ jsx(Animated.View, { style: [
-		styles$1.nowIndicator,
-		styles$1.nonInteractive,
-		{
-			left,
-			width,
-			backgroundColor: color
-		},
-		animatedStyle,
-		theme.containers.nowIndicator
-	] });
+	const lineSlot = slot("nowIndicator", {
+		base: [
+			styles$1.nowIndicator,
+			styles$1.nonInteractive,
+			{
+				left,
+				width
+			}
+		],
+		themed: [{ backgroundColor: color }, theme.containers.nowIndicator]
+	});
+	return /* @__PURE__ */ jsx(Animated.View, {
+		...lineSlot,
+		style: [lineSlot.style, animatedStyle]
+	});
 };
 const ShadeBand = ({ cellHeight, startHour, endHour, minHour, left, width, color }) => {
+	const slot = useSlots();
 	const animatedStyle = useAnimatedStyle(() => ({
 		top: (startHour - minHour) * cellHeight.value,
 		height: (endHour - startHour) * cellHeight.value
@@ -605,22 +672,26 @@ const ShadeBand = ({ cellHeight, startHour, endHour, minHour, left, width, color
 		endHour,
 		minHour
 	]);
-	return /* @__PURE__ */ jsx(Animated.View, {
-		testID: "business-hours-shade",
-		style: [
+	const bandSlot = slot("businessHours", {
+		base: [
 			styles$1.shadeBand,
 			styles$1.nonInteractive,
 			{
 				left,
-				width,
-				backgroundColor: color
-			},
-			animatedStyle
-		]
+				width
+			}
+		],
+		themed: { backgroundColor: color }
+	});
+	return /* @__PURE__ */ jsx(Animated.View, {
+		testID: "business-hours-shade",
+		...bandSlot,
+		style: [bandSlot.style, animatedStyle]
 	});
 };
 function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hourHeight, committedCellHeight, scrollY, isActive, initialScrollY, onSettleOffset, weekStartsOn, weekEndsOn, width, hourColumnWidth, minHour, maxHour, ampm, timeslots, isRTL, showAllDayEventCell, showVerticalScrollIndicator, verticalScrollEnabled, hourComponent, calendarCellStyle, minHourHeight, maxHourHeight, showNowIndicator, businessHours, renderEvent, keyExtractor, snapMinutes, showDragHandle, onPressEvent, onLongPressEvent, onDragEvent, onDragStart, onPressCell, onLongPressCell, onCreateEvent }) {
 	const theme = useCalendarTheme();
+	const slot = useSlots();
 	const scrollRef = useAnimatedRef();
 	const heightSource = isActive ? cellHeight : committedCellHeight;
 	const isDragging = useSharedValue(false);
@@ -671,7 +742,8 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 	const dayLayouts = useMemo(() => days.map((day) => layoutDayEvents$1(events, day)), [days, events]);
 	const cellDateFromTouch = (event) => {
 		const { locationX, locationY } = event.nativeEvent;
-		const day = days[days.length === 1 ? 0 : Math.floor(locationX / dayWidth)];
+		const dayIndex = days.length === 1 ? 0 : Math.floor(locationX / dayWidth);
+		const day = days[dayIndex];
 		if (!day) return null;
 		const minutes = Math.round((minHour + locationY / heightSource.value) * MINUTES_PER_HOUR$1);
 		const pressed = new Date(day);
@@ -736,7 +808,8 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		onCreateEvent
 	]);
 	const tapCell = useCallback((x, y) => {
-		const day = days[days.length === 1 ? 0 : Math.floor(x / dayWidth)];
+		const dayIndex = days.length === 1 ? 0 : Math.floor(x / dayWidth);
+		const day = days[dayIndex];
 		if (!day) return;
 		const minutes = Math.round((minHour + y / heightSource.value) * MINUTES_PER_HOUR$1);
 		const pressed = new Date(day);
@@ -831,6 +904,13 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		width: createWidth.value,
 		opacity: createActive.value
 	}));
+	const ghostSlot = slot("createGhost", {
+		base: [styles$1.createGhost, { pointerEvents: "none" }],
+		themed: {
+			backgroundColor: theme.colors.eventBackground,
+			borderColor: theme.colors.todayBackground
+		}
+	});
 	const cellLayer = onPressCell || onLongPressCell || createEnabled ? /* @__PURE__ */ jsx(Pressable, {
 		style: [styles$1.cellPressLayer, { left: hourColumnWidth }],
 		onPress: onPressCell ? handleBackgroundPress : void 0,
@@ -871,16 +951,24 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 							gesture: backgroundGesture,
 							children: cellLayer
 						}) : cellLayer,
-						days.map((day, dayIndex) => isWeekend$1(day) ? /* @__PURE__ */ jsx(Animated.View, { style: [
-							styles$1.weekendColumn,
-							styles$1.nonInteractive,
-							{ backgroundColor: theme.colors.weekendBackground },
-							{
-								left: dayLeft(dayIndex),
-								width: dayWidth
-							},
-							fullHeightStyle
-						] }, `weekend-${day.toISOString()}`) : null),
+						days.map((day, dayIndex) => {
+							if (!isWeekend$1(day)) return null;
+							const shadeSlot = slot("weekendShade", {
+								base: [
+									styles$1.weekendColumn,
+									styles$1.nonInteractive,
+									{
+										left: dayLeft(dayIndex),
+										width: dayWidth
+									}
+								],
+								themed: { backgroundColor: theme.colors.weekendBackground }
+							});
+							return /* @__PURE__ */ jsx(Animated.View, {
+								...shadeSlot,
+								style: [shadeSlot.style, fullHeightStyle]
+							}, `weekend-${day.toISOString()}`);
+						}),
 						calendarCellStyle ? days.map((day, dayIndex) => {
 							const cellStyle = calendarCellStyle(day);
 							return cellStyle ? /* @__PURE__ */ jsx(Animated.View, { style: [
@@ -903,13 +991,20 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 							width: dayWidth,
 							color: theme.colors.outsideHoursBackground
 						}, `closed-${day.toISOString()}-${bandIndex}`))) : null,
-						days.map((day, dayIndex) => /* @__PURE__ */ jsx(Animated.View, { style: [
-							styles$1.daySeparator,
-							styles$1.nonInteractive,
-							{ backgroundColor: theme.colors.gridLine },
-							{ left: dayLeft(dayIndex) },
-							fullHeightStyle
-						] }, `separator-${day.toISOString()}`)),
+						days.map((day, dayIndex) => {
+							const separatorSlot = slot("daySeparator", {
+								base: [
+									styles$1.daySeparator,
+									styles$1.nonInteractive,
+									{ left: dayLeft(dayIndex) }
+								],
+								themed: { backgroundColor: theme.colors.gridLine }
+							});
+							return /* @__PURE__ */ jsx(Animated.View, {
+								...separatorSlot,
+								style: [separatorSlot.style, fullHeightStyle]
+							}, `separator-${day.toISOString()}`);
+						}),
 						hoursRange.map((hour) => /* @__PURE__ */ jsx(HourRow, {
 							hour,
 							minHour,
@@ -955,15 +1050,10 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 							width: dayWidth,
 							color: theme.colors.nowIndicator
 						}) : null,
-						createEnabled ? /* @__PURE__ */ jsx(Animated.View, { style: [
-							styles$1.createGhost,
-							{ pointerEvents: "none" },
-							{
-								backgroundColor: theme.colors.eventBackground,
-								borderColor: theme.colors.todayBackground
-							},
-							createGhostStyle
-						] }) : null
+						createEnabled ? /* @__PURE__ */ jsx(Animated.View, {
+							...ghostSlot,
+							style: [ghostSlot.style, createGhostStyle]
+						}) : null
 					]
 				})
 			})
@@ -971,7 +1061,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 	});
 }
 const TimetablePage = memo(TimetablePageInner);
-function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellHeight, hourHeight = 48, weekStartsOn, weekdayFormat = "short", renderEvent, eventAccessibilityLabel, keyExtractor, scrollOffsetMinutes = 0, hourColumnWidth: hourColumnWidthProp = DEFAULT_HOUR_COLUMN_WIDTH, hideHours = false, timeslots = 1, showAllDayEventCell = true, calendarCellStyle, businessHours, showWeekNumber = false, headerComponent, minHour = 0, maxHour = HOURS_PER_DAY, ampm = false, isRTL = false, minHourHeight = DEFAULT_MIN_HOUR_HEIGHT, maxHourHeight = DEFAULT_MAX_HOUR_HEIGHT, showNowIndicator = true, locale, freeSwipe = false, swipeEnabled = true, showVerticalScrollIndicator = true, verticalScrollEnabled = true, weekNumberPrefix = "W", hourComponent, activeDate, resetPageOnPressCell = false, dragStepMinutes = DEFAULT_DRAG_STEP_MINUTES, showDragHandle = true, onPressEvent, onLongPressEvent, onDragEvent, onDragStart, onPressCell, onLongPressCell, onCreateEvent, onPressDateHeader, onChangeDate, renderHeader }) {
+function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellHeight, hourHeight = 48, weekStartsOn, weekdayFormat = "short", renderEvent, eventAccessibilityLabel, keyExtractor, scrollOffsetMinutes = 0, hourColumnWidth: hourColumnWidthProp = DEFAULT_HOUR_COLUMN_WIDTH, hideHours = false, timeslots = 1, showAllDayEventCell = true, calendarCellStyle, businessHours, showWeekNumber = false, headerComponent, minHour = 0, maxHour = HOURS_PER_DAY, ampm = false, isRTL = false, minHourHeight = DEFAULT_MIN_HOUR_HEIGHT, maxHourHeight = DEFAULT_MAX_HOUR_HEIGHT, showNowIndicator = true, locale, freeSwipe = false, swipeEnabled = true, showVerticalScrollIndicator = true, verticalScrollEnabled = true, weekNumberPrefix = "W", hourComponent, activeDate, resetPageOnPressCell = false, dragStepMinutes = DEFAULT_DRAG_STEP_MINUTES, showDragHandle = true, onPressEvent, onLongPressEvent, onDragEvent, onDragStart, onPressCell, onLongPressCell, onCreateEvent, onPressDateHeader, onChangeDate, renderHeader, classNames, styles: styleOverrides }) {
 	const clampedMinHour = Math.max(0, Math.min(minHour, HOURS_PER_DAY - 1));
 	const clampedMaxHour = Math.max(clampedMinHour + 1, Math.min(maxHour, HOURS_PER_DAY));
 	const hourColumnWidth = hideHours ? 0 : hourColumnWidthProp;
@@ -1118,6 +1208,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		activeIndex,
 		onChangeDate
 	]));
+	const reduceMotion = useReducedMotion();
 	const handlePressCell = useMemo(() => {
 		if (!onPressCell) return void 0;
 		if (!resetPageOnPressCell) return onPressCell;
@@ -1125,13 +1216,14 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 			onPressCell(cellDate);
 			listRef.current?.scrollToIndex({
 				index: activeIndex,
-				animated: true
+				animated: !reduceMotion
 			});
 		};
 	}, [
 		onPressCell,
 		resetPageOnPressCell,
-		activeIndex
+		activeIndex,
+		reduceMotion
 	]);
 	const snapToIndices = useMemo(() => pageDates.map((_, index) => index), [pageDates]);
 	const keyExtractorList = useCallback((item) => item.toISOString(), []);
@@ -1229,52 +1321,56 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		events,
 		activeIndex
 	}), [events, activeIndex]);
-	return /* @__PURE__ */ jsxs(View, {
-		ref: containerRef,
-		style: styles$1.container,
-		children: [
-			renderHeader ? renderHeader(headerDays) : /* @__PURE__ */ jsx(DefaultHeader, {
-				days: headerDays,
-				mode,
-				width: containerWidth,
-				hourColumnWidth,
-				showWeekNumber,
-				weekNumberPrefix,
-				weekdayFormat,
-				locale,
-				activeDate,
-				onPressDateHeader
-			}),
-			headerComponent,
-			/* @__PURE__ */ jsx(View, {
-				style: styles$1.pager,
-				onLayout: (event) => {
-					setPageHeight(event.nativeEvent.layout.height);
-					setContainerWidth(event.nativeEvent.layout.width);
-					setMeasured(true);
-				},
-				children: /* @__PURE__ */ jsx(LegendList, {
-					ref: listRef,
-					style: isWeb ? [styles$1.pagerList, styles$1.webNoScroll] : styles$1.pagerList,
-					data: pageDates,
-					extraData: listExtraData,
-					horizontal: true,
-					recycleItems: false,
-					keyExtractor: keyExtractorList,
-					getFixedItemSize,
-					...isWeb ? null : {
-						scrollEnabled: swipeEnabled,
-						pagingEnabled: !freeSwipe,
-						snapToIndices: freeSwipe ? snapToIndices : void 0
+	return /* @__PURE__ */ jsx(SlotStylesProvider, {
+		classNames,
+		styles: styleOverrides,
+		children: /* @__PURE__ */ jsxs(View, {
+			ref: containerRef,
+			style: styles$1.container,
+			children: [
+				renderHeader ? renderHeader(headerDays) : /* @__PURE__ */ jsx(DefaultHeader, {
+					days: headerDays,
+					mode,
+					width: containerWidth,
+					hourColumnWidth,
+					showWeekNumber,
+					weekNumberPrefix,
+					weekdayFormat,
+					locale,
+					activeDate,
+					onPressDateHeader
+				}),
+				headerComponent,
+				/* @__PURE__ */ jsx(View, {
+					style: styles$1.pager,
+					onLayout: (event) => {
+						setPageHeight(event.nativeEvent.layout.height);
+						setContainerWidth(event.nativeEvent.layout.width);
+						setMeasured(true);
 					},
-					initialScrollIndex: activeIndex,
-					showsHorizontalScrollIndicator: false,
-					viewabilityConfig: PAGE_VIEWABILITY,
-					onViewableItemsChanged: handleViewableItemsChanged,
-					renderItem
-				}, measured ? "grid" : "grid-seed")
-			})
-		]
+					children: /* @__PURE__ */ jsx(LegendList, {
+						ref: listRef,
+						style: isWeb ? [styles$1.pagerList, styles$1.webNoScroll] : styles$1.pagerList,
+						data: pageDates,
+						extraData: listExtraData,
+						horizontal: true,
+						recycleItems: false,
+						keyExtractor: keyExtractorList,
+						getFixedItemSize,
+						...isWeb ? null : {
+							scrollEnabled: swipeEnabled,
+							pagingEnabled: !freeSwipe,
+							snapToIndices: freeSwipe ? snapToIndices : void 0
+						},
+						initialScrollIndex: activeIndex,
+						showsHorizontalScrollIndicator: false,
+						viewabilityConfig: PAGE_VIEWABILITY,
+						onViewableItemsChanged: handleViewableItemsChanged,
+						renderItem
+					}, measured ? "grid" : "grid-seed")
+				})
+			]
+		})
 	});
 }
 /**
@@ -1299,15 +1395,19 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 const TimeGrid = memo(TimeGridInner);
 const DefaultHeader = ({ days, mode, width, hourColumnWidth, showWeekNumber, weekNumberPrefix = "W", weekdayFormat, locale, activeDate, onPressDateHeader }) => {
 	const theme = useCalendarTheme();
+	const slot = useSlots();
 	const dayWidth = (width - hourColumnWidth) / days.length;
 	return /* @__PURE__ */ jsxs(View, {
-		style: [styles$1.headerRow, { borderBottomColor: theme.colors.gridLine }],
+		...slot("header", {
+			base: styles$1.headerRow,
+			themed: { borderBottomColor: theme.colors.gridLine }
+		}),
 		children: [/* @__PURE__ */ jsx(View, {
 			style: [styles$1.weekNumberGutter, { width: hourColumnWidth }],
 			children: showWeekNumber && hourColumnWidth > 0 && days[0] ? /* @__PURE__ */ jsx(Text, {
-				style: [theme.text.hourLabel, { color: theme.colors.textMuted }],
+				...slot("weekNumber", { themed: [theme.text.hourLabel, { color: theme.colors.textMuted }] }),
 				allowFontScaling: false,
-				children: `${weekNumberPrefix}${getISOWeek(days[0])}`
+				children: `${weekNumberPrefix}${getISOWeek(days.find((d) => d.getDay() === 4) ?? days[0])}`
 			}) : null
 		}), days.map((day) => /* @__PURE__ */ jsx(DayHeader, {
 			day,
@@ -1322,36 +1422,42 @@ const DefaultHeader = ({ days, mode, width, hourColumnWidth, showWeekNumber, wee
 };
 const DayHeader = ({ day, width, weekdayFormat = "short", locale, activeDate, onPressDateHeader }) => {
 	const theme = useCalendarTheme();
+	const slot = useSlots();
 	const isToday = getIsToday$1(day);
 	const isHighlighted = activeDate ? isSameCalendarDay$1(day, activeDate) : isToday;
-	return /* @__PURE__ */ jsxs(Pressable, {
-		style: [
-			styles$1.dayHeader,
-			{ width },
-			theme.containers.columnHeader
-		],
-		onPress: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
-		disabled: !onPressDateHeader,
-		accessibilityRole: onPressDateHeader ? "button" : void 0,
-		accessibilityLabel: onPressDateHeader ? format(day, "EEEE d MMMM", { locale }) : void 0,
-		children: [/* @__PURE__ */ jsx(Text, {
-			style: [{ color: theme.colors.textMuted }, theme.text.columnHeaderWeekday],
+	const accessibilityLabel = `${format(day, "EEEE d MMMM", { locale })}${isToday ? ", today" : ""}`;
+	const headerSlot = slot("columnHeader", {
+		base: [styles$1.dayHeader, { width }],
+		themed: theme.containers.columnHeader
+	});
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+		...slot("columnHeaderWeekday", { themed: [{ color: theme.colors.textMuted }, theme.text.columnHeaderWeekday] }),
+		allowFontScaling: false,
+		children: format(day, weekdayFormatToken$1(weekdayFormat), { locale })
+	}), /* @__PURE__ */ jsx(View, {
+		testID: "column-header-badge",
+		...slot("columnHeaderDate", {
+			base: styles$1.dayHeaderBadge,
+			themed: [theme.containers.columnHeaderBadge, isHighlighted && { backgroundColor: theme.colors.todayBackground }]
+		}),
+		children: /* @__PURE__ */ jsx(Text, {
+			...slot("columnHeaderDateText", { themed: [theme.text.dayNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }] }),
 			allowFontScaling: false,
-			children: format(day, weekdayFormatToken$1(weekdayFormat), { locale })
-		}), /* @__PURE__ */ jsx(View, {
-			testID: "column-header-badge",
-			style: [
-				styles$1.dayHeaderBadge,
-				theme.containers.columnHeaderBadge,
-				isHighlighted && { backgroundColor: theme.colors.todayBackground }
-			],
-			children: /* @__PURE__ */ jsx(Text, {
-				style: [theme.text.dayNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
-				allowFontScaling: false,
-				...isToday && { accessibilityLabel: `Today, ${day.getDate()}` },
-				children: day.getDate()
-			})
-		})]
+			children: day.getDate()
+		})
+	})] });
+	return onPressDateHeader ? /* @__PURE__ */ jsx(Pressable, {
+		...headerSlot,
+		onPress: () => onPressDateHeader(day),
+		accessibilityRole: "button",
+		accessibilityLabel,
+		children: content
+	}) : /* @__PURE__ */ jsx(View, {
+		...headerSlot,
+		accessible: true,
+		accessibilityRole: "header",
+		accessibilityLabel,
+		children: content
 	});
 };
 const styles$1 = StyleSheet.create({
@@ -1462,6 +1568,13 @@ function visibleRange(mode, date, weekStartsOn, numberOfDays, weekEndsOn) {
 	const days = getViewDays$1(mode, date, weekStartsOn, numberOfDays, false, weekEndsOn);
 	return [startOfDay(days[0]), endOfDay(days[days.length - 1])];
 }
+function expansionRange(mode, date, weekStartsOn, numberOfDays, weekEndsOn) {
+	if (mode === "month") return [startOfWeek(startOfMonth(addMonths(date, -1)), { weekStartsOn }), addWeeks(endOfWeek(endOfMonth(addMonths(date, 1)), { weekStartsOn }), 1)];
+	if (mode === "schedule") return [startOfDay(date), endOfDay(addMonths(date, 3))];
+	const days = getViewDays$1(mode, date, weekStartsOn, numberOfDays, false, weekEndsOn);
+	const span = days.length;
+	return [startOfDay(addDays(days[0], -span)), endOfDay(addDays(days[days.length - 1], span))];
+}
 /**
 * The top-level calendar. Switches between month, week, day, 3days, custom, and
 * schedule modes, and is gesture-driven and virtualized. It is a controlled
@@ -1488,10 +1601,31 @@ function visibleRange(mode, date, weekStartsOn, numberOfDays, weekEndsOn) {
 * }
 * ```
 */
-function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPressEvent, onLongPressEvent, onDragEvent, onDragStart, dragStepMinutes, showDragHandle, onPressDay, onLongPressDay, onPressMore, onPressCell, resetPageOnPressCell, onLongPressCell, onCreateEvent, onPressDateHeader, maxVisibleEventCount, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, weekStartsOn = 0, weekdayFormat, numberOfDays, weekEndsOn, renderEvent = DefaultEvent, eventAccessibilityLabel, eventCellStyle, calendarCellStyle, businessHours, keyExtractor = defaultKeyExtractor, theme, cellHeight: cellHeightProp, hourHeight = 48, minHourHeight, maxHourHeight, hourColumnWidth, hideHours, timeslots, showAllDayEventCell, showWeekNumber, weekNumberPrefix, hourComponent, showSixWeeks, swipeEnabled, showVerticalScrollIndicator, verticalScrollEnabled, headerComponent, minHour, maxHour, ampm, showTime, ellipsizeTitle, allDayLabel, scrollOffsetMinutes, showNowIndicator, locale, activeDate, isRTL, freeSwipe, renderTimeGridHeader, renderHeaderForMonthView, renderCustomDateForMonth, itemSeparatorComponent }) {
+function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPressEvent, onLongPressEvent, onDragEvent, onDragStart, dragStepMinutes, showDragHandle, onPressDay, onLongPressDay, onPressMore, onPressCell, resetPageOnPressCell, onLongPressCell, onCreateEvent, onPressDateHeader, maxVisibleEventCount, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, weekStartsOn = 0, weekdayFormat, numberOfDays, weekEndsOn, renderEvent = DefaultEvent, eventAccessibilityLabel, eventCellStyle, calendarCellStyle, businessHours, keyExtractor = defaultKeyExtractor, theme, cellHeight: cellHeightProp, hourHeight = 48, minHourHeight, maxHourHeight, hourColumnWidth, hideHours, timeslots, showAllDayEventCell, showWeekNumber, weekNumberPrefix, hourComponent, showSixWeeks, swipeEnabled, showVerticalScrollIndicator, verticalScrollEnabled, headerComponent, minHour, maxHour, ampm, showTime, ellipsizeTitle, allDayLabel, scrollOffsetMinutes, showNowIndicator, locale, timeZone, activeDate, isRTL, freeSwipe, renderTimeGridHeader, renderHeaderForMonthView, renderCustomDateForMonth, itemSeparatorComponent, classNames, styles: styleOverrides }) {
 	const mergedTheme = useMemo(() => mergeTheme(theme), [theme]);
 	const internalCellHeight = useSharedValue(hourHeight);
 	const cellHeight = cellHeightProp ?? internalCellHeight;
+	const displayEvents = useMemo(() => {
+		let out = events;
+		if (out.some((e) => e.recurrence)) {
+			let [start, end] = expansionRange(mode, date, weekStartsOn, numberOfDays ?? 1, weekEndsOn);
+			if (timeZone) {
+				start = addDays(start, -1);
+				end = addDays(end, 1);
+			}
+			out = expandRecurringEvents$1(out, start, end);
+		}
+		if (timeZone) out = eventsInTimeZone$1(out, timeZone);
+		return out;
+	}, [
+		events,
+		mode,
+		date.getTime(),
+		weekStartsOn,
+		numberOfDays,
+		weekEndsOn,
+		timeZone
+	]);
 	const handlePressEvent = useCallback((event) => {
 		if (!event.disabled) onPressEvent(event);
 	}, [onPressEvent]);
@@ -1541,7 +1675,7 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 		value: mergedTheme,
 		children: mode === "month" ? /* @__PURE__ */ jsx(MonthPager, {
 			date,
-			events,
+			events: displayEvents,
 			maxVisibleEventCount,
 			weekStartsOn,
 			weekdayFormat,
@@ -1565,9 +1699,11 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 			onPressMore,
 			onChangeDate: handleChangeDate,
 			freeSwipe,
-			swipeEnabled
+			swipeEnabled,
+			classNames,
+			styles: styleOverrides
 		}) : mode === "schedule" ? /* @__PURE__ */ jsx(Agenda, {
-			events,
+			events: displayEvents,
 			locale,
 			renderEvent: resolvedRenderEvent,
 			keyExtractor,
@@ -1575,13 +1711,15 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 			onLongPressEvent: handleLongPressEvent,
 			onPressDay,
 			activeDate,
-			itemSeparatorComponent
+			itemSeparatorComponent,
+			classNames,
+			styles: styleOverrides
 		}) : /* @__PURE__ */ jsx(TimeGrid, {
 			mode,
 			numberOfDays,
 			weekEndsOn,
 			date,
-			events,
+			events: displayEvents,
 			cellHeight,
 			hourHeight,
 			weekStartsOn,
@@ -1624,7 +1762,9 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 			onCreateEvent,
 			onPressDateHeader,
 			onChangeDate: handleChangeDate,
-			renderHeader: renderTimeGridHeader
+			renderHeader: renderTimeGridHeader,
+			classNames,
+			styles: styleOverrides
 		})
 	});
 }
@@ -1633,8 +1773,10 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 const MOVE_ACTIVATE_MS = 250;
 const MINUTES_PER_HOUR = 60;
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-function DefaultBar({ event, width }) {
+const GUTTER_WIDTH = 56;
+function DefaultBar({ event, width, height }) {
 	const theme = useCalendarTheme();
+	const showTime = height != null ? height > 34 : width > 56;
 	const time = eventTimeLabel({
 		mode: "day",
 		isAllDay: false,
@@ -1654,7 +1796,7 @@ function DefaultBar({ event, width }) {
 			style: [theme.text.eventTitle, { color: theme.colors.eventText }],
 			allowFontScaling: false,
 			children: event.title
-		}), time && width > 56 ? /* @__PURE__ */ jsx(Text, {
+		}), time && showTime ? /* @__PURE__ */ jsx(Text, {
 			numberOfLines: 1,
 			style: [styles.barTime, { color: theme.colors.eventText }],
 			allowFontScaling: false,
@@ -1662,7 +1804,7 @@ function DefaultBar({ event, width }) {
 		}) : null]
 	});
 }
-function ResourceBar({ pe, left, width, laneHeight, hourWidth, snapMinutes, Renderer, onPress, onDragEvent, theme }) {
+function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendererSize, snapMinutes, Renderer, onPress, onDragEvent, theme }) {
 	const moveX = useSharedValue(0);
 	const resizeW = useSharedValue(0);
 	const latest = useRef({
@@ -1696,71 +1838,122 @@ function ResourceBar({ pe, left, width, laneHeight, hourWidth, snapMinutes, Rend
 		}
 		if (handler(event, next.start, next.end) === false) snapBack();
 	}, [snapMinutes, snapBack]);
-	const barStyle = useAnimatedStyle(() => ({
+	const unit = (n) => `${n} minute${n === 1 ? "" : "s"}`;
+	const barActions = draggable ? [
+		{
+			name: "move-later",
+			label: `Move ${unit(snapMinutes)} later`
+		},
+		{
+			name: "move-earlier",
+			label: `Move ${unit(snapMinutes)} earlier`
+		},
+		{
+			name: "extend",
+			label: `Extend by ${unit(snapMinutes)}`
+		},
+		{
+			name: "shrink",
+			label: `Shorten by ${unit(snapMinutes)}`
+		}
+	] : void 0;
+	const onBarAction = draggable ? (e) => {
+		switch (e.nativeEvent.actionName) {
+			case "move-later":
+				commit(snapMinutes, snapMinutes);
+				break;
+			case "move-earlier":
+				commit(-snapMinutes, -snapMinutes);
+				break;
+			case "extend":
+				commit(0, snapMinutes);
+				break;
+			case "shrink":
+				commit(0, -snapMinutes);
+				break;
+		}
+	} : void 0;
+	const barStyle = useAnimatedStyle(() => vertical ? {
+		transform: [{ translateY: moveX.value }],
+		height: Math.max(height + resizeW.value, 2)
+	} : {
 		transform: [{ translateX: moveX.value }],
 		width: Math.max(width + resizeW.value, 2)
-	}), [width]);
+	}, [
+		vertical,
+		width,
+		height
+	]);
 	const moveGesture = useMemo(() => Gesture.Pan().enabled(draggable).activateAfterLongPress(MOVE_ACTIVATE_MS).onUpdate((e) => {
-		moveX.value = e.translationX;
+		moveX.value = vertical ? e.translationY : e.translationX;
 	}).onEnd((e) => {
-		const delta = snapDeltaMinutes(e.translationX, hourWidth, snapMinutes);
+		const delta = snapDeltaMinutes(vertical ? e.translationY : e.translationX, hourSize, snapMinutes);
 		if (delta === 0) {
 			moveX.value = 0;
 			return;
 		}
-		moveX.value = delta / MINUTES_PER_HOUR * hourWidth;
+		moveX.value = delta / MINUTES_PER_HOUR * hourSize;
 		runOnJS(commit)(delta, delta);
 	}), [
 		draggable,
-		hourWidth,
+		vertical,
+		hourSize,
 		snapMinutes,
 		moveX,
 		commit
 	]);
 	const resizeGesture = useMemo(() => Gesture.Pan().enabled(draggable).onUpdate((e) => {
-		resizeW.value = e.translationX;
+		resizeW.value = vertical ? e.translationY : e.translationX;
 	}).onEnd((e) => {
-		const delta = snapDeltaMinutes(e.translationX, hourWidth, snapMinutes);
+		const delta = snapDeltaMinutes(vertical ? e.translationY : e.translationX, hourSize, snapMinutes);
 		if (delta === 0) {
 			resizeW.value = 0;
 			return;
 		}
-		resizeW.value = delta / MINUTES_PER_HOUR * hourWidth;
+		resizeW.value = delta / MINUTES_PER_HOUR * hourSize;
 		runOnJS(commit)(0, delta);
 	}), [
 		draggable,
-		hourWidth,
+		vertical,
+		hourSize,
 		snapMinutes,
 		resizeW,
 		commit
 	]);
 	return /* @__PURE__ */ jsxs(Animated.View, {
-		style: [{
-			position: "absolute",
-			left,
-			top: pe.column * laneHeight,
-			height: laneHeight,
-			padding: 1
-		}, barStyle],
+		style: [
+			{
+				position: "absolute",
+				left,
+				top,
+				padding: 1
+			},
+			vertical ? { width } : { height },
+			barStyle
+		],
 		children: [/* @__PURE__ */ jsx(GestureDetector, {
 			gesture: moveGesture,
 			children: /* @__PURE__ */ jsx(Pressable, {
 				onPress,
 				accessibilityRole: "button",
 				accessibilityLabel: pe.event.title,
+				accessibilityActions: barActions,
+				onAccessibilityAction: onBarAction,
 				style: styles.fill,
 				children: /* @__PURE__ */ jsx(Renderer, {
 					event: pe.event,
-					width,
+					width: rendererSize.width,
+					height: rendererSize.height,
 					onPress
 				})
 			})
 		}), /* @__PURE__ */ jsx(GestureDetector, {
 			gesture: resizeGesture,
 			children: /* @__PURE__ */ jsx(View, {
-				style: [styles.resizeGrip, { backgroundColor: theme.colors.eventText }],
-				accessibilityRole: "adjustable",
-				accessibilityLabel: `Resize ${pe.event.title}`
+				testID: "resource-resize-grip",
+				style: [vertical ? styles.resizeGripBottom : styles.resizeGrip, { backgroundColor: theme.colors.eventText }],
+				accessibilityElementsHidden: true,
+				importantForAccessibility: "no"
 			})
 		})]
 	});
@@ -1783,7 +1976,7 @@ function ResourceBar({ pe, left, width, laneHeight, hourWidth, snapMinutes, Rend
 * />
 * ```
 */
-function ResourceTimeline({ date, resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, rowHeight = 56, labelWidth = 140, ampm = false, renderEvent, onPressEvent, onDragEvent, dragStepMinutes = 15 }) {
+function ResourceTimeline({ date, orientation = "horizontal", resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, hourHeight = 48, rowHeight = 56, labelWidth = 140, ampm = false, renderEvent, onPressEvent, onDragEvent, dragStepMinutes = 15 }) {
 	const theme = useCalendarTheme();
 	const Renderer = renderEvent ?? DefaultBar;
 	const hours = useMemo(() => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i), [startHour, endHour]);
@@ -1801,6 +1994,101 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 		resourceId,
 		date
 	]);
+	if (orientation === "vertical") {
+		const trackHeight = (endHour - startHour) * hourHeight;
+		return /* @__PURE__ */ jsxs(View, {
+			style: styles.vroot,
+			children: [/* @__PURE__ */ jsxs(View, {
+				style: [styles.header, { borderBottomColor: theme.colors.gridLine }],
+				children: [/* @__PURE__ */ jsx(View, { style: { width: GUTTER_WIDTH } }), resources.map((resource) => /* @__PURE__ */ jsx(View, {
+					style: [styles.vheaderCell, theme.containers.resourceLabel],
+					children: /* @__PURE__ */ jsx(Text, {
+						numberOfLines: 1,
+						style: [styles.vheaderText, { color: theme.colors.text }],
+						allowFontScaling: false,
+						children: resource.title ?? resource.id
+					})
+				}, resource.id))]
+			}), /* @__PURE__ */ jsx(ScrollView, {
+				showsVerticalScrollIndicator: true,
+				children: /* @__PURE__ */ jsxs(View, {
+					style: [styles.vbody, { height: trackHeight }],
+					children: [/* @__PURE__ */ jsx(View, {
+						style: { width: GUTTER_WIDTH },
+						children: hours.map((h) => /* @__PURE__ */ jsx(Text, {
+							allowFontScaling: false,
+							style: [styles.vhourLabel, {
+								top: Math.max(0, (h - startHour) * hourHeight - 6),
+								color: theme.colors.textMuted
+							}],
+							children: formatHour(h, { ampm })
+						}, h))
+					}), resources.map((resource) => {
+						const positioned = byResource.get(resource.id) ?? [];
+						return /* @__PURE__ */ jsxs(View, {
+							style: [
+								styles.vcolumn,
+								{ borderLeftColor: theme.colors.gridLine },
+								theme.containers.resourceRow
+							],
+							children: [hours.slice(1).map((h) => /* @__PURE__ */ jsx(View, {
+								pointerEvents: "none",
+								style: [styles.vgridLine, {
+									top: (h - startHour) * hourHeight,
+									backgroundColor: theme.colors.gridLine
+								}]
+							}, h)), positioned.map((pe, idx) => {
+								const top = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourHeight;
+								const bottomPx = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourHeight;
+								const height = Math.max(bottomPx - top, 2);
+								const lanePct = 100 / pe.columns;
+								const left = `${pe.column * lanePct}%`;
+								const width = `${lanePct}%`;
+								const onPress = () => onPressEvent?.(pe.event);
+								if (onDragEvent) return /* @__PURE__ */ jsx(ResourceBar, {
+									pe,
+									vertical: true,
+									hourSize: hourHeight,
+									left,
+									top,
+									width,
+									height,
+									rendererSize: {
+										width: 0,
+										height
+									},
+									snapMinutes: dragStepMinutes,
+									Renderer,
+									onPress,
+									onDragEvent,
+									theme
+								}, idx);
+								return /* @__PURE__ */ jsx(Pressable, {
+									onPress,
+									accessibilityRole: "button",
+									accessibilityLabel: pe.event.title,
+									style: {
+										position: "absolute",
+										left,
+										width,
+										top,
+										height,
+										padding: 1
+									},
+									children: /* @__PURE__ */ jsx(Renderer, {
+										event: pe.event,
+										width: 0,
+										height,
+										onPress
+									})
+								}, idx);
+							})]
+						}, resource.id);
+					})]
+				})
+			})]
+		});
+	}
 	return /* @__PURE__ */ jsx(ScrollView, {
 		horizontal: true,
 		showsHorizontalScrollIndicator: true,
@@ -1865,10 +2153,13 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 							const onPress = () => onPressEvent?.(pe.event);
 							if (onDragEvent) return /* @__PURE__ */ jsx(ResourceBar, {
 								pe,
+								vertical: false,
+								hourSize: hourWidth,
 								left,
+								top: pe.column * laneHeight,
 								width,
-								laneHeight,
-								hourWidth,
+								height: laneHeight,
+								rendererSize: { width },
 								snapMinutes: dragStepMinutes,
 								Renderer,
 								onPress,
@@ -1946,7 +2237,44 @@ const styles = StyleSheet.create({
 		width: 4,
 		borderRadius: 2,
 		opacity: .5
+	},
+	resizeGripBottom: {
+		position: "absolute",
+		bottom: 1,
+		left: "30%",
+		right: "30%",
+		height: 4,
+		borderRadius: 2,
+		opacity: .5
+	},
+	vroot: { flex: 1 },
+	vheaderCell: {
+		flex: 1,
+		paddingVertical: 6,
+		paddingHorizontal: 4,
+		alignItems: "center",
+		borderLeftWidth: StyleSheet.hairlineWidth
+	},
+	vheaderText: {
+		fontSize: 13,
+		fontWeight: "600"
+	},
+	vbody: { flexDirection: "row" },
+	vcolumn: {
+		flex: 1,
+		borderLeftWidth: StyleSheet.hairlineWidth
+	},
+	vhourLabel: {
+		position: "absolute",
+		right: 6,
+		fontSize: 10
+	},
+	vgridLine: {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		height: StyleSheet.hairlineWidth
 	}
 });
 //#endregion
-export { Agenda, Calendar, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, DefaultEvent, DefaultMonthEvent, MonthList, MonthPager, MonthView, ResourceTimeline, TimeGrid, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, eventsInTimeZone, expandRecurringEvents, getIsToday, getViewDays, getWeekDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, mergeTheme, minutesIntoDay, nextDateRange, toZonedTime, useCalendarTheme, useDateRange, useMonthGrid, weekdayFormatToken };
+export { Agenda, Calendar, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, DefaultEvent, DefaultMonthEvent, MonthList, MonthPager, MonthView, ResourceTimeline, TimeGrid, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, eventsInTimeZone, expandRecurringEvents, getIsToday, getViewDays, getWeekDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, mergeTheme, minutesIntoDay, nextDateRange, parseICalendar, toICalendar, toZonedTime, useCalendarTheme, useDateRange, useMonthGrid, weekdayFormatToken };