@gobrand/react-calendar 0.0.16 → 0.0.18

package/dist/index.cjs

@@ -1,14 +1,17 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var calendarCore = require('@gobrand/calendar-core');
 
-// src/index.ts
-function useCalendar(options) {
-  const [calendarRef] = react.useState(() => ({
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function useCreateCalendar(options) {
+  const [calendarRef] = React.useState(() => ({
     current: calendarCore.createCalendar(options)
   }));
-  const [state, setState] = react.useState(() => calendarRef.current.getState());
+  const [state, setState] = React.useState(() => calendarRef.current.getState());
   calendarRef.current.setOptions((prev) => ({
     ...prev,
     ...options,
@@ -24,8 +27,60 @@ function useCalendar(options) {
   }));
   return calendarRef.current;
 }
+var CalendarContext = React.createContext(null);
+function CalendarProvider({
+  calendar,
+  children
+}) {
+  return React__default.default.createElement(
+    CalendarContext.Provider,
+    { value: calendar },
+    children
+  );
+}
+function useCalendar() {
+  const calendar = React.useContext(CalendarContext);
+  if (!calendar) {
+    throw new Error(
+      "useCalendar must be used within a CalendarProvider. Wrap your component tree with <CalendarProvider calendar={calendar}>."
+    );
+  }
+  return calendar;
+}
+function useView(options) {
+  const { data, name, calendar: explicitCalendar } = options;
+  const contextCalendar = React.useContext(CalendarContext);
+  const calendar = explicitCalendar ?? contextCalendar;
+  if (!calendar) {
+    throw new Error(
+      "No calendar found. Either wrap your component tree in <CalendarProvider> or pass calendar explicitly: useView({ calendar, data })."
+    );
+  }
+  const state = calendar.getState();
+  const effectiveView = name ?? state.currentView;
+  return React.useMemo(() => {
+    switch (effectiveView) {
+      case "month":
+        return { type: "month", data: calendar.getMonth(data) };
+      case "week":
+        return { type: "week", data: calendar.getWeek(data) };
+      case "day":
+        return { type: "day", data: calendar.getDay(data) };
+      default:
+        throw new Error(`Unknown view: ${effectiveView}`);
+    }
+  }, [
+    calendar,
+    data,
+    state.referenceDate.toString(),
+    effectiveView
+  ]);
+}
 
+exports.CalendarProvider = CalendarProvider;
 exports.useCalendar = useCalendar;
+exports.useCreateCalendar = useCreateCalendar;
+exports.useView = useView;
 Object.keys(calendarCore).forEach(function (k) {
   if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/dist/index.d.ts

@@ -1,4 +1,81 @@
+import React from 'react';
 export * from '@gobrand/calendar-core';
-import { type Calendar, type CalendarOptions } from '@gobrand/calendar-core';
-export declare function useCalendar<TOptions extends CalendarOptions<any>>(options: TOptions): Calendar<TOptions['data'] extends (infer TItem)[] ? TItem : never, TOptions>;
+import { type Calendar, type CalendarInstance, type CalendarOptions, type ViewType, type ViewResultFor } from '@gobrand/calendar-core';
+/**
+ * Creates and manages a calendar instance with React state.
+ *
+ * @example
+ * const calendar = useCreateCalendar({
+ *   views: { month: { accessor: { getDate: (p) => p.date } } },
+ *   timeZone: 'America/New_York',
+ * });
+ */
+export declare function useCreateCalendar<TItem, TOptions extends CalendarOptions<TItem>>(options: TOptions): Calendar<TItem, TOptions>;
+export interface CalendarProviderProps<TItem, TOptions extends CalendarOptions<TItem>> {
+    calendar: Calendar<TItem, TOptions>;
+    children: React.ReactNode;
+}
+/**
+ * Provides a calendar instance to descendant components via context.
+ *
+ * @example
+ * const calendar = useCreateCalendar({ views, timeZone });
+ *
+ * return (
+ *   <CalendarProvider calendar={calendar}>
+ *     <CalendarToolbar />
+ *     <Suspense fallback={<Loading />}>
+ *       <CalendarGrid />
+ *     </Suspense>
+ *   </CalendarProvider>
+ * );
+ */
+export declare function CalendarProvider<TItem, TOptions extends CalendarOptions<TItem>>({ calendar, children, }: CalendarProviderProps<TItem, TOptions>): React.FunctionComponentElement<React.ProviderProps<CalendarInstance<unknown> | null>>;
+/**
+ * Gets the calendar instance from context with typed item data.
+ * Must be used within a CalendarProvider.
+ *
+ * @example
+ * function CalendarToolbar() {
+ *   const calendar = useCalendar<Post>();
+ *   // calendar.getMonth(posts) returns CalendarMonth<Post>
+ *   // Items are typed as Post, not any
+ *   return (
+ *     <div>
+ *       <span>{calendar.getTitle()}</span>
+ *       <button onClick={() => calendar.next()}>Next</button>
+ *     </div>
+ *   );
+ * }
+ */
+export declare function useCalendar<TItem = unknown>(): CalendarInstance<TItem>;
+export interface UseViewOptions<TItem, V extends ViewType | undefined = undefined> {
+    /** The data items to place on the calendar */
+    data: TItem[];
+    /** Override the current view. If not specified, uses calendar.currentView */
+    name?: V;
+    /** Explicit calendar instance. If not specified, uses context */
+    calendar?: CalendarInstance<TItem>;
+}
+/**
+ * Gets memoized view data for the calendar.
+ *
+ * @example
+ * // Dynamic view - returns discriminated union based on currentView
+ * const view = useView({ data: posts });
+ * if (view.type === 'month') {
+ *   return <MonthGrid month={view.data} />;
+ * }
+ *
+ * @example
+ * // Specific view - returns narrowed type
+ * const month = useView({ data: posts, name: 'month' });
+ * // month.type is always 'month', month.data is CalendarMonth<Post>
+ *
+ * @example
+ * // Dual view
+ * const month = useView({ data: posts, name: 'month' });
+ * const week = useView({ data: posts, name: 'week' });
+ */
+export declare function useView<TItem, V extends ViewType | undefined = undefined>(options: UseViewOptions<TItem, V>): ViewResultFor<TItem, V>;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,wBAAwB,CAAC;AAEvC,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,eAAe,EACrB,MAAM,wBAAwB,CAAC;AAEhC,wBAAgB,WAAW,CAAC,QAAQ,SAAS,eAAe,CAAC,GAAG,CAAC,EAC/D,OAAO,EAAE,QAAQ,GAChB,QAAQ,CACT,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,GAAG,KAAK,GAAG,KAAK,EACxD,QAAQ,CACT,CA6BA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,cAAc,wBAAwB,CAAC;AAEvC,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,QAAQ,EACb,KAAK,aAAa,EACnB,MAAM,wBAAwB,CAAC;AAMhC;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ,SAAS,eAAe,CAAC,KAAK,CAAC,EAC9E,OAAO,EAAE,QAAQ,GAChB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,CA0B3B;AAQD,MAAM,WAAW,qBAAqB,CAAC,KAAK,EAAE,QAAQ,SAAS,eAAe,CAAC,KAAK,CAAC;IACnF,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,QAAQ,SAAS,eAAe,CAAC,KAAK,CAAC,EAAE,EAC/E,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,CAAC,KAAK,EAAE,QAAQ,CAAC,yFAMxC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,KAAK,GAAG,OAAO,KAAK,gBAAgB,CAAC,KAAK,CAAC,CAWtE;AAMD,MAAM,WAAW,cAAc,CAAC,KAAK,EAAE,CAAC,SAAS,QAAQ,GAAG,SAAS,GAAG,SAAS;IAC/E,8CAA8C;IAC9C,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,6EAA6E;IAC7E,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,iEAAiE;IACjE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,CAAC,SAAS,QAAQ,GAAG,SAAS,GAAG,SAAS,EACvE,OAAO,EAAE,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,GAChC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,CAmCzB"}

package/dist/index.js

@@ -1,9 +1,8 @@
-import { useState } from 'react';
+import React, { createContext, useState, useContext, useMemo } from 'react';
 import { createCalendar } from '@gobrand/calendar-core';
 export * from '@gobrand/calendar-core';
 
-// src/index.ts
-function useCalendar(options) {
+function useCreateCalendar(options) {
   const [calendarRef] = useState(() => ({
     current: createCalendar(options)
   }));
@@ -23,5 +22,54 @@ function useCalendar(options) {
   }));
   return calendarRef.current;
 }
+var CalendarContext = createContext(null);
+function CalendarProvider({
+  calendar,
+  children
+}) {
+  return React.createElement(
+    CalendarContext.Provider,
+    { value: calendar },
+    children
+  );
+}
+function useCalendar() {
+  const calendar = useContext(CalendarContext);
+  if (!calendar) {
+    throw new Error(
+      "useCalendar must be used within a CalendarProvider. Wrap your component tree with <CalendarProvider calendar={calendar}>."
+    );
+  }
+  return calendar;
+}
+function useView(options) {
+  const { data, name, calendar: explicitCalendar } = options;
+  const contextCalendar = useContext(CalendarContext);
+  const calendar = explicitCalendar ?? contextCalendar;
+  if (!calendar) {
+    throw new Error(
+      "No calendar found. Either wrap your component tree in <CalendarProvider> or pass calendar explicitly: useView({ calendar, data })."
+    );
+  }
+  const state = calendar.getState();
+  const effectiveView = name ?? state.currentView;
+  return useMemo(() => {
+    switch (effectiveView) {
+      case "month":
+        return { type: "month", data: calendar.getMonth(data) };
+      case "week":
+        return { type: "week", data: calendar.getWeek(data) };
+      case "day":
+        return { type: "day", data: calendar.getDay(data) };
+      default:
+        throw new Error(`Unknown view: ${effectiveView}`);
+    }
+  }, [
+    calendar,
+    data,
+    state.referenceDate.toString(),
+    effectiveView
+  ]);
+}
 
-export { useCalendar };
+export { CalendarProvider, useCalendar, useCreateCalendar, useView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobrand/react-calendar",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "React hooks and components for building calendars using the Temporal API",
   "private": false,
   "publishConfig": {
@@ -34,7 +34,7 @@
   "homepage": "https://github.com/go-brand/calendar#readme",
   "dependencies": {
     "@js-temporal/polyfill": "^0.5.1",
-    "@gobrand/calendar-core": "^0.0.16"
+    "@gobrand/calendar-core": "^0.0.18"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"