@super-calendar/dom 2.1.4 → 2.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@super-calendar/dom?style=flat-square&color=1F6FEB)](https://www.npmjs.com/package/@super-calendar/dom) [![JSR](https://img.shields.io/jsr/v/@super-calendar/dom?style=flat-square&label=JSR&color=F7DF1E)](https://jsr.io/@super-calendar/dom) [![npmx](https://img.shields.io/badge/npmx-view-8A2BE2?style=flat-square)](https://npmx.dev/package/@super-calendar/dom)
 
-The react-dom renderer for [super-calendar](https://github.com/afonsojramos/react-native-super-calendar): a virtualized **month / week / day** calendar and date picker built from real DOM components. No React Native, no react-native-web.
+The react-dom renderer for [super-calendar](https://github.com/afonsojramos/super-calendar): a virtualized **month / week / day** calendar and date picker built from real DOM components. No React Native, no react-native-web.
 
 It is built on the headless [`@super-calendar/core`](https://www.npmjs.com/package/@super-calendar/core) and Legend List's DOM renderer.
 
@@ -52,6 +52,23 @@ export function MyCalendar() {
 
 For a custom picker, pair the headless hooks (`useDateRange`, `useMonthGrid`) with `MonthList` and `TimeGrid`, all re-exported from this package.
 
+## Styling
+
+Out of the box the calendar is fully styled from the theme, no stylesheet required. To restyle a specific part with **Tailwind** or your own CSS, every element is a named slot: pass `classNames` (or `styles`) per slot, and use `data-*` state variants like `data-[today]:`.
+
+```tsx
+<Calendar
+  mode="month"
+  date={date}
+  classNames={{
+    title: "text-center text-xl font-bold",
+    dayBadge: "rounded-full data-[today]:bg-indigo-600 data-[today]:text-white",
+  }}
+/>
+```
+
+A slot's structural layout is always kept; only its themed look steps aside for your class, so the class wins over the inline default. See the [styling guide](https://super-calendar.afonsojramos.me/guides/styling).
+
 ## Documentation
 
 See the [full documentation](https://super-calendar.afonsojramos.me), the [quickstart](https://super-calendar.afonsojramos.me/quickstart), and the [API reference](https://super-calendar.afonsojramos.me/reference/api).

package/dist/index.d.mts

@@ -1,7 +1,36 @@
 import { Locale } from "date-fns";
 import { CSSProperties, ComponentType, ReactElement, ReactNode } from "react";
-import { BusinessHours, BusinessHours as BusinessHours$1, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, DateRange as DateRange$1, DateSelectionConstraints, DateSelectionConstraints as DateSelectionConstraints$1, DaySelectionState, ICalendarEvent, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, PositionedEvent, TimeGridMode, TimeGridMode as TimeGridMode$1, UseDateRangeOptions, UseMonthGridOptions, WeekStartsOn, WeekStartsOn as WeekStartsOn$1, buildMonthGrid, daySelectionState, getViewDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isWithinDateRange, layoutDayEvents, nextDateRange, useDateRange, useMonthGrid } from "@super-calendar/core";
+import { BusinessHours, BusinessHours as BusinessHours$1, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, DateRange as DateRange$1, DateSelectionConstraints, DateSelectionConstraints as DateSelectionConstraints$1, DaySelectionState, EventAccessibilityLabelContext, EventAccessibilityLabeler, EventAccessibilityLabeler as EventAccessibilityLabeler$1, ICalEvent, ICalendarEvent, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, PositionedEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, TimeGridMode as TimeGridMode$1, ToICalendarOptions, UseDateRangeOptions, UseMonthGridOptions, WeekStartsOn, WeekStartsOn as WeekStartsOn$1, WeekdayFormat, WeekdayFormat as WeekdayFormat$1, buildMonthGrid, daySelectionState, expandRecurringEvents, getViewDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isWithinDateRange, layoutDayEvents, nextDateRange, parseICalendar, toICalendar, useDateRange, useMonthGrid, weekdayFormatToken } from "@super-calendar/core";
 
+//#region src/slots.d.ts
+/**
+ * Per-slot styling overrides. Give a slot a Tailwind/CSS class and/or an inline
+ * style; missing slots keep the built-in look.
+ */
+interface SlotStyleProps<Slot extends string> {
+  /**
+   * Class names per slot (e.g. Tailwind). Supplying a class for a slot drops the
+   * built-in *themed* inline styles for that slot so the class fully controls its
+   * look; the *structural* styles the layout depends on are kept.
+   */
+  classNames?: Partial<Record<Slot, string>>;
+  /** Inline style overrides per slot, merged last (win over defaults and classes). */
+  styles?: Partial<Record<Slot, CSSProperties>>;
+}
+/** A slot's built-in styling, split so classes can replace the look but not the layout. */
+interface SlotDefault {
+  /** Structural styles kept even when a class is supplied. */
+  base?: CSSProperties;
+  /** Themed styles (colour, type, spacing) dropped when a class is supplied. */
+  themed?: CSSProperties;
+}
+/** The props a resolved slot spreads onto an element. */
+interface ResolvedSlot {
+  className: string | undefined;
+  style: CSSProperties | undefined;
+  "data-slot": string;
+}
+//#endregion
 //#region src/theme.d.ts
 /**
  * Theme for the react-dom renderer. Combines the shared color palette from
@@ -26,6 +55,11 @@ declare const darkDomTheme: DomCalendarTheme;
 declare function mergeDomTheme(overrides?: Partial<DomCalendarTheme>, base?: DomCalendarTheme): DomCalendarTheme;
 //#endregion
 //#region src/Agenda.d.ts
+/**
+ * Styleable parts of {@link Agenda}. Pass a class or inline style per slot via the
+ * `classNames` / `styles` props.
+ */
+type AgendaSlot = "dayHeader" | "eventRow" | "event" | "empty";
 /** Props passed to a custom agenda (schedule) event renderer. */
 interface DomAgendaEventArgs<T = unknown> {
   /** The event to render. */
@@ -42,7 +76,7 @@ interface DomAgendaEventArgs<T = unknown> {
 /** A component that renders a single agenda (schedule) event row. */
 type DomAgendaEvent<T = unknown> = ComponentType<DomAgendaEventArgs<T>>;
 /** Props for {@link Agenda}. */
-interface AgendaProps<T = unknown> {
+interface AgendaProps<T = unknown> extends SlotStyleProps<AgendaSlot> {
   /** Events to list. The consumer controls which (and therefore the date range). */
   events: CalendarEvent$1<T>[];
   /** date-fns locale for the day headers and time labels. */
@@ -57,6 +91,12 @@ interface AgendaProps<T = unknown> {
   height?: number | string;
   /** Replace the built-in event row. */
   renderEvent?: DomAgendaEvent<T>;
+  /**
+   * Override the screen-reader label for each event row. Receives the event and a
+   * `{ mode: "schedule", isAllDay, ampm }` context; return the full text to
+   * announce. Defaults to the row's own text content.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
   /** Tap an event row. */
   onPressEvent?: (event: CalendarEvent$1<T>) => void;
   /** Tap a day's header. */
@@ -85,13 +125,21 @@ declare function Agenda<T = unknown>({
   theme: themeOverrides,
   height,
   renderEvent,
+  eventAccessibilityLabel,
   onPressEvent,
   onPressDay,
   className,
-  style
+  style,
+  classNames,
+  styles
 }: AgendaProps<T>): ReactElement;
 //#endregion
 //#region src/MonthView.d.ts
+/**
+ * Styleable parts of {@link MonthView}. Pass a class or inline style per slot via
+ * the `classNames` / `styles` props to restyle just that part.
+ */
+type MonthViewSlot = "title" | "weekdays" | "weekday" | "grid" | "week" | "day" | "dayBadge" | "rangeBand" | "events" | "chipButton" | "chip" | "more";
 /** Props passed to a custom month event chip renderer. */
 interface DomMonthEventArgs<T = unknown> {
   /** The event to render. */
@@ -102,11 +150,13 @@ interface DomMonthEventArgs<T = unknown> {
 /** A component that renders a single month-grid event chip. */
 type DomMonthEvent<T = unknown> = ComponentType<DomMonthEventArgs<T>>;
 /** Props for {@link MonthView}. */
-interface MonthViewProps<T = unknown> extends DateSelectionConstraints$1 {
+interface MonthViewProps<T = unknown> extends DateSelectionConstraints$1, SlotStyleProps<MonthViewSlot> {
   /** Any day within the month to render. */
   date: Date;
   /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
   weekStartsOn?: WeekStartsOn$1;
+  /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat$1;
   /**
    * Events to render as chips in each day cell. Passing this (even `[]`) switches
    * the grid to the calendar layout (date in the corner, chips below); omit it for
@@ -115,6 +165,12 @@ interface MonthViewProps<T = unknown> extends DateSelectionConstraints$1 {
   events?: CalendarEvent$1<T>[];
   /** Custom chip renderer; falls back to the built-in titled chip. */
   renderEvent?: DomMonthEvent<T>;
+  /**
+   * Override the screen-reader label for each event chip. Receives the event and a
+   * `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
+   * announce. Defaults to the event title and day (e.g. "Standup, 15 July").
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
   /** Max chips shown per day before a "+N more" row (default 3). */
   maxVisibleEventCount?: number;
   /** Template for the overflow row; `{moreCount}` is replaced (default "{moreCount} More"). */
@@ -144,6 +200,14 @@ interface MonthViewProps<T = unknown> extends DateSelectionConstraints$1 {
   theme?: Partial<DomCalendarTheme>;
   /** Fired when a selectable day is clicked. */
   onPressDay?: (date: Date) => void;
+  /**
+   * In events mode, enables drag-to-create: press on a day and drag across others
+   * to sketch a span, then release to fire this with the all-day range (`start` at
+   * midnight of the first day, `end` at midnight after the last, exclusive). A plain
+   * click without dragging still fires `onPressDay`, not this. Days being sketched
+   * carry `data-creating` for styling.
+   */
+  onCreateEvent?: (start: Date, end: Date) => void;
   /**
    * When events are shown, also make the day cells keyboard-navigable: a single
    * roving tab stop, arrow keys move the focus, Enter opens the day (`onPressDay`).
@@ -170,9 +234,11 @@ interface MonthViewInternalProps<T = unknown> extends MonthViewProps<T> {
 declare function MonthView<T = unknown>({
   date,
   weekStartsOn,
+  weekdayFormat,
   events,
   eventsByDay: eventsByDayProp,
   renderEvent,
+  eventAccessibilityLabel,
   maxVisibleEventCount,
   moreLabel,
   onPressEvent,
@@ -189,12 +255,20 @@ declare function MonthView<T = unknown>({
   maxDate,
   isDateDisabled,
   onPressDay,
+  onCreateEvent,
   keyboardDayNavigation,
   className,
-  style
+  style,
+  classNames,
+  styles
 }: MonthViewInternalProps<T>): ReactElement;
 //#endregion
 //#region src/TimeGrid.d.ts
+/**
+ * Styleable parts of {@link TimeGrid}. Pass a class or inline style per slot via
+ * the `classNames` / `styles` props.
+ */
+type TimeGridSlot = "header" | "columnHeader" | "columnHeaderWeekday" | "columnHeaderDate" | "allDayLane" | "allDayLabel" | "allDayColumn" | "allDayEvent" | "hourGutter" | "hourLabel" | "dayColumn" | "gridLines" | "businessHours" | "event" | "eventBox" | "nowIndicator" | "createGhost";
 /** Props passed to a custom time-grid event renderer. */
 interface DomRenderEventArgs<T = unknown> {
   /** The event to render. */
@@ -217,7 +291,7 @@ interface DomRenderEventArgs<T = unknown> {
 /** A component that renders a single time-grid event box. */
 type DomRenderEvent<T = unknown> = ComponentType<DomRenderEventArgs<T>>;
 /** Props for {@link TimeGrid}. */
-interface TimeGridProps<T = unknown> {
+interface TimeGridProps<T = unknown> extends SlotStyleProps<TimeGridSlot> {
   /** Anchor date; the visible columns are derived from it and `mode`. */
   date: Date;
   /** Events to lay out on the grid. */
@@ -228,6 +302,8 @@ interface TimeGridProps<T = unknown> {
   numberOfDays?: number;
   /** First day of the week. Sunday = 0 (default) ... Saturday = 6. */
   weekStartsOn?: WeekStartsOn$1;
+  /** Column-header weekday label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat$1;
   /** Initial pixels per hour (default 48). */
   hourHeight?: number;
   /** Initial scroll position, in minutes from midnight (default 8:00). */
@@ -258,6 +334,13 @@ interface TimeGridProps<T = unknown> {
   height?: number | string;
   /** Custom event renderer; falls back to the built-in event box. */
   renderEvent?: DomRenderEvent<T>;
+  /**
+   * Override the screen-reader label for each event. Receives the event and a
+   * `{ mode, isAllDay, ampm }` context; return the full text to announce. Defaults
+   * to the title plus the time range (or "all day"), which the grid otherwise only
+   * conveys visually.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
   /** Replace the hour-axis label. Receives the hour (0-23) and the `ampm` flag. */
   hourComponent?: (hour: number, ampm: boolean) => ReactNode;
   /** Tap an event. */
@@ -297,6 +380,7 @@ declare function TimeGrid<T = unknown>({
   mode,
   numberOfDays,
   weekStartsOn,
+  weekdayFormat,
   hourHeight: initialHourHeight,
   scrollOffsetMinutes,
   zoomable,
@@ -312,6 +396,7 @@ declare function TimeGrid<T = unknown>({
   theme: themeOverrides,
   height,
   renderEvent,
+  eventAccessibilityLabel,
   hourComponent,
   onPressEvent,
   onPressDateHeader,
@@ -320,12 +405,20 @@ declare function TimeGrid<T = unknown>({
   onDragStart,
   onDragEvent,
   className,
-  style
+  style,
+  classNames,
+  styles
 }: TimeGridProps<T>): ReactElement;
 //#endregion
 //#region src/Calendar.d.ts
+/**
+ * Styleable parts across every view {@link Calendar} can render. Only the slots
+ * for the active `mode` apply; the rest are ignored. See {@link MonthViewSlot},
+ * {@link TimeGridSlot}, and {@link AgendaSlot}.
+ */
+type CalendarSlot = MonthViewSlot | TimeGridSlot | AgendaSlot;
 /** Props for {@link Calendar}. */
-interface CalendarProps<T = unknown> extends DateSelectionConstraints$1 {
+interface CalendarProps<T = unknown> extends DateSelectionConstraints$1, SlotStyleProps<CalendarSlot> {
   /**
    * The view to render (default "week"). `month` renders a month grid, `schedule`
    * a day-grouped agenda list, and the others a time grid.
@@ -351,6 +444,12 @@ interface CalendarProps<T = unknown> extends DateSelectionConstraints$1 {
   style?: CSSProperties;
   /** Tap an event (both layouts). */
   onPressEvent?: (event: CalendarEvent$1<T>) => void;
+  /**
+   * Override the screen-reader label for each event. Receives the event and a
+   * `{ mode, isAllDay, ampm }` context; return the full text to announce. Defaults
+   * to each view's built-in label.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
   /** 12-hour AM/PM time labels (default false). */
   ampm?: boolean;
   /** Initial pixels per hour. */
@@ -387,6 +486,8 @@ interface CalendarProps<T = unknown> extends DateSelectionConstraints$1 {
   moreLabel?: string;
   /** Render neighbouring months' days in the leading/trailing cells (default true). */
   showAdjacentMonths?: boolean;
+  /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat$1;
   /** Fill the cell with the range background instead of the pill band. */
   fillCellOnSelection?: boolean;
   /** Selected span. */
@@ -431,6 +532,7 @@ declare function Calendar<T = unknown>({
   className,
   style,
   onPressEvent,
+  eventAccessibilityLabel,
   ampm,
   hourHeight,
   scrollOffsetMinutes,
@@ -449,6 +551,7 @@ declare function Calendar<T = unknown>({
   maxVisibleEventCount,
   moreLabel,
   showAdjacentMonths,
+  weekdayFormat,
   fillCellOnSelection,
   selectedRange,
   selectedDates,
@@ -459,12 +562,20 @@ declare function Calendar<T = unknown>({
   onPressDay,
   onPressMore,
   renderMonthEvent,
-  renderScheduleEvent
+  renderScheduleEvent,
+  classNames,
+  styles
 }: CalendarProps<T>): ReactElement;
 //#endregion
 //#region src/MonthList.d.ts
+/**
+ * Styleable parts of {@link MonthList}. The shared weekday header uses `weekdays`
+ * / `weekday`; every other slot is forwarded to each month's {@link MonthView}
+ * (e.g. `title`, `day`, `chip`). See {@link MonthViewSlot}.
+ */
+type MonthListSlot = MonthViewSlot;
 /** Props for {@link MonthList}. */
-interface MonthListProps<T = unknown> extends DateSelectionConstraints$1 {
+interface MonthListProps<T = unknown> extends DateSelectionConstraints$1, SlotStyleProps<MonthListSlot> {
   /** Anchor month; the list spans `pastMonths` before to `futureMonths` after. */
   date: Date;
   /** Months to render before the anchor (default 1). */
@@ -473,10 +584,18 @@ interface MonthListProps<T = unknown> extends DateSelectionConstraints$1 {
   futureMonths?: number;
   /** First day of the week. Sunday = 0 (default) ... Saturday = 6. */
   weekStartsOn?: WeekStartsOn$1;
+  /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat$1;
   /** Events to render as chips in each day cell (calendar layout when provided). */
   events?: CalendarEvent$1<T>[];
   /** Custom chip renderer; falls back to the built-in titled chip. */
   renderEvent?: DomMonthEvent<T>;
+  /**
+   * Override the screen-reader label for each event chip. Receives the event and a
+   * `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
+   * announce. Defaults to the event title and day (e.g. "Standup, 15 July").
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
   /** Max chips shown per day before a "+N more" row (default 3). */
   maxVisibleEventCount?: number;
   /** Template for the overflow row; `{moreCount}` is replaced. */
@@ -519,9 +638,11 @@ declare function MonthList<T = unknown>({
   date,
   pastMonths,
   futureMonths,
+  weekdayFormat,
   weekStartsOn,
   events,
   renderEvent,
+  eventAccessibilityLabel,
   maxVisibleEventCount,
   moreLabel,
   onPressEvent,
@@ -538,7 +659,201 @@ declare function MonthList<T = unknown>({
   keyboardDayNavigation,
   onPressDay,
   className,
-  style
+  style,
+  classNames,
+  styles
 }: MonthListProps<T>): ReactElement;
 //#endregion
-export { Agenda, type AgendaProps, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type DateRange, type DateSelectionConstraints, type DaySelectionState, type DomAgendaEvent, type DomAgendaEventArgs, type DomCalendarTheme, type DomMonthEvent, type DomMonthEventArgs, type DomRenderEvent, type DomRenderEventArgs, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthView, type MonthViewProps, type PositionedEvent, TimeGrid, type TimeGridMode, type TimeGridProps, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, buildMonthGrid, darkDomTheme, daySelectionState, defaultDomTheme, getViewDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isWithinDateRange, layoutDayEvents, mergeDomTheme, nextDateRange, useDateRange, useMonthGrid };
+//#region src/DateRangePicker.d.ts
+/** Styleable chrome of the pickers (the calendar's own slots forward through too). */
+type DatePickerSlot = "trigger" | "popover" | "footer" | "clear";
+interface PickerBaseProps extends DateSelectionConstraints$1, SlotStyleProps<DatePickerSlot | MonthListSlot> {
+  /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
+  weekStartsOn?: WeekStartsOn$1;
+  /** Height of the popover calendar viewport in px (default 320). */
+  height?: number;
+  /** Placeholder shown on the trigger when nothing is selected. */
+  placeholder?: string;
+  /** Disable the whole field. */
+  disabled?: boolean;
+  /** Theme overrides for the calendar. */
+  theme?: Partial<DomCalendarTheme>;
+  /** Class applied to the root element. */
+  className?: string;
+  /** Inline styles applied to the root element. */
+  style?: CSSProperties;
+}
+/** Props for {@link DatePicker}. */
+interface DatePickerProps extends PickerBaseProps {
+  /** The selected day, or `null`. */
+  value: Date | null;
+  /** Called with the day the user picks. */
+  onChange: (date: Date) => void;
+  /** Format the trigger label. Default: `d MMM yyyy`. */
+  formatLabel?: (date: Date) => string;
+}
+/**
+ * A single-date input with a popover calendar. Controlled via `value` / `onChange`.
+ * Composed from {@link MonthList}; forward calendar slots (e.g. `dayBadge`) through
+ * `classNames` to restyle the popover.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState<Date | null>(null);
+ * <DatePicker value={value} onChange={setValue} />
+ * ```
+ */
+declare function DatePicker({
+  value,
+  onChange,
+  formatLabel,
+  weekStartsOn,
+  height,
+  placeholder,
+  disabled,
+  theme: themeOverrides,
+  className,
+  style,
+  classNames,
+  styles,
+  minDate,
+  maxDate,
+  isDateDisabled
+}: DatePickerProps): ReactElement;
+/** Props for {@link DateRangePicker}. */
+interface DateRangePickerProps extends PickerBaseProps {
+  /** The selected range, or `null`. `end` is `null` while only the start is picked. */
+  value: DateRange$1 | null;
+  /** Called with the next range on each pick (start-only, then complete). */
+  onChange: (range: DateRange$1 | null) => void;
+  /** Format the trigger label. Default: `d MMM – d MMM yyyy`. */
+  formatLabel?: (range: DateRange$1) => string;
+}
+/**
+ * A date-range input with a popover calendar. Controlled via `value` / `onChange`;
+ * each pick advances the range through {@link nextDateRange} (start, then end), and
+ * the popover closes once both ends are set.
+ *
+ * @example
+ * ```tsx
+ * const [range, setRange] = useState<DateRange | null>(null);
+ * <DateRangePicker value={range} onChange={setRange} />
+ * ```
+ */
+declare function DateRangePicker({
+  value,
+  onChange,
+  formatLabel,
+  weekStartsOn,
+  height,
+  placeholder,
+  disabled,
+  theme: themeOverrides,
+  className,
+  style,
+  classNames,
+  styles,
+  minDate,
+  maxDate,
+  isDateDisabled
+}: DateRangePickerProps): ReactElement;
+//#endregion
+//#region src/ResourceTimeline.d.ts
+/**
+ * Styleable parts of {@link ResourceTimeline}. Pass a class or inline style per
+ * slot via the `classNames` / `styles` props.
+ */
+type ResourceTimelineSlot = "header" | "corner" | "timeAxis" | "hourTick" | "resourceLabel" | "row" | "track" | "gridLines" | "event" | "eventBox";
+/** A schedulable lane (room, person, machine) that events are grouped under. */
+interface Resource {
+  /** Stable id events reference via their `resourceId`. */
+  id: string;
+  /** Row label; falls back to the id. */
+  title?: string;
+}
+/** Props passed to a custom resource-timeline event renderer. */
+interface ResourceEventArgs<T = unknown> {
+  event: CalendarEvent$1<T>;
+  /** Pixel width of the event bar. */
+  width: number;
+  onPress: () => void;
+}
+/** Props for {@link ResourceTimeline}. */
+interface ResourceTimelineProps<T = unknown> extends SlotStyleProps<ResourceTimelineSlot> {
+  /** The day to lay out along the horizontal axis. */
+  date: Date;
+  /** The rows, top to bottom. */
+  resources: Resource[];
+  /** Events; each is placed in the row named by `resourceId(event)`. */
+  events: CalendarEvent$1<T>[];
+  /** Read an event's resource id. Default: `event.resourceId`. */
+  resourceId?: (event: CalendarEvent$1<T>) => string | undefined;
+  /** First hour shown (default 0). */
+  startHour?: number;
+  /** Last hour shown, exclusive (default 24). */
+  endHour?: number;
+  /** Pixels per hour along the axis (default 80). */
+  hourWidth?: number;
+  /** Height of each resource row in px (default 56). */
+  rowHeight?: number;
+  /** Width of the left resource-label column in px (default 140). */
+  labelWidth?: number;
+  /** 12-hour AM/PM axis labels (default false). */
+  ampm?: boolean;
+  /** Theme overrides; falls back to the default light theme. */
+  theme?: Partial<DomCalendarTheme>;
+  /** Custom event renderer; falls back to the built-in bar. */
+  renderEvent?: ComponentType<ResourceEventArgs<T>>;
+  /** Tap an event. */
+  onPressEvent?: (event: CalendarEvent$1<T>) => void;
+  /**
+   * Enables drag-to-move and edge-resize along the time axis; called with the
+   * proposed new start/end. Return `false` to reject the drop (it snaps back).
+   */
+  onDragEvent?: (event: CalendarEvent$1<T>, start: Date, end: Date) => void | boolean;
+  /** Snap dragged events to this many minutes (default 15). */
+  dragStepMinutes?: number;
+  /** Class applied to the root element. */
+  className?: string;
+  /** Inline styles applied to the root element. */
+  style?: CSSProperties;
+}
+/**
+ * A horizontal resource timeline: rows are resources (rooms, people, machines)
+ * and the x-axis is one day's hours. Events sit in their resource's row, and
+ * overlapping events in the same row stack into sub-lanes (via the shared
+ * `layoutDayEvents`). Pass `onDragEvent` to enable drag-to-move and edge-resize
+ * along the axis.
+ *
+ * @example
+ * ```tsx
+ * <ResourceTimeline
+ *   date={new Date()}
+ *   resources={[{ id: "a", title: "Room A" }, { id: "b", title: "Room B" }]}
+ *   events={events} // each event carries a `resourceId`
+ * />
+ * ```
+ */
+declare function ResourceTimeline<T = unknown>({
+  date,
+  resources,
+  events,
+  resourceId,
+  startHour,
+  endHour,
+  hourWidth,
+  rowHeight,
+  labelWidth,
+  ampm,
+  theme: themeOverrides,
+  renderEvent,
+  onPressEvent,
+  onDragEvent,
+  dragStepMinutes,
+  className,
+  style,
+  classNames,
+  styles
+}: ResourceTimelineProps<T>): ReactElement;
+//#endregion
+export { Agenda, type AgendaProps, type AgendaSlot, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarSlot, DatePicker, type DatePickerProps, type DatePickerSlot, type DateRange, DateRangePicker, type DateRangePickerProps, type DateSelectionConstraints, type DaySelectionState, type DomAgendaEvent, type DomAgendaEventArgs, type DomCalendarTheme, type DomMonthEvent, type DomMonthEventArgs, type DomRenderEvent, type DomRenderEventArgs, type EventAccessibilityLabelContext, type EventAccessibilityLabeler, type ICalEvent, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, type MonthListSlot, MonthView, type MonthViewProps, type MonthViewSlot, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type ResolvedSlot, type Resource, type ResourceEventArgs, ResourceTimeline, type ResourceTimelineProps, type ResourceTimelineSlot, type SlotDefault, type SlotStyleProps, TimeGrid, type TimeGridMode, type TimeGridProps, type TimeGridSlot, type ToICalendarOptions, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, type WeekdayFormat, buildMonthGrid, darkDomTheme, daySelectionState, defaultDomTheme, expandRecurringEvents, getViewDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isWithinDateRange, layoutDayEvents, mergeDomTheme, nextDateRange, parseICalendar, toICalendar, useDateRange, useMonthGrid, weekdayFormatToken };