@super-calendar/native 2.1.4 → 2.2.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { a as useWebPagerKeys, c as defaultTheme, i as MonthView, l as mergeTheme, n as DefaultMonthEvent, o as CalendarThemeProvider, r as MonthPager, s as darkTheme, t as MonthList, u as useCalendarTheme } from "./MonthList-DXvjxiyu.mjs";
+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-DZx8rPle.mjs";
 import { addDays, 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 } from "@super-calendar/core";
+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 { LegendList } from "@legendapp/list/react-native";
-import { Platform, Pressable, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { Platform, Pressable, ScrollView, 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/components/Agenda.tsx
@@ -43,14 +43,14 @@ 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$3.header, { color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted }],
+				style: [styles$4.header, { 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$3.eventRow,
+			style: [styles$4.eventRow, theme.containers.agendaRow],
 			children: /* @__PURE__ */ jsx(RenderEventComponent, {
 				event: item.event,
 				mode: "schedule",
@@ -69,11 +69,11 @@ function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLon
 		RenderEventComponent
 	]);
 	if (rows.length === 0) return /* @__PURE__ */ jsx(Text, {
-		style: [styles$3.empty, { color: theme.colors.textMuted }],
+		style: [styles$4.empty, { color: theme.colors.textMuted }],
 		children: "No events"
 	});
 	return /* @__PURE__ */ jsx(LegendList, {
-		style: styles$3.list,
+		style: [styles$4.list, theme.containers.agendaList],
 		data: rows,
 		keyExtractor: keyExtractorRow,
 		renderItem,
@@ -81,7 +81,7 @@ function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLon
 		recycleItems: false
 	});
 }
-const styles$3 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
 	list: { flex: 1 },
 	header: {
 		fontSize: 13,
@@ -114,7 +114,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, cellStyle, onPress, onLongPress }) {
+function DefaultEvent({ event, mode, boxHeight, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, accessibilityLabel: accessibilityLabelProp, cellStyle, onPress, onLongPress }) {
 	const theme = useCalendarTheme();
 	const isAllDayEvent = isAllDay ?? false;
 	const timeLabel = eventTimeLabel({
@@ -128,7 +128,7 @@ function DefaultEvent({ event, mode, boxHeight, isAllDay, ampm = false, showTime
 	});
 	const ellipsizeMode = titleEllipsizeMode(ellipsizeTitle);
 	const titleLineHeight = numericStyle(theme.text.eventTitle.lineHeight, FALLBACK_TITLE_LINE_HEIGHT);
-	const accessibilityLabel = eventAccessibilityLabel({
+	const accessibilityLabel = accessibilityLabelProp ?? eventAccessibilityLabel({
 		title: event.title,
 		isAllDay: isAllDayEvent,
 		start: event.start,
@@ -158,12 +158,16 @@ function DefaultEvent({ event, mode, boxHeight, isAllDay, ampm = false, showTime
 	const timeStyle = useAnimatedStyle(() => {
 		return { display: layout.value.showTime ? "flex" : "none" };
 	}, [layout]);
-	return /* @__PURE__ */ jsxs(TouchableOpacity, {
+	const contentStyle = useAnimatedStyle(() => {
+		const { titleMaxLines, showTime } = layout.value;
+		return { justifyContent: titleMaxLines === 1 && !showTime ? "center" : "flex-start" };
+	}, [layout]);
+	return /* @__PURE__ */ jsx(TouchableOpacity, {
 		style: [
-			styles$2.box,
-			isSchedule && styles$2.scheduleBox,
+			styles$3.box,
+			isSchedule && styles$3.scheduleBox,
 			{ backgroundColor: theme.colors.eventBackground },
-			event.disabled && styles$2.disabled,
+			event.disabled && styles$3.disabled,
 			cellStyle
 		],
 		onPress,
@@ -172,46 +176,50 @@ function DefaultEvent({ event, mode, boxHeight, isAllDay, ampm = false, showTime
 		accessibilityRole: "button",
 		accessibilityLabel,
 		accessibilityState: { disabled: event.disabled ?? false },
-		children: [event.title ? fixedTitleLines == null ? /* @__PURE__ */ jsx(Animated.View, {
-			style: [styles$2.titleClip, titleClipStyle],
-			children: /* @__PURE__ */ jsx(Text, {
+		children: /* @__PURE__ */ jsxs(Animated.View, {
+			testID: "event-chip-content",
+			style: [styles$3.content, contentStyle],
+			children: [event.title ? fixedTitleLines == null ? /* @__PURE__ */ jsx(Animated.View, {
+				style: [styles$3.titleClip, titleClipStyle],
+				children: /* @__PURE__ */ jsx(Text, {
+					style: [
+						theme.text.eventTitle,
+						isSchedule && styles$3.scheduleTitle,
+						{ color: theme.colors.eventText }
+					],
+					ellipsizeMode,
+					allowFontScaling: false,
+					children: event.title
+				})
+			}) : /* @__PURE__ */ jsx(Text, {
 				style: [
 					theme.text.eventTitle,
-					isSchedule && styles$2.scheduleTitle,
+					styles$3.title,
+					isSchedule && styles$3.scheduleTitle,
 					{ color: theme.colors.eventText }
 				],
+				numberOfLines: fixedTitleLines,
 				ellipsizeMode,
 				allowFontScaling: false,
 				children: event.title
-			})
-		}) : /* @__PURE__ */ jsx(Text, {
-			style: [
-				theme.text.eventTitle,
-				styles$2.title,
-				isSchedule && styles$2.scheduleTitle,
-				{ color: theme.colors.eventText }
-			],
-			numberOfLines: fixedTitleLines,
-			ellipsizeMode,
-			allowFontScaling: false,
-			children: event.title
-		}) : null, timeLabel ? /* @__PURE__ */ jsx(Animated.View, {
-			style: timeStyle,
-			children: /* @__PURE__ */ jsx(Text, {
-				style: [
-					styles$2.time,
-					isSchedule && styles$2.scheduleTime,
-					{ color: theme.colors.eventText }
-				],
-				numberOfLines: 2,
-				ellipsizeMode,
-				allowFontScaling: false,
-				children: timeLabel
-			})
-		}) : null]
+			}) : null, timeLabel ? /* @__PURE__ */ jsx(Animated.View, {
+				style: timeStyle,
+				children: /* @__PURE__ */ jsx(Text, {
+					style: [
+						styles$3.time,
+						isSchedule && styles$3.scheduleTime,
+						{ color: theme.colors.eventText }
+					],
+					numberOfLines: 2,
+					ellipsizeMode,
+					allowFontScaling: false,
+					children: timeLabel
+				})
+			}) : null]
+		})
 	});
 }
-const styles$2 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
 	box: {
 		flexGrow: 1,
 		flexShrink: 1,
@@ -236,6 +244,10 @@ const styles$2 = StyleSheet.create({
 		lineHeight: 18,
 		opacity: .75
 	},
+	content: {
+		flexGrow: 1,
+		flexShrink: 1
+	},
 	titleClip: { overflow: "hidden" },
 	title: { flexShrink: 1 },
 	time: {
@@ -295,18 +307,26 @@ function AllDayLane({ days, events, mode, hourColumnWidth, dayWidth, renderEvent
 	});
 	if (perDay.every((list) => list.length === 0)) return null;
 	return /* @__PURE__ */ jsxs(View, {
-		style: [styles$1.lane, { borderBottomColor: theme.colors.gridLine }],
+		style: [
+			styles$2.lane,
+			{ borderBottomColor: theme.colors.gridLine },
+			theme.containers.allDayLane
+		],
 		children: [/* @__PURE__ */ jsx(View, {
-			style: [styles$1.gutter, { width: hourColumnWidth }],
+			style: [styles$2.gutter, { width: hourColumnWidth }],
 			children: /* @__PURE__ */ jsx(Text, {
-				style: [styles$1.label, { color: theme.colors.textMuted }],
+				style: [styles$2.label, { color: theme.colors.textMuted }],
 				allowFontScaling: false,
 				children: "all-day"
 			})
 		}), days.map((day, dayIndex) => /* @__PURE__ */ jsx(View, {
-			style: [styles$1.column, { width: dayWidth }],
+			style: [
+				styles$2.column,
+				{ width: dayWidth },
+				theme.containers.allDayColumn
+			],
 			children: perDay[dayIndex].map((event, index) => /* @__PURE__ */ jsx(View, {
-				style: styles$1.chip,
+				style: styles$2.chip,
 				children: /* @__PURE__ */ jsx(RenderEventComponent, {
 					event,
 					mode,
@@ -318,7 +338,7 @@ function AllDayLane({ days, events, mode, hourColumnWidth, dayWidth, renderEvent
 		}, day.toISOString()))]
 	});
 }
-const styles$1 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
 	lane: {
 		flexDirection: "row",
 		borderBottomWidth: StyleSheet.hairlineWidth
@@ -339,9 +359,9 @@ const styles$1 = StyleSheet.create({
 //#endregion
 //#region src/components/TimeGrid.tsx
 const isWeb = Platform.OS === "web";
-const MINUTES_PER_HOUR = 60;
+const MINUTES_PER_HOUR$1 = 60;
 const HOURS_PER_DAY = 24;
-const MINUTES_PER_DAY = MINUTES_PER_HOUR * HOURS_PER_DAY;
+const MINUTES_PER_DAY = MINUTES_PER_HOUR$1 * HOURS_PER_DAY;
 const PAGE_WINDOW = 180;
 const PAGE_VIEWABILITY = { itemVisiblePercentThreshold: 90 };
 /** Default height in pixels of one hour row on the time grid. */
@@ -352,7 +372,7 @@ const DEFAULT_HOUR_COLUMN_WIDTH = 56;
 const MIN_EVENT_HEIGHT = 32;
 const EVENT_GAP = 2;
 const DRAG_ACTIVATE_MS = 300;
-const MOVE_ACTIVATE_MS = 500;
+const MOVE_ACTIVATE_MS$1 = 500;
 const DRAG_ACTIVATE_PX = 8;
 const RESIZE_HANDLE_HEIGHT = 14;
 const DEFAULT_DRAG_STEP_MINUTES = 15;
@@ -446,12 +466,12 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWid
 				moveOffsetX.value = 0;
 				return;
 			}
-			moveOffset.value = minuteDelta / MINUTES_PER_HOUR * cellHeight.value;
+			moveOffset.value = minuteDelta / MINUTES_PER_HOUR$1 * cellHeight.value;
 			moveOffsetX.value = dayDelta * dayWidth;
 			const totalDelta = minuteDelta + dayDelta * MINUTES_PER_DAY;
 			runOnJS(commitDrag)(totalDelta, totalDelta);
 		});
-		return isWeb ? pan.activeOffsetX([-8, DRAG_ACTIVATE_PX]).activeOffsetY([-8, DRAG_ACTIVATE_PX]) : pan.activateAfterLongPress(MOVE_ACTIVATE_MS);
+		return isWeb ? pan.activeOffsetX([-8, DRAG_ACTIVATE_PX]).activeOffsetY([-8, DRAG_ACTIVATE_PX]) : pan.activateAfterLongPress(MOVE_ACTIVATE_MS$1);
 	}, [
 		draggable,
 		snapMinutes,
@@ -474,7 +494,7 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWid
 			resizeDelta.value = 0;
 			return;
 		}
-		resizeDelta.value = delta / MINUTES_PER_HOUR * cellHeight.value;
+		resizeDelta.value = delta / MINUTES_PER_HOUR$1 * cellHeight.value;
 		runOnJS(commitDrag)(0, delta);
 	}), [
 		resizable,
@@ -488,12 +508,13 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWid
 	const handleLongPress = !draggable && onLongPress ? () => onLongPress(positioned.event) : void 0;
 	const box = /* @__PURE__ */ jsxs(Animated.View, {
 		style: [
-			styles.eventBox,
+			styles$1.eventBox,
 			{
 				left,
 				width
 			},
-			boxStyle
+			boxStyle,
+			theme.containers.timeGridEvent
 		],
 		children: [/* @__PURE__ */ jsx(RenderEventComponent, {
 			event: positioned.event,
@@ -506,8 +527,8 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWid
 		}), resizable ? /* @__PURE__ */ jsx(GestureDetector, {
 			gesture: resizeGesture,
 			children: /* @__PURE__ */ jsx(Animated.View, {
-				style: styles.resizeHandle,
-				children: showDragHandle ? /* @__PURE__ */ jsx(View, { style: [styles.resizeGrip, { backgroundColor: theme.colors.eventText }] }) : null
+				style: styles$1.resizeHandle,
+				children: showDragHandle ? /* @__PURE__ */ jsx(View, { style: [styles$1.resizeGrip, { backgroundColor: theme.colors.eventText }] }) : null
 			})
 		}) : null]
 	});
@@ -522,8 +543,8 @@ const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label, ampm, hour
 	const animatedStyle = useAnimatedStyle(() => ({ top: (hour - minHour) * cellHeight.value }), [hour, minHour]);
 	return /* @__PURE__ */ jsxs(Animated.View, {
 		style: [
-			styles.hourRow,
-			styles.nonInteractive,
+			styles$1.hourRow,
+			styles$1.nonInteractive,
 			animatedStyle
 		],
 		children: [hourComponent ? /* @__PURE__ */ jsx(View, {
@@ -532,7 +553,7 @@ const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label, ampm, hour
 		}) : /* @__PURE__ */ jsx(Text, {
 			style: [
 				theme.text.hourLabel,
-				styles.hourLabel,
+				styles$1.hourLabel,
 				{
 					width: hourColumnWidth,
 					color: theme.colors.textMuted
@@ -540,7 +561,7 @@ const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label, ampm, hour
 			],
 			allowFontScaling: false,
 			children: label
-		}), /* @__PURE__ */ jsx(View, { style: [styles.hourLine, { backgroundColor: theme.colors.gridLine }] })]
+		}), /* @__PURE__ */ jsx(View, { style: [styles$1.hourLine, { backgroundColor: theme.colors.gridLine }] })]
 	});
 };
 const TimeslotLine = ({ hour, minHour, fraction, cellHeight, hourColumnWidth }) => {
@@ -551,8 +572,8 @@ const TimeslotLine = ({ hour, minHour, fraction, cellHeight, hourColumnWidth })
 		fraction
 	]);
 	return /* @__PURE__ */ jsx(Animated.View, { style: [
-		styles.timeslotLine,
-		styles.nonInteractive,
+		styles$1.timeslotLine,
+		styles$1.nonInteractive,
 		{
 			left: hourColumnWidth,
 			backgroundColor: theme.colors.gridLine
@@ -561,16 +582,18 @@ const TimeslotLine = ({ hour, minHour, fraction, cellHeight, hourColumnWidth })
 	] });
 };
 const NowIndicator = ({ cellHeight, nowHours, minHour, left, width, color }) => {
+	const theme = useCalendarTheme();
 	const animatedStyle = useAnimatedStyle(() => ({ top: (nowHours - minHour) * cellHeight.value }), [nowHours, minHour]);
 	return /* @__PURE__ */ jsx(Animated.View, { style: [
-		styles.nowIndicator,
-		styles.nonInteractive,
+		styles$1.nowIndicator,
+		styles$1.nonInteractive,
 		{
 			left,
 			width,
 			backgroundColor: color
 		},
-		animatedStyle
+		animatedStyle,
+		theme.containers.nowIndicator
 	] });
 };
 const ShadeBand = ({ cellHeight, startHour, endHour, minHour, left, width, color }) => {
@@ -585,8 +608,8 @@ const ShadeBand = ({ cellHeight, startHour, endHour, minHour, left, width, color
 	return /* @__PURE__ */ jsx(Animated.View, {
 		testID: "business-hours-shade",
 		style: [
-			styles.shadeBand,
-			styles.nonInteractive,
+			styles$1.shadeBand,
+			styles$1.nonInteractive,
 			{
 				left,
 				width,
@@ -650,7 +673,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		const { locationX, locationY } = event.nativeEvent;
 		const day = days[days.length === 1 ? 0 : Math.floor(locationX / dayWidth)];
 		if (!day) return null;
-		const minutes = Math.round((minHour + locationY / heightSource.value) * MINUTES_PER_HOUR);
+		const minutes = Math.round((minHour + locationY / heightSource.value) * MINUTES_PER_HOUR$1);
 		const pressed = new Date(day);
 		pressed.setHours(0, 0, 0, 0);
 		pressed.setMinutes(minutes);
@@ -667,7 +690,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 	const hoursRange = useMemo(() => Array.from({ length: maxHour - minHour }, (_, index) => minHour + index), [minHour, maxHour]);
 	const now = useNow(showNowIndicator && isActive);
 	const nowDayIndex = days.findIndex((day) => getIsToday$1(day));
-	const nowHours = (getHours(now) * MINUTES_PER_HOUR + getMinutes(now)) / MINUTES_PER_HOUR;
+	const nowHours = (getHours(now) * MINUTES_PER_HOUR$1 + getMinutes(now)) / MINUTES_PER_HOUR$1;
 	const nowInWindow = nowHours >= minHour && nowHours <= maxHour;
 	const fullHeightStyle = useAnimatedStyle(() => ({ height: (maxHour - minHour) * heightSource.value }), [
 		minHour,
@@ -715,7 +738,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 	const tapCell = useCallback((x, y) => {
 		const day = days[days.length === 1 ? 0 : Math.floor(x / dayWidth)];
 		if (!day) return;
-		const minutes = Math.round((minHour + y / heightSource.value) * MINUTES_PER_HOUR);
+		const minutes = Math.round((minHour + y / heightSource.value) * MINUTES_PER_HOUR$1);
 		const pressed = new Date(day);
 		pressed.setHours(0, 0, 0, 0);
 		pressed.setMinutes(minutes);
@@ -740,7 +763,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 			createCancelled.value = 0;
 		}).onUpdate((event) => {
 			if (createCancelled.value) return;
-			const stepPx = snapMinutes / MINUTES_PER_HOUR * heightSource.value;
+			const stepPx = snapMinutes / MINUTES_PER_HOUR$1 * heightSource.value;
 			const snap = (y) => stepPx > 0 ? Math.round(y / stepPx) * stepPx : y;
 			const startSnap = snap(createStartY.value);
 			const endSnap = snap(createStartY.value + event.translationY);
@@ -809,7 +832,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		opacity: createActive.value
 	}));
 	const cellLayer = onPressCell || onLongPressCell || createEnabled ? /* @__PURE__ */ jsx(Pressable, {
-		style: [styles.cellPressLayer, { left: hourColumnWidth }],
+		style: [styles$1.cellPressLayer, { left: hourColumnWidth }],
 		onPress: onPressCell ? handleBackgroundPress : void 0,
 		onLongPress: !createEnabled && onLongPressCell ? handleBackgroundLongPress : void 0,
 		tabIndex: -1,
@@ -817,7 +840,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		accessibilityElementsHidden: true
 	}) : null;
 	return /* @__PURE__ */ jsxs(View, {
-		style: styles.container,
+		style: styles$1.container,
 		children: [showAllDayEventCell ? /* @__PURE__ */ jsx(AllDayLane, {
 			days,
 			events,
@@ -842,15 +865,15 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 					y: initialScrollY
 				},
 				children: /* @__PURE__ */ jsxs(Animated.View, {
-					style: [styles.content, fullHeightStyle],
+					style: [styles$1.content, fullHeightStyle],
 					children: [
 						cellLayer && backgroundGesture ? /* @__PURE__ */ jsx(GestureDetector, {
 							gesture: backgroundGesture,
 							children: cellLayer
 						}) : cellLayer,
 						days.map((day, dayIndex) => isWeekend$1(day) ? /* @__PURE__ */ jsx(Animated.View, { style: [
-							styles.weekendColumn,
-							styles.nonInteractive,
+							styles$1.weekendColumn,
+							styles$1.nonInteractive,
 							{ backgroundColor: theme.colors.weekendBackground },
 							{
 								left: dayLeft(dayIndex),
@@ -861,8 +884,8 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 						calendarCellStyle ? days.map((day, dayIndex) => {
 							const cellStyle = calendarCellStyle(day);
 							return cellStyle ? /* @__PURE__ */ jsx(Animated.View, { style: [
-								styles.weekendColumn,
-								styles.nonInteractive,
+								styles$1.weekendColumn,
+								styles$1.nonInteractive,
 								{
 									left: dayLeft(dayIndex),
 									width: dayWidth
@@ -881,8 +904,8 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 							color: theme.colors.outsideHoursBackground
 						}, `closed-${day.toISOString()}-${bandIndex}`))) : null,
 						days.map((day, dayIndex) => /* @__PURE__ */ jsx(Animated.View, { style: [
-							styles.daySeparator,
-							styles.nonInteractive,
+							styles$1.daySeparator,
+							styles$1.nonInteractive,
 							{ backgroundColor: theme.colors.gridLine },
 							{ left: dayLeft(dayIndex) },
 							fullHeightStyle
@@ -933,7 +956,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 							color: theme.colors.nowIndicator
 						}) : null,
 						createEnabled ? /* @__PURE__ */ jsx(Animated.View, { style: [
-							styles.createGhost,
+							styles$1.createGhost,
 							{ pointerEvents: "none" },
 							{
 								backgroundColor: theme.colors.eventBackground,
@@ -948,10 +971,15 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 	});
 }
 const TimetablePage = memo(TimetablePageInner);
-function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellHeight, hourHeight = 48, weekStartsOn, renderEvent, 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 }) {
 	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;
+	const labeledRenderEvent = useMemo(() => withEventAccessibilityLabel(renderEvent, eventAccessibilityLabel, ampm), [
+		renderEvent,
+		eventAccessibilityLabel,
+		ampm
+	]);
 	const { width, height } = useWindowDimensions();
 	const listRef = useRef(null);
 	const containerRef = useRef(null);
@@ -961,7 +989,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 	const [measured, setMeasured] = useState(false);
 	const weekAnchored = mode === "week" || mode === "custom" && weekEndsOn != null;
 	const step = weekAnchored ? 7 : viewDayCount(mode, numberOfDays);
-	const seedDefaultY = Math.max(0, scrollOffsetMinutes / MINUTES_PER_HOUR - clampedMinHour) * hourHeight;
+	const seedDefaultY = Math.max(0, scrollOffsetMinutes / MINUTES_PER_HOUR$1 - clampedMinHour) * hourHeight;
 	const scrollY = useSharedValue(seedDefaultY);
 	const offsetSeedRef = useRef(null);
 	const captureOffsetSeed = useCallback((y) => {
@@ -1143,7 +1171,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 			minHourHeight,
 			maxHourHeight,
 			showNowIndicator,
-			renderEvent,
+			renderEvent: labeledRenderEvent,
 			keyExtractor,
 			snapMinutes: Math.max(1, dragStepMinutes),
 			showDragHandle,
@@ -1185,7 +1213,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		minHourHeight,
 		maxHourHeight,
 		showNowIndicator,
-		renderEvent,
+		labeledRenderEvent,
 		keyExtractor,
 		dragStepMinutes,
 		showDragHandle,
@@ -1203,7 +1231,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 	}), [events, activeIndex]);
 	return /* @__PURE__ */ jsxs(View, {
 		ref: containerRef,
-		style: styles.container,
+		style: styles$1.container,
 		children: [
 			renderHeader ? renderHeader(headerDays) : /* @__PURE__ */ jsx(DefaultHeader, {
 				days: headerDays,
@@ -1212,13 +1240,14 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 				hourColumnWidth,
 				showWeekNumber,
 				weekNumberPrefix,
+				weekdayFormat,
 				locale,
 				activeDate,
 				onPressDateHeader
 			}),
 			headerComponent,
 			/* @__PURE__ */ jsx(View, {
-				style: styles.pager,
+				style: styles$1.pager,
 				onLayout: (event) => {
 					setPageHeight(event.nativeEvent.layout.height);
 					setContainerWidth(event.nativeEvent.layout.width);
@@ -1226,7 +1255,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 				},
 				children: /* @__PURE__ */ jsx(LegendList, {
 					ref: listRef,
-					style: isWeb ? [styles.pagerList, styles.webNoScroll] : styles.pagerList,
+					style: isWeb ? [styles$1.pagerList, styles$1.webNoScroll] : styles$1.pagerList,
 					data: pageDates,
 					extraData: listExtraData,
 					horizontal: true,
@@ -1256,7 +1285,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 *
 * @example
 * ```tsx
-* import { TimeGrid } from "react-native-super-calendar";
+* import { TimeGrid } from "@super-calendar/native";
 *
 * <TimeGrid
 *   mode="week"
@@ -1268,13 +1297,13 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 * ```
 */
 const TimeGrid = memo(TimeGridInner);
-const DefaultHeader = ({ days, mode, width, hourColumnWidth, showWeekNumber, weekNumberPrefix = "W", locale, activeDate, onPressDateHeader }) => {
+const DefaultHeader = ({ days, mode, width, hourColumnWidth, showWeekNumber, weekNumberPrefix = "W", weekdayFormat, locale, activeDate, onPressDateHeader }) => {
 	const theme = useCalendarTheme();
 	const dayWidth = (width - hourColumnWidth) / days.length;
 	return /* @__PURE__ */ jsxs(View, {
-		style: [styles.headerRow, { borderBottomColor: theme.colors.gridLine }],
+		style: [styles$1.headerRow, { borderBottomColor: theme.colors.gridLine }],
 		children: [/* @__PURE__ */ jsx(View, {
-			style: [styles.weekNumberGutter, { width: hourColumnWidth }],
+			style: [styles$1.weekNumberGutter, { width: hourColumnWidth }],
 			children: showWeekNumber && hourColumnWidth > 0 && days[0] ? /* @__PURE__ */ jsx(Text, {
 				style: [theme.text.hourLabel, { color: theme.colors.textMuted }],
 				allowFontScaling: false,
@@ -1284,29 +1313,34 @@ const DefaultHeader = ({ days, mode, width, hourColumnWidth, showWeekNumber, wee
 			day,
 			mode,
 			width: dayWidth,
+			weekdayFormat,
 			locale,
 			activeDate,
 			onPressDateHeader
 		}, day.toISOString()))]
 	});
 };
-const DayHeader = ({ day, width, locale, activeDate, onPressDateHeader }) => {
+const DayHeader = ({ day, width, weekdayFormat = "short", locale, activeDate, onPressDateHeader }) => {
 	const theme = useCalendarTheme();
 	const isToday = getIsToday$1(day);
 	const isHighlighted = activeDate ? isSameCalendarDay$1(day, activeDate) : isToday;
 	return /* @__PURE__ */ jsxs(Pressable, {
-		style: [styles.dayHeader, { width }],
+		style: [
+			styles$1.dayHeader,
+			{ width },
+			theme.containers.columnHeader
+		],
 		onPress: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
 		disabled: !onPressDateHeader,
 		accessibilityRole: onPressDateHeader ? "button" : void 0,
 		children: [/* @__PURE__ */ jsx(Text, {
-			style: [styles.dayHeaderWeekday, { color: theme.colors.textMuted }],
+			style: [styles$1.dayHeaderWeekday, { color: theme.colors.textMuted }],
 			allowFontScaling: false,
-			children: format(day, "EEE", { locale })
+			children: format(day, weekdayFormatToken$1(weekdayFormat), { locale })
 		}), /* @__PURE__ */ jsx(View, {
-			style: [styles.dayHeaderBadge, isHighlighted && { backgroundColor: theme.colors.todayBackground }],
+			style: [styles$1.dayHeaderBadge, isHighlighted && { backgroundColor: theme.colors.todayBackground }],
 			children: /* @__PURE__ */ jsx(Text, {
-				style: [styles.dayHeaderNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
+				style: [styles$1.dayHeaderNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
 				allowFontScaling: false,
 				...isToday && { accessibilityLabel: `Today, ${day.getDate()}` },
 				children: day.getDate()
@@ -1314,7 +1348,7 @@ const DayHeader = ({ day, width, locale, activeDate, onPressDateHeader }) => {
 		})]
 	});
 };
-const styles = StyleSheet.create({
+const styles$1 = StyleSheet.create({
 	pager: { flex: 1 },
 	pagerList: { flex: 1 },
 	container: { flex: 1 },
@@ -1437,7 +1471,7 @@ function visibleRange(mode, date, weekStartsOn, numberOfDays, weekEndsOn) {
 *
 * @example
 * ```tsx
-* import { Calendar, type CalendarEvent } from "react-native-super-calendar";
+* import { Calendar, type CalendarEvent } from "@super-calendar/native";
 *
 * function MyCalendar() {
 *   const [date, setDate] = useState(new Date());
@@ -1456,7 +1490,7 @@ 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, numberOfDays, weekEndsOn, renderEvent = DefaultEvent, 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, activeDate, isRTL, freeSwipe, renderTimeGridHeader, renderHeaderForMonthView, renderCustomDateForMonth, itemSeparatorComponent }) {
 	const mergedTheme = useMemo(() => mergeTheme(theme), [theme]);
 	const internalCellHeight = useSharedValue(hourHeight);
 	const cellHeight = cellHeightProp ?? internalCellHeight;
@@ -1478,7 +1512,7 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 		weekEndsOn
 	]);
 	const resolvedRenderEvent = useMemo(() => {
-		if (eventCellStyle == null && ampm == null && showTime == null && ellipsizeTitle == null && allDayLabel == null) return renderEvent;
+		if (eventCellStyle == null && ampm == null && showTime == null && ellipsizeTitle == null && allDayLabel == null && eventAccessibilityLabel == null) return renderEvent;
 		const Base = renderEvent;
 		return function StyledEvent(props) {
 			const cellStyle = typeof eventCellStyle === "function" ? eventCellStyle(props.event) : eventCellStyle;
@@ -1488,7 +1522,12 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 				ampm,
 				showTime,
 				ellipsizeTitle,
-				allDayLabel
+				allDayLabel,
+				accessibilityLabel: eventAccessibilityLabel ? eventAccessibilityLabel(props.event, {
+					mode: props.mode,
+					isAllDay: props.isAllDay ?? false,
+					ampm: ampm ?? false
+				}) : props.accessibilityLabel
 			});
 		};
 	}, [
@@ -1497,7 +1536,8 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 		ampm,
 		showTime,
 		ellipsizeTitle,
-		allDayLabel
+		allDayLabel,
+		eventAccessibilityLabel
 	]);
 	return /* @__PURE__ */ jsx(CalendarThemeProvider, {
 		value: mergedTheme,
@@ -1506,6 +1546,7 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 			events,
 			maxVisibleEventCount,
 			weekStartsOn,
+			weekdayFormat,
 			locale,
 			sortedMonthView,
 			moreLabel,
@@ -1546,6 +1587,7 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 			cellHeight,
 			hourHeight,
 			weekStartsOn,
+			weekdayFormat,
 			renderEvent: resolvedRenderEvent,
 			keyExtractor,
 			scrollOffsetMinutes,
@@ -1589,4 +1631,324 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 	});
 }
 //#endregion
-export { Agenda, Calendar, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, DefaultEvent, DefaultMonthEvent, MonthList, MonthPager, MonthView, 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 };
+//#region src/components/ResourceTimeline.tsx
+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 theme = useCalendarTheme();
+	const time = eventTimeLabel({
+		mode: "day",
+		isAllDay: false,
+		start: event.start,
+		end: event.end,
+		ampm: false,
+		showTime: true
+	});
+	return /* @__PURE__ */ jsxs(View, {
+		style: [
+			styles.bar,
+			{ backgroundColor: theme.colors.eventBackground },
+			theme.containers.timeGridEvent
+		],
+		children: [/* @__PURE__ */ jsx(Text, {
+			numberOfLines: 1,
+			style: [theme.text.eventTitle, { color: theme.colors.eventText }],
+			allowFontScaling: false,
+			children: event.title
+		}), time && width > 56 ? /* @__PURE__ */ jsx(Text, {
+			numberOfLines: 1,
+			style: [styles.barTime, { color: theme.colors.eventText }],
+			allowFontScaling: false,
+			children: time
+		}) : null]
+	});
+}
+function ResourceBar({ pe, left, width, laneHeight, hourWidth, snapMinutes, Renderer, onPress, onDragEvent, theme }) {
+	const moveX = useSharedValue(0);
+	const resizeW = useSharedValue(0);
+	const latest = useRef({
+		event: pe.event,
+		onDragEvent
+	});
+	latest.current = {
+		event: pe.event,
+		onDragEvent
+	};
+	const draggable = !pe.event.disabled;
+	useEffect(() => {
+		moveX.value = 0;
+		resizeW.value = 0;
+	}, [
+		pe.startHours,
+		pe.durationHours,
+		moveX,
+		resizeW
+	]);
+	const snapBack = useCallback(() => {
+		moveX.value = 0;
+		resizeW.value = 0;
+	}, [moveX, resizeW]);
+	const commit = useCallback((deltaStartMin, deltaEndMin) => {
+		const { event, onDragEvent: handler } = latest.current;
+		const next = resolveDraggedBounds(event.start, event.end, deltaStartMin, deltaEndMin, snapMinutes);
+		if (!next) {
+			snapBack();
+			return;
+		}
+		if (handler(event, next.start, next.end) === false) snapBack();
+	}, [snapMinutes, snapBack]);
+	const barStyle = useAnimatedStyle(() => ({
+		transform: [{ translateX: moveX.value }],
+		width: Math.max(width + resizeW.value, 2)
+	}), [width]);
+	const moveGesture = useMemo(() => Gesture.Pan().enabled(draggable).activateAfterLongPress(MOVE_ACTIVATE_MS).onUpdate((e) => {
+		moveX.value = e.translationX;
+	}).onEnd((e) => {
+		const delta = snapDeltaMinutes(e.translationX, hourWidth, snapMinutes);
+		if (delta === 0) {
+			moveX.value = 0;
+			return;
+		}
+		moveX.value = delta / MINUTES_PER_HOUR * hourWidth;
+		runOnJS(commit)(delta, delta);
+	}), [
+		draggable,
+		hourWidth,
+		snapMinutes,
+		moveX,
+		commit
+	]);
+	const resizeGesture = useMemo(() => Gesture.Pan().enabled(draggable).onUpdate((e) => {
+		resizeW.value = e.translationX;
+	}).onEnd((e) => {
+		const delta = snapDeltaMinutes(e.translationX, hourWidth, snapMinutes);
+		if (delta === 0) {
+			resizeW.value = 0;
+			return;
+		}
+		resizeW.value = delta / MINUTES_PER_HOUR * hourWidth;
+		runOnJS(commit)(0, delta);
+	}), [
+		draggable,
+		hourWidth,
+		snapMinutes,
+		resizeW,
+		commit
+	]);
+	return /* @__PURE__ */ jsxs(Animated.View, {
+		style: [{
+			position: "absolute",
+			left,
+			top: pe.column * laneHeight,
+			height: laneHeight,
+			padding: 1
+		}, barStyle],
+		children: [/* @__PURE__ */ jsx(GestureDetector, {
+			gesture: moveGesture,
+			children: /* @__PURE__ */ jsx(Pressable, {
+				onPress,
+				accessibilityRole: "button",
+				accessibilityLabel: pe.event.title,
+				style: styles.fill,
+				children: /* @__PURE__ */ jsx(Renderer, {
+					event: pe.event,
+					width,
+					onPress
+				})
+			})
+		}), /* @__PURE__ */ jsx(GestureDetector, {
+			gesture: resizeGesture,
+			children: /* @__PURE__ */ jsx(View, {
+				style: [styles.resizeGrip, { backgroundColor: theme.colors.eventText }],
+				accessibilityRole: "adjustable",
+				accessibilityLabel: `Resize ${pe.event.title}`
+			})
+		})]
+	});
+}
+/**
+* A horizontal resource timeline: rows are resources (rooms, people, machines)
+* and the x-axis is one day's hours. Events sit in their resource's row, and
+* overlapping events in the same row stack into sub-lanes (via the shared
+* `layoutDayEvents`). The grid scrolls horizontally when the axis is wider than
+* the screen. Pass `onDragEvent` to enable long-press drag-to-move and edge
+* resize along the time axis. Read the theme from context — wrap in
+* `CalendarThemeProvider` (or render inside `<Calendar>`) to restyle.
+*
+* @example
+* ```tsx
+* <ResourceTimeline
+*   date={new Date()}
+*   resources={[{ id: "a", title: "Room A" }, { id: "b", title: "Room B" }]}
+*   events={events} // each event carries a `resourceId`
+* />
+* ```
+*/
+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 }) {
+	const theme = useCalendarTheme();
+	const Renderer = renderEvent ?? DefaultBar;
+	const hours = useMemo(() => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i), [startHour, endHour]);
+	const trackWidth = (endHour - startHour) * hourWidth;
+	const byResource = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const resource of resources) {
+			const own = events.filter((event) => resourceId(event) === resource.id);
+			map.set(resource.id, layoutDayEvents$1(own, date));
+		}
+		return map;
+	}, [
+		resources,
+		events,
+		resourceId,
+		date
+	]);
+	return /* @__PURE__ */ jsx(ScrollView, {
+		horizontal: true,
+		showsHorizontalScrollIndicator: true,
+		style: styles.root,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: { width: labelWidth + trackWidth },
+			children: [/* @__PURE__ */ jsxs(View, {
+				style: [styles.header, { borderBottomColor: theme.colors.gridLine }],
+				children: [/* @__PURE__ */ jsx(View, { style: { width: labelWidth } }), /* @__PURE__ */ jsx(View, {
+					style: {
+						width: trackWidth,
+						height: 24
+					},
+					children: hours.map((h) => /* @__PURE__ */ jsx(Text, {
+						allowFontScaling: false,
+						style: [styles.hourTick, {
+							left: (h - startHour) * hourWidth,
+							color: theme.colors.textMuted
+						}],
+						children: formatHour(h, { ampm })
+					}, h))
+				})]
+			}), resources.map((resource) => {
+				const positioned = byResource.get(resource.id) ?? [];
+				return /* @__PURE__ */ jsxs(View, {
+					style: [
+						styles.row,
+						{
+							height: rowHeight,
+							borderBottomColor: theme.colors.gridLine
+						},
+						theme.containers.resourceRow
+					],
+					children: [/* @__PURE__ */ jsx(View, {
+						style: [
+							styles.label,
+							{
+								width: labelWidth,
+								borderRightColor: theme.colors.gridLine
+							},
+							theme.containers.resourceLabel
+						],
+						children: /* @__PURE__ */ jsx(Text, {
+							numberOfLines: 1,
+							style: { color: theme.colors.text },
+							allowFontScaling: false,
+							children: resource.title ?? resource.id
+						})
+					}), /* @__PURE__ */ jsxs(View, {
+						style: { width: trackWidth },
+						children: [hours.slice(1).map((h) => /* @__PURE__ */ jsx(View, {
+							pointerEvents: "none",
+							style: [styles.gridLine, {
+								left: (h - startHour) * hourWidth,
+								backgroundColor: theme.colors.gridLine
+							}]
+						}, h)), positioned.map((pe, idx) => {
+							const left = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourWidth;
+							const right = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourWidth;
+							const width = Math.max(right - left, 2);
+							const laneHeight = rowHeight / pe.columns;
+							const onPress = () => onPressEvent?.(pe.event);
+							if (onDragEvent) return /* @__PURE__ */ jsx(ResourceBar, {
+								pe,
+								left,
+								width,
+								laneHeight,
+								hourWidth,
+								snapMinutes: dragStepMinutes,
+								Renderer,
+								onPress,
+								onDragEvent,
+								theme
+							}, idx);
+							return /* @__PURE__ */ jsx(Pressable, {
+								onPress,
+								accessibilityRole: "button",
+								accessibilityLabel: pe.event.title,
+								style: {
+									position: "absolute",
+									left,
+									width,
+									top: pe.column * laneHeight,
+									height: laneHeight,
+									padding: 1
+								},
+								children: /* @__PURE__ */ jsx(Renderer, {
+									event: pe.event,
+									width,
+									onPress
+								})
+							}, idx);
+						})]
+					})]
+				}, resource.id);
+			})]
+		})
+	});
+}
+const styles = StyleSheet.create({
+	root: { flexGrow: 0 },
+	header: {
+		flexDirection: "row",
+		borderBottomWidth: StyleSheet.hairlineWidth
+	},
+	hourTick: {
+		position: "absolute",
+		top: 4,
+		fontSize: 10
+	},
+	row: {
+		flexDirection: "row",
+		borderBottomWidth: StyleSheet.hairlineWidth
+	},
+	label: {
+		justifyContent: "center",
+		paddingHorizontal: 10,
+		borderRightWidth: StyleSheet.hairlineWidth
+	},
+	gridLine: {
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		width: StyleSheet.hairlineWidth
+	},
+	bar: {
+		flex: 1,
+		borderRadius: 6,
+		paddingHorizontal: 6,
+		paddingVertical: 2,
+		overflow: "hidden"
+	},
+	barTime: {
+		fontSize: 11,
+		opacity: .75
+	},
+	fill: { flex: 1 },
+	resizeGrip: {
+		position: "absolute",
+		right: 1,
+		top: "30%",
+		bottom: "30%",
+		width: 4,
+		borderRadius: 2,
+		opacity: .5
+	}
+});
+//#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 };