@super-calendar/native 2.3.2 → 2.4.0

package/src/index.tsx

@@ -20,14 +20,16 @@
  *
  * @module
  */
-export { Calendar, type CalendarProps } from "./components/Calendar";
-export { Agenda, type AgendaProps } from "./components/Agenda";
-export { MonthView, type MonthViewProps } from "./components/MonthView";
+export { Calendar, type CalendarProps, type CalendarSlot } from "./components/Calendar";
+export { Agenda, type AgendaProps, type AgendaSlot } from "./components/Agenda";
+export { MonthView, type MonthViewProps, type MonthViewSlot } from "./components/MonthView";
+export { type ResolvedSlot, type SlotDefault, type SlotStyleProps } from "./utils/slots";
 export { MonthPager, type MonthPagerProps } from "./components/MonthPager";
-export { MonthList, type MonthListProps } from "./components/MonthList";
+export { MonthList, type MonthListProps, type MonthListSlot } from "./components/MonthList";
 export {
   TimeGrid,
   type TimeGridProps,
+  type TimeGridSlot,
   type EventDragHandler,
   type EventDragStartHandler,
   type HourRenderer,
@@ -89,6 +91,12 @@ export {
   weekdayFormatToken,
 } from "@super-calendar/core";
 export { expandRecurringEvents } from "@super-calendar/core";
+export {
+  type ICalEvent,
+  parseICalendar,
+  toICalendar,
+  type ToICalendarOptions,
+} from "@super-calendar/core";
 export { eventsInTimeZone, toZonedTime } from "@super-calendar/core";
 export {
   buildMonthWeeks,

package/src/types.ts

@@ -1,5 +1,10 @@
 import type { ComponentType } from "react";
-import type { StyleProp, ViewStyle } from "react-native";
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import type { CalendarEvent, CalendarMode } from "@super-calendar/core";
 
@@ -62,6 +67,16 @@ export type RenderEventArgs<T = unknown> = {
    * their default label; `undefined` falls back to that default.
    */
   accessibilityLabel?: string;
+  /**
+   * Screen-reader actions the built-in renderer places on the event, so
+   * VoiceOver/TalkBack users can act on it without a gesture. On a draggable
+   * time-grid event these are move / resize steps; wired to the same commit path
+   * as dragging. A custom renderer should spread these (plus `onAccessibilityAction`)
+   * onto its pressable to keep the event operable by assistive tech.
+   */
+  accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>;
+  /** Handles an `accessibilityActions` invocation; pair it with `accessibilityActions`. */
+  onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
   onPress: () => void;
   /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
   onLongPress?: () => void;

package/src/utils/slots.ts

@@ -0,0 +1,83 @@
+// Per-slot styling for the native renderer.
+//
+// Every component styles itself from the theme, so zero-config consumers get a
+// full look with no setup. This module mirrors the dom renderer's slot contract
+// for consumers who style with Tailwind classes instead: each styleable element
+// is a named "slot" that accepts a `className` (resolved by a Tailwind runtime
+// such as uniwind or NativeWind, which compile the library's source through the
+// consumer's bundler) and/or a style override.
+//
+// The contract, shared with the dom renderer: a slot's *structural* styles (the
+// layout the component needs to not fall apart) always apply. Its *themed*
+// styles (colours, typography, spacing) apply only when no class is supplied
+// for that slot; supply a class and you own those. A per-slot `styles` override
+// always merges last. Without a Tailwind runtime, `className` is an unknown
+// prop React Native silently ignores, so the props are safe to pass everywhere.
+
+import { createContext, createElement, type ReactNode, useContext, useMemo } from "react";
+import type { StyleProp, TextStyle } from "react-native";
+
+/**
+ * Per-slot styling overrides. Give a slot a Tailwind class (uniwind/NativeWind)
+ * and/or a style override; missing slots keep the built-in look.
+ */
+export interface SlotStyleProps<Slot extends string> {
+  /**
+   * Class names per slot. Supplying a class for a slot drops the built-in
+   * *themed* styles for that slot so the class fully controls its look; the
+   * *structural* styles the layout depends on are kept. Requires a Tailwind
+   * runtime (uniwind, NativeWind) in the consuming app.
+   */
+  classNames?: Partial<Record<Slot, string>>;
+  /** Style overrides per slot, merged last (win over defaults and classes). */
+  styles?: Partial<Record<Slot, StyleProp<TextStyle>>>;
+}
+
+/** A slot's built-in styling, split so classes can replace the look but not the layout. */
+export interface SlotDefault {
+  /** Structural styles kept even when a class is supplied. */
+  base?: StyleProp<TextStyle>;
+  /** Themed styles (colour, type, spacing) dropped when a class is supplied. */
+  themed?: StyleProp<TextStyle>;
+}
+
+/** The props a resolved slot spreads onto an element. */
+export interface ResolvedSlot {
+  style: StyleProp<TextStyle>;
+  className?: string;
+}
+
+/**
+ * Build a slot resolver for one render. `slot(name, defaults)` returns the
+ * props to spread on that element: the resolved `style` array and, when the
+ * consumer supplied one, a `className` for the Tailwind runtime to pick up.
+ */
+export function createSlots<Slot extends string>({ classNames, styles }: SlotStyleProps<Slot>) {
+  return (name: Slot, defaults?: SlotDefault): ResolvedSlot => {
+    const slotClass = classNames?.[name];
+    return {
+      style: [defaults?.base, slotClass ? undefined : defaults?.themed, styles?.[name]],
+      ...(slotClass ? { className: slotClass } : null),
+    };
+  };
+}
+
+// Deeply componentized views (the time grid) distribute their slot maps through
+// context, like the theme, instead of threading two props through every layer.
+const SlotStylesContext = createContext<SlotStyleProps<string>>({});
+
+/** Provide a component's `classNames`/`styles` maps to its internal slots. */
+export function SlotStylesProvider({
+  classNames,
+  styles,
+  children,
+}: SlotStyleProps<string> & { children: ReactNode }) {
+  const value = useMemo(() => ({ classNames, styles }), [classNames, styles]);
+  return createElement(SlotStylesContext.Provider, { value }, children);
+}
+
+/** Resolve slots against the nearest {@link SlotStylesProvider}'s maps. */
+export function useSlots<Slot extends string>() {
+  const maps = useContext(SlotStylesContext) as SlotStyleProps<Slot>;
+  return useMemo(() => createSlots<Slot>(maps), [maps]);
+}