@veracity/vui 2.13.6 → 2.14.0

package/dist/esm/input/helpText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpText.d.ts","sourceRoot":"","sources":["../../../src/input/helpText.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE7C,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,sDAsBnB,CAAA;AAGF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"helpText.d.ts","sourceRoot":"","sources":["../../../src/input/helpText.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE7C,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,sDAuBnB,CAAA;AAGF,eAAe,QAAQ,CAAA"}

package/dist/esm/input/helpText.js

@@ -12,7 +12,7 @@ export const HelpText = vui((props, ref) => {
     const mergedProps = { ...inputProps, ...props };
     const styles = useStyleConfig('Input', mergedProps);
     const color = isError ? inputColors.error : inputColors.helpText;
-    return (React.createElement(P, { className: cs('vui-inputHelpText', className), color: color, display: "flex", py: 1, ref: ref, ...styles.helpText, ...rest },
+    return (React.createElement(P, { alignItems: "center", className: cs('vui-inputHelpText', className), color: color, display: "flex", py: 1, ref: ref, ...styles.helpText, ...rest },
         isError && React.createElement(Icon, { mr: 1, name: "falExclamationTriangle", pathFill: inputColors.error, size: "sm" }),
         children));
 });

package/dist/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA4Df,CAAA;AAIF,eAAe,IAAI,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA+Df,CAAA;AAIF,eAAe,IAAI,CAAA"}

package/dist/esm/tabs/tabs.js

@@ -38,10 +38,13 @@ export const Tabs = vui((props, ref) => {
         }
     }, [children, activeTabId]);
     const onNavItemClick = (id, e) => {
-        setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
-        setActiveTabIndex(id);
-        onTabClick?.(id);
-        tabs.find(t => t.id === id)?.onClick?.(e);
+        const tab = tabs.find(t => t.id === id);
+        if (tab?.children !== undefined) {
+            setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
+            setActiveTabIndex(id);
+            onTabClick?.(id);
+        }
+        tab?.onClick?.(e);
     };
     const activeTab = tabs?.[activeTabIndex];
     return (React.createElement(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest },

package/dist/esm/tabs/tabsNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDAwErB,CAAA;AAIF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDA0ErB,CAAA;AAIF,eAAe,UAAU,CAAA"}

package/dist/esm/tabs/tabsNavBar.js

@@ -22,7 +22,7 @@ export const TabsNavBar = vui((props, ref) => {
         React.createElement(Box, { alignItems: "center" },
             !!tab.icon && React.createElement(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }),
             tab.title),
-        !!tab.onDelete && (React.createElement(TagButton, { disabled: tab.disabled, hoverColor: "energyRed.main", isRound: false, ml: 1, onClick: e => tab?.onDelete?.(e) })),
+        !!tab.onDelete && (React.createElement(TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => tab?.onDelete?.(e), title: "Delete" })),
         isActive(tab) && (React.createElement(Box, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
 });
 TabsNavBar.displayName = 'TabsNavBar';

package/dist/esm/tabs/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tabs/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tabs/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,wBAMC"}

package/dist/esm/tabs/theme.js

@@ -14,7 +14,6 @@ const sizes = {
         tabsNavBar: {
             borderWidth: '2px',
             fontSize: 'sm',
-            // lineHeight: '20px',
             h: '32px',
             py: '6px'
         }

package/dist/esm/theme/components.d.ts

@@ -708,6 +708,12 @@ declare const _default: {
             };
         };
     };
+    Calendar: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Card: {
         baseStyle: {
             bg: string;
@@ -762,6 +768,12 @@ declare const _default: {
         };
         variants: {};
     };
+    DatePicker: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Dialog: {
         baseStyle: {};
         defaultProps: {

package/dist/esm/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,wBA8CC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,wBAgDC"}

package/dist/esm/theme/components.js

@@ -5,8 +5,10 @@ import Badge from '../badge/theme';
 import Box from '../box/theme';
 import Breadcrumbs from '../breadcrumbs/theme';
 import Button from '../button/theme';
+import Calendar from '../calendar/theme';
 import Card from '../card/theme';
 import Checkbox from '../checkbox/theme';
+import DatePicker from '../datePicker/theme';
 import Definition from '../definition/theme';
 import Dialog from '../dialog/theme';
 import Divider from '../divider/theme';
@@ -53,8 +55,10 @@ export default {
     Box,
     Breadcrumbs,
     Button,
+    Calendar,
     Card,
     Checkbox,
+    DatePicker,
     Dialog,
     Divider,
     DragAndDrop,

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

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

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

@@ -0,0 +1,36 @@
+/** Predefined selection of date formats using DateTimeFormatOptions. */
+export const 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
+ */
+export function formatDate(date, format = 'DD MM YYYY', options) {
+    const formatOptions = dateFormats[format];
+    const { locales, ...mergedOptions } = { ...formatOptions, ...options };
+    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) : '';
+}

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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.13.6",
+  "version": "2.14.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/calendar/calendar.styles.ts

@@ -0,0 +1,75 @@
+import Box from '../box'
+import { css, styled, th } from '../core'
+import Link from '../link'
+import { ItemProps } from './calendar.types'
+
+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)<ItemProps>`
+  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/src/calendar/calendar.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import Box from '../box'
+import { omitThemingProps, useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { CalendarProps, DateRange, FlowDirection, TimeResult, TimeUnitMode } from './calendar.types'
+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<'div', CalendarProps>((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<TimeResult | null>(null)
+
+  const defaultViewMonth = useDefaultViewMonth({
+    boundaries,
+    selectedDate: currentDateRef.current,
+    isStartDate
+  })
+
+  const [timeUnitMode, setTimeUnitMode] = useState<TimeUnitMode>('day')
+  const [viewDate, setViewDate] = useState<Date>(defaultViewMonth)
+
+  /**
+   * Handles clicking next/prev in header
+   */
+  const onChangeViewItem = (direction: FlowDirection) => {
+    const newViewMonth = processViewDate(viewDate, direction, timeUnitMode, calendarRef?.current?.items)
+    newViewMonth && setViewDate(newViewMonth)
+  }
+
+  /**
+   * Handles clicking on a day
+   */
+  const onSelectDay = (clickedDate: Date) => () => {
+    updateDateState(clickedDate)
+    setViewDate(clickedDate)
+  }
+
+  /**
+   * Handles clicking on a month
+   */
+  const onSelectMonth = (clickedDate: Date) => () => {
+    const processedNewDate = processSelectMonth(clickedDate, mode, boundaries)
+    updateDateState(processedNewDate)
+    setViewDate(processedNewDate)
+    setTimeUnitMode('day')
+  }
+
+  /**
+   * Handles clicking on a year
+   */
+  const onSelectYear = (clickedDate: Date) => () => {
+    const processedNewDate = processSelectYear(clickedDate, mode, boundaries)
+    updateDateState(processedNewDate)
+    setViewDate(processedNewDate)
+    setTimeUnitMode('month')
+  }
+
+  /**
+   * Send update date to parent component
+   */
+  const updateDateState = (newDate: Date) => {
+    const dateRange: 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 (
+    <Box
+      className={cs('vui-calendar', className)}
+      column
+      cursor="default"
+      minW={280}
+      position="relative"
+      ref={ref}
+      w="fit-content"
+      {...styles}
+      {...rest}
+    >
+      <CalendarHeader
+        nextDisabled={calendar.nextDisabled}
+        onChangeViewItem={onChangeViewItem}
+        onSetTimeUnitMode={(mode: TimeUnitMode) => setTimeUnitMode(mode)}
+        prevDisabled={calendar.prevDisabled}
+        timeUnitMode={timeUnitMode}
+        viewMonth={viewDate}
+      />
+      {isDay(timeUnitMode) && <DayPicker calendar={calendar} onSelectDay={onSelectDay} />}
+      {isMonth(timeUnitMode) && <MonthPicker calendar={calendar} onSelectMonth={onSelectMonth} />}
+      {isYear(timeUnitMode) && <YearPicker calendar={calendar} onSelectYear={onSelectYear} />}
+    </Box>
+  )
+})
+
+Calendar.displayName = 'Calendar'
+
+export default Calendar