@super-calendar/native 2.0.0

package/dist/picker.d.mts

@@ -0,0 +1,3 @@
+import { C as defaultTheme, S as darkTheme, T as useCalendarTheme, a as MonthPagerProps, b as CalendarThemeProvider, d as EventKeyExtractor, f as ICalendarEvent, g as RenderEventArgs, h as RenderEvent, i as MonthPager, l as CalendarEvent, n as MonthList, o as MonthView, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as WeekStartsOn, w as mergeTheme, x as PartialCalendarTheme, y as CalendarTheme } from "./DefaultMonthEvent-CpRoOloh.mjs";
+import { DateRange, DateSelectionConstraints, DaySelectionState, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, UseDateRangeOptions, UseMonthGridOptions, buildMonthGrid, buildMonthWeeks, daySelectionState, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, minutesIntoDay, nextDateRange, useDateRange, useMonthGrid } from "@super-calendar/core";
+export { type CalendarEvent, type CalendarMode, type CalendarTheme, CalendarThemeProvider, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultMonthEvent, type EventKeyExtractor, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type RenderEvent, type RenderEventArgs, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, mergeTheme, minutesIntoDay, nextDateRange, useCalendarTheme, useDateRange, useMonthGrid };

package/dist/picker.d.ts

@@ -0,0 +1,3 @@
+import { C as defaultTheme, S as darkTheme, T as useCalendarTheme, a as MonthPagerProps, b as CalendarThemeProvider, d as EventKeyExtractor, f as ICalendarEvent, g as RenderEventArgs, h as RenderEvent, i as MonthPager, l as CalendarEvent, n as MonthList, o as MonthView, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as WeekStartsOn, w as mergeTheme, x as PartialCalendarTheme, y as CalendarTheme } from "./DefaultMonthEvent-86XCNCge.js";
+import { DateRange, DateSelectionConstraints, DaySelectionState, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, UseDateRangeOptions, UseMonthGridOptions, buildMonthGrid, buildMonthWeeks, daySelectionState, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, minutesIntoDay, nextDateRange, useDateRange, useMonthGrid } from "@super-calendar/core";
+export { type CalendarEvent, type CalendarMode, type CalendarTheme, CalendarThemeProvider, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultMonthEvent, type EventKeyExtractor, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type RenderEvent, type RenderEventArgs, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, mergeTheme, minutesIntoDay, nextDateRange, useCalendarTheme, useDateRange, useMonthGrid };

package/dist/picker.js

@@ -0,0 +1,96 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MonthList = require("./MonthList-BCfN-UGz.js");
+let _super_calendar_core = require("@super-calendar/core");
+exports.CalendarThemeProvider = require_MonthList.CalendarThemeProvider;
+exports.DefaultMonthEvent = require_MonthList.DefaultMonthEvent;
+exports.MonthList = require_MonthList.MonthList;
+exports.MonthPager = require_MonthList.MonthPager;
+exports.MonthView = require_MonthList.MonthView;
+Object.defineProperty(exports, "buildMonthGrid", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.buildMonthGrid;
+	}
+});
+Object.defineProperty(exports, "buildMonthWeeks", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.buildMonthWeeks;
+	}
+});
+exports.darkTheme = require_MonthList.darkTheme;
+Object.defineProperty(exports, "daySelectionState", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.daySelectionState;
+	}
+});
+exports.defaultTheme = require_MonthList.defaultTheme;
+Object.defineProperty(exports, "getIsToday", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.getIsToday;
+	}
+});
+Object.defineProperty(exports, "getWeekDays", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.getWeekDays;
+	}
+});
+Object.defineProperty(exports, "isDateSelectable", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isDateSelectable;
+	}
+});
+Object.defineProperty(exports, "isRangeEndpoint", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isRangeEndpoint;
+	}
+});
+Object.defineProperty(exports, "isSameCalendarDay", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isSameCalendarDay;
+	}
+});
+Object.defineProperty(exports, "isWeekend", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isWeekend;
+	}
+});
+Object.defineProperty(exports, "isWithinDateRange", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isWithinDateRange;
+	}
+});
+exports.mergeTheme = require_MonthList.mergeTheme;
+Object.defineProperty(exports, "minutesIntoDay", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.minutesIntoDay;
+	}
+});
+Object.defineProperty(exports, "nextDateRange", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.nextDateRange;
+	}
+});
+exports.useCalendarTheme = require_MonthList.useCalendarTheme;
+Object.defineProperty(exports, "useDateRange", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.useDateRange;
+	}
+});
+Object.defineProperty(exports, "useMonthGrid", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.useMonthGrid;
+	}
+});

package/dist/picker.mjs

@@ -0,0 +1,3 @@
+import { c as defaultTheme, i as MonthView, l as mergeTheme, n as DefaultMonthEvent, o as CalendarThemeProvider, r as MonthPager, s as darkTheme, t as MonthList, u as useCalendarTheme } from "./MonthList-CyrEJ_U6.mjs";
+import { buildMonthGrid, buildMonthWeeks, daySelectionState, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, minutesIntoDay, nextDateRange, useDateRange, useMonthGrid } from "@super-calendar/core";
+export { CalendarThemeProvider, DefaultMonthEvent, MonthList, MonthPager, MonthView, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, mergeTheme, minutesIntoDay, nextDateRange, useCalendarTheme, useDateRange, useMonthGrid };

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@super-calendar/native",
+  "version": "2.0.0",
+  "description": "Gesture-driven, virtualized month / week / day calendar and date picker for React Native (and web via react-native-web).",
+  "keywords": [
+    "agenda",
+    "calendar",
+    "date-picker",
+    "expo",
+    "month-view",
+    "range-picker",
+    "react-native",
+    "reanimated",
+    "timetable",
+    "week-view"
+  ],
+  "homepage": "https://github.com/afonsojramos/react-native-super-calendar#readme",
+  "bugs": {
+    "url": "https://github.com/afonsojramos/react-native-super-calendar/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/afonsojramos/react-native-super-calendar.git",
+    "directory": "packages/native"
+  },
+  "source": "./src/index.tsx",
+  "files": [
+    "dist",
+    "src",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.tsx",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./picker": {
+      "react-native": "./src/picker.tsx",
+      "import": {
+        "types": "./dist/picker.d.mts",
+        "default": "./dist/picker.mjs"
+      },
+      "require": {
+        "types": "./dist/picker.d.ts",
+        "default": "./dist/picker.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@super-calendar/core": "2.0.0"
+  },
+  "peerDependencies": {
+    "@legendapp/list": ">=3",
+    "date-fns": ">=3",
+    "react": ">=18",
+    "react-native": ">=0.74",
+    "react-native-gesture-handler": ">=2.16",
+    "react-native-reanimated": ">=4.0.0 <5",
+    "react-native-worklets": ">=0.5"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsdown"
+  }
+}

package/src/components/Agenda.tsx

@@ -0,0 +1,133 @@
+import { LegendList, type LegendListRenderItemProps } from "@legendapp/list/react-native";
+import { format, isSameDay, type Locale, startOfDay } from "date-fns";
+import { type ComponentType, useCallback, useMemo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useCalendarTheme } from "../theme";
+import type { CalendarEvent, EventKeyExtractor, RenderEvent } from "../types";
+import { getIsToday } from "@super-calendar/core";
+import { isAllDayEvent } from "@super-calendar/core";
+
+export type AgendaProps<T> = {
+  events: CalendarEvent<T>[];
+  locale?: Locale;
+  renderEvent: RenderEvent<T>;
+  keyExtractor: EventKeyExtractor<T>;
+  onPressEvent: (event: CalendarEvent<T>) => void;
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
+  onPressDay?: (date: Date) => void;
+  /** Highlight this date's header instead of the real "today". */
+  activeDate?: Date;
+  /** Drawn between rows of the agenda list. */
+  itemSeparatorComponent?: ComponentType<unknown> | null;
+};
+
+type Row<T> =
+  | { kind: "header"; date: Date; key: string }
+  | { kind: "event"; event: CalendarEvent<T>; index: number; key: string };
+
+/**
+ * A vertical, day-grouped list of events (no time grid). Events are sorted by
+ * start, grouped under a date header per day. The consumer controls which
+ * events (and therefore which date range) are shown.
+ */
+export function Agenda<T>({
+  events,
+  locale,
+  renderEvent,
+  keyExtractor,
+  onPressEvent,
+  onLongPressEvent,
+  onPressDay,
+  activeDate,
+  itemSeparatorComponent,
+}: AgendaProps<T>) {
+  const theme = useCalendarTheme();
+  const RenderEventComponent = renderEvent;
+
+  const rows = useMemo<Row<T>[]>(() => {
+    const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
+    const out: Row<T>[] = [];
+    let currentDay: Date | null = null;
+    sorted.forEach((event, index) => {
+      if (!currentDay || !isSameDay(event.start, currentDay)) {
+        currentDay = startOfDay(event.start);
+        out.push({ kind: "header", date: currentDay, key: `h-${currentDay.toISOString()}` });
+      }
+      out.push({ kind: "event", event, index, key: `e-${keyExtractor(event, index)}` });
+    });
+    return out;
+  }, [events, keyExtractor]);
+
+  const keyExtractorRow = useCallback((row: Row<T>) => row.key, []);
+  const renderItem = useCallback(
+    ({ item }: LegendListRenderItemProps<Row<T>>) => {
+      if (item.kind === "header") {
+        const isHighlighted = activeDate ? isSameDay(item.date, activeDate) : getIsToday(item.date);
+        return (
+          <Text
+            style={[
+              styles.header,
+              { color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted },
+            ]}
+            onPress={onPressDay ? () => onPressDay(item.date) : undefined}
+            accessibilityRole={onPressDay ? "button" : "header"}
+          >
+            {format(item.date, "EEEE, d LLLL", { locale })}
+          </Text>
+        );
+      }
+      return (
+        <View style={styles.eventRow}>
+          <RenderEventComponent
+            event={item.event}
+            mode="schedule"
+            isAllDay={isAllDayEvent(item.event)}
+            onPress={() => onPressEvent(item.event)}
+            onLongPress={onLongPressEvent ? () => onLongPressEvent(item.event) : undefined}
+          />
+        </View>
+      );
+    },
+    [theme, locale, activeDate, onPressDay, onPressEvent, onLongPressEvent, RenderEventComponent],
+  );
+
+  if (rows.length === 0) {
+    return <Text style={[styles.empty, { color: theme.colors.textMuted }]}>No events</Text>;
+  }
+
+  return (
+    <LegendList
+      style={styles.list}
+      data={rows}
+      keyExtractor={keyExtractorRow}
+      renderItem={renderItem}
+      // The public prop is data-agnostic; LegendList types the separator by row.
+      ItemSeparatorComponent={
+        (itemSeparatorComponent ?? undefined) as ComponentType<{ leadingItem: Row<T> }> | undefined
+      }
+      recycleItems={false}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    flex: 1,
+  },
+  header: {
+    fontSize: 13,
+    fontWeight: "600",
+    paddingTop: 12,
+    paddingBottom: 4,
+    paddingHorizontal: 12,
+  },
+  eventRow: {
+    paddingHorizontal: 12,
+    paddingVertical: 2,
+  },
+  empty: {
+    fontSize: 14,
+    paddingVertical: 16,
+    paddingHorizontal: 12,
+  },
+});

package/src/components/AllDayLane.tsx

@@ -0,0 +1,98 @@
+import { addDays, startOfDay } from "date-fns";
+import { StyleSheet, Text, View } from "react-native";
+import { useCalendarTheme } from "../theme";
+import type { CalendarEvent, CalendarMode, EventKeyExtractor, RenderEvent } from "../types";
+import { isAllDayEvent } from "@super-calendar/core";
+
+type AllDayLaneProps<T> = {
+  days: Date[];
+  events: CalendarEvent<T>[];
+  mode: CalendarMode;
+  hourColumnWidth: number;
+  dayWidth: number;
+  renderEvent: RenderEvent<T>;
+  keyExtractor: EventKeyExtractor<T>;
+  onPressEvent: (event: CalendarEvent<T>) => void;
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
+};
+
+/**
+ * The all-day lane that sits above the scrolling time grid. All-day events are
+ * excluded from the timed columns (see `layoutDayEvents`) and shown here,
+ * stacked under their day(s). Renders nothing when no day has an all-day event,
+ * so timed-only calendars are unaffected.
+ */
+export function AllDayLane<T>({
+  days,
+  events,
+  mode,
+  hourColumnWidth,
+  dayWidth,
+  renderEvent,
+  keyExtractor,
+  onPressEvent,
+  onLongPressEvent,
+}: AllDayLaneProps<T>) {
+  const theme = useCalendarTheme();
+  const RenderEventComponent = renderEvent;
+
+  const allDay = events.filter(isAllDayEvent);
+  const perDay = days.map((day) => {
+    const start = startOfDay(day);
+    const next = addDays(start, 1);
+    return allDay.filter((event) => event.start < next && event.end > start);
+  });
+
+  if (perDay.every((list) => list.length === 0)) return null;
+
+  return (
+    <View style={[styles.lane, { borderBottomColor: theme.colors.gridLine }]}>
+      <View style={[styles.gutter, { width: hourColumnWidth }]}>
+        {/* The "all-day" gutter label, mirroring the dom renderer: small, muted,
+            and right-aligned against the timed columns. Centered vertically so it
+            lines up with the chips whether the lane holds one event or several. */}
+        <Text style={[styles.label, { color: theme.colors.textMuted }]} allowFontScaling={false}>
+          all-day
+        </Text>
+      </View>
+      {days.map((day, dayIndex) => (
+        <View key={day.toISOString()} style={[styles.column, { width: dayWidth }]}>
+          {perDay[dayIndex].map((event, index) => (
+            <View key={keyExtractor(event, index)} style={styles.chip}>
+              <RenderEventComponent
+                event={event}
+                mode={mode}
+                isAllDay
+                onPress={() => onPressEvent(event)}
+                onLongPress={onLongPressEvent ? () => onLongPressEvent(event) : undefined}
+              />
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  lane: {
+    flexDirection: "row",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  gutter: {
+    justifyContent: "center",
+  },
+  label: {
+    fontSize: 10,
+    textAlign: "right",
+    paddingRight: 6,
+  },
+  column: {
+    paddingVertical: 2,
+    paddingHorizontal: 1,
+    gap: 2,
+  },
+  chip: {
+    minHeight: 18,
+  },
+});