@uxf/ui 11.74.0 → 11.74.1

package/layout/uxf-logo.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface UxfLogoProps {
+    isDark?: boolean;
+}
+export declare const UxfLogo: FC<UxfLogoProps>;
+export {};

package/layout/uxf-logo.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UxfLogo = void 0;
+const react_1 = __importDefault(require("react"));
+const UxfLogo = (props) => {
+    return (react_1.default.createElement("svg", { height: "40", width: "179" },
+        react_1.default.createElement("path", { clipRule: "evenodd", d: "M33.563 12.874a9.103 9.103 0 0 0 0-12.874L20.69 12.874l.107.105a9.103 9.103 0 0 0 12.766-.105Zm-20.69-6.437a9.103 9.103 0 0 1 .106 12.766l-.105.107L0 6.437a9.103 9.103 0 0 1 12.874 0ZM40 33.563 27.127 20.69l-.106.107a9.103 9.103 0 0 0 12.98 12.766Zm-20.69-6.437-.107-.105A9.103 9.103 0 0 0 6.437 40l12.874-12.874Z", fill: "#FF4F06", fillRule: "evenodd" }),
+        react_1.default.createElement("path", { clipRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", fill: props.isDark ? "#140939" : "#FFF", fillRule: "evenodd" })));
+};
+exports.UxfLogo = UxfLogo;

package/lightbox/components/lightbox-close-button.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { LightboxButtonProps } from "../types";
+export declare function LightboxCloseButton(props: LightboxButtonProps): React.JSX.Element;
+export declare namespace LightboxCloseButton {
+    var displayName: string;
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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) {
+    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-dialog.d.ts

@@ -0,0 +1,15 @@
+import type { Noop } from "@uxf/core/types";
+import React, { type FC } from "react";
+import { type LightboxButtonProps, LightboxImageProps } from "../types";
+export interface LightboxDialogProps {
+    CloseButtonElement?: FC<LightboxButtonProps>;
+    NextButtonElement?: FC<LightboxButtonProps>;
+    PrevButtonElement?: FC<LightboxButtonProps>;
+    imageIndex: number;
+    images: LightboxImageProps[];
+    isBackdropCloseDisabled?: boolean;
+    onClose: Noop;
+    onNext: Noop;
+    onPrev: Noop;
+}
+export declare function LightboxDialog(props: LightboxDialogProps): React.JSX.Element | null;

package/lightbox/components/lightbox-dialog.js

@@ -0,0 +1,49 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightboxDialog = LightboxDialog;
+const react_1 = require("@floating-ui/react");
+const show_1 = require("@uxf/core-react/components/show");
+const image_1 = require("@uxf/core/utils/image");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const raster_image_1 = require("@uxf/ui/raster-image");
+const react_2 = __importDefault(require("react"));
+const lightbox_close_button_1 = require("./lightbox-close-button");
+const lightbox_dot_1 = require("./lightbox-dot");
+const lightbox_next_button_1 = require("./lightbox-next-button");
+const lightbox_prev_button_1 = require("./lightbox-prev-button");
+const use_lightbox_dialog_1 = require("./use-lightbox-dialog");
+function LightboxDialog(props) {
+    var _a, _b;
+    const { imageCustomContent, imageSrc, swipableHandlers, getFloatingProps, setFloating, floatingContext } = (0, use_lightbox_dialog_1.useLightboxDialog)({
+        images: props.images,
+        imageIndex: props.imageIndex,
+        onClose: props.onClose,
+        onNext: props.onNext,
+        onPrev: props.onPrev,
+    });
+    if ((0, is_nil_1.isNil)(imageSrc)) {
+        return null;
+    }
+    return (react_2.default.createElement(react_1.FloatingPortal, null,
+        react_2.default.createElement(react_1.FloatingOverlay, { lockScroll: true },
+            react_2.default.createElement(react_1.FloatingFocusManager, { context: floatingContext },
+                react_2.default.createElement("div", { ...getFloatingProps({ "aria-modal": true, className: "uxf-lightbox", ref: setFloating }) },
+                    react_2.default.createElement("div", { "aria-hidden": true, className: "uxf-lightbox__backdrop", onClick: !props.isBackdropCloseDisabled ? props.onClose : undefined }),
+                    (0, is_not_nil_1.isNotNil)(props.CloseButtonElement) ? (react_2.default.createElement(props.CloseButtonElement, { onClick: props.onClose })) : (react_2.default.createElement(lightbox_close_button_1.LightboxCloseButton, { onClick: props.onClose })),
+                    props.images.length > 1 && (react_2.default.createElement("div", { className: "uxf-lightbox__buttons" },
+                        (0, is_not_nil_1.isNotNil)(props.PrevButtonElement) ? (react_2.default.createElement(props.PrevButtonElement, { onClick: props.onPrev })) : (react_2.default.createElement(lightbox_prev_button_1.LightboxPrevButton, { onClick: props.onPrev })),
+                        (0, is_not_nil_1.isNotNil)(props.NextButtonElement) ? (react_2.default.createElement(props.NextButtonElement, { onClick: props.onNext })) : (react_2.default.createElement(lightbox_next_button_1.LightboxNextButton, { onClick: props.onNext })))),
+                    react_2.default.createElement("div", { className: "uxf-lightbox__content", ...swipableHandlers },
+                        react_2.default.createElement("div", { className: "uxf-lightbox__inner" },
+                            react_2.default.createElement(raster_image_1.RasterImage, { alt: "", className: "uxf-lightbox__image", height: typeof imageSrc !== "string" && "height" in imageSrc
+                                    ? ((_a = imageSrc.height) !== null && _a !== void 0 ? _a : 0)
+                                    : 0, key: (0, image_1.getImgUniqueIdentifier)(imageSrc), src: imageSrc, width: typeof imageSrc !== "string" && "width" in imageSrc ? ((_b = imageSrc.width) !== null && _b !== void 0 ? _b : 0) : 0 }),
+                            react_2.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(imageCustomContent) },
+                                react_2.default.createElement("div", { className: "uxf-lightbox__custom-content" }, imageCustomContent))),
+                        props.images.length > 1 && (react_2.default.createElement("div", { className: "uxf-lightbox__dots" }, props.images.map((img, index) => (react_2.default.createElement(lightbox_dot_1.LightboxDot, { isActive: index === props.imageIndex, key: (0, image_1.getImgUniqueIdentifier)(img.src) || index })))))))))));
+}

package/lightbox/components/lightbox-dot.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface LightboxDotProps {
+    isActive?: boolean;
+}
+export declare function LightboxDot(props: LightboxDotProps): React.JSX.Element;
+export declare namespace LightboxDot {
+    var displayName: string;
+}
+export {};

package/lightbox/components/lightbox-dot.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightboxDot = LightboxDot;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+function LightboxDot(props) {
+    const className = (0, cx_1.cx)("uxf-lightbox__dot", props.isActive && "uxf-lightbox__dot--active");
+    return react_1.default.createElement("div", { className: className });
+}
+LightboxDot.displayName = "UxfUiLightboxDot";

package/lightbox/components/lightbox-next-button.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { LightboxButtonProps } from "../types";
+export declare function LightboxNextButton(props: LightboxButtonProps): React.JSX.Element;
+export declare namespace LightboxNextButton {
+    var displayName: string;
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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) {
+    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.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { LightboxButtonProps } from "../types";
+export declare function LightboxPrevButton(props: LightboxButtonProps): React.JSX.Element;
+export declare namespace LightboxPrevButton {
+    var displayName: string;
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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) {
+    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/components/use-lightbox-dialog.d.ts

@@ -0,0 +1,34 @@
+import type { Noop } from "@uxf/core/types";
+import { LightboxImageProps } from "../types";
+export interface UseLightboxDialogProps {
+    imageIndex: number;
+    images: LightboxImageProps[];
+    onClose: Noop;
+    onNext: Noop;
+    onPrev: Noop;
+}
+export declare function useLightboxDialog(props: UseLightboxDialogProps): {
+    floatingContext: {
+        x: number;
+        y: number;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    imageCustomContent: import("react").ReactNode;
+    imageSrc: import("@uxf/core/utils/resizer").ImageSource | undefined;
+    setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    swipableHandlers: import("@uxf/core-react/swipeable/types").SwipeableHandlers;
+};

package/lightbox/components/use-lightbox-dialog.js

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLightboxDialog = useLightboxDialog;
+const react_1 = require("@floating-ui/react");
+const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
+const use_swipeable_1 = require("@uxf/core-react/swipeable/use-swipeable");
+function useLightboxDialog(props) {
+    const { refs, context } = (0, react_1.useFloating)();
+    const click = (0, react_1.useClick)(context);
+    const role = (0, react_1.useRole)(context);
+    const dismiss = (0, react_1.useDismiss)(context, { outsidePressEvent: "mousedown" });
+    const { getFloatingProps } = (0, react_1.useInteractions)([click, role, dismiss]);
+    (0, use_on_mount_1.useOnMount)(() => {
+        const onKeyDown = (event) => {
+            switch (event.key) {
+                case "ArrowRight":
+                    props.onNext();
+                    break;
+                case "ArrowLeft":
+                    props.onPrev();
+                    break;
+                case "Escape":
+                    props.onClose();
+                    break;
+            }
+        };
+        document.body.style.overflow = "hidden";
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.body.style.overflow = "auto";
+            window.removeEventListener("keydown", onKeyDown);
+        };
+    });
+    const image = props.images.at(props.imageIndex);
+    const imageSrc = image === null || image === void 0 ? void 0 : image.src;
+    const imageCustomContent = image === null || image === void 0 ? void 0 : image.customContent;
+    const swipableHandlers = (0, use_swipeable_1.useSwipeable)({
+        onSwipedLeft: () => props.onNext(),
+        onSwipedRight: () => props.onPrev(),
+        swipeDuration: 500,
+    });
+    return {
+        floatingContext: context,
+        getFloatingProps,
+        imageCustomContent,
+        imageSrc,
+        setFloating: refs.setFloating,
+        swipableHandlers,
+    };
+}

package/lightbox/context.d.ts

@@ -0,0 +1,11 @@
+import { LightboxImageProps } from "./types";
+type ContextType = {
+    registerImage: (props: LightboxImageProps) => void;
+    unregisterImage: (props: LightboxImageProps) => void;
+    openLightbox: (props: LightboxImageProps) => void;
+    images: LightboxImageProps[];
+    currentImageIndex: number | null;
+};
+export declare const LightboxProvider: import("react").Provider<ContextType>;
+export declare const useLightboxContext: () => ContextType;
+export {};

package/lightbox/context.js

@@ -0,0 +1,17 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLightboxContext = exports.LightboxProvider = void 0;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const noop_1 = require("@uxf/core/utils/noop");
+const react_1 = require("react");
+const LightboxContext = (0, react_1.createContext)({
+    registerImage: noop_1.noop,
+    unregisterImage: noop_1.noop,
+    openLightbox: noop_1.noop,
+    images: empty_array_1.EMPTY_ARRAY,
+    currentImageIndex: null,
+});
+exports.LightboxProvider = LightboxContext.Provider;
+const useLightboxContext = () => (0, react_1.useContext)(LightboxContext);
+exports.useLightboxContext = useLightboxContext;

package/lightbox/index.d.ts

@@ -0,0 +1,4 @@
+export { Lightbox } from "./lightbox";
+export { useLightbox } from "./use-lightbox";
+export { useLightboxImage } from "./use-lightbox-image";
+export type { LightboxButtonProps, LightboxCustomDialogProps, LightboxImageProps } from "./types";

package/lightbox/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLightboxImage = exports.useLightbox = exports.Lightbox = void 0;
+var lightbox_1 = require("./lightbox");
+Object.defineProperty(exports, "Lightbox", { enumerable: true, get: function () { return lightbox_1.Lightbox; } });
+var use_lightbox_1 = require("./use-lightbox");
+Object.defineProperty(exports, "useLightbox", { enumerable: true, get: function () { return use_lightbox_1.useLightbox; } });
+var use_lightbox_image_1 = require("./use-lightbox-image");
+Object.defineProperty(exports, "useLightboxImage", { enumerable: true, get: function () { return use_lightbox_image_1.useLightboxImage; } });

package/lightbox/lightbox.d.ts

@@ -0,0 +1,14 @@
+import React, { type FC, ReactNode } from "react";
+import { type LightboxButtonProps, type LightboxCustomDialogProps } from "./types";
+export interface LightboxProps {
+    CloseButtonElement?: FC<LightboxButtonProps>;
+    DialogElement?: FC<LightboxCustomDialogProps>;
+    NextButtonElement?: FC<LightboxButtonProps>;
+    PrevButtonElement?: FC<LightboxButtonProps>;
+    children: ReactNode;
+    isBackdropCloseDisabled?: boolean;
+}
+export declare function Lightbox(props: LightboxProps): React.JSX.Element;
+export declare namespace Lightbox {
+    var displayName: string;
+}

package/lightbox/lightbox.js

@@ -0,0 +1,27 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lightbox = Lightbox;
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importDefault(require("react"));
+const lightbox_dialog_1 = require("./components/lightbox-dialog");
+const context_1 = require("./context");
+const use_lightbox_1 = require("./use-lightbox");
+function Lightbox(props) {
+    const { images, unregisterImage, openLightbox, imageIndex, registerImage, onNextImage, onPrevImage, onClose } = (0, use_lightbox_1.useLightbox)();
+    const contextValue = {
+        registerImage,
+        unregisterImage,
+        openLightbox,
+        images,
+        currentImageIndex: imageIndex,
+    };
+    return (react_1.default.createElement(context_1.LightboxProvider, { value: contextValue },
+        props.children,
+        (0, is_not_nil_1.isNotNil)(imageIndex) &&
+            ((0, is_not_nil_1.isNotNil)(props.DialogElement) ? (react_1.default.createElement(props.DialogElement, { imageIndex: imageIndex, images: images, onClose: onClose, onNext: onNextImage, onPrev: onPrevImage })) : (react_1.default.createElement(lightbox_dialog_1.LightboxDialog, { CloseButtonElement: props.CloseButtonElement, NextButtonElement: props.NextButtonElement, PrevButtonElement: props.PrevButtonElement, imageIndex: imageIndex, images: images, isBackdropCloseDisabled: props.isBackdropCloseDisabled, onClose: onClose, onNext: onNextImage, onPrev: onPrevImage })))));
+}
+Lightbox.displayName = "UxfUiLightbox";

package/lightbox/lightbox.spec.d.ts

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

package/lightbox/lightbox.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 react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const lightbox_stories_1 = require("./lightbox.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(lightbox_stories_1.Default, null));

package/lightbox/lightbox.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/lightbox/lightbox.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const image_1 = require("@uxf/core/utils/image");
+const react_1 = __importDefault(require("react"));
+const raster_image_1 = require("../raster-image");
+const index_1 = require("./index");
+const IMAGES = [
+    {
+        src: "/sample-images/sample-1.jpeg",
+        title: "Obr. 1",
+        customContent: "hello world 1",
+        width: 500,
+    },
+    {
+        src: "/sample-images/sample-2.jpg",
+        title: "Obr. 2",
+        customContent: "hello world 2",
+        width: 500,
+    },
+    {
+        src: "/sample-images/sample-3.jpg",
+        title: "Obr. 3",
+        customContent: "hello world 3",
+        width: 500,
+    },
+];
+function Image(props) {
+    const openLightbox = (0, index_1.useLightboxImage)({
+        src: props.src,
+        title: props.title,
+        customContent: props.customContent,
+    });
+    return (react_1.default.createElement("button", { onClick: openLightbox },
+        react_1.default.createElement(raster_image_1.RasterImage, { alt: "", className: "size-56 cursor-pointer object-cover transition-transform hover:scale-105", src: props.src, width: props.width })));
+}
+function Default() {
+    return (react_1.default.createElement(index_1.Lightbox, null,
+        react_1.default.createElement("div", { className: "flex-direction flex gap-2" }, IMAGES.map((image) => (react_1.default.createElement(Image, { customContent: image.customContent, key: (0, image_1.getImgUniqueIdentifier)(image.src), src: image.src, title: image.title, width: image.width }))))));
+}

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/lightbox/types.d.ts

@@ -0,0 +1,20 @@
+import type { Noop } from "@uxf/core/types";
+import { ImageSource } from "@uxf/core/utils/resizer";
+import { type MouseEventHandler, ReactNode } from "react";
+export interface LightboxImageProps {
+    alt?: string;
+    className?: string;
+    customContent?: ReactNode;
+    src: ImageSource;
+    title?: string;
+}
+export interface LightboxButtonProps {
+    onClick: MouseEventHandler;
+}
+export interface LightboxCustomDialogProps {
+    imageIndex: number;
+    images: LightboxImageProps[];
+    onClose: Noop;
+    onNext: Noop;
+    onPrev: Noop;
+}

package/lightbox/types.js

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

package/lightbox/use-lightbox-image.d.ts

@@ -0,0 +1,2 @@
+import { LightboxImageProps } from "./types";
+export declare function useLightboxImage(props: LightboxImageProps): () => void;

package/lightbox/use-lightbox-image.js

@@ -0,0 +1,17 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLightboxImage = useLightboxImage;
+const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
+const react_1 = require("react");
+const context_1 = require("./context");
+function useLightboxImage(props) {
+    const { registerImage, unregisterImage, openLightbox } = (0, context_1.useLightboxContext)();
+    (0, use_on_mount_1.useOnMount)(() => {
+        registerImage(props);
+        return () => {
+            unregisterImage(props);
+        };
+    });
+    return (0, react_1.useCallback)(() => openLightbox(props), [props, openLightbox]);
+}

package/lightbox/use-lightbox.d.ts

@@ -0,0 +1,11 @@
+import { LightboxImageProps } from "./types";
+export declare function useLightbox(): {
+    onPrevImage: () => void;
+    onNextImage: () => void;
+    onClose: () => void;
+    registerImage: (image: LightboxImageProps) => void;
+    unregisterImage: (image: LightboxImageProps) => void;
+    openLightbox: (image: LightboxImageProps) => void;
+    images: LightboxImageProps[];
+    imageIndex: number | null;
+};

package/lightbox/use-lightbox.js

@@ -0,0 +1,34 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLightbox = useLightbox;
+const empty_array_1 = require("@uxf/core/constants/empty-array");
+const image_1 = require("@uxf/core/utils/image");
+const react_1 = require("react");
+function getModuloIndex(index, length) {
+    return index < 0 ? ((index % length) + length) % length : index % length;
+}
+function useLightbox() {
+    const [images, setImages] = (0, react_1.useState)(empty_array_1.EMPTY_ARRAY);
+    const [imageIndex, setImageIndex] = (0, react_1.useState)(null);
+    const registerImageHandler = (0, react_1.useCallback)((image) => setImages((v) => [...v, image]), []);
+    const unregisterImageHandler = (0, react_1.useCallback)((image) => setImages((v) => v.filter((u) => (0, image_1.getImgUniqueIdentifier)(u.src) !== (0, image_1.getImgUniqueIdentifier)(image.src))), []);
+    const openLightboxHandler = (0, react_1.useCallback)((image) => setImageIndex(images.findIndex((i) => (0, image_1.getImgUniqueIdentifier)(i.src) === (0, image_1.getImgUniqueIdentifier)(image.src))), [images]);
+    const showPrevImageHandler = (0, react_1.useCallback)(() => {
+        setImageIndex((v) => (v === null ? null : getModuloIndex(v - 1, images.length)));
+    }, [images.length]);
+    const showNextImageHandler = (0, react_1.useCallback)(() => {
+        setImageIndex((v) => (v === null ? null : getModuloIndex(v + 1, images.length)));
+    }, [images.length]);
+    const closeHandler = (0, react_1.useCallback)(() => setImageIndex(null), []);
+    return {
+        onPrevImage: showPrevImageHandler,
+        onNextImage: showNextImageHandler,
+        onClose: closeHandler,
+        registerImage: registerImageHandler,
+        unregisterImage: unregisterImageHandler,
+        openLightbox: openLightboxHandler,
+        images,
+        imageIndex,
+    };
+}

package/list-item/index.d.ts

@@ -0,0 +1,2 @@
+export { ListItem } from "./list-item";
+export type { ListItemProps } from "./list-item";

package/list-item/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = void 0;
+var list_item_1 = require("./list-item");
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return list_item_1.ListItem; } });

package/list-item/list-item.d.ts

@@ -0,0 +1,10 @@
+import { UseAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
+import React, { AnchorHTMLAttributes, ReactNode } from "react";
+import { IconName } from "../icon/types";
+import { NextLink } from "../utils/next-link";
+export interface ListItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+    as?: NextLink | "a";
+    endIcon?: IconName;
+    endElement?: ReactNode;
+}
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLAnchorElement>>;