@uxf/ui 11.72.3 → 11.74.1

package/image-gallery/components/close-button.js

@@ -4,12 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CloseButton = void 0;
+const translations_1 = require("@uxf/core-react/translations");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 const CloseButton = (props) => {
     var _a, _b;
+    const t = (0, translations_1.useUxfTranslation)();
     return (react_1.default.createElement("button", { className: "uxf-image-gallery__close-button", onClick: () => props.onClick() },
-        react_1.default.createElement("span", { className: "uxf-image-gallery__close-button-text" }, (_a = props.text) !== null && _a !== void 0 ? _a : "Zavřít"), (_b = props.buttonElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__close-button-icon", name: "xmarkLarge" })));
+        react_1.default.createElement("span", { className: "uxf-image-gallery__close-button-text" }, (_a = props.text) !== null && _a !== void 0 ? _a : t("uxf-ui-image-gallery:close-button")), (_b = props.buttonElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__close-button-icon", name: "xmarkLarge" })));
 };
 exports.CloseButton = CloseButton;
 exports.CloseButton.displayName = "UxfUiCloseButton";

package/image-gallery/translations.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "uxf-ui-image-gallery": {
+        "close-button": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+    };
+};
+export default _default;

package/image-gallery/translations.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-image-gallery": {
+        "close-button": {
+            cs: "Zavřít",
+            en: "Close",
+            sk: "Zatvoriť",
+            de: "Schließen",
+        },
+    },
+};

package/layout/layout.js

@@ -24,12 +24,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = Layout;
+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 icon_button_1 = require("../icon-button");
 function Layout(props) {
     var _a, _b;
+    const t = (0, translations_1.useUxfTranslation)();
     const [isSidebarOpen, setIsSidebarOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { className: `uxf-layout ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
         react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-sidebar", isSidebarOpen && "uxf-sidebar--is-open") },
@@ -37,7 +39,7 @@ function Layout(props) {
             react_1.default.createElement("div", { className: "uxf-sidebar__content" }, props.sidebar)),
         isSidebarOpen && react_1.default.createElement("div", { className: "uxf-sidebar-overlay", onClick: () => setIsSidebarOpen(false) }),
         react_1.default.createElement("div", { className: `uxf-app-bar ${(_b = props.classNameAppBar) !== null && _b !== void 0 ? _b : ""}` },
-            react_1.default.createElement(icon_button_1.IconButton, { className: "uxf-app-bar__menu-button", iconName: "bars", label: "Otev\u0159\u00EDt menu", onClick: () => setIsSidebarOpen(true), variant: "text" }),
+            react_1.default.createElement(icon_button_1.IconButton, { className: "uxf-app-bar__menu-button", iconName: "bars", label: t("uxf-ui-layout:open-menu"), onClick: () => setIsSidebarOpen(true), variant: "text" }),
             react_1.default.createElement("div", { className: "uxf-app-bar__content" }, props.appBar)),
         react_1.default.createElement("main", { className: "uxf-layout__content" }, props.children)));
 }

package/layout/translations.d.ts

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

package/layout/translations.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-layout": {
+        "open-menu": {
+            cs: "Otevřít menu",
+            en: "Open menu",
+            sk: "Otvoriť menu",
+            de: "Menü öffnen",
+        },
+    },
+};

package/lightbox/components/lightbox-close-button.js

@@ -5,10 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LightboxCloseButton = LightboxCloseButton;
+const translations_1 = require("@uxf/core-react/translations");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 function LightboxCloseButton(props) {
-    return (react_1.default.createElement("button", { className: "uxf-lightbox__close-button", onClick: props.onClick, title: "Zav\u0159\u00EDt" },
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement("button", { className: "uxf-lightbox__close-button", onClick: props.onClick, title: t("uxf-ui-lightbox:close") },
         react_1.default.createElement(icon_1.Icon, { className: "uxf-lightbox__close-button-icon", name: "xmarkLarge" })));
 }
 LightboxCloseButton.displayName = "UxfUiLightboxCloseButton";

package/lightbox/components/lightbox-next-button.js

@@ -5,10 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LightboxNextButton = LightboxNextButton;
+const translations_1 = require("@uxf/core-react/translations");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 function LightboxNextButton(props) {
-    return (react_1.default.createElement("button", { className: "uxf-lightbox__button uxf-lightbox__button--next", onClick: props.onClick, title: "Dal\u0161\u00ED" },
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement("button", { className: "uxf-lightbox__button uxf-lightbox__button--next", onClick: props.onClick, title: t("uxf-ui-lightbox:next") },
         react_1.default.createElement(icon_1.Icon, { className: "uxf-lightbox__button-icon", name: "chevronRight" })));
 }
 LightboxNextButton.displayName = "UxfUiLightboxNextButton";

package/lightbox/components/lightbox-prev-button.js

@@ -5,10 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LightboxPrevButton = LightboxPrevButton;
+const translations_1 = require("@uxf/core-react/translations");
 const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
 function LightboxPrevButton(props) {
-    return (react_1.default.createElement("button", { className: "uxf-lightbox__button uxf-lightbox__button--prev", onClick: props.onClick, title: "P\u0159edchoz\u00ED" },
+    const t = (0, translations_1.useUxfTranslation)();
+    return (react_1.default.createElement("button", { className: "uxf-lightbox__button uxf-lightbox__button--prev", onClick: props.onClick, title: t("uxf-ui-lightbox:previous") },
         react_1.default.createElement(icon_1.Icon, { className: "uxf-lightbox__button-icon", name: "chevronLeft" })));
 }
 LightboxPrevButton.displayName = "UxfUiLightboxPrevButton";

package/lightbox/translations.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    readonly "uxf-ui-lightbox": {
+        readonly next: {
+            readonly cs: "Další";
+            readonly en: "Next";
+            readonly sk: "Ďalší";
+            readonly de: "Weiter";
+        };
+        readonly close: {
+            readonly cs: "Zavřít";
+            readonly en: "Close";
+            readonly sk: "Zatvoriť";
+            readonly de: "Schließen";
+        };
+        readonly previous: {
+            readonly cs: "Předchozí";
+            readonly en: "Previous";
+            readonly sk: "Predchádzajúci";
+            readonly de: "Zurück";
+        };
+    };
+};
+export default _default;

package/lightbox/translations.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-lightbox": {
+        next: {
+            cs: "Další",
+            en: "Next",
+            sk: "Ďalší",
+            de: "Weiter",
+        },
+        close: {
+            cs: "Zavřít",
+            en: "Close",
+            sk: "Zatvoriť",
+            de: "Schließen",
+        },
+        previous: {
+            cs: "Předchozí",
+            en: "Previous",
+            sk: "Predchádzajúci",
+            de: "Zurück",
+        },
+    },
+};

package/multi-combobox/multi-combobox.js

@@ -29,6 +29,7 @@ const react_1 = require("@floating-ui/react");
 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 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");
@@ -91,6 +92,7 @@ function useMultiComboboxOptions(query, props) {
 }
 exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
+    const t = (0, translations_1.useUxfTranslation)();
     const generatedId = (0, react_3.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
@@ -135,12 +137,12 @@ exports.MultiCombobox = (0, react_3.forwardRef)((props, ref) => {
         setQuery("");
     };
     const emptyMessage = (0, is_empty_1.isEmpty)(query)
-        ? ((_d = props.noQueryMessage) !== null && _d !== void 0 ? _d : "Pro zobrazení možností začněte psát")
+        ? ((_d = props.noQueryMessage) !== null && _d !== void 0 ? _d : t("uxf-ui-multi-combobox:no-query-message"))
         : selectedOptions.length === options.length && (0, is_not_empty_1.isNotEmpty)(selectedOptions)
-            ? ((_e = props.allOptionsSelectedMessage) !== null && _e !== void 0 ? _e : "Všechny možnosti jsou již vybrány")
+            ? ((_e = props.allOptionsSelectedMessage) !== null && _e !== void 0 ? _e : t("uxf-ui-multi-combobox:all-options-selected"))
             : (0, is_empty_1.isEmpty)(options)
-                ? ((_f = props.noOptionsMessage) !== null && _f !== void 0 ? _f : "Nabídka neosahuje žádné položky")
-                : ((_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno");
+                ? ((_f = props.noOptionsMessage) !== null && _f !== void 0 ? _f : t("uxf-ui-multi-combobox:no-options-message"))
+                : ((_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : t("uxf-ui-multi-combobox:not-found-message"));
     const onBlur = (e) => {
         /* TODO: refactor component to enable this */
         // setQuery("");

package/multi-combobox/translations.d.ts

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

package/multi-combobox/translations.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-multi-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",
+        },
+        "all-options-selected": {
+            cs: "Všechny možnosti jsou již vybrány",
+            en: "All options are already selected",
+            sk: "Všetky možnosti sú už vybrané",
+            de: "Alle Optionen sind bereits ausgewählt",
+        },
+        "no-options-message": {
+            cs: "Nabídka neosahuje žádné položky",
+            en: "No items found",
+            sk: "Ponuka neobsahuje žiadne položky",
+            de: "Keine Elemente gefunden",
+        },
+        "not-found-message": {
+            cs: "Nic nenalezeno",
+            en: "Nothing found",
+            sk: "Nič nenájdené",
+            de: "Nichts gefunden",
+        },
+    },
+};

package/multi-select/multi-select.js

@@ -29,6 +29,7 @@ const react_1 = require("@floating-ui/react");
 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 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");
@@ -73,6 +74,7 @@ function Options(props) {
 Options.displayName = "UxfUiMultiSelectOptions";
 exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f;
+    const t = (0, translations_1.useUxfTranslation)();
     const generatedId = (0, react_3.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
@@ -107,8 +109,8 @@ exports.MultiSelect = (0, react_3.forwardRef)((props, ref) => {
         }
     };
     const emptyMessage = (0, is_empty_1.isEmpty)(filteredOptions) && (0, is_not_empty_1.isNotEmpty)(selectedOptions)
-        ? ((_e = props.allOptionsSelectedMessage) !== null && _e !== void 0 ? _e : "Všechny možnosti jsou již vybrány")
-        : ((_f = props.noOptionsMessage) !== null && _f !== void 0 ? _f : "Nabídka neosahuje žádné položky");
+        ? ((_e = props.allOptionsSelectedMessage) !== null && _e !== void 0 ? _e : t("uxf-ui-multi-select:all-options-selected"))
+        : ((_f = props.noOptionsMessage) !== null && _f !== void 0 ? _f : t("uxf-ui-multi-select:no-options-message"));
     const isNotInteractive = props.isDisabled || props.isReadOnly;
     return (react_3.default.createElement(react_2.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-form-component uxf-multi-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), "data-name": props.name, disabled: isNotInteractive, form: props.form, multiple: true, name: props.name, onChange: props.onChange, value: selectedOptions }, (renderProps) => {
         var _a, _b;

package/multi-select/translations.d.ts

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

package/multi-select/translations.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-multi-select": {
+        "all-options-selected": {
+            cs: "Všechny možnosti jsou již vybrány",
+            en: "All options are already selected",
+            sk: "Všetky možnosti sú už vybrané",
+            de: "Alle Optionen sind bereits ausgewählt",
+        },
+        "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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.72.3",
+    "version": "11.74.1",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -24,7 +24,7 @@
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
         "@uxf/core": "11.72.3",
-        "@uxf/core-react": "11.72.3",
+        "@uxf/core-react": "11.74.1",
         "@uxf/datepicker": "11.61.0",
         "@uxf/styles": "11.72.3",
         "color2k": "2.0.3",

package/select/select.js

@@ -29,6 +29,7 @@ const react_1 = require("@floating-ui/react");
 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 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 cx_1 = require("@uxf/core/utils/cx");
@@ -62,6 +63,7 @@ const SelectedValue = (0, react_3.forwardRef)((props, ref) => {
 SelectedValue.displayName = "UxUiSelectSelectedValue";
 function Select(props) {
     var _a, _b, _c, _d, _e;
+    const t = (0, translations_1.useUxfTranslation)();
     const onChange = (v) => { var _a; return props.onChange((_a = v === null || v === void 0 ? void 0 : v.id) !== null && _a !== void 0 ? _a : null); };
     const selectedOption = (_a = props.options.find((option) => option.id === props.value)) !== null && _a !== void 0 ? _a : null;
     const generatedId = (0, react_3.useId)();
@@ -72,7 +74,7 @@ function Select(props) {
     const dropdown = (0, use_dropdown_1.useDropdown)((_c = props.dropdownPlacement) !== null && _c !== void 0 ? _c : "bottom", (_d = props.dropdownMatchesInputWidth) !== null && _d !== void 0 ? _d : true, props.dropdownMaxHeight, props.dropdownStrategy);
     const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
     const value = selectedOption;
-    const emptyMessage = (_e = props.noOptionsMessage) !== null && _e !== void 0 ? _e : "Nabídka neosahuje žádné položky";
+    const emptyMessage = (_e = props.noOptionsMessage) !== null && _e !== void 0 ? _e : t("uxf-ui-select:no-options-message");
     const isNotInteractive = props.isDisabled || props.isReadOnly;
     return (react_3.default.createElement(react_2.Listbox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), "data-name": props.name, disabled: isNotInteractive, form: props.form, name: props.name, onChange: onChange, style: props.style, value: value }, (renderProps) => {
         var _a, _b, _c;

package/select/translations.d.ts

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

package/select/translations.js

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

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
+const translations_1 = require("@uxf/core-react/translations");
 const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
 const use_time_picker_1 = require("@uxf/datepicker/hooks/use-time-picker");
 const react_1 = __importStar(require("react"));
@@ -33,6 +34,7 @@ const icon_1 = require("../icon");
 const time_picker_hours_1 = require("./time-picker-hours");
 const time_picker_minutes_1 = require("./time-picker-minutes");
 const TimePicker = (props) => {
+    const t = (0, translations_1.useUxfTranslation)();
     const [viewMode, setViewMode] = (0, react_1.useState)("global");
     const { goToNextMinute, goToPrevHour, goToPrevMinute, goToNextHour, ...contextProps } = (0, use_time_picker_1.useTimePicker)({
         selectedTime: props.selectedTime,
@@ -45,26 +47,26 @@ const TimePicker = (props) => {
         return ({
             global: (react_1.default.createElement("div", { className: "uxf-time-picker__global" },
                 react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
-                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
+                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: t("uxf-ui-time-picker:next"), variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
                     react_1.default.createElement(button_1.Button, { onClick: () => setViewMode("hour"), variant: "text" }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour.toString()) !== null && _b !== void 0 ? _b : "0"),
-                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
+                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevHour, title: t("uxf-ui-time-picker:previous"), variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))),
                 react_1.default.createElement("div", null, ":"),
                 react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
-                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextMinute, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
+                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextMinute, title: t("uxf-ui-time-picker:next"), variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
                     react_1.default.createElement(button_1.Button, { onClick: () => setViewMode("minute"), variant: "text" }, props.selectedTime
                         ? props.selectedTime.minute < 10
                             ? "0" + props.selectedTime.minute
                             : props.selectedTime.minute.toString()
                         : "00"),
-                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevMinute, title: "P\u0159edchoz\u00ED", variant: "text" },
+                    react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevMinute, title: t("uxf-ui-time-picker:previous"), variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))))),
             hour: react_1.default.createElement(time_picker_hours_1.TimePickerHours, null),
             minute: react_1.default.createElement(time_picker_minutes_1.TimePickerMinutes, null),
         });
-    }, [goToPrevHour, props.selectedTime, goToNextHour, goToPrevMinute, goToNextMinute]);
+    }, [goToPrevHour, props.selectedTime, goToNextHour, goToPrevMinute, goToNextMinute, t]);
     return (react_1.default.createElement(time_picker_context_1.TimePickerContext.Provider, { value: contextProps },
         react_1.default.createElement("div", { className: "uxf-time-picker" }, timePickerComponents[viewMode])));
 };

package/time-picker/translations.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    readonly "uxf-ui-time-picker": {
+        readonly previous: {
+            readonly cs: "Předchozí";
+            readonly en: "Previous";
+            readonly sk: "Predchádzajúci";
+            readonly de: "Zurück";
+        };
+        readonly next: {
+            readonly cs: "Nadcházející";
+            readonly en: "Next";
+            readonly sk: "Nasledujúci";
+            readonly de: "Weiter";
+        };
+    };
+};
+export default _default;

package/time-picker/translations.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-time-picker": {
+        previous: {
+            cs: "Předchozí",
+            en: "Previous",
+            sk: "Predchádzajúci",
+            de: "Zurück",
+        },
+        next: {
+            cs: "Nadcházející",
+            en: "Next",
+            sk: "Nasledujúci",
+            de: "Weiter",
+        },
+    },
+};