@super-calendar/native 2.4.0 → 2.5.0

package/dist/index.mjs

@@ -378,7 +378,7 @@ const styles$2 = StyleSheet.create({
 });
 //#endregion
 //#region src/components/TimeGrid.tsx
-const isWeb = Platform.OS === "web";
+const isWeb$1 = Platform.OS === "web";
 const MINUTES_PER_HOUR$1 = 60;
 const HOURS_PER_DAY = 24;
 const MINUTES_PER_DAY = MINUTES_PER_HOUR$1 * HOURS_PER_DAY;
@@ -393,7 +393,7 @@ const MIN_EVENT_HEIGHT = 32;
 const EVENT_GAP = 2;
 const DRAG_ACTIVATE_MS = 300;
 const MOVE_ACTIVATE_MS$1 = 500;
-const DRAG_ACTIVATE_PX = 8;
+const DRAG_ACTIVATE_PX$1 = 8;
 const RESIZE_HANDLE_HEIGHT = 14;
 const DEFAULT_DRAG_STEP_MINUTES = 15;
 const HOUR_LABEL_TOP_INSET = 12;
@@ -492,7 +492,7 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWid
 			const totalDelta = minuteDelta + dayDelta * MINUTES_PER_DAY;
 			runOnJS(commitDrag)(totalDelta, totalDelta);
 		});
-		return isWeb ? pan.activeOffsetX([-8, DRAG_ACTIVATE_PX]).activeOffsetY([-8, DRAG_ACTIVATE_PX]) : pan.activateAfterLongPress(MOVE_ACTIVATE_MS$1);
+		return isWeb$1 ? pan.activeOffsetX([-8, DRAG_ACTIVATE_PX$1]).activeOffsetY([-8, DRAG_ACTIVATE_PX$1]) : pan.activateAfterLongPress(MOVE_ACTIVATE_MS$1);
 	}, [
 		draggable,
 		snapMinutes,
@@ -708,14 +708,14 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		},
 		onEndDrag: (event) => {
 			isDragging.value = false;
-			if (!isWeb && isActiveShared.value) {
+			if (!isWeb$1 && isActiveShared.value) {
 				scrollY.value = event.contentOffset.y;
 				runOnJS(onSettleOffset)(event.contentOffset.y);
 			}
 		},
 		onMomentumEnd: (event) => {
 			isDragging.value = false;
-			if (!isWeb && isActiveShared.value) {
+			if (!isWeb$1 && isActiveShared.value) {
 				scrollY.value = event.contentOffset.y;
 				runOnJS(onSettleOffset)(event.contentOffset.y);
 			}
@@ -725,7 +725,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		if (!isActiveShared.value && current !== previous) scrollTo(scrollRef, 0, current, false);
 	});
 	useAnimatedReaction(() => isActiveShared.value, (active, previous) => {
-		if (isWeb || !active || active === previous) return;
+		if (isWeb$1 || !active || active === previous) return;
 		scrollTo(scrollRef, 0, scrollY.value, false);
 	});
 	const days = useMemo(() => getViewDays$1(mode, date, weekStartsOn, numberOfDays, isRTL, weekEndsOn), [
@@ -848,7 +848,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 			if (createCancelled.value) return;
 			runOnJS(commitCreate)(createStartY.value, createStartY.value + event.translationY, createDayIndex.value);
 		});
-		return isWeb ? pan.activeOffsetY([-8, DRAG_ACTIVATE_PX]) : pan.activateAfterLongPress(DRAG_ACTIVATE_MS);
+		return isWeb$1 ? pan.activeOffsetY([-8, DRAG_ACTIVATE_PX$1]) : pan.activateAfterLongPress(DRAG_ACTIVATE_MS);
 	}, [
 		createEnabled,
 		dayCount,
@@ -867,7 +867,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		createCancelled
 	]);
 	const backgroundGesture = useMemo(() => {
-		const tap = isWeb && onPressCell != null ? Gesture.Tap().onEnd((event) => {
+		const tap = isWeb$1 && onPressCell != null ? Gesture.Tap().onEnd((event) => {
 			runOnJS(tapCell)(event.x, event.y);
 		}) : null;
 		if (createEnabled && tap) return Gesture.Exclusive(createGesture, tap);
@@ -880,7 +880,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		tapCell
 	]);
 	useEffect(() => {
-		if (!isWeb || !createEnabled) return;
+		if (!isWeb$1 || !createEnabled) return;
 		const doc = globalThis.document;
 		if (!doc) return;
 		const handler = (event) => {
@@ -1086,7 +1086,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		offsetSeedRef.current = y;
 	}, []);
 	const committedCellHeight = useSharedValue(hourHeight);
-	useWebGridZoom(isWeb, containerRef, cellHeight, committedCellHeight, minHourHeight, maxHourHeight);
+	useWebGridZoom(isWeb$1, containerRef, cellHeight, committedCellHeight, minHourHeight, maxHourHeight);
 	const [anchorDate] = useState(date);
 	const anchor = useMemo(() => weekAnchored ? startOfWeek(anchorDate, { weekStartsOn }) : startOfDay(anchorDate), [
 		weekAnchored,
@@ -1116,7 +1116,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		weekEndsOn
 	]);
 	const handleViewableItemsChanged = useCallback((info) => {
-		if (isWeb) return;
+		if (isWeb$1) return;
 		const settled = info.viewableItems.find((token) => token.isViewable);
 		if (settled?.index == null) return;
 		if (pendingScrollIndexRef.current != null) {
@@ -1140,7 +1140,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		});
 	}, [activeIndex]);
 	useEffect(() => {
-		if (!isWeb) return;
+		if (!isWeb$1) return;
 		const root = containerRef.current;
 		if (!root) return;
 		const restoreVisiblePage = () => {
@@ -1167,7 +1167,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		};
 	}, [activeIndex, pageHeight]);
 	useEffect(() => {
-		if (!isWeb) return;
+		if (!isWeb$1) return;
 		const root = containerRef.current;
 		if (!root) return;
 		const onScrollCapture = (event) => {
@@ -1184,7 +1184,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		return () => root.removeEventListener("scroll", onScrollCapture, true);
 	}, []);
 	useEffect(() => {
-		if (!isWeb) return;
+		if (!isWeb$1) return;
 		const root = containerRef.current;
 		if (!root) return;
 		const lockHorizontal = () => {
@@ -1350,14 +1350,14 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 					},
 					children: /* @__PURE__ */ jsx(LegendList, {
 						ref: listRef,
-						style: isWeb ? [styles$1.pagerList, styles$1.webNoScroll] : styles$1.pagerList,
+						style: isWeb$1 ? [styles$1.pagerList, styles$1.webNoScroll] : styles$1.pagerList,
 						data: pageDates,
 						extraData: listExtraData,
 						horizontal: true,
 						recycleItems: false,
 						keyExtractor: keyExtractorList,
 						getFixedItemSize,
-						...isWeb ? null : {
+						...isWeb$1 ? null : {
 							scrollEnabled: swipeEnabled,
 							pagingEnabled: !freeSwipe,
 							snapToIndices: freeSwipe ? snapToIndices : void 0
@@ -1771,7 +1771,9 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 //#endregion
 //#region src/components/ResourceTimeline.tsx
 const MOVE_ACTIVATE_MS = 250;
+const DRAG_ACTIVATE_PX = 8;
 const MINUTES_PER_HOUR = 60;
+const isWeb = Platform.OS === "web";
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 const GUTTER_WIDTH = 56;
 function DefaultBar({ event, width, height }) {
@@ -1804,7 +1806,7 @@ function DefaultBar({ event, width, height }) {
 		}) : null]
 	});
 }
-function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendererSize, snapMinutes, Renderer, onPress, onDragEvent, theme }) {
+function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendererSize, snapMinutes, Renderer, onPress, onLongPress, onDragEvent, theme }) {
 	const moveX = useSharedValue(0);
 	const resizeW = useSharedValue(0);
 	const latest = useRef({
@@ -1935,6 +1937,7 @@ function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendere
 			gesture: moveGesture,
 			children: /* @__PURE__ */ jsx(Pressable, {
 				onPress,
+				onLongPress,
 				accessibilityRole: "button",
 				accessibilityLabel: pe.event.title,
 				accessibilityActions: barActions,
@@ -1958,6 +1961,115 @@ function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendere
 		})]
 	});
 }
+function LaneInteractionLayer({ resource, vertical, hourSize, startHour, date, snapMinutes, onPressCell, onLongPressCell, onCreateEvent, theme }) {
+	const ghostStart = useSharedValue(0);
+	const ghostSize = useSharedValue(0);
+	const ghostVisible = useSharedValue(0);
+	const timeAt = useCallback((px) => cellRangeFromDrag(date, px, px, hourSize, startHour, snapMinutes)?.start, [
+		date,
+		hourSize,
+		startHour,
+		snapMinutes
+	]);
+	const commitCreate = useCallback((fromPx, toPx) => {
+		const range = cellRangeFromDrag(date, fromPx, toPx, hourSize, startHour, snapMinutes);
+		if (range) onCreateEvent?.(range.start, range.end, resource);
+	}, [
+		date,
+		hourSize,
+		startHour,
+		snapMinutes,
+		onCreateEvent,
+		resource
+	]);
+	const pressAt = useCallback((px) => {
+		const at = timeAt(px);
+		if (at) onPressCell?.(at, resource);
+	}, [
+		timeAt,
+		onPressCell,
+		resource
+	]);
+	const laneGesture = useMemo(() => {
+		const pan = onCreateEvent ? Gesture.Pan().onStart((e) => {
+			ghostStart.value = vertical ? e.y : e.x;
+			ghostSize.value = 0;
+			ghostVisible.value = 1;
+		}).onUpdate((e) => {
+			ghostSize.value = (vertical ? e.y : e.x) - ghostStart.value;
+		}).onEnd((e, success) => {
+			ghostVisible.value = 0;
+			if (success) runOnJS(commitCreate)(ghostStart.value, vertical ? e.y : e.x);
+		}).onFinalize(() => {
+			ghostVisible.value = 0;
+		}) : null;
+		const activatedPan = pan ? isWeb ? vertical ? pan.activeOffsetY([-8, DRAG_ACTIVATE_PX]) : pan.activeOffsetX([-8, DRAG_ACTIVATE_PX]) : pan.activateAfterLongPress(MOVE_ACTIVATE_MS) : null;
+		const tap = isWeb && onPressCell ? Gesture.Tap().onEnd((e) => {
+			runOnJS(pressAt)(vertical ? e.y : e.x);
+		}) : null;
+		if (activatedPan && tap) return Gesture.Exclusive(activatedPan, tap);
+		return activatedPan ?? tap;
+	}, [
+		onCreateEvent,
+		onPressCell,
+		vertical,
+		commitCreate,
+		pressAt,
+		ghostStart,
+		ghostSize,
+		ghostVisible
+	]);
+	const ghostStyle = useAnimatedStyle(() => {
+		const stepPx = snapMinutes / MINUTES_PER_HOUR * hourSize;
+		const snap = (v) => stepPx > 0 ? Math.round(v / stepPx) * stepPx : v;
+		const a = snap(ghostStart.value);
+		const b = snap(ghostStart.value + ghostSize.value);
+		const from = Math.min(a, b);
+		const size = Math.max(Math.abs(b - a), 2);
+		return vertical ? {
+			opacity: ghostVisible.value,
+			top: from,
+			height: size
+		} : {
+			opacity: ghostVisible.value,
+			left: from,
+			width: size
+		};
+	}, [
+		vertical,
+		hourSize,
+		snapMinutes
+	]);
+	const pxOf = (e) => vertical ? e.nativeEvent.locationY : e.nativeEvent.locationX;
+	const handlePress = onPressCell ? (e) => pressAt(pxOf(e)) : void 0;
+	const handleLongPress = onLongPressCell && !onCreateEvent ? (e) => {
+		const at = timeAt(pxOf(e));
+		if (at) onLongPressCell(at, resource);
+	} : void 0;
+	const layer = /* @__PURE__ */ jsx(Pressable, {
+		testID: "resource-cell-layer",
+		style: StyleSheet.absoluteFill,
+		onPress: handlePress,
+		onLongPress: handleLongPress,
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no"
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [laneGesture ? /* @__PURE__ */ jsx(GestureDetector, {
+		gesture: laneGesture,
+		children: layer
+	}) : layer, onCreateEvent ? /* @__PURE__ */ jsx(Animated.View, {
+		testID: "resource-create-ghost",
+		pointerEvents: "none",
+		style: [
+			vertical ? styles.vcreateGhost : styles.hcreateGhost,
+			{
+				backgroundColor: theme.colors.eventBackground,
+				borderColor: theme.colors.todayBackground
+			},
+			ghostStyle
+		]
+	}) : 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
@@ -1976,9 +2088,11 @@ function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendere
 * />
 * ```
 */
-function ResourceTimeline({ date, orientation = "horizontal", resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, hourHeight = 48, rowHeight = 56, labelWidth = 140, ampm = false, renderEvent, onPressEvent, onDragEvent, dragStepMinutes = 15 }) {
+function ResourceTimeline({ date, orientation = "horizontal", resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, hourHeight = 48, rowHeight = 56, labelWidth = 140, ampm = false, renderEvent, onPressEvent, onLongPressEvent, onDragEvent, onPressCell, onLongPressCell, onCreateEvent, businessHours, dragStepMinutes = 15 }) {
 	const theme = useCalendarTheme();
 	const Renderer = renderEvent ?? DefaultBar;
+	const cellEnabled = !!onPressCell || !!onLongPressCell || !!onCreateEvent;
+	const bandsFor = (resource) => businessHours ? closedHourBands(date, (d) => businessHours(d, resource), startHour, endHour) : [];
 	const hours = useMemo(() => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i), [startHour, endHour]);
 	const trackWidth = (endHour - startHour) * hourWidth;
 	const byResource = useMemo(() => {
@@ -2031,58 +2145,84 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 								{ borderLeftColor: theme.colors.gridLine },
 								theme.containers.resourceRow
 							],
-							children: [hours.slice(1).map((h) => /* @__PURE__ */ jsx(View, {
-								pointerEvents: "none",
-								style: [styles.vgridLine, {
-									top: (h - startHour) * hourHeight,
-									backgroundColor: theme.colors.gridLine
-								}]
-							}, h)), positioned.map((pe, idx) => {
-								const top = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourHeight;
-								const bottomPx = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourHeight;
-								const height = Math.max(bottomPx - top, 2);
-								const lanePct = 100 / pe.columns;
-								const left = `${pe.column * lanePct}%`;
-								const width = `${lanePct}%`;
-								const onPress = () => onPressEvent?.(pe.event);
-								if (onDragEvent) return /* @__PURE__ */ jsx(ResourceBar, {
-									pe,
+							children: [
+								bandsFor(resource).map((b) => /* @__PURE__ */ jsx(View, {
+									pointerEvents: "none",
+									testID: "resource-hours-shade",
+									style: [styles.vshadeBand, {
+										top: (b.start - startHour) * hourHeight,
+										height: (b.end - b.start) * hourHeight,
+										backgroundColor: theme.colors.outsideHoursBackground
+									}]
+								}, `shade-${b.start}`)),
+								hours.slice(1).map((h) => /* @__PURE__ */ jsx(View, {
+									pointerEvents: "none",
+									style: [styles.vgridLine, {
+										top: (h - startHour) * hourHeight,
+										backgroundColor: theme.colors.gridLine
+									}]
+								}, h)),
+								cellEnabled ? /* @__PURE__ */ jsx(LaneInteractionLayer, {
+									resource,
 									vertical: true,
 									hourSize: hourHeight,
-									left,
-									top,
-									width,
-									height,
-									rendererSize: {
-										width: 0,
-										height
-									},
+									startHour,
+									date,
 									snapMinutes: dragStepMinutes,
-									Renderer,
-									onPress,
-									onDragEvent,
+									onPressCell,
+									onLongPressCell,
+									onCreateEvent,
 									theme
-								}, idx);
-								return /* @__PURE__ */ jsx(Pressable, {
-									onPress,
-									accessibilityRole: "button",
-									accessibilityLabel: pe.event.title,
-									style: {
-										position: "absolute",
+								}) : null,
+								positioned.map((pe, idx) => {
+									const top = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourHeight;
+									const bottomPx = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourHeight;
+									const height = Math.max(bottomPx - top, 2);
+									const lanePct = 100 / pe.columns;
+									const left = `${pe.column * lanePct}%`;
+									const width = `${lanePct}%`;
+									const onPress = () => onPressEvent?.(pe.event);
+									if (onDragEvent) return /* @__PURE__ */ jsx(ResourceBar, {
+										pe,
+										vertical: true,
+										hourSize: hourHeight,
 										left,
-										width,
 										top,
+										width,
 										height,
-										padding: 1
-									},
-									children: /* @__PURE__ */ jsx(Renderer, {
-										event: pe.event,
-										width: 0,
-										height,
-										onPress
-									})
-								}, idx);
-							})]
+										rendererSize: {
+											width: 0,
+											height
+										},
+										snapMinutes: dragStepMinutes,
+										Renderer,
+										onPress,
+										onLongPress: onLongPressEvent ? () => onLongPressEvent(pe.event) : void 0,
+										onDragEvent,
+										theme
+									}, idx);
+									return /* @__PURE__ */ jsx(Pressable, {
+										onPress,
+										onLongPress: onLongPressEvent ? () => onLongPressEvent(pe.event) : void 0,
+										accessibilityRole: "button",
+										accessibilityLabel: pe.event.title,
+										style: {
+											position: "absolute",
+											left,
+											width,
+											top,
+											height,
+											padding: 1
+										},
+										children: /* @__PURE__ */ jsx(Renderer, {
+											event: pe.event,
+											width: 0,
+											height,
+											onPress
+										})
+									}, idx);
+								})
+							]
 						}, resource.id);
 					})]
 				})
@@ -2139,52 +2279,78 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 						})
 					}), /* @__PURE__ */ jsxs(View, {
 						style: { width: trackWidth },
-						children: [hours.slice(1).map((h) => /* @__PURE__ */ jsx(View, {
-							pointerEvents: "none",
-							style: [styles.gridLine, {
-								left: (h - startHour) * hourWidth,
-								backgroundColor: theme.colors.gridLine
-							}]
-						}, h)), positioned.map((pe, idx) => {
-							const left = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourWidth;
-							const right = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourWidth;
-							const width = Math.max(right - left, 2);
-							const laneHeight = rowHeight / pe.columns;
-							const onPress = () => onPressEvent?.(pe.event);
-							if (onDragEvent) return /* @__PURE__ */ jsx(ResourceBar, {
-								pe,
+						children: [
+							bandsFor(resource).map((b) => /* @__PURE__ */ jsx(View, {
+								pointerEvents: "none",
+								testID: "resource-hours-shade",
+								style: [styles.hshadeBand, {
+									left: (b.start - startHour) * hourWidth,
+									width: (b.end - b.start) * hourWidth,
+									backgroundColor: theme.colors.outsideHoursBackground
+								}]
+							}, `shade-${b.start}`)),
+							hours.slice(1).map((h) => /* @__PURE__ */ jsx(View, {
+								pointerEvents: "none",
+								style: [styles.gridLine, {
+									left: (h - startHour) * hourWidth,
+									backgroundColor: theme.colors.gridLine
+								}]
+							}, h)),
+							cellEnabled ? /* @__PURE__ */ jsx(LaneInteractionLayer, {
+								resource,
 								vertical: false,
 								hourSize: hourWidth,
-								left,
-								top: pe.column * laneHeight,
-								width,
-								height: laneHeight,
-								rendererSize: { width },
+								startHour,
+								date,
 								snapMinutes: dragStepMinutes,
-								Renderer,
-								onPress,
-								onDragEvent,
+								onPressCell,
+								onLongPressCell,
+								onCreateEvent,
 								theme
-							}, idx);
-							return /* @__PURE__ */ jsx(Pressable, {
-								onPress,
-								accessibilityRole: "button",
-								accessibilityLabel: pe.event.title,
-								style: {
-									position: "absolute",
+							}) : null,
+							positioned.map((pe, idx) => {
+								const left = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourWidth;
+								const right = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourWidth;
+								const width = Math.max(right - left, 2);
+								const laneHeight = rowHeight / pe.columns;
+								const onPress = () => onPressEvent?.(pe.event);
+								if (onDragEvent) return /* @__PURE__ */ jsx(ResourceBar, {
+									pe,
+									vertical: false,
+									hourSize: hourWidth,
 									left,
-									width,
 									top: pe.column * laneHeight,
-									height: laneHeight,
-									padding: 1
-								},
-								children: /* @__PURE__ */ jsx(Renderer, {
-									event: pe.event,
 									width,
-									onPress
-								})
-							}, idx);
-						})]
+									height: laneHeight,
+									rendererSize: { width },
+									snapMinutes: dragStepMinutes,
+									Renderer,
+									onPress,
+									onLongPress: onLongPressEvent ? () => onLongPressEvent(pe.event) : void 0,
+									onDragEvent,
+									theme
+								}, idx);
+								return /* @__PURE__ */ jsx(Pressable, {
+									onPress,
+									onLongPress: onLongPressEvent ? () => onLongPressEvent(pe.event) : void 0,
+									accessibilityRole: "button",
+									accessibilityLabel: pe.event.title,
+									style: {
+										position: "absolute",
+										left,
+										width,
+										top: pe.column * laneHeight,
+										height: laneHeight,
+										padding: 1
+									},
+									children: /* @__PURE__ */ jsx(Renderer, {
+										event: pe.event,
+										width,
+										onPress
+									})
+								}, idx);
+							})
+						]
 					})]
 				}, resource.id);
 			})]
@@ -2274,6 +2440,34 @@ const styles = StyleSheet.create({
 		left: 0,
 		right: 0,
 		height: StyleSheet.hairlineWidth
+	},
+	vcreateGhost: {
+		position: "absolute",
+		left: 2,
+		right: 2,
+		borderWidth: 1,
+		borderRadius: 6,
+		opacity: 0,
+		zIndex: 2
+	},
+	hcreateGhost: {
+		position: "absolute",
+		top: 2,
+		bottom: 2,
+		borderWidth: 1,
+		borderRadius: 6,
+		opacity: 0,
+		zIndex: 2
+	},
+	hshadeBand: {
+		position: "absolute",
+		top: 0,
+		bottom: 0
+	},
+	vshadeBand: {
+		position: "absolute",
+		left: 0,
+		right: 0
 	}
 });
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@super-calendar/native",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Gesture-driven, virtualized month / week / day calendar and date picker for React Native (and web via react-native-web).",
   "keywords": [
     "agenda",
@@ -64,7 +64,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@super-calendar/core": "2.4.0"
+    "@super-calendar/core": "2.5.0"
   },
   "peerDependencies": {
     "@legendapp/list": ">=3",