@uxf/ui 10.0.0-beta.7 → 10.0.0-beta.74

package/dropzone/dropzone-input.js

@@ -39,7 +39,7 @@ function fileToFileResponse(file) {
     };
 }
 function progressHandler(progressEvent, file, onValuesChange, values) {
-    if (onValuesChange && values) {
+    if (values) {
         onValuesChange(values.map((f) => f.id === file.id
             ? {
                 ...f,
@@ -51,14 +51,14 @@ function progressHandler(progressEvent, file, onValuesChange, values) {
     }
 }
 function fileUploadedHandler(uploadedFile, dropzoneFile, onValuesChange, values) {
-    if (onValuesChange && values) {
+    if (values) {
         onValuesChange(values.map((f) => f.id === dropzoneFile.id ? { ...uploadedFile, progress: 100, originalFile: f.originalFile } : f));
     }
 }
 function fileRejectedHandler(err, dropzoneFile, onValuesChange, values, onUploadError) {
     onUploadError === null || onUploadError === void 0 ? void 0 : onUploadError(err);
     dropzoneFile.error = err;
-    if (onValuesChange && values) {
+    if (values) {
         onValuesChange(values.map((f) => (f.id === dropzoneFile.id ? { ...f, error: err } : f)));
     }
 }
@@ -74,6 +74,10 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
             progress: 0,
         }));
         props.onChange(props.value ? [...props.value, ...files] : files);
+        const onChange = (values) => {
+            props.onChange(values);
+            refValue.current = values;
+        };
         for (const file of files) {
             if (!file.originalFile) {
                 file.error = "File not found";
@@ -82,10 +86,10 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
             props
                 .onUploadFile(file.originalFile, {
                 abortController: file.abortController,
-                onUploadProgress: (e) => progressHandler(e, file, props.onChange, refValue.current),
+                onUploadProgress: (e) => progressHandler(e, file, onChange, refValue.current),
             })
-                .then((res) => fileUploadedHandler(res, file, props.onChange, refValue.current))
-                .catch((err) => fileRejectedHandler(err, file, props.onChange, refValue.current, props.onUploadError));
+                .then((res) => fileUploadedHandler(res, file, onChange, refValue.current))
+                .catch((err) => fileRejectedHandler(err, file, onChange, refValue.current, props.onUploadError));
         }
     };
     const { getRootProps, getInputProps, rootRef } = (0, react_dropzone_1.useDropzone)({

package/file-input/file-input.d.ts

@@ -3,9 +3,12 @@ import { Clearable } from "@uxf/ui/types";
 import React, { ReactNode } from "react";
 import { FileInputBaseProps } from "../_file-input-base";
 export interface FileInputProps extends FileInputBaseProps, Clearable {
+    className?: string;
     helperText?: ReactNode;
     label?: ReactNode;
+    hiddenLabel?: boolean;
     placeholder?: string;
+    uploadButtonLabel?: string;
     size?: keyof InputGroupSizes;
     variant?: keyof InputGroupVariants;
 }

package/file-input/file-input.js

@@ -36,7 +36,7 @@ const react_1 = __importStar(require("react"));
 const _file_input_base_1 = require("../_file-input-base");
 // eslint-disable-next-line complexity
 exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const context = (0, react_1.useContext)(context_1.UiContext);
     const [isUploading, setIsUploading] = (0, react_1.useState)(false);
     const generatedId = (0, react_1.useId)();
@@ -63,11 +63,11 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
             setIsUploading(false);
         }
     };
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel },
         react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, value: props.value }),
-            react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), htmlFor: id },
-                react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ("Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
+            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, value: props.value }),
+            react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-input--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`), htmlFor: id },
+                react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ((_d = props.uploadButtonLabel) !== null && _d !== void 0 ? _d : "Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
                 react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },
                     (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), target: "_blank", rel: "noreferrer noopenner" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
                     props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })))))));

package/flash-messages/flash-message.js

@@ -29,7 +29,7 @@ const react_1 = __importStar(require("react"));
 // eslint-disable-next-line react/destructuring-assignment
 const FlashMessage = ({ notification, onClose }) => {
     (0, react_1.useEffect)(() => {
-        const { autoDismiss = true, dismissTimeout = 5000 } = notification;
+        const { autoDismiss, dismissTimeout } = notification;
         let timer;
         if (autoDismiss) {
             timer = window.setTimeout(onClose, dismissTimeout);

package/flash-messages/flash-messages.js

@@ -26,16 +26,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashMessages = void 0;
 const react_1 = __importStar(require("react"));
 const flash_message_1 = require("./flash-message");
+const react_2 = require("@headlessui/react");
 exports.FlashMessages = (0, react_1.forwardRef)((props, ref) => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
-    const open = (0, react_1.useCallback)((notification) => setNotifications((prev) => [
-        ...prev,
-        {
-            ...notification,
-            variant: notification.variant || "success",
-            id: notification.id || Math.round(Math.random() * 1000),
-        },
-    ]), []);
+    const permanentNotificationsRef = (0, react_1.useRef)(null);
+    const permanentNotifications = notifications.filter((notification) => !notification.autoDismiss);
+    const dismissableNotifications = notifications.filter((notification) => !!notification.autoDismiss);
+    const [showDivider, setShowDivider] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const dividerHandler = () => {
+            if (permanentNotificationsRef.current &&
+                permanentNotificationsRef.current.scrollHeight > permanentNotificationsRef.current.clientHeight &&
+                dismissableNotifications.length > 0) {
+                setShowDivider(true);
+            }
+            else {
+                setShowDivider(false);
+            }
+        };
+        dividerHandler();
+        window.addEventListener("resize", dividerHandler);
+        return () => window.removeEventListener("resize", dividerHandler);
+    }, [dismissableNotifications.length, notifications]);
+    const open = (0, react_1.useCallback)((notification) => setNotifications((prev) => {
+        var _a;
+        return [
+            ...prev,
+            {
+                ...notification,
+                variant: notification.variant || "success",
+                autoDismiss: (_a = notification.autoDismiss) !== null && _a !== void 0 ? _a : true,
+                dismissTimeout: notification.dismissTimeout || 5000,
+                id: notification.id || Math.round(Math.random() * 1000),
+            },
+        ];
+    }), []);
     const close = (0, react_1.useCallback)((notification) => setNotifications((prev) => prev.filter((n) => n !== notification)), []);
     const closeAll = (0, react_1.useCallback)(() => setNotifications([]), []);
     const innerRef = (0, react_1.useRef)({
@@ -48,8 +73,17 @@ exports.FlashMessages = (0, react_1.forwardRef)((props, ref) => {
         closeAll: innerRef.current.closeAll,
         open: innerRef.current.open,
     }), []);
-    const onClose = (0, react_1.useCallback)((notification) => () => setNotifications((prev) => prev.filter((n) => n !== notification)), []);
     return notifications.length > 0 ? (react_1.default.createElement("div", { className: "uxf-flash-messages" },
-        react_1.default.createElement("div", { className: "uxf-flash-messages__list-wrapper", role: "list" }, notifications.map((notification) => (react_1.default.createElement(flash_message_1.FlashMessage, { key: `${notification.id}`, notification: notification, onClose: onClose(notification) })))))) : null;
+        dismissableNotifications.length > 0 && (react_1.default.createElement("div", { className: "uxf-flash-messages__dismissable" },
+            react_1.default.createElement("div", null, dismissableNotifications.map((notification) => {
+                return (react_1.default.createElement(react_2.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper" },
+                    react_1.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
+            })))),
+        showDivider && react_1.default.createElement("hr", { className: "uxf-flash-messages__divider" }),
+        permanentNotifications.length > 0 && (react_1.default.createElement("div", { ref: permanentNotificationsRef, className: "uxf-flash-messages__permanent" },
+            react_1.default.createElement("div", null, permanentNotifications.map((notification) => {
+                return (react_1.default.createElement(react_2.Transition, { key: notification.id, appear: true, show: true, enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", className: "uxf-flash-message-wrapper" },
+                    react_1.default.createElement(flash_message_1.FlashMessage, { notification: notification, onClose: () => close(notification) })));
+            })))))) : null;
 });
 exports.FlashMessages.displayName = "UxfUiFlashMessages";

package/flash-messages/flash-messages.stories.js

@@ -20,6 +20,18 @@ function Default() {
                     react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
                     react_1.default.createElement("span", null, "Everything is alright."))),
             }) }, "Click to fire Flash message, variant success"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
+                    react_1.default.createElement("span", null, "Everything is alright."))),
+                variant: "error",
+            }) }, "Click to fire Flash message, variant error"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
+                message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(icon_1.Icon, { name: "check", size: 20 }),
+                    react_1.default.createElement("span", null, "Everything is alright."))),
+                variant: "info",
+            }) }, "Click to fire Flash message, variant info"),
         react_1.default.createElement(button_1.Button, { onClick: () => (0, flash_messages_service_1.flashMessage)({
                 message: (react_1.default.createElement("div", { className: "flex items-center space-x-4" },
                     react_1.default.createElement(icon_1.Icon, { name: "xmarkLarge", size: 20 }),

package/image-gallery/components/close-button.d.ts

@@ -1,7 +1,8 @@
-import { FC } from "react";
+import { FC, ReactElement } from "react";
 interface CloseButtonProps {
     text?: string;
     onClick: () => void;
+    buttonElement?: ReactElement;
 }
 export declare const CloseButton: FC<CloseButtonProps>;
 export {};

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

@@ -7,10 +7,9 @@ exports.CloseButton = void 0;
 const react_1 = __importDefault(require("react"));
 const icon_1 = require("../../icon");
 const CloseButton = (props) => {
-    var _a;
+    var _a, _b;
     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"),
-        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 : "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" })));
 };
 exports.CloseButton = CloseButton;
 exports.CloseButton.displayName = "UxfUiCloseButton";

package/image-gallery/components/gallery.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, ReactElement } from "react";
 import { ImageGalleryImageProps } from "../types";
 export interface GalleryProps {
     closeButtonTitle?: string;
@@ -8,5 +8,8 @@ export interface GalleryProps {
     onPrevious: () => void;
     imageIndex: number;
     images: ImageGalleryImageProps[];
+    prevButtonElement?: ReactElement;
+    nextButtonElement?: ReactElement;
+    closeButtonElement?: ReactElement;
 }
 export declare const Gallery: FC<GalleryProps>;

package/image-gallery/components/gallery.js

@@ -29,8 +29,9 @@ const resizer_1 = require("@uxf/core/utils/resizer");
 const react_1 = __importStar(require("react"));
 const close_button_1 = require("./close-button");
 const dot_1 = require("./dot");
-const arrow_button_1 = require("./arrow-button");
+const prev_button_1 = require("./prev-button");
 const react_swipeable_1 = require("react-swipeable");
+const next_button_1 = require("./next-button");
 const Gallery = (props) => {
     var _a;
     (0, react_1.useEffect)(() => {
@@ -65,10 +66,10 @@ const Gallery = (props) => {
     return (react_1.default.createElement("div", { className: "uxf-image-gallery", role: "dialog", "aria-modal": true },
         react_1.default.createElement("div", { "aria-hidden": true, className: "uxf-image-gallery__backdrop", onClick: !props.disableBackdropClose ? props.onClose : undefined }),
         react_1.default.createElement("div", { className: "uxf-image-gallery__close-button-wrapper" },
-            react_1.default.createElement(close_button_1.CloseButton, { onClick: props.onClose, text: props.closeButtonTitle })),
+            react_1.default.createElement(close_button_1.CloseButton, { buttonElement: props.closeButtonElement, onClick: props.onClose, text: props.closeButtonTitle })),
         props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
-            react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onPrevious, type: "prev" }),
-            react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onNext, type: "next" }))),
+            react_1.default.createElement(prev_button_1.PrevButton, { buttonElement: props.prevButtonElement, onClick: props.onPrevious }),
+            react_1.default.createElement(next_button_1.NextButton, { buttonElement: props.nextButtonElement, onClick: props.onNext }))),
         react_1.default.createElement("div", { className: "uxf-image-gallery__content", ...handlers },
             react_1.default.createElement("div", { className: "uxf-image-gallery__inner" },
                 react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : (_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "" }),

package/image-gallery/components/next-button.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+interface NextButtonProps {
+    onClick: () => void;
+    buttonElement?: ReactElement;
+}
+export declare const NextButton: FC<NextButtonProps>;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextButton = void 0;
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../../icon");
+const NextButton = (props) => {
+    var _a;
+    return (react_1.default.createElement("button", { className: "uxf-image-gallery__button uxf-image-gallery__button--next", onClick: props.onClick }, (_a = props.buttonElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronRight" })));
+};
+exports.NextButton = NextButton;
+exports.NextButton.displayName = "UxfUiNextButton";

package/image-gallery/components/prev-button.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactElement } from "react";
+interface PrevButtonProps {
+    onClick: () => void;
+    buttonElement?: ReactElement;
+}
+export declare const PrevButton: FC<PrevButtonProps>;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrevButton = void 0;
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../../icon");
+const PrevButton = (props) => {
+    var _a;
+    return (react_1.default.createElement("button", { className: "uxf-image-gallery__button uxf-image-gallery__button--prev", onClick: props.onClick }, (_a = props.buttonElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" })));
+};
+exports.PrevButton = PrevButton;
+exports.PrevButton.displayName = "UxfUiPrevButton";

package/image-gallery/image-gallery.d.ts

@@ -1,8 +1,11 @@
-import { FC, ReactNode } from "react";
+import { FC, ReactElement, ReactNode } from "react";
 import { GalleryProps } from "./components/gallery";
 export interface ImageGalleryProps {
     children: ReactNode;
     closeButtonTitle?: string;
     disableBackdropClose?: GalleryProps["disableBackdropClose"];
+    prevButtonElement?: ReactElement;
+    nextButtonElement?: ReactElement;
+    closeButtonElement?: ReactElement;
 }
 export declare const ImageGallery: FC<ImageGalleryProps>;

package/image-gallery/image-gallery.js

@@ -48,7 +48,7 @@ const ImageGallery = (props) => {
     const contextValue = { registerImage, unregisterImage, openGallery };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(context_1.ImageGalleryProvider, { value: contextValue }, props.children),
-        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images }))));
+        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images, nextButtonElement: props.nextButtonElement, prevButtonElement: props.prevButtonElement, closeButtonElement: props.closeButtonElement }))));
 };
 exports.ImageGallery = ImageGallery;
 exports.ImageGallery.displayName = "UxfUiImageGallery";

package/image-gallery/image-gallery.stories.js

@@ -7,6 +7,7 @@ exports.Default = void 0;
 const image_1 = require("@uxf/core/utils/image");
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
+const icon_1 = require("../icon");
 exports.default = {
     title: "Lab/ImageGallery",
     component: index_1.ImageGallery,
@@ -31,8 +32,11 @@ const images = [
         title: "Obr. 5",
     },
 ];
+const nextButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronRight" });
+const prevButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "chevronLeft" });
+const closeButtonElement = react_1.default.createElement(icon_1.Icon, { className: "uxf-image-gallery__button-icon", name: "xmarkLarge" });
 function Default() {
-    return (react_1.default.createElement(index_1.ImageGallery, null,
+    return (react_1.default.createElement(index_1.ImageGallery, { prevButtonElement: prevButtonElement, nextButtonElement: nextButtonElement, closeButtonElement: closeButtonElement },
         react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, images.map((image, index) => (react_1.default.createElement(index_1.ImageGallery.Image, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, src: image.src, className: "h-56 w-56 cursor-pointer object-cover transition-transform hover:scale-105", customContent: image.title }))))));
 }
 exports.Default = Default;

package/message/index.d.ts

@@ -0,0 +1,3 @@
+export type { MessageProps, MessageRef } from "./message";
+export { Message } from "./message";
+export { MessageService } from "./message-service";

package/message/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageService = exports.Message = void 0;
+var message_1 = require("./message");
+Object.defineProperty(exports, "Message", { enumerable: true, get: function () { return message_1.Message; } });
+var message_service_1 = require("./message-service");
+Object.defineProperty(exports, "MessageService", { enumerable: true, get: function () { return message_service_1.MessageService; } });

package/message/message-content.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from "react";
+import { MessageColor, MessageVariant } from "./theme";
+export interface ConfirmProps {
+    CustomIconComponent?: ReactNode;
+    acceptLabel?: string;
+    cancelLabel: string;
+    children?: ReactNode;
+    className?: string;
+    color: MessageColor;
+    description?: string;
+    onAccept?: () => void;
+    onCancel?: () => void;
+    onClose: () => void;
+    title: string;
+    variant?: MessageVariant;
+}
+export declare const MessageContent: FC<ConfirmProps>;

package/message/message-content.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageContent = void 0;
+const react_1 = __importDefault(require("react"));
+const button_1 = require("../button");
+const alert_bubble_1 = require("../alert-bubble");
+const BUTTON_COLOR = {
+    default: "default",
+    error: "error",
+    warning: "warning",
+    success: "success",
+};
+const MessageContent = (props) => {
+    var _a, _b, _c;
+    const onAcceptClick = () => {
+        var _a;
+        props.onClose();
+        (_a = props.onAccept) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    const onCancelClick = () => {
+        var _a;
+        props.onClose();
+        (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    const isCentered = props.variant === "centered";
+    return (react_1.default.createElement("div", { className: `uxf-message__content ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_1.default.createElement("div", { className: "uxf-message__content-wrapper" },
+            props.CustomIconComponent !== null ? (react_1.default.createElement("div", { className: "uxf-message__icon-wrapper" }, (_b = props.CustomIconComponent) !== null && _b !== void 0 ? _b : (react_1.default.createElement(alert_bubble_1.AlertBubble, { className: "uxf-message__alert-bubble", color: props.color, size: isCentered ? "default" : "xs" })))) : null,
+            react_1.default.createElement("div", { className: "uxf-message__text-content" },
+                react_1.default.createElement("h2", { className: "uxf-message__title" }, props.title),
+                react_1.default.createElement("p", { className: "uxf-message__description" }, props.description)),
+            props.children),
+        react_1.default.createElement("div", { className: "uxf-message__buttons-wrapper" },
+            react_1.default.createElement(button_1.Button, { className: "uxf-message__cancel-button", variant: "white", isFullWidth: isCentered, onClick: onCancelClick }, props.cancelLabel),
+            props.onAccept ? (react_1.default.createElement(button_1.Button, { className: "uxf-message__accept-button", color: BUTTON_COLOR[props.color], isFullWidth: isCentered, onClick: onAcceptClick }, (_c = props.acceptLabel) !== null && _c !== void 0 ? _c : "Ok")) : null)));
+};
+exports.MessageContent = MessageContent;
+exports.MessageContent.displayName = "UxfUiConfirmContent";

package/message/message-service.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { MessageProps, MessageRef } from "./message";
+declare function getMessageRef(): import("react").RefObject<MessageRef>;
+declare function openAlert(confirm: Omit<MessageProps, "onAccept" | "acceptLabel">): void;
+declare function openConfirm(confirm: Omit<MessageProps, "onAccept" | "acceptLabel"> & Required<Pick<MessageProps, "onAccept" | "acceptLabel">>): void;
+declare function close(): void;
+export declare const MessageService: {
+    getMessageRef: typeof getMessageRef;
+    openAlert: typeof openAlert;
+    openConfirm: typeof openConfirm;
+    close: typeof close;
+};
+export {};

package/message/message-service.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageService = void 0;
+const react_1 = require("react");
+const messageRef = (0, react_1.createRef)();
+function getMessageRef() {
+    return messageRef;
+}
+function openAlert(confirm) {
+    if (messageRef.current) {
+        messageRef.current.message(confirm);
+    }
+}
+function openConfirm(confirm) {
+    if (messageRef.current) {
+        messageRef.current.message(confirm);
+    }
+}
+function close() {
+    if (messageRef.current) {
+        messageRef.current.close();
+    }
+}
+exports.MessageService = {
+    getMessageRef,
+    openAlert,
+    openConfirm,
+    close,
+};

package/message/message.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { MessageVariant, MessageColor } from "./theme";
+export interface MessageProps {
+    CustomIconComponent?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    onCancel?: () => void;
+    onAccept?: () => void;
+    title: string;
+    description?: string;
+    acceptLabel?: string;
+    cancelLabel: string;
+    variant?: MessageVariant;
+    color: MessageColor;
+}
+export interface MessageRef {
+    close: () => void;
+    message: (message: MessageProps) => void;
+}
+export declare const Message: React.ForwardRefExoticComponent<React.RefAttributes<MessageRef>>;

package/message/message.js

@@ -0,0 +1,47 @@
+"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.Message = void 0;
+const react_1 = __importStar(require("react"));
+const dialog_1 = require("../dialog");
+const message_content_1 = require("./message-content");
+const cx_1 = require("@uxf/core/utils/cx");
+exports.Message = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const [content, setContent] = (0, react_1.useState)();
+    const message = (0, react_1.useCallback)((newConfirm) => setContent(newConfirm), []);
+    const close = (0, react_1.useCallback)(() => setContent(null), []);
+    const innerRef = (0, react_1.useRef)({
+        close,
+        message,
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        close: innerRef.current.close,
+        message: innerRef.current.message,
+    }), []);
+    return content ? (react_1.default.createElement(dialog_1.Dialog, { className: (0, cx_1.cx)("uxf-message", `uxf-message--variant-${(_a = content.variant) !== null && _a !== void 0 ? _a : "simple"}`, `uxf-message--color-${content.color}`, content.className), disableBackdropClose: true, onClose: close, open: !!content },
+        react_1.default.createElement(message_content_1.MessageContent, { CustomIconComponent: content.CustomIconComponent, acceptLabel: content.acceptLabel, cancelLabel: content.cancelLabel, color: content.color, description: content.description, onAccept: content.onAccept, onCancel: content.onCancel, onClose: close, title: content.title, variant: content.variant }, content.children))) : null;
+});
+exports.Message.displayName = "UxfUiMessage";

package/message/message.spec.d.ts

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

package/message/message.spec.js

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

package/message/message.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.RefAttributes<import("./message").MessageRef>>;
+};
+export default _default;
+export declare function Default(): React.JSX.Element;