@veracity/vui 2.13.6 → 2.14.0

package/dist/cjs/theme/defaultTheme.d.ts

@@ -1214,6 +1214,12 @@ declare const defaultTheme: {
                 };
             };
         };
+        Calendar: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Card: {
             baseStyle: {
                 bg: string;
@@ -1268,6 +1274,12 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        DatePicker: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Dialog: {
             baseStyle: {};
             defaultProps: {

package/dist/cjs/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/cjs/utils/dates.d.ts

@@ -2,4 +2,24 @@
 export declare function isValidDate(value: Date | string | number): boolean;
 /** Formats the date to ISO format: 'yyyy-mm-dd' */
 export declare function formatIsoDate(date: Date | string | number): string | undefined;
+/**
+ * Parses string date with the iso format of YYYY-mm-dd
+ * @param input string
+ * @returns Date | undefined
+ */
+export declare function parseIsoDate(input?: string): Date | undefined;
+/**
+ * Validation for 'YYYY-MM-DD' format
+ */
+export declare function validateDateFormat(dateString: string): RegExpMatchArray | null;
+export declare const getDateUTCValue: (date: Date) => {
+    utcYear: number;
+    utcMonth: number;
+    utcDate: number;
+};
+export declare const generateDateByUTCValue: (year: number, month: number, day?: number) => Date;
+export declare const sameYearSameMonth: (a?: Date, b?: Date) => boolean;
+export declare const sameYear: (a?: Date, b?: Date) => boolean;
+export declare const sameDate: (a?: Date, b?: Date) => boolean;
+export declare const utcDateToLocale: (utcDate?: Date) => string | undefined;
 //# sourceMappingURL=dates.d.ts.map

package/dist/cjs/utils/dates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../src/utils/dates.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,WAExD;AAED,mDAAmD;AACnD,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,sBAOzD"}
+{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../src/utils/dates.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,WAExD;AAED,mDAAmD;AACnD,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,sBAOzD;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,oBAM1C;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,2BAGpD;AAGD,eAAO,MAAM,eAAe,SAAU,IAAI;;;;CAIxC,CAAA;AAGF,eAAO,MAAM,sBAAsB,SAAU,MAAM,SAAS,MAAM,QAAQ,MAAM,SAE/E,CAAA;AAED,eAAO,MAAM,iBAAiB,OAAQ,IAAI,MAAM,IAAI,YAInD,CAAA;AAED,eAAO,MAAM,QAAQ,OAAQ,IAAI,MAAM,IAAI,YAG1C,CAAA;AAED,eAAO,MAAM,QAAQ,OAAQ,IAAI,MAAM,IAAI,YAQ1C,CAAA;AAED,eAAO,MAAM,eAAe,aAAc,IAAI,uBAI7C,CAAA"}

package/dist/cjs/utils/dates.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatIsoDate = exports.isValidDate = void 0;
+exports.utcDateToLocale = exports.sameDate = exports.sameYear = exports.sameYearSameMonth = exports.generateDateByUTCValue = exports.getDateUTCValue = exports.validateDateFormat = exports.parseIsoDate = exports.formatIsoDate = exports.isValidDate = void 0;
 /** Checks if the provided value is a valid date */
 function isValidDate(value) {
     return `${new Date(value)}` !== 'Invalid Date';
@@ -17,3 +17,62 @@ function formatIsoDate(date) {
     return `${yyyy}-${mm}-${dd}`;
 }
 exports.formatIsoDate = formatIsoDate;
+/**
+ * Parses string date with the iso format of YYYY-mm-dd
+ * @param input string
+ * @returns Date | undefined
+ */
+function parseIsoDate(input) {
+    if (!input)
+        return;
+    const ticks = Date.parse(input);
+    return isNaN(ticks) ? undefined : new Date(ticks);
+}
+exports.parseIsoDate = parseIsoDate;
+/**
+ * Validation for 'YYYY-MM-DD' format
+ */
+function validateDateFormat(dateString) {
+    const regEx = /^\d{4}-\d{2}-\d{2}$/;
+    return dateString.match(regEx);
+}
+exports.validateDateFormat = validateDateFormat;
+// Get current time's UTC year, month, date
+const getDateUTCValue = (date) => ({
+    utcYear: date.getUTCFullYear(),
+    utcMonth: date.getUTCMonth(),
+    utcDate: date.getUTCDate()
+});
+exports.getDateUTCValue = getDateUTCValue;
+// Generate a date by set its utc value
+const generateDateByUTCValue = (year, month, day) => {
+    return day ? new Date(Date.UTC(year, month, day)) : new Date(Date.UTC(year, month));
+};
+exports.generateDateByUTCValue = generateDateByUTCValue;
+const sameYearSameMonth = (a, b) => {
+    if (!a || !b)
+        return false;
+    return a.getUTCFullYear() === b.getUTCFullYear() && a.getUTCMonth() === b.getUTCMonth();
+};
+exports.sameYearSameMonth = sameYearSameMonth;
+const sameYear = (a, b) => {
+    if (!a || !b)
+        return false;
+    return a.getUTCFullYear() === b.getUTCFullYear() ? true : false;
+};
+exports.sameYear = sameYear;
+const sameDate = (a, b) => {
+    if (!a || !b)
+        return false;
+    return (a.getUTCFullYear() === b.getUTCFullYear() &&
+        a.getUTCMonth() === b.getUTCMonth() &&
+        a.getUTCDate() === b.getUTCDate());
+};
+exports.sameDate = sameDate;
+const utcDateToLocale = (utcDate) => {
+    if (!utcDate)
+        return undefined;
+    const localDateSameDay = new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());
+    return localDateSameDay.toLocaleDateString();
+};
+exports.utcDateToLocale = utcDateToLocale;

package/dist/cjs/utils/formatDate.d.ts

@@ -0,0 +1,15 @@
+export type DateFormat = 'DD MM YYYY' | 'DD MM YYYY, HH:MM' | 'DD MMM' | 'DD MMM YYYY' | 'DD MMM YYYY, HH:MM' | 'DD MMM, HH:MM' | 'HH:MM' | 'MMM D, YYYY' | 'YYYY/MM/DD' | 'YYYY-MM-DD' | 'YYYY/MM/DD, HH:MM' | 'YYYY-MM-DD, HH:MM' | 'YYYY-MM-DD, HH:MM:SS';
+export type FormatDateOptions = Intl.DateTimeFormatOptions & {
+    locales?: string | string[];
+};
+/** Predefined selection of date formats using DateTimeFormatOptions. */
+export declare const dateFormats: Record<DateFormat, FormatDateOptions>;
+/**
+ * Structures given date string, milliseconds number or Date object according to the chosen format.
+ * Uses toLocalDateString internally. Predefined formats specify initial options, which can be overwritten.
+ * @param date - string, number or Date object accepted by Date() constructor
+ * @param format - predefined configuration of DateTimeFormatOptions
+ * @param options - configuration of toLocaleDateString method
+ */
+export declare function formatDate(date?: string | number | Date, format?: DateFormat, options?: FormatDateOptions): string;
+//# sourceMappingURL=formatDate.d.ts.map

package/dist/cjs/utils/formatDate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatDate.d.ts","sourceRoot":"","sources":["../../../src/utils/formatDate.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB,YAAY,GACZ,mBAAmB,GACnB,QAAQ,GACR,aAAa,GACb,oBAAoB,GACpB,eAAe,GACf,OAAO,GACP,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,mBAAmB,GACnB,sBAAsB,CAAA;AAE1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,GAAG;IAC3D,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC5B,CAAA;AAED,wEAAwE;AACxE,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,iBAAiB,CAc7D,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CACxB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAC7B,MAAM,GAAE,UAAyB,EACjC,OAAO,CAAC,EAAE,iBAAiB,UAgB5B"}

package/dist/cjs/utils/formatDate.js

@@ -0,0 +1,51 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDate = exports.dateFormats = void 0;
+/** Predefined selection of date formats using DateTimeFormatOptions. */
+exports.dateFormats = {
+    'DD MM YYYY': { year: 'numeric', month: '2-digit', day: '2-digit' },
+    'DD MM YYYY, HH:MM': { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+    'DD MMM': { month: 'short', day: '2-digit' },
+    'DD MMM YYYY': { year: 'numeric', month: 'short', day: '2-digit' },
+    'DD MMM YYYY, HH:MM': { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+    'DD MMM, HH:MM': { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' },
+    'HH:MM': { locales: 'en-GB', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' },
+    'MMM D, YYYY': { locales: 'en-US', year: 'numeric', month: 'short', day: 'numeric' },
+    'YYYY/MM/DD': { locales: 'en-ZA' },
+    'YYYY-MM-DD': { locales: 'fr-CA' },
+    'YYYY/MM/DD, HH:MM': { locales: 'en-ZA', hour: '2-digit', minute: '2-digit' },
+    'YYYY-MM-DD, HH:MM': { locales: 'fr-CA', timeStyle: 'short' },
+    'YYYY-MM-DD, HH:MM:SS': { locales: 'fr-CA' }
+};
+/**
+ * Structures given date string, milliseconds number or Date object according to the chosen format.
+ * Uses toLocalDateString internally. Predefined formats specify initial options, which can be overwritten.
+ * @param date - string, number or Date object accepted by Date() constructor
+ * @param format - predefined configuration of DateTimeFormatOptions
+ * @param options - configuration of toLocaleDateString method
+ */
+function formatDate(date, format = 'DD MM YYYY', options) {
+    const formatOptions = exports.dateFormats[format];
+    const _a = Object.assign(Object.assign({}, formatOptions), options), { locales } = _a, mergedOptions = __rest(_a, ["locales"]);
+    if (format === 'YYYY-MM-DD, HH:MM:SS' || format === 'YYYY-MM-DD, HH:MM') {
+        return date
+            ? new Date(date).toLocaleDateString(locales) + ', ' + new Date(date).toLocaleTimeString(undefined, mergedOptions)
+            : '';
+    }
+    if (format === 'HH:MM') {
+        return date ? new Date(date).toLocaleTimeString(locales, mergedOptions) : '';
+    }
+    return date ? new Date(date).toLocaleDateString(locales, mergedOptions) : '';
+}
+exports.formatDate = formatDate;

package/dist/cjs/utils/index.d.ts

@@ -3,6 +3,7 @@ export * from './assertion';
 export * from './consts';
 export * from './dates';
 export * from './dom';
+export * from './formatDate';
 export * from './function';
 export * from './number';
 export * from './object';

package/dist/cjs/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA"}

package/dist/cjs/utils/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./assertion"), exports);
 __exportStar(require("./consts"), exports);
 __exportStar(require("./dates"), exports);
 __exportStar(require("./dom"), exports);
+__exportStar(require("./formatDate"), exports);
 __exportStar(require("./function"), exports);
 __exportStar(require("./number"), exports);
 __exportStar(require("./object"), exports);

package/dist/esm/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/esm/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/esm/calendar/calendar.js

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Box from '../box';
+import { omitThemingProps, useStyleConfig, vui } from '../core';
+import { cs } from '../utils';
+import { CalendarHeader, DayPicker, MonthPicker, YearPicker } from './components';
+import { useCalendar, useDefaultViewMonth } from './hooks';
+import { isDay, isExact, isFrom, isMonth, isTo, isYear, processSelectMonth, processSelectYear, processViewDate } from './utils';
+/** [Beta] Displays calendar. */
+export const Calendar = vui((props, ref) => {
+    const { boundaries, className, fixedNumberOfWeeks = false, disabled, isStartDate, mode, onSelectDates, selectedDates, ...rest } = omitThemingProps(props);
+    const styles = useStyleConfig('Calendar', props);
+    const currentDateRef = useRef(isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate);
+    /**
+     * Effect to reset viewDate when selectedDates changes (onReset)
+     */
+    useEffect(() => {
+        currentDateRef.current = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate;
+        currentDateRef.current && setViewDate(currentDateRef.current);
+    }, [selectedDates]);
+    const calendarRef = useRef(null);
+    const defaultViewMonth = useDefaultViewMonth({
+        boundaries,
+        selectedDate: currentDateRef.current,
+        isStartDate
+    });
+    const [timeUnitMode, setTimeUnitMode] = useState('day');
+    const [viewDate, setViewDate] = useState(defaultViewMonth);
+    /**
+     * Handles clicking next/prev in header
+     */
+    const onChangeViewItem = (direction) => {
+        const newViewMonth = processViewDate(viewDate, direction, timeUnitMode, calendarRef?.current?.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 = processSelectMonth(clickedDate, mode, boundaries);
+        updateDateState(processedNewDate);
+        setViewDate(processedNewDate);
+        setTimeUnitMode('day');
+    };
+    /**
+     * Handles clicking on a year
+     */
+    const onSelectYear = (clickedDate) => () => {
+        const processedNewDate = processSelectYear(clickedDate, mode, boundaries);
+        updateDateState(processedNewDate);
+        setViewDate(processedNewDate);
+        setTimeUnitMode('month');
+    };
+    /**
+     * Send update date to parent component
+     */
+    const updateDateState = (newDate) => {
+        const dateRange = { ...selectedDates };
+        if (dateRange) {
+            if (isTo(mode))
+                dateRange.endDate = newDate;
+            else
+                dateRange.startDate = newDate;
+        }
+        if (newDate && !disabled)
+            onSelectDates && onSelectDates(dateRange);
+    };
+    const calendar = (calendarRef.current = useCalendar({
+        boundaries,
+        mode,
+        selectedDates,
+        timeUnitMode,
+        viewDate,
+        fixedNumberOfWeeks
+    }));
+    return (React.createElement(Box, { className: cs('vui-calendar', className), column: true, cursor: "default", minW: 280, position: "relative", ref: ref, w: "fit-content", ...styles, ...rest },
+        React.createElement(CalendarHeader, { nextDisabled: calendar.nextDisabled, onChangeViewItem: onChangeViewItem, onSetTimeUnitMode: (mode) => setTimeUnitMode(mode), prevDisabled: calendar.prevDisabled, timeUnitMode: timeUnitMode, viewMonth: viewDate }),
+        isDay(timeUnitMode) && React.createElement(DayPicker, { calendar: calendar, onSelectDay: onSelectDay }),
+        isMonth(timeUnitMode) && React.createElement(MonthPicker, { calendar: calendar, onSelectMonth: onSelectMonth }),
+        isYear(timeUnitMode) && React.createElement(YearPicker, { calendar: calendar, onSelectYear: onSelectYear })));
+});
+Calendar.displayName = 'Calendar';
+export default Calendar;

package/dist/esm/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/esm/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/esm/calendar/calendar.styles.js

@@ -0,0 +1,65 @@
+import Box from '../box';
+import { css, styled, th } from '../core';
+import Link from '../link';
+export const boundary = css `
+  background-color: ${th.color('seaBlue.main')};
+  color: white !important;
+  border-radius: 0;
+`;
+export const current = css `
+  background-color: ${th.color('seaBlue.main')};
+  color: white !important;
+  border-radius: 0;
+`;
+export const isDisabled = css `
+  color: ${th.color('sandstone.main')} !important;
+  cursor: not-allowed;
+`;
+export const isHidden = css `
+  color: ${th.color('darkBlue.75')} !important;
+`;
+export const isToday = css `
+  border: 1px solid ${th.color('seaBlue.main')};
+`;
+export const hover = css `
+  background-color: ${th.color('skyBlue.85')};
+  color: ${th.color('seaBlue.main')};
+  border-radius: 0;
+`;
+export const isSelected = css `
+  background-color: ${th.color('skyBlue.85')};
+  border-radius: 0;
+  color: white;
+`;
+export const CalendarItem = styled(Link) `
+  aspect-ratio: 1;
+  border: 0;
+  cursor: pointer;
+  height: 100%;
+  justify-content: center;
+  text-decoration: none;
+  width: 100%;
+
+  ${p => p.isHidden && isHidden}
+  ${p => p.isToday && isToday}
+  ${p => p.isDisabled && isDisabled}
+    ${p => p.isSelected && isSelected}
+    ${p => p.boundary && boundary}
+    ${p => p.current && current}
+
+    &:hover {
+    color: inherit;
+    text-decoration: none;
+
+    ${p => !p.isDisabled && hover}
+  }
+`;
+export const CalendarItemsContainer = styled(Box) `
+  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/esm/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/esm/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/esm/calendar/calendar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/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/esm/calendar/components/calendarHeader.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Box from '../../box';
+import { IconButton } from '../../button';
+import { cs } from '../../utils';
+import { TimeUnitHeader } from './timeUnitHeader';
+const size = 40;
+/**
+ * Header for the calendar
+ */
+export const CalendarHeader = ({ nextDisabled, onChangeViewItem, onSetTimeUnitMode, prevDisabled, timeUnitMode, viewMonth }) => (React.createElement(Box, { borderBottom: "1px solid lightgray", centerV: true, className: cs('vui-calendar-header') },
+    React.createElement(Box, { className: "vui-calendar-header-left" },
+        React.createElement(TimeUnitHeader, { onSetTimeUnitMode: onSetTimeUnitMode, timeUnitMode: timeUnitMode, viewMonth: viewMonth })),
+    React.createElement(Box, { className: "vui-calendar-header-right", flex: "1", justify: "flex-end" },
+        React.createElement(IconButton, { className: "icon", disabled: prevDisabled, h: size, icon: "falChevronLeft", onClick: () => onChangeViewItem('prev'), size: "sm", w: size }),
+        React.createElement(IconButton, { className: "icon", disabled: nextDisabled, h: size, icon: "falChevronRight", onClick: () => onChangeViewItem('next'), size: "sm", w: size }))));

package/dist/esm/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/esm/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/esm/calendar/components/dayPicker.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Box from '../../box';
+import { styled, th } from '../../core';
+import { cs } from '../../utils';
+import { CalendarItem, CalendarItemsContainer } from '../calendar.styles';
+import { weekDays } from '../consts';
+const DayItem = styled(CalendarItem) `
+  aspect-ratio: 1;
+  position: relative;
+  font-size: 14px;
+  font-weight: 500;
+  width: 40px;
+  height: 40px;
+  color: ${th.color('seaBlue.main')};
+`;
+const DaysContainer = styled(CalendarItemsContainer) `
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: auto;
+`;
+export const DayPicker = ({ calendar, onSelectDay }) => (React.createElement(DaysContainer, { className: cs('vui-day-picker'), mt: 1, wrap: true },
+    weekDays.map((day, index) => (React.createElement(Box, { border: 0, className: "dayHeader", color: "seaBlue.main", fontSize: 16, fontWeight: 500, key: `week-day-${index}` }, day))),
+    calendar.items.map(item => (React.createElement(DayItem, { className: cs('vui-day-item'), key: item.date.getTime(), onClick: (!item.isDisabled && onSelectDay?.(item.date)) || undefined, ...item }, item.date.getUTCDate())))));

package/dist/esm/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/esm/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/esm/calendar/components/index.js

@@ -0,0 +1,5 @@
+export * from './dayPicker';
+export * from './calendarHeader';
+export * from './monthPicker';
+export * from './timeUnitHeader';
+export * from './yearPicker';

package/dist/esm/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/esm/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/esm/calendar/components/monthPicker.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { cs } from '../../utils';
+import { CalendarItem as MonthItem, CalendarItemsContainer } from '../calendar.styles';
+import { monthsShort } from '../consts';
+export const MonthPicker = ({ calendar, onSelectMonth }) => (React.createElement(CalendarItemsContainer, { className: cs('vui-month-picker'), gridTemplateRows: "repeat(4, 65px)" }, calendar.items.map(item => (React.createElement(MonthItem, { fontWeight: 500, key: item.date.getTime(), onClick: (!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined, ...item }, monthsShort[item.date.getUTCMonth()])))));