@uxf/ui 10.0.0-beta.9 → 10.0.1

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 {
@@ -39,7 +39,7 @@
     }
 
     :root .light & {
-        @apply bg-gray-200 focus-visible:ring-primary;
+        @apply focus-visible:ring-primary bg-gray-200;
 
         &__inner {
             @apply bg-white;
@@ -59,7 +59,7 @@
     }
 
     :root .dark & {
-        @apply bg-gray-400 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+        @apply focus-visible:ring-primary bg-gray-400 focus-visible:ring-offset-gray-900;
 
         &.is-selected {
             @apply bg-primary;

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 bg-lightHigh w-max max-w-[calc(100vw-20px)] rounded-lg p-3 text-white;
 
     &__arrow {
-        @apply bg-lightHigh rounded-sm z-tooltip;
+        @apply z-tooltip bg-lightHigh rounded-sm;
     }
 }

package/date-picker/README.md

@@ -0,0 +1,9 @@
+# DatePicker
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/calendar/calendar.css");
+@import url("@uxf/ui/date-picker/date-picker.css");
+```

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

@@ -1,2 +1,5 @@
-import { FC, PropsWithChildren } from "react";
-export declare const DatePickerContent: FC<PropsWithChildren>;
+import { FC, PropsWithChildren, ReactNode } from "react";
+export interface DatePickerContentProps {
+    bottomContent?: ReactNode;
+}
+export declare const DatePickerContent: FC<PropsWithChildren<DatePickerContentProps>>;

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

@@ -24,11 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerContent = void 0;
+const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const react_1 = __importStar(require("react"));
-const date_picker_year_1 = require("./date-picker-year");
 const date_picker_decade_1 = require("./date-picker-decade");
-const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const date_picker_month_1 = require("./date-picker-month");
+const date_picker_year_1 = require("./date-picker-year");
 const DatePickerContent = (props) => {
     // eslint-disable-next-line react/destructuring-assignment
     const { goToDate, activeMonths } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
@@ -49,7 +49,8 @@ const DatePickerContent = (props) => {
     }), [onMonthSelect, onYearSelect, onDecadeYearSelect, setViewMode, activeMonths]);
     return (react_1.default.createElement("div", { className: "uxf-date-picker" },
         props.children,
-        datePickerComponents[viewMode]));
+        datePickerComponents[viewMode],
+        props.bottomContent && react_1.default.createElement("div", { className: "uxf-date-picker__bottom-content" }, props.bottomContent)));
 };
 exports.DatePickerContent = DatePickerContent;
 exports.DatePickerContent.displayName = "UxfUiDatePickerContent";

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

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerDecade = void 0;
-const dayjs_1 = __importDefault(require("dayjs"));
-const react_1 = __importStar(require("react"));
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 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 dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+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

@@ -1,10 +1,13 @@
-import { FC } from "react";
 import { OnDateChangeType } from "@uxf/datepicker/hooks/use-date-picker";
+import { FC, ReactNode } from "react";
 export interface DatePickerProps {
     closePopoverHandler?: () => void;
     onChange: (data: OnDateChangeType) => void;
     selectedDate: Date | null;
     minDate?: Date;
     maxDate?: Date;
+    preventScroll?: boolean;
+    unavailableDates?: Date[];
+    bottomContent?: ReactNode;
 }
 export declare const DatePicker: FC<DatePickerProps>;

package/date-picker/date-picker.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
-const react_1 = __importDefault(require("react"));
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const use_date_picker_1 = require("@uxf/datepicker/hooks/use-date-picker");
+const react_1 = __importDefault(require("react"));
 const date_picker_content_1 = require("./date-picker-content");
 const DatePicker = (props) => {
     const datePickerProps = (0, use_date_picker_1.useDatePicker)({
@@ -19,9 +19,11 @@ 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)));
+        react_1.default.createElement(date_picker_content_1.DatePickerContent, { bottomContent: props.bottomContent })));
 };
 exports.DatePicker = DatePicker;
 exports.DatePicker.displayName = "UxfUiDatePicker";

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

@@ -34,8 +34,9 @@ exports.default = {
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
+    const onClose = () => null;
     const testDatePickers = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(date_picker_1.DatePicker, { closePopoverHandler: close, onChange: onChange, selectedDate: value })));
+        react_1.default.createElement(date_picker_1.DatePicker, { closePopoverHandler: onClose, onChange: onChange, selectedDate: value })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testDatePickers),
         react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testDatePickers)));

package/date-picker/index.d.ts

@@ -1,3 +1,3 @@
+export { DatePicker } from "./date-picker";
 export type { DatePickerProps } from "./date-picker";
 export type { ViewModeType } from "./types";
-export { DatePicker } from "./date-picker";

package/date-picker-input/README.md

@@ -0,0 +1,11 @@
+# DatePickerInput
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/calendar/calendar.css");
+@import url("@uxf/ui/date-picker/date-picker.css");
+@import url("@uxf/ui/_input-with-popover/input-with-popover.css");
+```

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

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

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

@@ -27,12 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerInput = exports.OUTPUT_DATE_FORMAT = exports.DISPLAY_DATE_FORMAT = exports.ALLOWED_DATE_FORMAT = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
 const dayjs_1 = __importStar(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const react_1 = __importStar(require("react"));
 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 icon_1 = require("../icon");
 (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, bottomContent: props.bottomContent }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

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

@@ -26,8 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
-const date_picker_input_1 = require("./date-picker-input");
 const action_1 = require("../utils/action");
+const date_picker_input_1 = require("./date-picker-input");
 exports.default = {
     title: "UI/DatePickerInput",
     component: date_picker_input_1.DatePickerInput,

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

@@ -1,2 +1,2 @@
+export { ALLOWED_DATE_FORMAT, DISPLAY_DATE_FORMAT, DatePickerInput, OUTPUT_DATE_FORMAT } from "./date-picker-input";
 export type { DatePickerInputProps } from "./date-picker-input";
-export { DatePickerInput, DISPLAY_DATE_FORMAT, OUTPUT_DATE_FORMAT, ALLOWED_DATE_FORMAT } from "./date-picker-input";

package/date-picker-input/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ALLOWED_DATE_FORMAT = exports.OUTPUT_DATE_FORMAT = exports.DISPLAY_DATE_FORMAT = exports.DatePickerInput = void 0;
+exports.OUTPUT_DATE_FORMAT = exports.DatePickerInput = exports.DISPLAY_DATE_FORMAT = exports.ALLOWED_DATE_FORMAT = void 0;
 var date_picker_input_1 = require("./date-picker-input");
-Object.defineProperty(exports, "DatePickerInput", { enumerable: true, get: function () { return date_picker_input_1.DatePickerInput; } });
+Object.defineProperty(exports, "ALLOWED_DATE_FORMAT", { enumerable: true, get: function () { return date_picker_input_1.ALLOWED_DATE_FORMAT; } });
 Object.defineProperty(exports, "DISPLAY_DATE_FORMAT", { enumerable: true, get: function () { return date_picker_input_1.DISPLAY_DATE_FORMAT; } });
+Object.defineProperty(exports, "DatePickerInput", { enumerable: true, get: function () { return date_picker_input_1.DatePickerInput; } });
 Object.defineProperty(exports, "OUTPUT_DATE_FORMAT", { enumerable: true, get: function () { return date_picker_input_1.OUTPUT_DATE_FORMAT; } });
-Object.defineProperty(exports, "ALLOWED_DATE_FORMAT", { enumerable: true, get: function () { return date_picker_input_1.ALLOWED_DATE_FORMAT; } });

package/date-range-picker/README.md

@@ -0,0 +1 @@
+# DateRangePicker

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

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren, ReactNode } from "react";
+export interface DateRangePickerContentProps {
+    bottomContent?: ReactNode;
+}
+export declare const DateRangePickerContent: FC<PropsWithChildren<DateRangePickerContentProps>>;

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) }),
+    }), [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],
+        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,6 @@
+import React from "react";
+interface DatePickerDecadeProps {
+    onYearSelect: (date: Date) => void;
+}
+export declare const DateRangePickerDecade: React.NamedExoticComponent<DatePickerDecadeProps>;
+export {};