@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/components/grid/GridItem.js

@@ -0,0 +1,37 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/grid/GridItem.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "GridItem";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-grid-item";
+var { block } = classNames.bem(CLASSNAME);
+/**
+* GridItem component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var GridItem = forwardRef((props, ref) => {
+	const { children, className, width, align, order, ...forwardedProps } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, block({
+			[`width-${width}`]: Boolean(width),
+			[`order-${order}`]: Boolean(order),
+			[`align-${align}`]: Boolean(align)
+		})),
+		children
+	});
+});
+GridItem.displayName = COMPONENT_NAME;
+GridItem.className = CLASSNAME;
+//#endregion
+export { GridItem };

package/_internal/components/grid/index.d.ts

@@ -0,0 +1,2 @@
+import { Grid, GridProps } from "./Grid.js";
+import { GridItem, GridItemProps } from "./GridItem.js";

package/_internal/components/grid-column/GridColumn.d.ts

@@ -0,0 +1,24 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { GridColumnGapSize, GridColumnProps as GridColumnProps$1 } from "../../packages/lumx-core/src/js/components/GridColumn/GridColumn.js";
+//#region src/components/grid-column/GridColumn.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface GridColumnProps extends index_d_exports.GenericProps, ReactToJSX<GridColumnProps$1> {
+  /** Customize the root element. */
+  as?: React.ElementType;
+}
+/**
+ * The GridColumn is a layout component that can display children in a grid
+ * with custom display properties. It also comes with a responsive design,
+ * with a number of column that reduce when there is not enough space for each item.
+ *
+ * @param props Component props.
+ * @param ref Component ref.
+ * @return React element.
+ */
+declare const GridColumn: Comp<GridColumnProps, HTMLElement>;
+//#endregion
+export { GridColumn, GridColumnProps };

package/_internal/components/grid-column/GridColumn.js

@@ -0,0 +1,27 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { CLASSNAME, COMPONENT_NAME, GridColumn as GridColumn$1 } from "../../packages/lumx-core/src/js/components/GridColumn/GridColumn.js";
+//#region src/components/grid-column/GridColumn.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {};
+/**
+* The GridColumn is a layout component that can display children in a grid
+* with custom display properties. It also comes with a responsive design,
+* with a number of column that reduce when there is not enough space for each item.
+*
+* @param props Component props.
+* @param ref Component ref.
+* @return React element.
+*/
+var GridColumn = forwardRef((props, ref) => {
+	return GridColumn$1({
+		ref,
+		...props
+	});
+});
+GridColumn.displayName = COMPONENT_NAME;
+GridColumn.className = CLASSNAME;
+GridColumn.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { GridColumn };

package/_internal/components/grid-column/index.d.ts

@@ -0,0 +1,2 @@
+import { GridColumnGapSize } from "../../packages/lumx-core/src/js/components/GridColumn/GridColumn.js";
+import { GridColumn, GridColumnProps } from "./GridColumn.js";

package/_internal/components/heading/Heading.d.ts

@@ -0,0 +1,14 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { HeadingProps as HeadingProps$1 } from "../../packages/lumx-core/src/js/components/Heading/index.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/heading/Heading.d.ts
+interface HeadingProps extends GenericProps, HeadingProps$1 {}
+/**
+ * Renders a heading component.
+ * Extends the `Text` Component with the heading level automatically computed based on
+ * the current level provided by the context.
+ */
+declare const Heading: Comp<HeadingProps, HTMLElement>;
+//#endregion
+export { Heading, HeadingProps };

package/_internal/components/heading/Heading.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { Text } from "../text/Text.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, getHeadingProps } from "../../packages/lumx-core/src/js/components/Heading/index.js";
+import { useHeadingLevel } from "./useHeadingLevel.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/heading/Heading.tsx
+/**
+* Renders a heading component.
+* Extends the `Text` Component with the heading level automatically computed based on
+* the current level provided by the context.
+*/
+var Heading = forwardRef((props, ref) => {
+	const { children, ...otherProps } = props;
+	const { headingElement } = useHeadingLevel();
+	return /* @__PURE__ */ jsx(Text, {
+		ref,
+		...getHeadingProps(otherProps, headingElement),
+		children
+	});
+});
+Heading.displayName = COMPONENT_NAME;
+Heading.className = CLASSNAME;
+Heading.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Heading };

package/_internal/components/heading/HeadingLevelProvider.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+//#region src/components/heading/HeadingLevelProvider.d.ts
+interface HeadingLevelProviderProps {
+  /** The heading level to start at. If left undefined, the parent context will be used, if any. */
+  level?: number;
+  /** The children to display */
+  children: ReactNode;
+}
+/**
+ * Provide a new heading level context.
+ */
+declare const HeadingLevelProvider: React.FC<HeadingLevelProviderProps>;
+//#endregion
+export { HeadingLevelProvider, HeadingLevelProviderProps };

package/_internal/components/heading/HeadingLevelProvider.js

@@ -0,0 +1,22 @@
+import { HeadingLevelContext } from "./context.js";
+import { useHeadingLevel } from "./useHeadingLevel.js";
+import { computeHeadingLevel } from "../../packages/lumx-core/src/js/components/Heading/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/heading/HeadingLevelProvider.tsx
+/**
+* Provide a new heading level context.
+*/
+var HeadingLevelProvider = ({ children, level }) => {
+	const { level: contextLevel } = useHeadingLevel();
+	const nextLevel = computeHeadingLevel(level, contextLevel);
+	const headingElement = `h${nextLevel}`;
+	return /* @__PURE__ */ jsx(HeadingLevelContext.Provider, {
+		value: {
+			level: nextLevel,
+			headingElement
+		},
+		children
+	});
+};
+//#endregion
+export { HeadingLevelProvider };

package/_internal/components/heading/context.js

@@ -0,0 +1,6 @@
+import { defaultContext } from "../../packages/lumx-core/src/js/components/Heading/constants.js";
+import { createContext } from "react";
+//#region src/components/heading/context.tsx
+var HeadingLevelContext = createContext(defaultContext);
+//#endregion
+export { HeadingLevelContext };

package/_internal/components/heading/index.d.ts

@@ -0,0 +1,3 @@
+import { Heading, HeadingProps } from "./Heading.js";
+import { HeadingLevelProvider, HeadingLevelProviderProps } from "./HeadingLevelProvider.js";
+import { useHeadingLevel } from "./useHeadingLevel.js";

package/_internal/components/heading/useHeadingLevel.d.ts

@@ -0,0 +1,7 @@
+//#region src/components/heading/useHeadingLevel.d.ts
+declare const useHeadingLevel: () => {
+  level: number;
+  headingElement: import("@lumx/core/js/types").HeadingElement;
+};
+//#endregion
+export { useHeadingLevel };

package/_internal/components/heading/useHeadingLevel.js

@@ -0,0 +1,12 @@
+import { HeadingLevelContext } from "./context.js";
+import React from "react";
+//#region src/components/heading/useHeadingLevel.tsx
+var useHeadingLevel = () => {
+	const { level = 1, headingElement = "h1" } = React.useContext(HeadingLevelContext);
+	return {
+		level,
+		headingElement
+	};
+};
+//#endregion
+export { useHeadingLevel };

package/_internal/components/icon/Icon.d.ts

@@ -0,0 +1,17 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { IconProps as IconProps$1, IconSizes } from "../../packages/lumx-core/src/js/components/Icon/index.js";
+import { GenericProps } from "@lumx/core/js/types";
+
+//#region src/components/icon/Icon.d.ts
+interface IconProps extends ReactToJSX<IconProps$1>, GenericProps {}
+/**
+ * Icon component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Icon: Comp<IconProps, HTMLElement>;
+//#endregion
+export { Icon, IconProps };

package/_internal/components/icon/Icon.js

@@ -0,0 +1,24 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Icon as Icon$1 } from "../../packages/lumx-core/src/js/components/Icon/index.js";
+//#region src/components/icon/Icon.tsx
+/**
+* Icon component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Icon = forwardRef((props, ref) => {
+	const defaultTheme = useTheme();
+	return Icon$1({
+		...props,
+		ref,
+		theme: props.theme || defaultTheme
+	});
+});
+Icon.displayName = Icon$1.displayName;
+Icon.className = Icon$1.className;
+Icon.defaultProps = Icon$1.defaultProps;
+//#endregion
+export { Icon };

package/_internal/components/icon/index.d.ts

@@ -0,0 +1,2 @@
+import { IconSizes } from "../../packages/lumx-core/src/js/components/Icon/index.js";
+import { Icon, IconProps } from "./Icon.js";

package/_internal/components/image-block/ImageBlock.d.ts

@@ -0,0 +1,29 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { ImageBlockCaptionPosition, ImageBlockProps as ImageBlockProps$1, ImageBlockPropsToOverride } from "../../packages/lumx-core/src/js/components/ImageBlock/index.js";
+import { ThumbnailProps } from "../thumbnail/Thumbnail.js";
+import { index_d_exports as index_d_exports$1 } from "../../../index.js";
+
+//#region src/components/image-block/ImageBlock.d.ts
+/**
+ *  Image block sizes.
+ */
+type ImageBlockSize = Extract<index_d_exports$1.Size, 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+interface ImageBlockProps extends index_d_exports.GenericProps, ReactToJSX<ImageBlockProps$1, ImageBlockPropsToOverride> {
+  /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
+  thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
+}
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ImageBlock: Comp<ImageBlockProps, HTMLDivElement>;
+//#endregion
+export { ImageBlock, ImageBlockProps, ImageBlockSize };

package/_internal/components/image-block/ImageBlock.js

@@ -0,0 +1,30 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, ImageBlock as ImageBlock$1 } from "../../packages/lumx-core/src/js/components/ImageBlock/index.js";
+import { ImageCaption } from "./ImageCaption.js";
+import { Thumbnail } from "../thumbnail/Thumbnail.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/image-block/ImageBlock.tsx
+/**
+* ImageBlock component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ImageBlock = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { theme = defaultTheme, ...forwardedProps } = props;
+	return ImageBlock$1({
+		ref,
+		theme,
+		...forwardedProps,
+		Thumbnail,
+		ImageCaption
+	});
+});
+ImageBlock.displayName = COMPONENT_NAME;
+ImageBlock.className = CLASSNAME;
+ImageBlock.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { ImageBlock };

package/_internal/components/image-block/ImageCaption.d.ts

@@ -0,0 +1,13 @@
+import { ImageCaptionMetadata as ImageCaptionMetadata$1, ImageCaptionPropsToOverride } from "../../packages/lumx-core/src/js/components/ImageBlock/ImageCaption.js";
+import { TextProps } from "../text/Text.js";
+import { CSSProperties } from "react";
+
+//#region src/components/image-block/ImageCaption.d.ts
+type ForwardedTextProps = Omit<TextProps, 'as' | 'typography' | 'color' | 'colorVariant'>;
+type ImageCaptionMetadata = Omit<ImageCaptionMetadata$1, ImageCaptionPropsToOverride> & {
+  /** Props to pass to the title. */titleProps?: ForwardedTextProps; /** Props to pass to the title. */
+  descriptionProps?: ForwardedTextProps; /** Caption custom CSS style. */
+  captionStyle?: CSSProperties;
+};
+//#endregion
+export { ImageCaptionMetadata };

package/_internal/components/image-block/ImageCaption.js

@@ -0,0 +1,18 @@
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Text } from "../text/Text.js";
+import { FlexBox } from "../flex-box/FlexBox.js";
+import { ImageCaption as ImageCaption$1 } from "../../packages/lumx-core/src/js/components/ImageBlock/ImageCaption.js";
+//#region src/components/image-block/ImageCaption.tsx
+/** Internal component used to render image captions */
+var ImageCaption = (props) => {
+	const defaultTheme = useTheme();
+	const { theme = defaultTheme, ...forwardedProps } = props;
+	return ImageCaption$1({
+		FlexBox,
+		Text,
+		theme,
+		...forwardedProps
+	});
+};
+//#endregion
+export { ImageCaption };

package/_internal/components/image-block/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageBlockCaptionPosition } from "../../packages/lumx-core/src/js/components/ImageBlock/index.js";
+import { ImageBlock, ImageBlockProps, ImageBlockSize } from "./ImageBlock.js";

package/_internal/components/image-lightbox/ImageLightbox.d.ts

@@ -0,0 +1,17 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { ImageLightboxProps } from "./types.js";
+import { useImageLightbox } from "./useImageLightbox.js";
+
+//#region src/components/image-lightbox/ImageLightbox.d.ts
+/**
+ * ImageLightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ImageLightbox: Comp<ImageLightboxProps, HTMLDivElement> & {
+  useImageLightbox: typeof useImageLightbox;
+};
+//#endregion
+export { ImageLightbox };

package/_internal/components/image-lightbox/ImageLightbox.js

@@ -0,0 +1,66 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { ThemeProvider } from "../../utils/theme/ThemeContext.js";
+import { ClickAwayProvider } from "../../utils/ClickAwayProvider/ClickAwayProvider.js";
+import { CLASSNAME, COMPONENT_NAME } from "./constants.js";
+import { ImageSlideshow } from "./internal/ImageSlideshow.js";
+import { useImageLightbox } from "./useImageLightbox.js";
+import { Lightbox } from "../lightbox/Lightbox.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/image-lightbox/ImageLightbox.tsx
+var Inner = forwardRef((props, ref) => {
+	const { className, isOpen, closeButtonProps, onClose, parentElement, activeImageIndex, slideshowControlsProps, slideGroupLabel, images, zoomOutButtonProps, zoomInButtonProps, activeImageRef: propImageRef, ...forwardedProps } = props;
+	const currentPaginationItemRef = React.useRef(null);
+	const footerRef = React.useRef(null);
+	const imageRef = React.useRef(null);
+	const clickAwayChildrenRefs = React.useRef([imageRef, footerRef]);
+	const onClickAway = React.useCallback((evt) => {
+		const targetElement = evt.target;
+		if (!(targetElement instanceof HTMLElement) || !(evt instanceof MouseEvent)) return;
+		if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;
+		onClose?.();
+	}, [onClose]);
+	return /* @__PURE__ */ jsx(Lightbox, {
+		ref,
+		className: classNames.join(className, CLASSNAME),
+		parentElement,
+		isOpen,
+		onClose,
+		closeButtonProps,
+		focusElement: currentPaginationItemRef,
+		...forwardedProps,
+		preventAutoClose: true,
+		children: /* @__PURE__ */ jsx(ClickAwayProvider, {
+			childrenRefs: clickAwayChildrenRefs,
+			callback: onClickAway,
+			children: /* @__PURE__ */ jsx(ThemeProvider, {
+				value: "dark",
+				children: /* @__PURE__ */ jsx(ImageSlideshow, {
+					activeImageIndex,
+					slideGroupLabel,
+					slideshowControlsProps,
+					images,
+					zoomInButtonProps,
+					zoomOutButtonProps,
+					footerRef,
+					activeImageRef: useMergeRefs(propImageRef, imageRef),
+					currentPaginationItemRef
+				})
+			})
+		})
+	});
+});
+Inner.displayName = COMPONENT_NAME;
+Inner.className = CLASSNAME;
+/**
+* ImageLightbox component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var ImageLightbox = Object.assign(Inner, { useImageLightbox });
+//#endregion
+export { ImageLightbox };

package/_internal/components/image-lightbox/constants.js

@@ -0,0 +1,11 @@
+//#region src/components/image-lightbox/constants.ts
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "ImageLightbox";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-image-lightbox";
+//#endregion
+export { CLASSNAME, COMPONENT_NAME };

package/_internal/components/image-lightbox/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageLightboxProps } from "./types.js";
+import { ImageLightbox } from "./ImageLightbox.js";

package/_internal/components/image-lightbox/internal/ImageSlide.js

@@ -0,0 +1,81 @@
+import { useMergeRefs } from "../../../utils/react/mergeRefs.js";
+import { isReducedMotion } from "../../../utils/browser/isReducedMotion.js";
+import { CLASSNAME } from "../constants.js";
+import { useSizeOnWindowResize } from "../../../hooks/useSizeOnWindowResize.js";
+import { useImageSize } from "../../../hooks/useImageSize.js";
+import { isEqual } from "../../../utils/object/isEqual.js";
+import { usePointerZoom } from "./usePointerZoom.js";
+import { useAnimateScroll } from "./useAnimateScroll.js";
+import { SlideshowItem } from "../../slideshow/SlideshowItem.js";
+import { Thumbnail } from "../../thumbnail/Thumbnail.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/image-lightbox/internal/ImageSlide.tsx
+var { element } = classNames.bem(CLASSNAME);
+/** Internal image slide component for ImageLightbox */
+var ImageSlide = React.memo((props) => {
+	const { isActive, scale, onScaleChange, image: { image, imgRef: propImgRef, imgProps, alt, loadingPlaceholderImageRef } } = props;
+	const scrollAreaRef = React.useRef(null);
+	const [scrollAreaSize, updateSize] = useSizeOnWindowResize(scrollAreaRef);
+	React.useEffect(() => {
+		if (isActive) updateSize();
+	}, [isActive, updateSize]);
+	const imgRef = React.useRef(null);
+	const imageSize = useImageSize(imgRef, () => {
+		const width = Number.parseInt(imgProps?.width, 10);
+		const height = Number.parseInt(imgProps?.height, 10);
+		return width && height ? {
+			width,
+			height
+		} : null;
+	});
+	const scaledImageSize = React.useMemo(() => {
+		if (!scrollAreaSize || !imageSize) return null;
+		const horizontalScale = scrollAreaSize.width / imageSize.width;
+		const verticalScale = scrollAreaSize.height / imageSize.height;
+		const baseScale = Math.min(1, Math.min(horizontalScale, verticalScale));
+		return {
+			width: imageSize.width * baseScale * (scale ?? 1),
+			height: imageSize.height * baseScale * (scale ?? 1)
+		};
+	}, [
+		scrollAreaSize,
+		imageSize,
+		scale
+	]);
+	const animateScroll = useAnimateScroll(scrollAreaRef);
+	const isPointerZooming = usePointerZoom(scrollAreaRef, onScaleChange, animateScroll);
+	React.useLayoutEffect(() => {
+		if (scale && !isPointerZooming) animateScroll();
+	}, [
+		isPointerZooming,
+		scale,
+		animateScroll
+	]);
+	return /* @__PURE__ */ jsx(SlideshowItem, {
+		ref: scrollAreaRef,
+		tabIndex: scaledImageSize && scrollAreaSize && (scaledImageSize.width > scrollAreaSize.width || scaledImageSize.height > scrollAreaSize.height) ? 0 : void 0,
+		className: element("image-slide"),
+		children: /* @__PURE__ */ jsx(Thumbnail, {
+			imgRef: useMergeRefs(imgRef, propImgRef),
+			image,
+			alt,
+			className: element("thumbnail"),
+			imgProps: {
+				...imgProps,
+				style: {
+					...imgProps?.style,
+					...scaledImageSize || {
+						maxHeight: scrollAreaSize?.height,
+						maxWidth: scrollAreaSize?.width
+					},
+					transition: scale && !isPointerZooming && !isReducedMotion() ? "all 250ms" : void 0
+				}
+			},
+			loadingPlaceholderImageRef
+		})
+	});
+}, isEqual);
+//#endregion
+export { ImageSlide };

package/_internal/components/image-lightbox/internal/ImageSlideshow.js

@@ -0,0 +1,112 @@
+import { mergeRefs } from "../../../utils/react/mergeRefs.js";
+import { IconButton } from "../../button/IconButton.js";
+import { FlexBox } from "../../flex-box/FlexBox.js";
+import { ImageCaption } from "../../image-block/ImageCaption.js";
+import { CLASSNAME } from "../constants.js";
+import { ImageSlide } from "./ImageSlide.js";
+import { SlideshowControls } from "../../slideshow/SlideshowControls.js";
+import { Slides } from "../../slideshow/Slides.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import { mdiMagnifyMinusOutline } from "@lumx/icons/esm/magnify-minus-outline.js";
+import { mdiMagnifyPlusOutline } from "@lumx/icons/esm/magnify-plus-outline.js";
+import memoize from "lodash/memoize.js";
+//#region src/components/image-lightbox/internal/ImageSlideshow.tsx
+var { element } = classNames.bem(CLASSNAME);
+/** Internal image slideshow component for ImageLightbox */
+var ImageSlideshow = ({ activeImageIndex, images, slideGroupLabel, zoomInButtonProps, zoomOutButtonProps, slideshowControlsProps, currentPaginationItemRef, footerRef, activeImageRef }) => {
+	const { activeIndex, slideshowId, setSlideshow, slideshowSlidesId, slidesCount, onNextClick, onPaginationClick, onPreviousClick, toggleAutoPlay } = SlideshowControls.useSlideshowControls({
+		itemsCount: images.length,
+		activeIndex: activeImageIndex
+	});
+	const title = images[activeIndex]?.title;
+	const description = images[activeIndex]?.description;
+	const tags = images[activeIndex]?.tags;
+	const metadata = title || description || tags ? /* @__PURE__ */ jsx(ImageCaption, {
+		as: "div",
+		title,
+		description,
+		tags,
+		align: "center"
+	}) : null;
+	const slideShowControls = slidesCount > 1 && slideshowControlsProps ? /* @__PURE__ */ jsx(SlideshowControls, {
+		activeIndex,
+		slidesCount,
+		onNextClick,
+		onPreviousClick,
+		onPaginationClick,
+		...slideshowControlsProps,
+		paginationItemProps: (index) => {
+			const props = slideshowControlsProps?.paginationItemProps?.(index) || {};
+			return {
+				...props,
+				ref: mergeRefs(props?.ref, activeIndex === index ? currentPaginationItemRef : void 0)
+			};
+		}
+	}) : null;
+	const [scale, setScale] = React.useState(void 0);
+	const zoomEnabled = zoomInButtonProps && zoomOutButtonProps;
+	const onScaleChange = React.useMemo(() => {
+		if (!zoomEnabled) return void 0;
+		return (newScale) => {
+			setScale((prevScale = 1) => Math.max(1, newScale * prevScale));
+		};
+	}, [zoomEnabled]);
+	const zoomIn = React.useCallback(() => onScaleChange?.(1.5), [onScaleChange]);
+	const zoomOut = React.useCallback(() => onScaleChange?.(.5), [onScaleChange]);
+	React.useEffect(() => {
+		if (typeof activeIndex === "number") setScale(void 0);
+	}, [activeIndex]);
+	const zoomControls = zoomEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+		...zoomInButtonProps,
+		emphasis: "low",
+		icon: mdiMagnifyPlusOutline,
+		onClick: zoomIn
+	}), /* @__PURE__ */ jsx(IconButton, {
+		...zoomOutButtonProps,
+		emphasis: "low",
+		isDisabled: !scale || scale <= 1,
+		icon: mdiMagnifyMinusOutline,
+		onClick: zoomOut
+	})] });
+	const getImgRef = React.useMemo(() => memoize((index, isActive) => {
+		return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : void 0);
+	}, (...args) => args.join()), [images, activeImageRef]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Slides, {
+		activeIndex,
+		slideGroupLabel,
+		fillHeight: true,
+		id: slideshowId,
+		ref: setSlideshow,
+		slidesId: slideshowSlidesId,
+		toggleAutoPlay,
+		children: images.map(({ image, imgRef, ...imageProps }, index) => {
+			const isActive = index === activeIndex;
+			return /* @__PURE__ */ jsx(ImageSlide, {
+				isActive,
+				image: {
+					...imageProps,
+					image,
+					imgRef: getImgRef(index, isActive)
+				},
+				scale: isActive ? scale : void 0,
+				onScaleChange
+			}, image);
+		})
+	}), (metadata || slideShowControls || zoomControls) && /* @__PURE__ */ jsxs(FlexBox, {
+		ref: footerRef,
+		className: element("footer"),
+		orientation: "vertical",
+		vAlign: "center",
+		gap: "big",
+		children: [metadata, /* @__PURE__ */ jsxs(FlexBox, {
+			className: element("footer-actions"),
+			orientation: "horizontal",
+			gap: "regular",
+			children: [slideShowControls, zoomControls]
+		})]
+	})] });
+};
+//#endregion
+export { ImageSlideshow };