@uxf/ui 11.74.0 → 11.74.2

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

@@ -0,0 +1,56 @@
+"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 date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+const react_1 = __importStar(require("react"));
+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_year_1 = require("./date-range-picker-year");
+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), setViewMode: setViewMode })),
+    }), [activeMonths, onYearSelect, onMonthSelect, onDecadeYearSelect]);
+    return (react_1.default.createElement("div", { className: `uxf-date-range-picker ${activeMonths.length > 1 ? "uxf-date-range-picker--multi-month" : ""}`, style: props.style },
+        props.children,
+        datePickerComponents[viewMode],
+        props.bottomContent && react_1.default.createElement("div", { className: "uxf-date-range-picker__bottom-content" }, props.bottomContent)));
+};
+exports.DateRangePickerContent = DateRangePickerContent;
+exports.DateRangePickerContent.displayName = "UxfUiDateRangePickerContent";

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

@@ -0,0 +1,9 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { CustomButtonTitles, ViewModeType } from "../date-picker/types";
+interface DatePickerDecadeProps {
+    customButtonTitles?: CustomButtonTitles;
+    onYearSelect: (date: Date) => void;
+    setViewMode: Dispatch<SetStateAction<ViewModeType>>;
+}
+export declare const DateRangePickerDecade: React.NamedExoticComponent<DatePickerDecadeProps>;
+export {};

package/date-range-picker/date-range-picker-decade.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;
+};
+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 translations_1 = require("@uxf/core-react/translations");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
+const use_year_1 = require("@uxf/datepicker/hooks/use-year");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const calendar_1 = require("../calendar");
+exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const t = (0, translations_1.useUxfTranslation)();
+    const { canGoToYear, goToNextYear, goToPrevYear, activeMonths, firstDayOfWeek } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
+    const currentYear = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : new Date().getFullYear();
+    const currentMonth = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.month) !== null && _d !== void 0 ? _d : new Date().getMonth();
+    const { years } = (0, use_decade_1.useDecade)({
+        year: currentYear,
+    });
+    const { yearLabel } = (0, use_year_1.useYear)({
+        year: currentYear,
+        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+    });
+    const { monthLabel } = (0, use_month_1.useMonth)({
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        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]);
+    const handleSetMonthViewMode = (0, react_1.useCallback)(() => props.setViewMode("year"), [props]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                onClick: handleSetMonthViewMode,
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.selectMonth) !== null && _f !== void 0 ? _f : t("uxf-ui-date-range-picker:select-month"),
+            }, nextButtonProps: {
+                onClick: handleGoToNextDecadeClick,
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.nextDecade) !== null && _h !== void 0 ? _h : t("uxf-ui-date-range-picker:next-decade"),
+            }, prevButtonProps: {
+                onClick: handleGoToPrevDecadeClick,
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.prevDecade) !== null && _k !== void 0 ? _k : t("uxf-ui-date-range-picker:prev-decade"),
+            }, yearButtonProps: {
+                children: yearLabel,
+                isDisabled: true,
+            } }),
+        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,10 @@
+import { UseMonthProps } from "@uxf/datepicker/hooks/use-month";
+import React, { Dispatch, SetStateAction } from "react";
+import { CustomButtonTitles } from "../date-picker/types";
+import { ViewModeType } from "./types";
+interface DatePickerMonthProps extends UseMonthProps {
+    customButtonTitles?: CustomButtonTitles;
+    setViewMode: Dispatch<SetStateAction<ViewModeType>>;
+}
+export declare const DateRangePickerMonth: React.NamedExoticComponent<DatePickerMonthProps>;
+export {};

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

@@ -0,0 +1,84 @@
+"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 translations_1 = require("@uxf/core-react/translations");
+const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
+const use_year_1 = require("@uxf/datepicker/hooks/use-year");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const calendar_1 = require("../calendar");
+exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const t = (0, translations_1.useUxfTranslation)();
+    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"),
+        weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
+        year: props.year,
+    });
+    const { yearLabel } = (0, use_year_1.useYear)({
+        year: props.year,
+        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
+    });
+    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]);
+    const handleSetYearViewModeClick = (0, react_1.useCallback)(() => {
+        props.setViewMode("decade");
+    }, [props]);
+    return (react_1.default.createElement("div", { className: "uxf-date-range-picker__month" },
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                onClick: handleMonthClick,
+                title: (_b = (_a = props.customButtonTitles) === null || _a === void 0 ? void 0 : _a.selectMonth) !== null && _b !== void 0 ? _b : t("uxf-ui-date-range-picker:select-month"),
+            }, nextButtonProps: {
+                isDisabled: !canGoToNextMonth,
+                onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
+                title: (_d = (_c = props.customButtonTitles) === null || _c === void 0 ? void 0 : _c.nextMonth) !== null && _d !== void 0 ? _d : t("uxf-ui-date-range-picker:next-month"),
+            }, prevButtonProps: {
+                isDisabled: !canGoToPrevMonth,
+                onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.prevMonth) !== null && _f !== void 0 ? _f : t("uxf-ui-date-range-picker:prev-month"),
+            }, yearButtonProps: {
+                children: yearLabel,
+                onClick: handleSetYearViewModeClick,
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.selectYear) !== null && _h !== void 0 ? _h : t("uxf-ui-date-range-picker:select-year"),
+            } }),
+        react_1.default.createElement(calendar_1.Calendar, { datePickerProps: dateRangePickerProps, month: props.month, year: props.year })));
+});
+exports.DateRangePickerMonth.displayName = "UxfUiDateRangePickerMonth";

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

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

package/date-range-picker/date-range-picker-year.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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePickerYear = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+const use_month_1 = require("@uxf/datepicker/hooks/use-month");
+const use_year_1 = require("@uxf/datepicker/hooks/use-year");
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const calendar_1 = require("../calendar");
+exports.DateRangePickerYear = (0, react_1.memo)((props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const t = (0, translations_1.useUxfTranslation)();
+    const { canGoToNextYear, canGoToPrevYear, goToNextYear, goToPrevYear, canGoToMonth, activeMonths, firstDayOfWeek } = (0, react_1.useContext)(date_range_picker_context_1.DateRangePickerContext);
+    const currentMonth = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : new Date().getMonth();
+    const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
+    const { months, yearLabel } = (0, use_year_1.useYear)({
+        year: currentYear,
+        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+    });
+    const { monthLabel } = (0, use_month_1.useMonth)({
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        year: currentYear,
+    });
+    const handleGoToNextYear = (0, react_1.useCallback)(() => {
+        if (canGoToNextYear) {
+            goToNextYear(1);
+        }
+    }, [canGoToNextYear, goToNextYear]);
+    const handleGoToPrevYear = (0, react_1.useCallback)(() => {
+        if (canGoToPrevYear) {
+            goToPrevYear(1);
+        }
+    }, [canGoToPrevYear, goToPrevYear]);
+    const handleYearClick = (0, react_1.useCallback)(() => {
+        props.onYearSelect();
+    }, [props]);
+    const handleMonthClick = (0, react_1.useCallback)((date) => () => {
+        if (canGoToMonth(date)) {
+            props.onMonthSelect(date);
+        }
+    }, [canGoToMonth, props]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                isDisabled: true,
+            }, nextButtonProps: {
+                isDisabled: !canGoToNextYear,
+                onClick: canGoToNextYear ? handleGoToNextYear : undefined,
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.nextYear) !== null && _f !== void 0 ? _f : t("uxf-ui-date-range-picker:next-year"),
+            }, prevButtonProps: {
+                isDisabled: !canGoToPrevYear,
+                onClick: canGoToPrevYear ? handleGoToPrevYear : undefined,
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.prevYear) !== null && _h !== void 0 ? _h : t("uxf-ui-date-range-picker:prev-year"),
+            }, yearButtonProps: {
+                children: yearLabel,
+                onClick: handleYearClick,
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.selectYear) !== null && _k !== void 0 ? _k : t("uxf-ui-date-range-picker:select-year"),
+            } }),
+        react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === currentMonth && "uxf-calendar__cell-month--current"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
+});
+exports.DateRangePickerYear.displayName = "UxfUiDatePickerYear";

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

@@ -0,0 +1,15 @@
+import { DatesConfig } from "@uxf/datepicker/utils/types";
+import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
+import { DateRangePickerValueType } from "./types";
+export interface DateRangePickerProps {
+    bottomContent?: ReactNode;
+    datesConfig?: DatesConfig[];
+    numberOfMonths?: number;
+    onChange: (data: DateRangePickerValueType) => void;
+    onClosePopover: () => void;
+    selectedDates: DateRangePickerValueType;
+    style?: CSSProperties;
+    /** @deprecated */
+    unavailableDates?: Date[];
+}
+export declare const DateRangePicker: FC<PropsWithChildren<DateRangePickerProps>>;

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

@@ -0,0 +1,53 @@
+"use strict";
+"use client";
+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.DateRangePicker = void 0;
+const date_range_picker_context_1 = require("@uxf/datepicker/contexts/date-range-picker-context");
+const use_date_range_picker_1 = require("@uxf/datepicker/hooks/use-date-range-picker");
+const react_1 = __importStar(require("react"));
+const date_range_picker_content_1 = require("./date-range-picker-content");
+const DateRangePicker = (props) => {
+    var _a, _b, _c;
+    const [focusedInput, setFocusedInput] = (0, react_1.useState)(use_date_range_picker_1.START_DATE);
+    const onDatesChange = (0, react_1.useCallback)((data) => {
+        props.onChange({ from: data.startDate, to: data.endDate });
+        setFocusedInput(data.endDate ? use_date_range_picker_1.START_DATE : data.focusedInput);
+    }, [props]);
+    const dateRangePickerProps = (0, use_date_range_picker_1.useDateRangePicker)({
+        datesConfig: props.datesConfig,
+        endDate: ((_a = props.selectedDates) === null || _a === void 0 ? void 0 : _a.to) || null,
+        firstDayOfWeek: 1,
+        focusedInput: focusedInput,
+        numberOfMonths: (_b = props.numberOfMonths) !== null && _b !== void 0 ? _b : 1,
+        onDatesChange,
+        startDate: ((_c = props.selectedDates) === null || _c === void 0 ? void 0 : _c.from) || null,
+        unavailableDates: props.unavailableDates,
+    });
+    return (react_1.default.createElement(date_range_picker_context_1.DateRangePickerContext.Provider, { value: dateRangePickerProps },
+        react_1.default.createElement(date_range_picker_content_1.DateRangePickerContent, { bottomContent: props.bottomContent, style: props.style })));
+};
+exports.DateRangePicker = DateRangePicker;
+exports.DateRangePicker.displayName = "UxfUiDatePicker";

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const date_range_picker_stories_1 = require("./date-range-picker.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(date_range_picker_stories_1.Default, null));

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

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

@@ -0,0 +1,36 @@
+"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.Default = Default;
+const noop_1 = require("@uxf/core/utils/noop");
+const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
+const date_range_picker_1 = require("./date-range-picker");
+function Default() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", setValue);
+    const testDatePickers = react_1.default.createElement(date_range_picker_1.DateRangePicker, { onChange: onChange, onClosePopover: noop_1.noop, selectedDates: value });
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testDatePickers);
+}

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

@@ -0,0 +1,3 @@
+export { DateRangePicker } from "./date-range-picker";
+export type { DateRangePickerProps } from "./date-range-picker";
+export type { DateRangePickerValueType, ViewModeType } from "./types";

package/date-range-picker/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = void 0;
+var date_range_picker_1 = require("./date-range-picker");
+Object.defineProperty(exports, "DateRangePicker", { enumerable: true, get: function () { return date_range_picker_1.DateRangePicker; } });

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

@@ -0,0 +1,53 @@
+declare const _default: {
+    readonly "uxf-ui-date-range-picker": {
+        readonly "prev-year": {
+            readonly cs: "Předchozí rok";
+            readonly en: "Previous year";
+            readonly sk: "Predchádzajúci rok";
+            readonly de: "Vorheriges Jahr";
+        };
+        readonly "next-year": {
+            readonly cs: "Nadcházející rok";
+            readonly en: "Next year";
+            readonly sk: "Nasledujúci rok";
+            readonly de: "Nächstes Jahr";
+        };
+        readonly "select-year": {
+            readonly cs: "Vybrat rok";
+            readonly en: "Select year";
+            readonly sk: "Vybrať rok";
+            readonly de: "Jahr auswählen";
+        };
+        readonly "select-month": {
+            readonly cs: "Vybrat měsíc";
+            readonly en: "Select month";
+            readonly sk: "Vybrať mesiac";
+            readonly de: "Monat auswählen";
+        };
+        readonly "next-month": {
+            readonly cs: "Nadcházející měsíc";
+            readonly en: "Next month";
+            readonly sk: "Nasledujúci mesiac";
+            readonly de: "Nächster Monat";
+        };
+        readonly "prev-month": {
+            readonly cs: "Předchozí měsíc";
+            readonly en: "Previous month";
+            readonly sk: "Predchádzajúci mesiac";
+            readonly de: "Vorheriger Monat";
+        };
+        readonly "next-decade": {
+            readonly cs: "Vpřed";
+            readonly en: "Forward";
+            readonly sk: "Vpred";
+            readonly de: "Vorwärts";
+        };
+        readonly "prev-decade": {
+            readonly cs: "Zpět";
+            readonly en: "Back";
+            readonly sk: "Späť";
+            readonly de: "Zurück";
+        };
+    };
+};
+export default _default;

package/date-range-picker/translations.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-date-range-picker": {
+        "prev-year": {
+            cs: "Předchozí rok",
+            en: "Previous year",
+            sk: "Predchádzajúci rok",
+            de: "Vorheriges Jahr",
+        },
+        "next-year": {
+            cs: "Nadcházející rok",
+            en: "Next year",
+            sk: "Nasledujúci rok",
+            de: "Nächstes Jahr",
+        },
+        "select-year": {
+            cs: "Vybrat rok",
+            en: "Select year",
+            sk: "Vybrať rok",
+            de: "Jahr auswählen",
+        },
+        "select-month": {
+            cs: "Vybrat měsíc",
+            en: "Select month",
+            sk: "Vybrať mesiac",
+            de: "Monat auswählen",
+        },
+        "next-month": {
+            cs: "Nadcházející měsíc",
+            en: "Next month",
+            sk: "Nasledujúci mesiac",
+            de: "Nächster Monat",
+        },
+        "prev-month": {
+            cs: "Předchozí měsíc",
+            en: "Previous month",
+            sk: "Predchádzajúci mesiac",
+            de: "Vorheriger Monat",
+        },
+        "next-decade": {
+            cs: "Vpřed",
+            en: "Forward",
+            sk: "Vpred",
+            de: "Vorwärts",
+        },
+        "prev-decade": {
+            cs: "Zpět",
+            en: "Back",
+            sk: "Späť",
+            de: "Zurück",
+        },
+    },
+};

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

@@ -0,0 +1,5 @@
+export type DateRangePickerValueType = {
+    from: Date | null;
+    to: Date | null;
+} | null;
+export type ViewModeType = "month" | "year" | "decade";

package/date-range-picker/types.js

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

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

@@ -0,0 +1,21 @@
+import { DatesConfig } from "@uxf/datepicker/utils/types";
+import React, { CSSProperties, ReactNode } from "react";
+import { InputWithPopoverProps } from "../_input-with-popover";
+export declare const ALLOWED_DATE_FORMAT: string[];
+export declare const DISPLAY_DATE_FORMAT = "D. M. YYYY";
+export declare const SEPARATOR = " \u2013 ";
+export declare const splitValueToRange: (value: string | undefined | null) => {
+    from: string | undefined;
+    to: string | undefined;
+};
+export interface DateRangePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
+    bottomContent?: ReactNode;
+    datesConfig?: DatesConfig[];
+    numberOfMonths?: number;
+    placeholder?: string;
+    style?: CSSProperties;
+    triggerElement?: ReactNode;
+    /** @deprecated */
+    unavailableDates?: Date[];
+}
+export declare const DateRangePickerInput: React.ForwardRefExoticComponent<DateRangePickerInputProps & React.RefAttributes<HTMLInputElement>>;