@super-calendar/native 2.0.0 → 2.1.3

package/README.md

@@ -0,0 +1,75 @@
+# @super-calendar/native
+
+[![JSR](https://jsr.io/badges/@super-calendar/native)](https://jsr.io/@super-calendar/native) [![JSR score](https://jsr.io/badges/@super-calendar/native/score)](https://jsr.io/@super-calendar/native)
+
+The React Native renderer for [super-calendar](https://github.com/afonsojramos/react-native-super-calendar): a gesture-driven, virtualized **month / week / day** calendar and date picker. Runs on iOS, Android, and web (web via [react-native-web](https://necolas.github.io/react-native-web/)).
+
+- 📆 Month grid plus day / 3-day / week / custom-N time grids and an agenda
+- 🤏 Pinch-to-zoom week/day grid (UI thread, no re-renders)
+- ♾️ Virtualized, snap-paging views via [`@legendapp/list`](https://legendapp.com/open-source/list/)
+- 🧩 Bring-your-own event type (`CalendarEvent<T>`) and a `renderEvent` escape hatch
+- 🪝 Headless `useMonthGrid` and `useDateRange` for fully custom UIs
+- 🎨 Themeable, with a `darkTheme` preset
+
+## Install
+
+```sh
+# Deno
+deno add jsr:@super-calendar/native
+
+# npm / pnpm / yarn / bun
+npx jsr add @super-calendar/native
+pnpm dlx jsr add @super-calendar/native
+bunx jsr add @super-calendar/native
+```
+
+Peer dependencies: `@legendapp/list` (>=3), `date-fns` (>=3), `react` (>=19), `react-native` (>=0.85), `react-native-gesture-handler` (>=2), `react-native-reanimated` (>=4), and `react-native-worklets` (>=0.8).
+
+For a picker-only bundle that does not require Reanimated, import from the `@super-calendar/native/picker` subpath.
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import { Calendar, type CalendarEvent } from "@super-calendar/native";
+
+type MyEvent = { id: string; color: string };
+
+const events: CalendarEvent<MyEvent>[] = [
+  {
+    id: "1",
+    color: "#1F6FEB",
+    title: "Lecture",
+    start: new Date(2026, 5, 19, 10, 0),
+    end: new Date(2026, 5, 19, 11, 30),
+  },
+];
+
+export function MyCalendar() {
+  const [mode, setMode] = useState<"month" | "week" | "day">("week");
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <Calendar
+      mode={mode}
+      date={date}
+      events={events}
+      weekStartsOn={1}
+      onChangeDate={setDate}
+      onPressEvent={(event) => console.log(event.id)}
+      onPressDay={(day) => {
+        setDate(day);
+        setMode("day");
+      }}
+    />
+  );
+}
+```
+
+## Documentation
+
+See the [full documentation](https://super-calendar.afonsojramos.me) and the [quickstart](https://super-calendar.afonsojramos.me/quickstart), including theming, recurring events, time zones, and the headless picker.
+
+## License
+
+MIT

package/dist/{DefaultMonthEvent-86XCNCge.d.ts → DefaultMonthEvent-D2s0x2Bn.d.mts}

@@ -1,8 +1,8 @@
 import { Locale } from "date-fns";
-import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { ComponentType, ReactElement } from "react";
 import { SharedValue } from "react-native-reanimated";
 import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn } from "@super-calendar/core";
-import { ComponentType } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
 
 //#region src/theme.d.ts
 /**
@@ -13,6 +13,7 @@ import { ComponentType } from "react";
 interface CalendarTheme {
   /** The shared colour palette (sourced from `@super-calendar/core`). */
   colors: CalendarColors;
+  /** Text styles for the calendar's labels and the built-in event box. */
   text: {
     /** Large day number in the week/day header. */dayNumber: TextStyle; /** Short weekday label ("Mon") in headers. */
     weekday: TextStyle; /** Date number inside a month cell. */
@@ -29,6 +30,7 @@ interface CalendarTheme {
    */
   rangeBandHeight: number;
 }
+/** The default light theme. Every key the calendar reads falls back to this. */
 declare const defaultTheme: CalendarTheme;
 /**
  * A ready-made dark palette. Pass it straight to `<Calendar theme={darkTheme} />`,
@@ -38,16 +40,32 @@ declare const defaultTheme: CalendarTheme;
 declare const darkTheme: CalendarTheme;
 /** Deep-merge a partial theme over {@link defaultTheme}. */
 declare function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme;
+/**
+ * A theme with every key optional. Pass this to `<Calendar theme={...} />` to
+ * override only the colours, text styles, or metrics you care about; the rest
+ * come from {@link defaultTheme}.
+ */
 type PartialCalendarTheme = {
   colors?: Partial<CalendarTheme["colors"]>;
   text?: Partial<CalendarTheme["text"]>;
   todayBadgeRadius?: number;
   rangeBandHeight?: number;
 };
+/**
+ * Context provider that supplies the active {@link CalendarTheme} to descendants.
+ * `<Calendar>` wraps its subtree in this; use it directly only to theme custom
+ * components rendered outside a `<Calendar>`.
+ */
 declare const CalendarThemeProvider: import("react").Provider<CalendarTheme>;
+/** Read the active {@link CalendarTheme} from context. Useful inside custom renderers. */
 declare const useCalendarTheme: () => CalendarTheme;
 //#endregion
 //#region src/types.d.ts
+/**
+ * Props passed to a {@link RenderEvent} component for one event. Carries the
+ * event, the current mode, press handlers, and built-in renderer hints such as
+ * `boxHeight`, `continuesBefore`/`continuesAfter`, and `isAllDay`.
+ */
 type RenderEventArgs<T = unknown> = {
   event: CalendarEvent<T>;
   mode: CalendarMode;
@@ -82,6 +100,7 @@ type RenderEventArgs<T = unknown> = {
 type RenderEvent<T = unknown> = ComponentType<RenderEventArgs<T>>;
 //#endregion
 //#region src/components/MonthView.d.ts
+/** Props for {@link MonthView}, the single-month grid. */
 type MonthViewProps<T> = {
   date: Date;
   events: CalendarEvent$1<T>[];
@@ -161,10 +180,27 @@ declare function MonthViewInner<T>({
   renderCustomDateForMonth,
   onDayPointerDown,
   onDayPointerEnter
-}: MonthViewProps<T>): import("react").JSX.Element;
+}: MonthViewProps<T>): ReactElement;
+/**
+ * A single month rendered as a 7-column grid of day cells, each showing its
+ * event chips with a "+N more" overflow. Render it on its own for a static
+ * month, or let `MonthList`/`Calendar` page through months for you.
+ *
+ * @example
+ * ```tsx
+ * import { MonthView, type CalendarEvent } from "react-native-super-calendar";
+ *
+ * <MonthView
+ *   date={new Date()}
+ *   events={events}
+ *   onPressDay={(day) => console.log(day)}
+ * />
+ * ```
+ */
 declare const MonthView: typeof MonthViewInner;
 //#endregion
 //#region src/components/MonthPager.d.ts
+/** Props for {@link MonthPager}, the horizontally swipeable month carousel. */
 type MonthPagerProps<T> = {
   date: Date;
   events: CalendarEvent$1<T>[];
@@ -218,10 +254,29 @@ declare function MonthPagerInner<T>({
   activeDate,
   renderHeaderForMonthView,
   renderCustomDateForMonth
-}: MonthPagerProps<T>): import("react").JSX.Element;
+}: MonthPagerProps<T>): ReactElement;
+/**
+ * A horizontally swipeable month carousel. Swipe left/right to page between
+ * months; the committed month is reported through `onChangeDate`. It is the
+ * Reanimated-driven month view that `Calendar` uses in month mode.
+ *
+ * @example
+ * ```tsx
+ * import { MonthPager } from "react-native-super-calendar";
+ *
+ * <MonthPager
+ *   date={date}
+ *   events={events}
+ *   weekStartsOn={0}
+ *   onChangeDate={setDate}
+ *   onPressEvent={(e) => console.log(e.title)}
+ * />
+ * ```
+ */
 declare const MonthPager: typeof MonthPagerInner;
 //#endregion
 //#region src/components/MonthList.d.ts
+/** Props for {@link MonthList}, the vertically scrolling list of months. */
 type MonthListProps<T> = {
   /** The month scrolled to on mount. */date: Date; /** Events to render in the grids. Omit for an events-free date picker. */
   events?: CalendarEvent$1<T>[];
@@ -299,7 +354,25 @@ declare function MonthListInner<T>({
   onSelectDrag,
   onChangeVisibleMonth,
   renderMonthHeader
-}: MonthListProps<T>): import("react").JSX.Element;
+}: MonthListProps<T>): ReactElement;
+/**
+ * A vertically scrolling, virtualized list of month grids. It doubles as the
+ * date picker: pass `selectedRange`/`selectedDates` and selection handlers to
+ * turn it into a single-date or range picker. Free of Reanimated, so the
+ * `/picker` entry point can ship it without the timetable views.
+ *
+ * @example
+ * ```tsx
+ * import { MonthList } from "react-native-super-calendar/picker";
+ *
+ * <MonthList
+ *   date={new Date()}
+ *   weekStartsOn={0}
+ *   selectedRange={range}
+ *   onPressDay={handlePressDay}
+ * />
+ * ```
+ */
 declare const MonthList: typeof MonthListInner;
 //#endregion
 //#region src/components/DefaultMonthEvent.d.ts
@@ -321,6 +394,6 @@ declare function DefaultMonthEvent<T>({
   cellStyle,
   onPress,
   onLongPress
-}: RenderEventArgs<T>): import("react").JSX.Element;
+}: RenderEventArgs<T>): ReactElement;
 //#endregion
 export { defaultTheme as C, darkTheme as S, useCalendarTheme as T, TimeGridMode as _, MonthPagerProps as a, CalendarThemeProvider as b, BusinessHours as c, EventKeyExtractor as d, ICalendarEvent as f, RenderEventArgs as g, RenderEvent as h, MonthPager as i, CalendarEvent$1 as l, RecurrenceRule as m, MonthList as n, MonthView as o, RecurrenceFrequency as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, WeekStartsOn as v, mergeTheme as w, PartialCalendarTheme as x, CalendarTheme as y };

package/dist/{DefaultMonthEvent-CpRoOloh.d.mts → DefaultMonthEvent-DaTEIcRs.d.ts}

@@ -1,8 +1,8 @@
 import { Locale } from "date-fns";
-import { ComponentType } from "react";
+import { ComponentType, ReactElement } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { SharedValue } from "react-native-reanimated";
 import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn } from "@super-calendar/core";
-import { StyleProp, TextStyle, ViewStyle } from "react-native";
 
 //#region src/theme.d.ts
 /**
@@ -13,6 +13,7 @@ import { StyleProp, TextStyle, ViewStyle } from "react-native";
 interface CalendarTheme {
   /** The shared colour palette (sourced from `@super-calendar/core`). */
   colors: CalendarColors;
+  /** Text styles for the calendar's labels and the built-in event box. */
   text: {
     /** Large day number in the week/day header. */dayNumber: TextStyle; /** Short weekday label ("Mon") in headers. */
     weekday: TextStyle; /** Date number inside a month cell. */
@@ -29,6 +30,7 @@ interface CalendarTheme {
    */
   rangeBandHeight: number;
 }
+/** The default light theme. Every key the calendar reads falls back to this. */
 declare const defaultTheme: CalendarTheme;
 /**
  * A ready-made dark palette. Pass it straight to `<Calendar theme={darkTheme} />`,
@@ -38,16 +40,32 @@ declare const defaultTheme: CalendarTheme;
 declare const darkTheme: CalendarTheme;
 /** Deep-merge a partial theme over {@link defaultTheme}. */
 declare function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme;
+/**
+ * A theme with every key optional. Pass this to `<Calendar theme={...} />` to
+ * override only the colours, text styles, or metrics you care about; the rest
+ * come from {@link defaultTheme}.
+ */
 type PartialCalendarTheme = {
   colors?: Partial<CalendarTheme["colors"]>;
   text?: Partial<CalendarTheme["text"]>;
   todayBadgeRadius?: number;
   rangeBandHeight?: number;
 };
+/**
+ * Context provider that supplies the active {@link CalendarTheme} to descendants.
+ * `<Calendar>` wraps its subtree in this; use it directly only to theme custom
+ * components rendered outside a `<Calendar>`.
+ */
 declare const CalendarThemeProvider: import("react").Provider<CalendarTheme>;
+/** Read the active {@link CalendarTheme} from context. Useful inside custom renderers. */
 declare const useCalendarTheme: () => CalendarTheme;
 //#endregion
 //#region src/types.d.ts
+/**
+ * Props passed to a {@link RenderEvent} component for one event. Carries the
+ * event, the current mode, press handlers, and built-in renderer hints such as
+ * `boxHeight`, `continuesBefore`/`continuesAfter`, and `isAllDay`.
+ */
 type RenderEventArgs<T = unknown> = {
   event: CalendarEvent<T>;
   mode: CalendarMode;
@@ -82,6 +100,7 @@ type RenderEventArgs<T = unknown> = {
 type RenderEvent<T = unknown> = ComponentType<RenderEventArgs<T>>;
 //#endregion
 //#region src/components/MonthView.d.ts
+/** Props for {@link MonthView}, the single-month grid. */
 type MonthViewProps<T> = {
   date: Date;
   events: CalendarEvent$1<T>[];
@@ -161,10 +180,27 @@ declare function MonthViewInner<T>({
   renderCustomDateForMonth,
   onDayPointerDown,
   onDayPointerEnter
-}: MonthViewProps<T>): import("react").JSX.Element;
+}: MonthViewProps<T>): ReactElement;
+/**
+ * A single month rendered as a 7-column grid of day cells, each showing its
+ * event chips with a "+N more" overflow. Render it on its own for a static
+ * month, or let `MonthList`/`Calendar` page through months for you.
+ *
+ * @example
+ * ```tsx
+ * import { MonthView, type CalendarEvent } from "react-native-super-calendar";
+ *
+ * <MonthView
+ *   date={new Date()}
+ *   events={events}
+ *   onPressDay={(day) => console.log(day)}
+ * />
+ * ```
+ */
 declare const MonthView: typeof MonthViewInner;
 //#endregion
 //#region src/components/MonthPager.d.ts
+/** Props for {@link MonthPager}, the horizontally swipeable month carousel. */
 type MonthPagerProps<T> = {
   date: Date;
   events: CalendarEvent$1<T>[];
@@ -218,10 +254,29 @@ declare function MonthPagerInner<T>({
   activeDate,
   renderHeaderForMonthView,
   renderCustomDateForMonth
-}: MonthPagerProps<T>): import("react").JSX.Element;
+}: MonthPagerProps<T>): ReactElement;
+/**
+ * A horizontally swipeable month carousel. Swipe left/right to page between
+ * months; the committed month is reported through `onChangeDate`. It is the
+ * Reanimated-driven month view that `Calendar` uses in month mode.
+ *
+ * @example
+ * ```tsx
+ * import { MonthPager } from "react-native-super-calendar";
+ *
+ * <MonthPager
+ *   date={date}
+ *   events={events}
+ *   weekStartsOn={0}
+ *   onChangeDate={setDate}
+ *   onPressEvent={(e) => console.log(e.title)}
+ * />
+ * ```
+ */
 declare const MonthPager: typeof MonthPagerInner;
 //#endregion
 //#region src/components/MonthList.d.ts
+/** Props for {@link MonthList}, the vertically scrolling list of months. */
 type MonthListProps<T> = {
   /** The month scrolled to on mount. */date: Date; /** Events to render in the grids. Omit for an events-free date picker. */
   events?: CalendarEvent$1<T>[];
@@ -299,7 +354,25 @@ declare function MonthListInner<T>({
   onSelectDrag,
   onChangeVisibleMonth,
   renderMonthHeader
-}: MonthListProps<T>): import("react").JSX.Element;
+}: MonthListProps<T>): ReactElement;
+/**
+ * A vertically scrolling, virtualized list of month grids. It doubles as the
+ * date picker: pass `selectedRange`/`selectedDates` and selection handlers to
+ * turn it into a single-date or range picker. Free of Reanimated, so the
+ * `/picker` entry point can ship it without the timetable views.
+ *
+ * @example
+ * ```tsx
+ * import { MonthList } from "react-native-super-calendar/picker";
+ *
+ * <MonthList
+ *   date={new Date()}
+ *   weekStartsOn={0}
+ *   selectedRange={range}
+ *   onPressDay={handlePressDay}
+ * />
+ * ```
+ */
 declare const MonthList: typeof MonthListInner;
 //#endregion
 //#region src/components/DefaultMonthEvent.d.ts
@@ -321,6 +394,6 @@ declare function DefaultMonthEvent<T>({
   cellStyle,
   onPress,
   onLongPress
-}: RenderEventArgs<T>): import("react").JSX.Element;
+}: RenderEventArgs<T>): ReactElement;
 //#endregion
 export { defaultTheme as C, darkTheme as S, useCalendarTheme as T, TimeGridMode as _, MonthPagerProps as a, CalendarThemeProvider as b, BusinessHours as c, EventKeyExtractor as d, ICalendarEvent as f, RenderEventArgs as g, RenderEvent as h, MonthPager as i, CalendarEvent$1 as l, RecurrenceRule as m, MonthList as n, MonthView as o, RecurrenceFrequency as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, WeekStartsOn as v, mergeTheme as w, PartialCalendarTheme as x, CalendarTheme as y };

package/dist/{MonthList-CyrEJ_U6.mjs → MonthList-DXvjxiyu.mjs}

@@ -6,6 +6,7 @@ import { Platform, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 //#region src/theme.ts
+/** The default light theme. Every key the calendar reads falls back to this. */
 const defaultTheme = {
 	colors: lightColors,
 	text: {
@@ -63,7 +64,13 @@ function mergeTheme(theme) {
 	};
 }
 const CalendarThemeContext = createContext(defaultTheme);
+/**
+* Context provider that supplies the active {@link CalendarTheme} to descendants.
+* `<Calendar>` wraps its subtree in this; use it directly only to theme custom
+* components rendered outside a `<Calendar>`.
+*/
 const CalendarThemeProvider = CalendarThemeContext.Provider;
+/** Read the active {@link CalendarTheme} from context. Useful inside custom renderers. */
 const useCalendarTheme = () => useContext(CalendarThemeContext);
 //#endregion
 //#region src/utils/useWebPagerKeys.ts
@@ -337,6 +344,22 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 		]
 	});
 }
+/**
+* A single month rendered as a 7-column grid of day cells, each showing its
+* event chips with a "+N more" overflow. Render it on its own for a static
+* month, or let `MonthList`/`Calendar` page through months for you.
+*
+* @example
+* ```tsx
+* import { MonthView, type CalendarEvent } from "react-native-super-calendar";
+*
+* <MonthView
+*   date={new Date()}
+*   events={events}
+*   onPressDay={(day) => console.log(day)}
+* />
+* ```
+*/
 const MonthView = memo(MonthViewInner);
 const styles$3 = StyleSheet.create({
 	root: { flex: 1 },
@@ -562,6 +585,24 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, loc
 		]
 	});
 }
+/**
+* A horizontally swipeable month carousel. Swipe left/right to page between
+* months; the committed month is reported through `onChangeDate`. It is the
+* Reanimated-driven month view that `Calendar` uses in month mode.
+*
+* @example
+* ```tsx
+* import { MonthPager } from "react-native-super-calendar";
+*
+* <MonthPager
+*   date={date}
+*   events={events}
+*   weekStartsOn={0}
+*   onChangeDate={setDate}
+*   onPressEvent={(e) => console.log(e.title)}
+* />
+* ```
+*/
 const MonthPager = memo(MonthPagerInner);
 const MonthWeekdayHeader = ({ weekDays, locale }) => {
 	const theme = useCalendarTheme();
@@ -1003,6 +1044,24 @@ function MonthBlock({ height, inert, children }) {
 		children
 	});
 }
+/**
+* A vertically scrolling, virtualized list of month grids. It doubles as the
+* date picker: pass `selectedRange`/`selectedDates` and selection handlers to
+* turn it into a single-date or range picker. Free of Reanimated, so the
+* `/picker` entry point can ship it without the timetable views.
+*
+* @example
+* ```tsx
+* import { MonthList } from "react-native-super-calendar/picker";
+*
+* <MonthList
+*   date={new Date()}
+*   weekStartsOn={0}
+*   selectedRange={range}
+*   onPressDay={handlePressDay}
+* />
+* ```
+*/
 const MonthList = memo(MonthListInner);
 const styles = StyleSheet.create({
 	container: { flex: 1 },

package/dist/{MonthList-BCfN-UGz.js → MonthList-oXiArmbu.js}

@@ -6,6 +6,7 @@ let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_gesture_handler = require("react-native-gesture-handler");
 //#region src/theme.ts
+/** The default light theme. Every key the calendar reads falls back to this. */
 const defaultTheme = {
 	colors: _super_calendar_core.lightColors,
 	text: {
@@ -63,7 +64,13 @@ function mergeTheme(theme) {
 	};
 }
 const CalendarThemeContext = (0, react.createContext)(defaultTheme);
+/**
+* Context provider that supplies the active {@link CalendarTheme} to descendants.
+* `<Calendar>` wraps its subtree in this; use it directly only to theme custom
+* components rendered outside a `<Calendar>`.
+*/
 const CalendarThemeProvider = CalendarThemeContext.Provider;
+/** Read the active {@link CalendarTheme} from context. Useful inside custom renderers. */
 const useCalendarTheme = () => (0, react.useContext)(CalendarThemeContext);
 //#endregion
 //#region src/utils/useWebPagerKeys.ts
@@ -337,6 +344,22 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 		]
 	});
 }
+/**
+* A single month rendered as a 7-column grid of day cells, each showing its
+* event chips with a "+N more" overflow. Render it on its own for a static
+* month, or let `MonthList`/`Calendar` page through months for you.
+*
+* @example
+* ```tsx
+* import { MonthView, type CalendarEvent } from "react-native-super-calendar";
+*
+* <MonthView
+*   date={new Date()}
+*   events={events}
+*   onPressDay={(day) => console.log(day)}
+* />
+* ```
+*/
 const MonthView = (0, react.memo)(MonthViewInner);
 const styles$3 = react_native.StyleSheet.create({
 	root: { flex: 1 },
@@ -562,6 +585,24 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, loc
 		]
 	});
 }
+/**
+* A horizontally swipeable month carousel. Swipe left/right to page between
+* months; the committed month is reported through `onChangeDate`. It is the
+* Reanimated-driven month view that `Calendar` uses in month mode.
+*
+* @example
+* ```tsx
+* import { MonthPager } from "react-native-super-calendar";
+*
+* <MonthPager
+*   date={date}
+*   events={events}
+*   weekStartsOn={0}
+*   onChangeDate={setDate}
+*   onPressEvent={(e) => console.log(e.title)}
+* />
+* ```
+*/
 const MonthPager = (0, react.memo)(MonthPagerInner);
 const MonthWeekdayHeader = ({ weekDays, locale }) => {
 	const theme = useCalendarTheme();
@@ -1003,6 +1044,24 @@ function MonthBlock({ height, inert, children }) {
 		children
 	});
 }
+/**
+* A vertically scrolling, virtualized list of month grids. It doubles as the
+* date picker: pass `selectedRange`/`selectedDates` and selection handlers to
+* turn it into a single-date or range picker. Free of Reanimated, so the
+* `/picker` entry point can ship it without the timetable views.
+*
+* @example
+* ```tsx
+* import { MonthList } from "react-native-super-calendar/picker";
+*
+* <MonthList
+*   date={new Date()}
+*   weekStartsOn={0}
+*   selectedRange={range}
+*   onPressDay={handlePressDay}
+* />
+* ```
+*/
 const MonthList = (0, react.memo)(MonthListInner);
 const styles = react_native.StyleSheet.create({
 	container: { flex: 1 },