@veracity/vui 2.14.0-beta.0 → 2.14.0

package/dist/cjs/calendar/calendar.d.ts

@@ -0,0 +1,5 @@
+import { CalendarProps } from './calendar.types';
+/** [Beta] Displays calendar. */
+export declare const Calendar: import("../core").VuiComponent<"div", CalendarProps>;
+export default Calendar;
+//# sourceMappingURL=calendar.d.ts.map

package/dist/cjs/calendar/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAsD,MAAM,kBAAkB,CAAA;AAepG,gCAAgC;AAChC,eAAO,MAAM,QAAQ,sDAuHnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}

package/dist/cjs/calendar/calendar.js

@@ -0,0 +1,130 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 });
+exports.Calendar = void 0;
+const react_1 = __importStar(require("react"));
+const box_1 = __importDefault(require("../box"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const components_1 = require("./components");
+const hooks_1 = require("./hooks");
+const utils_2 = require("./utils");
+/** [Beta] Displays calendar. */
+exports.Calendar = (0, core_1.vui)((props, ref) => {
+    const _a = (0, core_1.omitThemingProps)(props), { boundaries, className, fixedNumberOfWeeks = false, disabled, isStartDate, mode, onSelectDates, selectedDates } = _a, rest = __rest(_a, ["boundaries", "className", "fixedNumberOfWeeks", "disabled", "isStartDate", "mode", "onSelectDates", "selectedDates"]);
+    const styles = (0, core_1.useStyleConfig)('Calendar', props);
+    const currentDateRef = (0, react_1.useRef)((0, utils_2.isFrom)(mode) || (0, utils_2.isExact)(mode) ? selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.startDate : selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.endDate);
+    /**
+     * Effect to reset viewDate when selectedDates changes (onReset)
+     */
+    (0, react_1.useEffect)(() => {
+        currentDateRef.current = (0, utils_2.isFrom)(mode) || (0, utils_2.isExact)(mode) ? selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.startDate : selectedDates === null || selectedDates === void 0 ? void 0 : selectedDates.endDate;
+        currentDateRef.current && setViewDate(currentDateRef.current);
+    }, [selectedDates]);
+    const calendarRef = (0, react_1.useRef)(null);
+    const defaultViewMonth = (0, hooks_1.useDefaultViewMonth)({
+        boundaries,
+        selectedDate: currentDateRef.current,
+        isStartDate
+    });
+    const [timeUnitMode, setTimeUnitMode] = (0, react_1.useState)('day');
+    const [viewDate, setViewDate] = (0, react_1.useState)(defaultViewMonth);
+    /**
+     * Handles clicking next/prev in header
+     */
+    const onChangeViewItem = (direction) => {
+        var _a;
+        const newViewMonth = (0, utils_2.processViewDate)(viewDate, direction, timeUnitMode, (_a = calendarRef === null || calendarRef === void 0 ? void 0 : calendarRef.current) === null || _a === void 0 ? void 0 : _a.items);
+        newViewMonth && setViewDate(newViewMonth);
+    };
+    /**
+     * Handles clicking on a day
+     */
+    const onSelectDay = (clickedDate) => () => {
+        updateDateState(clickedDate);
+        setViewDate(clickedDate);
+    };
+    /**
+     * Handles clicking on a month
+     */
+    const onSelectMonth = (clickedDate) => () => {
+        const processedNewDate = (0, utils_2.processSelectMonth)(clickedDate, mode, boundaries);
+        updateDateState(processedNewDate);
+        setViewDate(processedNewDate);
+        setTimeUnitMode('day');
+    };
+    /**
+     * Handles clicking on a year
+     */
+    const onSelectYear = (clickedDate) => () => {
+        const processedNewDate = (0, utils_2.processSelectYear)(clickedDate, mode, boundaries);
+        updateDateState(processedNewDate);
+        setViewDate(processedNewDate);
+        setTimeUnitMode('month');
+    };
+    /**
+     * Send update date to parent component
+     */
+    const updateDateState = (newDate) => {
+        const dateRange = Object.assign({}, selectedDates);
+        if (dateRange) {
+            if ((0, utils_2.isTo)(mode))
+                dateRange.endDate = newDate;
+            else
+                dateRange.startDate = newDate;
+        }
+        if (newDate && !disabled)
+            onSelectDates && onSelectDates(dateRange);
+    };
+    const calendar = (calendarRef.current = (0, hooks_1.useCalendar)({
+        boundaries,
+        mode,
+        selectedDates,
+        timeUnitMode,
+        viewDate,
+        fixedNumberOfWeeks
+    }));
+    return (react_1.default.createElement(box_1.default, Object.assign({ className: (0, utils_1.cs)('vui-calendar', className), column: true, cursor: "default", minW: 280, position: "relative", ref: ref, w: "fit-content" }, styles, rest),
+        react_1.default.createElement(components_1.CalendarHeader, { nextDisabled: calendar.nextDisabled, onChangeViewItem: onChangeViewItem, onSetTimeUnitMode: (mode) => setTimeUnitMode(mode), prevDisabled: calendar.prevDisabled, timeUnitMode: timeUnitMode, viewMonth: viewDate }),
+        (0, utils_2.isDay)(timeUnitMode) && react_1.default.createElement(components_1.DayPicker, { calendar: calendar, onSelectDay: onSelectDay }),
+        (0, utils_2.isMonth)(timeUnitMode) && react_1.default.createElement(components_1.MonthPicker, { calendar: calendar, onSelectMonth: onSelectMonth }),
+        (0, utils_2.isYear)(timeUnitMode) && react_1.default.createElement(components_1.YearPicker, { calendar: calendar, onSelectYear: onSelectYear })));
+});
+exports.Calendar.displayName = 'Calendar';
+exports.default = exports.Calendar;

package/dist/cjs/calendar/calendar.styles.d.ts

@@ -0,0 +1,14 @@
+import { ItemProps } from './calendar.types';
+export declare const boundary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const current: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const isDisabled: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const isHidden: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const isToday: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const hover: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const isSelected: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const CalendarItem: import("styled-components").StyledComponent<import("../core").VuiComponent<"a", import("../link").LinkProps> & {
+    Icon: import("../core").VuiComponent<"svg", import("..").IconProps>;
+    Text: import("../core").VuiComponent<"span", import("..").TProps>;
+}, import("styled-components").DefaultTheme, ItemProps, never>;
+export declare const CalendarItemsContainer: import("styled-components").StyledComponent<import("../core").VuiComponent<"div", import("../box").BoxProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=calendar.styles.d.ts.map

package/dist/cjs/calendar/calendar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,eAAO,MAAM,QAAQ,oIAIpB,CAAA;AAED,eAAO,MAAM,OAAO,oIAInB,CAAA;AAED,eAAO,MAAM,UAAU,oIAGtB,CAAA;AAED,eAAO,MAAM,QAAQ,oIAEpB,CAAA;AAED,eAAO,MAAM,OAAO,oIAEnB,CAAA;AAED,eAAO,MAAM,KAAK,oIAIjB,CAAA;AAED,eAAO,MAAM,UAAU,oIAItB,CAAA;AAED,eAAO,MAAM,YAAY;;;8DAsBxB,CAAA;AAED,eAAO,MAAM,sBAAsB,oKAQlC,CAAA"}

package/dist/cjs/calendar/calendar.styles.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarItemsContainer = exports.CalendarItem = exports.isSelected = exports.hover = exports.isToday = exports.isHidden = exports.isDisabled = exports.current = exports.boundary = void 0;
+const box_1 = __importDefault(require("../box"));
+const core_1 = require("../core");
+const link_1 = __importDefault(require("../link"));
+exports.boundary = (0, core_1.css) `
+  background-color: ${core_1.th.color('seaBlue.main')};
+  color: white !important;
+  border-radius: 0;
+`;
+exports.current = (0, core_1.css) `
+  background-color: ${core_1.th.color('seaBlue.main')};
+  color: white !important;
+  border-radius: 0;
+`;
+exports.isDisabled = (0, core_1.css) `
+  color: ${core_1.th.color('sandstone.main')} !important;
+  cursor: not-allowed;
+`;
+exports.isHidden = (0, core_1.css) `
+  color: ${core_1.th.color('darkBlue.75')} !important;
+`;
+exports.isToday = (0, core_1.css) `
+  border: 1px solid ${core_1.th.color('seaBlue.main')};
+`;
+exports.hover = (0, core_1.css) `
+  background-color: ${core_1.th.color('skyBlue.85')};
+  color: ${core_1.th.color('seaBlue.main')};
+  border-radius: 0;
+`;
+exports.isSelected = (0, core_1.css) `
+  background-color: ${core_1.th.color('skyBlue.85')};
+  border-radius: 0;
+  color: white;
+`;
+exports.CalendarItem = (0, core_1.styled)(link_1.default) `
+  aspect-ratio: 1;
+  border: 0;
+  cursor: pointer;
+  height: 100%;
+  justify-content: center;
+  text-decoration: none;
+  width: 100%;
+
+  ${p => p.isHidden && exports.isHidden}
+  ${p => p.isToday && exports.isToday}
+  ${p => p.isDisabled && exports.isDisabled}
+    ${p => p.isSelected && exports.isSelected}
+    ${p => p.boundary && exports.boundary}
+    ${p => p.current && exports.current}
+
+    &:hover {
+    color: inherit;
+    text-decoration: none;
+
+    ${p => !p.isDisabled && exports.hover}
+  }
+`;
+exports.CalendarItemsContainer = (0, core_1.styled)(box_1.default) `
+  align-items: center;
+  column-gap: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 62px);
+  justify-items: center;
+  row-gap: 0;
+`;

package/dist/cjs/calendar/calendar.types.d.ts

@@ -0,0 +1,81 @@
+import { BoxProps } from '../box';
+import { ThemingProps } from '../theme';
+export interface DateRange {
+    startDate?: Date;
+    endDate?: Date;
+}
+export type FlowDirection = 'next' | 'prev';
+/**
+ * Mode for this calendar
+ * Should it handle from date, to date or single date mode
+ */
+export type CalendarMode = 'exact' | 'from' | 'to' | 'range';
+export interface DefaultViewMonthProps {
+    boundaries?: DateRange;
+    isStartDate?: boolean;
+    selectedDate?: Date;
+}
+export interface MonthProps {
+    boundaries?: DateRange;
+    fixedNumberOfWeeks?: boolean;
+    mode: CalendarMode;
+    selectedDates?: DateRange;
+    timeUnitMode?: TimeUnitMode;
+    viewDate: Date;
+}
+export type ItemProps = {
+    boundary?: boolean;
+    current?: boolean;
+    isDisabled?: boolean;
+    isHidden?: boolean;
+    isToday?: boolean;
+    isSelected?: boolean;
+};
+/**
+ * Single time item like day in a month, month in a year and year in multiple years
+ */
+export interface TimeItem {
+    /** item is at the edge for a range, marking either start or end of it */
+    boundary: boolean;
+    /** item is clicked and selected by the user */
+    current: boolean;
+    /** the actual time item */
+    date: Date;
+    /** disabled because out of bounds */
+    isDisabled: boolean;
+    /** item should be hidden, for days we hide days that are not in the current month,
+     * but still are rendered due to weekDays */
+    isHidden: boolean;
+    /** item is in the selected range between two dates */
+    isSelected: boolean;
+    /** the date is today*/
+    isToday: boolean;
+}
+/**
+ * All the date items in a view and whether next/prev button should be disabled
+ */
+export interface TimeResult {
+    items: TimeItem[];
+    nextDisabled: boolean;
+    prevDisabled: boolean;
+}
+/**
+ * Time mode for calendar, display days in month, months in year or years in multiple years
+ */
+export type TimeUnitMode = 'day' | 'month' | 'year';
+export type CalendarProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Calendar'> & {
+    /** Allowed range to select from */
+    boundaries?: DateRange;
+    className?: string;
+    disabled?: boolean;
+    /** Including always 6 weeks into a month (used to have stable height in the calendar) */
+    fixedNumberOfWeeks?: boolean;
+    isStartDate?: boolean;
+    /** Calendar select mode: 'exact' | 'from' | 'to' | 'range' @default 'exact' */
+    mode: CalendarMode;
+    /** On selecting a day */
+    onSelectDates?: (value: DateRange) => void;
+    /** Selected date */
+    selectedDates?: DateRange;
+};
+//# sourceMappingURL=calendar.types.d.ts.map

package/dist/cjs/calendar/calendar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.types.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAA;AAE3C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,CAAA;AAE5D,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,IAAI,EAAE,YAAY,CAAA;IAClB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,QAAQ,EAAE,IAAI,CAAA;CACf;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,yEAAyE;IACzE,QAAQ,EAAE,OAAO,CAAA;IACjB,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;IAChB,2BAA2B;IAC3B,IAAI,EAAE,IAAI,CAAA;IACV,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAA;IACnB;gDAC4C;IAC5C,QAAQ,EAAE,OAAO,CAAA;IACjB,sDAAsD;IACtD,UAAU,EAAE,OAAO,CAAA;IACnB,uBAAuB;IACvB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;CACtB;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAA;AAEnD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,GAC5D,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,mCAAmC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yFAAyF;IACzF,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+EAA+E;IAC/E,IAAI,EAAE,YAAY,CAAA;IAClB,yBAAyB;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IAC1C,oBAAoB;IACpB,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA"}

package/dist/cjs/calendar/calendar.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/calendar/components/calendarHeader.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { FlowDirection, TimeUnitMode } from '../calendar.types';
+type Props = {
+    nextDisabled?: boolean;
+    onChangeViewItem: (direction: FlowDirection) => void;
+    onSetTimeUnitMode: (mode: TimeUnitMode) => void;
+    prevDisabled?: boolean;
+    timeUnitMode: TimeUnitMode;
+    viewMonth: Date;
+};
+/**
+ * Header for the calendar
+ */
+export declare const CalendarHeader: FC<Props>;
+export {};
+//# sourceMappingURL=calendarHeader.d.ts.map

package/dist/cjs/calendar/components/calendarHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendarHeader.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/calendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAG/D,KAAK,KAAK,GAAG;IACX,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAA;IACpD,iBAAiB,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,IAAI,CAAA;CAChB,CAAA;AAID;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAiCpC,CAAA"}

package/dist/cjs/calendar/components/calendarHeader.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = __importDefault(require("../../box"));
+const button_1 = require("../../button");
+const utils_1 = require("../../utils");
+const timeUnitHeader_1 = require("./timeUnitHeader");
+const size = 40;
+/**
+ * Header for the calendar
+ */
+const CalendarHeader = ({ nextDisabled, onChangeViewItem, onSetTimeUnitMode, prevDisabled, timeUnitMode, viewMonth }) => (react_1.default.createElement(box_1.default, { borderBottom: "1px solid lightgray", centerV: true, className: (0, utils_1.cs)('vui-calendar-header') },
+    react_1.default.createElement(box_1.default, { className: "vui-calendar-header-left" },
+        react_1.default.createElement(timeUnitHeader_1.TimeUnitHeader, { onSetTimeUnitMode: onSetTimeUnitMode, timeUnitMode: timeUnitMode, viewMonth: viewMonth })),
+    react_1.default.createElement(box_1.default, { className: "vui-calendar-header-right", flex: "1", justify: "flex-end" },
+        react_1.default.createElement(button_1.IconButton, { className: "icon", disabled: prevDisabled, h: size, icon: "falChevronLeft", onClick: () => onChangeViewItem('prev'), size: "sm", w: size }),
+        react_1.default.createElement(button_1.IconButton, { className: "icon", disabled: nextDisabled, h: size, icon: "falChevronRight", onClick: () => onChangeViewItem('next'), size: "sm", w: size }))));
+exports.CalendarHeader = CalendarHeader;

package/dist/cjs/calendar/components/dayPicker.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TimeResult } from '../calendar.types';
+type DayPickerProps = {
+    calendar: TimeResult;
+    onSelectDay?: (date: Date) => void;
+};
+export declare const DayPicker: ({ calendar, onSelectDay }: DayPickerProps) => JSX.Element;
+export {};
+//# sourceMappingURL=dayPicker.d.ts.map

package/dist/cjs/calendar/components/dayPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dayPicker.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/dayPicker.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAa,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGzD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,UAAU,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACnC,CAAA;AAiBD,eAAO,MAAM,SAAS,8BAA+B,cAAc,gBAyBlE,CAAA"}

package/dist/cjs/calendar/components/dayPicker.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DayPicker = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = __importDefault(require("../../box"));
+const core_1 = require("../../core");
+const utils_1 = require("../../utils");
+const calendar_styles_1 = require("../calendar.styles");
+const consts_1 = require("../consts");
+const DayItem = (0, core_1.styled)(calendar_styles_1.CalendarItem) `
+  aspect-ratio: 1;
+  position: relative;
+  font-size: 14px;
+  font-weight: 500;
+  width: 40px;
+  height: 40px;
+  color: ${core_1.th.color('seaBlue.main')};
+`;
+const DaysContainer = (0, core_1.styled)(calendar_styles_1.CalendarItemsContainer) `
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: auto;
+`;
+const DayPicker = ({ calendar, onSelectDay }) => (react_1.default.createElement(DaysContainer, { className: (0, utils_1.cs)('vui-day-picker'), mt: 1, wrap: true },
+    consts_1.weekDays.map((day, index) => (react_1.default.createElement(box_1.default, { border: 0, className: "dayHeader", color: "seaBlue.main", fontSize: 16, fontWeight: 500, key: `week-day-${index}` }, day))),
+    calendar.items.map(item => (react_1.default.createElement(DayItem, Object.assign({ className: (0, utils_1.cs)('vui-day-item'), key: item.date.getTime(), onClick: (!item.isDisabled && (onSelectDay === null || onSelectDay === void 0 ? void 0 : onSelectDay(item.date))) || undefined }, item), item.date.getUTCDate())))));
+exports.DayPicker = DayPicker;

package/dist/cjs/calendar/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './dayPicker';
+export * from './calendarHeader';
+export * from './monthPicker';
+export * from './timeUnitHeader';
+export * from './yearPicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/calendar/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA"}

package/dist/cjs/calendar/components/index.js

@@ -0,0 +1,21 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./dayPicker"), exports);
+__exportStar(require("./calendarHeader"), exports);
+__exportStar(require("./monthPicker"), exports);
+__exportStar(require("./timeUnitHeader"), exports);
+__exportStar(require("./yearPicker"), exports);

package/dist/cjs/calendar/components/monthPicker.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TimeResult } from '../calendar.types';
+type MonthPickerProps = {
+    calendar: TimeResult;
+    onSelectMonth?: (date: Date) => void;
+};
+export declare const MonthPicker: ({ calendar, onSelectMonth }: MonthPickerProps) => JSX.Element;
+export {};
+//# sourceMappingURL=monthPicker.d.ts.map

package/dist/cjs/calendar/components/monthPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"monthPicker.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/monthPicker.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAG9C,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,UAAU,CAAA;IACpB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,WAAW,gCAAiC,gBAAgB,gBAaxE,CAAA"}

package/dist/cjs/calendar/components/monthPicker.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MonthPicker = void 0;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../utils");
+const calendar_styles_1 = require("../calendar.styles");
+const consts_1 = require("../consts");
+const MonthPicker = ({ calendar, onSelectMonth }) => (react_1.default.createElement(calendar_styles_1.CalendarItemsContainer, { className: (0, utils_1.cs)('vui-month-picker'), gridTemplateRows: "repeat(4, 65px)" }, calendar.items.map(item => (react_1.default.createElement(calendar_styles_1.CalendarItem, Object.assign({ fontWeight: 500, key: item.date.getTime(), onClick: (!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined }, item), consts_1.monthsShort[item.date.getUTCMonth()])))));
+exports.MonthPicker = MonthPicker;

package/dist/cjs/calendar/components/timeUnitHeader.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { TimeUnitMode } from '../calendar.types';
+type TimeUnitHeaderProps = {
+    onSetTimeUnitMode: (mode: TimeUnitMode) => void;
+    timeUnitMode: TimeUnitMode;
+    viewMonth: Date;
+};
+/**
+ * Displays the header title with the month and year being viewed
+ */
+export declare const TimeUnitHeader: FC<TimeUnitHeaderProps>;
+export {};
+//# sourceMappingURL=timeUnitHeader.d.ts.map

package/dist/cjs/calendar/components/timeUnitHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeUnitHeader.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/timeUnitHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAKjC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAOhD,KAAK,mBAAmB,GAAG;IACzB,iBAAiB,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAC/C,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,IAAI,CAAA;CAChB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAyBlD,CAAA"}

package/dist/cjs/calendar/components/timeUnitHeader.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeUnitHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = require("../../box");
+const button_1 = require("../../button");
+const utils_1 = require("../../utils");
+const consts_1 = require("../consts");
+const utils_2 = require("../utils");
+const h = 40;
+const fontSize = 16;
+/**
+ * Displays the header title with the month and year being viewed
+ */
+const TimeUnitHeader = ({ onSetTimeUnitMode, timeUnitMode, viewMonth }) => {
+    return (react_1.default.createElement(box_1.Box, { center: true, className: (0, utils_1.cs)('vui-time-unit-header'), cursor: "pointer", flex: "1", justify: "start" },
+        (0, utils_2.isDay)(timeUnitMode) && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(button_1.Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('month'), variant: "tertiaryDark" }, consts_1.months[viewMonth.getUTCMonth()]),
+            react_1.default.createElement(button_1.Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('year'), variant: "tertiaryDark" }, viewMonth.getUTCFullYear()))),
+        (0, utils_2.isMonth)(timeUnitMode) && (react_1.default.createElement(button_1.Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('year'), variant: "tertiaryDark" }, viewMonth.getUTCFullYear())),
+        (0, utils_2.isYear)(timeUnitMode) && (react_1.default.createElement(button_1.Button, { fontSize: fontSize, h: h, onClick: () => onSetTimeUnitMode('day'), variant: "tertiaryDark" }, "Year"))));
+};
+exports.TimeUnitHeader = TimeUnitHeader;

package/dist/cjs/calendar/components/yearPicker.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TimeResult } from '../calendar.types';
+type YearPickerProps = {
+    calendar: TimeResult;
+    onSelectYear?: (date: Date) => void;
+};
+export declare const YearPicker: ({ calendar, onSelectYear }: YearPickerProps) => JSX.Element;
+export {};
+//# sourceMappingURL=yearPicker.d.ts.map

package/dist/cjs/calendar/components/yearPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"yearPicker.d.ts","sourceRoot":"","sources":["../../../../src/calendar/components/yearPicker.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,UAAU,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACpC,CAAA;AAED,eAAO,MAAM,UAAU,+BAAgC,eAAe,gBAarE,CAAA"}

package/dist/cjs/calendar/components/yearPicker.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YearPicker = void 0;
+const react_1 = __importDefault(require("react"));
+const calendar_styles_1 = require("../calendar.styles");
+const YearPicker = ({ calendar, onSelectYear }) => (react_1.default.createElement(calendar_styles_1.CalendarItemsContainer, { className: "vui-year-picker" }, calendar.items.map(item => (react_1.default.createElement(calendar_styles_1.CalendarItem, Object.assign({ fontWeight: 500, key: item.date.getTime(), onClick: (!item.isDisabled && (onSelectYear === null || onSelectYear === void 0 ? void 0 : onSelectYear(item.date))) || undefined }, item), item.date.getUTCFullYear())))));
+exports.YearPicker = YearPicker;

package/dist/cjs/calendar/consts.d.ts

@@ -0,0 +1,7 @@
+export declare const viewYears = 12;
+export declare const maxDateTimestamp = "9000-12-31T23:59:59Z";
+export declare const minDateTimestamp = "1753-01-02T00:00:00Z";
+export declare const months: string[];
+export declare const monthsShort: string[];
+export declare const weekDays: string[];
+//# sourceMappingURL=consts.d.ts.map

package/dist/cjs/calendar/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/calendar/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,KAAK,CAAA;AAE3B,eAAO,MAAM,gBAAgB,yBAAyB,CAAA;AAEtD,eAAO,MAAM,gBAAgB,yBAAyB,CAAA;AAEtD,eAAO,MAAM,MAAM,UAalB,CAAA;AAED,eAAO,MAAM,WAAW,UAAuF,CAAA;AAE/G,eAAO,MAAM,QAAQ,UAA6C,CAAA"}

package/dist/cjs/calendar/consts.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.weekDays = exports.monthsShort = exports.months = exports.minDateTimestamp = exports.maxDateTimestamp = exports.viewYears = void 0;
+exports.viewYears = 12;
+exports.maxDateTimestamp = '9000-12-31T23:59:59Z';
+exports.minDateTimestamp = '1753-01-02T00:00:00Z';
+exports.months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+];
+exports.monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+exports.weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];

package/dist/cjs/calendar/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useBoundaries';
+export * from './useCalendar';
+export * from './useDefaultViewMonth';
+export * from './useSelectedDate';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/calendar/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/calendar/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA"}

package/dist/cjs/calendar/hooks/index.js

@@ -0,0 +1,20 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useBoundaries"), exports);
+__exportStar(require("./useCalendar"), exports);
+__exportStar(require("./useDefaultViewMonth"), exports);
+__exportStar(require("./useSelectedDate"), exports);

package/dist/cjs/calendar/hooks/useBoundaries.d.ts

@@ -0,0 +1,12 @@
+import { DateRange } from '../calendar.types';
+/**
+ * Calculates boundaries for max/min dates allowed
+ * Memoized so it will only recalculate when the boundaries changes
+ */
+export declare const useBoundaries: ({ boundaries }: {
+    boundaries?: DateRange | undefined;
+}) => {
+    maxDateTime: Date;
+    minDateTime: Date;
+};
+//# sourceMappingURL=useBoundaries.d.ts.map

package/dist/cjs/calendar/hooks/useBoundaries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBoundaries.d.ts","sourceRoot":"","sources":["../../../../src/calendar/hooks/useBoundaries.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAG7C;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;CAQzB,CAAA"}