@super-calendar/dom 2.0.0

package/src/index.ts

@@ -0,0 +1,49 @@
+// react-dom entry point: real DOM components (no React Native, no react-native-web).
+// Built on the library's headless core and Legend List's DOM renderer. Pair with
+// the headless hooks (useDateRange, useMonthGrid) re-exported below for selection
+// state and custom layouts.
+export { Agenda, type AgendaProps, type DomAgendaEvent, type DomAgendaEventArgs } from "./Agenda";
+export { Calendar, type CalendarProps } from "./Calendar";
+export {
+  type DomMonthEvent,
+  type DomMonthEventArgs,
+  MonthView,
+  type MonthViewProps,
+} from "./MonthView";
+export { MonthList, type MonthListProps } from "./MonthList";
+export {
+  TimeGrid,
+  type TimeGridProps,
+  type DomRenderEvent,
+  type DomRenderEventArgs,
+} from "./TimeGrid";
+export { type DomCalendarTheme, darkDomTheme, defaultDomTheme, mergeDomTheme } from "./theme";
+export {
+  type BusinessHours,
+  type CalendarEvent,
+  type CalendarMode,
+  type DateRange,
+  type DateSelectionConstraints,
+  type DaySelectionState,
+  type ICalendarEvent,
+  type PositionedEvent,
+  type TimeGridMode,
+  type UseDateRangeOptions,
+  type WeekStartsOn,
+  getViewDays,
+  isAllDayEvent,
+  layoutDayEvents,
+  daySelectionState,
+  isDateSelectable,
+  isRangeEndpoint,
+  isWithinDateRange,
+  nextDateRange,
+  useDateRange,
+  useMonthGrid,
+  buildMonthGrid,
+  type MonthGrid,
+  type MonthGridDay,
+  type MonthGridWeek,
+  type MonthGridWeekday,
+  type UseMonthGridOptions,
+} from "@super-calendar/core";

package/src/theme.ts

@@ -0,0 +1,38 @@
+// Theme for the react-dom renderer. The DOM components style themselves with
+// plain inline styles driven by this object, so consumers don't need to import
+// a stylesheet or configure their bundler for CSS. Colours come from the shared
+// @super-calendar/core token palette (one source for both renderers); only the
+// DOM-specific pixel metrics and font stack live here.
+import { type CalendarColors, darkColors, lightColors } from "@super-calendar/core";
+
+export type DomCalendarTheme = CalendarColors & {
+  /** Row height of a day cell, in px. */
+  cellHeight: number;
+  /** Diameter of the day badge, in px. */
+  dayBadgeSize: number;
+  /**
+   * Height of the selection band strip, in px (the default pill look). The pill's
+   * corner radius is half this. Ignored when `fillCellOnSelection` is set, where
+   * the band fills the whole cell instead.
+   */
+  rangeBandHeight: number;
+  /** Font stack for the calendar. */
+  fontFamily: string;
+};
+
+const SYSTEM_FONT =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+
+const METRICS = { cellHeight: 48, dayBadgeSize: 34, rangeBandHeight: 32, fontFamily: SYSTEM_FONT };
+
+export const defaultDomTheme: DomCalendarTheme = { ...lightColors, ...METRICS };
+
+export const darkDomTheme: DomCalendarTheme = { ...darkColors, ...METRICS };
+
+/** Merge a partial override onto a base theme (defaults to {@link defaultDomTheme}). */
+export function mergeDomTheme(
+  overrides?: Partial<DomCalendarTheme>,
+  base: DomCalendarTheme = defaultDomTheme,
+): DomCalendarTheme {
+  return overrides ? { ...base, ...overrides } : base;
+}