@super-calendar/dom 2.1.5 → 2.3.0

package/dist/index.js

@@ -4,6 +4,43 @@ let date_fns = require("date-fns");
 let react = require("react");
 let _super_calendar_core = require("@super-calendar/core");
 let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/slots.ts
+/** Join truthy class names (a dependency-free clsx-lite). */
+function cn(...parts) {
+	return parts.filter(Boolean).join(" ") || void 0;
+}
+/**
+* Build a slot resolver for one render. `slot(name, defaults)` returns the props to
+* spread on that element: a merged `className`, the resolved inline `style`, and a
+* stable `data-slot` hook for CSS/testing.
+*/
+function createSlots({ classNames, styles }) {
+	return (name, defaults) => {
+		const slotClass = classNames?.[name];
+		const override = styles?.[name];
+		const style = {
+			...defaults?.base,
+			...slotClass ? void 0 : defaults?.themed,
+			...override
+		};
+		return {
+			className: cn(slotClass),
+			style: Object.keys(style).length ? style : void 0,
+			"data-slot": name
+		};
+	};
+}
+/**
+* Turn a map of boolean state flags into present/absent `data-*` attributes, so
+* consumers can target state with CSS/Tailwind variants (e.g. `data-[today]:...`).
+* A true flag renders the attribute (empty value); a false/undefined one omits it.
+*/
+function dataState(flags) {
+	const out = {};
+	for (const key in flags) if (flags[key]) out[key] = "";
+	return out;
+}
+//#endregion
 //#region src/theme.ts
 const METRICS = {
 	cellHeight: 48,
@@ -30,7 +67,7 @@ function mergeDomTheme(overrides, base = defaultDomTheme) {
 }
 //#endregion
 //#region src/Agenda.tsx
-function DefaultAgendaRow({ event, isAllDay, ampm = false, theme }) {
+function DefaultAgendaRow({ event, isAllDay, ampm = false, cardProps }) {
 	const time = (0, _super_calendar_core.eventTimeLabel)({
 		mode: "schedule",
 		isAllDay,
@@ -40,12 +77,7 @@ function DefaultAgendaRow({ event, isAllDay, ampm = false, theme }) {
 		showTime: true
 	}) ?? "";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: {
-			padding: "6px 10px",
-			borderRadius: 8,
-			background: theme.eventBackground,
-			color: theme.eventText
-		},
+		...cardProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			style: {
 				fontWeight: 600,
@@ -72,8 +104,12 @@ function DefaultAgendaRow({ event, isAllDay, ampm = false, theme }) {
 * <Agenda events={events} onPressEvent={(e) => console.log(e.title)} />
 * ```
 */
-function Agenda({ events, locale, ampm = false, activeDate, theme: themeOverrides, height = 480, renderEvent, onPressEvent, onPressDay, className, style }) {
+function Agenda({ events, locale, ampm = false, activeDate, theme: themeOverrides, height = 480, renderEvent, eventAccessibilityLabel, onPressEvent, onPressDay, className, style, classNames, styles }) {
 	const theme = (0, react.useMemo)(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const slot = createSlots({
+		classNames,
+		styles
+	});
 	const Renderer = renderEvent;
 	const rows = (0, react.useMemo)(() => {
 		const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
@@ -117,24 +153,33 @@ function Agenda({ events, locale, ampm = false, activeDate, theme: themeOverride
 					const highlighted = activeDate ? (0, date_fns.isSameDay)(item.date, activeDate) : (0, _super_calendar_core.getIsToday)(item.date);
 					const label = (0, date_fns.format)(item.date, "EEEE, d LLLL", locale ? { locale } : void 0);
 					const color = highlighted ? theme.todayBackground : theme.textMuted;
-					return onPressDay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: () => onPressDay(item.date),
-						style: {
-							...headerStyle,
-							color,
+					const headerProps = slot("dayHeader", {
+						base: onPressDay ? {
+							display: "block",
+							width: "100%",
 							border: "none",
 							background: "transparent",
 							cursor: "pointer",
 							font: "inherit",
 							textAlign: "left"
+						} : {
+							display: "block",
+							width: "100%"
 						},
+						themed: {
+							padding: "12px 12px 4px",
+							fontSize: 13,
+							fontWeight: 600,
+							color
+						}
+					});
+					return onPressDay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPressDay(item.date),
+						...headerProps,
 						children: label
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: {
-							...headerStyle,
-							color
-						},
+						...headerProps,
 						children: label
 					});
 				}
@@ -151,68 +196,78 @@ function Agenda({ events, locale, ampm = false, activeDate, theme: themeOverride
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					onClick: onPress,
-					style: {
-						display: "block",
-						width: "100%",
-						textAlign: "left",
-						border: "none",
-						background: "transparent",
-						cursor: "pointer",
-						font: "inherit",
-						padding: "2px 12px"
-					},
+					"aria-label": eventAccessibilityLabel ? eventAccessibilityLabel(event, {
+						mode: "schedule",
+						isAllDay,
+						ampm
+					}) : void 0,
+					...slot("eventRow", {
+						base: {
+							display: "block",
+							width: "100%",
+							textAlign: "left",
+							border: "none",
+							background: "transparent",
+							cursor: "pointer",
+							font: "inherit"
+						},
+						themed: { padding: "2px 12px" }
+					}),
 					children: Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultAgendaRow, {
 						...args,
-						theme
+						cardProps: slot("event", { themed: {
+							padding: "6px 10px",
+							borderRadius: 8,
+							background: theme.eventBackground,
+							color: theme.eventText
+						} })
 					})
 				});
 			}
 		}), rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: {
+			...slot("empty", { themed: {
 				padding: "16px 12px",
 				color: theme.textMuted,
 				fontSize: 14
-			},
+			} }),
 			children: "No events"
 		}) : null]
 	});
 }
-const headerStyle = {
-	display: "block",
-	width: "100%",
-	padding: "12px 12px 4px",
-	fontSize: 13,
-	fontWeight: 600
-};
 //#endregion
 //#region src/MonthView.tsx
 const DATE_ROW = 24;
 const CHIP_HEIGHT = 18;
 const CHIP_GAP = 2;
 const CELL_PAD = 4;
-function dayCellStyle(day, theme) {
+function dayCellDefault(day, theme) {
 	return {
-		position: "relative",
-		height: theme.cellHeight,
-		border: "none",
-		background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
-		font: "inherit",
-		fontSize: 15,
-		color: day.isDisabled ? theme.textDisabled : theme.text,
-		cursor: day.isDisabled ? "default" : "pointer",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		padding: 0,
-		WebkitTapHighlightColor: "transparent"
+		base: {
+			position: "relative",
+			height: theme.cellHeight,
+			border: "none",
+			font: "inherit",
+			cursor: day.isDisabled ? "default" : "pointer",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: 0,
+			WebkitTapHighlightColor: "transparent"
+		},
+		themed: {
+			background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
+			fontSize: 15,
+			color: day.isDisabled ? theme.textDisabled : theme.text
+		}
 	};
 }
 /**
 * The range band behind a day, rendered as its own layer so it can be a centered
 * rounded strip (the default) or fill the whole cell (`fillCell`). Returns null
-* for days with no band. Endpoints get the leading/trailing pill rounding.
+* for days with no band. Endpoints get the leading/trailing pill rounding. Its
+* geometry is structural; only the fill colour is themed.
 */
-function rangeBandStyle(day, theme, fillCell) {
+function rangeBandDefault(day, theme, fillCell) {
 	const kind = (0, _super_calendar_core.rangeBandKind)(day, fillCell);
 	if (kind === "none") return null;
 	const fill = kind === "fill";
@@ -220,80 +275,94 @@ function rangeBandStyle(day, theme, fillCell) {
 	const radius = fill ? 0 : theme.rangeBandHeight / 2;
 	const rounding = (0, _super_calendar_core.bandRounding)(kind);
 	const cap = `calc(50% - ${theme.dayBadgeSize / 2}px)`;
-	const style = {
+	const base = {
 		position: "absolute",
 		left: rounding.start ? cap : 0,
 		right: rounding.end ? cap : 0,
 		top: inset,
 		bottom: inset,
-		background: theme.rangeBackground,
 		zIndex: 0
 	};
 	if (rounding.start) {
-		style.borderTopLeftRadius = radius;
-		style.borderBottomLeftRadius = radius;
+		base.borderTopLeftRadius = radius;
+		base.borderBottomLeftRadius = radius;
 	}
 	if (rounding.end) {
-		style.borderTopRightRadius = radius;
-		style.borderBottomRightRadius = radius;
+		base.borderTopRightRadius = radius;
+		base.borderBottomRightRadius = radius;
 	}
-	return style;
+	return {
+		base,
+		themed: { background: theme.rangeBackground }
+	};
 }
-function badgeStyle(day, theme, hovered) {
+function badgeDefault(day, theme, hovered) {
 	const badge = (0, _super_calendar_core.dayBadgeKind)(day, day.isToday);
 	const filled = badge !== "none";
 	const background = filled ? badge === "today" ? theme.todayBackground : theme.selectedBackground : hovered ? theme.hoverBackground : "transparent";
 	return {
-		position: "relative",
-		zIndex: 1,
-		width: theme.dayBadgeSize,
-		height: theme.dayBadgeSize,
-		borderRadius: "50%",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		background,
-		color: filled ? day.isToday ? theme.todayText : theme.selectedText : "inherit"
+		base: {
+			position: "relative",
+			zIndex: 1,
+			width: theme.dayBadgeSize,
+			height: theme.dayBadgeSize,
+			borderRadius: "50%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		themed: {
+			background,
+			color: filled ? day.isToday ? theme.todayText : theme.selectedText : "inherit"
+		}
 	};
 }
-function eventCellStyle(day, theme, height) {
+function eventCellDefault(day, theme, height) {
 	return {
-		position: "relative",
-		minHeight: height,
-		minWidth: 0,
-		border: "none",
-		borderTop: `1px solid ${theme.gridLine}`,
-		background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
-		color: day.isDisabled ? theme.textDisabled : theme.text,
-		cursor: day.isDisabled ? "default" : "pointer",
-		display: "flex",
-		flexDirection: "column",
-		gap: CHIP_GAP,
-		padding: CELL_PAD,
-		boxSizing: "border-box",
-		textAlign: "left",
-		WebkitTapHighlightColor: "transparent"
+		base: {
+			position: "relative",
+			minHeight: height,
+			minWidth: 0,
+			border: "none",
+			cursor: day.isDisabled ? "default" : "pointer",
+			display: "flex",
+			flexDirection: "column",
+			gap: CHIP_GAP,
+			padding: CELL_PAD,
+			boxSizing: "border-box",
+			textAlign: "left",
+			WebkitTapHighlightColor: "transparent"
+		},
+		themed: {
+			borderTop: `1px solid ${theme.gridLine}`,
+			background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
+			color: day.isDisabled ? theme.textDisabled : theme.text
+		}
 	};
 }
-function compactBadgeStyle(day, theme) {
+function compactBadgeDefault(day, theme) {
 	const badge = (0, _super_calendar_core.dayBadgeKind)(day, day.isToday);
 	const filled = badge !== "none";
 	return {
-		position: "relative",
-		zIndex: 1,
-		alignSelf: "flex-end",
-		width: DATE_ROW - 2,
-		height: DATE_ROW - 2,
-		borderRadius: "50%",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		fontSize: 13,
-		background: filled ? badge === "today" ? theme.todayBackground : theme.selectedBackground : "transparent",
-		color: filled ? day.isToday ? theme.todayText : theme.selectedText : "inherit"
+		base: {
+			position: "relative",
+			zIndex: 1,
+			alignSelf: "flex-end",
+			width: DATE_ROW - 2,
+			height: DATE_ROW - 2,
+			borderRadius: "50%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		themed: {
+			fontSize: 13,
+			background: filled ? badge === "today" ? theme.todayBackground : theme.selectedBackground : "transparent",
+			color: filled ? day.isToday ? theme.todayText : theme.selectedText : "inherit"
+		}
 	};
 }
-const chipButtonStyle = {
+const chipButtonDefault = { base: {
 	position: "relative",
 	zIndex: 1,
 	border: "none",
@@ -303,38 +372,46 @@ const chipButtonStyle = {
 	cursor: "pointer",
 	textAlign: "left",
 	fontFamily: "inherit"
-};
-function chipStyle(theme) {
+} };
+function chipDefault(theme) {
 	return {
-		display: "block",
-		height: CHIP_HEIGHT,
-		lineHeight: `${CHIP_HEIGHT}px`,
-		padding: "0 6px",
-		borderRadius: 4,
-		background: theme.eventBackground,
-		color: theme.eventText,
-		fontSize: 11,
-		fontWeight: 600,
-		whiteSpace: "nowrap",
-		overflow: "hidden",
-		textOverflow: "ellipsis"
+		base: {
+			display: "block",
+			height: CHIP_HEIGHT,
+			lineHeight: `${CHIP_HEIGHT}px`,
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis"
+		},
+		themed: {
+			padding: "0 6px",
+			borderRadius: 4,
+			background: theme.eventBackground,
+			color: theme.eventText,
+			fontSize: 11,
+			fontWeight: 600
+		}
 	};
 }
-function moreButtonStyle(theme) {
+function moreButtonDefault(theme) {
 	return {
-		position: "relative",
-		zIndex: 1,
-		border: "none",
-		background: "transparent",
-		cursor: "pointer",
-		textAlign: "left",
-		padding: "0 6px",
-		height: CHIP_HEIGHT,
-		lineHeight: `${CHIP_HEIGHT}px`,
-		fontSize: 11,
-		fontWeight: 600,
-		fontFamily: "inherit",
-		color: theme.textMuted
+		base: {
+			position: "relative",
+			zIndex: 1,
+			border: "none",
+			background: "transparent",
+			cursor: "pointer",
+			textAlign: "left",
+			height: CHIP_HEIGHT,
+			lineHeight: `${CHIP_HEIGHT}px`,
+			fontFamily: "inherit"
+		},
+		themed: {
+			padding: "0 6px",
+			fontSize: 11,
+			fontWeight: 600,
+			color: theme.textMuted
+		}
 	};
 }
 /**
@@ -345,8 +422,12 @@ function moreButtonStyle(theme) {
 * <MonthView date={new Date()} events={events} onPressDay={(d) => setDate(d)} />
 * ```
 */
-function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayProp, renderEvent, maxVisibleEventCount = 3, moreLabel = "{moreCount} More", onPressEvent, onPressMore, selectedRange, selectedDates, showAdjacentMonths = true, fillCellOnSelection = false, showTitle = true, showWeekdays = true, locale, theme: themeOverrides, minDate, maxDate, isDateDisabled, onPressDay, keyboardDayNavigation = false, className, style }) {
+function MonthView({ date, weekStartsOn = 0, weekdayFormat = "short", events, eventsByDay: eventsByDayProp, renderEvent, eventAccessibilityLabel, maxVisibleEventCount = 3, moreLabel = "{moreCount} More", onPressEvent, onPressMore, selectedRange, selectedDates, showAdjacentMonths = true, fillCellOnSelection = false, showTitle = true, showWeekdays = true, locale, theme: themeOverrides, minDate, maxDate, isDateDisabled, onPressDay, onCreateEvent, keyboardDayNavigation = false, className, style, classNames, styles }) {
 	const theme = (0, react.useMemo)(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const slot = createSlots({
+		classNames,
+		styles
+	});
 	const eventsMode = events !== void 0;
 	const dayRoving = !eventsMode || keyboardDayNavigation;
 	const eventsByDay = (0, react.useMemo)(() => {
@@ -359,6 +440,7 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 	const eventRowHeight = 32 + maxVisibleEventCount * 20;
 	const { weeks, weekdays } = (0, react.useMemo)(() => (0, _super_calendar_core.buildMonthGrid)(date, {
 		weekStartsOn,
+		weekdayFormat,
 		selectedRange,
 		selectedDates,
 		minDate,
@@ -368,6 +450,7 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 	}), [
 		date,
 		weekStartsOn,
+		weekdayFormat,
 		selectedRange,
 		selectedDates,
 		minDate,
@@ -394,6 +477,46 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 	const [hoveredKey, setHoveredKey] = (0, react.useState)(null);
 	const gridRef = (0, react.useRef)(null);
 	const focusKey = (0, date_fns.format)(focusedDate, "yyyy-MM-dd");
+	const [creating, setCreating] = (0, react.useState)(null);
+	const creatingRef = (0, react.useRef)(creating);
+	creatingRef.current = creating;
+	const movedRef = (0, react.useRef)(false);
+	const suppressClickRef = (0, react.useRef)(false);
+	const beginCreate = (day) => {
+		if (!onCreateEvent) return;
+		const t = (0, date_fns.startOfDay)(day).getTime();
+		movedRef.current = false;
+		setCreating({
+			anchor: t,
+			hover: t
+		});
+	};
+	const extendCreate = (day) => {
+		if (!creatingRef.current) return;
+		const t = (0, date_fns.startOfDay)(day).getTime();
+		if (t !== creatingRef.current.hover) {
+			movedRef.current = true;
+			setCreating((c) => c ? {
+				...c,
+				hover: t
+			} : c);
+		}
+	};
+	const isCreating = creating !== null;
+	(0, react.useEffect)(() => {
+		if (!isCreating) return;
+		const finish = () => {
+			const c = creatingRef.current;
+			setCreating(null);
+			if (!c || !movedRef.current) return;
+			suppressClickRef.current = true;
+			const lo = Math.min(c.anchor, c.hover);
+			const hi = Math.max(c.anchor, c.hover);
+			onCreateEvent?.(new Date(lo), (0, date_fns.addDays)(new Date(hi), 1));
+		};
+		window.addEventListener("pointerup", finish);
+		return () => window.removeEventListener("pointerup", finish);
+	}, [isCreating, onCreateEvent]);
 	const onKeyDown = (e) => {
 		let next = null;
 		if (e.key === "ArrowLeft") next = (0, date_fns.addDays)(focusedDate, -1);
@@ -418,27 +541,31 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 		},
 		children: [
 			showTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: {
+				...slot("title", { themed: {
 					fontSize: 17,
 					fontWeight: 700,
 					padding: "10px 14px 6px"
-				},
+				} }),
 				children: (0, date_fns.format)(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}) : null,
 			showWeekdays ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: {
-					display: "grid",
-					gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-					borderBottom: `1px solid ${theme.gridLine}`,
-					padding: "6px 0"
-				},
+				...slot("weekdays", {
+					base: {
+						display: "grid",
+						gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+					},
+					themed: {
+						borderBottom: `1px solid ${theme.gridLine}`,
+						padding: "6px 0"
+					}
+				}),
 				children: weekdays.map((wd) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					style: {
+					...slot("weekday", { themed: {
 						textAlign: "center",
 						fontSize: 12,
 						fontWeight: 600,
 						color: theme.textMuted
-					},
+					} }),
 					children: wd.label
 				}, wd.label))
 			}) : null,
@@ -447,12 +574,13 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 				role: "grid",
 				"aria-label": (0, date_fns.format)(date, "MMMM yyyy", locale ? { locale } : void 0),
 				onKeyDown: dayRoving ? onKeyDown : void 0,
+				...slot("grid"),
 				children: weeks.map((week) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					role: "row",
-					style: {
+					...slot("week", { base: {
 						display: "grid",
 						gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
-					},
+					} }),
 					children: week.days.map((day) => {
 						const hidden = !showAdjacentMonths && !day.isCurrentMonth;
 						const cellHeight = eventsMode ? eventRowHeight : theme.cellHeight;
@@ -461,8 +589,19 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 							"aria-hidden": true,
 							style: { height: cellHeight }
 						}, day.id);
-						const band = rangeBandStyle(day, theme, fillCellOnSelection);
+						const band = rangeBandDefault(day, theme, fillCellOnSelection);
 						const label = (0, date_fns.format)(day.date, "EEEE, d MMMM yyyy", locale ? { locale } : void 0);
+						const dayTime = (0, date_fns.startOfDay)(day.date).getTime();
+						const inCreate = creating != null && dayTime >= Math.min(creating.anchor, creating.hover) && dayTime <= Math.max(creating.anchor, creating.hover);
+						const dayData = dataState({
+							"data-today": day.isToday,
+							"data-selected": day.isSelected,
+							"data-range": day.isInRange,
+							"data-weekend": day.isWeekend,
+							"data-outside": !day.isCurrentMonth,
+							"data-disabled": day.isDisabled,
+							"data-creating": inCreate
+						});
 						if (eventsMode) {
 							const dayEvents = eventsByDay.get((0, date_fns.startOfDay)(day.date).toISOString()) ?? [];
 							const visible = (0, _super_calendar_core.monthVisibleCount)(dayEvents.length, {
@@ -473,14 +612,30 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 							const rest = dayEvents.slice(visible);
 							const overflow = rest.length > 0;
 							const dayLabel = (0, date_fns.format)(day.date, "d MMMM", locale ? { locale } : void 0);
+							const dayCellProps = slot("day", eventCellDefault(day, theme, cellHeight));
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								role: "gridcell",
 								"data-day": day.id,
+								...dayData,
 								tabIndex: keyboardDayNavigation ? day.id === focusKey ? 0 : -1 : void 0,
 								"aria-disabled": day.isDisabled || void 0,
 								"aria-label": label,
-								style: eventCellStyle(day, theme, cellHeight),
-								onClick: day.isDisabled ? void 0 : () => onPressDay?.(day.date),
+								...dayCellProps,
+								style: onCreateEvent ? {
+									...dayCellProps.style,
+									touchAction: "none"
+								} : dayCellProps.style,
+								onPointerDown: onCreateEvent && !day.isDisabled ? (e) => {
+									if (e.button === 0) beginCreate(day.date);
+								} : void 0,
+								onPointerEnter: onCreateEvent ? () => extendCreate(day.date) : void 0,
+								onClick: day.isDisabled ? void 0 : () => {
+									if (suppressClickRef.current) {
+										suppressClickRef.current = false;
+										return;
+									}
+									onPressDay?.(day.date);
+								},
 								onKeyDown: keyboardDayNavigation && !day.isDisabled ? (e) => {
 									if (e.target !== e.currentTarget) return;
 									if (e.key === "Enter" || e.key === " ") {
@@ -492,18 +647,19 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 									band ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										"data-band": true,
 										"aria-hidden": true,
-										style: band
+										...slot("rangeBand", band)
 									}) : null,
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: compactBadgeStyle(day, theme),
+										...dayData,
+										...slot("dayBadge", compactBadgeDefault(day, theme)),
 										children: day.label
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										style: {
+										...slot("events", { base: {
 											display: "flex",
 											flexDirection: "column",
 											gap: CHIP_GAP
-										},
+										} }),
 										children: [shown.map((event) => {
 											const onPress = () => onPressEvent?.(event);
 											return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -512,14 +668,18 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 													e.stopPropagation();
 													onPress();
 												},
-												style: chipButtonStyle,
+												...slot("chipButton", chipButtonDefault),
 												title: event.title,
-												"aria-label": `${event.title}, ${dayLabel}`,
+												"aria-label": eventAccessibilityLabel ? eventAccessibilityLabel(event, {
+													mode: "month",
+													isAllDay: (0, _super_calendar_core.isAllDayEvent)(event),
+													ampm: false
+												}) : `${event.title}, ${dayLabel}`,
 												children: Chip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chip, {
 													event,
 													onPress
 												}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													style: chipStyle(theme),
+													...slot("chip", chipDefault(theme)),
 													children: event.title
 												})
 											}, `${event.start.toISOString()}:${event.title}`);
@@ -529,7 +689,7 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 												e.stopPropagation();
 												onPressMore?.(rest, day.date);
 											},
-											style: moreButtonStyle(theme),
+											...slot("more", moreButtonDefault(theme)),
 											"aria-label": `${rest.length} more events, ${dayLabel}`,
 											children: moreLabel.replace("{moreCount}", String(rest.length))
 										}) : null]
@@ -541,20 +701,22 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 							type: "button",
 							role: "gridcell",
 							"data-day": day.id,
+							...dayData,
 							tabIndex: day.id === focusKey ? 0 : -1,
 							"aria-disabled": day.isDisabled || void 0,
 							"aria-label": label,
 							"aria-pressed": day.isSelected || day.isInRange,
-							style: dayCellStyle(day, theme),
+							...slot("day", dayCellDefault(day, theme)),
 							onClick: day.isDisabled ? void 0 : () => onPressDay?.(day.date),
 							onMouseEnter: day.isDisabled ? void 0 : () => setHoveredKey(day.id),
 							onMouseLeave: () => setHoveredKey((k) => k === day.id ? null : k),
 							children: [band ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								"data-band": true,
 								"aria-hidden": true,
-								style: band
+								...slot("rangeBand", band)
 							}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								style: badgeStyle(day, theme, hoveredKey === day.id),
+								...dayData,
+								...slot("dayBadge", badgeDefault(day, theme, hoveredKey === day.id)),
 								children: day.label
 							})]
 						}, day.id);
@@ -568,11 +730,11 @@ function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayPro
 //#region src/TimeGrid.tsx
 const HOURS = Array.from({ length: 24 }, (_, h) => h);
 const GUTTER_WIDTH = 56;
-const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const clamp$1 = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 const DOM_TITLE_LINE_HEIGHT = 16;
 const DOM_TIME_LINE_HEIGHT = 30;
 const DOM_BOX_PADDING_V = 2;
-function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme }) {
+function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme, boxProps }) {
 	const timeLabel = (0, _super_calendar_core.eventTimeLabel)({
 		mode,
 		isAllDay,
@@ -590,17 +752,34 @@ function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme
 		paddingYPx: DOM_BOX_PADDING_V
 	});
 	const oneLine = (0, _super_calendar_core.titleNumberOfLines)(mode, isAllDay) === 1;
+	const boxBase = {
+		height: "100%",
+		boxSizing: "border-box",
+		overflow: "hidden",
+		lineHeight: `${DOM_TITLE_LINE_HEIGHT}px`,
+		...titleMaxLines === 1 && !showTime ? {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center"
+		} : null
+	};
+	const boxThemed = {
+		padding: `${DOM_BOX_PADDING_V}px 6px`,
+		borderRadius: 6,
+		background: theme.eventBackground,
+		color: theme.eventText,
+		fontSize: 12
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		style: {
-			height: "100%",
-			boxSizing: "border-box",
-			overflow: "hidden",
-			padding: `${DOM_BOX_PADDING_V}px 6px`,
-			borderRadius: 6,
-			background: theme.eventBackground,
-			color: theme.eventText,
-			fontSize: 12,
-			lineHeight: `${DOM_TITLE_LINE_HEIGHT}px`
+		className: boxProps?.className,
+		"data-slot": boxProps?.["data-slot"],
+		style: boxProps?.className ? {
+			...boxBase,
+			...boxProps.style
+		} : {
+			...boxBase,
+			...boxThemed,
+			...boxProps?.style
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			style: {
@@ -633,8 +812,12 @@ function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme
 * <TimeGrid mode="week" date={new Date()} events={events} />
 * ```
 */
-function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStartsOn = 0, hourHeight: initialHourHeight = 48, scrollOffsetMinutes = 480, zoomable = true, minHourHeight = 24, maxHourHeight = 160, dragStepMinutes = 15, ampm = false, timeslots = 1, businessHours, showNowIndicator = true, showAllDayEventCell = true, locale, theme: themeOverrides, height = 600, renderEvent, hourComponent, onPressEvent, onPressDateHeader, onPressCell, onCreateEvent, onDragStart, onDragEvent, className, style }) {
+function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStartsOn = 0, weekdayFormat = "short", hourHeight: initialHourHeight = 48, scrollOffsetMinutes = 480, zoomable = true, minHourHeight = 24, maxHourHeight = 160, dragStepMinutes = 15, ampm = false, timeslots = 1, businessHours, showNowIndicator = true, showAllDayEventCell = true, locale, theme: themeOverrides, height = 600, renderEvent, eventAccessibilityLabel, hourComponent, onPressEvent, onPressDateHeader, onPressCell, onCreateEvent, onDragStart, onDragEvent, className, style, classNames, styles }) {
 	const theme = (0, react.useMemo)(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const slot = createSlots({
+		classNames,
+		styles
+	});
 	const scrollRef = (0, react.useRef)(null);
 	const dfns = locale ? { locale } : void 0;
 	const snapHours = dragStepMinutes / 60;
@@ -673,7 +856,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		const onWheel = (e) => {
 			if (!e.ctrlKey && !e.metaKey) return;
 			e.preventDefault();
-			setHourHeight((h) => clamp(h * (1 - e.deltaY * .0015), minHourHeight, maxHourHeight));
+			setHourHeight((h) => clamp$1(h * (1 - e.deltaY * .0015), minHourHeight, maxHourHeight));
 		};
 		el.addEventListener("wheel", onWheel, { passive: false });
 		return () => el.removeEventListener("wheel", onWheel);
@@ -701,7 +884,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		if (pinch.current.size === 2 && pinchBase.current) {
 			const ys = [...pinch.current.values()];
 			const ratio = Math.abs(ys[0] - ys[1]) / (pinchBase.current.dist || 1);
-			setHourHeight(clamp(pinchBase.current.height * ratio, minHourHeight, maxHourHeight));
+			setHourHeight(clamp$1(pinchBase.current.height * ratio, minHourHeight, maxHourHeight));
 		}
 	};
 	const onBodyPointerUp = (e) => {
@@ -740,14 +923,14 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		const dHours = (e.clientY - dragOrigin.current.pointerY) / hourHeightRef.current;
 		const snap = (v) => Math.round(v / snapHours) * snapHours;
 		if (d.kind === "move") {
-			const startHours = clamp(snap(dragOrigin.current.startHours + dHours), 0, 24 - d.durationHours);
+			const startHours = clamp$1(snap(dragOrigin.current.startHours + dHours), 0, 24 - d.durationHours);
 			applyDrag({
 				...d,
 				startHours,
 				moved: true
 			});
 		} else {
-			const durationHours = clamp(snap(dragOrigin.current.durationHours + dHours), snapHours, 24 - d.startHours);
+			const durationHours = clamp$1(snap(dragOrigin.current.durationHours + dHours), snapHours, 24 - d.startHours);
 			applyDrag({
 				...d,
 				durationHours,
@@ -850,10 +1033,10 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		},
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: {
-					display: "flex",
-					borderBottom: `1px solid ${theme.gridLine}`
-				},
+				...slot("header", {
+					base: { display: "flex" },
+					themed: { borderBottom: `1px solid ${theme.gridLine}` }
+				}),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
 					width: GUTTER_WIDTH,
 					flex: "none"
@@ -864,63 +1047,77 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 						tabIndex: onPressDateHeader ? 0 : -1,
 						"aria-hidden": onPressDateHeader ? void 0 : true,
 						onClick: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
-						style: {
-							flex: 1,
-							border: "none",
-							background: "transparent",
-							font: "inherit",
-							color: theme.textMuted,
-							cursor: onPressDateHeader ? "pointer" : "default",
-							padding: "6px 0",
-							display: "flex",
-							flexDirection: "column",
-							alignItems: "center",
-							gap: 2
-						},
+						...dataState({ "data-today": today }),
+						...slot("columnHeader", {
+							base: {
+								flex: 1,
+								border: "none",
+								background: "transparent",
+								font: "inherit",
+								cursor: onPressDateHeader ? "pointer" : "default",
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								gap: 2
+							},
+							themed: {
+								color: theme.textMuted,
+								padding: "6px 0"
+							}
+						}),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: {
+							...slot("columnHeaderWeekday", { themed: {
 								fontSize: 11,
 								fontWeight: 600
-							},
-							children: (0, date_fns.format)(day, "EEE", dfns)
+							} }),
+							children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), dfns)
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: {
-								width: 28,
-								height: 28,
-								borderRadius: "50%",
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								fontSize: 15,
-								fontWeight: 600,
-								background: today ? theme.todayBackground : "transparent",
-								color: today ? theme.todayText : theme.text
-							},
+							...dataState({ "data-today": today }),
+							...slot("columnHeaderDate", {
+								base: {
+									width: 28,
+									height: 28,
+									borderRadius: "50%",
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center"
+								},
+								themed: {
+									fontSize: 15,
+									fontWeight: 600,
+									background: today ? theme.todayBackground : "transparent",
+									color: today ? theme.todayText : theme.text
+								}
+							}),
 							children: (0, date_fns.format)(day, "d", dfns)
 						})]
 					}, day.toISOString());
 				})]
 			}),
 			showAllDayEventCell && hasAllDay ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: {
-					display: "flex",
-					borderBottom: `1px solid ${theme.gridLine}`
-				},
+				...slot("allDayLane", {
+					base: { display: "flex" },
+					themed: { borderBottom: `1px solid ${theme.gridLine}` }
+				}),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						width: GUTTER_WIDTH,
-						flex: "none",
-						fontSize: 10,
-						color: theme.textMuted,
-						textAlign: "right",
-						padding: "4px 6px 0 0"
-					},
+					...slot("allDayLabel", {
+						base: {
+							width: GUTTER_WIDTH,
+							flex: "none",
+							textAlign: "right"
+						},
+						themed: {
+							fontSize: 10,
+							color: theme.textMuted,
+							padding: "4px 6px 0 0"
+						}
+					}),
 					children: "all-day"
 				}), allDayByDay.map((list, i) => {
 					const dayStart = (0, date_fns.startOfDay)(days[i]);
 					const dayEnd = (0, date_fns.addDays)(dayStart, 1);
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: {
+						...slot("allDayColumn", { base: {
 							flex: 1,
 							minWidth: 0,
 							borderLeft: "1px solid transparent",
@@ -928,7 +1125,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 							display: "flex",
 							flexDirection: "column",
 							gap: 2
-						},
+						} }),
 						children: list.map((event) => {
 							const args = {
 								event,
@@ -942,24 +1139,29 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								onClick: () => onPressEvent?.(event),
-								"aria-label": (0, _super_calendar_core.eventAccessibilityLabel)({
+								"aria-label": eventAccessibilityLabel ? eventAccessibilityLabel(event, {
+									mode,
+									isAllDay: true,
+									ampm
+								}) : (0, _super_calendar_core.eventAccessibilityLabel)({
 									title: event.title,
 									isAllDay: true,
 									start: event.start,
 									end: event.end,
 									ampm
 								}),
-								style: {
+								...slot("allDayEvent", { base: {
 									border: "none",
 									padding: 0,
 									background: "transparent",
 									cursor: "pointer",
 									textAlign: "left",
 									height: 22
-								},
+								} }),
 								children: Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultDomEvent, {
 									...args,
-									theme
+									theme,
+									boxProps: slot("eventBox")
 								})
 							}, `${event.start.toISOString()}:${event.title}`);
 						})
@@ -985,19 +1187,23 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 						position: "relative"
 					},
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: {
+						...slot("hourGutter", { base: {
 							width: GUTTER_WIDTH,
 							flex: "none",
 							position: "relative"
-						},
+						} }),
 						children: HOURS.map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							style: {
-								position: "absolute",
-								top: h * hourHeight - 6,
-								right: 6,
-								fontSize: 10,
-								color: theme.textMuted
-							},
+							...slot("hourLabel", {
+								base: {
+									position: "absolute",
+									top: h * hourHeight - 6,
+									right: 6
+								},
+								themed: {
+									fontSize: 10,
+									color: theme.textMuted
+								}
+							}),
 							children: hourComponent ? hourComponent(h, ampm) : h === 0 ? "" : (0, _super_calendar_core.formatHour)(h, { ampm })
 						}, h))
 					}), days.map((day, dayIndex) => {
@@ -1012,34 +1218,47 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 							onPointerMove: cellEnabled ? moveCreate : void 0,
 							onPointerUp: cellEnabled ? endCreate : void 0,
 							onPointerCancel: cellEnabled ? cancelCreate : void 0,
-							style: {
-								flex: 1,
-								position: "relative",
-								borderLeft: `1px solid ${theme.gridLine}`
-							},
+							...dataState({
+								"data-today": (0, _super_calendar_core.getIsToday)(day),
+								"data-weekend": (0, _super_calendar_core.isWeekend)(day)
+							}),
+							...slot("dayColumn", {
+								base: {
+									flex: 1,
+									position: "relative"
+								},
+								themed: {
+									borderLeft: `1px solid ${theme.gridLine}`,
+									...(0, _super_calendar_core.isWeekend)(day) ? { background: theme.weekendBackground } : null
+								}
+							}),
 							children: [
 								bands.map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									"aria-hidden": true,
-									style: {
-										position: "absolute",
-										left: 0,
-										right: 0,
-										top: b.start * hourHeight,
-										height: (b.end - b.start) * hourHeight,
-										background: theme.outsideHoursBackground,
-										pointerEvents: "none",
-										zIndex: 0
-									}
+									...slot("businessHours", {
+										base: {
+											position: "absolute",
+											left: 0,
+											right: 0,
+											top: b.start * hourHeight,
+											height: (b.end - b.start) * hourHeight,
+											pointerEvents: "none",
+											zIndex: 0
+										},
+										themed: { background: theme.outsideHoursBackground }
+									})
 								}, b.start)),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									"aria-hidden": true,
-									style: {
-										position: "absolute",
-										inset: 0,
-										pointerEvents: "none",
-										zIndex: 0,
-										backgroundImage: gridLines
-									}
+									...slot("gridLines", {
+										base: {
+											position: "absolute",
+											inset: 0,
+											pointerEvents: "none",
+											zIndex: 0
+										},
+										themed: { backgroundImage: gridLines }
+									})
 								}),
 								positioned.map((pe, idx) => {
 									const key = `${dayIndex}:${idx}`;
@@ -1064,7 +1283,11 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										role: "button",
 										tabIndex: 0,
-										"aria-label": (0, _super_calendar_core.eventAccessibilityLabel)({
+										"aria-label": eventAccessibilityLabel ? eventAccessibilityLabel(pe.event, {
+											mode,
+											isAllDay: false,
+											ampm
+										}) : (0, _super_calendar_core.eventAccessibilityLabel)({
 											title: pe.event.title,
 											isAllDay: false,
 											start: pe.event.start,
@@ -1082,7 +1305,8 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 										onPointerUp: draggable ? (e) => endDrag(e, day, pe.event, onPress) : void 0,
 										onPointerCancel: draggable ? cancelDrag : void 0,
 										onClick: draggable ? void 0 : onPress,
-										style: {
+										...dataState({ "data-dragging": !!active }),
+										...slot("event", { base: {
 											position: "absolute",
 											top,
 											height: boxHeight,
@@ -1092,10 +1316,11 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 											touchAction: draggable ? "none" : "auto",
 											zIndex: active ? 3 : 1,
 											opacity: active ? .85 : 1
-										},
+										} }),
 										children: [Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultDomEvent, {
 											...args,
-											theme
+											theme,
+											boxProps: slot("eventBox")
 										}), draggable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											onPointerDown: (e) => {
 												e.stopPropagation();
@@ -1114,7 +1339,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 									}, idx);
 								}),
 								showNow ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									style: {
+									...slot("nowIndicator", { base: {
 										position: "absolute",
 										top: nowTop,
 										left: 0,
@@ -1122,7 +1347,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 										height: 0,
 										zIndex: 2,
 										pointerEvents: "none"
-									},
+									} }),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
 										height: 2,
 										background: theme.nowIndicator
@@ -1138,19 +1363,23 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 								}) : null,
 								ghost ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									"aria-hidden": true,
-									style: {
-										position: "absolute",
-										left: 1,
-										right: 1,
-										top: ghost.topPx,
-										height: Math.max(ghost.heightPx, 2),
-										background: theme.rangeBackground,
-										border: `1px solid ${theme.selectedBackground}`,
-										borderRadius: 6,
-										opacity: .7,
-										pointerEvents: "none",
-										zIndex: 2
-									}
+									...slot("createGhost", {
+										base: {
+											position: "absolute",
+											left: 1,
+											right: 1,
+											top: ghost.topPx,
+											height: Math.max(ghost.heightPx, 2),
+											opacity: .7,
+											pointerEvents: "none",
+											zIndex: 2
+										},
+										themed: {
+											background: theme.rangeBackground,
+											border: `1px solid ${theme.selectedBackground}`,
+											borderRadius: 6
+										}
+									})
 								}) : null
 							]
 						}, day.toISOString());
@@ -1173,7 +1402,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 * <Calendar mode="week" date={new Date()} events={events} />
 * ```
 */
-function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays, locale, theme, height, className, style, onPressEvent, ampm, hourHeight, scrollOffsetMinutes, timeslots, businessHours, showNowIndicator, showAllDayEventCell, dragStepMinutes, onPressCell, onCreateEvent, onDragStart, onDragEvent, onPressDateHeader, renderTimeEvent, hourComponent, maxVisibleEventCount, moreLabel, showAdjacentMonths, fillCellOnSelection, selectedRange, selectedDates, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, onPressMore, renderMonthEvent, renderScheduleEvent }) {
+function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays, locale, theme, height, className, style, onPressEvent, eventAccessibilityLabel, ampm, hourHeight, scrollOffsetMinutes, timeslots, businessHours, showNowIndicator, showAllDayEventCell, dragStepMinutes, onPressCell, onCreateEvent, onDragStart, onDragEvent, onPressDateHeader, renderTimeEvent, hourComponent, maxVisibleEventCount, moreLabel, showAdjacentMonths, weekdayFormat, fillCellOnSelection, selectedRange, selectedDates, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, onPressMore, renderMonthEvent, renderScheduleEvent, classNames, styles }) {
 	if (mode === "schedule") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Agenda, {
 		events: events ?? [],
 		locale,
@@ -1183,7 +1412,10 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		activeDate: date,
 		className,
 		style,
+		classNames,
+		styles,
 		renderEvent: renderScheduleEvent,
+		eventAccessibilityLabel,
 		onPressEvent,
 		onPressDay
 	});
@@ -1191,10 +1423,13 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		date,
 		events: events ?? [],
 		weekStartsOn,
+		weekdayFormat,
 		locale,
 		theme,
 		className,
 		style,
+		classNames,
+		styles,
 		maxVisibleEventCount,
 		moreLabel,
 		showAdjacentMonths,
@@ -1206,21 +1441,26 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		isDateDisabled,
 		keyboardDayNavigation,
 		onPressDay,
+		onCreateEvent,
 		onPressEvent,
 		onPressMore,
-		renderEvent: renderMonthEvent
+		renderEvent: renderMonthEvent,
+		eventAccessibilityLabel
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeGrid, {
 		date,
 		mode,
 		events,
 		weekStartsOn,
+		weekdayFormat,
 		numberOfDays,
 		locale,
 		theme,
 		height,
 		className,
 		style,
+		classNames,
+		styles,
 		ampm,
 		hourHeight,
 		scrollOffsetMinutes,
@@ -1236,6 +1476,7 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		onDragEvent,
 		onPressDateHeader,
 		renderEvent: renderTimeEvent,
+		eventAccessibilityLabel,
 		hourComponent
 	});
 }
@@ -1246,8 +1487,12 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 * Legend List's DOM renderer and the library's headless grid logic. Selection is
 * controlled, pass `selectedRange` (or `selectedDates`) and handle `onPressDay`.
 */
-function MonthList({ date, pastMonths = 1, futureMonths = 12, weekStartsOn = 0, events, renderEvent, maxVisibleEventCount, moreLabel, onPressEvent, onPressMore, selectedRange, selectedDates, fillCellOnSelection = false, locale, theme: themeOverrides, height = 480, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, className, style }) {
+function MonthList({ date, pastMonths = 1, futureMonths = 12, weekdayFormat = "short", weekStartsOn = 0, events, renderEvent, eventAccessibilityLabel, maxVisibleEventCount, moreLabel, onPressEvent, onPressMore, selectedRange, selectedDates, fillCellOnSelection = false, locale, theme: themeOverrides, height = 480, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, className, style, classNames, styles }) {
 	const theme = (0, react.useMemo)(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const slot = createSlots({
+		classNames,
+		styles
+	});
 	const months = (0, react.useMemo)(() => {
 		const first = (0, date_fns.startOfMonth)((0, date_fns.addMonths)(date, -pastMonths));
 		const count = pastMonths + futureMonths + 1;
@@ -1259,10 +1504,12 @@ function MonthList({ date, pastMonths = 1, futureMonths = 12, weekStartsOn = 0,
 	]);
 	const weekdays = (0, react.useMemo)(() => (0, _super_calendar_core.buildMonthGrid)(date, {
 		weekStartsOn,
+		weekdayFormat,
 		locale
 	}).weekdays, [
 		date,
 		weekStartsOn,
+		weekdayFormat,
 		locale
 	]);
 	const eventsByDay = (0, react.useMemo)(() => {
@@ -1288,19 +1535,23 @@ function MonthList({ date, pastMonths = 1, futureMonths = 12, weekStartsOn = 0,
 			...style
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: {
-				display: "grid",
-				gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-				borderBottom: `1px solid ${theme.gridLine}`,
-				padding: "8px 0"
-			},
+			...slot("weekdays", {
+				base: {
+					display: "grid",
+					gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+				},
+				themed: {
+					borderBottom: `1px solid ${theme.gridLine}`,
+					padding: "8px 0"
+				}
+			}),
 			children: weekdays.map((wd) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: {
+				...slot("weekday", { themed: {
 					textAlign: "center",
 					fontSize: 12,
 					fontWeight: 600,
 					color: theme.textMuted
-				},
+				} }),
 				children: wd.label
 			}, wd.label))
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react.LegendList, {
@@ -1320,6 +1571,7 @@ function MonthList({ date, pastMonths = 1, futureMonths = 12, weekStartsOn = 0,
 				events,
 				eventsByDay,
 				renderEvent,
+				eventAccessibilityLabel,
 				maxVisibleEventCount,
 				moreLabel,
 				onPressEvent,
@@ -1335,16 +1587,571 @@ function MonthList({ date, pastMonths = 1, futureMonths = 12, weekStartsOn = 0,
 				maxDate,
 				isDateDisabled,
 				keyboardDayNavigation,
-				onPressDay
+				onPressDay,
+				classNames,
+				styles
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/DateRangePicker.tsx
+const triggerDefault = {
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: 8,
+	minWidth: 220,
+	padding: "8px 12px",
+	borderRadius: 8,
+	cursor: "pointer",
+	font: "inherit",
+	textAlign: "left"
+};
+const popoverDefault = {
+	position: "absolute",
+	zIndex: 20,
+	marginTop: 6,
+	overflow: "hidden",
+	borderRadius: 12,
+	minWidth: 300
+};
+/**
+* The shared popover shell: a trigger button and a calendar panel that closes on
+* outside-click and Escape, and returns focus to the trigger. `renderCalendar`
+* gets a close callback so a single-date pick can dismiss immediately.
+*/
+function usePopover() {
+	const [open, setOpen] = (0, react.useState)(false);
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const onDown = (e) => {
+			if (!rootRef.current?.contains(e.target)) setOpen(false);
+		};
+		const onKey = (e) => {
+			if (e.key === "Escape") {
+				setOpen(false);
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("mousedown", onDown);
+		document.addEventListener("keydown", onKey);
+		return () => {
+			document.removeEventListener("mousedown", onDown);
+			document.removeEventListener("keydown", onKey);
+		};
+	}, [open]);
+	return {
+		open,
+		setOpen,
+		rootRef,
+		triggerRef
+	};
+}
+function PickerShell({ open, setOpen, rootRef, triggerRef, theme, slot, label, hasValue, placeholder, disabled, className, style, ariaLabel, children }) {
+	const dialogId = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: rootRef,
+		className,
+		style: {
+			position: "relative",
+			display: "inline-block",
+			fontFamily: theme.fontFamily,
+			...style
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			ref: triggerRef,
+			type: "button",
+			disabled,
+			"aria-haspopup": "dialog",
+			"aria-expanded": open,
+			"aria-controls": open ? dialogId : void 0,
+			onClick: () => setOpen(!open),
+			...slot("trigger", {
+				base: triggerDefault,
+				themed: {
+					border: `1px solid ${theme.gridLine}`,
+					background: theme.eventBackground,
+					color: hasValue ? theme.text : theme.textMuted,
+					opacity: disabled ? .5 : 1
+				}
+			}),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hasValue ? label : placeholder }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				children: "▾"
+			})]
+		}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: dialogId,
+			role: "dialog",
+			"aria-label": ariaLabel,
+			...slot("popover", {
+				base: popoverDefault,
+				themed: {
+					background: theme.eventBackground,
+					border: `1px solid ${theme.gridLine}`
+				}
+			}),
+			children
+		}) : null]
+	});
+}
+/**
+* A single-date input with a popover calendar. Controlled via `value` / `onChange`.
+* Composed from {@link MonthList}; forward calendar slots (e.g. `dayBadge`) through
+* `classNames` to restyle the popover.
+*
+* @example
+* ```tsx
+* const [value, setValue] = useState<Date | null>(null);
+* <DatePicker value={value} onChange={setValue} />
+* ```
+*/
+function DatePicker({ value, onChange, formatLabel = (d) => (0, date_fns.format)(d, "d MMM yyyy"), weekStartsOn = 0, height = 320, placeholder = "Select a date", disabled, theme: themeOverrides, className, style, classNames, styles, minDate, maxDate, isDateDisabled }) {
+	const theme = mergeDomTheme(themeOverrides);
+	const slot = createSlots({
+		classNames,
+		styles
+	});
+	const { open, setOpen, rootRef, triggerRef } = usePopover();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerShell, {
+		open,
+		setOpen,
+		rootRef,
+		triggerRef,
+		theme,
+		slot,
+		label: value ? formatLabel(value) : "",
+		hasValue: !!value,
+		placeholder,
+		disabled,
+		className,
+		style,
+		ariaLabel: "Choose a date",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthList, {
+			date: value ?? /* @__PURE__ */ new Date(),
+			weekStartsOn,
+			selectedDates: value ? [value] : [],
+			minDate,
+			maxDate,
+			isDateDisabled,
+			onPressDay: (day) => {
+				onChange(day);
+				setOpen(false);
+				triggerRef.current?.focus();
+			},
+			height,
+			classNames,
+			styles
+		})
+	});
+}
+function defaultRangeLabel(range) {
+	const start = (0, date_fns.format)(range.start, "d MMM yyyy");
+	return range.end ? `${start} – ${(0, date_fns.format)(range.end, "d MMM yyyy")}` : `${start} – …`;
+}
+/**
+* A date-range input with a popover calendar. Controlled via `value` / `onChange`;
+* each pick advances the range through {@link nextDateRange} (start, then end), and
+* the popover closes once both ends are set.
+*
+* @example
+* ```tsx
+* const [range, setRange] = useState<DateRange | null>(null);
+* <DateRangePicker value={range} onChange={setRange} />
+* ```
+*/
+function DateRangePicker({ value, onChange, formatLabel = defaultRangeLabel, weekStartsOn = 0, height = 320, placeholder = "Select dates", disabled, theme: themeOverrides, className, style, classNames, styles, minDate, maxDate, isDateDisabled }) {
+	const theme = mergeDomTheme(themeOverrides);
+	const slot = createSlots({
+		classNames,
+		styles
+	});
+	const { open, setOpen, rootRef, triggerRef } = usePopover();
+	const constraints = {
+		minDate,
+		maxDate,
+		isDateDisabled
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PickerShell, {
+		open,
+		setOpen,
+		rootRef,
+		triggerRef,
+		theme,
+		slot,
+		label: value ? formatLabel(value) : "",
+		hasValue: !!value,
+		placeholder,
+		disabled,
+		className,
+		style,
+		ariaLabel: "Choose a date range",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthList, {
+			date: value?.start ?? /* @__PURE__ */ new Date(),
+			weekStartsOn,
+			selectedRange: value ?? void 0,
+			minDate,
+			maxDate,
+			isDateDisabled,
+			onPressDay: (day) => {
+				const next = (0, _super_calendar_core.nextDateRange)(value, day, constraints);
+				onChange(next);
+				if (next?.end) {
+					setOpen(false);
+					triggerRef.current?.focus();
+				}
+			},
+			height,
+			classNames,
+			styles
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...slot("footer", {
+				base: {
+					display: "flex",
+					justifyContent: "flex-end",
+					padding: "8px 10px"
+				},
+				themed: { borderTop: `1px solid ${theme.gridLine}` }
+			}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => onChange(null),
+				...slot("clear", {
+					base: {
+						border: "none",
+						background: "transparent",
+						cursor: "pointer",
+						font: "inherit"
+					},
+					themed: { color: theme.textMuted }
+				}),
+				children: "Clear"
 			})
 		})]
 	});
 }
 //#endregion
+//#region src/ResourceTimeline.tsx
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+function DefaultBar({ event, boxProps, theme }) {
+	const time = (0, _super_calendar_core.eventTimeLabel)({
+		mode: "day",
+		isAllDay: false,
+		start: event.start,
+		end: event.end,
+		ampm: false,
+		showTime: true
+	});
+	const base = {
+		height: "100%",
+		boxSizing: "border-box",
+		overflow: "hidden"
+	};
+	const themed = {
+		padding: "2px 6px",
+		borderRadius: 6,
+		background: theme.eventBackground,
+		color: theme.eventText,
+		fontSize: 12
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: boxProps.className,
+		"data-slot": boxProps["data-slot"],
+		style: boxProps.className ? {
+			...base,
+			...boxProps.style
+		} : {
+			...base,
+			...themed,
+			...boxProps.style
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				fontWeight: 600,
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				textOverflow: "ellipsis"
+			},
+			children: event.title
+		}), time ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				opacity: .75,
+				fontSize: 11
+			},
+			children: time
+		}) : null]
+	});
+}
+/**
+* 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`). Pass `onDragEvent` to enable drag-to-move and edge-resize
+* along the axis.
+*
+* @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, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, dragStepMinutes = 15, className, style, classNames, styles }) {
+	const theme = (0, react.useMemo)(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const slot = createSlots({
+		classNames,
+		styles
+	});
+	const Renderer = renderEvent;
+	const snapHours = dragStepMinutes / 60;
+	const [drag, setDrag] = (0, react.useState)(null);
+	const dragRef = (0, react.useRef)(null);
+	const origin = (0, react.useRef)(null);
+	const applyDrag = (next) => {
+		dragRef.current = next;
+		setDrag(next);
+	};
+	const beginDrag = (e, key, kind, startHours, durationHours) => {
+		if (!onDragEvent) return;
+		e.stopPropagation();
+		try {
+			e.target.setPointerCapture?.(e.pointerId);
+		} catch {}
+		origin.current = {
+			x: e.clientX,
+			startHours,
+			durationHours
+		};
+		applyDrag({
+			key,
+			kind,
+			startHours,
+			durationHours,
+			moved: false
+		});
+	};
+	const moveDrag = (e) => {
+		const d = dragRef.current;
+		if (!d || !origin.current) return;
+		const dHours = (e.clientX - origin.current.x) / hourWidth;
+		const snap = (v) => Math.round(v / snapHours) * snapHours;
+		if (d.kind === "move") {
+			const startHours = clamp(snap(origin.current.startHours + dHours), startHour, endHour - d.durationHours);
+			applyDrag({
+				...d,
+				startHours,
+				moved: true
+			});
+		} else {
+			const durationHours = clamp(snap(origin.current.durationHours + dHours), snapHours, endHour - d.startHours);
+			applyDrag({
+				...d,
+				durationHours,
+				moved: true
+			});
+		}
+	};
+	const endDrag = (e, event, onPress) => {
+		const d = dragRef.current;
+		if (!d) return;
+		try {
+			e.target.releasePointerCapture?.(e.pointerId);
+		} catch {}
+		if (!d.moved) {
+			applyDrag(null);
+			onPress();
+			return;
+		}
+		const base = (0, date_fns.startOfDay)(date);
+		const start = (0, date_fns.addMinutes)(base, Math.round(d.startHours * 60));
+		const end = (0, date_fns.addMinutes)(base, Math.round((d.startHours + d.durationHours) * 60));
+		onDragEvent?.(event, start, end);
+		applyDrag(null);
+		origin.current = null;
+	};
+	const cancelDrag = () => {
+		applyDrag(null);
+		origin.current = null;
+	};
+	const hours = (0, react.useMemo)(() => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i), [startHour, endHour]);
+	const trackWidth = (endHour - startHour) * hourWidth;
+	const byResource = (0, react.useMemo)(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const resource of resources) {
+			const own = events.filter((e) => resourceId(e) === resource.id);
+			map.set(resource.id, (0, _super_calendar_core.layoutDayEvents)(own, date));
+		}
+		return map;
+	}, [
+		resources,
+		events,
+		resourceId,
+		date
+	]);
+	const gridLines = `repeating-linear-gradient(to right, transparent 0, transparent ${hourWidth - 1}px, ${theme.gridLine} ${hourWidth - 1}px, ${theme.gridLine} ${hourWidth}px)`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: {
+			fontFamily: theme.fontFamily,
+			color: theme.text,
+			overflowX: "auto",
+			...style
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: { minWidth: labelWidth + trackWidth },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...slot("header", {
+					base: { display: "flex" },
+					themed: { borderBottom: `1px solid ${theme.gridLine}` }
+				}),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...slot("corner", { base: {
+					width: labelWidth,
+					flex: "none"
+				} }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...slot("timeAxis", { base: {
+						position: "relative",
+						height: 24,
+						width: trackWidth
+					} }),
+					children: hours.map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						...slot("hourTick", {
+							base: {
+								position: "absolute",
+								left: (h - startHour) * hourWidth,
+								top: 4
+							},
+							themed: {
+								fontSize: 10,
+								color: theme.textMuted
+							}
+						}),
+						children: (0, _super_calendar_core.formatHour)(h, { ampm })
+					}, h))
+				})]
+			}), resources.map((resource) => {
+				const positioned = byResource.get(resource.id) ?? [];
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					...slot("row", {
+						base: {
+							display: "flex",
+							height: rowHeight
+						},
+						themed: { borderBottom: `1px solid ${theme.gridLine}` }
+					}),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						...slot("resourceLabel", {
+							base: {
+								width: labelWidth,
+								flex: "none",
+								display: "flex",
+								alignItems: "center",
+								padding: "0 10px",
+								boxSizing: "border-box"
+							},
+							themed: {
+								fontSize: 13,
+								fontWeight: 600,
+								borderRight: `1px solid ${theme.gridLine}`
+							}
+						}),
+						children: resource.title ?? resource.id
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						...slot("track", { base: {
+							position: "relative",
+							width: trackWidth
+						} }),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"aria-hidden": true,
+							...slot("gridLines", {
+								base: {
+									position: "absolute",
+									inset: 0,
+									pointerEvents: "none"
+								},
+								themed: { backgroundImage: gridLines }
+							})
+						}), positioned.map((pe, idx) => {
+							const key = `${resource.id}:${idx}`;
+							const active = drag?.key === key ? drag : null;
+							const startH = active ? active.startHours : pe.startHours;
+							const durH = active ? active.durationHours : pe.durationHours;
+							const left = clamp(startH - startHour, 0, endHour - startHour) * hourWidth;
+							const right = clamp(startH + durH - startHour, 0, endHour - startHour) * hourWidth;
+							const width = Math.max(right - left, 2);
+							const laneHeight = rowHeight / pe.columns;
+							const onPress = () => onPressEvent?.(pe.event);
+							const args = {
+								event: pe.event,
+								width,
+								onPress
+							};
+							const draggable = !!onDragEvent;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								onClick: draggable ? void 0 : onPress,
+								"aria-label": pe.event.title,
+								...dataState({ "data-dragging": !!active }),
+								onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
+								onPointerMove: draggable ? moveDrag : void 0,
+								onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
+								onPointerCancel: draggable ? cancelDrag : void 0,
+								...slot("event", { base: {
+									position: "absolute",
+									left,
+									width,
+									top: pe.column * laneHeight,
+									height: laneHeight,
+									padding: 1,
+									border: "none",
+									background: "transparent",
+									cursor: draggable ? "grab" : "pointer",
+									touchAction: draggable ? "none" : "auto",
+									font: "inherit",
+									textAlign: "left",
+									boxSizing: "border-box",
+									zIndex: active ? 3 : 1,
+									opacity: active ? .85 : 1
+								} }),
+								children: [Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultBar, {
+									...args,
+									theme,
+									boxProps: slot("eventBox")
+								}), draggable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									"aria-hidden": true,
+									onPointerDown: (e) => {
+										e.stopPropagation();
+										beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
+									},
+									style: {
+										position: "absolute",
+										top: 0,
+										bottom: 0,
+										right: 0,
+										width: 8,
+										cursor: "ew-resize",
+										touchAction: "none"
+									}
+								}) : null]
+							}, idx);
+						})]
+					})]
+				}, resource.id);
+			})]
+		})
+	});
+}
+//#endregion
 exports.Agenda = Agenda;
 exports.Calendar = Calendar;
+exports.DatePicker = DatePicker;
+exports.DateRangePicker = DateRangePicker;
 exports.MonthList = MonthList;
 exports.MonthView = MonthView;
+exports.ResourceTimeline = ResourceTimeline;
 exports.TimeGrid = TimeGrid;
 Object.defineProperty(exports, "buildMonthGrid", {
 	enumerable: true,
@@ -1360,6 +2167,12 @@ Object.defineProperty(exports, "daySelectionState", {
 	}
 });
 exports.defaultDomTheme = defaultDomTheme;
+Object.defineProperty(exports, "expandRecurringEvents", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.expandRecurringEvents;
+	}
+});
 Object.defineProperty(exports, "getViewDays", {
 	enumerable: true,
 	get: function() {
@@ -1403,6 +2216,18 @@ Object.defineProperty(exports, "nextDateRange", {
 		return _super_calendar_core.nextDateRange;
 	}
 });
+Object.defineProperty(exports, "parseICalendar", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.parseICalendar;
+	}
+});
+Object.defineProperty(exports, "toICalendar", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.toICalendar;
+	}
+});
 Object.defineProperty(exports, "useDateRange", {
 	enumerable: true,
 	get: function() {
@@ -1415,3 +2240,9 @@ Object.defineProperty(exports, "useMonthGrid", {
 		return _super_calendar_core.useMonthGrid;
 	}
 });
+Object.defineProperty(exports, "weekdayFormatToken", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.weekdayFormatToken;
+	}
+});