@super-calendar/dom 2.1.4 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,7 +1,36 @@
1
1
  import { Locale } from "date-fns";
2
2
  import { CSSProperties, ComponentType, ReactElement, ReactNode } from "react";
3
- 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";
3
+ 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";
4
4
 
5
+ //#region src/slots.d.ts
6
+ /**
7
+ * Per-slot styling overrides. Give a slot a Tailwind/CSS class and/or an inline
8
+ * style; missing slots keep the built-in look.
9
+ */
10
+ interface SlotStyleProps<Slot extends string> {
11
+ /**
12
+ * Class names per slot (e.g. Tailwind). Supplying a class for a slot drops the
13
+ * built-in *themed* inline styles for that slot so the class fully controls its
14
+ * look; the *structural* styles the layout depends on are kept.
15
+ */
16
+ classNames?: Partial<Record<Slot, string>>;
17
+ /** Inline style overrides per slot, merged last (win over defaults and classes). */
18
+ styles?: Partial<Record<Slot, CSSProperties>>;
19
+ }
20
+ /** A slot's built-in styling, split so classes can replace the look but not the layout. */
21
+ interface SlotDefault {
22
+ /** Structural styles kept even when a class is supplied. */
23
+ base?: CSSProperties;
24
+ /** Themed styles (colour, type, spacing) dropped when a class is supplied. */
25
+ themed?: CSSProperties;
26
+ }
27
+ /** The props a resolved slot spreads onto an element. */
28
+ interface ResolvedSlot {
29
+ className: string | undefined;
30
+ style: CSSProperties | undefined;
31
+ "data-slot": string;
32
+ }
33
+ //#endregion
5
34
  //#region src/theme.d.ts
6
35
  /**
7
36
  * Theme for the react-dom renderer. Combines the shared color palette from
@@ -26,6 +55,11 @@ declare const darkDomTheme: DomCalendarTheme;
26
55
  declare function mergeDomTheme(overrides?: Partial<DomCalendarTheme>, base?: DomCalendarTheme): DomCalendarTheme;
27
56
  //#endregion
28
57
  //#region src/Agenda.d.ts
58
+ /**
59
+ * Styleable parts of {@link Agenda}. Pass a class or inline style per slot via the
60
+ * `classNames` / `styles` props.
61
+ */
62
+ type AgendaSlot = "dayHeader" | "eventRow" | "event" | "empty";
29
63
  /** Props passed to a custom agenda (schedule) event renderer. */
30
64
  interface DomAgendaEventArgs<T = unknown> {
31
65
  /** The event to render. */
@@ -42,7 +76,7 @@ interface DomAgendaEventArgs<T = unknown> {
42
76
  /** A component that renders a single agenda (schedule) event row. */
43
77
  type DomAgendaEvent<T = unknown> = ComponentType<DomAgendaEventArgs<T>>;
44
78
  /** Props for {@link Agenda}. */
45
- interface AgendaProps<T = unknown> {
79
+ interface AgendaProps<T = unknown> extends SlotStyleProps<AgendaSlot> {
46
80
  /** Events to list. The consumer controls which (and therefore the date range). */
47
81
  events: CalendarEvent$1<T>[];
48
82
  /** date-fns locale for the day headers and time labels. */
@@ -57,6 +91,12 @@ interface AgendaProps<T = unknown> {
57
91
  height?: number | string;
58
92
  /** Replace the built-in event row. */
59
93
  renderEvent?: DomAgendaEvent<T>;
94
+ /**
95
+ * Override the screen-reader label for each event row. Receives the event and a
96
+ * `{ mode: "schedule", isAllDay, ampm }` context; return the full text to
97
+ * announce. Defaults to the row's own text content.
98
+ */
99
+ eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
60
100
  /** Tap an event row. */
61
101
  onPressEvent?: (event: CalendarEvent$1<T>) => void;
62
102
  /** Tap a day's header. */
@@ -85,13 +125,21 @@ declare function Agenda<T = unknown>({
85
125
  theme: themeOverrides,
86
126
  height,
87
127
  renderEvent,
128
+ eventAccessibilityLabel,
88
129
  onPressEvent,
89
130
  onPressDay,
90
131
  className,
91
- style
132
+ style,
133
+ classNames,
134
+ styles
92
135
  }: AgendaProps<T>): ReactElement;
93
136
  //#endregion
94
137
  //#region src/MonthView.d.ts
138
+ /**
139
+ * Styleable parts of {@link MonthView}. Pass a class or inline style per slot via
140
+ * the `classNames` / `styles` props to restyle just that part.
141
+ */
142
+ type MonthViewSlot = "title" | "weekdays" | "weekday" | "grid" | "week" | "day" | "dayBadge" | "rangeBand" | "events" | "chipButton" | "chip" | "more";
95
143
  /** Props passed to a custom month event chip renderer. */
96
144
  interface DomMonthEventArgs<T = unknown> {
97
145
  /** The event to render. */
@@ -102,11 +150,13 @@ interface DomMonthEventArgs<T = unknown> {
102
150
  /** A component that renders a single month-grid event chip. */
103
151
  type DomMonthEvent<T = unknown> = ComponentType<DomMonthEventArgs<T>>;
104
152
  /** Props for {@link MonthView}. */
105
- interface MonthViewProps<T = unknown> extends DateSelectionConstraints$1 {
153
+ interface MonthViewProps<T = unknown> extends DateSelectionConstraints$1, SlotStyleProps<MonthViewSlot> {
106
154
  /** Any day within the month to render. */
107
155
  date: Date;
108
156
  /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
109
157
  weekStartsOn?: WeekStartsOn$1;
158
+ /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
159
+ weekdayFormat?: WeekdayFormat$1;
110
160
  /**
111
161
  * Events to render as chips in each day cell. Passing this (even `[]`) switches
112
162
  * 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 {
115
165
  events?: CalendarEvent$1<T>[];
116
166
  /** Custom chip renderer; falls back to the built-in titled chip. */
117
167
  renderEvent?: DomMonthEvent<T>;
168
+ /**
169
+ * Override the screen-reader label for each event chip. Receives the event and a
170
+ * `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
171
+ * announce. Defaults to the event title and day (e.g. "Standup, 15 July").
172
+ */
173
+ eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
118
174
  /** Max chips shown per day before a "+N more" row (default 3). */
119
175
  maxVisibleEventCount?: number;
120
176
  /** Template for the overflow row; `{moreCount}` is replaced (default "{moreCount} More"). */
@@ -144,6 +200,14 @@ interface MonthViewProps<T = unknown> extends DateSelectionConstraints$1 {
144
200
  theme?: Partial<DomCalendarTheme>;
145
201
  /** Fired when a selectable day is clicked. */
146
202
  onPressDay?: (date: Date) => void;
203
+ /**
204
+ * In events mode, enables drag-to-create: press on a day and drag across others
205
+ * to sketch a span, then release to fire this with the all-day range (`start` at
206
+ * midnight of the first day, `end` at midnight after the last, exclusive). A plain
207
+ * click without dragging still fires `onPressDay`, not this. Days being sketched
208
+ * carry `data-creating` for styling.
209
+ */
210
+ onCreateEvent?: (start: Date, end: Date) => void;
147
211
  /**
148
212
  * When events are shown, also make the day cells keyboard-navigable: a single
149
213
  * roving tab stop, arrow keys move the focus, Enter opens the day (`onPressDay`).
@@ -170,9 +234,11 @@ interface MonthViewInternalProps<T = unknown> extends MonthViewProps<T> {
170
234
  declare function MonthView<T = unknown>({
171
235
  date,
172
236
  weekStartsOn,
237
+ weekdayFormat,
173
238
  events,
174
239
  eventsByDay: eventsByDayProp,
175
240
  renderEvent,
241
+ eventAccessibilityLabel,
176
242
  maxVisibleEventCount,
177
243
  moreLabel,
178
244
  onPressEvent,
@@ -189,12 +255,20 @@ declare function MonthView<T = unknown>({
189
255
  maxDate,
190
256
  isDateDisabled,
191
257
  onPressDay,
258
+ onCreateEvent,
192
259
  keyboardDayNavigation,
193
260
  className,
194
- style
261
+ style,
262
+ classNames,
263
+ styles
195
264
  }: MonthViewInternalProps<T>): ReactElement;
196
265
  //#endregion
197
266
  //#region src/TimeGrid.d.ts
267
+ /**
268
+ * Styleable parts of {@link TimeGrid}. Pass a class or inline style per slot via
269
+ * the `classNames` / `styles` props.
270
+ */
271
+ type TimeGridSlot = "header" | "columnHeader" | "columnHeaderWeekday" | "columnHeaderDate" | "allDayLane" | "allDayLabel" | "allDayColumn" | "allDayEvent" | "hourGutter" | "hourLabel" | "dayColumn" | "gridLines" | "businessHours" | "event" | "eventBox" | "nowIndicator" | "createGhost";
198
272
  /** Props passed to a custom time-grid event renderer. */
199
273
  interface DomRenderEventArgs<T = unknown> {
200
274
  /** The event to render. */
@@ -217,7 +291,7 @@ interface DomRenderEventArgs<T = unknown> {
217
291
  /** A component that renders a single time-grid event box. */
218
292
  type DomRenderEvent<T = unknown> = ComponentType<DomRenderEventArgs<T>>;
219
293
  /** Props for {@link TimeGrid}. */
220
- interface TimeGridProps<T = unknown> {
294
+ interface TimeGridProps<T = unknown> extends SlotStyleProps<TimeGridSlot> {
221
295
  /** Anchor date; the visible columns are derived from it and `mode`. */
222
296
  date: Date;
223
297
  /** Events to lay out on the grid. */
@@ -228,6 +302,8 @@ interface TimeGridProps<T = unknown> {
228
302
  numberOfDays?: number;
229
303
  /** First day of the week. Sunday = 0 (default) ... Saturday = 6. */
230
304
  weekStartsOn?: WeekStartsOn$1;
305
+ /** Column-header weekday label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
306
+ weekdayFormat?: WeekdayFormat$1;
231
307
  /** Initial pixels per hour (default 48). */
232
308
  hourHeight?: number;
233
309
  /** Initial scroll position, in minutes from midnight (default 8:00). */
@@ -258,6 +334,13 @@ interface TimeGridProps<T = unknown> {
258
334
  height?: number | string;
259
335
  /** Custom event renderer; falls back to the built-in event box. */
260
336
  renderEvent?: DomRenderEvent<T>;
337
+ /**
338
+ * Override the screen-reader label for each event. Receives the event and a
339
+ * `{ mode, isAllDay, ampm }` context; return the full text to announce. Defaults
340
+ * to the title plus the time range (or "all day"), which the grid otherwise only
341
+ * conveys visually.
342
+ */
343
+ eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
261
344
  /** Replace the hour-axis label. Receives the hour (0-23) and the `ampm` flag. */
262
345
  hourComponent?: (hour: number, ampm: boolean) => ReactNode;
263
346
  /** Tap an event. */
@@ -297,6 +380,7 @@ declare function TimeGrid<T = unknown>({
297
380
  mode,
298
381
  numberOfDays,
299
382
  weekStartsOn,
383
+ weekdayFormat,
300
384
  hourHeight: initialHourHeight,
301
385
  scrollOffsetMinutes,
302
386
  zoomable,
@@ -312,6 +396,7 @@ declare function TimeGrid<T = unknown>({
312
396
  theme: themeOverrides,
313
397
  height,
314
398
  renderEvent,
399
+ eventAccessibilityLabel,
315
400
  hourComponent,
316
401
  onPressEvent,
317
402
  onPressDateHeader,
@@ -320,12 +405,20 @@ declare function TimeGrid<T = unknown>({
320
405
  onDragStart,
321
406
  onDragEvent,
322
407
  className,
323
- style
408
+ style,
409
+ classNames,
410
+ styles
324
411
  }: TimeGridProps<T>): ReactElement;
325
412
  //#endregion
326
413
  //#region src/Calendar.d.ts
414
+ /**
415
+ * Styleable parts across every view {@link Calendar} can render. Only the slots
416
+ * for the active `mode` apply; the rest are ignored. See {@link MonthViewSlot},
417
+ * {@link TimeGridSlot}, and {@link AgendaSlot}.
418
+ */
419
+ type CalendarSlot = MonthViewSlot | TimeGridSlot | AgendaSlot;
327
420
  /** Props for {@link Calendar}. */
328
- interface CalendarProps<T = unknown> extends DateSelectionConstraints$1 {
421
+ interface CalendarProps<T = unknown> extends DateSelectionConstraints$1, SlotStyleProps<CalendarSlot> {
329
422
  /**
330
423
  * The view to render (default "week"). `month` renders a month grid, `schedule`
331
424
  * a day-grouped agenda list, and the others a time grid.
@@ -351,6 +444,12 @@ interface CalendarProps<T = unknown> extends DateSelectionConstraints$1 {
351
444
  style?: CSSProperties;
352
445
  /** Tap an event (both layouts). */
353
446
  onPressEvent?: (event: CalendarEvent$1<T>) => void;
447
+ /**
448
+ * Override the screen-reader label for each event. Receives the event and a
449
+ * `{ mode, isAllDay, ampm }` context; return the full text to announce. Defaults
450
+ * to each view's built-in label.
451
+ */
452
+ eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
354
453
  /** 12-hour AM/PM time labels (default false). */
355
454
  ampm?: boolean;
356
455
  /** Initial pixels per hour. */
@@ -387,6 +486,8 @@ interface CalendarProps<T = unknown> extends DateSelectionConstraints$1 {
387
486
  moreLabel?: string;
388
487
  /** Render neighbouring months' days in the leading/trailing cells (default true). */
389
488
  showAdjacentMonths?: boolean;
489
+ /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
490
+ weekdayFormat?: WeekdayFormat$1;
390
491
  /** Fill the cell with the range background instead of the pill band. */
391
492
  fillCellOnSelection?: boolean;
392
493
  /** Selected span. */
@@ -431,6 +532,7 @@ declare function Calendar<T = unknown>({
431
532
  className,
432
533
  style,
433
534
  onPressEvent,
535
+ eventAccessibilityLabel,
434
536
  ampm,
435
537
  hourHeight,
436
538
  scrollOffsetMinutes,
@@ -449,6 +551,7 @@ declare function Calendar<T = unknown>({
449
551
  maxVisibleEventCount,
450
552
  moreLabel,
451
553
  showAdjacentMonths,
554
+ weekdayFormat,
452
555
  fillCellOnSelection,
453
556
  selectedRange,
454
557
  selectedDates,
@@ -459,12 +562,20 @@ declare function Calendar<T = unknown>({
459
562
  onPressDay,
460
563
  onPressMore,
461
564
  renderMonthEvent,
462
- renderScheduleEvent
565
+ renderScheduleEvent,
566
+ classNames,
567
+ styles
463
568
  }: CalendarProps<T>): ReactElement;
464
569
  //#endregion
465
570
  //#region src/MonthList.d.ts
571
+ /**
572
+ * Styleable parts of {@link MonthList}. The shared weekday header uses `weekdays`
573
+ * / `weekday`; every other slot is forwarded to each month's {@link MonthView}
574
+ * (e.g. `title`, `day`, `chip`). See {@link MonthViewSlot}.
575
+ */
576
+ type MonthListSlot = MonthViewSlot;
466
577
  /** Props for {@link MonthList}. */
467
- interface MonthListProps<T = unknown> extends DateSelectionConstraints$1 {
578
+ interface MonthListProps<T = unknown> extends DateSelectionConstraints$1, SlotStyleProps<MonthListSlot> {
468
579
  /** Anchor month; the list spans `pastMonths` before to `futureMonths` after. */
469
580
  date: Date;
470
581
  /** Months to render before the anchor (default 1). */
@@ -473,10 +584,18 @@ interface MonthListProps<T = unknown> extends DateSelectionConstraints$1 {
473
584
  futureMonths?: number;
474
585
  /** First day of the week. Sunday = 0 (default) ... Saturday = 6. */
475
586
  weekStartsOn?: WeekStartsOn$1;
587
+ /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
588
+ weekdayFormat?: WeekdayFormat$1;
476
589
  /** Events to render as chips in each day cell (calendar layout when provided). */
477
590
  events?: CalendarEvent$1<T>[];
478
591
  /** Custom chip renderer; falls back to the built-in titled chip. */
479
592
  renderEvent?: DomMonthEvent<T>;
593
+ /**
594
+ * Override the screen-reader label for each event chip. Receives the event and a
595
+ * `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
596
+ * announce. Defaults to the event title and day (e.g. "Standup, 15 July").
597
+ */
598
+ eventAccessibilityLabel?: EventAccessibilityLabeler$1<T>;
480
599
  /** Max chips shown per day before a "+N more" row (default 3). */
481
600
  maxVisibleEventCount?: number;
482
601
  /** Template for the overflow row; `{moreCount}` is replaced. */
@@ -519,9 +638,11 @@ declare function MonthList<T = unknown>({
519
638
  date,
520
639
  pastMonths,
521
640
  futureMonths,
641
+ weekdayFormat,
522
642
  weekStartsOn,
523
643
  events,
524
644
  renderEvent,
645
+ eventAccessibilityLabel,
525
646
  maxVisibleEventCount,
526
647
  moreLabel,
527
648
  onPressEvent,
@@ -538,7 +659,201 @@ declare function MonthList<T = unknown>({
538
659
  keyboardDayNavigation,
539
660
  onPressDay,
540
661
  className,
541
- style
662
+ style,
663
+ classNames,
664
+ styles
542
665
  }: MonthListProps<T>): ReactElement;
543
666
  //#endregion
544
- 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 };
667
+ //#region src/DateRangePicker.d.ts
668
+ /** Styleable chrome of the pickers (the calendar's own slots forward through too). */
669
+ type DatePickerSlot = "trigger" | "popover" | "footer" | "clear";
670
+ interface PickerBaseProps extends DateSelectionConstraints$1, SlotStyleProps<DatePickerSlot | MonthListSlot> {
671
+ /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
672
+ weekStartsOn?: WeekStartsOn$1;
673
+ /** Height of the popover calendar viewport in px (default 320). */
674
+ height?: number;
675
+ /** Placeholder shown on the trigger when nothing is selected. */
676
+ placeholder?: string;
677
+ /** Disable the whole field. */
678
+ disabled?: boolean;
679
+ /** Theme overrides for the calendar. */
680
+ theme?: Partial<DomCalendarTheme>;
681
+ /** Class applied to the root element. */
682
+ className?: string;
683
+ /** Inline styles applied to the root element. */
684
+ style?: CSSProperties;
685
+ }
686
+ /** Props for {@link DatePicker}. */
687
+ interface DatePickerProps extends PickerBaseProps {
688
+ /** The selected day, or `null`. */
689
+ value: Date | null;
690
+ /** Called with the day the user picks. */
691
+ onChange: (date: Date) => void;
692
+ /** Format the trigger label. Default: `d MMM yyyy`. */
693
+ formatLabel?: (date: Date) => string;
694
+ }
695
+ /**
696
+ * A single-date input with a popover calendar. Controlled via `value` / `onChange`.
697
+ * Composed from {@link MonthList}; forward calendar slots (e.g. `dayBadge`) through
698
+ * `classNames` to restyle the popover.
699
+ *
700
+ * @example
701
+ * ```tsx
702
+ * const [value, setValue] = useState<Date | null>(null);
703
+ * <DatePicker value={value} onChange={setValue} />
704
+ * ```
705
+ */
706
+ declare function DatePicker({
707
+ value,
708
+ onChange,
709
+ formatLabel,
710
+ weekStartsOn,
711
+ height,
712
+ placeholder,
713
+ disabled,
714
+ theme: themeOverrides,
715
+ className,
716
+ style,
717
+ classNames,
718
+ styles,
719
+ minDate,
720
+ maxDate,
721
+ isDateDisabled
722
+ }: DatePickerProps): ReactElement;
723
+ /** Props for {@link DateRangePicker}. */
724
+ interface DateRangePickerProps extends PickerBaseProps {
725
+ /** The selected range, or `null`. `end` is `null` while only the start is picked. */
726
+ value: DateRange$1 | null;
727
+ /** Called with the next range on each pick (start-only, then complete). */
728
+ onChange: (range: DateRange$1 | null) => void;
729
+ /** Format the trigger label. Default: `d MMM – d MMM yyyy`. */
730
+ formatLabel?: (range: DateRange$1) => string;
731
+ }
732
+ /**
733
+ * A date-range input with a popover calendar. Controlled via `value` / `onChange`;
734
+ * each pick advances the range through {@link nextDateRange} (start, then end), and
735
+ * the popover closes once both ends are set.
736
+ *
737
+ * @example
738
+ * ```tsx
739
+ * const [range, setRange] = useState<DateRange | null>(null);
740
+ * <DateRangePicker value={range} onChange={setRange} />
741
+ * ```
742
+ */
743
+ declare function DateRangePicker({
744
+ value,
745
+ onChange,
746
+ formatLabel,
747
+ weekStartsOn,
748
+ height,
749
+ placeholder,
750
+ disabled,
751
+ theme: themeOverrides,
752
+ className,
753
+ style,
754
+ classNames,
755
+ styles,
756
+ minDate,
757
+ maxDate,
758
+ isDateDisabled
759
+ }: DateRangePickerProps): ReactElement;
760
+ //#endregion
761
+ //#region src/ResourceTimeline.d.ts
762
+ /**
763
+ * Styleable parts of {@link ResourceTimeline}. Pass a class or inline style per
764
+ * slot via the `classNames` / `styles` props.
765
+ */
766
+ type ResourceTimelineSlot = "header" | "corner" | "timeAxis" | "hourTick" | "resourceLabel" | "row" | "track" | "gridLines" | "event" | "eventBox";
767
+ /** A schedulable lane (room, person, machine) that events are grouped under. */
768
+ interface Resource {
769
+ /** Stable id events reference via their `resourceId`. */
770
+ id: string;
771
+ /** Row label; falls back to the id. */
772
+ title?: string;
773
+ }
774
+ /** Props passed to a custom resource-timeline event renderer. */
775
+ interface ResourceEventArgs<T = unknown> {
776
+ event: CalendarEvent$1<T>;
777
+ /** Pixel width of the event bar. */
778
+ width: number;
779
+ onPress: () => void;
780
+ }
781
+ /** Props for {@link ResourceTimeline}. */
782
+ interface ResourceTimelineProps<T = unknown> extends SlotStyleProps<ResourceTimelineSlot> {
783
+ /** The day to lay out along the horizontal axis. */
784
+ date: Date;
785
+ /** The rows, top to bottom. */
786
+ resources: Resource[];
787
+ /** Events; each is placed in the row named by `resourceId(event)`. */
788
+ events: CalendarEvent$1<T>[];
789
+ /** Read an event's resource id. Default: `event.resourceId`. */
790
+ resourceId?: (event: CalendarEvent$1<T>) => string | undefined;
791
+ /** First hour shown (default 0). */
792
+ startHour?: number;
793
+ /** Last hour shown, exclusive (default 24). */
794
+ endHour?: number;
795
+ /** Pixels per hour along the axis (default 80). */
796
+ hourWidth?: number;
797
+ /** Height of each resource row in px (default 56). */
798
+ rowHeight?: number;
799
+ /** Width of the left resource-label column in px (default 140). */
800
+ labelWidth?: number;
801
+ /** 12-hour AM/PM axis labels (default false). */
802
+ ampm?: boolean;
803
+ /** Theme overrides; falls back to the default light theme. */
804
+ theme?: Partial<DomCalendarTheme>;
805
+ /** Custom event renderer; falls back to the built-in bar. */
806
+ renderEvent?: ComponentType<ResourceEventArgs<T>>;
807
+ /** Tap an event. */
808
+ onPressEvent?: (event: CalendarEvent$1<T>) => void;
809
+ /**
810
+ * Enables drag-to-move and edge-resize along the time axis; called with the
811
+ * proposed new start/end. Return `false` to reject the drop (it snaps back).
812
+ */
813
+ onDragEvent?: (event: CalendarEvent$1<T>, start: Date, end: Date) => void | boolean;
814
+ /** Snap dragged events to this many minutes (default 15). */
815
+ dragStepMinutes?: number;
816
+ /** Class applied to the root element. */
817
+ className?: string;
818
+ /** Inline styles applied to the root element. */
819
+ style?: CSSProperties;
820
+ }
821
+ /**
822
+ * A horizontal resource timeline: rows are resources (rooms, people, machines)
823
+ * and the x-axis is one day's hours. Events sit in their resource's row, and
824
+ * overlapping events in the same row stack into sub-lanes (via the shared
825
+ * `layoutDayEvents`). Pass `onDragEvent` to enable drag-to-move and edge-resize
826
+ * along the axis.
827
+ *
828
+ * @example
829
+ * ```tsx
830
+ * <ResourceTimeline
831
+ * date={new Date()}
832
+ * resources={[{ id: "a", title: "Room A" }, { id: "b", title: "Room B" }]}
833
+ * events={events} // each event carries a `resourceId`
834
+ * />
835
+ * ```
836
+ */
837
+ declare function ResourceTimeline<T = unknown>({
838
+ date,
839
+ resources,
840
+ events,
841
+ resourceId,
842
+ startHour,
843
+ endHour,
844
+ hourWidth,
845
+ rowHeight,
846
+ labelWidth,
847
+ ampm,
848
+ theme: themeOverrides,
849
+ renderEvent,
850
+ onPressEvent,
851
+ onDragEvent,
852
+ dragStepMinutes,
853
+ className,
854
+ style,
855
+ classNames,
856
+ styles
857
+ }: ResourceTimelineProps<T>): ReactElement;
858
+ //#endregion
859
+ 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 };