venice-ui 2.0.23 → 2.0.24

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

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+const react_1 = __importStar(require("react"));
+const DatePiocker_styles_1 = require("./DatePiocker.styles");
+const Aligment_1 = require("../Aligment");
+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, }) => {
+    const [calendarSettings, updateCalendarSettings] = (0, react_1.useState)({
+        mode: 'day',
+        value: 0,
+        date: new Date(),
+        yearsScope: [],
+    });
+    const [selectedDate, setSellectedDate] = (0, react_1.useState)(new Date(value !== undefined ? value : (0, date_fns_1.getTime)(new Date())));
+    const setYearScope = (date) => {
+        const year = (0, date_fns_1.getYear)(date);
+        const yearIndex = year % 12;
+        const pastYears = Array.from({ length: yearIndex }, (_, i) => year - (i + 1)).reverse();
+        const futureYears = Array.from({ length: 12 - yearIndex - 1 }, (_, i) => year + (i + 1));
+        return [...pastYears, year, ...futureYears];
+    };
+    (0, react_1.useEffect)(() => {
+        value !== undefined ? value : (0, date_fns_1.getTime)(new Date()),
+            updateCalendarSettings({
+                ...calendarSettings,
+                value: (0, date_fns_1.getTime)(new Date(selectedDate)),
+                date: selectedDate,
+                yearsScope: setYearScope(selectedDate),
+            });
+    }, [value, selectedDate]);
+    const setPeriod = (mode, forward) => {
+        const operations = {
+            day: forward ? date_fns_1.addMonths : date_fns_1.subMonths,
+            month: forward ? date_fns_1.addYears : date_fns_1.subYears,
+            year: forward ? date_fns_1.addYears : date_fns_1.subYears,
+        };
+        const step = mode === 'year' ? 12 : 1;
+        const modifyDate = operations[mode];
+        setSellectedDate(modifyDate(calendarSettings.date, step));
+    };
+    const setMode = (mode) => {
+        updateCalendarSettings({
+            ...calendarSettings,
+            mode: mode,
+        });
+    };
+    const setNewDate = (newDate) => {
+        setSellectedDate(newDate);
+    };
+    const confirmDate = () => {
+        handleSelect((0, date_fns_1.getTime)(new Date(selectedDate)));
+    };
+    const setToday = () => {
+        setSellectedDate(new Date());
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(DatePiocker_styles_1.CalendarWrapper
+        // top={top}
+        , { 
+            // top={top}
+            top: 225, left: left, size: size },
+            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 }),
+                react_1.default.createElement(CalendarContent_1.CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),
+                react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: 'Zamknij', labelConfirm: 'Wybierz', labelAdditional: "Dzi\u015B", additionaNormalMode: true }))),
+        react_1.default.createElement(DatePiocker_styles_1.CalendarOverlay, null)));
+};
+exports.Calendar = Calendar;

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

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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, handleChange, changeMode, mode, yearsScope, }) => {
+    const [days, setDays] = (0, react_1.useState)([]);
+    const firstDayOfMonth = (0, date_fns_1.startOfMonth)(date);
+    const daysInMonth = (0, date_fns_1.getDaysInMonth)(date);
+    const firstDayIndex = (0, date_fns_1.getDay)(firstDayOfMonth);
+    const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
+    (0, react_1.useEffect)(() => {
+        const daysScope = [];
+        for (let i = 1; i <= beforeIndex; i++) {
+            daysScope.push('');
+        }
+        for (let j = 1; j <= daysInMonth; j++) {
+            daysScope.push(j.toString());
+        }
+        setDays(daysScope);
+    }, [date]);
+    const setDay = (day) => {
+        if (!isNaN(day)) {
+            const newDate = (0, date_fns_1.setDate)(date, day);
+            handleChange(newDate);
+        }
+    };
+    const handleSetMonth = (month) => {
+        if (!isNaN(month)) {
+            const newDate = (0, date_fns_1.setMonth)(date, month);
+            handleChange(newDate);
+            changeMode('day');
+        }
+    };
+    const handleSetYear = (year) => {
+        if (!isNaN(year)) {
+            const newDate = (0, date_fns_1.setYear)(date, year);
+            handleChange(newDate);
+            changeMode('month');
+        }
+    };
+    const daysName = ['Pon', 'Wt', 'Śr', 'Cz', 'P', 'Sob', 'Nd'];
+    const monthNames = [
+        'styczeń',
+        'luty',
+        'marzec',
+        'kwiecień',
+        'maj',
+        'czerwiec',
+        'lipiec',
+        'sierpień',
+        'wrzesień',
+        'październik',
+        'listopad',
+        'grudzień',
+    ];
+    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, daysName.map((_item) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, null,
+                react_1.default.createElement(DatePiocker_styles_1.DayLabel, null, _item))))),
+            react_1.default.createElement(DatePiocker_styles_1.DaysContent, null, days.map((_day) => (react_1.default.createElement(DatePiocker_styles_1.DayWrapper, null,
+                react_1.default.createElement(DatePiocker_styles_1.Day, { active: parseInt(_day) === (0, date_fns_1.getDate)(date), haveContent: _day !== '', onClick: () => setDay(parseInt(_day)) }, _day))))))),
+        mode === 'month' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, monthNames.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, null,
+            react_1.default.createElement(DatePiocker_styles_1.Month, { active: index === (0, date_fns_1.getMonth)(date), 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, null,
+            react_1.default.createElement(DatePiocker_styles_1.Month, { active: _year === (0, date_fns_1.getYear)(date), onClick: () => handleSetYear(_year) }, _year))))))));
+};
+exports.CalendarContent = CalendarContent;

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const DatePiocker_styles_1 = require("./DatePiocker.styles");
+const Aligment_1 = require("../Aligment");
+const Icons_1 = require("../Icons");
+const Typography_1 = require("../Typography");
+const date_fns_1 = require("date-fns");
+const locale_1 = require("date-fns/locale");
+const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, }) => {
+    const prev = () => {
+        handleChange(mode, false);
+    };
+    const next = () => {
+        handleChange(mode, true);
+    };
+    const setMode = (mode) => {
+        handleSelect(mode);
+    };
+    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') }, (0, date_fns_1.format)(date, 'LLLL', { locale: locale_1.pl }))),
+                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 }))));
+};
+exports.CalendarHeader = CalendarHeader;

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

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const Input_1 = require("../Input");
+const Aligment_1 = require("../Aligment");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const Theme_1 = require("../../Theme");
+const DatePiocker_styles_1 = require("./DatePiocker.styles");
+const Dropdown_1 = require("../Dropdown");
+const react_dom_1 = require("react-dom");
+const Calendar_1 = require("./Calendar");
+const date_fns_1 = require("date-fns");
+const Icons_1 = require("../Icons");
+const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = Theme_1.mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, }) => {
+    const [open, toogleOpen] = (0, react_1.useState)(false);
+    const sourceRef = (0, react_1.useRef)(null);
+    const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+    });
+    const onSubmit = (selectedDate) => {
+        handleChange(name, selectedDate);
+        toogleOpen(false);
+    };
+    const clearDate = () => {
+        handleChange(name, undefined);
+        toogleOpen(false);
+    };
+    const handleOpen = () => {
+        if (!disabled && !open) {
+            if (sourceRef.current) {
+                const buttonRect = sourceRef.current.getBoundingClientRect();
+                const positionStyle = {
+                    top: buttonRect.bottom + window.scrollY,
+                    left: buttonRect.left + window.scrollX,
+                };
+                setDropdownStyles(positionStyle);
+            }
+            toogleOpen(!open);
+        }
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
+            label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+            react_1.default.createElement(Input_1.InputWrapper, { width: width }, readOnly ? (react_1.default.createElement(Input_1.InputReadOnlyElement, { inputSize: size }, value)) : (react_1.default.createElement(DatePiocker_styles_1.DatePiockerElement, { ref: sourceRef },
+                react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, onClick: () => handleOpen() }, value ? (0, date_fns_1.format)(new Date(value), 'dd-MM-yyyy') : placeholder),
+                value && (react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
+                    react_1.default.createElement(Icons_1.Icon, { name: 'close', size: 24, onClick: clearDate, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
+                open &&
+                    (0, react_dom_1.createPortal)(react_1.default.createElement(Calendar_1.Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), open: open, value: value, handleSelect: onSubmit }), document.body)))))));
+};
+exports.DatePicker = DatePicker;

package/dist/cjs/components/DatePicker/DatePiocker.styles.js

@@ -0,0 +1,142 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Month = exports.MonthWrapper = exports.DayLabel = exports.Day = exports.DayLabelWrapper = exports.DayWrapper = exports.DaysContent = exports.DaysHeader = exports.CalendarContentWrapper = exports.CalendarHeaderTexts = exports.CalendarHeaderWrapper = exports.CalendarWrapper = exports.DatePiockerElement = exports.CalendarOverlay = void 0;
+const common_1 = require("../common");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Theme_1 = require("../../Theme");
+exports.CalendarOverlay = styled_components_1.default.div `
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 799;
+`;
+exports.DatePiockerElement = styled_components_1.default.div `
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+`;
+// ToDo fix ma "top"!!!
+exports.CalendarWrapper = styled_components_1.default.div `
+  box-sizing: border-box;
+  background-color: ${Theme_1.Theme.colors.white};
+  box-shadow: ${Theme_1.Theme.shadow.m};
+  padding: ${Theme_1.Theme.padding.m} 0;
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  height: auto;
+  width: 326px;
+  position: absolute;
+  z-index: ${Theme_1.Theme.zIndex.dropdown};
+
+  // top: ${(p) => (0, common_1.setPanelTop)(p.size)};
+  top: 225px;
+  border: 1px solid ${Theme_1.Theme.colors.gray_2};
+  border-top: none;
+  min-width: 30px;
+`;
+exports.CalendarHeaderWrapper = styled_components_1.default.div `
+  background-color: #ffffff;
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0.4rem 0.8rem;
+`;
+exports.CalendarHeaderTexts = styled_components_1.default.div `
+  display: flex;
+  gap: 4px;
+`;
+exports.CalendarContentWrapper = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 4px 8px;
+`;
+exports.DaysHeader = styled_components_1.default.div `
+  display: flex;
+  padding: 4px 0;
+  width: 100%;
+`;
+exports.DaysContent = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+`;
+exports.DayWrapper = styled_components_1.default.div `
+  width: 44px;
+  height: 44px;
+  box-sizing: border-box;
+  padding: 2px;
+`;
+exports.DayLabelWrapper = styled_components_1.default.div `
+  width: 44px;
+  box-sizing: border-box;
+  padding: 2px;
+`;
+exports.Day = styled_components_1.default.div `
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  color: ${Theme_1.Theme.colors.text};
+  ${(p) => p.active &&
+    `
+    background-color: ${Theme_1.Theme.colors.primary};
+    color:${Theme_1.Theme.colors.white};
+    `}
+  ${(p) => p.haveContent &&
+    `
+    cursor:pointer;
+    :hover{
+      background-color: ${Theme_1.Theme.colors.primary_10};
+      color: ${Theme_1.Theme.colors.text};
+    }
+    `};
+`;
+//ToDo dodać tu Text
+exports.DayLabel = styled_components_1.default.div `
+  font-size: 14px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Theme_1.Theme.colors.gray_1};
+`;
+exports.MonthWrapper = styled_components_1.default.div `
+  width: calc(100% / 3);
+  height: 40px;
+  display: flex;
+  box-sizing: border-box;
+  padding: 4px 8px;
+`;
+exports.Month = styled_components_1.default.div `
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  border-radius: 4px;
+  color: ${Theme_1.Theme.colors.text};
+  cursor: pointer;
+  :hover {
+    background-color: ${Theme_1.Theme.colors.primary_10};
+    color: ${Theme_1.Theme.colors.text};
+  }
+  ${(p) => p.active &&
+    `
+    background-color: ${Theme_1.Theme.colors.primary};
+    color:${Theme_1.Theme.colors.white};
+    `}
+`;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DatePicker"), exports);

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

@@ -13,6 +13,11 @@ exports.Text = styled_components_1.default.div `
   font-weight: normal;
   color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
   cursor: ${(p) => (p.action ? 'pointer' : 'default')};
+  ${p => p.action && `
+    :hover{
+    color:${Theme_1.Theme.colors.primary};
+    }
+    `}
 `;
 exports.TextSmall = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.s};

package/dist/cjs/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/ButtonsFooter"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Chips"), exports);
+__exportStar(require("./components/DatePicker"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
 __exportStar(require("./components/ElementHeader"), exports);

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

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { CalendarOverlay, CalendarWrapper } from './DatePiocker.styles';
+import { Aligment } from '../Aligment';
+import { CalendarHeader } from './CalendarHeader';
+import { addMonths, addYears, getTime, getYear, subMonths, subYears, } from 'date-fns';
+import { CalendarContent } from './CalendarContent';
+import { ButtonsFooter } from '../ButtonsFooter';
+export const Calendar = ({ value, top, left, size, handleClose, handleSelect, }) => {
+    const [calendarSettings, updateCalendarSettings] = useState({
+        mode: 'day',
+        value: 0,
+        date: new Date(),
+        yearsScope: [],
+    });
+    const [selectedDate, setSellectedDate] = useState(new Date(value !== undefined ? value : getTime(new Date())));
+    const setYearScope = (date) => {
+        const year = getYear(date);
+        const yearIndex = year % 12;
+        const pastYears = Array.from({ length: yearIndex }, (_, i) => year - (i + 1)).reverse();
+        const futureYears = Array.from({ length: 12 - yearIndex - 1 }, (_, i) => year + (i + 1));
+        return [...pastYears, year, ...futureYears];
+    };
+    useEffect(() => {
+        value !== undefined ? value : getTime(new Date()),
+            updateCalendarSettings({
+                ...calendarSettings,
+                value: getTime(new Date(selectedDate)),
+                date: selectedDate,
+                yearsScope: setYearScope(selectedDate),
+            });
+    }, [value, selectedDate]);
+    const setPeriod = (mode, forward) => {
+        const operations = {
+            day: forward ? addMonths : subMonths,
+            month: forward ? addYears : subYears,
+            year: forward ? addYears : subYears,
+        };
+        const step = mode === 'year' ? 12 : 1;
+        const modifyDate = operations[mode];
+        setSellectedDate(modifyDate(calendarSettings.date, step));
+    };
+    const setMode = (mode) => {
+        updateCalendarSettings({
+            ...calendarSettings,
+            mode: mode,
+        });
+    };
+    const setNewDate = (newDate) => {
+        setSellectedDate(newDate);
+    };
+    const confirmDate = () => {
+        handleSelect(getTime(new Date(selectedDate)));
+    };
+    const setToday = () => {
+        setSellectedDate(new Date());
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CalendarWrapper
+        // top={top}
+        , { 
+            // top={top}
+            top: 225, left: left, size: size },
+            React.createElement(Aligment, { direction: "row" },
+                React.createElement(CalendarHeader, { mode: calendarSettings.mode, date: calendarSettings.date, yearsScope: calendarSettings.yearsScope, handleChange: setPeriod, handleSelect: setMode }),
+                React.createElement(CalendarContent, { date: calendarSettings.date, mode: calendarSettings.mode, handleChange: setNewDate, changeMode: setMode, yearsScope: calendarSettings.yearsScope }),
+                React.createElement(ButtonsFooter, { handleClose: handleClose, handleConfirm: confirmDate, handleAdditional: setToday, labelClose: 'Zamknij', labelConfirm: 'Wybierz', labelAdditional: "Dzi\u015B", additionaNormalMode: true }))),
+        React.createElement(CalendarOverlay, null)));
+};

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

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { CalendarContentWrapper, Day, DayLabel, DayLabelWrapper, DaysContent, DaysHeader, DayWrapper, Month, MonthWrapper, } from './DatePiocker.styles';
+import { getDate, getDay, getDaysInMonth, getMonth, getYear, setDate, setMonth, setYear, startOfMonth, } from 'date-fns';
+import { Aligment } from '../Aligment';
+export const CalendarContent = ({ date, handleChange, changeMode, mode, yearsScope, }) => {
+    const [days, setDays] = useState([]);
+    const firstDayOfMonth = startOfMonth(date);
+    const daysInMonth = getDaysInMonth(date);
+    const firstDayIndex = getDay(firstDayOfMonth);
+    const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
+    useEffect(() => {
+        const daysScope = [];
+        for (let i = 1; i <= beforeIndex; i++) {
+            daysScope.push('');
+        }
+        for (let j = 1; j <= daysInMonth; j++) {
+            daysScope.push(j.toString());
+        }
+        setDays(daysScope);
+    }, [date]);
+    const setDay = (day) => {
+        if (!isNaN(day)) {
+            const newDate = setDate(date, day);
+            handleChange(newDate);
+        }
+    };
+    const handleSetMonth = (month) => {
+        if (!isNaN(month)) {
+            const newDate = setMonth(date, month);
+            handleChange(newDate);
+            changeMode('day');
+        }
+    };
+    const handleSetYear = (year) => {
+        if (!isNaN(year)) {
+            const newDate = setYear(date, year);
+            handleChange(newDate);
+            changeMode('month');
+        }
+    };
+    const daysName = ['Pon', 'Wt', 'Śr', 'Cz', 'P', 'Sob', 'Nd'];
+    const monthNames = [
+        'styczeń',
+        'luty',
+        'marzec',
+        'kwiecień',
+        'maj',
+        'czerwiec',
+        'lipiec',
+        'sierpień',
+        'wrzesień',
+        'październik',
+        'listopad',
+        'grudzień',
+    ];
+    return (React.createElement(CalendarContentWrapper, null,
+        mode === 'day' && (React.createElement(Aligment, { wrap: "wrap" },
+            React.createElement(DaysHeader, null, daysName.map((_item) => (React.createElement(DayLabelWrapper, null,
+                React.createElement(DayLabel, null, _item))))),
+            React.createElement(DaysContent, null, days.map((_day) => (React.createElement(DayWrapper, null,
+                React.createElement(Day, { active: parseInt(_day) === getDate(date), haveContent: _day !== '', onClick: () => setDay(parseInt(_day)) }, _day))))))),
+        mode === 'month' && (React.createElement(Aligment, { wrap: "wrap" }, monthNames.map((_month, index) => (React.createElement(MonthWrapper, null,
+            React.createElement(Month, { active: index === getMonth(date), onClick: () => handleSetMonth(index) }, _month)))))),
+        mode === 'year' && (React.createElement(Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (React.createElement(MonthWrapper, null,
+            React.createElement(Month, { active: _year === getYear(date), onClick: () => handleSetYear(_year) }, _year))))))));
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CalendarHeaderTexts, CalendarHeaderWrapper, } from './DatePiocker.styles';
+import { Aligment } from '../Aligment';
+import { Icon } from '../Icons';
+import { Text } from '../Typography';
+import { format, getYear } from 'date-fns';
+import { pl } from 'date-fns/locale';
+export const CalendarHeader = ({ date, mode, yearsScope, handleChange, handleSelect, }) => {
+    const prev = () => {
+        handleChange(mode, false);
+    };
+    const next = () => {
+        handleChange(mode, true);
+    };
+    const setMode = (mode) => {
+        handleSelect(mode);
+    };
+    return (React.createElement(CalendarHeaderWrapper, null,
+        React.createElement(Aligment, null,
+            React.createElement(Icon, { name: 'back', onClick: prev }),
+            React.createElement(CalendarHeaderTexts, null,
+                mode === 'day' && (React.createElement(Text, { action: true, onClick: () => setMode('month') }, format(date, 'LLLL', { locale: pl }))),
+                mode === 'year' ? (React.createElement(Text, null, `${yearsScope[0]} - ${yearsScope[yearsScope.length - 1]}`)) : (React.createElement(Text, { action: true, onClick: () => setMode('year') }, getYear(date)))),
+            React.createElement(Icon, { name: 'forward', onClick: next }))));
+};

package/dist/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,49 @@
+import { EyeIconWrapper, InputLabelElement, InputReadOnlyElement, InputWrapper, } from '../Input';
+import { Aligment } from '../Aligment';
+import React, { useRef, useState } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { mainTheme } from '../../Theme';
+import { DatePiockerElement } from './DatePiocker.styles';
+import { Field } from '../Dropdown';
+import { createPortal } from 'react-dom';
+import { Calendar } from './Calendar';
+import { format } from 'date-fns';
+import { Icon } from '../Icons';
+export const DatePicker = ({ label, labelPosition = 'top', value, name, disabled = false, size = 'medium', width, error, theme = mainTheme, readOnly = false, position = 'left', placeholder = 'Select date', handleChange, }) => {
+    const [open, toogleOpen] = useState(false);
+    const sourceRef = useRef(null);
+    const [dropdownStyles, setDropdownStyles] = useState({
+        top: 0,
+        left: 0,
+    });
+    const onSubmit = (selectedDate) => {
+        handleChange(name, selectedDate);
+        toogleOpen(false);
+    };
+    const clearDate = () => {
+        handleChange(name, undefined);
+        toogleOpen(false);
+    };
+    const handleOpen = () => {
+        if (!disabled && !open) {
+            if (sourceRef.current) {
+                const buttonRect = sourceRef.current.getBoundingClientRect();
+                const positionStyle = {
+                    top: buttonRect.bottom + window.scrollY,
+                    left: buttonRect.left + window.scrollX,
+                };
+                setDropdownStyles(positionStyle);
+            }
+            toogleOpen(!open);
+        }
+    };
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
+            label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+            React.createElement(InputWrapper, { width: width }, readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, value)) : (React.createElement(DatePiockerElement, { ref: sourceRef },
+                React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error, onClick: () => handleOpen() }, value ? format(new Date(value), 'dd-MM-yyyy') : placeholder),
+                value && (React.createElement(EyeIconWrapper, { size: size },
+                    React.createElement(Icon, { name: 'close', size: 24, onClick: clearDate, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
+                open &&
+                    createPortal(React.createElement(Calendar, { top: dropdownStyles.top, left: dropdownStyles.left, size: size, handleClose: () => toogleOpen(false), open: open, value: value, handleSelect: onSubmit }), document.body)))))));
+};

package/dist/esm/components/DatePicker/DatePiocker.styles.js

@@ -0,0 +1,136 @@
+import { setPanelTop } from '../common';
+import styled from 'styled-components';
+import { Theme } from '../../Theme';
+export const CalendarOverlay = styled.div `
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 799;
+`;
+export const DatePiockerElement = styled.div `
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+`;
+// ToDo fix ma "top"!!!
+export const CalendarWrapper = styled.div `
+  box-sizing: border-box;
+  background-color: ${Theme.colors.white};
+  box-shadow: ${Theme.shadow.m};
+  padding: ${Theme.padding.m} 0;
+  border-radius: ${Theme.borderRadius.m};
+  height: auto;
+  width: 326px;
+  position: absolute;
+  z-index: ${Theme.zIndex.dropdown};
+
+  // top: ${(p) => setPanelTop(p.size)};
+  top: 225px;
+  border: 1px solid ${Theme.colors.gray_2};
+  border-top: none;
+  min-width: 30px;
+`;
+export const CalendarHeaderWrapper = styled.div `
+  background-color: #ffffff;
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0.4rem 0.8rem;
+`;
+export const CalendarHeaderTexts = styled.div `
+  display: flex;
+  gap: 4px;
+`;
+export const CalendarContentWrapper = styled.div `
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  padding: 4px 8px;
+`;
+export const DaysHeader = styled.div `
+  display: flex;
+  padding: 4px 0;
+  width: 100%;
+`;
+export const DaysContent = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+`;
+export const DayWrapper = styled.div `
+  width: 44px;
+  height: 44px;
+  box-sizing: border-box;
+  padding: 2px;
+`;
+export const DayLabelWrapper = styled.div `
+  width: 44px;
+  box-sizing: border-box;
+  padding: 2px;
+`;
+export const Day = styled.div `
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  color: ${Theme.colors.text};
+  ${(p) => p.active &&
+    `
+    background-color: ${Theme.colors.primary};
+    color:${Theme.colors.white};
+    `}
+  ${(p) => p.haveContent &&
+    `
+    cursor:pointer;
+    :hover{
+      background-color: ${Theme.colors.primary_10};
+      color: ${Theme.colors.text};
+    }
+    `};
+`;
+//ToDo dodać tu Text
+export const DayLabel = styled.div `
+  font-size: 14px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${Theme.colors.gray_1};
+`;
+export const MonthWrapper = styled.div `
+  width: calc(100% / 3);
+  height: 40px;
+  display: flex;
+  box-sizing: border-box;
+  padding: 4px 8px;
+`;
+export const Month = styled.div `
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  border-radius: 4px;
+  color: ${Theme.colors.text};
+  cursor: pointer;
+  :hover {
+    background-color: ${Theme.colors.primary_10};
+    color: ${Theme.colors.text};
+  }
+  ${(p) => p.active &&
+    `
+    background-color: ${Theme.colors.primary};
+    color:${Theme.colors.white};
+    `}
+`;

package/dist/esm/components/DatePicker/index.js

@@ -0,0 +1 @@
+export * from './DatePicker';

package/dist/esm/components/Typography/Typography.styles.js

@@ -7,6 +7,11 @@ export const Text = styled.div `
   font-weight: normal;
   color: ${(p) => (p.color ? p.color : Theme.colors.text)};
   cursor: ${(p) => (p.action ? 'pointer' : 'default')};
+  ${p => p.action && `
+    :hover{
+    color:${Theme.colors.primary};
+    }
+    `}
 `;
 export const TextSmall = styled.div `
   font-size: ${Theme.fontSize.s};

package/dist/esm/index.js

@@ -3,6 +3,7 @@ export * from './components/Button';
 export * from './components/ButtonsFooter';
 export * from './components/Card';
 export * from './components/Chips';
+export * from './components/DatePicker';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/ElementHeader';

package/dist/types/components/DatePicker/Calendar.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { InputSize } from 'types';
+interface ICalendar {
+    value: number | undefined;
+    top: number;
+    left: number;
+    size: InputSize;
+    handleClose: () => void;
+    handleSelect: (date: number) => void;
+    open: boolean;
+}
+export declare const Calendar: FC<ICalendar>;
+export {};

package/dist/types/components/DatePicker/CalendarContent.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface ICalendarContent {
+    date: Date;
+    handleChange: (newDate: Date) => void;
+    changeMode: (mode: string) => void;
+    mode: string;
+    yearsScope: number[];
+}
+export declare const CalendarContent: FC<ICalendarContent>;
+export {};

package/dist/types/components/DatePicker/CalendarHeader.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface ICalendarHeader {
+    mode: string;
+    date: Date;
+    yearsScope: number[];
+    handleChange: (mode: string, forward: boolean) => void;
+    handleSelect: (mode: string) => void;
+}
+export declare const CalendarHeader: FC<ICalendarHeader>;
+export {};

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { IFormElement } from 'types';
+export interface IDatePicker extends IFormElement {
+    theme?: any;
+    position?: string;
+    handleChange: (name: string, value: string | number | undefined) => void;
+}
+export declare const DatePicker: FC<IDatePicker>;

package/dist/types/components/DatePicker/DatePiocker.styles.d.ts

@@ -0,0 +1,28 @@
+import { InputSize } from 'types';
+export declare const CalendarOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DatePiockerElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ICalendarStyle {
+    size: InputSize;
+    top: number;
+    left: number;
+}
+export declare const CalendarWrapper: import("styled-components").StyledComponent<"div", any, ICalendarStyle, never>;
+export declare const CalendarHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CalendarHeaderTexts: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CalendarContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DaysHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DaysContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DayWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DayLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IDayProps {
+    active: boolean;
+    haveContent: boolean;
+}
+export declare const Day: import("styled-components").StyledComponent<"div", any, IDayProps, never>;
+export declare const DayLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MonthWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IMonthProps {
+    active: boolean;
+}
+export declare const Month: import("styled-components").StyledComponent<"div", any, IMonthProps, never>;
+export {};

package/dist/types/components/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePicker';

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -6,4 +6,10 @@ export interface IDropdownProps extends IFormElement {
     position?: string;
     zIndex?: number;
 }
+export interface IPositionStyle {
+    top: number;
+    width?: number;
+    left?: number;
+    right?: number;
+}
 export declare const Dropdown: FC<IDropdownProps>;

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export * from './components/Button';
 export * from './components/ButtonsFooter';
 export * from './components/Card';
 export * from './components/Chips';
+export * from './components/DatePicker';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/ElementHeader';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",
@@ -77,7 +77,7 @@
     "@storybook/preset-create-react-app": "^7.0.12",
     "@storybook/theming": "^7.0.12",
     "@types/styled-components": "^5.1.26",
-    "date-fns": "^2.29.3",
+    "date-fns": "^2.30.0",
     "ftp-deploy": "^2.4.4",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",