venice-ui 2.4.13 → 3.0.1

package/dist/cjs/components/Checkbox/Checkbox.styles.js

@@ -3,34 +3,49 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxElement = exports.CheckoxIcon = exports.ToogleCheckboxWrapper = void 0;
-const common_1 = require("../common");
+exports.CheckboxBox = exports.CheckboxRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-exports.ToogleCheckboxWrapper = styled_components_1.default.div `
-  ${(p) => (0, common_1.setToogleSize)(p.size)}
-`;
-exports.CheckoxIcon = styled_components_1.default.div `
+exports.CheckboxRoot = styled_components_1.default.div `
   display: flex;
+  align-items: center;
+  justify-content: start-flex;
+  width: 100%;
+  height: 100%;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
 `;
-exports.CheckboxElement = styled_components_1.default.div `
+exports.CheckboxBox = styled_components_1.default.div `
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  background-color: ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.toogleBackgrund};
+  height: ${({ theme, config, size }) => config.size[size].height}px;
+  width: ${({ theme, config, size }) => config.size[size].width}px;
   border: 1px solid
-    ${(p) => p.active ? p.theme.toogleActiveBackgorund : p.theme.inputDefaultBorder};
-  font-family: 'Lato', sans-serif;
-  outline: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
+    ${({ theme, config, isActive, isDisabled, isIntermedian }) => isDisabled
+    ? config.color.disabled.boxBorder
+    : isIntermedian
+        ? config.color.intermedian.boxBorder
+        : isActive
+            ? config.color.focus.boxBorder
+            : config.color.default.boxBorder};
+  background: ${({ theme, config, isActive, isDisabled, isIntermedian }) => isDisabled
+    ? config.color.disabled.boxBackground
+    : isIntermedian ?
+        config.color.intermedian.boxBackground
+        : isActive
+            ? config.color.focus.boxBackground
+            : config.color.default.background};
+  border-radius: ${({ config, size }) => config.size[size].radius}px;
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  :hover{
+    border-color: ${({ theme, config, isActive, isDisabled, isIntermedian }) => isDisabled
+    ? config.color.disabled.boxBorder
+    : isIntermedian
+        ? config.color.intermedian.boxBorder
+        : isActive
+            ? config.color.focus.boxBorder
+            : config.color.hover.boxBorder};
 
-  height: ${(p) => (p.size === 'small' ? '20px' : '24px')};
-  width: ${(p) => (p.size === 'small' ? '20px' : '24px')};
-  border-radius: ${Theme_1.Theme.borderRadius.m};
-  ${(p) => p.size === 'small' && `margin:2px 0;`}
+  }
 `;

package/dist/cjs/components/ComponentRoot/ComponentRoot.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentRoot = void 0;
+const Aligment_1 = require("../Aligment");
+const HelperText_1 = require("../HelperText");
+const Label_1 = require("../Label");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = require("styled-components");
+const ComponentRoot_styles_1 = require("./ComponentRoot.styles");
+const ComponentRoot = ({ theme, themeVariant = 'default', label, labelPosition = 'top', size = 'md', width, disabled = false, error = false, readOnly = false, required = false, optional = false, optionalLabel, helperText, componentConfig, children, isActive = false, labelInversed = false, smallSize = false, noBorder = false, noBreakLabel, componentWidth = 'auto' }) => {
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Aligment_1.Aligment, { align: 'flex-start', direction: labelPosition === 'top'
+                ? 'column'
+                : labelInversed
+                    ? 'row-reverse'
+                    : 'row', justify: labelInversed && labelPosition === 'left'
+                ? 'flex-end'
+                : 'flex-start', wrap: 'nowrap', gap: 4, width: width ? width : labelInversed ? 'auto' : '100%' },
+            label && (react_1.default.createElement(Label_1.Label, { text: label, size: size, position: labelPosition, required: required, optional: optional, optionalLabel: optionalLabel, smallSize: smallSize, noBreakLabel: noBreakLabel })),
+            react_1.default.createElement(Aligment_1.Aligment, { direction: 'column', align: 'flex-start', gap: 4, wrap: 'nowrap', width: width ? width : labelInversed ? 'auto' : '100%' },
+                react_1.default.createElement(ComponentRoot_styles_1.ComponentWrapper, { inputSize: size, width: componentWidth, theme: theme, inputConfig: componentConfig, error: error, isActive: isActive, disabled: disabled, readOnly: readOnly, labelInversed: labelInversed, noBorder: noBorder }, children),
+                helperText && !labelInversed && (react_1.default.createElement(HelperText_1.HelperText, { helperText: helperText, mode: error ? 'error' : 'default', theme: theme, themeVariant: themeVariant, disabled: disabled }))))));
+};
+exports.ComponentRoot = ComponentRoot;

package/dist/cjs/components/ComponentRoot/ComponentRoot.styles.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ComponentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  overflow: hidden;
+  width: ${({ width, labelInversed }) => width ? width : labelInversed ? 'auto' : '100%'};
+  height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].height}px;
+  border: 1px solid
+    ${({ theme, inputConfig }) => inputConfig.color.default.border};
+  ${({ noBorder }) => noBorder && 'border: none;'}
+  background: ${({ theme, inputConfig }) => inputConfig.color.default.background};
+  border-radius: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].radius}px;
+
+  ${({ disabled, error, readOnly, inputConfig, isActive }) => !disabled &&
+    !error &&
+    !readOnly &&
+    `
+    &:hover {
+      border-color: ${isActive
+        ? inputConfig.color.focus.border
+        : inputConfig.color.hover.border};
+      background: ${inputConfig.color.hover.background};
+    }
+    `}
+  ${({ readOnly, inputConfig, isActive }) => !readOnly &&
+    `
+    &:focus-within {
+        border-color: ${inputConfig.color.focus.border};
+        box-shadow: 0 0 0 3px
+            ${inputConfig.color.focus.shadow};
+        background: ${inputConfig.color.focus.background};
+    }
+  ${isActive &&
+        !readOnly &&
+        `
+      border-color: ${inputConfig.color.focus.border};
+      box-shadow: 0 0 0 3px ${inputConfig.color.focus.shadow};
+      background: ${inputConfig.color.focus.background};
+  `}
+`}
+  ${({ error, theme, inputConfig }) => error &&
+    `
+    border-color: ${inputConfig.color.error.border};
+    `}
+
+  ${({ disabled, theme, inputConfig, isActive }) => disabled &&
+    `
+    background: ${isActive
+        ? inputConfig.color.disabled.backgroundActive
+        : inputConfig.color.disabled.background};
+    border-color: ${inputConfig.color.disabled.border};  
+    color: ${inputConfig.color.disabled.text};
+    cursor: ${inputConfig.color.disabled.cursor};
+    `}
+    ${({ readOnly, theme, inputConfig }) => readOnly &&
+    `
+    background: ${inputConfig.color.readonly.bg};
+    color: ${inputConfig.color.readonly.text};
+    border-color: transparent;
+    border-bottom: 1px solid rgba(0,0,0,0.06);
+    border-radius: 0;
+
+    `}
+`;

package/dist/cjs/components/{ElementHeader → ComponentRoot}/index.js

@@ -14,4 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ElementHeader"), exports);
+__exportStar(require("./ComponentRoot"), exports);
+__exportStar(require("./ComponentRoot.styles"), exports);

package/dist/cjs/components/DatePicker/Calendar.js

@@ -15,36 +15,34 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = void 0;
+const DatePicker_styles_1 = require("./DatePicker.styles");
+const date_fns_1 = require("date-fns");
 const react_1 = __importStar(require("react"));
-const DatePiocker_styles_1 = require("./DatePiocker.styles");
 const Aligment_1 = require("../Aligment");
+const styled_components_1 = require("styled-components");
 const CalendarHeader_1 = require("./CalendarHeader");
-const date_fns_1 = require("date-fns");
-const CalendarContent_1 = require("./CalendarContent");
 const ButtonsFooter_1 = require("../ButtonsFooter");
-const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance = false, autoConfirm: autoConfirmProp, labels = { close: 'Close', confirm: 'Select', today: 'Today' }, localeLabels, zIndex }) => {
-    const defaultLocale = {
-        months: [
-            'January', 'February', 'March', 'April', 'May', 'June',
-            'July', 'August', 'September', 'October', 'November', 'December'
-        ],
-        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        firstDayOfWeek: 0,
-    };
-    const effectiveLocale = {
-        months: (localeLabels && localeLabels.months) || defaultLocale.months,
-        weekdaysShort: (localeLabels && localeLabels.weekdaysShort) || defaultLocale.weekdaysShort,
-        firstDayOfWeek: (localeLabels && typeof localeLabels.firstDayOfWeek === 'number') ? localeLabels.firstDayOfWeek : defaultLocale.firstDayOfWeek,
-    };
+const CalendarContent_1 = require("./CalendarContent");
+const Calendar = ({ theme, themeVariant = 'default', value, top, left, triggerTop, localeLabels, handleClose, handleSelect, isAdvance = true, autoConfirm = false, zIndex, config, labels, }) => {
     const setYearScope = (date) => {
         const year = (0, date_fns_1.getYear)(date);
         const yearIndex = year % 12;
@@ -54,7 +52,9 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance
     };
     const effectiveAutoConfirm = isAdvance
         ? false
-        : (typeof autoConfirmProp !== 'undefined' ? Boolean(autoConfirmProp) : true);
+        : typeof autoConfirm !== 'undefined'
+            ? Boolean(autoConfirm)
+            : true;
     const [calendarSettings, updateCalendarSettings] = (0, react_1.useState)(() => {
         const initialDate = value !== undefined ? new Date(value) : new Date();
         return {
@@ -64,8 +64,42 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance
             yearsScope: setYearScope(initialDate),
         };
     });
-    const [selectedDate, setSellectedDate] = (0, react_1.useState)(() => (value !== undefined ? new Date(value) : new Date()));
+    const [selectedDate, setSellectedDate] = (0, react_1.useState)(() => value !== undefined ? new Date(value) : new Date());
     const wrapperRef = (0, react_1.useRef)(null);
+    const [computedTop, setComputedTop] = (0, react_1.useState)(top);
+    const [computedLeft, setComputedLeft] = (0, react_1.useState)(left);
+    (0, react_1.useEffect)(() => {
+        setComputedTop(top);
+    }, [top]);
+    (0, react_1.useEffect)(() => {
+        setComputedLeft(left);
+    }, [left]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!wrapperRef.current)
+            return;
+        const calendarRect = wrapperRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const currentTopInViewport = computedTop - window.scrollY;
+        const currentLeftInViewport = computedLeft - window.scrollX;
+        const overflowsBottom = currentTopInViewport + calendarRect.height > viewportHeight;
+        const overflowsRight = currentLeftInViewport + calendarRect.width > viewportWidth;
+        const overflowsLeft = currentLeftInViewport < 0;
+        if (overflowsBottom) {
+            const triggerTopInViewport = triggerTop - window.scrollY;
+            const nextTop = Math.max(window.scrollY, window.scrollY + triggerTopInViewport - calendarRect.height);
+            if (nextTop !== computedTop) {
+                setComputedTop(nextTop);
+            }
+        }
+        if (overflowsRight || overflowsLeft) {
+            const maxLeft = window.scrollX + Math.max(0, viewportWidth - calendarRect.width);
+            const nextLeft = Math.min(Math.max(window.scrollX, computedLeft), maxLeft);
+            if (nextLeft !== computedLeft) {
+                setComputedLeft(nextLeft);
+            }
+        }
+    }, [top, left, triggerTop, computedTop, computedLeft]);
     (0, react_1.useEffect)(() => {
         updateCalendarSettings((prev) => ({
             ...prev,
@@ -110,7 +144,9 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance
             const target = e.target;
             if (!el)
                 return;
-            const path = e.composedPath ? e.composedPath() : undefined;
+            const path = e.composedPath
+                ? e.composedPath()
+                : undefined;
             const clickedOutside = path ? !path.includes(el) : !el.contains(target);
             if (clickedOutside && !isAdvance) {
                 handleClose && handleClose();
@@ -123,12 +159,16 @@ const Calendar = ({ value, top, left, size, handleClose, handleSelect, isAdvance
             document.removeEventListener('touchstart', handleOutside);
         };
     }, [isAdvance, handleClose]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper, { ref: wrapperRef, top: top, left: left, size: size, zIndex: zIndex },
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(DatePicker_styles_1.CalendarRoot, { ref: wrapperRef, theme: theme, config: config.calendarCard, zIndex: zIndex, top: computedTop, left: computedLeft },
             react_1.default.createElement(Aligment_1.Aligment, { direction: "row" },
-                react_1.default.createElement(CalendarHeader_1.CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: effectiveLocale }),
-                react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: effectiveLocale }),
-                isAdvance && (react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: labels.close || 'Close', labelConfirm: labels.confirm || 'Select', labelAdditional: labels.today || 'Today', additionaNormalMode: true })))),
-        react_1.default.createElement(DatePiocker_styles_1.CalendarOverlay, { zIndex: zIndex })));
+                react_1.default.createElement(CalendarHeader_1.CalendarHeader, { theme: theme, themeVariant: themeVariant, mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode, localeLabels: localeLabels }),
+                react_1.default.createElement(CalendarContent_1.CalendarContent, { theme: theme, themeVariant: themeVariant, date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope, localeLabels: localeLabels }),
+                isAdvance && (react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { onSecondaryAction: handleClose, onPrimaryAction: confirmDate, onAdditionalAction: setToday, isAdditionalDanger: false, size: "sm", labels: {
+                        primary: labels?.primary,
+                        secondary: labels?.secondary,
+                        additional: labels?.additional,
+                    } })))),
+        react_1.default.createElement(DatePicker_styles_1.CalendarOverlayer, { onClick: handleClose, config: config.calendarCard, theme: theme })));
 };
 exports.Calendar = Calendar;

package/dist/cjs/components/DatePicker/CalendarContent.js

@@ -15,20 +15,38 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalendarContent = void 0;
-const react_1 = __importStar(require("react"));
-const DatePiocker_styles_1 = require("./DatePiocker.styles");
 const date_fns_1 = require("date-fns");
-const Aligment_1 = require("../Aligment");
-const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
+const config_1 = require("../../config");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const DatePicker_styles_1 = require("./DatePicker.styles");
+const CalendarContent = ({ theme, themeVariant = 'default', date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const datePickerConfig = componentsConfig.datePicker.calendarContent;
     const [tempYear, setTempYear] = (0, react_1.useState)((0, date_fns_1.getYear)(date));
     const [tempMonth, setTempMonth] = (0, react_1.useState)((0, date_fns_1.getMonth)(date));
     (0, react_1.useEffect)(() => {
@@ -36,12 +54,11 @@ const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, loc
         setTempMonth((0, date_fns_1.getMonth)(date));
     }, [date]);
     const viewDate = new Date(tempYear, tempMonth, 1);
-    const [days, setDays] = (0, react_1.useState)([]);
     const firstDayOfMonth = (0, date_fns_1.startOfMonth)(viewDate);
     const daysInMonth = (0, date_fns_1.getDaysInMonth)(viewDate);
     const firstDayIndex = (0, date_fns_1.getDay)(firstDayOfMonth);
     const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
-    (0, react_1.useEffect)(() => {
+    const days = (0, react_1.useMemo)(() => {
         const daysScope = [];
         for (let i = 1; i <= beforeIndex; i++) {
             daysScope.push('');
@@ -49,8 +66,8 @@ const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, loc
         for (let j = 1; j <= daysInMonth; j++) {
             daysScope.push(j.toString());
         }
-        setDays(daysScope);
-    }, [viewDate, beforeIndex, daysInMonth]);
+        return daysScope;
+    }, [beforeIndex, daysInMonth]);
     const setDay = (day) => {
         if (!isNaN(day)) {
             const newDate = new Date(tempYear, tempMonth, day);
@@ -59,37 +76,39 @@ const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, loc
     };
     const handleSetMonth = (month) => {
         if (!isNaN(month)) {
-            setTempMonth(month);
+            const newDate = new Date(tempYear, month, 1);
+            handleChange(newDate);
             changeMode('day');
         }
     };
     const handleSetYear = (year) => {
         if (!isNaN(year)) {
-            setTempYear(year);
+            const newDate = new Date(year, tempMonth, 1);
+            handleChange(newDate);
             changeMode('month');
         }
     };
-    const months = localeLabels?.months ?? [
-        'January', 'February', 'March', 'April', 'May', 'June',
-        'July', 'August', 'September', 'October', 'November', 'December'
-    ];
-    const weekdays = localeLabels?.weekdaysShort ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    return (react_1.default.createElement(DatePiocker_styles_1.CalendarContentWrapper, null,
-        mode === 'day' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" },
-            react_1.default.createElement(DatePiocker_styles_1.DaysHeader, null, weekdays.map((label, idx) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, { key: `wd-${idx}` },
-                react_1.default.createElement(DatePiocker_styles_1.DayLabel, null, label))))),
-            react_1.default.createElement(DatePiocker_styles_1.DaysContent, null, days.map((dayStr, idx) => {
-                const dayNum = parseInt(dayStr, 10);
-                const isActive = !isNaN(dayNum) &&
-                    dayNum === (0, date_fns_1.getDate)(date) &&
-                    tempMonth === (0, date_fns_1.getMonth)(date) &&
-                    tempYear === (0, date_fns_1.getYear)(date);
-                return (react_1.default.createElement(DatePiocker_styles_1.DayWrapper, { key: `d-${idx}` },
-                    react_1.default.createElement(DatePiocker_styles_1.Day, { active: isActive, haveContent: dayStr !== '', onClick: () => !isNaN(dayNum) && setDay(dayNum) }, dayStr)));
-            })))),
-        mode === 'month' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, months.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, { key: `m-${index}` },
-            react_1.default.createElement(DatePiocker_styles_1.Month, { active: index === tempMonth, onClick: () => handleSetMonth(index) }, _month)))))),
-        mode === 'year' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, { key: `y-${_year}` },
-            react_1.default.createElement(DatePiocker_styles_1.Month, { active: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))))));
+    const selectedDay = (0, date_fns_1.getDate)(date);
+    const selectedMonth = (0, date_fns_1.getMonth)(date);
+    const selectedYear = (0, date_fns_1.getYear)(date);
+    const isActiveDay = (dayStr) => {
+        if (!dayStr) {
+            return false;
+        }
+        const dayNum = Number(dayStr);
+        return (Number.isInteger(dayNum) &&
+            dayNum === selectedDay &&
+            tempMonth === selectedMonth &&
+            tempYear === selectedYear);
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(DatePicker_styles_1.CalendarContentRoot, { theme: resolvedTheme, config: datePickerConfig, days: mode === 'day' },
+            mode === 'day' && (react_1.default.createElement(react_1.default.Fragment, null,
+                localeLabels.weekdaysShort.map((label, idx) => (react_1.default.createElement(DatePicker_styles_1.DaysHeader, { key: `wd-${idx}`, config: datePickerConfig }, label))),
+                days.map((dayStr, idx) => (react_1.default.createElement(DatePicker_styles_1.Day, { haveContent: dayStr !== '', key: `day-${idx}`, config: datePickerConfig, isSelected: isActiveDay(dayStr), onClick: () => !isNaN(parseInt(dayStr, 10)) && setDay(parseInt(dayStr, 10)) }, dayStr))))),
+            mode === 'month' &&
+                localeLabels.months.map((_month, index) => (react_1.default.createElement(DatePicker_styles_1.Month, { haveContent: true, key: `m-${index}`, config: datePickerConfig, isSelected: index === tempMonth, onClick: () => handleSetMonth(index) }, _month))),
+            mode === 'year' &&
+                yearsScope.map((_year) => (react_1.default.createElement(DatePicker_styles_1.Month, { haveContent: true, key: `y-${_year}`, config: datePickerConfig, isSelected: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))));
 };
 exports.CalendarContent = CalendarContent;

package/dist/cjs/components/DatePicker/CalendarHeader.js

@@ -4,35 +4,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalendarHeader = void 0;
+const config_1 = require("../../config");
 const react_1 = __importDefault(require("react"));
-const DatePiocker_styles_1 = require("./DatePiocker.styles");
+const styled_components_1 = require("styled-components");
+const DatePicker_styles_1 = require("./DatePicker.styles");
+const Icon_1 = require("../Icon");
 const Aligment_1 = require("../Aligment");
-const Icons_1 = require("../Icons");
-const Typography_1 = require("../Typography");
 const date_fns_1 = require("date-fns");
-const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, localeLabels, }) => {
+const CalendarHeader = ({ theme, themeVariant = 'default', mode, date, yearsScope, handleChange, handleSelect, localeLabels, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const datePickerConfig = componentsConfig.datePicker;
+    const calendarCardConfig = datePickerConfig.calendarCard;
     const prev = () => {
         handleChange(mode, false);
     };
     const next = () => {
         handleChange(mode, true);
     };
-    const setMode = (mode) => {
-        handleSelect(mode);
+    const setMode = (nextMode) => {
+        handleSelect(nextMode);
     };
-    const defaultMonths = [
-        'January', 'February', 'March', 'April', 'May', 'June',
-        'July', 'August', 'September', 'October', 'November', 'December'
-    ];
-    const months = (localeLabels && localeLabels.months && localeLabels.months.length === 12)
-        ? localeLabels.months
-        : defaultMonths;
-    return (react_1.default.createElement(DatePiocker_styles_1.CalendarHeaderWrapper, null,
-        react_1.default.createElement(Aligment_1.Aligment, null,
-            react_1.default.createElement(Icons_1.Icon, { name: 'back', onClick: prev }),
-            react_1.default.createElement(DatePiocker_styles_1.CalendarHeaderTexts, null,
-                mode === 'day' && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: () => setMode('month') }, months[date.getMonth()])),
-                mode === 'year' ? (react_1.default.createElement(Typography_1.Text, null, `${yearsScope[0]} - ${yearsScope[yearsScope.length - 1]}`)) : (react_1.default.createElement(Typography_1.Text, { action: true, onClick: () => setMode('year') }, (0, date_fns_1.getYear)(date)))),
-            react_1.default.createElement(Icons_1.Icon, { name: 'forward', onClick: next }))));
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(DatePicker_styles_1.CalendarHeaderRoot, { config: calendarCardConfig },
+            react_1.default.createElement(Aligment_1.Aligment, null,
+                react_1.default.createElement(Icon_1.Icon, { name: 'back', onClick: prev, size: "md" }),
+                react_1.default.createElement(DatePicker_styles_1.CalendarHeaderButton, { config: calendarCardConfig },
+                    mode === 'day' && (react_1.default.createElement(DatePicker_styles_1.CalendarHeaderButton, { config: calendarCardConfig, onClick: () => setMode('month') }, localeLabels.months[date.getMonth()])),
+                    mode === 'year' ? (react_1.default.createElement(DatePicker_styles_1.CalendarHeaderButton, { config: calendarCardConfig }, `${yearsScope[0]} - ${yearsScope[yearsScope.length - 1]}`)) : (react_1.default.createElement(DatePicker_styles_1.CalendarHeaderButton, { config: calendarCardConfig, onClick: () => setMode('year') }, (0, date_fns_1.getYear)(date)))),
+                react_1.default.createElement(Icon_1.Icon, { name: 'forward', onClick: next, size: "md" })))));
 };
 exports.CalendarHeader = CalendarHeader;