@super-calendar/native 2.0.0

package/src/index.tsx

@@ -0,0 +1,70 @@
+export { Calendar, type CalendarProps } from "./components/Calendar";
+export { Agenda, type AgendaProps } from "./components/Agenda";
+export { MonthView, type MonthViewProps } from "./components/MonthView";
+export { MonthPager, type MonthPagerProps } from "./components/MonthPager";
+export { MonthList, type MonthListProps } from "./components/MonthList";
+export {
+  TimeGrid,
+  type TimeGridProps,
+  type EventDragHandler,
+  type EventDragStartHandler,
+  type HourRenderer,
+  DEFAULT_HOUR_HEIGHT,
+} from "./components/TimeGrid";
+export { DefaultEvent } from "./components/DefaultEvent";
+export { DefaultMonthEvent } from "./components/DefaultMonthEvent";
+export {
+  type CalendarTheme,
+  type PartialCalendarTheme,
+  defaultTheme,
+  darkTheme,
+  mergeTheme,
+  CalendarThemeProvider,
+  useCalendarTheme,
+} from "./theme";
+export type {
+  BusinessHours,
+  CalendarEvent,
+  CalendarMode,
+  EventKeyExtractor,
+  ICalendarEvent,
+  RecurrenceFrequency,
+  RecurrenceRule,
+  RenderEvent,
+  RenderEventArgs,
+  TimeGridMode,
+  WeekStartsOn,
+} from "./types";
+export {
+  type DateRange,
+  type DateSelectionConstraints,
+  type DaySelectionState,
+  type UseDateRangeOptions,
+  daySelectionState,
+  isDateSelectable,
+  isRangeEndpoint,
+  isWithinDateRange,
+  nextDateRange,
+  useDateRange,
+} from "@super-calendar/core";
+export {
+  buildMonthGrid,
+  type MonthGrid,
+  type MonthGridDay,
+  type MonthGridWeek,
+  type MonthGridWeekday,
+  type UseMonthGridOptions,
+  useMonthGrid,
+} from "@super-calendar/core";
+export { expandRecurringEvents } from "@super-calendar/core";
+export { eventsInTimeZone, toZonedTime } from "@super-calendar/core";
+export {
+  buildMonthWeeks,
+  getViewDays,
+  getWeekDays,
+  getIsToday,
+  isWeekend,
+  isSameCalendarDay,
+  minutesIntoDay,
+} from "@super-calendar/core";
+export { layoutDayEvents, isAllDayEvent, type PositionedEvent } from "@super-calendar/core";

package/src/picker.tsx

@@ -0,0 +1,55 @@
+// Date-picker entry point: the month grid, selection, and the headless grid,
+// with no dependency on the timetable views or Reanimated. Import from
+// "react-native-super-calendar/picker" for a picker-only bundle that doesn't
+// require react-native-reanimated. The main entry re-exports everything.
+export { MonthView, type MonthViewProps } from "./components/MonthView";
+export { MonthPager, type MonthPagerProps } from "./components/MonthPager";
+export { MonthList, type MonthListProps } from "./components/MonthList";
+export { DefaultMonthEvent } from "./components/DefaultMonthEvent";
+export {
+  type CalendarTheme,
+  type PartialCalendarTheme,
+  defaultTheme,
+  darkTheme,
+  mergeTheme,
+  CalendarThemeProvider,
+  useCalendarTheme,
+} from "./theme";
+export type {
+  CalendarEvent,
+  CalendarMode,
+  EventKeyExtractor,
+  ICalendarEvent,
+  RenderEvent,
+  RenderEventArgs,
+  WeekStartsOn,
+} from "./types";
+export {
+  type DateRange,
+  type DateSelectionConstraints,
+  type DaySelectionState,
+  type UseDateRangeOptions,
+  daySelectionState,
+  isDateSelectable,
+  isRangeEndpoint,
+  isWithinDateRange,
+  nextDateRange,
+  useDateRange,
+} from "@super-calendar/core";
+export {
+  buildMonthGrid,
+  type MonthGrid,
+  type MonthGridDay,
+  type MonthGridWeek,
+  type MonthGridWeekday,
+  type UseMonthGridOptions,
+  useMonthGrid,
+} from "@super-calendar/core";
+export {
+  buildMonthWeeks,
+  getWeekDays,
+  getIsToday,
+  isWeekend,
+  isSameCalendarDay,
+  minutesIntoDay,
+} from "@super-calendar/core";

package/src/theme.ts

@@ -0,0 +1,86 @@
+import { type CalendarColors, darkColors, lightColors } from "@super-calendar/core";
+import { createContext, useContext } from "react";
+import type { TextStyle } from "react-native";
+
+/**
+ * The full set of colours, text styles and metrics the calendar paints with.
+ * Supply a `Partial<CalendarTheme>` to `<Calendar theme={...} />`; missing keys
+ * fall back to {@link defaultTheme}, so you only override what you care about.
+ */
+export interface CalendarTheme {
+  /** The shared colour palette (sourced from `@super-calendar/core`). */
+  colors: CalendarColors;
+  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. */
+    dateCell: TextStyle;
+    /** Hour labels down the left of the time grid. */
+    hourLabel: TextStyle;
+    /** The "+N more" overflow label in month cells. */
+    more: TextStyle;
+    /** Title inside the built-in default event box. */
+    eventTitle: TextStyle;
+  };
+  /** Corner radius of the today badge. Use a large value for a circle. */
+  todayBadgeRadius: number;
+  /**
+   * Height of the range selection band (the centered rounded "pill"); its corner
+   * radius is half this. Ignored when `fillCellOnSelection` fills the whole cell.
+   */
+  rangeBandHeight: number;
+}
+
+export const defaultTheme: CalendarTheme = {
+  colors: lightColors,
+  text: {
+    dayNumber: { fontSize: 22, fontWeight: "700" },
+    weekday: { fontSize: 13, fontWeight: "700" },
+    dateCell: { fontSize: 13, fontWeight: "700" },
+    hourLabel: { fontSize: 10 },
+    more: { fontSize: 11, fontWeight: "700" },
+    // Explicit lineHeight so the timed-grid renderer can clamp the title to a
+    // whole number of lines (clipping on a line boundary, never mid-line).
+    eventTitle: { fontSize: 12, fontWeight: "700", lineHeight: 16 },
+  },
+  todayBadgeRadius: 999,
+  rangeBandHeight: 22,
+};
+
+/**
+ * A ready-made dark palette. Pass it straight to `<Calendar theme={darkTheme} />`,
+ * or switch on the system scheme with React Native's `useColorScheme()`. Shares
+ * {@link defaultTheme}'s typography and metrics; only the colours change.
+ */
+export const darkTheme: CalendarTheme = {
+  colors: darkColors,
+  text: defaultTheme.text,
+  todayBadgeRadius: defaultTheme.todayBadgeRadius,
+  rangeBandHeight: defaultTheme.rangeBandHeight,
+};
+
+/** Deep-merge a partial theme over {@link defaultTheme}. */
+export function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme {
+  if (!theme) return defaultTheme;
+  return {
+    colors: { ...defaultTheme.colors, ...theme.colors },
+    text: { ...defaultTheme.text, ...theme.text },
+    todayBadgeRadius: theme.todayBadgeRadius ?? defaultTheme.todayBadgeRadius,
+    rangeBandHeight: theme.rangeBandHeight ?? defaultTheme.rangeBandHeight,
+  };
+}
+
+export type PartialCalendarTheme = {
+  colors?: Partial<CalendarTheme["colors"]>;
+  text?: Partial<CalendarTheme["text"]>;
+  todayBadgeRadius?: number;
+  rangeBandHeight?: number;
+};
+
+const CalendarThemeContext = createContext<CalendarTheme>(defaultTheme);
+
+export const CalendarThemeProvider = CalendarThemeContext.Provider;
+
+export const useCalendarTheme = () => useContext(CalendarThemeContext);

package/src/types.ts

@@ -0,0 +1,62 @@
+import type { ComponentType } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import type { CalendarEvent, CalendarMode } from "@super-calendar/core";
+
+// Re-export the renderer-agnostic types from core so native modules can keep
+// importing them from "../types".
+export type {
+  BusinessHours,
+  CalendarEvent,
+  CalendarMode,
+  EventKeyExtractor,
+  ICalendarEvent,
+  RecurrenceFrequency,
+  RecurrenceRule,
+  TimeGridMode,
+  WeekStartsOn,
+} from "@super-calendar/core";
+
+// The React Native render contract lives here, not in core: it references
+// Reanimated (`SharedValue`) and React Native (`ViewStyle`) types, which must
+// not leak into the platform-free core.
+export type RenderEventArgs<T = unknown> = {
+  event: CalendarEvent<T>;
+  mode: CalendarMode;
+  /**
+   * Live pixel height of the event box on the week/day grid, driven on the UI
+   * thread by pinch-to-zoom. Use it to reveal detail progressively as the box
+   * grows. `undefined` in month mode, where events render at a fixed size.
+   */
+  boxHeight?: SharedValue<number>;
+  /**
+   * On the week/day grid, true when this is a clipped segment of a multi-day
+   * event that started on an earlier day / continues onto a later day. Lets a
+   * renderer draw "continues" affordances. `undefined` in month mode.
+   */
+  continuesBefore?: boolean;
+  continuesAfter?: boolean;
+  /** True when this event is rendered in the all-day lane (week/day) or is an all-day event in month view. */
+  isAllDay?: boolean;
+  /** Format the built-in renderer's time range in 12-hour AM/PM. Default false (24h). */
+  ampm?: boolean;
+  /** Show the time range in the built-in renderer (day/week/schedule). Default true. */
+  showTime?: boolean;
+  /** Add a trailing ellipsis (…) when a clipped title overflows in the built-in renderer; otherwise the text is hard-clipped. Default false. */
+  ellipsizeTitle?: boolean;
+  /** Label shown for an all-day event in the schedule (and its screen-reader text). Default "All day". */
+  allDayLabel?: string;
+  /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
+  cellStyle?: StyleProp<ViewStyle>;
+  onPress: () => void;
+  /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
+  onLongPress?: () => void;
+};
+
+/**
+ * A component that renders a single event. It is rendered as a real component
+ * (not called as a function), so it may safely use hooks — including Reanimated
+ * hooks driven by `boxHeight`. Render an element that fills its container
+ * (`flex: 1`); the calendar positions and sizes the wrapping box for you.
+ */
+export type RenderEvent<T = unknown> = ComponentType<RenderEventArgs<T>>;

package/src/utils/useWebGridZoom.ts

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+
+// Minimal DOM shapes so this compiles without the TS "DOM" lib (the library
+// targets React Native). Only the bits we touch are typed.
+type WheelEventLike = {
+  ctrlKey: boolean;
+  metaKey: boolean;
+  deltaY: number;
+  preventDefault: () => void;
+};
+type WheelTarget = {
+  addEventListener: (
+    type: "wheel",
+    listener: (event: WheelEventLike) => void,
+    options?: { passive?: boolean },
+  ) => void;
+  removeEventListener: (type: "wheel", listener: (event: WheelEventLike) => void) => void;
+};
+
+// A scroll notch scales the row height by this ratio; matching pinch's feel.
+const ZOOM_SENSITIVITY = 0.002;
+
+/**
+ * Web-only: zoom the time grid with Ctrl/Cmd + scroll, standing in for the pinch
+ * gesture that web has no equivalent of. `target` is the grid's host node — on
+ * web a React Native View ref resolves to its DOM element. No-op off web, when
+ * `enabled` is false, or before the node mounts. Plain scroll is left untouched.
+ */
+export function useWebGridZoom(
+  enabled: boolean,
+  target: { current: unknown },
+  cellHeight: SharedValue<number>,
+  committedCellHeight: SharedValue<number>,
+  minHeight: number,
+  maxHeight: number,
+): void {
+  useEffect(() => {
+    if (Platform.OS !== "web" || !enabled) return;
+    const node = target.current as WheelTarget | null;
+    if (!node) return;
+    const handler = (event: WheelEventLike) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      // Exponential so each notch scales by a constant ratio, like pinch.
+      const next = Math.min(
+        maxHeight,
+        Math.max(minHeight, cellHeight.value * Math.exp(-event.deltaY * ZOOM_SENSITIVITY)),
+      );
+      // eslint-disable-next-line react-hooks/immutability -- Reanimated shared value: assigning .value is the intended mutation API
+      cellHeight.value = next;
+      // eslint-disable-next-line react-hooks/immutability -- Reanimated shared value: assigning .value is the intended mutation API
+      committedCellHeight.value = next;
+    };
+    node.addEventListener("wheel", handler, { passive: false });
+    return () => node.removeEventListener("wheel", handler);
+  }, [enabled, target, cellHeight, committedCellHeight, minHeight, maxHeight]);
+}

package/src/utils/useWebPagerKeys.ts

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+import { Platform } from "react-native";
+
+// Minimal DOM shapes so this compiles without the TS "DOM" lib (the library
+// targets React Native). Only the bits we touch are typed.
+type FocusedElement = { tagName?: string; isContentEditable?: boolean } | null;
+type KeyEvent = {
+  key: string;
+  defaultPrevented: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+  preventDefault: () => void;
+};
+type WebDocument = {
+  activeElement: FocusedElement;
+  addEventListener: (type: "keydown", listener: (event: KeyEvent) => void) => void;
+  removeEventListener: (type: "keydown", listener: (event: KeyEvent) => void) => void;
+};
+
+const getDocument = (): WebDocument | undefined =>
+  (globalThis as { document?: WebDocument }).document;
+
+// Don't hijack arrow keys while the user is typing or moving a caret.
+const isTextEntry = (element: FocusedElement): boolean => {
+  const tag = element?.tagName;
+  return (
+    tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || element?.isContentEditable === true
+  );
+};
+
+/**
+ * Web-only: page the calendar with the ← / → arrow keys, standing in for the
+ * horizontal swipe that the grid disables on web. No-op off web or when
+ * `enabled` is false. `onPage(delta)` receives -1 (previous) or +1 (next).
+ */
+export function useWebPagerKeys(enabled: boolean, onPage: (delta: number) => void): void {
+  useEffect(() => {
+    if (Platform.OS !== "web" || !enabled) return;
+    const doc = getDocument();
+    if (!doc) return;
+    const handler = (event: KeyEvent) => {
+      if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+      if (isTextEntry(doc.activeElement)) return;
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        onPage(1);
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        onPage(-1);
+      }
+    };
+    doc.addEventListener("keydown", handler);
+    return () => doc.removeEventListener("keydown", handler);
+  }, [enabled, onPage]);
+}