@uxf/ui 10.0.0-beta.7 → 10.0.0-beta.74

package/css/textarea.css

@@ -1,99 +1,93 @@
 .uxf-textarea {
-    &__wrapper {
-        @apply rounded-md text-base border p-2 shadow-sm;
+    :root .light & {
+        --bg-color: theme("colors.white");
+        --border-color: theme("colors.gray.200");
+        --color: theme("colors.gray.900");
+    }
 
-        :root .light & {
-            @apply bg-white text-gray-900 border-gray-200;
-        }
+    :root .dark & {
+        --bg-color: theme("colors.gray.800");
+        --border-color: theme("colors.gray.700");
+        --color: theme("colors.gray.300");
+    }
 
-        :root .dark & {
-            @apply bg-gray-800 text-gray-300 border-gray-700;
-        }
+    &__wrapper {
+        background-color: var(--bg-color);
+        border: 1px solid var(--border-color);
+        border-radius: theme("borderRadius.md");
+        box-shadow: theme("boxShadow.sm");
+        color: var(--color);
+        padding: theme("spacing.2");
     }
 
     &__element {
-        @apply bg-transparent outline-none resize-none w-full;
-
-        :root .light & {
-            @apply placeholder:text-gray-400;
-        }
-
-        :root .dark & {
-            @apply placeholder:text-gray-400;
+        appearance: none;
+        background-color: transparent;
+        display: block;
+        outline: none;
+        overflow-y: hidden;
+        resize: none;
+        width: 100%;
+
+        &::placeholder {
+            color: theme("colors.gray.400");
         }
     }
 
     &.is-focused {
-        .uxf-textarea__wrapper {
-            @apply ring-2 ring-inset ring-offset-0;
-
-            :root .light & {
-                @apply ring-primary;
-            }
-
-            :root .dark & {
-                @apply ring-primary;
-            }
+        :root .light &,
+        :root .dark & {
+            --border-color: theme("colors.primary.DEFAULT");
         }
-    }
-
-    &.is-disabled {
-        @apply cursor-not-allowed;
 
         .uxf-textarea__wrapper {
-            :root .light & {
-                @apply bg-gray-300;
-            }
-
-            :root .dark & {
-                @apply bg-gray-600;
-            }
+            @apply ring-2 ring-inset ring-[--border-color] ring-offset-0;
         }
+    }
 
-        .uxf-textarea__element {
-            @apply cursor-not-allowed;
+    &.is-invalid {
+        :root .light &,
+        :root .dark & {
+            --border-color: var(--color);
+            --color: theme("colors.error.DEFAULT");
         }
     }
 
     &.is-readonly {
-        @apply cursor-text;
+        cursor: text;
+        pointer-events: none;
 
-        .uxf-textarea__element {
-            @apply cursor-not-allowed pointer-events-none;
+        :root .light & {
+            --bg-color: theme("colors.gray.300");
+            --border-color: theme("colors.gray.200");
+        }
+
+        :root .dark & {
+            --bg-color: theme("colors.gray.500");
+            --border-color: theme("colors.gray.700");
         }
 
         .uxf-textarea__wrapper {
             @apply ring-0;
-
-            :root .light & {
-                @apply border-gray-300;
-            }
-
-            :root .dark & {
-                @apply border-gray-500;
-            }
         }
     }
 
-    &.is-invalid {
-        &.is-focused {
-            .uxf-textarea__wrapper {
-                @apply ring-0;
-            }
-        }
+    &.is-disabled {
+        cursor: not-allowed;
 
-        .uxf-textarea__wrapper {
-            @apply border-error;
+        :root .light & {
+            --bg-color: theme("colors.gray.300");
+        }
 
-            .uxf-textarea__element {
-                :root .light & {
-                    @apply text-error;
-                }
+        :root .dark & {
+            --bg-color: theme("colors.gray.600");
+        }
+    }
 
-                :root .dark & {
-                    @apply text-error;
-                }
-            }
+    &.is-readonly,
+    &.is-disabled {
+        .uxf-textarea__element {
+            cursor: inherit;
         }
     }
 
@@ -101,24 +95,22 @@
         &,
         &:hover,
         &:focus {
-            -webkit-appearance: none;
-            -moz-appearance: none;
             appearance: none;
             transition: background-color 5000s ease-in-out 0s !important;
 
+            :root .light & {
+                background-color: theme("colors.white");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white"); /* stylelint-disable-line property-no-vendor-prefix */
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+            }
+
             :root .dark & {
                 -webkit-text-fill-color: theme("colors.gray.300");
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
-                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
                 background-color: theme("colors.gray.800");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800"); /* stylelint-disable-line property-no-vendor-prefix */
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
                 caret-color: white;
             }
-
-            :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
-                box-shadow: inset 0 0 0 1000px theme("colors.white");
-                background-color: theme("colors.white");
-            }
         }
     }
 }

package/css/time-picker.css

@@ -1,32 +1,28 @@
 .uxf-time-picker {
     &__global {
-        @apply flex items-center justify-between px-4 w-[180px] mx-auto;
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        margin: 0 auto;
+        padding: 0 theme("spacing.4");
+        width: 180px;
 
         &__column {
-            @apply flex flex-col items-center shrink-0;
-
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 0;
             width: 48px;
 
             & > :nth-child(1),
             & > :nth-child(3) {
-                height: 24px
+                height: 24px;
             }
         }
     }
 
     &__hours,
     &__minutes {
-        @apply grid grid-cols-4 place-items-center gap-1 mx-auto;
-
-        text-align: center;
-        width: 200px;
-    }
-
-    :root .light & {
-        @apply text-gray-900;
-    }
-
-    :root .dark & {
-        @apply bg-gray-900 text-white;
+        width: 288px;
     }
 }

package/css/toggle.css

@@ -1,5 +1,5 @@
 .uxf-toggle {
-    @apply relative inline-flex shrink-0 h-6 w-12 items-center rounded-full p-0.5 outline-none ring-offset-2
+    @apply relative inline-flex h-6 w-12 shrink-0 items-center rounded-full p-0.5 outline-none ring-offset-2
         focus-visible:ring-2 [&>*]:active:w-[30px];
 
     &__wrapper {

package/css/tooltip.css

@@ -1,7 +1,7 @@
 .uxf-tooltip {
-    @apply w-max max-w-[calc(100vw-20px)] bg-lightHigh p-3 text-white rounded-lg z-tooltip;
+    @apply z-tooltip w-max max-w-[calc(100vw-20px)] rounded-lg bg-lightHigh p-3 text-white;
 
     &__arrow {
-        @apply bg-lightHigh rounded-sm z-tooltip;
+        @apply z-tooltip rounded-sm bg-lightHigh;
     }
 }

package/date-picker/date-picker-decade.js

@@ -33,7 +33,7 @@ const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-cont
 const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
 const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
-const date_picker_navigation_1 = require("./date-picker-navigation");
+const calendar_1 = require("../calendar");
 exports.DatePickerDecade = (0, react_1.memo)((props) => {
     const { onYearSelect } = props;
     const { canGoToYear, goToNextYear, goToPrevYear, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
@@ -41,8 +41,8 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
     const { decadeLabel, years } = (0, use_decade_1.useDecade)({
         year: currentYear,
     });
-    const canGoToPrevDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).subtract(4, "years").toDate());
-    const canGoToNextDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).add(4, "years").toDate());
+    const canGoToPrevDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).subtract(5, "years").toDate());
+    const canGoToNextDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).add(5, "years").toDate());
     const handleGoToPrevDecadeClick = (0, react_1.useCallback)(() => {
         if (canGoToPrevDecade) {
             goToPrevYear(9);
@@ -59,15 +59,15 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
         }
     }, [canGoToYear, onYearSelect]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(date_picker_navigation_1.DatePickerNavigation, { prevButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
                 onClick: handleGoToPrevDecadeClick,
                 title: "Zpět",
             }, nextButtonProps: {
                 onClick: handleGoToNextDecadeClick,
-                title: "Nadcházející rok",
+                title: "Vpřed",
             }, selectButtonProps: {
                 children: decadeLabel,
             } }),
-        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED), key: year.yearLabel + index, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
+        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
 });
 exports.DatePickerDecade.displayName = "UxfUiDatePickerDecade";

package/date-picker/date-picker-month.js

@@ -32,10 +32,10 @@ const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
-const date_picker_navigation_1 = require("./date-picker-navigation");
 exports.DatePickerMonth = (0, react_1.memo)((props) => {
     const { setViewMode } = props;
-    const { activeMonths, canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth, } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const datePickerProps = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const { activeMonths, canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth, } = datePickerProps;
     const currentMonth = activeMonths[0].month;
     const currentYear = activeMonths[0].year;
     const { monthLabel } = (0, use_month_1.useMonth)({
@@ -54,19 +54,19 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
         setViewMode("year");
     }, [setViewMode]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(date_picker_navigation_1.DatePickerNavigation, { prevButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
                 disabled: !canGoToPrevMonth,
                 onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
-                title: "Zpět",
+                title: "Předchozí měsíc",
             }, nextButtonProps: {
                 disabled: !canGoToNextMonth,
                 onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
-                title: "Vpřed",
+                title: "Nadcházející měsíc",
             }, selectButtonProps: {
                 children: monthLabel,
                 onClick: handleMonthClick,
                 title: "Vybrat měsíc",
             } }),
-        react_1.default.createElement(calendar_1.Calendar, null)));
+        react_1.default.createElement(calendar_1.Calendar, { datePickerProps: datePickerProps })));
 });
 exports.DatePickerMonth.displayName = "UxfUiDatePickerMonth";

package/date-picker/date-picker-year.js

@@ -33,7 +33,7 @@ const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-cont
 const use_year_1 = require("@uxf/datepicker/hooks/use-year");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
-const date_picker_navigation_1 = require("./date-picker-navigation");
+const calendar_1 = require("../calendar");
 exports.DatePickerYear = (0, react_1.memo)((props) => {
     const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     const currentYear = activeMonths[0].year;
@@ -61,7 +61,7 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
         }
     }, [canGoToMonth, props]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(date_picker_navigation_1.DatePickerNavigation, { prevButtonProps: {
+        react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
                 disabled: !canGoToPrevYear,
                 onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
                 title: "Předchozí rok",

package/date-picker/date-picker.d.ts

@@ -6,5 +6,7 @@ export interface DatePickerProps {
     selectedDate: Date | null;
     minDate?: Date;
     maxDate?: Date;
+    preventScroll?: boolean;
+    unavailableDates?: Date[];
 }
 export declare const DatePicker: FC<DatePickerProps>;

package/date-picker/date-picker.js

@@ -19,6 +19,8 @@ const DatePicker = (props) => {
         selectedDate: props.selectedDate,
         minBookingDate: props.minDate,
         maxBookingDate: props.maxDate,
+        preventScroll: props.preventScroll,
+        unavailableDates: props.unavailableDates,
     });
     return (react_1.default.createElement(date_picker_context_1.DatePickerContext.Provider, { value: datePickerProps },
         react_1.default.createElement(date_picker_content_1.DatePickerContent, null)));

package/date-picker-input/date-picker-input.d.ts

@@ -8,5 +8,6 @@ export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string
     triggerElement?: ReactNode;
     minDate?: string;
     maxDate?: string;
+    unavailableDates?: Date[];
 }
 export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLInputElement>>;

package/date-picker-input/date-picker-input.js

@@ -33,6 +33,7 @@ const _input_with_popover_1 = require("../_input-with-popover");
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const icon_1 = require("../icon");
 const date_picker_1 = require("../date-picker");
+const cx_1 = require("@uxf/core/utils/cx");
 (0, dayjs_1.extend)(customParseFormat_1.default);
 exports.ALLOWED_DATE_FORMAT = ["D. M. YYYY", "DD. MM. YYYY", "D.M.YYYY", "DD.MM.YYYY"];
 exports.DISPLAY_DATE_FORMAT = "D. M. YYYY";
@@ -61,6 +62,7 @@ function getBoundaryDate(value) {
 exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const onChange = props.onChange;
+    const className = (0, cx_1.cx)("uxf-date-picker-input", props.className);
     const onInputChange = (0, react_1.useCallback)((value) => {
         const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_DATE_FORMAT, true);
         if (value !== "" && parsedValue.isValid()) {
@@ -78,6 +80,6 @@ exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const selectedDate = getSelectedDate(props.value);
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATE_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, selectedDate: selectedDate }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATE_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, closePopoverHandler: close, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

package/date-range-picker/date-range-picker-content.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const DateRangePickerContent: FC<PropsWithChildren>;

package/date-range-picker/date-range-picker-content.js

@@ -0,0 +1,55 @@
+"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.DateRangePickerContent = void 0;
+const react_1 = __importStar(require("react"));
+const date_range_picker_year_1 = require("./date-range-picker-year");
+const date_range_picker_decade_1 = require("./date-range-picker-decade");
+const date_range_picker_month_1 = require("./date-range-picker-month");
+const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+const DateRangePickerContent = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { goToDate, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
+    const [viewMode, setViewMode] = (0, react_1.useState)("month");
+    const onYearSelect = (0, react_1.useCallback)(() => setViewMode("decade"), [setViewMode]);
+    const onMonthSelect = (0, react_1.useCallback)((date) => {
+        goToDate(date);
+        setViewMode("month");
+    }, [goToDate, setViewMode]);
+    const onDecadeYearSelect = (0, react_1.useCallback)((date) => {
+        goToDate(date);
+        setViewMode("year");
+    }, [goToDate, setViewMode]);
+    const datePickerComponents = (0, react_1.useMemo)(() => ({
+        month: (react_1.default.createElement("div", { className: "uxf-date-range-picker__months" }, activeMonths.map((activeMonth) => (react_1.default.createElement(date_range_picker_month_1.DateRangePickerMonth, { key: `${activeMonth.year}-${activeMonth.month}`, month: activeMonth.month, setViewMode: setViewMode, year: activeMonth.year }))))),
+        year: react_1.default.createElement(date_range_picker_year_1.DateRangePickerYear, { onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect }),
+        decade: react_1.default.createElement(date_range_picker_decade_1.DateRangePickerDecade, { onYearSelect: (date) => onDecadeYearSelect(date) }),
+    }), [onMonthSelect, onYearSelect, onDecadeYearSelect, setViewMode, activeMonths]);
+    return (react_1.default.createElement("div", { className: `uxf-date-range-picker ${activeMonths.length > 1 ? "uxf-date-range-picker--multi-month" : ""}` },
+        props.children,
+        datePickerComponents[viewMode]));
+};
+exports.DateRangePickerContent = DateRangePickerContent;
+exports.DateRangePickerContent.displayName = "UxfUiDateRangePickerContent";

package/date-range-picker/date-range-picker-decade.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface DatePickerDecadeProps {
+    onYearSelect: (date: Date) => void;
+}
+export declare const DateRangePickerDecade: React.NamedExoticComponent<DatePickerDecadeProps>;
+export {};

package/date-range-picker/date-range-picker-decade.js

@@ -0,0 +1,72 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePickerDecade = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
+const cx_1 = require("@uxf/core/utils/cx");
+const classes_1 = require("@uxf/core/constants/classes");
+const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+const calendar_1 = require("../calendar");
+exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
+    const { canGoToYear, goToNextYear, goToPrevYear, activeMonths } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
+    const currentYear = activeMonths[0].year;
+    const { decadeLabel, years } = (0, use_decade_1.useDecade)({
+        year: currentYear,
+    });
+    const canGoToPrevDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).subtract(5, "years").toDate());
+    const canGoToNextDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).add(5, "years").toDate());
+    const handleGoToPrevDecadeClick = (0, react_1.useCallback)(() => {
+        if (canGoToPrevDecade) {
+            goToPrevYear(9);
+        }
+    }, [canGoToPrevDecade, goToPrevYear]);
+    const handleGoToNextDecadeClick = (0, react_1.useCallback)(() => {
+        if (canGoToNextDecade) {
+            goToNextYear(9);
+        }
+    }, [canGoToNextDecade, goToNextYear]);
+    const handleSelectYear = (0, react_1.useCallback)((date) => () => {
+        if (canGoToYear(date)) {
+            props.onYearSelect(date);
+        }
+    }, [canGoToYear, props]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
+                onClick: handleGoToPrevDecadeClick,
+                title: "Zpět",
+            }, nextButtonProps: {
+                onClick: handleGoToNextDecadeClick,
+                title: "Vpřed",
+            }, selectButtonProps: {
+                children: decadeLabel,
+            } }),
+        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === currentYear && "uxf-calendar__cell-year--current"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
+});
+exports.DateRangePickerDecade.displayName = "UxfUiDatePickerDecade";

package/date-range-picker/date-range-picker-month.d.ts

@@ -0,0 +1,8 @@
+import { UseMonthProps } from "@uxf/datepicker/hooks/use-month";
+import React, { Dispatch, SetStateAction } from "react";
+import { ViewModeType } from "./types";
+interface DatePickerMonthProps extends UseMonthProps {
+    setViewMode: Dispatch<SetStateAction<ViewModeType>>;
+}
+export declare const DateRangePickerMonth: React.NamedExoticComponent<DatePickerMonthProps>;
+export {};

package/date-range-picker/date-range-picker-month.js

@@ -0,0 +1,69 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePickerMonth = void 0;
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const calendar_1 = require("../calendar");
+const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
+    const dateRangePickerProps = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
+    const { canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth } = dateRangePickerProps;
+    const { monthLabel } = (0, use_month_1.useMonth)({
+        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        firstDayOfWeek,
+        month: props.month,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM YYYY"),
+        weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
+        year: props.year,
+    });
+    const handleGoToPrevMonth = (0, react_1.useCallback)(() => {
+        goToPrevMonthsByOneMonth();
+    }, [goToPrevMonthsByOneMonth]);
+    const handleGoToNextMonth = (0, react_1.useCallback)(() => goToNextMonthsByOneMonth(), [goToNextMonthsByOneMonth]);
+    const handleMonthClick = (0, react_1.useCallback)(() => {
+        props.setViewMode("year");
+    }, [props]);
+    return (react_1.default.createElement("div", { className: "uxf-date-range-picker__month" },
+        react_1.default.createElement(calendar_1.CalendarNavigation, { prevButtonProps: {
+                disabled: !canGoToPrevMonth,
+                onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
+                title: "Předchozí měsíc",
+            }, nextButtonProps: {
+                disabled: !canGoToNextMonth,
+                onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
+                title: "Nadcházející měsíc",
+            }, selectButtonProps: {
+                children: monthLabel,
+                onClick: handleMonthClick,
+                title: "Vybrat měsíc",
+            } }),
+        react_1.default.createElement(calendar_1.Calendar, { month: props.month, year: props.year, datePickerProps: dateRangePickerProps })));
+});
+exports.DateRangePickerMonth.displayName = "UxfUiDateRangePickerMonth";

package/date-range-picker/date-range-picker-year.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface DatePickerYearProps {
+    onMonthSelect: (date: Date) => void;
+    onYearSelect: () => void;
+}
+export declare const DateRangePickerYear: React.NamedExoticComponent<DatePickerYearProps>;
+export {};