@super-calendar/core 2.0.0

package/dist/index.mjs

@@ -0,0 +1,747 @@
+import { addDays, addMonths, addWeeks, addYears, differenceInMinutes, eachDayOfInterval, endOfMonth, endOfWeek, format, getHours, getMinutes, isAfter, isBefore, isSameDay, isSameMonth, isToday, max, min, startOfDay, startOfMonth, startOfWeek } from "date-fns";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+//#region src/tokens.ts
+const lightColors = {
+	gridLine: "#E2E4E9",
+	weekendBackground: "#F6F7F9",
+	outsideHoursBackground: "#F1F2F4",
+	todayBackground: "#1F6FEB",
+	todayText: "#FFFFFF",
+	selectedBackground: "#1F6FEB",
+	selectedText: "#FFFFFF",
+	rangeBackground: "#DCE7FF",
+	hoverBackground: "#E6ECF5",
+	nowIndicator: "#E5484D",
+	text: "#1A1B1E",
+	textMuted: "#6B7280",
+	textDisabled: "#B5B9C0",
+	eventBackground: "#DCE7FF",
+	eventText: "#1A1B1E"
+};
+const darkColors = {
+	gridLine: "#2A2E37",
+	weekendBackground: "#15171C",
+	outsideHoursBackground: "#101216",
+	todayBackground: "#1F6FEB",
+	todayText: "#FFFFFF",
+	selectedBackground: "#1F6FEB",
+	selectedText: "#FFFFFF",
+	rangeBackground: "#243B53",
+	hoverBackground: "#2E3138",
+	nowIndicator: "#E5484D",
+	text: "#ECEDEE",
+	textMuted: "#9BA1A6",
+	textDisabled: "#4B4F58",
+	eventBackground: "#243B53",
+	eventText: "#EAF2FF"
+};
+//#endregion
+//#region src/presentation.ts
+/** The band shape for a day, given the fill-cell option. */
+function rangeBandKind(day, fillCell) {
+	if (!day.isInRange || day.isRangeStart && day.isRangeEnd) return "none";
+	if (fillCell) return "fill";
+	if (day.isRangeStart) return "pill-start";
+	if (day.isRangeEnd) return "pill-end";
+	return "pill-mid";
+}
+/** Whether a band shape rounds its leading / trailing edge (pill ends). */
+function bandRounding(kind) {
+	return {
+		start: kind === "pill-start",
+		end: kind === "pill-end"
+	};
+}
+/**
+* The filled-badge kind for a day. `isSelected` is true for both range endpoints
+* and discrete selected days; today always wins when it coincides.
+*/
+function dayBadgeKind(day, isToday) {
+	if (isToday) return "today";
+	if (day.isSelected) return "selected";
+	return "none";
+}
+//#endregion
+//#region src/utils/dates.ts
+/** The seven dates of the week containing `date`, starting on `weekStartsOn`. */
+const getWeekDays = (date, weekStartsOn) => {
+	const start = startOfWeek(date, { weekStartsOn });
+	return Array.from({ length: 7 }, (_, index) => addDays(start, index));
+};
+/** How many day columns a time-grid mode shows. `custom` uses `numberOfDays`. */
+const viewDayCount = (mode, numberOfDays = 1) => {
+	switch (mode) {
+		case "week": return 7;
+		case "3days": return 3;
+		case "custom": return Math.max(1, Math.floor(numberOfDays));
+		default: return 1;
+	}
+};
+/**
+* Days in the inclusive span from `weekStartsOn` to `weekEndsOn` (1–7),
+* wrapping when the end precedes the start (e.g. Sat→Wed). Mirrors
+* react-native-big-calendar's `weekDaysCount`.
+*/
+const weekDaysCount = (weekStartsOn, weekEndsOn) => {
+	if (weekEndsOn < weekStartsOn) {
+		let count = 1;
+		let i = weekStartsOn;
+		while (i !== weekEndsOn && count <= 7) {
+			i = (i + 1) % 7;
+			count++;
+		}
+		return count;
+	}
+	if (weekEndsOn > weekStartsOn) return weekEndsOn - weekStartsOn + 1;
+	return 1;
+};
+/**
+* The day columns to render for a time-grid page. `week` spans the calendar week
+* (honouring `weekStartsOn`). `custom` with a `weekEndsOn` spans the partial week
+* from `weekStartsOn` to `weekEndsOn` (anchored to `date`'s week, paging by week);
+* otherwise every mode shows `viewDayCount` consecutive days starting at `date`.
+*/
+const getViewDays = (mode, date, weekStartsOn, numberOfDays = 1, isRTL = false, weekEndsOn) => {
+	let days;
+	if (mode === "week") days = getWeekDays(date, weekStartsOn);
+	else if (mode === "custom" && weekEndsOn != null) {
+		const subject = startOfDay(date);
+		const offset = weekStartsOn - subject.getDay();
+		days = Array.from({ length: weekDaysCount(weekStartsOn, weekEndsOn) }, (_, index) => addDays(subject, index + offset));
+	} else days = Array.from({ length: viewDayCount(mode, numberOfDays) }, (_, index) => addDays(startOfDay(date), index));
+	return isRTL ? days.reverse() : days;
+};
+/**
+* The calendar weeks covering `month`, padded to whole weeks starting on
+* `weekStartsOn`. `showSixWeeks` always returns six rows (42 days) for a
+* fixed-height grid; `isRTL` reverses each week's day order.
+*/
+const buildMonthWeeks = (month, weekStartsOn, { showSixWeeks = false, isRTL = false } = {}) => {
+	const start = startOfWeek(startOfMonth(month), { weekStartsOn });
+	const days = eachDayOfInterval({
+		start,
+		end: showSixWeeks ? addDays(start, 41) : endOfWeek(endOfMonth(month), { weekStartsOn })
+	});
+	const weeks = [];
+	for (let index = 0; index < days.length; index += 7) {
+		const week = days.slice(index, index + 7);
+		weeks.push(isRTL ? week.reverse() : week);
+	}
+	return weeks;
+};
+const isWeekend = (date) => {
+	const day = date.getDay();
+	return day === 0 || day === 6;
+};
+const getIsToday = (date) => isToday(date);
+const isSameCalendarDay = (a, b) => isSameDay(a, b);
+/** Minutes elapsed since midnight (0–1439). */
+const minutesIntoDay = (date) => getHours(date) * 60 + getMinutes(date);
+//#endregion
+//#region src/utils/dateRange.ts
+/** Whether `date` passes the min/max/disabled constraints (compared by calendar day). */
+function isDateSelectable(date, constraints = {}) {
+	const day = startOfDay(date);
+	if (constraints.minDate && isBefore(day, startOfDay(constraints.minDate))) return false;
+	if (constraints.maxDate && isAfter(day, startOfDay(constraints.maxDate))) return false;
+	if (constraints.isDateDisabled?.(day)) return false;
+	return true;
+}
+/**
+* The range after pressing `pressed`, mirroring the familiar date-picker model:
+* - no range yet, or a complete range exists → start fresh (`{ start: pressed, end: null }`),
+*   so a third press resets the selection.
+* - an open range (a start but no end) → close it, auto-swapping when the press
+*   precedes the start so `start <= end` always holds.
+*
+* Returns `current` unchanged when `pressed` isn't selectable.
+*/
+function nextDateRange(current, pressed, constraints = {}) {
+	if (!isDateSelectable(pressed, constraints)) return current;
+	const day = startOfDay(pressed);
+	if (!current || current.end) return {
+		start: day,
+		end: null
+	};
+	if (isBefore(day, current.start)) return {
+		start: day,
+		end: current.start
+	};
+	return {
+		start: current.start,
+		end: day
+	};
+}
+/** True when `date` is one of the range's two endpoints. */
+function isRangeEndpoint(date, range) {
+	if (!range) return false;
+	if (isSameCalendarDay(date, range.start)) return true;
+	return range.end ? isSameCalendarDay(date, range.end) : false;
+}
+/** True when `date` falls within a complete range (endpoints included). */
+function isWithinDateRange(date, range) {
+	if (!range || !range.end) return false;
+	const day = startOfDay(date).getTime();
+	const a = startOfDay(range.start).getTime();
+	const b = startOfDay(range.end).getTime();
+	return day >= Math.min(a, b) && day <= Math.max(a, b);
+}
+/**
+* The canonical per-day selection state, shared by `MonthView` (rendering) and
+* `buildMonthGrid` (the headless grid) so the built-in views and a custom
+* calendar can never disagree on what a day's state is.
+*/
+function daySelectionState(date, selection, constraints = {}) {
+	const isDisabled = !isDateSelectable(date, constraints);
+	const range = selection.selectedRange ?? null;
+	return {
+		isDisabled,
+		isSelected: !isDisabled && ((selection.selectedDates?.some((selected) => isSameCalendarDay(selected, date)) ?? false) || isRangeEndpoint(date, range)),
+		isInRange: !isDisabled && isWithinDateRange(date, range),
+		isRangeStart: !isDisabled && range != null && isSameCalendarDay(date, range.start),
+		isRangeEnd: !isDisabled && range?.end != null && isSameCalendarDay(date, range.end)
+	};
+}
+const CalendarSelectionContext = createContext({});
+/**
+* Provides the active selection to the month grid. Day cells read it via
+* {@link useCalendarSelection} so they repaint on selection changes even when
+* the virtualized list has cached (and so won't re-render) their page.
+*/
+const CalendarSelectionProvider = CalendarSelectionContext.Provider;
+const useCalendarSelection = () => useContext(CalendarSelectionContext);
+/**
+* Controlled-ish range selection state for the month view. Returns the current
+* `range` plus an `onPressDate` handler to wire to `Calendar`'s `onPressDay`, a
+* `reset`, and the raw `setRange` for full control.
+*
+* ```tsx
+* const { range, onPressDate } = useDateRange({ minDate: new Date() });
+* <Calendar mode="month" selectedRange={range ?? undefined} onPressDay={onPressDate} … />
+* ```
+*/
+function useDateRange(options = {}) {
+	const { initialRange = null, minDate, maxDate, isDateDisabled } = options;
+	const [range, setRange] = useState(initialRange);
+	const constraints = useMemo(() => ({
+		minDate,
+		maxDate,
+		isDateDisabled
+	}), [
+		minDate,
+		maxDate,
+		isDateDisabled
+	]);
+	return {
+		range,
+		onPressDate: useCallback((date) => setRange((previous) => nextDateRange(previous, date, constraints)), [constraints]),
+		selectRange: useCallback((a, b) => {
+			if (!isDateSelectable(a, constraints) || !isDateSelectable(b, constraints)) return;
+			const [start, end] = a.getTime() <= b.getTime() ? [a, b] : [b, a];
+			setRange({
+				start: startOfDay(start),
+				end: startOfDay(end)
+			});
+		}, [constraints]),
+		reset: useCallback(() => setRange(null), []),
+		setRange
+	};
+}
+//#endregion
+//#region src/utils/drag.ts
+/**
+* Minutes to shift an event, snapping a vertical pixel drag to the nearest
+* `stepMinutes`. Runs on the UI thread inside the drag gesture. Returns 0 for a
+* degenerate grid (non-positive height/step).
+*/
+function snapDeltaMinutes(translationPx, cellHeightPx, stepMinutes) {
+	"worklet";
+	if (cellHeightPx <= 0 || stepMinutes <= 0) return 0;
+	const rawMinutes = translationPx / cellHeightPx * 60;
+	return Math.round(rawMinutes / stepMinutes) * stepMinutes;
+}
+/** A copy of `date` shifted by `minutes` (may be negative). */
+function shiftMinutes(date, minutes) {
+	const next = new Date(date);
+	next.setMinutes(next.getMinutes() + minutes);
+	return next;
+}
+/**
+* Resolve a committed drag into the event's new bounds: `start` shifts by
+* `deltaStartMinutes`, `end` by `deltaEndMinutes` (a move passes the same delta
+* to both; a resize passes 0 for the start). Returns `null` when the change
+* would collapse the event below one `snapMinutes` step, so the gesture leaves
+* the event untouched rather than committing a degenerate duration. Pure, so the
+* commit path is unit-testable without a running gesture.
+*/
+function resolveDraggedBounds(start, end, deltaStartMinutes, deltaEndMinutes, snapMinutes) {
+	const nextStart = shiftMinutes(start, deltaStartMinutes);
+	const nextEnd = shiftMinutes(end, deltaEndMinutes);
+	if (nextEnd.getTime() - nextStart.getTime() < snapMinutes * 6e4) return null;
+	return {
+		start: nextStart,
+		end: nextEnd
+	};
+}
+/**
+* The start/end of a new event swept out on `day` by dragging from `startPx` to
+* `endPx` (vertical pixels from the grid's top, i.e. the `minHour` line). Both
+* ends snap to `snapMinutes`; the range is ordered (drag up or down) and widened
+* to at least one step so a stationary press still yields a usable event.
+* Returns `null` for a degenerate grid (non-positive height/step). Pure, so the
+* commit path is unit-testable without a running gesture.
+*/
+function cellRangeFromDrag(day, startPx, endPx, cellHeightPx, minHour, snapMinutes) {
+	if (cellHeightPx <= 0 || snapMinutes <= 0) return null;
+	const snapAt = (px) => {
+		const rawMinutes = (minHour + px / cellHeightPx) * 60;
+		return Math.round(rawMinutes / snapMinutes) * snapMinutes;
+	};
+	const MAX = 1440;
+	let lower = Math.max(0, Math.min(MAX - snapMinutes, snapAt(startPx)));
+	let upper = Math.max(0, Math.min(MAX, snapAt(endPx)));
+	if (upper < lower) [lower, upper] = [upper, lower];
+	if (upper - lower < snapMinutes) upper = Math.min(MAX, lower + snapMinutes);
+	const start = new Date(day);
+	start.setHours(0, 0, 0, 0);
+	start.setMinutes(lower);
+	const end = new Date(day);
+	end.setHours(0, 0, 0, 0);
+	end.setMinutes(upper);
+	return {
+		start,
+		end
+	};
+}
+//#endregion
+//#region src/utils/eventDisplay.ts
+/**
+* Minimum event-box height (px) before the built-in renderer shows the time line
+* on a narrow multi-column timed grid. Tied to the default theme's font sizes.
+*/
+const MIN_BOX_HEIGHT_FOR_TIME = 56;
+/** Hard-clip an overflowing title by default; opt into a trailing ellipsis. */
+function titleEllipsizeMode(ellipsizeTitle) {
+	return ellipsizeTitle ? "tail" : "clip";
+}
+/**
+* Screen-reader label for an event: its title followed by "all day" or its time
+* range (which the grid otherwise only conveys visually). Empty title is dropped.
+*/
+function eventAccessibilityLabel(args) {
+	const timeFormat = args.ampm ? "h:mm a" : "HH:mm";
+	const time = args.isAllDay ? args.allDayLabel ?? "all day" : `${format(args.start, timeFormat)} to ${format(args.end, timeFormat)}`;
+	return [args.title, time].filter(Boolean).join(", ");
+}
+/**
+* Month cells and the all-day lane show a single clipped line; timed-grid titles
+* (`undefined`) wrap to fill the box.
+*/
+function titleNumberOfLines(mode, isAllDay) {
+	return mode === "month" || isAllDay ? 1 : void 0;
+}
+/**
+* The secondary line under the title in the built-in renderer, or `null` when
+* none should show. Timed events get their `start - end` range. An all-day event
+* gets the literal "All day" in the schedule (which has no all-day lane to
+* signal it positionally) and nothing on the day/week grid (the lane already
+* does). Month cells and `showTime={false}` always return `null`.
+*/
+function eventTimeLabel(args) {
+	if (!args.showTime || args.mode === "month") return null;
+	if (args.isAllDay) return args.mode === "schedule" ? args.allDayLabel ?? "All day" : null;
+	const timeFormat = args.ampm ? "h:mm a" : "HH:mm";
+	return `${format(args.start, timeFormat)} - ${format(args.end, timeFormat)}`;
+}
+/**
+* The default hour-axis label shared by both renderers' time grids, so the gutter
+* reads the same on each: 24-hour "HH:00" (e.g. "08:00"), or a compact 12-hour
+* "h AM/PM" (e.g. "8 AM") when `ampm` is set. Exported so a custom hour renderer
+* can reuse the same formatting.
+*/
+function formatHour(hour, opts) {
+	if (opts?.ampm) {
+		const period = hour < 12 ? "AM" : "PM";
+		return `${hour % 12 === 0 ? 12 : hour % 12} ${period}`;
+	}
+	return `${String(hour).padStart(2, "0")}:00`;
+}
+/**
+* Whether the time line fits in the box. The wide `day` column and contexts with
+* no live box height (e.g. schedule, where `boxHeightPx` is undefined) always
+* show it; narrow multi-column modes only once the box is at least
+* {@link MIN_BOX_HEIGHT_FOR_TIME} tall. Runs on the UI thread inside the event
+* renderer's animated style.
+*/
+function isTimeVisibleAtHeight(boxHeightPx, mode) {
+	"worklet";
+	if (boxHeightPx == null || mode === "day") return true;
+	return boxHeightPx >= 56;
+}
+/**
+* Lay out the built-in timed-grid event chip for a box of `boxHeightPx`: how
+* many whole title lines fit, and whether the time line still has room below
+* them. The title is primary, so the title fills the box in whole lines (never a
+* half-cropped line) and the time only shows once a full line is left over. Pass
+* `titleLineHeightPx`/`timeLineHeightPx` matching the rendered line heights so
+* the clamp lands on a line boundary.
+*
+* Worklet-safe, so the native renderer can drive the title's max-height on the UI
+* thread as the grid zooms; the dom renderer calls it with its static box height.
+* A `boxHeightPx` of `undefined` (the schedule has no live box height) returns
+* `titleMaxLines: 0` (no clamp) with the unconditional time visibility.
+*/
+function eventChipLayout(args) {
+	"worklet";
+	const wantTime = args.hasTime && isTimeVisibleAtHeight(args.boxHeightPx, args.mode);
+	if (args.boxHeightPx == null || args.titleLineHeightPx <= 0) return {
+		titleMaxLines: 0,
+		showTime: wantTime
+	};
+	const inner = args.boxHeightPx - args.paddingYPx * 2;
+	const titleMaxLines = Math.max(1, Math.floor((inner - (wantTime ? args.timeLineHeightPx : 0)) / args.titleLineHeightPx));
+	return {
+		titleMaxLines,
+		showTime: wantTime && inner - titleMaxLines * args.titleLineHeightPx >= args.timeLineHeightPx
+	};
+}
+/**
+* Derive how many event chips fit in a month cell from the measured space.
+* `chipRowHeightPx` is one chip plus its gap; `moreRowHeightPx` is the overflow
+* label plus its gap. Both counts are clamped to >= 0.
+*/
+function monthEventCapacity(availableHeightPx, chipRowHeightPx, moreRowHeightPx) {
+	if (chipRowHeightPx <= 0) return {
+		full: 0,
+		withMore: 0
+	};
+	return {
+		full: Math.max(0, Math.floor(availableHeightPx / chipRowHeightPx)),
+		withMore: Math.max(0, Math.floor((availableHeightPx - moreRowHeightPx) / chipRowHeightPx))
+	};
+}
+/**
+* Chips to show for a day: all of them when they fit, otherwise `withMore` (at
+* least one) so the rest collapse into a "+N more" label.
+*/
+function monthVisibleCount(total, capacity) {
+	if (total <= capacity.full) return total;
+	return Math.max(1, capacity.withMore);
+}
+//#endregion
+//#region src/utils/layout.ts
+const MINUTES_PER_HOUR = 60;
+const MIN_DURATION_HOURS = .25;
+/**
+* Lay out a single day's events: events that overlap in time are split into
+* side-by-side columns. Multi-day events are clipped to the portion that falls
+* on `day` (e.g. a 23:00→01:00 event renders 23:00–24:00 on the start day and
+* 00:00–01:00 on the next). Pure — safe to call per render, never per frame.
+*/
+function layoutDayEvents(events, day) {
+	const dayStart = startOfDay(day);
+	const nextDayStart = addDays(dayStart, 1);
+	const segments = events.filter((event) => !isAllDayEvent(event)).filter((event) => event.start < nextDayStart && event.end > dayStart).map((event) => {
+		const segStart = max([event.start, dayStart]);
+		const segEnd = min([event.end, nextDayStart]);
+		return {
+			event,
+			start: differenceInMinutes(segStart, dayStart) / MINUTES_PER_HOUR,
+			end: differenceInMinutes(segEnd, dayStart) / MINUTES_PER_HOUR,
+			continuesBefore: event.start < dayStart,
+			continuesAfter: event.end > nextDayStart
+		};
+	}).sort((a, b) => a.start - b.start);
+	const positioned = [];
+	let cluster = [];
+	let clusterEnd = Number.NEGATIVE_INFINITY;
+	const flushCluster = () => {
+		const columnEnds = [];
+		const columnOf = /* @__PURE__ */ new Map();
+		for (const seg of cluster) {
+			let column = columnEnds.findIndex((end) => end <= seg.start);
+			if (column === -1) {
+				column = columnEnds.length;
+				columnEnds.push(seg.end);
+			} else columnEnds[column] = seg.end;
+			columnOf.set(seg, column);
+		}
+		for (const seg of cluster) positioned.push({
+			event: seg.event,
+			startHours: seg.start,
+			durationHours: Math.max(seg.end - seg.start, MIN_DURATION_HOURS),
+			column: columnOf.get(seg) ?? 0,
+			columns: columnEnds.length,
+			continuesBefore: seg.continuesBefore,
+			continuesAfter: seg.continuesAfter
+		});
+		cluster = [];
+	};
+	for (const seg of segments) {
+		if (cluster.length > 0 && seg.start >= clusterEnd) flushCluster();
+		cluster.push(seg);
+		clusterEnd = Math.max(clusterEnd, seg.end);
+	}
+	if (cluster.length > 0) flushCluster();
+	return positioned;
+}
+const atMidnight = (date) => date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0 && date.getMilliseconds() === 0;
+/**
+* Whether an event belongs in the all-day lane. An explicit `allDay` flag wins;
+* otherwise it's inferred when the event spans whole days (both `start` and
+* `end` land on midnight, e.g. an iCal-style all-day event). Pure.
+*/
+function isAllDayEvent(event) {
+	if (typeof event.allDay === "boolean") return event.allDay;
+	return event.end > event.start && atMidnight(event.start) && atMidnight(event.end);
+}
+/**
+* The `startOfDay` ISO keys of every calendar day an event touches (inclusive).
+* An event ending exactly at midnight does not count the following day. Used to
+* index events by day for the month grid. Pure.
+*/
+function eventDayKeys(event) {
+	const first = startOfDay(event.start);
+	const last = startOfDay(event.end > event.start ? /* @__PURE__ */ new Date(event.end.getTime() - 1) : event.start);
+	const keys = [];
+	for (let cursor = first; cursor <= last; cursor = addDays(cursor, 1)) keys.push(cursor.toISOString());
+	return keys;
+}
+/**
+* Index events by the `startOfDay` ISO key of every day they touch (via
+* {@link eventDayKeys}), so a month grid can look up a day's events with
+* `startOfDay(date).toISOString()`. Built once and shared across month cells.
+*/
+function groupEventsByDay(events) {
+	const map = /* @__PURE__ */ new Map();
+	for (const event of events) for (const key of eventDayKeys(event)) {
+		const list = map.get(key);
+		if (list) list.push(event);
+		else map.set(key, [event]);
+	}
+	return map;
+}
+/**
+* Order a day's events for the month and list views: all-day events come first
+* (they head the day regardless of their start time), then timed events by start.
+* Shared by both renderers so the order is identical. Use as an `Array.sort`
+* comparator.
+*/
+function compareDayEvents(a, b) {
+	const aAllDay = isAllDayEvent(a);
+	if (aAllDay !== isAllDayEvent(b)) return aAllDay ? -1 : 1;
+	return a.start.getTime() - b.start.getTime();
+}
+/**
+* The closed hour-spans of a day to shade on the time grid, given a
+* `businessHours` callback and the visible `[minHour, maxHour]` window: the spans
+* before open and after close (clamped to the window), the whole window when the
+* day is closed (`null`) or the open hours are inverted/empty, or none when the
+* callback returns `undefined`. Shared by both renderers so shading stays
+* identical. Co-located with `groupEventsByDay`; both feed the grid layout.
+*/
+function closedHourBands(day, businessHours, minHour = 0, maxHour = 24) {
+	const open = businessHours?.(day);
+	if (open === void 0) return [];
+	if (open === null) return [{
+		start: minHour,
+		end: maxHour
+	}];
+	const start = Math.max(minHour, Math.min(maxHour, open.start));
+	const end = Math.max(minHour, Math.min(maxHour, open.end));
+	if (start >= end) return [{
+		start: minHour,
+		end: maxHour
+	}];
+	const bands = [];
+	if (start > minHour) bands.push({
+		start: minHour,
+		end: start
+	});
+	if (end < maxHour) bands.push({
+		start: end,
+		end: maxHour
+	});
+	return bands;
+}
+//#endregion
+//#region src/utils/monthGrid.ts
+/**
+* Pure month-grid builder: the weeks and weekday headers for `month`, each day
+* annotated with selection/disabled/today state. Use this when you need the
+* data outside React; inside a component prefer {@link useMonthGrid}.
+*/
+function buildMonthGrid(month, options = {}) {
+	const { weekStartsOn = 0, showSixWeeks = false, isRTL = false, selectedDates, selectedRange, minDate, maxDate, isDateDisabled, locale } = options;
+	const rows = buildMonthWeeks(month, weekStartsOn, {
+		showSixWeeks,
+		isRTL
+	});
+	return {
+		weeks: rows.map((days) => ({
+			id: days[0].toISOString(),
+			days: days.map((date) => ({
+				date,
+				id: format(date, "yyyy-MM-dd"),
+				label: format(date, "d"),
+				isCurrentMonth: isSameMonth(date, month),
+				isToday: getIsToday(date),
+				isWeekend: isWeekend(date),
+				...daySelectionState(date, {
+					selectedDates,
+					selectedRange
+				}, {
+					minDate,
+					maxDate,
+					isDateDisabled
+				})
+			}))
+		})),
+		weekdays: rows[0].map((date) => ({
+			date,
+			label: format(date, "EEE", { locale })
+		}))
+	};
+}
+/**
+* Headless month-grid hook. Returns the weeks and weekday headers for `month`,
+* each day annotated with selection/disabled/today state, so you can render a
+* fully custom calendar without reimplementing the date maths.
+*
+* ```tsx
+* const { weeks, weekdays } = useMonthGrid(month, { selectedRange: range });
+* // map weekdays -> header cells, weeks -> rows, days -> your own <DayCell />
+* ```
+*/
+function useMonthGrid(month, options = {}) {
+	const { weekStartsOn, showSixWeeks, isRTL, selectedDates, selectedRange, minDate, maxDate, isDateDisabled, locale } = options;
+	return useMemo(() => buildMonthGrid(month, options), [
+		month,
+		weekStartsOn,
+		showSixWeeks,
+		isRTL,
+		selectedDates,
+		selectedRange,
+		minDate,
+		maxDate,
+		isDateDisabled,
+		locale
+	]);
+}
+//#endregion
+//#region src/utils/recurrence.ts
+const STEP = {
+	daily: addDays,
+	weekly: addWeeks,
+	monthly: addMonths,
+	yearly: addYears
+};
+const MAX_OCCURRENCES = 5e3;
+function withTimeOf(date, source) {
+	const next = new Date(date);
+	next.setHours(source.getHours(), source.getMinutes(), source.getSeconds(), source.getMilliseconds());
+	return next;
+}
+function* occurrenceStarts(start, rule, rangeEnd) {
+	const interval = Math.max(1, Math.trunc(rule.interval ?? 1));
+	let produced = 0;
+	const within = (date) => date.getTime() <= rangeEnd.getTime() && (rule.until == null || date.getTime() <= rule.until.getTime()) && (rule.count == null || produced < rule.count) && produced < MAX_OCCURRENCES;
+	if (rule.freq === "weekly" && rule.weekdays?.length) {
+		const weekdays = [...new Set(rule.weekdays)].sort((a, b) => a - b);
+		let weekStart = startOfWeek(start, { weekStartsOn: 0 });
+		while (true) {
+			let advanced = false;
+			for (const weekday of weekdays) {
+				const date = withTimeOf(addDays(weekStart, weekday), start);
+				if (date.getTime() < start.getTime()) continue;
+				if (!within(date)) return;
+				produced += 1;
+				advanced = true;
+				yield date;
+			}
+			const nextWeek = addWeeks(weekStart, interval);
+			if (!advanced && nextWeek.getTime() > rangeEnd.getTime()) return;
+			weekStart = nextWeek;
+		}
+	}
+	let cursor = start;
+	while (within(cursor)) {
+		produced += 1;
+		yield cursor;
+		cursor = STEP[rule.freq](cursor, interval);
+	}
+}
+function instanceAt(event, start, durationMs) {
+	const instance = {
+		...event,
+		start,
+		end: new Date(start.getTime() + durationMs)
+	};
+	delete instance.recurrence;
+	return instance;
+}
+/**
+* Materialise recurring events into concrete occurrences overlapping
+* `[rangeStart, rangeEnd]`. Non-recurring events pass through untouched, so the
+* result is ready to hand to `<Calendar events={...} />`. Each occurrence keeps
+* the original event's duration and fields (minus `recurrence`).
+*/
+function expandRecurringEvents(events, rangeStart, rangeEnd) {
+	const out = [];
+	for (const event of events) {
+		if (!event.recurrence) {
+			out.push(event);
+			continue;
+		}
+		const durationMs = event.end.getTime() - event.start.getTime();
+		for (const start of occurrenceStarts(event.start, event.recurrence, rangeEnd)) {
+			if (start.getTime() + durationMs < rangeStart.getTime()) continue;
+			out.push(instanceAt(event, start, durationMs));
+		}
+	}
+	return out;
+}
+//#endregion
+//#region src/utils/timezone.ts
+/**
+* Reinterpret an instant as its wall-clock time in `timeZone`, returned as a
+* device-local `Date` whose fields (hours, minutes, …) read back as that zone's
+* clock. The calendar lays events out from `getHours()`/`getMinutes()`, so
+* passing zoned dates makes it render in `timeZone` regardless of the device.
+*
+* DST-correct via `Intl` (available on modern React Native Hermes/JSC and the
+* web). The result is for display/layout only; it no longer points at the
+* original UTC instant, so don't round-trip it back to a real time.
+*/
+function toZonedTime(date, timeZone) {
+	const parts = new Intl.DateTimeFormat("en-US", {
+		timeZone,
+		hourCycle: "h23",
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	}).formatToParts(date);
+	const field = (type) => {
+		const part = parts.find((p) => p.type === type);
+		return part ? Number(part.value) : 0;
+	};
+	const hour = field("hour") % 24;
+	return new Date(field("year"), field("month") - 1, field("day"), hour, field("minute"), field("second"), date.getMilliseconds());
+}
+/**
+* Map every event's `start`/`end` through {@link toZonedTime} so the calendar
+* displays them in `timeZone`. Other fields are preserved. Memoize the result
+* (e.g. with `useMemo`) since it allocates new dates.
+*/
+function eventsInTimeZone(events, timeZone) {
+	return events.map((event) => ({
+		...event,
+		start: toZonedTime(event.start, timeZone),
+		end: toZonedTime(event.end, timeZone)
+	}));
+}
+//#endregion
+export { CalendarSelectionProvider, MIN_BOX_HEIGHT_FOR_TIME, bandRounding, buildMonthGrid, buildMonthWeeks, cellRangeFromDrag, closedHourBands, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventChipLayout, eventDayKeys, eventTimeLabel, eventsInTimeZone, expandRecurringEvents, formatHour, getIsToday, getViewDays, getWeekDays, groupEventsByDay, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isTimeVisibleAtHeight, isWeekend, isWithinDateRange, layoutDayEvents, lightColors, minutesIntoDay, monthEventCapacity, monthVisibleCount, nextDateRange, rangeBandKind, resolveDraggedBounds, shiftMinutes, snapDeltaMinutes, titleEllipsizeMode, titleNumberOfLines, toZonedTime, useCalendarSelection, useDateRange, useMonthGrid, viewDayCount, weekDaysCount };