@uxf/ui 11.72.3 → 11.74.1

package/README.md

@@ -1,9 +1,11 @@
 # @uxf/ui
 
+> **Note:** This package contains translations. For proper functionality, you must use the `TranslationsProvider` from `@uxf/core-react/translations`. See the [core-react documentation](https://fe.uxf.dev/docs/core-react) for more information.
+
 ## [Documentation](https://ui.uxf.dev)
 
 ## How to install
 
 ```bash
 yarn add @uxf/ui
-```
+```

package/chip/chip.js

@@ -26,10 +26,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
 const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
+const translations_1 = require("@uxf/core-react/translations");
 const cx_1 = require("@uxf/core/utils/cx");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importStar(require("react"));
 const CloseButton = (props) => {
+    const t = (0, translations_1.useUxfTranslation)();
     const onClose = (e) => {
         var _a;
         e.preventDefault();
@@ -37,7 +39,7 @@ const CloseButton = (props) => {
         (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
     return (react_1.default.createElement("button", { className: "uxf-chip__button", onClick: onClose, tabIndex: props.suppressFocus ? -1 : undefined, type: "button" },
-        react_1.default.createElement("span", { className: "uxf-chip__button-label" }, "Odebrat polo\u017Eku"),
+        react_1.default.createElement("span", { className: "uxf-chip__button-label" }, t("uxf-ui-chip:remove-item")),
         react_1.default.createElement("svg", { className: "uxf-chip__button-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 8 8" },
             react_1.default.createElement("path", { d: "M1 1l6 6m0-6L1 7", strokeLinecap: "round", strokeWidth: "1.5" }))));
 };

package/chip/translations.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "uxf-ui-chip": {
+        "remove-item": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+    };
+};
+export default _default;

package/chip/translations.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-chip": {
+        "remove-item": {
+            cs: "Odebrat položku",
+            en: "Remove item",
+            sk: "Odstrániť položku",
+            de: "Element entfernen",
+        },
+    },
+};

package/combobox/combobox.js

@@ -30,6 +30,7 @@ const react_2 = require("@headlessui/react");
 const show_1 = require("@uxf/core-react/components/show");
 const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
 const use_on_unmount_1 = require("@uxf/core-react/hooks/use-on-unmount");
+const translations_1 = require("@uxf/core-react/translations");
 const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
 const empty_array_1 = require("@uxf/core/constants/empty-array");
@@ -61,15 +62,16 @@ Options.displayName = "UxfUiComboboxOptions";
 // eslint-disable-next-line complexity
 function Combobox(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const t = (0, translations_1.useUxfTranslation)();
     const isAsync = (0, is_not_nil_1.isNotNil)(props.loadOptions);
     const [query, setQuery] = (0, react_3.useState)("");
     const asyncOptions = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, props.loadOptions);
     const options = isAsync ? asyncOptions : ((_b = props.options) !== null && _b !== void 0 ? _b : empty_array_1.EMPTY_ARRAY);
     const filteredData = (0, is_empty_1.isEmpty)(query) || isAsync ? options : options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
     const emptyMessage = (0, is_empty_1.isEmpty)(query)
-        ? ((_c = props.noQueryMessage) !== null && _c !== void 0 ? _c : "Pro zobrazení možností začněte psát")
+        ? ((_c = props.noQueryMessage) !== null && _c !== void 0 ? _c : t("uxf-ui-combobox:no-query-message"))
         : (0, is_empty_1.isEmpty)(options)
-            ? ((_d = props.noOptionsMessage) !== null && _d !== void 0 ? _d : "Nabídka neosahuje žádné položky")
+            ? ((_d = props.noOptionsMessage) !== null && _d !== void 0 ? _d : t("uxf-ui-combobox:no-options-message"))
             : ((_e = props.notFoundMessage) !== null && _e !== void 0 ? _e : "Nic nenalezeno");
     const clearQuery = () => setQuery("");
     const onChange = (v) => props.onChange(v);

package/combobox/translations.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    "uxf-ui-combobox": {
+        "no-query-message": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+        "no-options-message": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+    };
+};
+export default _default;

package/combobox/translations.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-combobox": {
+        "no-query-message": {
+            cs: "Pro zobrazení možností začněte psát",
+            en: "Start typing to see options",
+            sk: "Pre zobrazenie možností začnite písať",
+            de: "Beginnen Sie zu tippen, um Optionen zu sehen",
+        },
+        "no-options-message": {
+            cs: "Nabídka neosahuje žádné položky",
+            en: "No items found",
+            sk: "Ponuka neobsahuje žiadne položky",
+            de: "Keine Elemente gefunden",
+        },
+    },
+};

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

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (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");
@@ -37,6 +38,7 @@ 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();
@@ -73,13 +75,13 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
         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 : "Vybrat měsíc",
+                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 : "Vpřed",
+                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 : "Zpět",
+                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,

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

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (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"));
@@ -34,6 +35,7 @@ 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;
@@ -66,15 +68,15 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
         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 : "Vybrat měsíc",
+                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 : "Nadcházející měsíc",
+                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 : "Předchozí měsíc",
+                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,

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

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerYear = 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");
@@ -37,6 +38,7 @@ const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DatePickerYear = (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, selectedDate, } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
     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();
@@ -77,15 +79,15 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
             }, 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 : "Nadcházející rok",
+                title: (_f = (_e = props.customButtonTitles) === null || _e === void 0 ? void 0 : _e.nextYear) !== null && _f !== void 0 ? _f : t("uxf-ui-date-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 : "Předchozí rok",
+                title: (_h = (_g = props.customButtonTitles) === null || _g === void 0 ? void 0 : _g.prevYear) !== null && _h !== void 0 ? _h : t("uxf-ui-date-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 : "Vybrat rok",
+                title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.selectYear) !== null && _k !== void 0 ? _k : t("uxf-ui-date-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() === (0, dayjs_1.default)(selectedDate).month() &&
                 (0, dayjs_1.default)(month.date).year() === (0, dayjs_1.default)(selectedDate).year() &&

package/date-picker/translations.d.ts

@@ -0,0 +1,53 @@
+declare const _default: {
+    readonly "uxf-ui-date-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-picker/translations.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-date-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/date-range-picker-decade.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (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");
@@ -38,6 +39,7 @@ 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();
@@ -77,13 +79,13 @@ exports.DateRangePickerDecade = (0, react_1.memo)((props) => {
         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 : "Vybrat měsíc",
+                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 : "Vpřed",
+                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 : "Zpět",
+                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,

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

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (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");
@@ -35,6 +36,7 @@ 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)({
@@ -63,19 +65,19 @@ exports.DateRangePickerMonth = (0, react_1.memo)((props) => {
         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 : "Vybrat měsíc",
+                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 : "Nadcházející měsíc",
+                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 : "Předchozí měsíc",
+                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 : "Vybrat rok",
+                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 })));
 });

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

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (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");
@@ -37,6 +38,7 @@ 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();
@@ -76,15 +78,15 @@ exports.DateRangePickerYear = (0, react_1.memo)((props) => {
             }, 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 : "Nadcházející rok",
+                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 : "Předchozí rok",
+                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 : "Vybrat rok",
+                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))))));
 });

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/datetime-picker/datetime-picker.js

@@ -29,6 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatetimePicker = exports.OUTPUT_DATETIME_FORMAT = void 0;
 exports.getStrictParsedDatetime = getStrictParsedDatetime;
+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 dayjs_1 = __importStar(require("dayjs"));
@@ -60,6 +61,7 @@ function getSelectedTime(value) {
     return null;
 }
 const DatetimePicker = (props) => {
+    const t = (0, translations_1.useUxfTranslation)();
     const onChange = props.onChange;
     const [selectedTab, setSelectedTab] = (0, react_1.useState)("date");
     const [tmpDate, setTmpDate] = (0, react_1.useState)(props.value ? (0, dayjs_1.default)(props.value) : null);
@@ -84,8 +86,8 @@ const DatetimePicker = (props) => {
     const selectedTime = getSelectedTime(props.value);
     return (react_1.default.createElement("div", { className: "uxf-tabs uxf-tabs--variant-segmented uxf-tabs--horizontal" },
         react_1.default.createElement("div", { className: "uxf-tabs__button-list uxf-tabs__button-list--variant-segmented uxf-tabs__button-list--horizontal uxf-datetime-picker__tabs" },
-            react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__button uxf-tabs__button--variant-segmented uxf-tabs__button--horizontal uxf-datetime-picker__tab", selectedTab === "date" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("date") }, "Datum"),
-            react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__button uxf-tabs__button--variant-segmented uxf-tabs__button--horizontal uxf-datetime-picker__tab", selectedTab === "time" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("time") }, "\u010Cas")),
+            react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__button uxf-tabs__button--variant-segmented uxf-tabs__button--horizontal uxf-datetime-picker__tab", selectedTab === "date" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("date") }, t("uxf-ui-datetime-picker:dateTab")),
+            react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-tabs__button uxf-tabs__button--variant-segmented uxf-tabs__button--horizontal uxf-datetime-picker__tab", selectedTab === "time" && classes_1.CLASSES.IS_ACTIVE), onClick: () => setSelectedTab("time") }, t("uxf-ui-datetime-picker:timeTab"))),
         react_1.default.createElement("div", { className: "uxf-tabs__panels" },
             selectedTab === "date" && (react_1.default.createElement("div", { className: "uxf-tabs__panel" },
                 react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, maxDate: props.maxDate, minDate: props.minDate, onChange: onDatePickerChange, onMonthChange: props.onMonthChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates }))),

package/datetime-picker/translations.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    readonly "uxf-ui-datetime-picker": {
+        readonly dateTab: {
+            readonly cs: "Datum";
+            readonly en: "Date";
+            readonly sk: "Dátum";
+            readonly de: "Datum";
+        };
+        readonly timeTab: {
+            readonly cs: "Čas";
+            readonly en: "Time";
+            readonly sk: "Čas";
+            readonly de: "Zeit";
+        };
+    };
+};
+export default _default;

package/datetime-picker/translations.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-datetime-picker": {
+        dateTab: {
+            cs: "Datum",
+            en: "Date",
+            sk: "Dátum",
+            de: "Datum",
+        },
+        timeTab: {
+            cs: "Čas",
+            en: "Time",
+            sk: "Čas",
+            de: "Zeit",
+        },
+    },
+};