@super-calendar/native 2.1.5 → 2.2.0

package/dist/{MonthList-BKlLes2B.mjs → MonthList-DZx8rPle.mjs}

@@ -1,6 +1,6 @@
 import { addMonths, differenceInCalendarMonths, format, isSameMonth, startOfDay, startOfMonth } from "date-fns";
 import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { CalendarSelectionProvider, buildMonthWeeks, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventTimeLabel, getIsToday, getWeekDays, groupEventsByDay, isAllDayEvent, isDateSelectable, isSameCalendarDay, isWeekend, lightColors, monthEventCapacity, monthVisibleCount, rangeBandKind, titleEllipsizeMode, titleNumberOfLines, useCalendarSelection } from "@super-calendar/core";
+import { CalendarSelectionProvider, buildMonthWeeks, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventTimeLabel, getIsToday, getWeekDays, groupEventsByDay, isAllDayEvent, isDateSelectable, isSameCalendarDay, isWeekend, lightColors, monthEventCapacity, monthVisibleCount, rangeBandKind, titleEllipsizeMode, titleNumberOfLines, useCalendarSelection, weekdayFormatToken } from "@super-calendar/core";
 import { LegendList } from "@legendapp/list/react-native";
 import { Platform, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -18,6 +18,10 @@ const defaultTheme = {
 			fontSize: 13,
 			fontWeight: "700"
 		},
+		monthTitle: {
+			fontSize: 17,
+			fontWeight: "700"
+		},
 		dateCell: {
 			fontSize: 13,
 			fontWeight: "700"
@@ -33,6 +37,23 @@ const defaultTheme = {
 			lineHeight: 16
 		}
 	},
+	containers: {
+		monthContainer: {},
+		weekdayHeader: {},
+		weekRow: {},
+		dayCell: {},
+		dayBadge: {},
+		monthEvent: {},
+		columnHeader: {},
+		timeGridEvent: {},
+		nowIndicator: {},
+		resourceRow: {},
+		resourceLabel: {},
+		agendaList: {},
+		agendaRow: {},
+		allDayLane: {},
+		allDayColumn: {}
+	},
 	todayBadgeRadius: 999,
 	rangeBandHeight: 22
 };
@@ -44,6 +65,7 @@ const defaultTheme = {
 const darkTheme = {
 	colors: darkColors,
 	text: defaultTheme.text,
+	containers: defaultTheme.containers,
 	todayBadgeRadius: defaultTheme.todayBadgeRadius,
 	rangeBandHeight: defaultTheme.rangeBandHeight
 };
@@ -59,6 +81,10 @@ function mergeTheme(theme) {
 			...defaultTheme.text,
 			...theme.text
 		},
+		containers: {
+			...defaultTheme.containers,
+			...theme.containers
+		},
 		todayBadgeRadius: theme.todayBadgeRadius ?? defaultTheme.todayBadgeRadius,
 		rangeBandHeight: theme.rangeBandHeight ?? defaultTheme.rangeBandHeight
 	};
@@ -105,6 +131,29 @@ function useWebPagerKeys(enabled, onPage) {
 	}, [enabled, onPage]);
 }
 //#endregion
+//#region src/utils/withEventAccessibilityLabel.tsx
+/**
+* Wrap an event renderer so it injects a consumer's `eventAccessibilityLabel`
+* override into `RenderEventArgs.accessibilityLabel`. The built-in renderers use
+* that string in place of their default label, and custom renderers can read it
+* too. Returns the renderer unchanged when no override is set, so the common path
+* pays nothing.
+*/
+function withEventAccessibilityLabel(renderEvent, labeler, ampm) {
+	if (!labeler) return renderEvent;
+	const Base = renderEvent;
+	return function LabeledEvent(props) {
+		return /* @__PURE__ */ jsx(Base, {
+			...props,
+			accessibilityLabel: labeler(props.event, {
+				mode: props.mode,
+				isAllDay: props.isAllDay ?? false,
+				ampm
+			})
+		});
+	};
+}
+//#endregion
 //#region src/components/MonthView.tsx
 const isWeb$2 = Platform.OS === "web";
 const DAY_CELL_PADDING_TOP = 4;
@@ -114,7 +163,7 @@ const CELL_ROW_GAP = 2;
 const CHIP_PADDING_V = 2;
 const FALLBACK_VISIBLE_COUNT = 3;
 const numericStyle = (value, fallback) => typeof value === "number" ? value : fallback;
-function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, locale, sortedMonthView = true, moreLabel = "{moreCount} More", showAdjacentMonths = true, disableMonthEventCellPress = false, isRTL = false, showSixWeeks = false, showTitle = true, showWeekdays = true, activeDate, selectedDates: selectedDatesProp, selectedRange: selectedRangeProp, fillCellOnSelection = false, minDate: minDateProp, maxDate: maxDateProp, isDateDisabled: isDateDisabledProp, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, renderCustomDateForMonth, onDayPointerDown, onDayPointerEnter }) {
+function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat = "short", locale, sortedMonthView = true, moreLabel = "{moreCount} More", showAdjacentMonths = true, disableMonthEventCellPress = false, isRTL = false, showSixWeeks = false, showTitle = true, showWeekdays = true, activeDate, selectedDates: selectedDatesProp, selectedRange: selectedRangeProp, fillCellOnSelection = false, minDate: minDateProp, maxDate: maxDateProp, isDateDisabled: isDateDisabledProp, calendarCellStyle, renderEvent, eventAccessibilityLabel, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, renderCustomDateForMonth, onDayPointerDown, onDayPointerEnter }) {
 	const theme = useCalendarTheme();
 	const selection = useCalendarSelection();
 	const selectedDates = selectedDatesProp ?? selection.selectedDates;
@@ -122,7 +171,7 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 	const minDate = minDateProp ?? selection.minDate;
 	const maxDate = maxDateProp ?? selection.maxDate;
 	const isDateDisabled = isDateDisabledProp ?? selection.isDateDisabled;
-	const RenderEventComponent = renderEvent;
+	const RenderEventComponent = useMemo(() => withEventAccessibilityLabel(renderEvent, eventAccessibilityLabel, false), [renderEvent, eventAccessibilityLabel]);
 	const [gridHeight, setGridHeight] = useState(0);
 	const [hoveredKey, setHoveredKey] = useState(null);
 	const [pressedKey, setPressedKey] = useState(null);
@@ -172,11 +221,15 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 	const showGrid = events.length > 0;
 	const renderDay = (day) => {
 		const isCurrentMonth = isSameMonth(day, date);
-		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ jsx(View, { style: [styles$3.dayCell, showGrid && {
-			borderTopWidth: StyleSheet.hairlineWidth,
-			borderRightWidth: StyleSheet.hairlineWidth,
-			borderColor: theme.colors.gridLine
-		}] }, day.toISOString());
+		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ jsx(View, { style: [
+			styles$3.dayCell,
+			showGrid && {
+				borderTopWidth: StyleSheet.hairlineWidth,
+				borderRightWidth: StyleSheet.hairlineWidth,
+				borderColor: theme.colors.gridLine
+			},
+			theme.containers.dayCell
+		] }, day.toISOString());
 		const dayEvents = eventsByDay.get(startOfDay(day).toISOString()) ?? [];
 		const isToday = getIsToday(day);
 		const isHighlighted = activeDate ? isSameCalendarDay(day, activeDate) : isToday;
@@ -213,7 +266,8 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 					borderColor: theme.colors.gridLine
 				},
 				isWeekend(day) && { backgroundColor: theme.colors.weekendBackground },
-				calendarCellStyle?.(day)
+				calendarCellStyle?.(day),
+				theme.containers.dayCell
 			],
 			activeOpacity: showGrid ? .2 : 1,
 			...showGrid ? null : {
@@ -276,7 +330,8 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 							backgroundColor: theme.colors.hoverBackground,
 							borderRadius: theme.todayBadgeRadius
 						},
-						!showGrid && pressedKey === dayKey && { opacity: .2 }
+						!showGrid && pressedKey === dayKey && { opacity: .2 },
+						theme.containers.dayBadge
 					],
 					children: /* @__PURE__ */ jsx(Text, {
 						style: [theme.text.dateCell, { color: dateColor }],
@@ -285,7 +340,7 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 					})
 				}),
 				dayEvents.slice(0, visibleCount).map((event, index) => /* @__PURE__ */ jsx(View, {
-					style: styles$3.monthEvent,
+					style: [styles$3.monthEvent, theme.containers.monthEvent],
 					children: /* @__PURE__ */ jsx(RenderEventComponent, {
 						event,
 						mode: "month",
@@ -317,12 +372,16 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 		style: styles$3.root,
 		children: [
 			showTitle ? /* @__PURE__ */ jsx(Text, {
-				style: [styles$3.title, { color: theme.colors.text }],
+				style: [
+					styles$3.title,
+					theme.text.monthTitle,
+					{ color: theme.colors.text }
+				],
 				allowFontScaling: false,
 				children: format(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}) : null,
 			showWeekdays ? /* @__PURE__ */ jsx(View, {
-				style: styles$3.weekdayHeader,
+				style: [styles$3.weekdayHeader, theme.containers.weekdayHeader],
 				children: weekdayLabels.map((day) => /* @__PURE__ */ jsx(Text, {
 					style: [
 						theme.text.weekday,
@@ -330,14 +389,14 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 						{ color: theme.colors.textMuted }
 					],
 					allowFontScaling: false,
-					children: format(day, "EEE", { locale })
+					children: format(day, weekdayFormatToken(weekdayFormat), { locale })
 				}, day.toISOString()))
 			}) : null,
 			/* @__PURE__ */ jsx(View, {
 				style: styles$3.container,
 				onLayout: handleLayout,
 				children: weeks.map((week) => /* @__PURE__ */ jsx(View, {
-					style: styles$3.weekRow,
+					style: [styles$3.weekRow, theme.containers.weekRow],
 					children: week.map((day) => renderDay(day))
 				}, week[0].toISOString()))
 			})
@@ -364,8 +423,6 @@ const MonthView = memo(MonthViewInner);
 const styles$3 = StyleSheet.create({
 	root: { flex: 1 },
 	title: {
-		fontSize: 17,
-		fontWeight: "700",
 		paddingTop: 10,
 		paddingHorizontal: 14,
 		paddingBottom: 6
@@ -417,7 +474,7 @@ const styles$3 = StyleSheet.create({
 const isWeb$1 = Platform.OS === "web";
 const PAGE_WINDOW$1 = 60;
 const PAGE_VIEWABILITY = { itemVisiblePercentThreshold: 90 };
-function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe = false, swipeEnabled = true, showSixWeeks = false, activeDate, renderHeaderForMonthView, renderCustomDateForMonth }) {
+function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat = "short", locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe = false, swipeEnabled = true, showSixWeeks = false, activeDate, renderHeaderForMonthView, renderCustomDateForMonth }) {
 	const theme = useCalendarTheme();
 	const { width, height } = useWindowDimensions();
 	const listRef = useRef(null);
@@ -545,15 +602,20 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, loc
 	]);
 	return /* @__PURE__ */ jsxs(View, {
 		ref: containerRef,
-		style: styles$2.container,
+		style: [styles$2.container, theme.containers.monthContainer],
 		children: [
 			/* @__PURE__ */ jsx(Text, {
-				style: [styles$2.monthTitle, { color: theme.colors.text }],
+				style: [
+					styles$2.monthTitle,
+					theme.text.monthTitle,
+					{ color: theme.colors.text }
+				],
 				allowFontScaling: false,
 				children: format(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}),
 			renderHeaderForMonthView ? renderHeaderForMonthView(weekDays) : /* @__PURE__ */ jsx(MonthWeekdayHeader, {
 				weekDays,
+				weekdayFormat,
 				locale
 			}),
 			/* @__PURE__ */ jsx(View, {
@@ -604,10 +666,10 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, loc
 * ```
 */
 const MonthPager = memo(MonthPagerInner);
-const MonthWeekdayHeader = ({ weekDays, locale }) => {
+const MonthWeekdayHeader = ({ weekDays, weekdayFormat = "short", locale }) => {
 	const theme = useCalendarTheme();
 	return /* @__PURE__ */ jsx(View, {
-		style: styles$2.weekdayHeader,
+		style: [styles$2.weekdayHeader, theme.containers.weekdayHeader],
 		children: weekDays.map((day) => /* @__PURE__ */ jsx(Text, {
 			style: [
 				theme.text.weekday,
@@ -615,7 +677,7 @@ const MonthWeekdayHeader = ({ weekDays, locale }) => {
 				{ color: theme.colors.textMuted }
 			],
 			allowFontScaling: false,
-			children: format(day, "EEE", { locale })
+			children: format(day, weekdayFormatToken(weekdayFormat), { locale })
 		}, day.toISOString()))
 	});
 };
@@ -625,8 +687,6 @@ const styles$2 = StyleSheet.create({
 	pagerList: { flex: 1 },
 	webNoScroll: { overflow: "hidden" },
 	monthTitle: {
-		fontSize: 17,
-		fontWeight: "700",
 		paddingTop: 10,
 		paddingHorizontal: 14,
 		paddingBottom: 6
@@ -649,7 +709,7 @@ const styles$2 = StyleSheet.create({
 * default renderer for `MonthList`, so the `/picker` entry point stays free of
 * Reanimated.
 */
-function DefaultMonthEvent({ event, mode, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, cellStyle, onPress, onLongPress }) {
+function DefaultMonthEvent({ event, mode, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, accessibilityLabel: accessibilityLabelProp, cellStyle, onPress, onLongPress }) {
 	const theme = useCalendarTheme();
 	const isAllDayEvent = isAllDay ?? false;
 	const timeLabel = eventTimeLabel({
@@ -662,7 +722,7 @@ function DefaultMonthEvent({ event, mode, isAllDay, ampm = false, showTime = tru
 		allDayLabel
 	});
 	const ellipsizeMode = titleEllipsizeMode(ellipsizeTitle);
-	const accessibilityLabel = eventAccessibilityLabel({
+	const accessibilityLabel = accessibilityLabelProp ?? eventAccessibilityLabel({
 		title: event.title,
 		isAllDay: isAllDayEvent,
 		start: event.start,
@@ -731,7 +791,7 @@ const AUTOSCROLL_INTERVAL_MS = 16;
 const NO_EVENTS = [];
 const noop = () => {};
 const defaultKeyExtractor = (event) => `${event.start.toISOString()}|${event.end.toISOString()}|${event.title ?? ""}`;
-function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight: weekRowHeightProp, monthHeaderHeight = DEFAULT_MONTH_HEADER_HEIGHT, maxVisibleEventCount, locale, sortedMonthView, moreLabel, showAdjacentMonths = false, disableMonthEventCellPress, isRTL, activeDate, selectedDates, selectedRange, fillCellOnSelection, minDate, maxDate, isDateDisabled, calendarCellStyle, renderEvent = DefaultMonthEvent, keyExtractor = defaultKeyExtractor, onPressDay, onLongPressDay, onPressEvent = noop, onLongPressEvent, onPressMore, onSelectDrag, onChangeVisibleMonth, renderMonthHeader }) {
+function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekdayFormat = "short", weekRowHeight: weekRowHeightProp, monthHeaderHeight = DEFAULT_MONTH_HEADER_HEIGHT, maxVisibleEventCount, locale, sortedMonthView, moreLabel, showAdjacentMonths = false, disableMonthEventCellPress, isRTL, activeDate, selectedDates, selectedRange, fillCellOnSelection, minDate, maxDate, isDateDisabled, calendarCellStyle, renderEvent = DefaultMonthEvent, eventAccessibilityLabel, keyExtractor = defaultKeyExtractor, onPressDay, onLongPressDay, onPressEvent = noop, onLongPressEvent, onPressMore, onSelectDrag, onChangeVisibleMonth, renderMonthHeader }) {
 	const theme = useCalendarTheme();
 	const listRef = useRef(null);
 	const weekRowHeight = weekRowHeightProp ?? (events.length > 0 ? DEFAULT_EVENT_WEEK_ROW_HEIGHT : DEFAULT_WEEK_ROW_HEIGHT);
@@ -951,6 +1011,7 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight:
 				fillCellOnSelection,
 				calendarCellStyle,
 				renderEvent,
+				eventAccessibilityLabel,
 				keyExtractor,
 				onPressDay: dragEnabled ? handlePressDay : onPressDay,
 				onLongPressDay,
@@ -1022,7 +1083,7 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight:
 				children: weekDays.map((day) => /* @__PURE__ */ jsx(Text, {
 					style: [styles.weekdayLabel, { color: theme.colors.textMuted }],
 					allowFontScaling: false,
-					children: format(day, "EEE", { locale })
+					children: format(day, weekdayFormatToken(weekdayFormat), { locale })
 				}, day.toISOString()))
 			}), dragGesture && !isWeb ? /* @__PURE__ */ jsx(GestureDetector, {
 				gesture: dragGesture,
@@ -1086,4 +1147,4 @@ const styles = StyleSheet.create({
 	}
 });
 //#endregion
-export { useWebPagerKeys as a, defaultTheme as c, MonthView as i, mergeTheme as l, DefaultMonthEvent as n, CalendarThemeProvider as o, MonthPager as r, darkTheme as s, MonthList as t, useCalendarTheme as u };
+export { withEventAccessibilityLabel as a, darkTheme as c, useCalendarTheme as d, MonthView as i, defaultTheme as l, DefaultMonthEvent as n, useWebPagerKeys as o, MonthPager as r, CalendarThemeProvider as s, MonthList as t, mergeTheme as u };

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-import { C as defaultTheme, S as darkTheme, T as useCalendarTheme, _ as TimeGridMode, a as MonthPagerProps, b as CalendarThemeProvider, c as BusinessHours, d as EventKeyExtractor, f as ICalendarEvent, g as RenderEventArgs, h as RenderEvent, i as MonthPager, l as CalendarEvent, m as RecurrenceRule, n as MonthList, o as MonthView, p as RecurrenceFrequency, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as WeekStartsOn, w as mergeTheme, x as PartialCalendarTheme, y as CalendarTheme } from "./DefaultMonthEvent-C-BiOsXb.mjs";
+import { C as CalendarThemeProvider, D as mergeTheme, E as defaultTheme, O as useCalendarTheme, S as CalendarTheme, T as darkTheme, _ as RenderEvent, a as MonthPagerProps, b as WeekStartsOn, c as BusinessHours, d as EventAccessibilityLabelContext, f as EventAccessibilityLabeler, g as RecurrenceRule, h as RecurrenceFrequency, i as MonthPager, l as CalendarEvent, m as ICalendarEvent, n as MonthList, o as MonthView, p as EventKeyExtractor, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as RenderEventArgs, w as PartialCalendarTheme, x as WeekdayFormat, y as TimeGridMode } from "./DefaultMonthEvent-BlfDkmF5.mjs";
 import { Locale } from "date-fns";
 import { ComponentType, ReactElement } from "react";
 import { SharedValue, useSharedValue } from "react-native-reanimated";
-import { DateRange, DateSelectionConstraints, DaySelectionState, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, PositionedEvent, UseDateRangeOptions, UseMonthGridOptions, buildMonthGrid, buildMonthWeeks, daySelectionState, eventsInTimeZone, expandRecurringEvents, getIsToday, getViewDays, getWeekDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, minutesIntoDay, nextDateRange, toZonedTime, useDateRange, useMonthGrid } from "@super-calendar/core";
+import { CalendarEvent as CalendarEvent$1, DateRange, DateSelectionConstraints, DaySelectionState, EventAccessibilityLabeler as EventAccessibilityLabeler$1, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, PositionedEvent, UseDateRangeOptions, UseMonthGridOptions, WeekdayFormat as WeekdayFormat$1, buildMonthGrid, buildMonthWeeks, daySelectionState, eventsInTimeZone, expandRecurringEvents, getIsToday, getViewDays, getWeekDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, minutesIntoDay, nextDateRange, toZonedTime, useDateRange, useMonthGrid, weekdayFormatToken } from "@super-calendar/core";
 import { StyleProp, ViewStyle } from "react-native";
 
 //#region src/components/TimeGrid.d.ts
@@ -37,8 +37,15 @@ type TimeGridProps<T> = {
   events: CalendarEvent<T>[];
   cellHeight: SharedValue<number>; /** Initial per-hour row height in px; seeds scroll/zoom without reading the shared value during render. */
   hourHeight?: number;
-  weekStartsOn: WeekStartsOn;
+  weekStartsOn: WeekStartsOn; /** Column-header weekday label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat$1;
   renderEvent: RenderEvent<T>;
+  /**
+   * Override the screen-reader label for each event. Receives the event and a
+   * `{ mode, isAllDay, ampm }` context; return the full text to announce. Defaults
+   * to the built-in title-and-time label.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
   keyExtractor: EventKeyExtractor<T>;
   scrollOffsetMinutes?: number;
   hourColumnWidth?: number; /** Hide the left hour-axis column (lines stay, labels/gutter go). Default false. */
@@ -95,7 +102,9 @@ declare function TimeGridInner<T>({
   cellHeight,
   hourHeight,
   weekStartsOn,
+  weekdayFormat,
   renderEvent,
+  eventAccessibilityLabel,
   keyExtractor,
   scrollOffsetMinutes,
   hourColumnWidth: hourColumnWidthProp,
@@ -213,7 +222,8 @@ type CalendarProps<T> = {
   moreLabel?: string; /** Show dimmed adjacent-month days in the month grid. Default true. */
   showAdjacentMonths?: boolean; /** Ignore taps on month-cell events (day taps still fire). Default false. */
   disableMonthEventCellPress?: boolean; /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
-  weekStartsOn?: WeekStartsOn; /** Number of day columns when `mode="custom"`. Ignored by other modes. Default 1. */
+  weekStartsOn?: WeekStartsOn; /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat$1; /** Number of day columns when `mode="custom"`. Ignored by other modes. Default 1. */
   numberOfDays?: number;
   /**
    * Last weekday of a `custom` partial-week view (0–6). When set, `custom` shows
@@ -221,7 +231,13 @@ type CalendarProps<T> = {
    * precedence over `numberOfDays`. Ignored by other modes.
    */
   weekEndsOn?: WeekStartsOn; /** Replace the built-in event box. Return a `flex: 1` element. */
-  renderEvent?: RenderEvent<T>; /** Per-event style merged onto the built-in event box (static or a function of the event). */
+  renderEvent?: RenderEvent<T>;
+  /**
+   * Override the screen-reader label for each event. Receives the event and a
+   * `{ mode, isAllDay, ampm }` context; return the full text to announce. Applies
+   * across every view. Defaults to the built-in title-and-time label.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>; /** Per-event style merged onto the built-in event box (static or a function of the event). */
   eventCellStyle?: StyleProp<ViewStyle> | ((event: CalendarEvent<T>) => StyleProp<ViewStyle>); /** Per-date style for month cells and week/day columns (e.g. shade specific dates). */
   calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   /**
@@ -337,9 +353,11 @@ declare function Calendar<T>({
   showAdjacentMonths,
   disableMonthEventCellPress,
   weekStartsOn,
+  weekdayFormat,
   numberOfDays,
   weekEndsOn,
   renderEvent,
+  eventAccessibilityLabel,
   eventCellStyle,
   calendarCellStyle,
   businessHours,
@@ -427,9 +445,95 @@ declare function DefaultEvent<T>({
   showTime,
   ellipsizeTitle,
   allDayLabel,
+  accessibilityLabel: accessibilityLabelProp,
   cellStyle,
   onPress,
   onLongPress
 }: RenderEventArgs<T>): ReactElement;
 //#endregion
-export { Agenda, type AgendaProps, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarTheme, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultEvent, DefaultMonthEvent, type EventDragHandler, type EventDragStartHandler, type EventKeyExtractor, type HourRenderer, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type RenderEvent, type RenderEventArgs, TimeGrid, type TimeGridMode, type TimeGridProps, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, 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.d.ts
+/** A schedulable lane (room, person, machine) events are grouped under. */
+interface Resource {
+  /** Stable id events reference via their `resourceId`. */
+  id: string;
+  /** Row label; falls back to the id. */
+  title?: string;
+}
+/** Props passed to a custom resource-timeline event renderer. */
+interface ResourceEventArgs<T = unknown> {
+  event: CalendarEvent$1<T>;
+  /** Pixel width of the event bar. */
+  width: number;
+  onPress: () => void;
+}
+/** Props for {@link ResourceTimeline}. */
+interface ResourceTimelineProps<T = unknown> {
+  /** The day to lay out along the horizontal axis. */
+  date: Date;
+  /** The rows, top to bottom. */
+  resources: Resource[];
+  /** Events; each is placed in the row named by `resourceId(event)`. */
+  events: CalendarEvent$1<T>[];
+  /** Read an event's resource id. Default: `event.resourceId`. */
+  resourceId?: (event: CalendarEvent$1<T>) => string | undefined;
+  /** First hour shown (default 0). */
+  startHour?: number;
+  /** Last hour shown, exclusive (default 24). */
+  endHour?: number;
+  /** Pixels per hour along the axis (default 80). */
+  hourWidth?: number;
+  /** Height of each resource row in px (default 56). */
+  rowHeight?: number;
+  /** Width of the left resource-label column in px (default 140). */
+  labelWidth?: number;
+  /** 12-hour AM/PM axis labels (default false). */
+  ampm?: boolean;
+  /** Custom event renderer; falls back to the built-in bar. */
+  renderEvent?: ComponentType<ResourceEventArgs<T>>;
+  /** Tap an event. */
+  onPressEvent?: (event: CalendarEvent$1<T>) => void;
+  /**
+   * Enables drag-to-move and edge-resize along the time axis: long-press a bar to
+   * move it, or drag its right edge to resize. Called with the proposed new
+   * start/end; return `false` to reject the drop (it snaps back).
+   */
+  onDragEvent?: (event: CalendarEvent$1<T>, start: Date, end: Date) => void | boolean;
+  /** Snap dragged events to this many minutes (default 15). */
+  dragStepMinutes?: number;
+}
+/**
+ * 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`
+ * />
+ * ```
+ */
+declare function ResourceTimeline<T = unknown>({
+  date,
+  resources,
+  events,
+  resourceId,
+  startHour,
+  endHour,
+  hourWidth,
+  rowHeight,
+  labelWidth,
+  ampm,
+  renderEvent,
+  onPressEvent,
+  onDragEvent,
+  dragStepMinutes
+}: ResourceTimelineProps<T>): ReactElement;
+//#endregion
+export { Agenda, type AgendaProps, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarTheme, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultEvent, DefaultMonthEvent, type EventAccessibilityLabelContext, type EventAccessibilityLabeler, type EventDragHandler, type EventDragStartHandler, type EventKeyExtractor, type HourRenderer, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type RenderEvent, type RenderEventArgs, type Resource, type ResourceEventArgs, ResourceTimeline, type ResourceTimelineProps, TimeGrid, type TimeGridMode, type TimeGridProps, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, type WeekdayFormat, 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 };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { C as defaultTheme, S as darkTheme, T as useCalendarTheme, _ as TimeGridMode, a as MonthPagerProps, b as CalendarThemeProvider, c as BusinessHours, d as EventKeyExtractor, f as ICalendarEvent, g as RenderEventArgs, h as RenderEvent, i as MonthPager, l as CalendarEvent, m as RecurrenceRule, n as MonthList, o as MonthView, p as RecurrenceFrequency, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as WeekStartsOn, w as mergeTheme, x as PartialCalendarTheme, y as CalendarTheme } from "./DefaultMonthEvent-CcZLyfps.js";
+import { C as CalendarThemeProvider, D as mergeTheme, E as defaultTheme, O as useCalendarTheme, S as CalendarTheme, T as darkTheme, _ as RenderEvent, a as MonthPagerProps, b as WeekStartsOn, c as BusinessHours, d as EventAccessibilityLabelContext, f as EventAccessibilityLabeler, g as RecurrenceRule, h as RecurrenceFrequency, i as MonthPager, l as CalendarEvent, m as ICalendarEvent, n as MonthList, o as MonthView, p as EventKeyExtractor, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as RenderEventArgs, w as PartialCalendarTheme, x as WeekdayFormat, y as TimeGridMode } from "./DefaultMonthEvent-Cagj4aBo.js";
 import { Locale } from "date-fns";
 import { ComponentType, ReactElement } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { SharedValue, useSharedValue } from "react-native-reanimated";
-import { DateRange, DateSelectionConstraints, DaySelectionState, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, PositionedEvent, UseDateRangeOptions, UseMonthGridOptions, buildMonthGrid, buildMonthWeeks, daySelectionState, eventsInTimeZone, expandRecurringEvents, getIsToday, getViewDays, getWeekDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, minutesIntoDay, nextDateRange, toZonedTime, useDateRange, useMonthGrid } from "@super-calendar/core";
+import { CalendarEvent as CalendarEvent$1, DateRange, DateSelectionConstraints, DaySelectionState, EventAccessibilityLabeler as EventAccessibilityLabeler$1, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, PositionedEvent, UseDateRangeOptions, UseMonthGridOptions, WeekdayFormat as WeekdayFormat$1, buildMonthGrid, buildMonthWeeks, daySelectionState, eventsInTimeZone, expandRecurringEvents, getIsToday, getViewDays, getWeekDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, minutesIntoDay, nextDateRange, toZonedTime, useDateRange, useMonthGrid, weekdayFormatToken } from "@super-calendar/core";
 
 //#region src/components/TimeGrid.d.ts
 /** Default height in pixels of one hour row on the time grid. */
@@ -37,8 +37,15 @@ type TimeGridProps<T> = {
   events: CalendarEvent<T>[];
   cellHeight: SharedValue<number>; /** Initial per-hour row height in px; seeds scroll/zoom without reading the shared value during render. */
   hourHeight?: number;
-  weekStartsOn: WeekStartsOn;
+  weekStartsOn: WeekStartsOn; /** Column-header weekday label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat$1;
   renderEvent: RenderEvent<T>;
+  /**
+   * Override the screen-reader label for each event. Receives the event and a
+   * `{ mode, isAllDay, ampm }` context; return the full text to announce. Defaults
+   * to the built-in title-and-time label.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
   keyExtractor: EventKeyExtractor<T>;
   scrollOffsetMinutes?: number;
   hourColumnWidth?: number; /** Hide the left hour-axis column (lines stay, labels/gutter go). Default false. */
@@ -95,7 +102,9 @@ declare function TimeGridInner<T>({
   cellHeight,
   hourHeight,
   weekStartsOn,
+  weekdayFormat,
   renderEvent,
+  eventAccessibilityLabel,
   keyExtractor,
   scrollOffsetMinutes,
   hourColumnWidth: hourColumnWidthProp,
@@ -213,7 +222,8 @@ type CalendarProps<T> = {
   moreLabel?: string; /** Show dimmed adjacent-month days in the month grid. Default true. */
   showAdjacentMonths?: boolean; /** Ignore taps on month-cell events (day taps still fire). Default false. */
   disableMonthEventCellPress?: boolean; /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
-  weekStartsOn?: WeekStartsOn; /** Number of day columns when `mode="custom"`. Ignored by other modes. Default 1. */
+  weekStartsOn?: WeekStartsOn; /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat$1; /** Number of day columns when `mode="custom"`. Ignored by other modes. Default 1. */
   numberOfDays?: number;
   /**
    * Last weekday of a `custom` partial-week view (0–6). When set, `custom` shows
@@ -221,7 +231,13 @@ type CalendarProps<T> = {
    * precedence over `numberOfDays`. Ignored by other modes.
    */
   weekEndsOn?: WeekStartsOn; /** Replace the built-in event box. Return a `flex: 1` element. */
-  renderEvent?: RenderEvent<T>; /** Per-event style merged onto the built-in event box (static or a function of the event). */
+  renderEvent?: RenderEvent<T>;
+  /**
+   * Override the screen-reader label for each event. Receives the event and a
+   * `{ mode, isAllDay, ampm }` context; return the full text to announce. Applies
+   * across every view. Defaults to the built-in title-and-time label.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>; /** Per-event style merged onto the built-in event box (static or a function of the event). */
   eventCellStyle?: StyleProp<ViewStyle> | ((event: CalendarEvent<T>) => StyleProp<ViewStyle>); /** Per-date style for month cells and week/day columns (e.g. shade specific dates). */
   calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   /**
@@ -337,9 +353,11 @@ declare function Calendar<T>({
   showAdjacentMonths,
   disableMonthEventCellPress,
   weekStartsOn,
+  weekdayFormat,
   numberOfDays,
   weekEndsOn,
   renderEvent,
+  eventAccessibilityLabel,
   eventCellStyle,
   calendarCellStyle,
   businessHours,
@@ -427,9 +445,95 @@ declare function DefaultEvent<T>({
   showTime,
   ellipsizeTitle,
   allDayLabel,
+  accessibilityLabel: accessibilityLabelProp,
   cellStyle,
   onPress,
   onLongPress
 }: RenderEventArgs<T>): ReactElement;
 //#endregion
-export { Agenda, type AgendaProps, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarTheme, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultEvent, DefaultMonthEvent, type EventDragHandler, type EventDragStartHandler, type EventKeyExtractor, type HourRenderer, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type RenderEvent, type RenderEventArgs, TimeGrid, type TimeGridMode, type TimeGridProps, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, 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.d.ts
+/** A schedulable lane (room, person, machine) events are grouped under. */
+interface Resource {
+  /** Stable id events reference via their `resourceId`. */
+  id: string;
+  /** Row label; falls back to the id. */
+  title?: string;
+}
+/** Props passed to a custom resource-timeline event renderer. */
+interface ResourceEventArgs<T = unknown> {
+  event: CalendarEvent$1<T>;
+  /** Pixel width of the event bar. */
+  width: number;
+  onPress: () => void;
+}
+/** Props for {@link ResourceTimeline}. */
+interface ResourceTimelineProps<T = unknown> {
+  /** The day to lay out along the horizontal axis. */
+  date: Date;
+  /** The rows, top to bottom. */
+  resources: Resource[];
+  /** Events; each is placed in the row named by `resourceId(event)`. */
+  events: CalendarEvent$1<T>[];
+  /** Read an event's resource id. Default: `event.resourceId`. */
+  resourceId?: (event: CalendarEvent$1<T>) => string | undefined;
+  /** First hour shown (default 0). */
+  startHour?: number;
+  /** Last hour shown, exclusive (default 24). */
+  endHour?: number;
+  /** Pixels per hour along the axis (default 80). */
+  hourWidth?: number;
+  /** Height of each resource row in px (default 56). */
+  rowHeight?: number;
+  /** Width of the left resource-label column in px (default 140). */
+  labelWidth?: number;
+  /** 12-hour AM/PM axis labels (default false). */
+  ampm?: boolean;
+  /** Custom event renderer; falls back to the built-in bar. */
+  renderEvent?: ComponentType<ResourceEventArgs<T>>;
+  /** Tap an event. */
+  onPressEvent?: (event: CalendarEvent$1<T>) => void;
+  /**
+   * Enables drag-to-move and edge-resize along the time axis: long-press a bar to
+   * move it, or drag its right edge to resize. Called with the proposed new
+   * start/end; return `false` to reject the drop (it snaps back).
+   */
+  onDragEvent?: (event: CalendarEvent$1<T>, start: Date, end: Date) => void | boolean;
+  /** Snap dragged events to this many minutes (default 15). */
+  dragStepMinutes?: number;
+}
+/**
+ * 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`
+ * />
+ * ```
+ */
+declare function ResourceTimeline<T = unknown>({
+  date,
+  resources,
+  events,
+  resourceId,
+  startHour,
+  endHour,
+  hourWidth,
+  rowHeight,
+  labelWidth,
+  ampm,
+  renderEvent,
+  onPressEvent,
+  onDragEvent,
+  dragStepMinutes
+}: ResourceTimelineProps<T>): ReactElement;
+//#endregion
+export { Agenda, type AgendaProps, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarTheme, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultEvent, DefaultMonthEvent, type EventAccessibilityLabelContext, type EventAccessibilityLabeler, type EventDragHandler, type EventDragStartHandler, type EventKeyExtractor, type HourRenderer, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type RenderEvent, type RenderEventArgs, type Resource, type ResourceEventArgs, ResourceTimeline, type ResourceTimelineProps, TimeGrid, type TimeGridMode, type TimeGridProps, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, type WeekdayFormat, 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 };