@uxf/ui 11.70.0 → 11.71.0

package/button-list/button-list.d.ts

@@ -1,5 +1,5 @@
 import { Placement, Strategy } from "@floating-ui/react";
-import { FC, ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 import { ButtonProps } from "../button";
 import { IconName } from "../icon/types";
 export type SingleButtonProps = Omit<ButtonProps, "children"> & {
@@ -19,4 +19,7 @@ export interface ButtonListProps {
     menuPlacement?: Placement;
     menuStrategy?: Strategy;
 }
-export declare const ButtonList: FC<ButtonListProps>;
+export declare function ButtonList(props: ButtonListProps): JSX.Element | null;
+export declare namespace ButtonList {
+    var displayName: string;
+}

package/button-list/button-list.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonList = void 0;
+exports.ButtonList = ButtonList;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
 const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
@@ -47,7 +47,7 @@ const MenuButton = (0, react_3.forwardRef)((props, ref) => {
         label && react_3.default.createElement("span", { className: "uxf-button-list__menu-button-label" }, label)));
 });
 MenuButton.displayName = "MenuButton";
-const ButtonList = (props) => {
+function ButtonList(props) {
     var _a, _b, _c, _d, _e, _f;
     const buttonsToRender = props.buttons.slice(0, props.visibleButtonsCount);
     const restButtons = props.buttons.slice(props.visibleButtonsCount, props.buttons.length);
@@ -80,6 +80,5 @@ const ButtonList = (props) => {
                             react_3.default.createElement(MenuButton, { ...button, color: (_a = button.color) !== null && _a !== void 0 ? _a : props.color, size: (_b = button.size) !== null && _b !== void 0 ? _b : props.size, variant: (_c = button.variant) !== null && _c !== void 0 ? _c : props.variant })));
                     }))))));
         }))));
-};
-exports.ButtonList = ButtonList;
-exports.ButtonList.displayName = "UxfUiButtonList";
+}
+ButtonList.displayName = "UxfUiButtonList";

package/button-list/button-list.stories.js

@@ -29,13 +29,14 @@ function Default() {
                 { label: "Fourth item" },
             ], variant: "secondary", visibleButtonsCount: 4 }),
         react_1.default.createElement(index_1.ButtonList, { buttons: [
+                { label: "IconButton", isIconButton: true, icon: "camera" },
                 // eslint-disable-next-line no-console
                 { label: "First item", onClick: console.log },
                 { label: "Second item", color: "positive" },
                 { label: "Third item" },
                 // eslint-disable-next-line no-console
                 { label: "Fourth item", onClick: console.log },
-            ], visibleButtonsCount: 2 }),
+            ], visibleButtonsCount: 3 }),
         react_1.default.createElement(index_1.ButtonList, { buttons: [
                 // eslint-disable-next-line no-console
                 { icon: "check", label: "First item", onClick: console.log },

package/components.d.ts

@@ -36,6 +36,7 @@ import * as infoBoxStories from "./info-box/info-box.stories";
 import * as inputStories from "./input/input.stories";
 import * as labelStories from "./label/label.stories";
 import * as layoutStories from "./layout/layout.stories";
+import * as lightboxStories from "./lightbox/lightbox.stories";
 import * as listItemStories from "./list-item/list-item.stories";
 import * as loaderStories from "./loader/loader.stories";
 import * as lozengeStories from "./lozenge/lozenge.stories";
@@ -213,6 +214,10 @@ export declare const components: {
         readonly title: "Layout";
         readonly stories: typeof layoutStories;
     };
+    readonly lightbox: {
+        readonly title: "Lightbox";
+        readonly stories: typeof lightboxStories;
+    };
     readonly "list-item": {
         readonly title: "ListItem";
         readonly stories: typeof listItemStories;

package/components.js

@@ -63,6 +63,7 @@ const infoBoxStories = __importStar(require("./info-box/info-box.stories"));
 const inputStories = __importStar(require("./input/input.stories"));
 const labelStories = __importStar(require("./label/label.stories"));
 const layoutStories = __importStar(require("./layout/layout.stories"));
+const lightboxStories = __importStar(require("./lightbox/lightbox.stories"));
 const listItemStories = __importStar(require("./list-item/list-item.stories"));
 const loaderStories = __importStar(require("./loader/loader.stories"));
 const lozengeStories = __importStar(require("./lozenge/lozenge.stories"));
@@ -240,6 +241,10 @@ exports.components = {
         title: "Layout",
         stories: layoutStories
     },
+    "lightbox": {
+        title: "Lightbox",
+        stories: lightboxStories
+    },
     "list-item": {
         title: "ListItem",
         stories: listItemStories

package/css/button-list.css

@@ -33,6 +33,12 @@
 
     &__button {
         @apply space-x-2;
+
+        &.uxf-button--icon-button {
+            .uxf-button-list__button-label {
+                @apply sr-only;
+            }
+        }
     }
 
     &__open-button {

package/css/lightbox.css

@@ -0,0 +1,103 @@
+.uxf-lightbox {
+    display: flex;
+    flex-direction: column;
+    inset: 0;
+    position: fixed;
+    z-index: theme("zIndex.lightbox");
+
+    &__content {
+        flex-grow: 1;
+        margin: 0 auto;
+        max-height: calc(100% - 128px);
+    }
+
+    &__inner {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+
+        @apply container;
+    }
+
+    &__image {
+        object-fit: contain;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &__buttons {
+        align-items: center;
+        display: flex;
+        inset: 0;
+        justify-content: space-between;
+        padding: 8px;
+        pointer-events: none;
+        position: absolute;
+        z-index: 10;
+
+        @apply container;
+    }
+
+    &__button {
+        background-color: rgb(0 0 0 / 50%);
+        border-radius: 9999px;
+        padding: 12px;
+        pointer-events: auto;
+
+        &-icon {
+            color: white;
+            height: 32px;
+            width: 32px;
+        }
+    }
+
+    &__dots {
+        align-items: center;
+        column-gap: 8px;
+        display: flex;
+        height: 64px;
+        justify-content: center;
+        padding: 16px;
+        z-index: 1;
+    }
+
+    &__dot {
+        background-color: theme("colors.gray.500");
+        border-radius: 9999px;
+        height: 8px;
+        width: 8px;
+
+        &--active {
+            background-color: white;
+        }
+    }
+
+    &__close-button {
+        background-color: rgb(0 0 0 / 50%);
+        padding: 20px;
+        position: absolute;
+        right: 0;
+        top: 0;
+
+        &-icon {
+            color: white;
+            height: 24px;
+            width: 24px;
+        }
+    }
+
+    &__custom-content {
+        background-color: rgb(0 0 0 / 75%);
+        bottom: 0;
+        color: white;
+        position: absolute;
+        right: 0;
+    }
+
+    &__backdrop {
+        background-color: rgb(0 0 0 / 75%);
+        inset: 0;
+        position: absolute;
+    }
+}

package/dropzone/dropzone-input.d.ts

@@ -1,10 +1,10 @@
-import { FileResponse } from "@uxf/core/types";
-import { FormControlProps, UploadOptions } from "@uxf/ui/types";
+import { FileResponse, FileUploadProps } from "@uxf/core/types";
+import { FormControlProps } from "@uxf/ui/types";
 import React, { CSSProperties, ReactNode } from "react";
 import { FileRejection } from "react-dropzone";
 import { IconName } from "../icon/types";
 import { Accept, DropzoneFile } from "./types";
-export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | undefined> {
+export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | undefined>, FileUploadProps {
     accept?: Accept;
     className?: string;
     helperText?: ReactNode;
@@ -19,7 +19,6 @@ export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | un
     onDropRejected?: (fileRejections: FileRejection[]) => void;
     onUploadComplete?: (files: FileResponse[]) => Promise<void>;
     onUploadError?: (err: unknown) => void;
-    onUploadFile: (file: File, options?: UploadOptions) => Promise<FileResponse>;
     style?: CSSProperties;
 }
 export declare const DropzoneInput: React.ForwardRefExoticComponent<DropzoneInputProps & React.RefAttributes<HTMLDivElement>>;

package/image-gallery/README.md

@@ -1,4 +1,6 @@
-# Image Gallery
+# Image Gallery [@deprecated]
+
+use the `@uxf/ui/lightbox` package instead.
 
 ## CSS dependencies
 

package/image-gallery/components/gallery.js

@@ -24,10 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Gallery = void 0;
+const use_swipeable_1 = require("@uxf/core-react/swipeable/use-swipeable");
 const image_1 = require("@uxf/core/utils/image");
 const resizer_1 = require("@uxf/core/utils/resizer");
 const react_1 = __importStar(require("react"));
-const react_swipeable_1 = require("react-swipeable");
 const close_button_1 = require("./close-button");
 const dot_1 = require("./dot");
 const next_button_1 = require("./next-button");
@@ -58,7 +58,7 @@ const Gallery = (props) => {
     }, []);
     const imageSrc = props.images[props.imageIndex].src;
     const customContent = props.images[props.imageIndex].customContent;
-    const handlers = (0, react_swipeable_1.useSwipeable)({
+    const handlers = (0, use_swipeable_1.useSwipeable)({
         onSwipedLeft: () => props.onNext(),
         onSwipedRight: () => props.onPrevious(),
         swipeDuration: 500,

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

@@ -8,4 +8,7 @@ export interface ImageGalleryProps {
     nextButtonElement?: ReactElement;
     closeButtonElement?: ReactElement;
 }
+/**
+ * @deprecated use `Lightbox` instead
+ */
 export declare const ImageGallery: FC<ImageGalleryProps>;

package/image-gallery/image-gallery.js

@@ -28,6 +28,9 @@ exports.ImageGallery = void 0;
 const react_1 = __importStar(require("react"));
 const gallery_1 = require("./components/gallery");
 const context_1 = require("./context");
+/**
+ * @deprecated use `Lightbox` instead
+ */
 const ImageGallery = (props) => {
     const [images, setImages] = (0, react_1.useState)([]);
     const [imageIndex, setImageIndex] = (0, react_1.useState)(null);

package/lightbox/README.md

@@ -0,0 +1,170 @@
+# Lightbox
+
+Lightbox is a component that displays images in a modal dialog with navigation controls. It allows users to view images in a larger size and navigate through a collection of images.
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/css/icon.css");
+@import url("@uxf/ui/css/lightbox.css");
+```
+
+## Basic Usage
+
+```tsx
+import { Lightbox, useLightboxImage } from "@uxf/ui/lightbox";
+
+function ImageGallery() {
+  const images = [
+    { src: "image1.jpg", title: "Image 1" },
+    { src: "image2.jpg", title: "Image 2" },
+    { src: "image3.jpg", title: "Image 3" },
+  ];
+
+  return (
+    <Lightbox>
+      <div className="flex gap-2">
+        {images.map((image) => (
+          <GalleryImage 
+            key={image.src} 
+            src={image.src} 
+            title={image.title} 
+          />
+        ))}
+      </div>
+    </Lightbox>
+  );
+}
+
+function GalleryImage(props: { src: string; title: string }) {
+  // useLightboxImage hook registers the image with the Lightbox context
+  const openLightbox = useLightboxImage({
+    src: props.src,
+    title: props.title,
+    // Optional custom content to display with the image
+    customContent: <div>Custom description for {props.title}</div>,
+  });
+
+  return (
+    <img
+      src={props.src}
+      alt={props.title}
+      className="cursor-pointer"
+      onClick={openLightbox}
+    />
+  );
+}
+```
+
+## Custom Buttons
+
+You can customize the navigation buttons by providing your own components:
+
+```tsx
+import { Lightbox, type LightboxButtonProps } from "@uxf/ui/lightbox";
+
+function CustomCloseButton(props: LightboxButtonProps) {
+  return (
+    <button 
+      className="my-custom-close-button" 
+      onClick={props.onClick}
+    >
+      Close
+    </button>
+  );
+}
+
+function CustomNextButton(props: LightboxButtonProps) {
+  return (
+    <button 
+      className="my-custom-next-button" 
+      onClick={props.onClick}
+    >
+      Next →
+    </button>
+  );
+}
+
+function CustomPrevButton(props: LightboxButtonProps) {
+  return (
+    <button 
+      className="my-custom-prev-button" 
+      onClick={props.onClick}
+    >
+      ← Prev
+    </button>
+  );
+}
+
+function CustomLightbox() {
+  return (
+    <Lightbox
+      CloseButtonElement={CustomCloseButton}
+      NextButtonElement={CustomNextButton}
+      PrevButtonElement={CustomPrevButton}
+    >
+      {/* Your gallery content */}
+    </Lightbox>
+  );
+}
+```
+
+## Custom Dialog
+
+For complete customization, you can provide your own dialog component:
+
+```tsx
+import {Lightbox, type LightboxCustomDialogProps} from "@uxf/ui/lightbox";
+import {useLightboxDialog} from "@uxf/ui/lightbox/components/use-lightbox-dialog";
+
+function CustomLightboxDialog(props: LightboxCustomDialogProps) {
+    const { imageSrc, imageCustomContent, swipableHandlers } = useLightboxDialog({
+        imageIndex: props.imageIndex,
+        images: props.images,
+        onClose: props.onClose,
+        onNext: props.onNext,
+        onPrev: props.onPrev,
+    });
+
+    return (
+        <div className="my-custom-lightbox-dialog">
+            <button onClick={props.onClose}>Close</button>
+
+            <div className="image-container">
+                <img src={currentImage.src} alt={currentImage.title}/>
+                {currentImage.customContent && (
+                    <div className="custom-content">
+                        {currentImage.customContent}
+                    </div>
+                )}
+            </div>
+
+            <div className="navigation">
+                <button onClick={props.onPrev}>Previous</button>
+                <button onClick={props.onNext}>Next</button>
+            </div>
+        </div>
+    );
+}
+
+function CustomDialogLightbox() {
+    return (
+        <Lightbox DialogElement={CustomLightboxDialog}>
+            {/* Your gallery content */}
+        </Lightbox>
+    );
+}
+```
+
+## Props
+
+### Lightbox Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `children` | ReactNode | Content to be rendered inside the Lightbox |
+| `CloseButtonElement` | `FC<LightboxButtonProps>` | Custom close button component |
+| `NextButtonElement` | `FC<LightboxButtonProps>` | Custom next button component |
+| `PrevButtonElement` | `FC<LightboxButtonProps>` | Custom previous button component |
+| `DialogElement` | `FC<LightboxCustomDialogProps>` | Custom dialog component |
+| `isBackdropCloseDisabled` | `boolean` | Disables closing the lightbox when clicking on the backdrop |

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,14 @@
+"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 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" },
+        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,14 @@
+"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 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" },
+        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,14 @@
+"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 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" },
+        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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.70.0",
+    "version": "11.71.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -24,14 +24,13 @@
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
         "@uxf/core": "11.70.0",
-        "@uxf/core-react": "11.70.0",
+        "@uxf/core-react": "11.71.0",
         "@uxf/datepicker": "11.61.0",
         "@uxf/styles": "11.70.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",
-        "react-dropzone": "14.2.3",
-        "react-swipeable": "7.0.1"
+        "react-dropzone": "14.2.3"
     },
     "peerDependencies": {
         "react": ">= 18.2.0",

package/readmes.d.ts

@@ -38,6 +38,7 @@ export declare const readmes: {
     readonly input: typeof accordionReadme;
     readonly label: typeof accordionReadme;
     readonly layout: typeof accordionReadme;
+    readonly lightbox: typeof accordionReadme;
     readonly "list-item": typeof accordionReadme;
     readonly loader: typeof accordionReadme;
     readonly lozenge: typeof accordionReadme;

package/readmes.js

@@ -43,30 +43,31 @@ const README_md_35 = __importDefault(require("./info-box/README.md"));
 const README_md_36 = __importDefault(require("./input/README.md"));
 const README_md_37 = __importDefault(require("./label/README.md"));
 const README_md_38 = __importDefault(require("./layout/README.md"));
-const README_md_39 = __importDefault(require("./list-item/README.md"));
-const README_md_40 = __importDefault(require("./loader/README.md"));
-const README_md_41 = __importDefault(require("./lozenge/README.md"));
-const README_md_42 = __importDefault(require("./message/README.md"));
-const README_md_43 = __importDefault(require("./modal/README.md"));
-const README_md_44 = __importDefault(require("./modal-dialog/README.md"));
-const README_md_45 = __importDefault(require("./modal-header/README.md"));
-const README_md_46 = __importDefault(require("./multi-combobox/README.md"));
-const README_md_47 = __importDefault(require("./multi-select/README.md"));
-const README_md_48 = __importDefault(require("./pagination/README.md"));
-const README_md_49 = __importDefault(require("./paper/README.md"));
-const README_md_50 = __importDefault(require("./radio/README.md"));
-const README_md_51 = __importDefault(require("./radio-group/README.md"));
-const README_md_52 = __importDefault(require("./raster-image/README.md"));
-const README_md_53 = __importDefault(require("./select/README.md"));
-const README_md_54 = __importDefault(require("./tabs/README.md"));
-const README_md_55 = __importDefault(require("./text-input/README.md"));
-const README_md_56 = __importDefault(require("./text-link/README.md"));
-const README_md_57 = __importDefault(require("./textarea/README.md"));
-const README_md_58 = __importDefault(require("./time-picker/README.md"));
-const README_md_59 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_60 = __importDefault(require("./toggle/README.md"));
-const README_md_61 = __importDefault(require("./tooltip/README.md"));
-const README_md_62 = __importDefault(require("./typography/README.md"));
+const README_md_39 = __importDefault(require("./lightbox/README.md"));
+const README_md_40 = __importDefault(require("./list-item/README.md"));
+const README_md_41 = __importDefault(require("./loader/README.md"));
+const README_md_42 = __importDefault(require("./lozenge/README.md"));
+const README_md_43 = __importDefault(require("./message/README.md"));
+const README_md_44 = __importDefault(require("./modal/README.md"));
+const README_md_45 = __importDefault(require("./modal-dialog/README.md"));
+const README_md_46 = __importDefault(require("./modal-header/README.md"));
+const README_md_47 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_48 = __importDefault(require("./multi-select/README.md"));
+const README_md_49 = __importDefault(require("./pagination/README.md"));
+const README_md_50 = __importDefault(require("./paper/README.md"));
+const README_md_51 = __importDefault(require("./radio/README.md"));
+const README_md_52 = __importDefault(require("./radio-group/README.md"));
+const README_md_53 = __importDefault(require("./raster-image/README.md"));
+const README_md_54 = __importDefault(require("./select/README.md"));
+const README_md_55 = __importDefault(require("./tabs/README.md"));
+const README_md_56 = __importDefault(require("./text-input/README.md"));
+const README_md_57 = __importDefault(require("./text-link/README.md"));
+const README_md_58 = __importDefault(require("./textarea/README.md"));
+const README_md_59 = __importDefault(require("./time-picker/README.md"));
+const README_md_60 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_61 = __importDefault(require("./toggle/README.md"));
+const README_md_62 = __importDefault(require("./tooltip/README.md"));
+const README_md_63 = __importDefault(require("./typography/README.md"));
 exports.readmes = {
     "accordion": README_md_1.default,
     "alert-bubble": README_md_2.default,
@@ -106,28 +107,29 @@ exports.readmes = {
     "input": README_md_36.default,
     "label": README_md_37.default,
     "layout": README_md_38.default,
-    "list-item": README_md_39.default,
-    "loader": README_md_40.default,
-    "lozenge": README_md_41.default,
-    "message": README_md_42.default,
-    "modal": README_md_43.default,
-    "modal-dialog": README_md_44.default,
-    "modal-header": README_md_45.default,
-    "multi-combobox": README_md_46.default,
-    "multi-select": README_md_47.default,
-    "pagination": README_md_48.default,
-    "paper": README_md_49.default,
-    "radio": README_md_50.default,
-    "radio-group": README_md_51.default,
-    "raster-image": README_md_52.default,
-    "select": README_md_53.default,
-    "tabs": README_md_54.default,
-    "text-input": README_md_55.default,
-    "text-link": README_md_56.default,
-    "textarea": README_md_57.default,
-    "time-picker": README_md_58.default,
-    "time-picker-input": README_md_59.default,
-    "toggle": README_md_60.default,
-    "tooltip": README_md_61.default,
-    "typography": README_md_62.default,
+    "lightbox": README_md_39.default,
+    "list-item": README_md_40.default,
+    "loader": README_md_41.default,
+    "lozenge": README_md_42.default,
+    "message": README_md_43.default,
+    "modal": README_md_44.default,
+    "modal-dialog": README_md_45.default,
+    "modal-header": README_md_46.default,
+    "multi-combobox": README_md_47.default,
+    "multi-select": README_md_48.default,
+    "pagination": README_md_49.default,
+    "paper": README_md_50.default,
+    "radio": README_md_51.default,
+    "radio-group": README_md_52.default,
+    "raster-image": README_md_53.default,
+    "select": README_md_54.default,
+    "tabs": README_md_55.default,
+    "text-input": README_md_56.default,
+    "text-link": README_md_57.default,
+    "textarea": README_md_58.default,
+    "time-picker": README_md_59.default,
+    "time-picker-input": README_md_60.default,
+    "toggle": README_md_61.default,
+    "tooltip": README_md_62.default,
+    "typography": README_md_63.default,
 };

package/tw-tokens/tw-z-index.d.ts

@@ -13,6 +13,7 @@ export declare const twZIndex: {
     header: string;
     modal: string;
     imageGallery: string;
+    lightbox: string;
     dropdown: string;
     flashMessage: string;
     tooltip: string;

package/tw-tokens/tw-z-index.js

@@ -17,6 +17,7 @@ exports.twZIndex = {
     header: "50",
     modal: "100",
     imageGallery: "150",
+    lightbox: "150",
     dropdown: "200",
     flashMessage: "250",
     tooltip: "300",

package/utils/tailwind-config.js

@@ -128,7 +128,9 @@ module.exports = {
                 menu: "25",
                 header: "50",
                 modal: "100",
+                /** @deprecated */
                 imageGallery: "150",
+                lightbox: "150",
                 dropdown: "200",
                 flashMessage: "250",
                 tooltip: "300",