@sqrzro/admin 1.0.0-beta.7 → 2.0.0

package/dist/components/WebsiteInput/index.js

@@ -0,0 +1,13 @@
+'use client';
+import React from 'react';
+import TextInput from '../../components/TextInput';
+/**
+ * A `TextInput` component with a pre-defined `prefix` prop set to a 'http://'. All other props are
+ * simply passed through to the TextInput. Technically, the order of the props is such that the
+ * prefix can be overridden or removed all together. If this is the case, the component is no
+ * different to a `TextInput`.
+ */
+function WebsiteInput(props) {
+    return React.createElement(TextInput, { prefix: "http://", ...props });
+}
+export default WebsiteInput;

package/dist/components/WeekCalendar/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface WeekCalendarProps {
+    data: {
+        id: number;
+        datetime: string;
+        patient: {
+            name: string;
+        };
+    }[];
+}
+declare function WeekCalendar({ data }: WeekCalendarProps): React.ReactElement;
+declare namespace WeekCalendar {
+    var propTypes: {
+        data: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            id: PropTypes.Validator<number>;
+            datetime: PropTypes.Validator<string>;
+            patient: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+            }>>>;
+        }>>[]>;
+    };
+}
+export default WeekCalendar;

package/dist/components/WeekCalendar/index.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { addDays, getWeek } from 'date-fns';
+import PropTypes from 'prop-types';
+import FormatService from '../../services/FormatService';
+import WeekCalendarDay from '../../core/WeekCalendarDay';
+// Import styles from './WeekCalendar.module.css';
+/*
+ * This function gets the first date of a week number. It 'Just Works', but it uses a lot of magic
+ * numbers, so it's easiest to just disable the eslint rule.
+ */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+const getFirstDayOfWeek = (week, year) => {
+    const weekInDays = 7 * week;
+    const firstDayOfWeek = new Date(year, 0, weekInDays - 6);
+    const dow = firstDayOfWeek.getDay();
+    const ISOweekStart = firstDayOfWeek;
+    if (dow <= 4) {
+        ISOweekStart.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + 1);
+    }
+    else {
+        ISOweekStart.setDate(firstDayOfWeek.getDate() + 8 - firstDayOfWeek.getDay());
+    }
+    return ISOweekStart;
+};
+/* eslint-enable */
+const formatHour = (hour) => `${FormatService.twoDigits(hour)}00`;
+const DAYS_IN_WEEK = 7;
+const FIRST_HOUR = 8;
+function WeekCalendar({ data }) {
+    const week = useMemo(() => getWeek(new Date()), []);
+    let days = [getFirstDayOfWeek(week, new Date().getFullYear())];
+    for (let index = 1; index < DAYS_IN_WEEK; index += 1) {
+        days = [...days, addDays(days[0], index)];
+    }
+    return (React.createElement("div", { className: "/*styles.root*/" },
+        React.createElement("div", { className: "/*styles.scale*/" }, Array.from({ length: 12 }).map((_item, index) => (React.createElement("div", { key: index, className: "/*styles.hour*/" }, formatHour(index + FIRST_HOUR))))),
+        days.map((item) => (React.createElement(WeekCalendarDay, { key: item.toString(), data: data, date: item })))));
+}
+WeekCalendar.propTypes = {
+    data: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        datetime: PropTypes.string.isRequired,
+        patient: PropTypes.shape({
+            name: PropTypes.string.isRequired,
+        }).isRequired,
+    }).isRequired).isRequired,
+};
+export default WeekCalendar;

package/dist/{types/core → core}/AlertComponent/index.d.ts

@@ -1,26 +1,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import type { Action, StyleVariant } from '../../utility/interfaces';
-export interface AlertComponentProps {
-    actions?: Action[];
-    children: React.ReactNode;
-    icon?: string;
-    isOpen?: boolean;
-    onClose?: React.MouseEventHandler<HTMLButtonElement>;
-    title?: string;
-    variant?: StyleVariant;
-    width?: string;
-}
-declare const AlertComponent: {
-    ({ actions, children, icon, isOpen, onClose, title, variant, width, }: AlertComponentProps): React.ReactElement | null;
-    propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        actions: PropTypes.Requireable<PropTypes.InferProps<{
-            label: PropTypes.Validator<string>;
-            onClick: PropTypes.Validator<(...args: any[]) => any>;
-        }>[]>;
-        title: PropTypes.Requireable<string>;
-        variant: PropTypes.Requireable<string>;
-    };
-};
-export default AlertComponent;
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { Action, StyleVariant } from '../../utility/interfaces';
+export interface AlertComponentProps {
+    actions?: Action[];
+    children: React.ReactNode;
+    icon?: string;
+    isOpen?: boolean;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    title?: string;
+    variant?: StyleVariant;
+    width?: string;
+}
+declare function AlertComponent({ actions, children, icon, isOpen, onClose, title, variant, width, }: AlertComponentProps): React.ReactElement | null;
+declare namespace AlertComponent {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        actions: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
+            label: PropTypes.Validator<string>;
+            onClick: PropTypes.Validator<(...args: any[]) => any>;
+        }>>[]>;
+        title: PropTypes.Requireable<string>;
+        variant: PropTypes.Requireable<string>;
+    };
+}
+export default AlertComponent;

package/dist/core/AlertComponent/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../../components/Button';
+import Icon from '../../core/Icon';
+import Panel from '../../core/Panel';
+function AlertComponent({ actions, children, icon, isOpen, onClose, title, variant, width, }) {
+    if (!isOpen) {
+        return null;
+    }
+    const handleClose = (event) => {
+        if (onClose) {
+            onClose(event);
+        }
+    };
+    return (React.createElement("div", { className: "/*styles.root*/" },
+        React.createElement("div", { className: "/*styles.overlay*/" }),
+        React.createElement("aside", { className: "/*clsx(styles.panel, styles[`panel${ucwords(width || 'md')`])*/", role: "alert" },
+            React.createElement(Panel, { isPadded: true },
+                React.createElement("div", { className: "/*clsx(styles.logo, variant && styles[`logo${ucwords(variant)}`])*/", "data-testid": "alert-component-logo" }, icon ? React.createElement(Icon, { icon: icon, size: 40 }) : null),
+                title ? (React.createElement("h3", { className: "/*styles.title*/", role: "heading" }, title)) : null,
+                children,
+                React.createElement("footer", { className: "/*styles.actions*/" },
+                    actions?.map((action) => (React.createElement(Button, { key: action.label, isDisabled: action.isDisabled, onClick: action.onClick, variant: action.variant }, action.label))),
+                    React.createElement(Button, { onClick: handleClose, variant: "link" }, "Close"))))));
+}
+AlertComponent.propTypes = {
+    children: PropTypes.node.isRequired,
+    actions: PropTypes.arrayOf(PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        onClick: PropTypes.func.isRequired,
+    }).isRequired),
+    title: PropTypes.string,
+    variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'warning', 'danger']),
+};
+export default AlertComponent;

package/dist/{types/core → core}/AppHeader/index.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const AppHeader: React.FunctionComponent;
-export default AppHeader;
+import React from 'react';
+declare function AppHeader(): React.ReactElement;
+export default AppHeader;

package/dist/core/AppHeader/index.js

@@ -0,0 +1,17 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { EventService } from '@sqrzro/utility';
+import Header from '../../core/Header';
+function AppHeader() {
+    const [title, setTitle] = useState();
+    useEffect(() => {
+        const sub = EventService.subscribe('@app/title', (_key, data) => {
+            setTitle(data);
+        });
+        return () => {
+            EventService.unsubscribe(sub);
+        };
+    }, []);
+    return React.createElement(Header, { title: title });
+}
+export default AppHeader;

package/dist/core/AppLogo/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface AppLogoProps {
+    isLink?: boolean;
+}
+declare function AppLogo({ isLink }: AppLogoProps): React.ReactElement;
+declare namespace AppLogo {
+    var propTypes: {
+        isLink: PropTypes.Requireable<boolean>;
+    };
+}
+export default AppLogo;

package/dist/core/AppLogo/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../../components/Link';
+import AppLogoImage from '../../core/AppLogoImage';
+function AppLogo({ isLink }) {
+    if (isLink) {
+        return (React.createElement(Link, { className: "/*styles.root*/", to: "/" },
+            React.createElement(AppLogoImage, null)));
+    }
+    return (React.createElement("div", { className: "/*styles.root*/" },
+        React.createElement(AppLogoImage, null)));
+}
+AppLogo.propTypes = {
+    isLink: PropTypes.bool,
+};
+export default AppLogo;

package/dist/{types/core → core}/AppLogoImage/index.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const AppLogoImage: React.FunctionComponent;
-export default AppLogoImage;
+import React from 'react';
+declare function AppLogoImage(): React.ReactElement;
+export default AppLogoImage;

package/dist/core/AppLogoImage/index.js

@@ -0,0 +1,11 @@
+import React, { Fragment } from 'react';
+import useAppConfig from '../../hooks/useAppConfig';
+import Assistive from '../../core/Assistive';
+import AppLogoPlaceholder from '../../core/AppLogoPlaceholder';
+function AppLogoImage() {
+    const { Logo, name } = useAppConfig();
+    return (React.createElement(Fragment, null,
+        React.createElement(Assistive, null, name),
+        Logo ? React.createElement(Logo, null) : React.createElement(AppLogoPlaceholder, null)));
+}
+export default AppLogoImage;

package/dist/{types/core → core}/AppLogoPlaceholder/index.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const AppLogoPlaceholder: React.FunctionComponent;
-export default AppLogoPlaceholder;
+import React from 'react';
+declare function AppLogoPlaceholder(): React.ReactElement;
+export default AppLogoPlaceholder;

package/dist/core/AppLogoPlaceholder/index.js

@@ -0,0 +1,10 @@
+/* eslint-disable max-len */
+import React from 'react';
+function AppLogoPlaceholder() {
+    return (React.createElement("svg", { height: "58", role: "img", viewBox: "0 0 58 58", width: "58", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M11.2738 41.615C8.73625 38.0625 7.25 33.7125 7.25 29C7.25 17.0375 17.0375 7.25 29 7.25C33.7125 7.25 38.0625 8.73625 41.615 11.2738L49.8075 3.08125C50.9312 1.9575 50.1338 0 48.5387 0H7.25C3.2625 0 0 3.2625 0 7.25V48.5025C0 50.1338 1.9575 50.9313 3.08125 49.7713L11.2738 41.615Z", fill: "white" }),
+        React.createElement("path", { d: "M43.4637 30.0512C43.6812 26.97 42.92 24.07 41.47 21.6412L21.6412 41.47C24.07 42.92 26.97 43.6812 30.0512 43.4637C37.1925 42.9562 42.9562 37.1925 43.4637 30.0512Z", fill: "white" }),
+        React.createElement("path", { d: "M46.7263 16.385C49.2638 19.9375 50.75 24.2875 50.75 29C50.75 40.9625 40.9625 50.75 29 50.75C24.2875 50.75 19.9375 49.2638 16.385 46.7263L8.19251 54.9188C7.06876 56.0425 7.86626 58 9.46126 58H50.75C54.7375 58 58 54.7375 58 50.75V9.49751C58 7.86626 56.0425 7.06876 54.9188 8.22876L46.7263 16.385Z", fill: "white" }),
+        React.createElement("path", { d: "M14.5362 27.9488C14.3187 31.03 15.08 33.93 16.53 36.3588L36.3587 16.53C33.93 15.08 31.03 14.3188 27.9487 14.5363C20.8075 15.0438 15.0437 20.8075 14.5362 27.9488Z", fill: "white" })));
+}
+export default AppLogoPlaceholder;

package/dist/core/Assistive/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface AssistiveProps {
+    children: React.ReactNode;
+}
+declare function Assistive({ children }: AssistiveProps): React.ReactElement;
+declare namespace Assistive {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+}
+export default Assistive;

package/dist/core/Assistive/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+function Assistive({ children }) {
+    return React.createElement("span", { className: "/*styles.root*/" }, children);
+}
+Assistive.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+export default Assistive;

package/dist/core/AuthForm/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FormProps } from '../../components/Form';
+import type { StyleVariant } from '../../utility/interfaces';
+interface AuthFormProps extends FormProps {
+    footer?: React.ReactNode;
+    icon?: string;
+    variant?: StyleVariant;
+}
+declare function AuthForm({ children, footer, icon, variant, ...formProps }: AuthFormProps): React.ReactElement;
+export default AuthForm;

package/dist/core/AuthForm/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Form from '../../components/Form';
+import AppLogo from '../../core/AppLogo';
+import Icon from '../../core/Icon';
+import Panel from '../../core/Panel';
+function AuthForm({ children, footer, icon, variant, ...formProps }) {
+    return (React.createElement("div", { className: "/*styles.root*/" },
+        React.createElement(Panel, { isPadded: true },
+            React.createElement("div", { className: "/*clsx(styles.logo,variant && styles[`logo${ucwords(variant)}`])*/", "data-testid": "auth-form-logo" }, icon ? React.createElement(Icon, { icon: icon, size: 40 }) : React.createElement(AppLogo, null)),
+            React.createElement(Form, { ...formProps }, children),
+            footer ? React.createElement("div", { className: "/*styles.footer*/" }, footer) : null)));
+}
+export default AuthForm;

package/dist/{types/core → core}/Banner/index.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const Banner: React.FunctionComponent;
-export default Banner;
+import React from 'react';
+declare function Banner(): React.ReactElement;
+export default Banner;

package/dist/core/Banner/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import AppLogo from '../../core/AppLogo';
+// Import Navigation from '../../core/Navigation';
+import MeActions from '../../core/MeActions';
+import useLayout from '../../hooks/useLayout';
+// Import styles from './Banner.module.css';
+function Banner() {
+    const { applyLayoutClassName } = useLayout();
+    return (React.createElement("header", { className: "bg-slate-800 h-screen sticky top-0" },
+        React.createElement("div", { className: "/*clsx(styles.logo, applyLayoutClassName(styles, 'logo'))*/" },
+            React.createElement(AppLogo, { isLink: true })),
+        React.createElement(MeActions, null)));
+}
+export default Banner;

package/dist/core/Calendar/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputEvent } from '../../utility/interfaces';
+interface CalendarProps {
+    disabledDates?: string[] | ((date: string) => boolean);
+    isRange?: boolean;
+    name: string;
+    onChange: (event: InputEvent<string>) => void;
+    value?: string;
+}
+declare function Calendar({ disabledDates, isRange, name, value, onChange, }: CalendarProps): React.ReactElement;
+declare namespace Calendar {
+    var propTypes: {
+        name: PropTypes.Validator<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        disabledDates: PropTypes.Requireable<NonNullable<string[] | ((...args: any[]) => any) | null | undefined>>;
+        isRange: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+    };
+}
+export default Calendar;

package/dist/core/Calendar/index.js

@@ -0,0 +1,69 @@
+'use client';
+import React, { Fragment, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import CalendarMonth from '../../core/CalendarMonth';
+import CalendarNavigation from '../../core/CalendarNavigation';
+import FormatService from '../../services/FormatService';
+const getMonthFromDate = (date) => {
+    const dt = new Date();
+    const currentMonth = `${dt.getFullYear()}-${FormatService.twoDigits(dt.getMonth() + 1)}`;
+    if (!date) {
+        return currentMonth;
+    }
+    // If the date is a range, just use the first date in the range
+    if (/,/u.exec(date)) {
+        return getMonthFromDate(date.split(',')[0]);
+    }
+    const match = /^(?<month>[0-9]{4}-[0-9]{2})-[0-9]{2}$/u.exec(date);
+    if (!match) {
+        return currentMonth;
+    }
+    /* istanbul ignore next: No way to test that there is a match, but without any groups */
+    return match.groups?.month || currentMonth;
+};
+const transformValue = (pendingValue, targetValue) => [pendingValue, targetValue].sort((first, second) => first.localeCompare(second)).join(',');
+const getPendingValue = (pendingValue, targetValue) => {
+    if (!pendingValue) {
+        return targetValue;
+    }
+    if (!/,/u.exec(pendingValue)) {
+        return transformValue(pendingValue, targetValue);
+    }
+    return targetValue;
+};
+function Calendar({ disabledDates, isRange, name, value, onChange, }) {
+    const [activeMonth, setActiveMonth] = useState(getMonthFromDate(value));
+    const [pendingValue, setPendingValue] = useState('');
+    useEffect(() => {
+        setActiveMonth(getMonthFromDate(value));
+    }, [value]);
+    const handleNavigation = (event) => {
+        setActiveMonth(event.target.value);
+    };
+    const handleChange = (event) => {
+        if (!isRange) {
+            onChange(event);
+            return;
+        }
+        const pValue = getPendingValue(pendingValue, event.target.value);
+        setPendingValue(pValue);
+        if (!/,/u.exec(pValue)) {
+            return;
+        }
+        onChange({ target: { name, value: pValue } });
+    };
+    return (React.createElement(Fragment, null,
+        React.createElement(CalendarNavigation, { month: activeMonth, name: name, onChange: handleNavigation }),
+        React.createElement(CalendarMonth, { disabledDates: disabledDates, month: activeMonth, name: name, onClick: handleChange, pendingValue: pendingValue, value: value })));
+}
+Calendar.propTypes = {
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    disabledDates: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+        PropTypes.func,
+    ]),
+    isRange: PropTypes.bool,
+    value: PropTypes.string,
+};
+export default Calendar;

package/dist/core/CalendarDay/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputEvent } from '../../utility/interfaces';
+export interface DayObject {
+    label: number;
+    date: string;
+}
+interface CalendarDayProps {
+    data: DayObject | number;
+    name: string;
+    onClick?: (event: InputEvent<string>) => void;
+    isDisabled?: boolean;
+    isHighlighted?: boolean;
+    isSelected?: boolean;
+}
+declare function CalendarDay({ data, isDisabled, isHighlighted, isSelected, name, onClick, }: CalendarDayProps): React.ReactElement;
+declare namespace CalendarDay {
+    var propTypes: {
+        data: PropTypes.Validator<NonNullable<NonNullable<number | NonNullable<PropTypes.InferProps<{
+            date: PropTypes.Validator<string>;
+            label: PropTypes.Validator<number>;
+        }>>>>>;
+        name: PropTypes.Validator<string>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isHighlighted: PropTypes.Requireable<boolean>;
+        isSelected: PropTypes.Requireable<boolean>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default CalendarDay;

package/dist/core/CalendarDay/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+function CalendarDay({ data, isDisabled, isHighlighted, isSelected, name, onClick, }) {
+    if (typeof data === 'number') {
+        return React.createElement("td", { className: "/*styles.root*/" });
+    }
+    const handleClick = () => {
+        if (onClick) {
+            const simpleEvent = { target: { name, value: data.date } };
+            onClick(simpleEvent);
+        }
+    };
+    return (React.createElement("td", { className: "/*clsx(\n                styles.root,\n                isHighlighted && styles.rootIsHighlighted,\n                isSelected && styles.rootIsSelected,\n                DateService.isToday(data.date) && styles.rootIsToday,\n                isDisabled && styles.rootIsDisabled\n            )*/", "data-testid": `calendar-day-root-${data.label}` },
+        React.createElement("button", { className: "/*styles.control*/", disabled: isDisabled, onClick: handleClick, type: "button" }, data.label)));
+}
+CalendarDay.propTypes = {
+    data: PropTypes.oneOfType([
+        PropTypes.number.isRequired,
+        PropTypes.shape({
+            date: PropTypes.string.isRequired,
+            label: PropTypes.number.isRequired,
+        }).isRequired,
+    ]).isRequired,
+    name: PropTypes.string.isRequired,
+    isDisabled: PropTypes.bool,
+    isHighlighted: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    onClick: PropTypes.func,
+};
+export default CalendarDay;

package/dist/core/CalendarMonth/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputEvent } from '../../utility/interfaces';
+interface CalendarMonthProps {
+    disabledDates?: string[] | ((date: string) => boolean);
+    name: string;
+    month: string;
+    onClick?: (event: InputEvent<string>) => void;
+    pendingValue: string;
+    value?: string;
+}
+declare function CalendarMonth({ disabledDates, name, month, onClick, pendingValue, value, }: CalendarMonthProps): React.ReactElement;
+declare namespace CalendarMonth {
+    var propTypes: {
+        month: PropTypes.Validator<string>;
+        name: PropTypes.Validator<string>;
+        pendingValue: PropTypes.Validator<string>;
+        disabledDates: PropTypes.Requireable<NonNullable<string[] | ((...args: any[]) => any) | null | undefined>>;
+        value: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default CalendarMonth;

package/dist/core/CalendarMonth/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DateService from '../../services/DateService';
+import CalendarWeek from '../../core/CalendarWeek';
+// Import styles from './CalendarMonth.module.css';
+const DECIMAL = 10;
+const DAYS_IN_WEEK = 7;
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const getWeeks = (month) => {
+    const firstDay = `${month}-01`;
+    const firstDayofMonth = DateService.getDayOfWeek(firstDay);
+    const daysInMonth = DateService.getDaysInMonth(firstDay);
+    const lastDayofMonth = DateService.getDayOfWeek(`${month}-${daysInMonth}`);
+    const beforeDays = Array(firstDayofMonth).fill(0);
+    const afterDays = Array(DAYS_IN_WEEK - 1 - lastDayofMonth).fill(0);
+    const monthDays = Array.from({ length: daysInMonth }).map((_item, index) => ({
+        label: index + 1,
+        date: `${month}-${index + 1 < DECIMAL ? '0' : ''}${index + 1}`,
+    }));
+    const days = [...beforeDays, ...monthDays, ...afterDays];
+    const weeks = [];
+    for (let index = 0; index < days.length; index += DAYS_IN_WEEK) {
+        weeks.push(days.slice(index, index + DAYS_IN_WEEK));
+    }
+    return weeks.filter((week) => JSON.stringify(week) !== '[0,0,0,0,0,0,0]');
+};
+function CalendarMonth({ disabledDates, name, month, onClick, pendingValue, value, }) {
+    const weeks = getWeeks(month);
+    return (React.createElement("table", { className: "/*styles.root*/" },
+        React.createElement("thead", null,
+            React.createElement("tr", null, DAYS.map((item) => (React.createElement("th", { key: item, className: "/*styles.head*/" }, item))))),
+        React.createElement("tbody", null, weeks.map((item) => (React.createElement(CalendarWeek, { key: typeof item[0] === 'number' ? item[0] : item[0].date, data: item, disabledDates: disabledDates, name: name, onClick: onClick, pendingValue: pendingValue, value: value }))))));
+}
+CalendarMonth.propTypes = {
+    month: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    pendingValue: PropTypes.string.isRequired,
+    disabledDates: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string.isRequired),
+        PropTypes.func,
+    ]),
+    value: PropTypes.string,
+    onClick: PropTypes.func,
+};
+export default CalendarMonth;

package/dist/core/CalendarNavigation/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputEvent } from '../../utility/interfaces';
+interface CalendarNavigationProps {
+    month: string;
+    name: string;
+    onChange: (event: InputEvent<string>) => void;
+}
+declare function CalendarNavigation({ month, name, onChange, }: CalendarNavigationProps): React.ReactElement;
+declare namespace CalendarNavigation {
+    var propTypes: {
+        month: PropTypes.Validator<string>;
+        name: PropTypes.Validator<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export default CalendarNavigation;

package/dist/core/CalendarNavigation/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DateService from '../../services/DateService';
+import FormatService from '../../services/FormatService';
+import IconButton from '../../core/IconButton';
+function CalendarNavigation({ month, name, onChange, }) {
+    const handleChange = (value) => {
+        onChange({ target: { name, value } });
+    };
+    const handlePrevious = () => handleChange(DateService.subMonths(month, 1));
+    const handleNext = () => handleChange(DateService.addMonths(month, 1));
+    return (React.createElement("div", { className: "/*styles.root*/" },
+        React.createElement("p", { className: "/*styles.title*/" }, FormatService.date(`${month}-01`, 'MMMM y')),
+        React.createElement("i", { className: "/*clsx(styles.control, styles.controlPrevious)*/" },
+            React.createElement(IconButton, { icon: "arrowLeft", onClick: handlePrevious, size: "sm" }, "Previous")),
+        React.createElement("i", { className: "/*clsx(styles.control, styles.controlNext)*/" },
+            React.createElement(IconButton, { icon: "arrowRight", onClick: handleNext, size: "sm" }, "Next"))));
+}
+CalendarNavigation.propTypes = {
+    month: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+};
+export default CalendarNavigation;