@uxf/ui 11.74.0 → 11.74.1

package/config/icons.d.ts

@@ -0,0 +1,127 @@
+export declare const ICONS: {
+    readonly "arrow-left": {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly "arrow-right": {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly calendar: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly camera: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly caretDown: {
+        readonly w: 320;
+        readonly h: 512;
+    };
+    readonly clock: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly bars: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly check: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronDown: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronLeft: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly chevronsLeft: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronRight: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly chevronsRight: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly chevronUp: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly cloud: {
+        readonly w: 640;
+        readonly h: 512;
+    };
+    readonly copy: {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly "ellipsis-vertical": {
+        readonly w: 128;
+        readonly h: 512;
+    };
+    readonly file: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly imageFile: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly "triangle-exclamation": {
+        readonly w: 512;
+        readonly h: 512;
+    };
+    readonly user: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+    readonly videoFile: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly xmark: {
+        readonly w: 384;
+        readonly h: 512;
+    };
+    readonly xmarkLarge: {
+        readonly w: 448;
+        readonly h: 512;
+    };
+};
+export type IconsType = keyof typeof ICONS;
+declare module "@uxf/ui/icon/theme" {
+    interface IconsSet {
+        "arrow-left": true;
+        "arrow-right": true;
+        "calendar": true;
+        "camera": true;
+        "caretDown": true;
+        "clock": true;
+        "bars": true;
+        "check": true;
+        "chevronDown": true;
+        "chevronLeft": true;
+        "chevronsLeft": true;
+        "chevronRight": true;
+        "chevronsRight": true;
+        "chevronUp": true;
+        "cloud": true;
+        "copy": true;
+        "ellipsis-vertical": true;
+        "file": true;
+        "imageFile": true;
+        "triangle-exclamation": true;
+        "user": true;
+        "videoFile": true;
+        "xmark": true;
+        "xmarkLarge": true;
+    }
+}

package/config/icons.js

@@ -0,0 +1,30 @@
+"use strict";
+// this file is generated automatically, do not change anything manually in the contents of this file
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICONS = void 0;
+exports.ICONS = {
+    "arrow-left": { w: 448, h: 512 },
+    "arrow-right": { w: 448, h: 512 },
+    "calendar": { w: 448, h: 512 },
+    "camera": { w: 512, h: 512 },
+    "caretDown": { w: 320, h: 512 },
+    "clock": { w: 512, h: 512 },
+    "bars": { w: 448, h: 512 },
+    "check": { w: 512, h: 512 },
+    "chevronDown": { w: 512, h: 512 },
+    "chevronLeft": { w: 384, h: 512 },
+    "chevronsLeft": { w: 512, h: 512 },
+    "chevronRight": { w: 384, h: 512 },
+    "chevronsRight": { w: 512, h: 512 },
+    "chevronUp": { w: 512, h: 512 },
+    "cloud": { w: 640, h: 512 },
+    "copy": { w: 512, h: 512 },
+    "ellipsis-vertical": { w: 128, h: 512 },
+    "file": { w: 384, h: 512 },
+    "imageFile": { w: 384, h: 512 },
+    "triangle-exclamation": { w: 512, h: 512 },
+    "user": { w: 448, h: 512 },
+    "videoFile": { w: 384, h: 512 },
+    "xmark": { w: 384, h: 512 },
+    "xmarkLarge": { w: 448, h: 512 },
+};

package/content/content-schema.d.ts

@@ -0,0 +1,3 @@
+export interface ContentSchema {
+    wysiwyg: any;
+}

package/content/content-schema.js

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

package/content/types.d.ts

@@ -0,0 +1,27 @@
+import { ContentSchema } from "@uxf/ui/content/content-schema";
+import { FC, ReactNode } from "react";
+import { UseControllerProps } from "react-hook-form";
+export type ContentType = keyof ContentSchema;
+interface ContentFormProps<TYPE extends ContentType> extends UseControllerProps<ContentSchema[TYPE]> {
+    type: TYPE;
+    index: number;
+    onRemove: () => void;
+    TypeInputProps: any;
+}
+export type ContentFormComponent<TYPE extends ContentType> = FC<ContentFormProps<TYPE>> & {
+    getConfig: () => {
+        type: TYPE;
+        label: ReactNode;
+    };
+};
+interface ContentRendererProps<TYPE extends ContentType> {
+    type: TYPE;
+    data: ContentSchema[TYPE];
+    index: number;
+}
+export type ContentRendererComponent<TYPE extends ContentType> = FC<ContentRendererProps<TYPE>> & {
+    getConfig: () => {
+        type: TYPE;
+    };
+};
+export {};

package/content/types.js

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

package/context/context.d.ts

@@ -0,0 +1,17 @@
+import { ColorSchemeOptions } from "../color-scheme/use-handle-color-scheme";
+import { IconName } from "../icon/types";
+export type UiContextType = {
+    colorScheme: ColorSchemeOptions;
+    domain: string;
+    icon: {
+        spriteFilePath: string;
+        iconsConfig: Record<IconName, {
+            w: number;
+            h: number;
+        }>;
+    };
+    rasterImage: {
+        breakpoints: Record<string, string>;
+    };
+};
+export declare const UiContext: import("react").Context<UiContextType | undefined>;

package/context/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UiContext = void 0;
+const react_1 = require("react");
+exports.UiContext = (0, react_1.createContext)(undefined);

package/context/index.d.ts

@@ -0,0 +1,3 @@
+export * from "@uxf/ui/context/context";
+export * from "@uxf/ui/context/provider";
+export * from "@uxf/ui/context/use-component-context";

package/context/index.js

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

package/context/provider.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from "react";
+import { UiContextType } from "./context";
+type UiContextProviderProps = {
+    value: UiContextType;
+    children: ReactNode;
+};
+export declare const UiContextProvider: FC<UiContextProviderProps>;
+export {};

package/context/provider.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UiContextProvider = void 0;
+const dayjs_1 = require("dayjs");
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
+const react_1 = __importDefault(require("react"));
+const use_handle_color_scheme_1 = require("../color-scheme/use-handle-color-scheme");
+const context_1 = require("./context");
+(0, dayjs_1.extend)(localizedFormat_1.default);
+(0, dayjs_1.extend)(customParseFormat_1.default);
+const UiContextProvider = (props) => {
+    (0, use_handle_color_scheme_1.useHandleColorScheme)(props.value.colorScheme);
+    return react_1.default.createElement(context_1.UiContext.Provider, { value: props.value }, props.children);
+};
+exports.UiContextProvider = UiContextProvider;
+exports.UiContextProvider.displayName = "UxfUiContextProvider";

package/context/use-component-context.d.ts

@@ -0,0 +1,3 @@
+import { UiContextType } from "./context";
+export type UiContextComponent = keyof UiContextType;
+export declare const useComponentContext: <T extends UiContextComponent>(componentName: T) => UiContextType[T];

package/context/use-component-context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentContext = void 0;
+const react_1 = require("react");
+const context_1 = require("./context");
+const useComponentContext = (componentName) => {
+    const context = (0, react_1.useContext)(context_1.UiContext);
+    if (typeof context === "undefined") {
+        throw new Error(`If you want to use the "${componentName}" UI component, you have to wrap your code in the "UiContextProvider"`);
+    }
+    return context[componentName];
+};
+exports.useComponentContext = useComponentContext;

package/create-component-preview-page/create-component-preview-page.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { components } from "../components";
+type Components = typeof components;
+interface CreateComponentPreviewPageProps {
+    componentName: keyof Components | null;
+}
+export declare function CreateComponentPreviewPage(props: CreateComponentPreviewPageProps): React.JSX.Element;
+export declare function getServerSideProps(ctx: any): {
+    props: {
+        componentName: any;
+    };
+};
+export {};

package/create-component-preview-page/create-component-preview-page.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateComponentPreviewPage = CreateComponentPreviewPage;
+exports.getServerSideProps = getServerSideProps;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const react_1 = __importDefault(require("react"));
+const components_1 = require("../components");
+function ComponentPreview(props) {
+    return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(props.stories).map(([key, Story]) => {
+        if (key === "default") {
+            return null;
+        }
+        return react_1.default.createElement(Story, { key: key });
+    })));
+}
+function CreateComponentPreviewPage(props) {
+    if ((0, is_nil_1.isNil)(props.componentName)) {
+        return (react_1.default.createElement("div", { style: { padding: 32 } }, Object.entries(components_1.components).map(([key, config]) => {
+            return (react_1.default.createElement("div", { key: key, style: { marginTop: 32, marginBottom: 32 } },
+                react_1.default.createElement("h2", null, config.title),
+                react_1.default.createElement("div", { style: { border: "2px dashed gray", padding: 32, borderRadius: 4 } },
+                    react_1.default.createElement(ComponentPreview, { stories: config.stories }))));
+        })));
+    }
+    const componentConfig = components_1.components[props.componentName];
+    if ((0, is_nil_1.isNil)(componentConfig)) {
+        return react_1.default.createElement("div", null, "component not found");
+    }
+    return react_1.default.createElement(ComponentPreview, { stories: componentConfig.stories });
+}
+function getServerSideProps(ctx) {
+    var _a;
+    const [componentName] = (_a = ctx.query.slug) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY;
+    return {
+        props: {
+            componentName: componentName || null,
+        },
+    };
+}

package/create-component-preview-page/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../components";
+export * from "./create-component-preview-page";

package/create-component-preview-page/index.js

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

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

@@ -0,0 +1,10 @@
+import type { MonthType } from "@uxf/datepicker/utils/types";
+import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
+import { CustomButtonTitles } from "./types";
+export interface DatePickerContentProps {
+    bottomContent?: ReactNode;
+    onMonthChange?: (months: MonthType[]) => void;
+    style?: CSSProperties;
+    customButtonTitles?: CustomButtonTitles;
+}
+export declare const DatePickerContent: FC<PropsWithChildren<DatePickerContentProps>>;

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

@@ -0,0 +1,58 @@
+"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.DatePickerContent = void 0;
+const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
+const react_1 = __importStar(require("react"));
+const date_picker_decade_1 = require("./date-picker-decade");
+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);
+    const onMonthChange = props.onMonthChange;
+    const [viewMode, setViewMode] = (0, react_1.useState)("month");
+    const onYearSelect = (0, react_1.useCallback)(() => setViewMode("decade"), [setViewMode]);
+    const onMonthSelect = (0, react_1.useCallback)((date) => {
+        const newActiveMonths = goToDate(date);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newActiveMonths);
+        setViewMode("month");
+    }, [goToDate, setViewMode, onMonthChange]);
+    const onDecadeYearSelect = (0, react_1.useCallback)((date) => {
+        goToDate(date);
+        setViewMode("year");
+    }, [goToDate, setViewMode]);
+    const datePickerComponents = (0, react_1.useMemo)(() => ({
+        month: activeMonths.map((month) => (react_1.default.createElement(date_picker_month_1.DatePickerMonth, { customButtonTitles: props.customButtonTitles, key: `${month.year}-${month.month}`, onMonthChange: onMonthChange, setViewMode: setViewMode }))),
+        year: (react_1.default.createElement(date_picker_year_1.DatePickerYear, { customButtonTitles: props.customButtonTitles, onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect })),
+        decade: (react_1.default.createElement(date_picker_decade_1.DatePickerDecade, { customButtonTitles: props.customButtonTitles, onYearSelect: (date) => onDecadeYearSelect(date), setViewMode: setViewMode })),
+    }), [activeMonths, props.customButtonTitles, onYearSelect, onMonthChange, onMonthSelect, onDecadeYearSelect]);
+    return (react_1.default.createElement("div", { className: "uxf-date-picker", style: props.style },
+        props.children,
+        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.d.ts

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

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

@@ -0,0 +1,91 @@
+"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.DatePickerDecade = 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_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
+const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
+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");
+exports.DatePickerDecade = (0, react_1.memo)((props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const t = (0, translations_1.useUxfTranslation)();
+    const { onYearSelect } = props;
+    const { canGoToYear, goToNextYear, goToPrevYear, activeMonths, firstDayOfWeek, selectedDate } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    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 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)) {
+            onYearSelect(date);
+        }
+    }, [canGoToYear, onYearSelect]);
+    const { monthLabel } = (0, use_month_1.useMonth)({
+        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        year: currentYear,
+    });
+    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-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-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-picker:prev-decade"),
+            }, yearButtonProps: {
+                children: currentYear,
+                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() === (0, dayjs_1.default)(selectedDate).year() && "uxf-calendar__cell--selected"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
+});
+exports.DatePickerDecade.displayName = "UxfUiDatePickerDecade";

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

@@ -0,0 +1,10 @@
+import type { MonthType } from "@uxf/datepicker/utils/types";
+import React, { Dispatch, SetStateAction } from "react";
+import { CustomButtonTitles, ViewModeType } from "./types";
+interface DatePickerMonthProps {
+    onMonthChange?: (months: MonthType[]) => void;
+    setViewMode: Dispatch<SetStateAction<ViewModeType>>;
+    customButtonTitles?: CustomButtonTitles;
+}
+export declare const DatePickerMonth: React.NamedExoticComponent<DatePickerMonthProps>;
+export {};

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

@@ -0,0 +1,87 @@
+"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.DatePickerMonth = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
+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");
+exports.DatePickerMonth = (0, react_1.memo)((props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const t = (0, translations_1.useUxfTranslation)();
+    const { setViewMode } = props;
+    const datePickerProps = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const onMonthChange = props.onMonthChange;
+    const { activeMonths, canGoToNextMonth, canGoToPrevMonth, firstDayOfWeek, goToNextMonthsByOneMonth, goToPrevMonthsByOneMonth, } = datePickerProps;
+    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 { monthLabel } = (0, use_month_1.useMonth)({
+        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        firstDayOfWeek,
+        month: currentMonth,
+        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
+        year: currentYear,
+    });
+    const handleGoToPrevMonth = (0, react_1.useCallback)(() => {
+        const newActiveMonths = goToPrevMonthsByOneMonth();
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newActiveMonths);
+    }, [goToPrevMonthsByOneMonth, onMonthChange]);
+    const handleGoToNextMonth = (0, react_1.useCallback)(() => {
+        const newActiveMonths = goToNextMonthsByOneMonth();
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newActiveMonths);
+    }, [goToNextMonthsByOneMonth, onMonthChange]);
+    const handleMonthClick = (0, react_1.useCallback)(() => {
+        setViewMode("year");
+    }, [setViewMode]);
+    const handleSetYearViewModeClick = (0, react_1.useCallback)(() => {
+        setViewMode("decade");
+    }, [setViewMode]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(calendar_1.CalendarNavigation, { monthButtonProps: {
+                children: monthLabel,
+                onClick: handleMonthClick,
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.selectMonth) !== null && _f !== void 0 ? _f : t("uxf-ui-date-picker:select-month"),
+            }, nextButtonProps: {
+                isDisabled: !canGoToNextMonth,
+                onClick: canGoToNextMonth ? handleGoToNextMonth : undefined,
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.nextMonth) !== null && _h !== void 0 ? _h : t("uxf-ui-date-picker:next-month"),
+            }, prevButtonProps: {
+                isDisabled: !canGoToPrevMonth,
+                onClick: canGoToPrevMonth ? handleGoToPrevMonth : undefined,
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.prevMonth) !== null && _k !== void 0 ? _k : t("uxf-ui-date-picker:prev-month"),
+            }, yearButtonProps: {
+                children: currentYear,
+                onClick: handleSetYearViewModeClick,
+                title: (_m = (_l = props.customButtonTitles) === null || _l === void 0 ? void 0 : _l.selectYear) !== null && _m !== void 0 ? _m : "Vybrat rok",
+            } }),
+        react_1.default.createElement(calendar_1.Calendar, { datePickerProps: datePickerProps })));
+});
+exports.DatePickerMonth.displayName = "UxfUiDatePickerMonth";