@via-profit/ui-kit 0.1.0-rc.1

package/dist/Calendar/CalendarDateContainer.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarDateContainer = styled_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+`;
+exports.default = react_1.default.memo(CalendarDateContainer);

package/dist/Calendar/CalendarEmptyCell.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarEmptyCellProps = React.HTMLAttributes<HTMLButtonElement>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarEmptyCellProps & React.RefAttributes<HTMLButtonElement>>>;
+export default _default;

package/dist/Calendar/CalendarEmptyCell.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Elem = styled_1.default.span `
+  font-size: 0.8em;
+  width: 3em;
+  height: 3em;
+  min-width: 0;
+`;
+const CalendarEmptyCell = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Elem, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarEmptyCell));

package/dist/Calendar/CalendarMonthControl.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CalendarMonthControlProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly displayIcon: 'prev' | 'next';
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarMonthControlProps & React.RefAttributes<HTMLButtonElement>>>;
+export default _default;

package/dist/Calendar/CalendarMonthControl.js

@@ -0,0 +1,49 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const IconChevronLeft_1 = __importDefault(require("./IconChevronLeft"));
+const IconChevronRight_1 = __importDefault(require("./IconChevronRight"));
+const Btn = styled_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1em;
+  width: 2.25em;
+  height: 2.25em;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  outline: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
+  color: ${({ theme }) => theme.colors.textPrimary().toString()};
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundPrimary().darken(0.1).toString()};
+  }
+  &:focus-visible {
+    border-color: ${({ theme }) => theme.colors.accentPrimary().toString()};
+  }
+  opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
+`;
+const CalendarMonthControl = (props, ref) => {
+    const { displayIcon } = props, restProps = __rest(props, ["displayIcon"]);
+    return (react_1.default.createElement(Btn, Object.assign({ type: "button" }, restProps, { ref: ref }), displayIcon === 'next' ? react_1.default.createElement(IconChevronRight_1.default, null) : react_1.default.createElement(IconChevronLeft_1.default, null)));
+};
+exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarMonthControl));

package/dist/Calendar/CalendarPaper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const CalendarPaper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default CalendarPaper;

package/dist/Calendar/CalendarPaper.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarPaper = styled_1.default.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  background-color: ${({ theme }) => theme.colors.backgroundPrimary().toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
+  padding: 0.4em;
+  max-width: 17.6em;
+  max-height: 20.4em;
+  box-shadow: 0 4px 24px
+    ${({ theme }) => theme.colors.backgroundPrimary().darken(0.5).alpha(0.6).toString()};
+`;
+exports.default = CalendarPaper;

package/dist/Calendar/CalendarTopBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarTopBarProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/Calendar/CalendarTopBar.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Container = styled_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5em;
+`;
+const CalendarTopBar = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }),
+        react_1.default.createElement(react_1.default.Fragment, null, children)));
+};
+exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarTopBar));

package/dist/Calendar/CalendarWeekDayLabel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export default _default;

package/dist/Calendar/CalendarWeekDayLabel.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarWeekDayLabel = styled_1.default.div `
+  text-align: center;
+  font-weight: 200;
+  font-size: 0.8em;
+  user-select: none;
+  width: 3em;
+  height: 3em;
+  color: ${({ theme }) => theme.colors.textSecondary().toString()};
+`;
+exports.default = react_1.default.memo(CalendarWeekDayLabel);

package/dist/Calendar/CalendarWeekDaysBar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Week } from './use-calendar';
+export type WeekNameLabelFormat = 'short' | 'long' | 'narrow';
+export interface CalendarTopBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly week: Week;
+    readonly format: WeekNameLabelFormat;
+    readonly locale?: string;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/Calendar/CalendarWeekDaysBar.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarWeekDayLabel_1 = __importDefault(require("./CalendarWeekDayLabel"));
+const Container = styled_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CalendarWeekDaysBar = (props, ref) => {
+    const { locale, week, format } = props, restProps = __rest(props, ["locale", "week", "format"]);
+    const weekDayLabels = react_1.default.useMemo(() => week.days.map(day => new Intl.DateTimeFormat(locale, {
+        weekday: format,
+    }).format(day.date)), [format, locale, week]);
+    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), weekDayLabels.map(label => (react_1.default.createElement(CalendarWeekDayLabel_1.default, { key: label }, label)))));
+};
+exports.default = react_1.default.memo(react_1.default.forwardRef(CalendarWeekDaysBar));

package/dist/Calendar/CalendarWeekRow.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export default _default;

package/dist/Calendar/CalendarWeekRow.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarWeekRow = styled_1.default.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+`;
+exports.default = react_1.default.memo(CalendarWeekRow);

package/dist/Calendar/IconChevronLeft.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/dist/Calendar/IconChevronLeft.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const IconChevronLeft = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "M328 112 184 256l144 144" })));
+exports.default = react_1.default.forwardRef(IconChevronLeft);

package/dist/Calendar/IconChevronRight.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/dist/Calendar/IconChevronRight.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const IconChevronRight = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "m184 112 144 144-144 144" })));
+exports.default = react_1.default.forwardRef(IconChevronRight);

package/dist/Calendar/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { WeekDayName } from './use-calendar';
+import { WeekNameLabelFormat } from './CalendarWeekDaysBar';
+export interface CalendarProps {
+    readonly date?: Date;
+    readonly locale?: string;
+    readonly selected?: Date[];
+    readonly onSelectDate?: (date: Date) => void;
+    readonly onDateChange?: (date: Date) => void;
+    readonly maxDate?: Date;
+    readonly minDate?: Date;
+    readonly weekStartDay?: WeekDayName;
+    readonly weekDayLabelFormat?: WeekNameLabelFormat;
+    readonly displayLeadingZero?: boolean;
+}
+export * from './use-calendar';
+declare const _default: React.NamedExoticComponent<CalendarProps>;
+export default _default;

package/dist/Calendar/index.js

@@ -0,0 +1,166 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const use_calendar_1 = __importDefault(require("./use-calendar"));
+const CalendarCell_1 = __importDefault(require("./CalendarCell"));
+const CalendarEmptyCell_1 = __importDefault(require("./CalendarEmptyCell"));
+const CalendarPaper_1 = __importDefault(require("./CalendarPaper"));
+const CalendarWeekRow_1 = __importDefault(require("./CalendarWeekRow"));
+const CalendarDateContainer_1 = __importDefault(require("./CalendarDateContainer"));
+const CalendarTopBar_1 = __importDefault(require("./CalendarTopBar"));
+const CalendarMonthControl_1 = __importDefault(require("./CalendarMonthControl"));
+const CalendarWeekDaysBar_1 = __importDefault(require("./CalendarWeekDaysBar"));
+const Menu_1 = __importDefault(require("../Menu"));
+const ButtonBase_1 = __importDefault(require("../Button/ButtonBase"));
+__exportStar(require("./use-calendar"), exports);
+const Calendar = props => {
+    const { date, locale, selected, maxDate, minDate, weekStartDay, weekDayLabelFormat, displayLeadingZero, onDateChange, onSelectDate, } = props;
+    const [yearsMenuEl, setYearsMenuEl] = react_1.default.useState(null);
+    const [monthMenuEl, setMonthMenuEl] = react_1.default.useState(null);
+    const [selectedDates, setSelectedDates] = react_1.default.useState([...(selected || [])]);
+    const calendar = (0, use_calendar_1.default)({
+        weekStartDay,
+        displayLeadingZero,
+        date,
+        minDate,
+        maxDate,
+        locale,
+    });
+    const currentMonthLabel = react_1.default.useMemo(() => {
+        const intl = new Intl.DateTimeFormat(calendar.locale, {
+            month: 'long',
+        });
+        const title = intl.format(calendar.date);
+        return title.charAt(0).toUpperCase() + title.slice(1);
+    }, [calendar.date, calendar.locale]);
+    react_1.default.useEffect(() => {
+        calendar.dispatch({
+            type: 'partial',
+            payload: props,
+        });
+    }, [calendar, props]);
+    // If selected props has been changed
+    react_1.default.useEffect(() => {
+        const prev = selectedDates;
+        const next = [...(selected || [])];
+        const has1 = prev.every(prevDate => next.find(nextDate => calendar.isSameDay(prevDate, nextDate)));
+        const has2 = next.every(nextDate => prev.find(prevDate => calendar.isSameDay(nextDate, prevDate)));
+        const isEqual = has1 && has2;
+        if (!isEqual) {
+            setSelectedDates([...(selected || [])]);
+        }
+    }, [calendar, selected, selectedDates]);
+    const [year, month] = react_1.default.useMemo(() => [calendar.date.getFullYear(), calendar.date.getMonth()], [calendar.date]);
+    const handlePrevClick = react_1.default.useCallback(() => {
+        const d = new Date(year, month - 1, 1);
+        if (!calendar.isSameDay(d, calendar.date)) {
+            calendar.setDate(d);
+            if (typeof onDateChange === 'function') {
+                onDateChange(d);
+            }
+        }
+    }, [year, month, calendar, onDateChange]);
+    const handleNextClick = react_1.default.useCallback(() => {
+        const d = new Date(year, month + 1, 1);
+        if (!calendar.isSameDay(d, calendar.date)) {
+            calendar.setDate(d);
+            if (typeof onDateChange === 'function') {
+                onDateChange(d);
+            }
+        }
+    }, [year, month, calendar, onDateChange]);
+    const handleDayClick = react_1.default.useCallback((day) => () => {
+        if (typeof onSelectDate === 'function') {
+            onSelectDate(day);
+        }
+    }, [onSelectDate]);
+    const getDayLabel = react_1.default.useCallback((day) => {
+        const dateNum = day.getDate();
+        if (!calendar.displayLeadingZero) {
+            return dateNum.toString();
+        }
+        const numStr = `0${dateNum}`;
+        return numStr.substring(numStr.length - 2);
+    }, [calendar.displayLeadingZero]);
+    const years = react_1.default.useMemo(() => {
+        const y = [];
+        for (let year = calendar.minDate.getFullYear(); year >= calendar.minDate.getFullYear() && year <= calendar.maxDate.getFullYear(); year++) {
+            y.push(year);
+        }
+        return y;
+    }, [calendar.maxDate, calendar.minDate]);
+    const monthes = react_1.default.useMemo(() => {
+        const m = [];
+        const y = calendar.date.getFullYear();
+        for (let index = 0; index < 12; index++) {
+            const d = new Date(y, index, 1, 0, 0, 0);
+            if (d.getTime() > calendar.minDate.getTime() && d.getTime() < calendar.maxDate.getTime()) {
+                m.push(index);
+            }
+        }
+        return m;
+    }, [calendar.date, calendar.maxDate, calendar.minDate]);
+    return (react_1.default.createElement(CalendarPaper_1.default, null,
+        react_1.default.createElement(CalendarTopBar_1.default, null,
+            react_1.default.createElement(CalendarMonthControl_1.default, { displayIcon: "prev", onClick: handlePrevClick }),
+            react_1.default.createElement("span", null,
+                react_1.default.createElement(ButtonBase_1.default, { type: "button", onClick: event => setMonthMenuEl(event.currentTarget) }, currentMonthLabel),
+                react_1.default.createElement(ButtonBase_1.default, { type: "button", onClick: event => setYearsMenuEl(event.currentTarget) }, calendar.date.getFullYear()),
+                react_1.default.createElement(Menu_1.default, { value: calendar.date.getFullYear(), isOpen: Boolean(yearsMenuEl), anchorElement: yearsMenuEl, onRequestClose: () => setYearsMenuEl(null), onSelectItem: item => {
+                        const newDate = new Date(calendar.date);
+                        newDate.setFullYear(item);
+                        newDate.setMonth(11 - 1);
+                        setYearsMenuEl(null);
+                        if (calendar.date.getFullYear() !== newDate.getFullYear()) {
+                            calendar.setDate(newDate);
+                            if (typeof onDateChange === 'function') {
+                                onDateChange(newDate);
+                            }
+                        }
+                    }, items: years, renderItem: item => item.item }),
+                react_1.default.createElement(Menu_1.default, { value: { value: calendar.date.getMonth(), label: 'month' }, isOpen: Boolean(monthMenuEl), anchorElement: monthMenuEl, onRequestClose: () => setMonthMenuEl(null), onSelectItem: item => {
+                        const newDate = new Date(calendar.date);
+                        newDate.setMonth(item.value);
+                        setMonthMenuEl(null);
+                        if (calendar.date.getMonth() !== newDate.getMonth()) {
+                            calendar.setDate(newDate);
+                            if (typeof onDateChange === 'function') {
+                                onDateChange(newDate);
+                            }
+                        }
+                    }, items: monthes.map(monthIndex => {
+                        const intl = new Intl.DateTimeFormat(calendar.locale, {
+                            month: 'long',
+                        });
+                        return {
+                            value: monthIndex,
+                            label: intl.format(new Date(calendar.date.getFullYear(), monthIndex, 1, 0, 0, 0, 0)),
+                        };
+                    }), renderItem: item => item.item.label })),
+            react_1.default.createElement(CalendarMonthControl_1.default, { displayIcon: "next", onClick: handleNextClick })),
+        react_1.default.createElement(CalendarWeekDaysBar_1.default, { locale: calendar.locale, week: calendar.weeks[0], format: weekDayLabelFormat || 'short' }),
+        react_1.default.createElement(CalendarDateContainer_1.default, null, calendar.weeks.map(week => (react_1.default.createElement(CalendarWeekRow_1.default, { key: week.weekNumber.toString() }, week.days.map(day => {
+            if (day.date.getMonth() === calendar.date.getMonth()) {
+                return (react_1.default.createElement(CalendarCell_1.default, { key: day.date.getTime(), isToday: day.isToday, isDisabled: day.isDisabled, isSelected: selectedDates.find(s => calendar.isSameDay(s, day.date)) !== undefined, onClick: handleDayClick(day.date) }, getDayLabel(day.date)));
+            }
+            return react_1.default.createElement(CalendarEmptyCell_1.default, { key: day.date.getTime() });
+        })))))));
+};
+exports.default = react_1.default.memo(Calendar);

package/dist/Calendar/use-calendar.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export type WeekDayName = 'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
+export type Day = {
+    readonly date: Date;
+    readonly isToday: boolean;
+    readonly isDisabled: boolean;
+};
+export type Week = {
+    readonly weekNumber: number;
+    readonly days: Day[];
+};
+export interface UseCalendarProps {
+    readonly date?: Date;
+    readonly minDate?: Date;
+    readonly maxDate?: Date;
+    readonly locale?: string;
+    readonly weekStartDay?: WeekDayName;
+    readonly displayLeadingZero?: boolean;
+}
+type CalendarState = {
+    readonly date: Date;
+    readonly minDate: Date;
+    readonly maxDate: Date;
+    readonly locale: string;
+    readonly weekStartDay: WeekDayName;
+    readonly displayLeadingZero: boolean;
+};
+type CalendarActionPartial = {
+    readonly type: 'partial';
+    readonly payload: Partial<CalendarState>;
+};
+type CalendarActionDate = {
+    readonly type: 'date';
+    readonly payload: Date;
+};
+type CalendarActions = CalendarActionPartial | CalendarActionDate;
+export declare const useCalendar: (props: UseCalendarProps) => {
+    isSameDay: (a: Date, b: Date) => boolean;
+    isToday: (dateValue: Date) => boolean;
+    setDate: (value: Date) => void;
+    dispatch: React.Dispatch<CalendarActions>;
+    minDate: Date;
+    maxDate: Date;
+    weeks: Week[];
+    weekStartDay: WeekDayName;
+    locale: string;
+    displayLeadingZero: boolean;
+    date: Date;
+};
+export default useCalendar;