@uzum-tech/ui 0.1.0 → 0.1.2

package/lib/calendar/src/Calendar.js

@@ -0,0 +1,204 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calendarProps = void 0;
+const vue_1 = require("vue");
+const date_fns_1 = require("date-fns"); //
+const vooks_1 = require("vooks");
+const utils_1 = require("../../date-picker/src/utils");
+const icons_1 = require("../../_internal/icons");
+const _internal_1 = require("../../_internal");
+const _utils_1 = require("../../_utils");
+const button_1 = require("../../button");
+const button_group_1 = require("../../button-group");
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+exports.calendarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
+        type: Number,
+        default: null
+    }, onPanelChange: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Calendar',
+    props: exports.calendarProps,
+    setup(props) {
+        var _a;
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Calendar', '-calendar', index_cssr_1.default, styles_1.calendarLight, props, mergedClsPrefixRef);
+        const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('DatePicker');
+        const now = Date.now();
+        // ts => timestamp
+        const monthTsRef = (0, vue_1.ref)((0, date_fns_1.startOfMonth)((_a = props.defaultValue) !== null && _a !== void 0 ? _a : now).valueOf());
+        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue || null);
+        const mergedValueRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'value'), uncontrolledValueRef);
+        function doUpdateValue(value, time) {
+            const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
+            if (onUpdateValue) {
+                (0, _utils_1.call)(onUpdateValue, value, time);
+            }
+            if (_onUpdateValue) {
+                (0, _utils_1.call)(_onUpdateValue, value, time);
+            }
+            uncontrolledValueRef.value = value;
+        }
+        function handlePrevClick() {
+            var _a;
+            const monthTs = (0, date_fns_1.addMonths)(monthTsRef.value, -1).valueOf();
+            monthTsRef.value = monthTs;
+            (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                year: (0, date_fns_1.getYear)(monthTs),
+                month: (0, date_fns_1.getMonth)(monthTs) + 1
+            });
+        }
+        function handleNextClick() {
+            var _a;
+            const monthTs = (0, date_fns_1.addMonths)(monthTsRef.value, 1).valueOf();
+            monthTsRef.value = monthTs;
+            (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                year: (0, date_fns_1.getYear)(monthTs),
+                month: (0, date_fns_1.getMonth)(monthTs) + 1
+            });
+        }
+        function handleTodayClick() {
+            var _a;
+            const { value: monthTs } = monthTsRef;
+            const oldYear = (0, date_fns_1.getYear)(monthTs);
+            const oldMonth = (0, date_fns_1.getMonth)(monthTs);
+            const newMonthTs = (0, date_fns_1.startOfMonth)(now).valueOf();
+            monthTsRef.value = newMonthTs;
+            const newYear = (0, date_fns_1.getYear)(newMonthTs);
+            const newMonth = (0, date_fns_1.getMonth)(newMonthTs);
+            if (oldYear !== newYear || oldMonth !== newMonth) {
+                (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                    year: newYear,
+                    month: newMonth + 1
+                });
+            }
+        }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-border-color': borderColor,
+                '--u-border-color-modal': borderColorModal,
+                '--u-border-color-popover': borderColorPopover,
+                '--u-border-radius': borderRadius,
+                '--u-text-color': textColor,
+                '--u-title-font-weight': titleFontWeight,
+                '--u-title-font-size': titleFontSize,
+                '--u-title-text-color': titleTextColor,
+                '--u-day-text-color': dayTextColor,
+                '--u-font-size': fontSize,
+                '--u-line-height': lineHeight,
+                '--u-date-color-current': dateColorCurrent,
+                '--u-date-text-color-current': dateTextColorCurrent,
+                '--u-cell-color': cellColor,
+                '--u-cell-color-modal': cellColorModal,
+                '--u-cell-color-popover': cellColorPopover,
+                '--u-cell-color-hover': cellColorHover,
+                '--u-cell-color-hover-modal': cellColorHoverModal,
+                '--u-cell-color-hover-popover': cellColorHoverPopover,
+                '--u-bar-color': barColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('calendar', undefined, cssVarsRef, props)
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            locale: localeRef,
+            dateLocale: dateLocaleRef,
+            now,
+            mergedValue: mergedValueRef,
+            monthTs: monthTsRef,
+            dateItems: (0, vue_1.computed)(() => {
+                return (0, utils_1.dateArray)(monthTsRef.value, mergedValueRef.value, now, localeRef.value.firstDayOfWeek, true);
+            }),
+            doUpdateValue,
+            handleTodayClick,
+            handlePrevClick,
+            handleNextClick,
+            mergedTheme: themeRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        const { isDateDisabled, mergedClsPrefix, monthTs, cssVars, mergedValue, mergedTheme, $slots, locale: { monthBeforeYear, today }, dateLocale: { locale }, handleTodayClick, handlePrevClick, handleNextClick, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        const normalizedValue = mergedValue && (0, date_fns_1.startOfDay)(mergedValue).valueOf();
+        const year = (0, date_fns_1.getYear)(monthTs);
+        const calendarMonth = (0, date_fns_1.getMonth)(monthTs) + 1;
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-calendar`, this.themeClass], style: cssVars },
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-header` },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-header__title` }, (0, _utils_1.resolveSlotWithProps)($slots.header, { year, month: calendarMonth }, () => {
+                    const localeMonth = (0, date_fns_1.format)(monthTs, 'MMMM', { locale });
+                    return [
+                        monthBeforeYear
+                            ? `${localeMonth} ${year}`
+                            : `${year} ${localeMonth}`
+                    ];
+                })),
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-header__extra` },
+                    (0, vue_1.h)(button_group_1.UButtonGroup, null, {
+                        default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                            (0, vue_1.h)(button_1.UButton, { size: "small", onClick: handlePrevClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, {
+                                icon: () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-calendar-prev-btn` }, { default: () => (0, vue_1.h)(icons_1.ChevronLeftIcon, null) }))
+                            }),
+                            (0, vue_1.h)(button_1.UButton, { size: "small", onClick: handleTodayClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => today }),
+                            (0, vue_1.h)(button_1.UButton, { size: "small", onClick: handleNextClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, {
+                                icon: () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-calendar-next-btn` }, { default: () => (0, vue_1.h)(icons_1.ChevronRightIcon, null) }))
+                            })))
+                    }))),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-dates` }, this.dateItems.map(({ dateObject, ts, inCurrentMonth, isCurrentDate }, index) => {
+                var _a;
+                const { year, month, date } = dateObject;
+                const fullDate = (0, date_fns_1.format)(ts, 'yyyy-MM-dd');
+                // 'notInCurrentMonth' and 'disabled' are both disabled styles, but 'disabled''s cursor are not-allowed
+                const notInCurrentMonth = !inCurrentMonth;
+                const disabled = (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(ts)) === true;
+                const selected = normalizedValue === (0, date_fns_1.startOfDay)(ts).valueOf();
+                return ((0, vue_1.h)("div", { key: `${calendarMonth}-${index}`, class: [
+                        `${mergedClsPrefix}-calendar-cell`,
+                        disabled && `${mergedClsPrefix}-calendar-cell--disabled`,
+                        notInCurrentMonth &&
+                            `${mergedClsPrefix}-calendar-cell--other-month`,
+                        disabled && `${mergedClsPrefix}-calendar-cell--not-allowed`,
+                        isCurrentDate &&
+                            `${mergedClsPrefix}-calendar-cell--current`,
+                        selected && `${mergedClsPrefix}-calendar-cell--selected`
+                    ], onClick: () => {
+                        var _a;
+                        if (disabled)
+                            return;
+                        const monthTs = (0, date_fns_1.startOfMonth)(ts).valueOf();
+                        this.monthTs = monthTs;
+                        if (notInCurrentMonth) {
+                            (_a = this.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(this, {
+                                year: (0, date_fns_1.getYear)(monthTs),
+                                month: (0, date_fns_1.getMonth)(monthTs) + 1
+                            });
+                        }
+                        this.doUpdateValue(ts, {
+                            year,
+                            month: month + 1,
+                            date
+                        });
+                    } },
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-date` },
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-date__date`, title: fullDate }, date),
+                        index < 7 && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-date__day`, title: fullDate }, (0, date_fns_1.format)(ts, 'EEE', {
+                            locale
+                        })))), (_a = $slots.default) === null || _a === void 0 ? void 0 :
+                    _a.call($slots, {
+                        year,
+                        month: month + 1,
+                        date
+                    }),
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-calendar-cell__bar` })));
+            }))));
+    }
+});

package/lib/calendar/src/interface.d.ts

@@ -0,0 +1,10 @@
+export type OnUpdateValue = (value: number, time: DateItem) => void;
+export interface DateItem {
+    year: number;
+    month: number;
+    date: number;
+}
+export type OnPanelChange = (info: {
+    year: number;
+    month: number;
+}) => void;

package/lib/calendar/src/interface.js

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

package/lib/calendar/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/calendar/src/styles/index.cssr.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --u-bezier
+// --u-border-color
+// --u-border-color-modal
+// --u-border-color-popover
+// --u-border-radius
+// --u-text-color
+// --u-title-font-weight
+// --u-title-font-size
+// --u-title-text-color
+// --u-day-text-color
+// --u-font-size
+// --u-line-height
+// --u-date-color-current
+// --u-cell-color
+// --u-cell-color-hover
+// --u-cell-color-hover-modal
+// --u-cell-color-hover-popover
+// --u-bar-color
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
+ line-height: var(--u-line-height);
+ font-size: var(--u-font-size);
+ color: var(--u-text-color);
+ height: 720px;
+ display: flex;
+ flex-direction: column;
+ `, [(0, cssr_1.cB)('calendar-prev-btn', `
+ cursor: pointer;
+ `), (0, cssr_1.cB)('calendar-next-btn', `
+ cursor: pointer;
+ `), (0, cssr_1.cB)('calendar-header', `
+ display: flex;
+ align-items: center;
+ line-height: 1;
+ font-size: var(--u-title-font-size);
+ padding: 0 0 18px 0;
+ justify-content: space-between;
+ `, [(0, cssr_1.cE)('title', `
+ color: var(--u-title-text-color);
+ font-weight: var(--u-title-font-weight);
+ transition: color .3s var(--u-bezier);
+ `), (0, cssr_1.cE)('extra', `
+ display: flex;
+ align-items: center;
+ `)]), (0, cssr_1.cB)('calendar-dates', `
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ grid-auto-rows: 1fr;
+ border-radius: var(--u-border-radius);
+ flex: 1;
+ border-top: 1px solid;
+ border-left: 1px solid;
+ border-color: var(--u-border-color);
+ transition: border-color .3s var(--u-bezier);
+ `), (0, cssr_1.cB)('calendar-cell', `
+ box-sizing: border-box;
+ padding: 10px;
+ border-right: 1px solid;
+ border-bottom: 1px solid;
+ border-color: var(--u-border-color);
+ cursor: pointer;
+ position: relative;
+ transition:
+ color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
+ `, [(0, cssr_1.c)('&:nth-child(7)', `
+ border-top-right-radius: var(--u-border-radius);
+ `), (0, cssr_1.c)('&:nth-last-child(7)', `
+ border-bottom-left-radius: var(--u-border-radius);
+ `), (0, cssr_1.c)('&:last-child', `
+ border-bottom-right-radius: var(--u-border-radius);
+ `), (0, cssr_1.c)('&:hover', `
+ background-color: var(--u-cell-color-hover);
+ `), (0, cssr_1.cE)('bar', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -1px;
+ height: 3px;
+ background-color: #0000;
+ transition: background-color .3s var(--u-bezier);
+ `), (0, cssr_1.cM)('selected', [(0, cssr_1.cE)('bar', `
+ background-color: var(--u-bar-color);
+ `)]), (0, cssr_1.cB)('calendar-date', `
+ transition:
+ color .3s var(--u-bezier),
+ border-color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
+ color: var(--u-text-color);
+ `, [(0, cssr_1.cE)('date', `
+ color: var(--u-text-color);
+ `)]), (0, cssr_1.cM)('disabled, other-month', `
+ color: var(--u-day-text-color);
+ `, [(0, cssr_1.cB)('calendar-date', [(0, cssr_1.cE)('date', `
+ color: var(--u-day-text-color);
+ `)])]), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed;
+ `), (0, cssr_1.cM)('current', [(0, cssr_1.cB)('calendar-date', [(0, cssr_1.cE)('date', `
+ color: var(--u-date-text-color-current);
+ background-color: var(--u-date-color-current);
+ `)])]), (0, cssr_1.cB)('calendar-date', `
+ position: relative;
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ height: 1em;
+ justify-content: space-between;
+ padding-bottom: .75em;
+ `, [(0, cssr_1.cE)('date', `
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: -0.4em;
+ width: 1.8em;
+ height: 1.8em;
+ transition:
+ color .3s var(--u-bezier),
+ background-color .3s var(--u-bezier);
+ `), (0, cssr_1.cE)('day', `
+ color: var(--u-day-text-color);
+ transition: color .3s var(--u-bezier);
+ `)])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('calendar', [(0, cssr_1.cB)('calendar-dates', `
+ border-color: var(--u-border-color-modal);
+ `), (0, cssr_1.cB)('calendar-cell', `
+ border-color: var(--u-border-color-modal);
+ `, [(0, cssr_1.c)('&:hover', `
+ background-color: var(--u-cell-color-hover-modal);
+ `)])])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('calendar', [(0, cssr_1.cB)('calendar-dates', `
+ border-color: var(--u-border-color-popover);
+ `), (0, cssr_1.cB)('calendar-cell', `
+ border-color: var(--u-border-color-popover);
+ `, [(0, cssr_1.c)('&:hover', `
+ background-color: var(--u-cell-color-hover-popover);
+ `)])]))]);

package/lib/calendar/styles/_common.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    titleFontSize: string;
+};
+export default _default;

package/lib/calendar/styles/_common.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    titleFontSize: '22px'
+};

package/lib/calendar/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { CalendarTheme } from './light';
+declare const calendarDark: CalendarTheme;
+export default calendarDark;

package/lib/calendar/styles/dark.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
+const styles_1 = require("../../button/styles");
+const calendarDark = {
+    name: 'Calendar',
+    common: common_1.commonDark,
+    peers: {
+        Button: styles_1.buttonDark
+    },
+    self: light_1.self
+};
+exports.default = calendarDark;

package/lib/calendar/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as calendarDark } from './dark';
+export { default as calendarLight } from './light';
+export type { CalendarTheme, CalendarThemeVars } from './light';

package/lib/calendar/styles/index.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.calendarLight = exports.calendarDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "calendarDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "calendarLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/calendar/styles/light.d.ts

@@ -0,0 +1,260 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+export declare const self: (vars: ThemeCommonVars) => {
+    borderRadius: string;
+    borderColor: string;
+    borderColorModal: string;
+    borderColorPopover: string;
+    textColor: string;
+    titleFontWeight: string;
+    titleTextColor: string;
+    dayTextColor: string;
+    fontSize: string;
+    lineHeight: string;
+    dateColorCurrent: string;
+    dateTextColorCurrent: string;
+    cellColorHover: string;
+    cellColorHoverModal: string;
+    cellColorHoverPopover: string;
+    cellColor: string;
+    cellColorModal: string;
+    cellColorPopover: string;
+    barColor: string;
+    titleFontSize: string;
+};
+export type CalendarThemeVars = ReturnType<typeof self>;
+declare const calendarLight: import("../../_mixins").Theme<"Calendar", {
+    borderRadius: string;
+    borderColor: string;
+    borderColorModal: string;
+    borderColorPopover: string;
+    textColor: string;
+    titleFontWeight: string;
+    titleTextColor: string;
+    dayTextColor: string;
+    fontSize: string;
+    lineHeight: string;
+    dateColorCurrent: string;
+    dateTextColorCurrent: string;
+    cellColorHover: string;
+    cellColorHoverModal: string;
+    cellColorHoverPopover: string;
+    cellColor: string;
+    cellColorModal: string;
+    cellColorPopover: string;
+    barColor: string;
+    titleFontSize: string;
+}, {
+    Button: import("../../_mixins").Theme<"Button", {
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        borderRadiusTiny: string;
+        borderRadiusSmall: string;
+        borderRadiusMedium: string;
+        borderRadiusLarge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        opacityDisabled: string;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
+        colorOpacitySecondaryFocus: string;
+        colorSecondary: string;
+        colorSecondaryHover: string;
+        colorSecondaryPressed: string;
+        waveColorSecondary: string;
+        colorTertiary: string;
+        colorTertiaryHover: string;
+        colorTertiaryPressed: string;
+        colorTertiaryDisalbed: string;
+        waveColorTerniary: string;
+        textColorTextTertiary: string;
+        colorQuaternary: string;
+        colorQuaternaryHover: string;
+        colorQuaternaryPressed: string;
+        color: string;
+        colorHover: string;
+        colorPressed: string;
+        colorFocus: string;
+        colorDisabled: string;
+        textColor: string;
+        textTertiary: string;
+        textColorTertiary: string;
+        textColorHover: string;
+        textColorPressed: string;
+        textColorFocus: string;
+        textColorDisabled: string;
+        textColorText: string;
+        textColorTextHover: string;
+        textColorTextPressed: string;
+        textColorTextFocus: string;
+        textColorTextDisabled: string;
+        textColorGhost: string;
+        textColorGhostHover: string;
+        textColorGhostPressed: string;
+        textColorGhostFocus: string;
+        textColorGhostDisabled: string;
+        border: string;
+        borderHover: string;
+        borderPressed: string;
+        borderFocus: string;
+        borderDisabled: string;
+        rippleColor: string;
+        colorPrimary: string;
+        colorHoverPrimary: string;
+        colorPressedPrimary: string;
+        colorFocusPrimary: string;
+        colorDisabledPrimary: string;
+        waveColorPrimary: string;
+        textColorPrimary: string;
+        textColorHoverPrimary: string;
+        textColorPressedPrimary: string;
+        textColorFocusPrimary: string;
+        textColorDisabledPrimary: string;
+        textColorTextPrimary: string;
+        textColorTextHoverPrimary: string;
+        textColorTextPressedPrimary: string;
+        textColorTextFocusPrimary: string;
+        textColorTextDisabledPrimary: string;
+        textColorGhostPrimary: string;
+        textColorGhostHoverPrimary: string;
+        textColorGhostPressedPrimary: string;
+        textColorGhostFocusPrimary: string;
+        textColorGhostDisabledPrimary: string;
+        borderPrimary: string;
+        borderHoverPrimary: string;
+        borderPressedPrimary: string;
+        borderFocusPrimary: string;
+        borderDisabledPrimary: string;
+        rippleColorPrimary: string;
+        colorInfo: string;
+        colorHoverInfo: string;
+        colorPressedInfo: string;
+        colorFocusInfo: string;
+        colorDisabledInfo: string;
+        textColorInfo: string;
+        textColorHoverInfo: string;
+        textColorPressedInfo: string;
+        textColorFocusInfo: string;
+        textColorDisabledInfo: string;
+        textColorTextInfo: string;
+        textColorTextHoverInfo: string;
+        textColorTextPressedInfo: string;
+        textColorTextFocusInfo: string;
+        textColorTextDisabledInfo: string;
+        textColorGhostInfo: string;
+        textColorGhostHoverInfo: string;
+        textColorGhostPressedInfo: string;
+        textColorGhostFocusInfo: string;
+        textColorGhostDisabledInfo: string;
+        borderInfo: string;
+        borderHoverInfo: string;
+        borderPressedInfo: string;
+        borderFocusInfo: string;
+        borderDisabledInfo: string;
+        rippleColorInfo: string;
+        colorSuccess: string;
+        colorHoverSuccess: string;
+        colorPressedSuccess: string;
+        colorFocusSuccess: string;
+        colorDisabledSuccess: string;
+        textColorSuccess: string;
+        textColorHoverSuccess: string;
+        textColorPressedSuccess: string;
+        textColorFocusSuccess: string;
+        textColorDisabledSuccess: string;
+        textColorTextSuccess: string;
+        textColorTextHoverSuccess: string;
+        textColorTextPressedSuccess: string;
+        textColorTextFocusSuccess: string;
+        textColorTextDisabledSuccess: string;
+        textColorGhostSuccess: string;
+        textColorGhostHoverSuccess: string;
+        textColorGhostPressedSuccess: string;
+        textColorGhostFocusSuccess: string;
+        textColorGhostDisabledSuccess: string;
+        borderSuccess: string;
+        borderHoverSuccess: string;
+        borderPressedSuccess: string;
+        borderFocusSuccess: string;
+        borderDisabledSuccess: string;
+        rippleColorSuccess: string;
+        colorWarning: string;
+        colorHoverWarning: string;
+        colorPressedWarning: string;
+        colorFocusWarning: string;
+        colorDisabledWarning: string;
+        textColorWarning: string;
+        textColorHoverWarning: string;
+        textColorPressedWarning: string;
+        textColorFocusWarning: string;
+        textColorDisabledWarning: string;
+        textColorTextWarning: string;
+        textColorTextHoverWarning: string;
+        textColorTextPressedWarning: string;
+        textColorTextFocusWarning: string;
+        textColorTextDisabledWarning: string;
+        textColorGhostWarning: string;
+        textColorGhostHoverWarning: string;
+        textColorGhostPressedWarning: string;
+        textColorGhostFocusWarning: string;
+        textColorGhostDisabledWarning: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        borderPressedWarning: string;
+        borderFocusWarning: string;
+        borderDisabledWarning: string;
+        rippleColorWarning: string;
+        colorError: string;
+        colorHoverError: string;
+        colorPressedError: string;
+        colorFocusError: string;
+        colorDisabledError: string;
+        textColorError: string;
+        textColorHoverError: string;
+        textColorPressedError: string;
+        textColorFocusError: string;
+        textColorDisabledError: string;
+        textColorTextError: string;
+        textColorTextHoverError: string;
+        textColorTextPressedError: string;
+        textColorTextFocusError: string;
+        textColorTextDisabledError: string;
+        textColorGhostError: string;
+        textColorGhostHoverError: string;
+        textColorGhostPressedError: string;
+        textColorGhostFocusError: string;
+        textColorGhostDisabledError: string;
+        borderError: string;
+        borderHoverError: string;
+        borderPressedError: string;
+        borderFocusError: string;
+        borderDisabledError: string;
+        rippleColorError: string;
+        waveOpacity: string;
+        fontWeight: string;
+        fontWeightStrong: string;
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingRoundTiny: string;
+        paddingRoundSmall: string;
+        paddingRoundMedium: string;
+        paddingRoundLarge: string;
+        iconMarginTiny: string;
+        iconMarginSmall: string;
+        iconMarginMedium: string;
+        iconMarginLarge: string;
+        iconSizeTiny: string;
+        iconSizeSmall: string;
+        iconSizeMedium: string;
+        iconSizeLarge: string;
+        rippleDuration: string;
+    }, any>;
+}>;
+export default calendarLight;
+export type CalendarTheme = typeof calendarLight;