@fullcalendar/mui 7.0.0-beta.5

package/esm/breezy/EventCalendar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CalendarOptions } from '@fullcalendar/core';
+
+interface EventCalendarProps extends Omit<CalendarOptions, 'class'> {
+    availableViews?: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+}
+declare function EventCalendar({ availableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins, ...restOptions }: EventCalendarProps): React.JSX.Element;
+
+export { EventCalendarProps, EventCalendar as default };

package/esm/breezy/EventCalendar.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useCalendarController } from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+import interactionPlugin from '@fullcalendar/interaction';
+import multiMonthPlugin from '@fullcalendar/multimonth';
+import EventCalendarToolbar from './EventCalendarToolbar.js';
+import EventCalendarViews from './EventCalendarViews.js';
+import EventCalendarContainer from './EventCalendarContainer.js';
+import '@mui/material/Box';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import '@mui/material/ToggleButtonGroup';
+import '@mui/material/ToggleButton';
+import './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+import '@mui/material';
+
+const plugins = [
+    dayGridPlugin,
+    timeGridPlugin,
+    listPlugin,
+    interactionPlugin,
+    multiMonthPlugin,
+];
+const defaultAvailableViews = [
+    'dayGridMonth',
+    'timeGridWeek',
+    'timeGridDay',
+    'listWeek',
+    'multiMonthYear',
+];
+const navLinkDayClick = 'timeGridDay';
+const navLinkWeekClick = 'timeGridWeek';
+function EventCalendar({ availableViews = defaultAvailableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins = [], ...restOptions }) {
+    const controller = useCalendarController();
+    const autoHeight = height === 'auto' || contentHeight === 'auto';
+    return (React.createElement(EventCalendarContainer, { direction: direction, className: className, height: height, borderless: restOptions.borderless, borderlessX: restOptions.borderlessX, borderlessTop: restOptions.borderlessTop, borderlessBottom: restOptions.borderlessBottom },
+        React.createElement(EventCalendarToolbar, { controller: controller, availableViews: availableViews, addButton: addButton }),
+        React.createElement(EventCalendarViews, { liquidHeight: !autoHeight && height !== undefined, height: autoHeight ? 'auto' : contentHeight, initialView: availableViews[0], navLinkDayClick: navLinkDayClick, navLinkWeekClick: navLinkWeekClick, controller: controller, plugins: [...plugins, ...userPlugins], ...restOptions })));
+}
+
+export { EventCalendar as default };

package/esm/breezy/EventCalendarContainer.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+
+interface EventCalendarContainerProps {
+    direction: 'ltr' | 'rtl' | undefined;
+    className: string | undefined;
+    height: string | number | undefined;
+    borderless: boolean | undefined;
+    borderlessX: boolean | undefined;
+    borderlessTop: boolean | undefined;
+    borderlessBottom: boolean | undefined;
+    children: ReactNode;
+}
+declare function EventCalendarContainer(props: EventCalendarContainerProps): React.JSX.Element;
+
+export { EventCalendarContainerProps, EventCalendarContainer as default };

package/esm/breezy/EventCalendarContainer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+
+function EventCalendarContainer(props) {
+    const borderlessX = props.borderlessX ?? props.borderless;
+    const borderlessTop = props.borderlessTop ?? props.borderless;
+    const borderlessBottom = props.borderlessBottom ?? props.borderless;
+    return (React.createElement(Box, { dir: props.direction === 'rtl' ? 'rtl' : undefined, className: props.className, sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: props.height,
+            bgcolor: 'background.paper',
+            borderStyle: 'solid',
+            borderColor: 'divider',
+            borderLeftWidth: borderlessX ? 0 : 1,
+            borderRightWidth: borderlessX ? 0 : 1,
+            borderTopWidth: borderlessTop ? 0 : 1,
+            borderBottomWidth: borderlessBottom ? 0 : 1,
+            ...(borderlessX || borderlessTop || borderlessBottom ? {} : {
+                borderRadius: 1,
+                overflow: 'hidden',
+            })
+        } }, props.children));
+}
+
+export { EventCalendarContainer as default };

package/esm/breezy/EventCalendarToolbar.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CalendarController } from '@fullcalendar/core';
+
+interface EventCalendarToolbarProps {
+    controller: CalendarController;
+    availableViews: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+}
+declare function EventCalendarToolbar({ controller, availableViews, addButton, }: EventCalendarToolbarProps): React.JSX.Element;
+
+export { EventCalendarToolbarProps, EventCalendarToolbar as default };

package/esm/breezy/EventCalendarToolbar.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import ToggleButton from '@mui/material/ToggleButton';
+import { EventCalendarPrevIcon, EventCalendarNextIcon } from './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+
+function EventCalendarToolbar({ controller, availableViews, addButton, }) {
+    const buttons = controller.getButtonState();
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 1,
+            padding: 2,
+            bgcolor: 'action.hover',
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+        } },
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                flexShrink: 0,
+                alignItems: 'center',
+                gap: 1,
+            } },
+            addButton && (React.createElement(Button, { onClick: addButton.click, "aria-label": addButton.hint, variant: addButton.isPrimary === false ? 'outlined' : 'contained' }, addButton.text)),
+            React.createElement(Button, { onClick: () => controller.today(), "aria-label": buttons.today.hint, variant: "outlined" }, buttons.today.text),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                } },
+                React.createElement(IconButton, { onClick: () => controller.prev(), disabled: buttons.prev.isDisabled, "aria-label": buttons.prev.hint },
+                    React.createElement(EventCalendarPrevIcon, null)),
+                React.createElement(IconButton, { onClick: () => controller.next(), disabled: buttons.next.isDisabled, "aria-label": buttons.next.hint },
+                    React.createElement(EventCalendarNextIcon, null))),
+            React.createElement(Typography, { variant: "h5" }, controller.view?.title)),
+        React.createElement(ToggleButtonGroup, { size: "small", exclusive: true, value: controller.view?.type, onChange: (_ev, val) => {
+                controller.changeView(val);
+            } }, availableViews.map((availableView) => (React.createElement(ToggleButton, { key: availableView, value: availableView, "aria-label": buttons[availableView]?.hint, color: "primary" },
+            React.createElement(Box, { sx: { px: 1 } }, buttons[availableView]?.text)))))));
+}
+
+export { EventCalendarToolbar as default };

package/esm/breezy/EventCalendarViews.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { DayHeaderData, DayCellData, CalendarOptions } from '@fullcalendar/core';
+
+declare const outlineWidthClass = "outline-3";
+declare const outlineWidthFocusClass = "focus-visible:outline-3";
+declare const outlineWidthGroupFocusClass = "group-focus-visible:outline-3";
+declare const outlineOffsetClass = "outline-offset-1";
+declare const primaryOutlineColorClass = "outline-(--mui-palette-primary-main)";
+declare const strongSolidPressableClass: string;
+declare const mutedBgClass = "bg-[rgba(var(--mui-palette-text-primaryChannel)_/_0.08)]";
+declare const mutedHoverPressableClass: string;
+declare const faintBgClass = "bg-[rgba(var(--mui-palette-text-primaryChannel)_/_0.04)]";
+declare const primaryClass = "bg-(--mui-palette-primary-main) text-(--mui-palette-primary-contrastText)";
+declare const primaryPressableClass: string;
+declare const primaryPressableGroupClass: string;
+declare const eventMutedFgClass = "text-[color-mix(in_oklab,var(--fc-event-color)_50%,var(--mui-palette-text-primary))]";
+declare const eventFaintBgClass = "bg-[color-mix(in_oklab,var(--fc-event-color)_20%,var(--mui-palette-background-paper))]";
+declare const eventFaintPressableClass: string;
+declare const rowPointerResizerClass: string;
+declare const rowTouchResizerClass: string;
+declare const getNormalDayHeaderBorderClass: (data: DayHeaderData) => string;
+declare const getMutedDayHeaderBorderClass: (data: DayHeaderData) => string;
+declare const getNormalDayCellBorderColorClass: (data: DayCellData) => "border-[rgba(var(--mui-palette-text-primaryChannel)_/_0.2)]" | "border-(--mui-palette-divider)";
+declare const getMutedDayCellBorderColorClass: (data: DayCellData) => "border-[rgba(var(--mui-palette-text-primaryChannel)_/_0.2)]" | "border-(--mui-palette-divider)";
+declare const tallDayCellBottomClass = "min-h-3";
+declare const getShortDayCellBottomClass: (data: DayCellData) => string;
+declare const dayRowCommonClasses: CalendarOptions;
+interface EventCalendarViewsProps extends CalendarOptions {
+    liquidHeight?: boolean;
+}
+declare function EventCalendarViews({ className, liquidHeight, height, views: userViews, ...restOptions }: EventCalendarViewsProps): React.JSX.Element;
+
+export { EventCalendarViewsProps, dayRowCommonClasses, EventCalendarViews as default, eventFaintBgClass, eventFaintPressableClass, eventMutedFgClass, faintBgClass, getMutedDayCellBorderColorClass, getMutedDayHeaderBorderClass, getNormalDayCellBorderColorClass, getNormalDayHeaderBorderClass, getShortDayCellBottomClass, mutedBgClass, mutedHoverPressableClass, outlineOffsetClass, outlineWidthClass, outlineWidthFocusClass, outlineWidthGroupFocusClass, primaryClass, primaryOutlineColorClass, primaryPressableClass, primaryPressableGroupClass, rowPointerResizerClass, rowTouchResizerClass, strongSolidPressableClass, tallDayCellBottomClass };

package/esm/breezy/EventCalendarViews.js

@@ -0,0 +1,250 @@
+import React from 'react';
+import { joinClassNames } from '@fullcalendar/core';
+import FullCalendar from '@fullcalendar/react';
+import { Box } from '@mui/material';
+import { EventCalendarCloseIcon } from './icons.js';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+
+// outline
+const outlineWidthClass = "fc-breezy-bAU";
+const outlineWidthFocusClass = "fc-breezy-Tid";
+const outlineWidthGroupFocusClass = "fc-breezy-14w";
+const outlineOffsetClass = "fc-breezy-fKI";
+const primaryOutlineColorClass = "fc-breezy-p95";
+// strongest (25%)
+const strongestSolidBgActiveClass = "fc-breezy-lS3";
+// stronger (20%)
+const strongerSolidBgHoverClass = "fc-breezy-fEn";
+// strong (16%)
+const strongBgFocusClass = "fc-breezy-WPX";
+const strongBgActiveClass = "fc-breezy-kup";
+const strongSolidBgClass = "fc-breezy-5V9";
+const strongSolidPressableClass = `${strongSolidBgClass} ${strongerSolidBgHoverClass} ${strongestSolidBgActiveClass}`;
+// muted (8%)
+const mutedBgClass = "fc-breezy-VxY";
+const mutedBgHoverClass = "fc-breezy-znR";
+const mutedBgActiveClass = "fc-breezy-cmB";
+const mutedHoverPressableClass = `${mutedBgHoverClass} ${strongBgFocusClass} ${strongBgActiveClass}`;
+// faint (4%)
+const faintBgClass = "fc-breezy-IKt";
+const faintBgHoverClass = "fc-breezy-iAr";
+const faintBgFocusClass = "fc-breezy-r6h";
+const faintHoverPressableClass = `${faintBgHoverClass} ${faintBgFocusClass} ${mutedBgActiveClass}`;
+// primary
+const primaryClass = "fc-breezy-OSb fc-breezy-Yus";
+const primaryPressableClass = `${primaryClass} fc-breezy-VzK fc-breezy-Fmz`;
+const primaryPressableGroupClass = `${primaryClass} fc-breezy-54v fc-breezy-spg`;
+// event content
+const eventMutedFgClass = "fc-breezy-xYN";
+const eventFaintBgClass = "fc-breezy-v3L";
+const eventFaintPressableClass = joinClassNames(eventFaintBgClass, "fc-breezy-hi1", "fc-breezy-W36");
+// usually 11px font / 12px line-height
+const xxsTextClass = "fc-breezy-HRt";
+// transparent resizer for mouse
+const blockPointerResizerClass = "fc-breezy-YA2 fc-breezy-C9h fc-breezy-ZkV";
+const rowPointerResizerClass = `${blockPointerResizerClass} fc-breezy-8ZZ fc-breezy-1lj`;
+const columnPointerResizerClass = `${blockPointerResizerClass} fc-breezy-xX5 fc-breezy-433`;
+// circle resizer for touch
+const blockTouchResizerClass = `fc-breezy-YA2 fc-breezy-tEU fc-breezy-UZp fc-breezy-qvz fc-breezy-Y27 fc-breezy-IdG`;
+const rowTouchResizerClass = `${blockTouchResizerClass} fc-breezy-if4 fc-breezy-NN9`;
+const columnTouchResizerClass = `${blockTouchResizerClass} fc-breezy-Z2g fc-breezy-RWU`;
+const getNormalDayHeaderBorderClass = (data) => joinClassNames(!data.inPopover && (data.isMajor ? `fc-breezy-UZp fc-breezy-I55` :
+    !data.isNarrow && `fc-breezy-UZp fc-breezy-G56`));
+const getMutedDayHeaderBorderClass = (data) => joinClassNames(!data.inPopover && (data.isMajor ? `fc-breezy-UZp fc-breezy-I55` :
+    !data.isNarrow && `fc-breezy-UZp fc-breezy-G56`));
+const getNormalDayCellBorderColorClass = (data) => (data.isMajor ? "fc-breezy-I55" : "fc-breezy-G56");
+const getMutedDayCellBorderColorClass = (data) => (data.isMajor ? "fc-breezy-I55" : "fc-breezy-G56");
+const tallDayCellBottomClass = "fc-breezy-iJ1";
+const getShortDayCellBottomClass = (data) => joinClassNames(!data.isNarrow && "fc-breezy-WoG");
+const mutedHoverButtonClass = joinClassNames(mutedHoverPressableClass, outlineWidthFocusClass, primaryOutlineColorClass);
+const dayRowCommonClasses = {
+    /* Day Row > List-Item Event
+    ----------------------------------------------------------------------------------------------- */
+    listItemEventClass: (data) => joinClassNames("fc-breezy-mwm fc-breezy-df6", data.isNarrow
+        ? "fc-breezy-6gf fc-breezy-dpa"
+        : "fc-breezy-MOr fc-breezy-UPi", data.isSelected
+        ? mutedBgClass
+        : data.isInteractive
+            ? mutedHoverPressableClass
+            : mutedBgHoverClass),
+    listItemEventInnerClass: (data) => joinClassNames("fc-breezy-Hhr fc-breezy-uEy fc-breezy-gfU fc-breezy-Klj", data.isNarrow
+        ? `fc-breezy-h2r ${xxsTextClass}`
+        : "fc-breezy-vvo fc-breezy-17F"),
+    listItemEventTimeClass: (data) => joinClassNames(data.isNarrow ? "fc-breezy-OKV" : "fc-breezy-55Y", "fc-breezy-Znt fc-breezy-V3u fc-breezy-JTJ fc-breezy-O5O fc-breezy-qbn"),
+    listItemEventTitleClass: (data) => joinClassNames(data.isNarrow ? "fc-breezy-OKV" : "fc-breezy-55Y", "fc-breezy-HBk fc-breezy-kIZ fc-breezy-JTJ fc-breezy-O5O fc-breezy-nGI", data.timeText && "fc-breezy-yGY"),
+    /* Day Row > Row Event
+    ----------------------------------------------------------------------------------------------- */
+    rowEventClass: (data) => joinClassNames(data.isStart && (data.isNarrow ? "fc-breezy-GSF" : "fc-breezy-fpO"), data.isEnd && (data.isNarrow ? "fc-breezy-Jha" : "fc-breezy-hCF")),
+    rowEventInnerClass: (data) => data.isNarrow ? "fc-breezy-h2r" : "fc-breezy-vvo",
+    /* Day Row > More-Link
+    ----------------------------------------------------------------------------------------------- */
+    rowMoreLinkClass: (data) => joinClassNames("fc-breezy-mwm fc-breezy-UZp", data.isNarrow
+        ? `fc-breezy-6gf fc-breezy-R95 fc-breezy-dpa`
+        : "fc-breezy-rK9 fc-breezy-MOr fc-breezy-lqW fc-breezy-UPi", mutedHoverPressableClass),
+    rowMoreLinkInnerClass: (data) => joinClassNames(data.isNarrow
+        ? `fc-breezy-df6 ${xxsTextClass}`
+        : "fc-breezy-KbZ fc-breezy-17F", "fc-breezy-HBk")
+};
+function EventCalendarViews({ className, liquidHeight, height, views: userViews, ...restOptions }) {
+    return (React.createElement(Box, { className: className, sx: liquidHeight ? { flexGrow: 1, minHeight: 0 } : {} },
+        React.createElement(FullCalendar, { className: "fc-breezy-ND7", height: liquidHeight ? "100%" : height, 
+            /* Abstract Event
+            ----------------------------------------------------------------------------------------- */
+            eventShortHeight: 50, eventColor: "var(--mui-palette-primary-main)", eventClass: (data) => joinClassNames(data.isSelected
+                ? joinClassNames(outlineWidthClass, data.isDragging && "fc-breezy-iqH")
+                : outlineWidthFocusClass, primaryOutlineColorClass), 
+            /* Background Event
+            ----------------------------------------------------------------------------------------- */
+            backgroundEventColor: "var(--mui-palette-secondary-main)", backgroundEventClass: "fc-breezy-Z7B", backgroundEventTitleClass: (data) => joinClassNames("fc-breezy-F6C fc-breezy-dra fc-breezy-HBk", data.isNarrow
+                ? `fc-breezy-xbC ${xxsTextClass}`
+                : "fc-breezy-aS8 fc-breezy-17F"), 
+            /* Block Event
+            ----------------------------------------------------------------------------------------- */
+            blockEventClass: (data) => joinClassNames("fc-breezy-ytQ fc-breezy-vPs fc-breezy-82y fc-breezy-lqW fc-breezy-iVS", data.isInteractive
+                ? eventFaintPressableClass
+                : eventFaintBgClass, (data.isDragging && !data.isSelected) && "fc-breezy-0HG"), blockEventInnerClass: eventMutedFgClass, blockEventTimeClass: "fc-breezy-JTJ fc-breezy-O5O fc-breezy-qbn", blockEventTitleClass: "fc-breezy-JTJ fc-breezy-O5O fc-breezy-nGI", 
+            /* Row Event
+            ----------------------------------------------------------------------------------------- */
+            rowEventClass: (data) => joinClassNames("fc-breezy-mwm fc-breezy-3WQ", data.isStart && joinClassNames("fc-breezy-riW", data.isNarrow ? "fc-breezy-fdR" : "fc-breezy-vln"), data.isEnd && joinClassNames("fc-breezy-EWl", data.isNarrow ? "fc-breezy-Ea4" : "fc-breezy-ze3")), rowEventBeforeClass: (data) => joinClassNames(data.isStartResizable && joinClassNames(data.isSelected ? rowTouchResizerClass : rowPointerResizerClass, "fc-breezy-BD7")), rowEventAfterClass: (data) => joinClassNames(data.isEndResizable && joinClassNames(data.isSelected ? rowTouchResizerClass : rowPointerResizerClass, "fc-breezy-8rg")), rowEventInnerClass: (data) => joinClassNames("fc-breezy-Hhr fc-breezy-uEy fc-breezy-gfU", data.isNarrow ? xxsTextClass : "fc-breezy-17F"), rowEventTimeClass: (data) => joinClassNames(data.isNarrow ? "fc-breezy-qNU" : "fc-breezy-I6e", "fc-breezy-kIZ"), rowEventTitleClass: (data) => joinClassNames(data.isNarrow ? "fc-breezy-55Y" : "fc-breezy-qB7"), 
+            /* Column Event
+            ----------------------------------------------------------------------------------------- */
+            columnEventClass: (data) => joinClassNames(`fc-breezy-zDQ fc-breezy-z3l fc-breezy-bLM`, data.isStart && joinClassNames("fc-breezy-srs fc-breezy-dUI", data.isNarrow ? "fc-breezy-CSA" : "fc-breezy-sb4"), data.isEnd && joinClassNames("fc-breezy-QTT fc-breezy-etO", data.isNarrow ? "fc-breezy-mwm" : "fc-breezy-Sb2")), columnEventBeforeClass: (data) => joinClassNames(data.isStartResizable && joinClassNames(data.isSelected ? columnTouchResizerClass : columnPointerResizerClass, "fc-breezy-f4s")), columnEventAfterClass: (data) => joinClassNames(data.isEndResizable && joinClassNames(data.isSelected ? columnTouchResizerClass : columnPointerResizerClass, "fc-breezy-I8n")), columnEventInnerClass: (data) => joinClassNames("fc-breezy-Hhr", data.isShort
+                ? "fc-breezy-uEy fc-breezy-gfU fc-breezy-RVT fc-breezy-xbC"
+                : joinClassNames("fc-breezy-bXY", data.isNarrow ? "fc-breezy-qB7 fc-breezy-vvo" : "fc-breezy-ybQ fc-breezy-ztx"), (data.isShort || data.isNarrow) ? xxsTextClass : "fc-breezy-17F"), columnEventTimeClass: (data) => joinClassNames(!data.isShort && (data.isNarrow ? "fc-breezy-zvv" : "fc-breezy-q8O")), columnEventTitleClass: (data) => joinClassNames(!data.isShort && (data.isNarrow ? "fc-breezy-vvo" : "fc-breezy-ztx"), "fc-breezy-RKK"), 
+            /* More-Link
+            ----------------------------------------------------------------------------------------- */
+            moreLinkClass: `${outlineWidthFocusClass} ${primaryOutlineColorClass}`, moreLinkInnerClass: "fc-breezy-JTJ fc-breezy-O5O", columnMoreLinkClass: (data) => joinClassNames(data.isNarrow ? "fc-breezy-8in" : "fc-breezy-19X", `fc-breezy-UZp fc-breezy-lqW fc-breezy-ePV fc-breezy-UPi ${strongSolidPressableClass} fc-breezy-82y fc-breezy-z3l fc-breezy-bLM`), columnMoreLinkInnerClass: (data) => joinClassNames(data.isNarrow
+                ? `fc-breezy-KbZ ${xxsTextClass}`
+                : "fc-breezy-xbC fc-breezy-17F", "fc-breezy-HBk"), 
+            /* Day Header
+            ----------------------------------------------------------------------------------------- */
+            dayHeaderAlign: (data) => data.inPopover ? "start" : "center", dayHeaderClass: (data) => joinClassNames("fc-breezy-a65", data.inPopover && "fc-breezy-QTT fc-breezy-G56"), dayHeaderInnerClass: (data) => joinClassNames("fc-breezy-Hhr fc-breezy-uEy fc-breezy-gfU", (!data.dayNumberText && !data.inPopover)
+                ? joinClassNames("fc-breezy-ztx fc-breezy-dpa fc-breezy-17F", data.isNarrow
+                    ? `fc-breezy-qB7 fc-breezy-JQD fc-breezy-Znt`
+                    : `fc-breezy-qMw fc-breezy-c0k fc-breezy-RKK fc-breezy-HBk`, data.hasNavLink && mutedHoverButtonClass)
+                : (data.isToday && data.dayNumberText && !data.inPopover)
+                    ? joinClassNames("fc-breezy-ytQ fc-breezy-c0k fc-breezy-3jE", data.isNarrow ? "fc-breezy-6U1" : "fc-breezy-aFC")
+                    : joinClassNames("fc-breezy-dpa", data.inPopover
+                        ? "fc-breezy-c0k fc-breezy-qB7 fc-breezy-vvo"
+                        : joinClassNames("fc-breezy-NoV fc-breezy-6U1 fc-breezy-qMw", data.isNarrow ? "fc-breezy-j5m" : "fc-breezy-7ZI"), data.hasNavLink && mutedHoverButtonClass)), dayHeaderContent: (data) => ((!data.dayNumberText && !data.inPopover) ? (React.createElement(React.Fragment, null, data.text)) : (React.createElement(React.Fragment, null, data.textParts.map((textPart, i) => (React.createElement("span", { key: i, className: joinClassNames("fc-breezy-csg", data.isNarrow ? "fc-breezy-17F" : "fc-breezy-gEy", textPart.type === "day"
+                    ? joinClassNames("fc-breezy-Hhr fc-breezy-uEy fc-breezy-gfU", !data.isNarrow && "fc-breezy-RKK", (data.isToday && !data.inPopover)
+                        ? joinClassNames("fc-breezy-qK4 fc-breezy-IdG fc-breezy-a65", data.isNarrow ? "fc-breezy-Fzs" : "fc-breezy-UvV", data.hasNavLink
+                            ? joinClassNames(primaryPressableGroupClass, outlineWidthGroupFocusClass, outlineOffsetClass, primaryOutlineColorClass)
+                            : primaryClass)
+                        : "fc-breezy-HBk")
+                    : "fc-breezy-Znt") }, textPart.value)))))), 
+            /* Day Cell
+            ----------------------------------------------------------------------------------------- */
+            dayCellClass: (data) => joinClassNames("fc-breezy-UZp", ((data.isOther || data.isDisabled) && !data.options.businessHours) && faintBgClass), dayCellTopClass: (data) => joinClassNames(data.isNarrow ? "fc-breezy-s9U" : "fc-breezy-naH", "fc-breezy-Hhr fc-breezy-uEy"), dayCellTopInnerClass: (data) => joinClassNames("fc-breezy-Hhr fc-breezy-uEy fc-breezy-gfU fc-breezy-a65 fc-breezy-JTJ", data.isNarrow
+                ? `fc-breezy-8in fc-breezy-cL9 ${xxsTextClass}`
+                : "fc-breezy-19X fc-breezy-6U1 fc-breezy-17F", data.isToday
+                ? joinClassNames("fc-breezy-IdG fc-breezy-RKK", data.isNarrow
+                    ? "fc-breezy-9ZR"
+                    : "fc-breezy-fpO", data.text === data.dayNumberText
+                    ? (data.isNarrow ? "fc-breezy-CSa" : "fc-breezy-IdL")
+                    : (data.isNarrow ? "fc-breezy-qB7" : "fc-breezy-ybQ"), data.hasNavLink
+                    ? joinClassNames(primaryPressableClass, outlineOffsetClass)
+                    : primaryClass)
+                : joinClassNames("fc-breezy-Ea4", data.isNarrow ? "fc-breezy-qB7" : "fc-breezy-ybQ", data.hasNavLink && mutedHoverPressableClass, data.isOther
+                    ? "fc-breezy-x07"
+                    : (data.monthText ? "fc-breezy-HBk" : "fc-breezy-Znt"), data.monthText && "fc-breezy-Kw3")), dayCellInnerClass: (data) => joinClassNames(data.inPopover && "fc-breezy-aS8"), 
+            /* Popover
+            ----------------------------------------------------------------------------------------- */
+            popoverClass: "fc-breezy-HBk fc-breezy-Y27 fc-breezy-DC1 fc-breezy-8Kl fc-breezy-O5O fc-breezy-uPX fc-breezy-c0k fc-breezy-nhl fc-breezy-ND7", popoverCloseClass: `fc-breezy-ytQ fc-breezy-YA2 fc-breezy-bEj fc-breezy-q2P fc-breezy-KbZ fc-breezy-dpa ${mutedHoverButtonClass} fc-breezy-om0`, popoverCloseContent: () => React.createElement(EventCalendarCloseIcon, null), 
+            /* Lane
+            ----------------------------------------------------------------------------------------- */
+            dayLaneClass: (data) => joinClassNames("fc-breezy-UZp", data.isMajor ? "fc-breezy-I55" : "fc-breezy-G56", data.isDisabled && faintBgClass), dayLaneInnerClass: (data) => joinClassNames(data.isStack
+                ? "fc-breezy-JQD"
+                : data.isNarrow ? "fc-breezy-6gf" : "fc-breezy-MOr"), slotLaneClass: (data) => joinClassNames("fc-breezy-UZp fc-breezy-G56", data.isMinor && "fc-breezy-M5N"), 
+            /* List Day
+            ----------------------------------------------------------------------------------------- */
+            listDaysClass: "fc-breezy-Ii5 fc-breezy-lOy fc-breezy-Asp fc-breezy-BIO fc-breezy-jQ9", listDayClass: "fc-breezy-2uq fc-breezy-G56 fc-breezy-Hhr fc-breezy-uEy fc-breezy-lUe fc-breezy-ODb", listDayHeaderClass: "fc-breezy-8in fc-breezy-yvz fc-breezy-m2e fc-breezy-mTj fc-breezy-m67 fc-breezy-Hhr fc-breezy-bXY fc-breezy-lUe", listDayHeaderInnerClass: (data) => joinClassNames("fc-breezy-kOE fc-breezy-vvo fc-breezy-ybQ fc-breezy-sgM fc-breezy-IdG fc-breezy-gEy", !data.level
+                ? joinClassNames(data.isToday
+                    ? joinClassNames("fc-breezy-RKK", data.hasNavLink ? primaryPressableClass : primaryClass)
+                    : joinClassNames(`fc-breezy-kIZ fc-breezy-HBk`, data.hasNavLink && mutedHoverPressableClass))
+                : joinClassNames("fc-breezy-x07", data.hasNavLink && joinClassNames(mutedHoverPressableClass, "fc-breezy-ogw"))), listDayEventsClass: "fc-breezy-mtA fc-breezy-oee fc-breezy-qbd fc-breezy-UZp fc-breezy-G56 fc-breezy-UPi", 
+            /* Single Month (in Multi-Month)
+            ----------------------------------------------------------------------------------------- */
+            singleMonthClass: "fc-breezy-tZ3", singleMonthHeaderClass: (data) => joinClassNames(data.isSticky && `fc-breezy-Y27 fc-breezy-QTT fc-breezy-G56`, data.colCount > 1 ? "fc-breezy-5SQ" : "fc-breezy-ztx", "fc-breezy-gfU"), singleMonthHeaderInnerClass: (data) => joinClassNames(`fc-breezy-ztx fc-breezy-ybQ fc-breezy-UPi fc-breezy-gEy fc-breezy-HBk fc-breezy-RKK`, data.hasNavLink && mutedHoverPressableClass), 
+            /* Misc Table
+            ----------------------------------------------------------------------------------------- */
+            fillerClass: "fc-breezy-UZp fc-breezy-G56", dayNarrowWidth: 100, dayHeaderRowClass: "fc-breezy-UZp fc-breezy-G56", dayRowClass: "fc-breezy-UZp fc-breezy-G56", slotHeaderRowClass: "fc-breezy-UZp fc-breezy-G56", slotHeaderInnerClass: "fc-breezy-x07 fc-breezy-KNZ", 
+            /* Misc Content
+            ----------------------------------------------------------------------------------------- */
+            navLinkClass: `${outlineWidthFocusClass} ${primaryOutlineColorClass}`, inlineWeekNumberClass: (data) => joinClassNames("fc-breezy-YA2 fc-breezy-pPI fc-breezy-MS6 fc-breezy-Y27 fc-breezy-Znt fc-breezy-JTJ fc-breezy-ftu fc-breezy-QTT fc-breezy-JvS fc-breezy-riW fc-breezy-vcR", data.isNarrow
+                ? `fc-breezy-KbZ ${xxsTextClass}`
+                : "fc-breezy-xGk fc-breezy-17F", data.hasNavLink
+                ? `${mutedHoverPressableClass} fc-breezy-bXD`
+                : mutedBgHoverClass), highlightClass: "fc-breezy-gKu", nonBusinessClass: faintBgClass, nowIndicatorLineClass: "fc-breezy-7VH fc-breezy-v0S fc-breezy-R3n", nowIndicatorDotClass: "fc-breezy-xny fc-breezy-uDX fc-breezy-R3n fc-breezy-UmK fc-breezy-IdG fc-breezy-fo8 fc-breezy-bLM", 
+            /* View-Specific Options
+            ----------------------------------------------------------------------------------------- */
+            views: {
+                ...userViews,
+                dayGrid: {
+                    ...dayRowCommonClasses,
+                    dayHeaderClass: getNormalDayHeaderBorderClass,
+                    dayHeaderDividerClass: `fc-breezy-QTT fc-breezy-I55`,
+                    dayCellClass: getNormalDayCellBorderColorClass,
+                    dayCellBottomClass: getShortDayCellBottomClass,
+                    backgroundEventInnerClass: "fc-breezy-Hhr fc-breezy-uEy fc-breezy-RhI",
+                    ...userViews?.dayGrid,
+                },
+                multiMonth: {
+                    ...dayRowCommonClasses,
+                    dayHeaderClass: getNormalDayHeaderBorderClass,
+                    dayHeaderDividerClass: (data) => joinClassNames(data.isSticky && `fc-breezy-QTT fc-breezy-I55 fc-breezy-5jb`),
+                    dayCellClass: getNormalDayCellBorderColorClass,
+                    dayCellBottomClass: getShortDayCellBottomClass,
+                    tableHeaderClass: (data) => joinClassNames(data.isSticky && "fc-breezy-Y27"),
+                    tableBodyClass: `fc-breezy-UZp fc-breezy-G56 fc-breezy-UPi fc-breezy-LtG fc-breezy-O5O`,
+                    ...userViews?.multiMonth,
+                },
+                timeGrid: {
+                    ...dayRowCommonClasses,
+                    dayHeaderClass: getMutedDayHeaderBorderClass,
+                    dayHeaderDividerClass: (data) => joinClassNames("fc-breezy-QTT", data.options.allDaySlot
+                        ? "fc-breezy-G56"
+                        : `fc-breezy-I55 fc-breezy-5jb`),
+                    dayCellClass: getMutedDayCellBorderColorClass,
+                    dayCellBottomClass: tallDayCellBottomClass,
+                    /* TimeGrid > Week Number Header
+                    ------------------------------------------------------------------------------------- */
+                    weekNumberHeaderClass: "fc-breezy-gfU fc-breezy-RhI",
+                    weekNumberHeaderInnerClass: (data) => joinClassNames(`fc-breezy-RQK fc-breezy-6U1 fc-breezy-qMw fc-breezy-Znt fc-breezy-dpa fc-breezy-Hhr fc-breezy-uEy fc-breezy-gfU`, data.hasNavLink && mutedHoverPressableClass, data.isNarrow ? "fc-breezy-17F" : "fc-breezy-gEy"),
+                    /* TimeGrid > All-Day Header
+                    ------------------------------------------------------------------------------------- */
+                    allDayHeaderClass: "fc-breezy-gfU",
+                    allDayHeaderInnerClass: (data) => joinClassNames(`fc-breezy-kHK fc-breezy-x07`, data.isNarrow ? xxsTextClass : "fc-breezy-17F"),
+                    allDayDividerClass: `fc-breezy-QTT fc-breezy-I55 fc-breezy-5jb`,
+                    /* TimeGrid > Slot Header
+                    ------------------------------------------------------------------------------------- */
+                    slotHeaderClass: "fc-breezy-RhI",
+                    slotHeaderInnerClass: (data) => joinClassNames("fc-breezy-vPs fc-breezy-U10 fc-breezy-KyB", data.isNarrow
+                        ? `fc-breezy-byi ${xxsTextClass}`
+                        : "fc-breezy-IWs fc-breezy-17F", data.isFirst && "fc-breezy-C9h"),
+                    slotHeaderDividerClass: `fc-breezy-EWl fc-breezy-G56`,
+                    ...userViews?.timeGrid,
+                },
+                list: {
+                    /* List-View > List-Item Event
+                    ------------------------------------------------------------------------------------- */
+                    listItemEventClass: (data) => joinClassNames(`fc-breezy-ytQ fc-breezy-2uq fc-breezy-G56 fc-breezy-fIh fc-breezy-gfU fc-breezy-9Vv`, data.isInteractive
+                        ? faintHoverPressableClass
+                        : faintBgHoverClass),
+                    listItemEventBeforeClass: "fc-breezy-PrA fc-breezy-qvz fc-breezy-IdG",
+                    listItemEventInnerClass: "fc-breezy-Hhr fc-breezy-uEy fc-breezy-gfU fc-breezy-9Vv fc-breezy-gEy",
+                    listItemEventTimeClass: "fc-breezy-yvz fc-breezy-8Ko fc-breezy-mTj fc-breezy-JTJ fc-breezy-O5O fc-breezy-yGY fc-breezy-Znt",
+                    listItemEventTitleClass: (data) => joinClassNames("fc-breezy-oee fc-breezy-qbd fc-breezy-kIZ fc-breezy-JTJ fc-breezy-O5O fc-breezy-HBk", data.event.url && "fc-breezy-YdZ"),
+                    /* No-Events Screen
+                    ------------------------------------------------------------------------------------- */
+                    noEventsClass: "fc-breezy-oee fc-breezy-Hhr fc-breezy-bXY fc-breezy-gfU fc-breezy-a65",
+                    noEventsInnerClass: "fc-breezy-UyD",
+                    ...userViews?.list,
+                },
+            }, ...restOptions })));
+}
+
+export { dayRowCommonClasses, EventCalendarViews as default, eventFaintBgClass, eventFaintPressableClass, eventMutedFgClass, faintBgClass, getMutedDayCellBorderColorClass, getMutedDayHeaderBorderClass, getNormalDayCellBorderColorClass, getNormalDayHeaderBorderClass, getShortDayCellBottomClass, mutedBgClass, mutedHoverPressableClass, outlineOffsetClass, outlineWidthClass, outlineWidthFocusClass, outlineWidthGroupFocusClass, primaryClass, primaryOutlineColorClass, primaryPressableClass, primaryPressableGroupClass, rowPointerResizerClass, rowTouchResizerClass, strongSolidPressableClass, tallDayCellBottomClass };

package/esm/breezy/ResourceTimeGrid.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CalendarOptions } from '@fullcalendar/core';
+
+interface ResourceTimeGridProps extends Omit<CalendarOptions, 'class'> {
+    availableViews?: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+}
+declare function ResourceTimeGrid({ availableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins, ...restOptions }: ResourceTimeGridProps): React.JSX.Element;
+
+export { ResourceTimeGridProps, ResourceTimeGrid as default };

package/esm/breezy/ResourceTimeGrid.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useCalendarController } from '@fullcalendar/react';
+import adaptivePlugin from '@fullcalendar/adaptive';
+import interactionPlugin from '@fullcalendar/interaction';
+import scrollGridPlugin from '@fullcalendar/scrollgrid';
+import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
+import EventCalendarToolbar from './EventCalendarToolbar.js';
+import SchedulerViews from './SchedulerViews.js';
+import EventCalendarContainer from './EventCalendarContainer.js';
+import '@mui/material/Box';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import '@mui/material/ToggleButtonGroup';
+import '@mui/material/ToggleButton';
+import './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+import './EventCalendarViews.js';
+import '@mui/material';
+
+const plugins = [
+    adaptivePlugin,
+    interactionPlugin,
+    scrollGridPlugin,
+    resourceTimeGridPlugin,
+];
+const defaultAvailableViews = [
+    'resourceTimeGridDay',
+    'resourceTimeGridWeek',
+];
+const navLinkDayClick = 'resourceTimeGridDay';
+const navLinkWeekClick = 'resourceTimeGridWeek';
+function ResourceTimeGrid({ availableViews = defaultAvailableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins = [], ...restOptions }) {
+    const controller = useCalendarController();
+    const autoHeight = height === 'auto' || contentHeight === 'auto';
+    return (React.createElement(EventCalendarContainer, { direction: direction, className: className, height: height, borderless: restOptions.borderless, borderlessX: restOptions.borderlessX, borderlessTop: restOptions.borderlessTop, borderlessBottom: restOptions.borderlessBottom },
+        React.createElement(EventCalendarToolbar, { controller: controller, availableViews: availableViews, addButton: addButton }),
+        React.createElement(SchedulerViews, { liquidHeight: !autoHeight && height !== undefined, height: autoHeight ? 'auto' : contentHeight, initialView: availableViews[0], navLinkDayClick: navLinkDayClick, navLinkWeekClick: navLinkWeekClick, controller: controller, plugins: [...plugins, ...userPlugins], ...restOptions })));
+}
+
+export { ResourceTimeGrid as default };

package/esm/breezy/ResourceTimeline.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CalendarOptions } from '@fullcalendar/core';
+
+interface ResourceTimelineProps extends Omit<CalendarOptions, 'class'> {
+    availableViews?: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+}
+declare function ResourceTimeline({ availableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins, ...restOptions }: ResourceTimelineProps): React.JSX.Element;
+
+export { ResourceTimelineProps, ResourceTimeline as default };

package/esm/breezy/ResourceTimeline.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useCalendarController } from '@fullcalendar/react';
+import adaptivePlugin from '@fullcalendar/adaptive';
+import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
+import interactionPlugin from '@fullcalendar/interaction';
+import EventCalendarToolbar from './EventCalendarToolbar.js';
+import SchedulerViews from './SchedulerViews.js';
+import EventCalendarContainer from './EventCalendarContainer.js';
+import '@mui/material/Box';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import '@mui/material/ToggleButtonGroup';
+import '@mui/material/ToggleButton';
+import './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+import './EventCalendarViews.js';
+import '@mui/material';
+
+const plugins = [
+    adaptivePlugin,
+    interactionPlugin,
+    resourceTimelinePlugin,
+];
+const defaultAvailableViews = [
+    'resourceTimelineDay',
+    'resourceTimelineWeek',
+];
+const navLinkDayClick = 'resourceTimelineDay';
+const navLinkWeekClick = 'resourceTimelineWeek';
+function ResourceTimeline({ availableViews = defaultAvailableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins = [], ...restOptions }) {
+    const controller = useCalendarController();
+    const autoHeight = height === 'auto' || contentHeight === 'auto';
+    return (React.createElement(EventCalendarContainer, { direction: direction, className: className, height: height, borderless: restOptions.borderless, borderlessX: restOptions.borderlessX, borderlessTop: restOptions.borderlessTop, borderlessBottom: restOptions.borderlessBottom },
+        React.createElement(EventCalendarToolbar, { controller: controller, availableViews: availableViews, addButton: addButton }),
+        React.createElement(SchedulerViews, { liquidHeight: !autoHeight && height !== undefined, height: autoHeight ? 'auto' : contentHeight, initialView: availableViews[0], navLinkDayClick: navLinkDayClick, navLinkWeekClick: navLinkWeekClick, controller: controller, plugins: [...plugins, ...userPlugins], ...restOptions })));
+}
+
+export { ResourceTimeline as default };

package/esm/breezy/SchedulerViews.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { EventCalendarViewsProps } from './EventCalendarViews.js';
+
+interface SchedulerViewsProps extends EventCalendarViewsProps {
+}
+declare function SchedulerViews({ views: userViews, ...restOptions }: SchedulerViewsProps): React.JSX.Element;
+
+export { SchedulerViewsProps, SchedulerViews as default };