chop-logic-components 4.1.1 → 4.2.0

package/dist/components/atoms/image/Image.css

@@ -1 +1 @@
-.cl-image{object-fit:cover;border-radius:var(--cl-border-radius)}.cl-image__img{border-radius:var(--cl-border-radius);max-width:100%;height:auto}.cl-image__picture{object-fit:cover;border-radius:var(--cl-border-radius);display:block}.cl-image__fallback{flex-direction:column;justify-content:space-between;align-items:center;display:flex}.cl-image__fallback-icon{width:148px;height:148px}.cl-image__fallback-icon:before{font-size:6rem}.cl-image__fallback-text{text-align:center;padding-top:var(--cl-s-gap);color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}@media (width>=640px){.cl-image__fallback-text{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-image__fallback-text{font-size:var(--cl-typography-small-desktop)}}
+.cl-image{object-fit:cover;border-radius:var(--cl-border-radius)}.cl-image__img{border-radius:var(--cl-border-radius);max-width:100%;height:auto}.cl-image__picture{object-fit:cover;border-radius:var(--cl-border-radius);display:block}.cl-image__fallback{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.cl-image__fallback-icon{width:148px;height:148px}.cl-image__fallback-icon:before{font-size:6rem}.cl-image__fallback-text{text-align:center;padding-top:var(--cl-s-gap);color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}@media (width>=640px){.cl-image__fallback-text{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-image__fallback-text{font-size:var(--cl-typography-small-desktop)}}

package/dist/components/hocs/with-figure-caption/Figure.css

@@ -1 +1 @@
-.cl-figure{margin:0;display:block}.cl-figure__caption{text-align:center;padding-top:var(--cl-s-gap);color:var(--cl-base-font-color);font-size:var(--cl-typography-small-mobile)}@media (width>=640px){.cl-figure__caption{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-figure__caption{font-size:var(--cl-typography-small-desktop)}}
+.cl-figure{margin:0;display:block}.cl-figure__caption{text-align:center;font-family:var(--cl-core-font);padding-top:var(--cl-s-gap);color:var(--cl-base-font-color);font-size:var(--cl-typography-small-mobile)}@media (width>=640px){.cl-figure__caption{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-figure__caption{font-size:var(--cl-typography-small-desktop)}}

package/dist/components/organisms/gallery/Gallery.css

@@ -0,0 +1 @@
+.cl-gallery{position:relative}.cl-gallery__container{width:100%}.cl-gallery__container_grid{grid-template-columns:repeat(min(var(--gallery-columns), 2), 1fr);gap:var(--gallery-gap,var(--cl-m-gap));grid-auto-rows:1fr;display:grid}.cl-gallery__container_grid[style*=--gallery-rows]{grid-template-rows:repeat(var(--gallery-rows), 1fr);max-height:calc((100% / var(--gallery-columns)) * var(--gallery-rows) + var(--gallery-gap,var(--cl-m-gap)) * (var(--gallery-rows) - 1));overflow:hidden}.cl-gallery__container_grid .cl-gallery__item{width:100%;height:100%}.cl-gallery__container_grid .cl-gallery__item img{object-fit:cover;width:100%;height:100%}.cl-gallery__container_masonry{column-count:1;column-gap:var(--gallery-gap,var(--cl-m-gap))}.cl-gallery__container_masonry .cl-gallery__item{break-inside:avoid;margin-bottom:var(--gallery-gap,var(--cl-m-gap))}.cl-gallery__container_carousel{scroll-behavior:smooth;gap:var(--gallery-gap,var(--cl-m-gap));scrollbar-width:none;flex-wrap:nowrap;display:flex;overflow-x:scroll}.cl-gallery__container_carousel::-webkit-scrollbar{display:none}.cl-gallery__container_carousel .cl-gallery__item{flex-shrink:0}@media (width>=640px){.cl-gallery__container_grid{grid-template-columns:repeat(var(--gallery-columns), 1fr)}.cl-gallery__container_masonry{column-count:2}}@media (width>=1024px){.cl-gallery__container_masonry{column-count:var(--gallery-columns,3)}}

package/dist/components/organisms/gallery/Gallery.d.ts

@@ -0,0 +1,4 @@
+import { GalleryProps } from '../../../types';
+import { FC } from 'react';
+declare const Gallery: FC<GalleryProps>;
+export default Gallery;

package/dist/components/organisms/gallery/Gallery.helpers.d.ts

@@ -0,0 +1,3 @@
+import { GalleryItem, ImageProps, ImageSource } from '../../../types';
+export declare const getLargestImageSource: (sources: ImageSource[]) => ImageSource | undefined;
+export declare const getFullscreenImageProps: (image: GalleryItem) => Omit<ImageProps, "caption">;

package/dist/components/organisms/gallery/Gallery.helpers.js

@@ -0,0 +1,29 @@
+//#region src/components/organisms/gallery/Gallery.helpers.ts
+var e = (e) => {
+	if (e.length === 0) return;
+	let t, n = 0;
+	for (let r of e) {
+		let e = r.descriptor?.trim();
+		if (e && e.endsWith("w")) {
+			let i = e.slice(0, -1), a = Number.parseInt(i, 10);
+			!Number.isNaN(a) && a > n && (n = a, t = r);
+		}
+	}
+	return t ?? e.at(-1);
+}, t = (t) => {
+	let { caption: n, sources: r, ...i } = t;
+	if (r && r.length > 0) {
+		let t = e(r);
+		if (t) return {
+			...i,
+			src: t.src,
+			sources: void 0
+		};
+	}
+	return {
+		...i,
+		sources: r
+	};
+};
+//#endregion
+export { t as getFullscreenImageProps };

package/dist/components/organisms/gallery/Gallery2.js

@@ -0,0 +1,57 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import t from "./carousel-navigation/CarouselNavigation2.js";
+import n from "./full-screen-viewer/FullscreenViewer2.js";
+import './Gallery.css';/* empty css        */
+import r from "./gallery-image-item/GalleryImageItem2.js";
+import { useCarouselScroll as i } from "./hooks/use-carousel-scroll.js";
+import { useFullscreenViewer as a } from "./hooks/use-fullscreen-viewer.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRef as c } from "react";
+//#region src/components/organisms/gallery/Gallery.tsx
+var l = ({ images: l = [], layout: u = "grid", columns: d = 3, rows: f, gap: p, label: m, className: h, title: g, enableFullscreen: _ = !1, ...v }) => {
+	let y = c(null), { isViewerOpen: b, currentImageIndex: x, openViewer: S, closeViewer: C, handleNavigate: w } = a(), { showPrev: T, showNext: E, scrollForward: D, scrollBackward: O } = i(y, u), k = e(["cl-gallery", h]), A = e([
+		"cl-gallery__container",
+		{ "cl-gallery__container_grid": u === "grid" },
+		{ "cl-gallery__container_masonry": u === "masonry" },
+		{ "cl-gallery__container_carousel": u === "carousel" }
+	]), j = {
+		"--gallery-columns": d,
+		"--gallery-rows": f,
+		"--gallery-gap": p
+	};
+	return /* @__PURE__ */ s("section", {
+		className: k,
+		"aria-label": m ?? g ?? "Image gallery",
+		title: g,
+		...v,
+		children: [
+			/* @__PURE__ */ o("div", {
+				ref: y,
+				className: A,
+				style: j,
+				tabIndex: u === "carousel" ? 0 : void 0,
+				children: l.map((e, t) => /* @__PURE__ */ o(r, {
+					item: e,
+					index: t,
+					enableFullscreen: _,
+					onOpenViewer: S
+				}, e.src))
+			}),
+			u === "carousel" && /* @__PURE__ */ o(t, {
+				showPrev: T,
+				showNext: E,
+				onScrollBackward: O,
+				onScrollForward: D
+			}),
+			_ && /* @__PURE__ */ o(n, {
+				images: l,
+				currentIndex: x,
+				isOpen: b,
+				onClose: C,
+				onNavigate: w
+			})
+		]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/organisms/gallery/carousel-navigation/CarouselNavigation.css

@@ -0,0 +1 @@
+.cl-gallery__button{height:100%;position:absolute;top:0}.cl-gallery__button_prev{left:var(--cl-l-gap)}.cl-gallery__button_next{right:var(--cl-l-gap)}.cl-gallery__button_prev .cl-icon-button__icon:before,.cl-gallery__button_next .cl-icon-button__icon:before{color:#fff!important}

package/dist/components/organisms/gallery/carousel-navigation/CarouselNavigation.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface CarouselNavigationProps {
+    showPrev: boolean;
+    showNext: boolean;
+    onScrollBackward: () => void;
+    onScrollForward: () => void;
+}
+declare const CarouselNavigation: FC<CarouselNavigationProps>;
+export default CarouselNavigation;

package/dist/components/organisms/gallery/carousel-navigation/CarouselNavigation2.js

@@ -0,0 +1,25 @@
+import { ButtonView as e } from "../../../../enums/button-view.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import n from "../../../atoms/button/Button2.js";
+import './CarouselNavigation.css';/* empty css                   */
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/carousel-navigation/CarouselNavigation.tsx
+var o = ({ showPrev: o, showNext: s, onScrollBackward: c, onScrollForward: l }) => /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(n, {
+	view: e.Icon,
+	icon: t.ChevronLeft,
+	label: "Previous images",
+	className: "cl-gallery__button cl-gallery__button_prev",
+	onClick: c,
+	style: { visibility: o ? "visible" : "hidden" },
+	"aria-hidden": !o
+}), /* @__PURE__ */ i(n, {
+	view: e.Icon,
+	icon: t.ChevronRight,
+	label: "Next images",
+	className: "cl-gallery__button cl-gallery__button_next",
+	onClick: l,
+	style: { visibility: s ? "visible" : "hidden" },
+	"aria-hidden": !s
+})] });
+//#endregion
+export { o as default };

package/dist/components/organisms/gallery/full-screen-viewer/FullscreenViewer.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer{width:100%;height:100%;z-index:var(--cl-z-index-modal);background-color:var(--cl-shadow-background-deep);justify-content:center;align-items:center;animation:.4s cl-fade-in;display:flex;position:fixed;top:0;left:0}.cl-fullscreen-viewer_closing{animation:.4s cl-fade-out}

package/dist/components/organisms/gallery/full-screen-viewer/FullscreenViewer.d.ts

@@ -0,0 +1,11 @@
+import { GalleryItem } from '../../../../types';
+import { FC } from 'react';
+interface FullscreenViewerProps {
+    images: GalleryItem[];
+    currentIndex: number;
+    isOpen: boolean;
+    onClose: () => void;
+    onNavigate: (index: number) => void;
+}
+declare const FullscreenViewer: FC<FullscreenViewerProps>;
+export default FullscreenViewer;

package/dist/components/organisms/gallery/full-screen-viewer/FullscreenViewer2.js

@@ -0,0 +1,48 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import t from "../../../atoms/portal/Portal.js";
+import { useIsMounted as n } from "../../../../hooks/use-is-mounted/use-is-mounted.js";
+import { useKeyPress as r } from "../../../../hooks/use-key-press/use-key-press.js";
+import { useModalFocusTrap as i } from "../../../../hooks/use-modal-focus-trap/use-modal-focus-trap.js";
+import './FullscreenViewer.css';/* empty css                 */
+import { getFullscreenImageProps as a } from "../Gallery.helpers.js";
+import o from "../viewer-close-button/ViewerCloseButton2.js";
+import s from "../viewer-overlay/ViewerOverlay2.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useEffect as u, useMemo as d, useRef as f } from "react";
+//#region src/components/organisms/gallery/full-screen-viewer/FullscreenViewer.tsx
+var p = ({ images: p, currentIndex: m, isOpen: h, onClose: g, onNavigate: _ }) => {
+	let v = f(null), y = n(h, 300), b = y && !h;
+	i({
+		modalRef: v,
+		isOpened: h
+	}), r({
+		keyCode: "Escape",
+		ref: v,
+		onKeyPress: g
+	}), u(() => {
+		let e = (e) => {
+			e.code === "ArrowLeft" && m > 0 ? _(m - 1) : e.code === "ArrowRight" && m < p.length - 1 && _(m + 1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		m,
+		p.length,
+		_
+	]);
+	let x = p[m], S = d(() => x ? a(x) : null, [x]);
+	return !y || !x || !S ? null : /* @__PURE__ */ c(t, { children: /* @__PURE__ */ l("div", {
+		ref: v,
+		className: e(["cl-fullscreen-viewer", { "cl-fullscreen-viewer_closing": b }]),
+		"data-testid": "fullscreen-image-viewer",
+		children: [/* @__PURE__ */ c(o, { onClose: g }), /* @__PURE__ */ c(s, {
+			fullscreenImageProps: S,
+			caption: x.caption,
+			currentIndex: m,
+			totalImages: p.length,
+			onClose: g,
+			onNavigate: _
+		})]
+	}) });
+};
+//#endregion
+export { p as default };

package/dist/components/organisms/gallery/gallery-image-item/GalleryImageItem.css

@@ -0,0 +1 @@
+.cl-gallery__item{overflow:hidden}.cl-gallery__item_fullscreen{cursor:pointer}

package/dist/components/organisms/gallery/gallery-image-item/GalleryImageItem.d.ts

@@ -0,0 +1,10 @@
+import { GalleryItem } from '../../../../types';
+import { FC } from 'react';
+interface GalleryImageItemProps {
+    item: GalleryItem;
+    index: number;
+    enableFullscreen: boolean;
+    onOpenViewer?: (index: number, element: HTMLElement) => void;
+}
+declare const GalleryImageItem: FC<GalleryImageItemProps>;
+export default GalleryImageItem;

package/dist/components/organisms/gallery/gallery-image-item/GalleryImageItem2.js

@@ -0,0 +1,17 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import t from "../../../atoms/image/Image2.js";
+import './GalleryImageItem.css';/* empty css                 */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/gallery-image-item/GalleryImageItem.tsx
+var r = ({ item: r, index: i, enableFullscreen: a, onOpenViewer: o }) => /* @__PURE__ */ n("div", {
+	className: e(["cl-gallery__item", { "cl-gallery__item_fullscreen": a }]),
+	onClick: (e) => {
+		a && o && o(i, e.currentTarget);
+	},
+	onKeyDown: (e) => {
+		a && o && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(i, e.currentTarget));
+	},
+	children: /* @__PURE__ */ n(t, { ...r })
+});
+//#endregion
+export { r as default };

package/dist/components/organisms/gallery/hooks/use-carousel-scroll.d.ts

@@ -0,0 +1,10 @@
+import { GalleryMode } from '../../../../types';
+import { RefObject } from 'react';
+interface CarouselScrollState {
+    showPrev: boolean;
+    showNext: boolean;
+    scrollForward: () => void;
+    scrollBackward: () => void;
+}
+export declare const useCarouselScroll: (containerRef: RefObject<HTMLDivElement | null>, layout: GalleryMode) => CarouselScrollState;
+export {};

package/dist/components/organisms/gallery/hooks/use-carousel-scroll.js

@@ -0,0 +1,50 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+//#region src/components/organisms/gallery/hooks/use-carousel-scroll.ts
+var r = (r, i) => {
+	let [a, o] = n(!1), [s, c] = n(!1), l = e(() => {
+		let e = r.current;
+		if (!e) return;
+		let { scrollLeft: t, scrollWidth: n, clientWidth: i } = e;
+		if (n <= i) {
+			o(!1), c(!1);
+			return;
+		}
+		o(t > 1), c(t < n - i - 1);
+	}, [r]);
+	return t(() => {
+		if (i !== "carousel") {
+			o(!1), c(!1);
+			return;
+		}
+		let e = r.current;
+		if (!e) return;
+		l();
+		let t = new ResizeObserver(l);
+		return t.observe(e), e.addEventListener("scroll", l), () => {
+			e.removeEventListener("scroll", l), t.disconnect();
+		};
+	}, [
+		i,
+		r,
+		l
+	]), {
+		showPrev: a,
+		showNext: s,
+		scrollForward: e(() => {
+			let e = r.current;
+			e && e.scrollBy({
+				left: e.clientWidth,
+				behavior: "smooth"
+			});
+		}, [r]),
+		scrollBackward: e(() => {
+			let e = r.current;
+			e && e.scrollBy({
+				left: -e.clientWidth,
+				behavior: "smooth"
+			});
+		}, [r])
+	};
+};
+//#endregion
+export { r as useCarouselScroll };

package/dist/components/organisms/gallery/hooks/use-fullscreen-viewer.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+interface FullscreenViewerState {
+    isViewerOpen: boolean;
+    currentImageIndex: number;
+    triggerRef: RefObject<HTMLElement | null>;
+    openViewer: (index: number, element: HTMLElement) => void;
+    closeViewer: () => void;
+    handleNavigate: (index: number) => void;
+}
+export declare const useFullscreenViewer: () => FullscreenViewerState;
+export {};

package/dist/components/organisms/gallery/hooks/use-fullscreen-viewer.js

@@ -0,0 +1,23 @@
+import { useCallback as e, useRef as t, useState as n } from "react";
+//#region src/components/organisms/gallery/hooks/use-fullscreen-viewer.ts
+var r = () => {
+	let [r, i] = n(!1), [a, o] = n(0), s = t(null);
+	return {
+		isViewerOpen: r,
+		currentImageIndex: a,
+		triggerRef: s,
+		openViewer: e((e, t) => {
+			s.current = t, o(e), i(!0);
+		}, []),
+		closeViewer: e(() => {
+			i(!1), setTimeout(() => {
+				s.current?.focus(), s.current = null;
+			}, 300);
+		}, []),
+		handleNavigate: e((e) => {
+			o(e);
+		}, [])
+	};
+};
+//#endregion
+export { r as useFullscreenViewer };

package/dist/components/organisms/gallery/viewer-close-button/ViewerCloseButton.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__close-button{top:var(--cl-m-gap);right:var(--cl-m-gap);z-index:var(--cl-z-index-menu);position:absolute}.cl-fullscreen-viewer__close-button .cl-icon-button__icon:before{color:#fff!important}@media (width>=640px){.cl-fullscreen-viewer__close-button{top:var(--cl-l-gap);right:var(--cl-l-gap)}}

package/dist/components/organisms/gallery/viewer-close-button/ViewerCloseButton.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export interface ViewerCloseButtonProps {
+    onClose: () => void;
+}
+declare const ViewerCloseButton: FC<ViewerCloseButtonProps>;
+export default ViewerCloseButton;

package/dist/components/organisms/gallery/viewer-close-button/ViewerCloseButton2.js

@@ -0,0 +1,15 @@
+import { ButtonView as e } from "../../../../enums/button-view.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import n from "../../../atoms/button/Button2.js";
+import './ViewerCloseButton.css';/* empty css                  */
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-close-button/ViewerCloseButton.tsx
+var i = ({ onClose: i }) => /* @__PURE__ */ r(n, {
+	view: e.Icon,
+	icon: t.X,
+	label: "Close fullscreen view",
+	onClick: i,
+	className: "cl-fullscreen-viewer__close-button"
+});
+//#endregion
+export { i as default };

package/dist/components/organisms/gallery/viewer-counter/ViewerCounter.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__counter{bottom:var(--cl-l-gap);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);position:absolute;left:50%;color:#fff!important}@media (width>=640px){.cl-fullscreen-viewer__counter{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-fullscreen-viewer__counter{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/organisms/gallery/viewer-counter/ViewerCounter.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface ViewerCounterProps {
+    currentIndex: number;
+    totalImages: number;
+}
+declare const ViewerCounter: FC<ViewerCounterProps>;
+export default ViewerCounter;

package/dist/components/organisms/gallery/viewer-counter/ViewerCounter2.js

@@ -0,0 +1,14 @@
+import './ViewerCounter.css';/* empty css              */
+import { jsxs as e } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-counter/ViewerCounter.tsx
+var t = ({ currentIndex: t, totalImages: n }) => n <= 1 ? null : /* @__PURE__ */ e("span", {
+	className: "cl-fullscreen-viewer__counter",
+	"aria-live": "polite",
+	children: [
+		t + 1,
+		" / ",
+		n
+	]
+});
+//#endregion
+export { t as default };

package/dist/components/organisms/gallery/viewer-image-container/ViewerImageContainer.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__image-container{flex-direction:column;align-items:center;max-width:90vw;max-height:90vh;display:flex}.cl-fullscreen-viewer__image-container .cl-image{min-height:0;display:flex}.cl-fullscreen-viewer__image-container .cl-figure{flex-direction:column;min-height:0;display:flex}.cl-fullscreen-viewer__image-container figcaption{color:#fff!important}@media (width>=640px){.cl-fullscreen-viewer__caption{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-fullscreen-viewer__caption{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/organisms/gallery/viewer-image-container/ViewerImageContainer.d.ts

@@ -0,0 +1,8 @@
+import { GalleryItem, ImageProps } from '../../../../types';
+import { FC } from 'react';
+interface ViewerImageContainerProps {
+    fullscreenImageProps: Omit<ImageProps, 'caption'>;
+    caption?: GalleryItem['caption'];
+}
+declare const ViewerImageContainer: FC<ViewerImageContainerProps>;
+export default ViewerImageContainer;

package/dist/components/organisms/gallery/viewer-image-container/ViewerImageContainer2.js

@@ -0,0 +1,14 @@
+import e from "../../../atoms/image/Image2.js";
+import './ViewerImageContainer.css';/* empty css                     */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-image-container/ViewerImageContainer.tsx
+var n = ({ fullscreenImageProps: n, caption: r }) => /* @__PURE__ */ t("div", {
+	className: "cl-fullscreen-viewer__image-container",
+	children: /* @__PURE__ */ t(e, {
+		...n,
+		caption: r,
+		loading: "eager"
+	})
+});
+//#endregion
+export { n as default };

package/dist/components/organisms/gallery/viewer-navigation/ViewerNavigation.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__nav-button{height:90%;z-index:var(--cl-z-index-base);position:absolute;top:5%}.cl-fullscreen-viewer__nav-button .cl-icon-button__icon:before{color:#fff!important}.cl-fullscreen-viewer__nav-button_prev{left:var(--cl-l-gap)}.cl-fullscreen-viewer__nav-button_next{right:var(--cl-l-gap)}

package/dist/components/organisms/gallery/viewer-navigation/ViewerNavigation.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface ViewerNavigationProps {
+    currentIndex: number;
+    totalImages: number;
+    onNavigate: (index: number) => void;
+}
+declare const ViewerNavigation: FC<ViewerNavigationProps>;
+export default ViewerNavigation;

package/dist/components/organisms/gallery/viewer-navigation/ViewerNavigation2.js

@@ -0,0 +1,29 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ButtonView as t } from "../../../../enums/button-view.js";
+import { IconName as n } from "../../../../enums/icon-name.js";
+import r from "../../../atoms/button/Button2.js";
+import './ViewerNavigation.css';/* empty css                 */
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-navigation/ViewerNavigation.tsx
+var s = ({ currentIndex: s, totalImages: c, onNavigate: l }) => {
+	let u = s > 0, d = s < c - 1, f = () => {
+		l(s - 1);
+	}, p = () => {
+		l(s + 1);
+	}, m = e(["cl-fullscreen-viewer__nav-button", "cl-fullscreen-viewer__nav-button_prev"]), h = e(["cl-fullscreen-viewer__nav-button", "cl-fullscreen-viewer__nav-button_next"]);
+	return /* @__PURE__ */ o(i, { children: [u && /* @__PURE__ */ a(r, {
+		view: t.Icon,
+		icon: n.ChevronLeft,
+		label: "Previous image",
+		onClick: f,
+		className: m
+	}), d && /* @__PURE__ */ a(r, {
+		view: t.Icon,
+		icon: n.ChevronRight,
+		label: "Next image",
+		onClick: p,
+		className: h
+	})] });
+};
+//#endregion
+export { s as default };

package/dist/components/organisms/gallery/viewer-overlay/ViewerOverlay.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__overlay{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}

package/dist/components/organisms/gallery/viewer-overlay/ViewerOverlay.d.ts

@@ -0,0 +1,12 @@
+import { GalleryItem, ImageProps } from '../../../../types';
+import { FC } from 'react';
+export interface ViewerOverlayProps {
+    fullscreenImageProps: Omit<ImageProps, 'caption'>;
+    caption?: GalleryItem['caption'];
+    currentIndex: number;
+    totalImages: number;
+    onClose: () => void;
+    onNavigate: (index: number) => void;
+}
+declare const ViewerOverlay: FC<ViewerOverlayProps>;
+export default ViewerOverlay;

package/dist/components/organisms/gallery/viewer-overlay/ViewerOverlay2.js

@@ -0,0 +1,33 @@
+import e from "../viewer-counter/ViewerCounter2.js";
+import t from "../viewer-image-container/ViewerImageContainer2.js";
+import n from "../viewer-navigation/ViewerNavigation2.js";
+import './ViewerOverlay.css';/* empty css              */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-overlay/ViewerOverlay.tsx
+var a = ({ fullscreenImageProps: a, caption: o, currentIndex: s, totalImages: c, onClose: l, onNavigate: u }) => /* @__PURE__ */ i("div", {
+	className: "cl-fullscreen-viewer__overlay",
+	onClick: (e) => {
+		e.target === e.currentTarget && l();
+	},
+	onKeyDown: (e) => {
+		(e.key === "Enter" || e.key === " ") && e.target === e.currentTarget && (e.preventDefault(), l());
+	},
+	"data-testid": "viewer-overlay",
+	children: [
+		/* @__PURE__ */ r(t, {
+			fullscreenImageProps: a,
+			caption: o
+		}),
+		/* @__PURE__ */ r(e, {
+			currentIndex: s,
+			totalImages: c
+		}),
+		/* @__PURE__ */ r(n, {
+			currentIndex: s,
+			totalImages: c,
+			onNavigate: u
+		})
+	]
+});
+//#endregion
+export { a as default };

package/dist/components/organisms/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Dialog } from './dialog/Dialog';
 export { default as Form } from './form/Form';
+export { default as Gallery } from './gallery/Gallery';
 export { default as Grid } from './grid/Grid';
 export { default as Menu } from './menu/Menu';
 export { default as Tabs } from './tabs/Tabs';

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from './main'
+export * from './main.js'
 export {}

package/dist/index.es.js

@@ -50,7 +50,8 @@ import X from "./components/molecules/switch/Switch2.js";
 import Z from "./components/molecules/text-input/TextInput2.js";
 import Q from "./components/organisms/dialog/Dialog2.js";
 import $ from "./components/organisms/form/Form2.js";
-import ee from "./components/organisms/grid/Grid2.js";
-import te from "./components/organisms/menu/Menu2.js";
-import ne from "./components/organisms/tabs/Tabs2.js";
-export { H as Accordion, U as Alert, t as AlertMode, W as Breadcrumbs, l as Button, n as ButtonView, N as CL_DARK_THEME_CLASS, P as CL_LIGHT_THEME_CLASS, G as Checkbox, Q as Dialog, u as EditableText, r as ElementSize, d as ErrorMessage, $ as Form, M as FormContext, ee as Grid, f as Header, p as Icon, i as IconName, g as Image, _ as Input, v as Label, y as Link, a as LoaderView, te as Menu, K as MultiSelect, q as NumericInput, o as OrientationMode, b as Portal, J as Search, Y as Select, s as SemanticColor, X as Switch, ne as Tabs, Z as TextInput, F as ThemeContext, I as ThemeProvider, V as Tooltip, c as TooltipContainer, x as useAutoClose, S as useClickOutside, C as useContainerDimensions, w as useDebounce, T as useElementIds, E as useIsHovered, D as useIsMounted, O as useIsOverflow, k as useKeyPress, A as useModalFocusTrap, j as useRemainingTimer, L as useResetFormInput, R as useTheme, z as useTooltipPosition, B as useWindowDimensions, m as withErrorBoundary, h as withFigureCaption, e as withTooltip };
+import ee from "./components/organisms/gallery/Gallery2.js";
+import te from "./components/organisms/grid/Grid2.js";
+import ne from "./components/organisms/menu/Menu2.js";
+import re from "./components/organisms/tabs/Tabs2.js";
+export { H as Accordion, U as Alert, t as AlertMode, W as Breadcrumbs, l as Button, n as ButtonView, N as CL_DARK_THEME_CLASS, P as CL_LIGHT_THEME_CLASS, G as Checkbox, Q as Dialog, u as EditableText, r as ElementSize, d as ErrorMessage, $ as Form, M as FormContext, ee as Gallery, te as Grid, f as Header, p as Icon, i as IconName, g as Image, _ as Input, v as Label, y as Link, a as LoaderView, ne as Menu, K as MultiSelect, q as NumericInput, o as OrientationMode, b as Portal, J as Search, Y as Select, s as SemanticColor, X as Switch, re as Tabs, Z as TextInput, F as ThemeContext, I as ThemeProvider, V as Tooltip, c as TooltipContainer, x as useAutoClose, S as useClickOutside, C as useContainerDimensions, w as useDebounce, T as useElementIds, E as useIsHovered, D as useIsMounted, O as useIsOverflow, k as useKeyPress, A as useModalFocusTrap, j as useRemainingTimer, L as useResetFormInput, R as useTheme, z as useTooltipPosition, B as useWindowDimensions, m as withErrorBoundary, h as withFigureCaption, e as withTooltip };

package/dist/styles/main.css

@@ -1 +1 @@
-:root{--cl-core-font:Arial, Helvetica, sans-serif;--cl-monospace-font:"Courier New", Courier, monospace;--cl-fancy-font:Georgia, "Times New Roman", Times, serif;--cl-xs-gap:2px;--cl-s-gap:4px;--cl-m-gap:8px;--cl-l-gap:16px;--cl-xl-gap:32px;--cl-xxl-gap:64px;--cl-icon-size:20px;--cl-thumb-size:24px;--cl-border-radius:4px;--cl-z-index-base:1;--cl-z-index-menu:5;--cl-z-index-popup:10;--cl-z-index-modal:20;--cl-typography-h1-mobile:2.25rem;--cl-typography-h1-tablet:2.5rem;--cl-typography-h1-desktop:3rem;--cl-typography-h2-mobile:2rem;--cl-typography-h2-tablet:2.25rem;--cl-typography-h2-desktop:2.5rem;--cl-typography-h3-mobile:1.75rem;--cl-typography-h3-tablet:2rem;--cl-typography-h3-desktop:2.25rem;--cl-typography-h4-mobile:1.5rem;--cl-typography-h4-tablet:1.75rem;--cl-typography-h4-desktop:2rem;--cl-typography-h5-mobile:1.25rem;--cl-typography-h5-tablet:1.5rem;--cl-typography-h5-desktop:1.75rem;--cl-typography-h6-mobile:1rem;--cl-typography-h6-tablet:1.125rem;--cl-typography-h6-desktop:1.25rem;--cl-typography-base-mobile:1rem;--cl-typography-base-tablet:1.125rem;--cl-typography-base-desktop:1.25rem;--cl-typography-small-mobile:.875rem;--cl-typography-small-tablet:1rem;--cl-typography-small-desktop:1.125rem;--cl-breakpoint-sm:640px;--cl-breakpoint-md:768px;--cl-breakpoint-lg:1024px;--cl-breakpoint-xl:1280px;--cl-breakpoint-xxl:1536px;--cl-base-font-color:#000;--cl-base-background-color:#fff;--cl-accent-a0:#8d1c12;--cl-accent-a10:#7d1c11;--cl-accent-a20:#6d1b10;--cl-accent-a30:#5e190f;--cl-surface-a0:#fff;--cl-surface-a10:#f0f0f0;--cl-surface-a20:#e1e1e1;--cl-surface-a30:#d3d3d3;--cl-surface-tonal-a0:#f7e8e4;--cl-surface-tonal-a10:#e9dcd8;--cl-surface-tonal-a20:#dbd0cd;--cl-surface-tonal-a30:#cec4c2;--cl-success-a0:#1b7f5c;--cl-success-a10:#28be8a;--cl-success-a20:#58dbad;--cl-warning-a0:#b8871f;--cl-warning-a10:#dfae44;--cl-warning-a20:#ebca85;--cl-danger-a0:#b13535;--cl-danger-a10:#d06262;--cl-danger-a20:#e29d9d;--cl-info-a0:#1e56a3;--cl-info-a10:#347ada;--cl-info-a20:#74a4e6;--cl-accent-gradient:linear-gradient(135deg, #8d1c12 0%, #7d1c11 50%, #6d1b10 100%);--cl-box-shadow:#0003 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#0003 4.8px 4.8px 6.4px;--cl-text-shadow:2.4px 2.4px 3.2px #00000026;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #00000026);--cl-shadow-background:#0000004d;--cl-accent-border:1px solid #8d1c12;--cl-danger-border:1px solid #d06262;--cl-success-border:1px solid #28be8a;--cl-warning-border:1px solid #dfae44;--cl-info-border:1px solid #347ada;--cl-light-border:1px solid #c0b8b6;--cl-outline-border:1px solid #000}.cl-components-dark-theme{--cl-base-background-color:#000;--cl-base-font-color:#fff;--cl-accent-a0:#eb5cbe;--cl-accent-a10:#ef71c5;--cl-accent-a20:#f385cc;--cl-accent-a30:#f697d4;--cl-surface-a0:#121212;--cl-surface-a10:#282828;--cl-surface-a20:#3f3f3f;--cl-surface-a30:#575757;--cl-surface-tonal-a0:#251a21;--cl-surface-tonal-a10:#3a2f36;--cl-surface-tonal-a20:#4f464c;--cl-surface-tonal-a30:#665d63;--cl-success-a0:#9ae8ce;--cl-success-a10:#47d5a6;--cl-success-a20:#22946e;--cl-warning-a0:#a87a2a;--cl-warning-a10:#d7ac61;--cl-warning-a20:#ecd7b2;--cl-danger-a0:#eb9e9e;--cl-danger-a10:#d94a4a;--cl-danger-a20:#9c2121;--cl-info-a0:#92b2e5;--cl-info-a10:#4077d1;--cl-info-a20:#21498a;--cl-accent-gradient:linear-gradient(135deg, #eb5cbe 0%, #ef71c5 50%, #f385cc 100%);--cl-box-shadow:#ffffff4d 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#ffffff4d 4px 4px 5px;--cl-text-shadow:2.4px 2.4px 3.2px #ffffff80;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #ffffff4d);--cl-shadow-background:#ffffff4d;--cl-accent-border:1px solid #eb5cbe;--cl-danger-border:1px solid #d94a4a;--cl-success-border:1px solid #47d5a6;--cl-warning-border:1px solid #d7ac61;--cl-info-border:1px solid #4077d1;--cl-light-border:1px solid #665d63;--cl-outline-border:1px solid #fff}@keyframes cl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cl-fade-out{0%{opacity:1}to{opacity:0}}.cl-fade-in{animation:.4s cl-fade-in}.cl-fade-out{animation:.4s cl-fade-out}
+:root{--cl-core-font:Arial, Helvetica, sans-serif;--cl-monospace-font:"Courier New", Courier, monospace;--cl-fancy-font:Georgia, "Times New Roman", Times, serif;--cl-xs-gap:2px;--cl-s-gap:4px;--cl-m-gap:8px;--cl-l-gap:16px;--cl-xl-gap:32px;--cl-xxl-gap:64px;--cl-icon-size:20px;--cl-thumb-size:24px;--cl-border-radius:4px;--cl-z-index-base:1;--cl-z-index-menu:5;--cl-z-index-popup:10;--cl-z-index-modal:20;--cl-typography-h1-mobile:2.25rem;--cl-typography-h1-tablet:2.5rem;--cl-typography-h1-desktop:3rem;--cl-typography-h2-mobile:2rem;--cl-typography-h2-tablet:2.25rem;--cl-typography-h2-desktop:2.5rem;--cl-typography-h3-mobile:1.75rem;--cl-typography-h3-tablet:2rem;--cl-typography-h3-desktop:2.25rem;--cl-typography-h4-mobile:1.5rem;--cl-typography-h4-tablet:1.75rem;--cl-typography-h4-desktop:2rem;--cl-typography-h5-mobile:1.25rem;--cl-typography-h5-tablet:1.5rem;--cl-typography-h5-desktop:1.75rem;--cl-typography-h6-mobile:1rem;--cl-typography-h6-tablet:1.125rem;--cl-typography-h6-desktop:1.25rem;--cl-typography-base-mobile:1rem;--cl-typography-base-tablet:1.125rem;--cl-typography-base-desktop:1.25rem;--cl-typography-small-mobile:.875rem;--cl-typography-small-tablet:1rem;--cl-typography-small-desktop:1.125rem;--cl-breakpoint-sm:640px;--cl-breakpoint-md:768px;--cl-breakpoint-lg:1024px;--cl-breakpoint-xl:1280px;--cl-breakpoint-xxl:1536px;--cl-base-font-color:#000;--cl-base-background-color:#fff;--cl-accent-a0:#8d1c12;--cl-accent-a10:#7d1c11;--cl-accent-a20:#6d1b10;--cl-accent-a30:#5e190f;--cl-surface-a0:#fff;--cl-surface-a10:#f0f0f0;--cl-surface-a20:#e1e1e1;--cl-surface-a30:#d3d3d3;--cl-surface-tonal-a0:#f7e8e4;--cl-surface-tonal-a10:#e9dcd8;--cl-surface-tonal-a20:#dbd0cd;--cl-surface-tonal-a30:#cec4c2;--cl-success-a0:#1b7f5c;--cl-success-a10:#28be8a;--cl-success-a20:#58dbad;--cl-warning-a0:#b8871f;--cl-warning-a10:#dfae44;--cl-warning-a20:#ebca85;--cl-danger-a0:#b13535;--cl-danger-a10:#d06262;--cl-danger-a20:#e29d9d;--cl-info-a0:#1e56a3;--cl-info-a10:#347ada;--cl-info-a20:#74a4e6;--cl-accent-gradient:linear-gradient(135deg, #8d1c12 0%, #7d1c11 50%, #6d1b10 100%);--cl-box-shadow:#0003 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#0003 4.8px 4.8px 6.4px;--cl-text-shadow:2.4px 2.4px 3.2px #00000026;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #00000026);--cl-shadow-background:#0000004d;--cl-shadow-background-deep:#000000e6;--cl-accent-border:1px solid #8d1c12;--cl-danger-border:1px solid #d06262;--cl-success-border:1px solid #28be8a;--cl-warning-border:1px solid #dfae44;--cl-info-border:1px solid #347ada;--cl-light-border:1px solid #c0b8b6;--cl-outline-border:1px solid #000}.cl-components-dark-theme{--cl-base-background-color:#000;--cl-base-font-color:#fff;--cl-accent-a0:#eb5cbe;--cl-accent-a10:#ef71c5;--cl-accent-a20:#f385cc;--cl-accent-a30:#f697d4;--cl-surface-a0:#121212;--cl-surface-a10:#282828;--cl-surface-a20:#3f3f3f;--cl-surface-a30:#575757;--cl-surface-tonal-a0:#251a21;--cl-surface-tonal-a10:#3a2f36;--cl-surface-tonal-a20:#4f464c;--cl-surface-tonal-a30:#665d63;--cl-success-a0:#9ae8ce;--cl-success-a10:#47d5a6;--cl-success-a20:#22946e;--cl-warning-a0:#a87a2a;--cl-warning-a10:#d7ac61;--cl-warning-a20:#ecd7b2;--cl-danger-a0:#eb9e9e;--cl-danger-a10:#d94a4a;--cl-danger-a20:#9c2121;--cl-info-a0:#92b2e5;--cl-info-a10:#4077d1;--cl-info-a20:#21498a;--cl-accent-gradient:linear-gradient(135deg, #eb5cbe 0%, #ef71c5 50%, #f385cc 100%);--cl-box-shadow:#ffffff4d 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#ffffff4d 4px 4px 5px;--cl-text-shadow:2.4px 2.4px 3.2px #ffffff80;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #ffffff4d);--cl-shadow-background:#ffffff4d;--cl-shadow-background-deep:#000000e6;--cl-accent-border:1px solid #eb5cbe;--cl-danger-border:1px solid #d94a4a;--cl-success-border:1px solid #47d5a6;--cl-warning-border:1px solid #d7ac61;--cl-info-border:1px solid #4077d1;--cl-light-border:1px solid #665d63;--cl-outline-border:1px solid #fff}@keyframes cl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cl-fade-out{0%{opacity:1}to{opacity:0}}.cl-fade-in{animation:.4s cl-fade-in}.cl-fade-out{animation:.4s cl-fade-out}

package/dist/types/gallery.d.ts

@@ -0,0 +1,13 @@
+import { ChopLogicComponentProps } from './_common';
+import { ImageProps } from './image';
+export type GalleryItem = ImageProps;
+export type GalleryMode = 'grid' | 'masonry' | 'carousel';
+export interface GalleryProps extends ChopLogicComponentProps {
+    images?: GalleryItem[];
+    layout?: GalleryMode;
+    columns?: number;
+    rows?: number;
+    gap?: string;
+    label?: string;
+    enableFullscreen?: boolean;
+}

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export type { CheckboxProps } from './checkbox';
 export type { DialogProps } from './dialog';
 export type { EditableTextProps } from './editable-text';
 export type { FormInputParams, FormProps, FormValidationState, FormValues } from './form';
+export type { GalleryItem, GalleryMode, GalleryProps } from './gallery';
 export type { GridColumn, GridItem, GridProps, GridRowValue, RenderDataItemCallback } from './grid';
 export type { HeaderProps } from './header';
 export type { ImageProps, ImageSource } from './image';

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/ChopLogic/chop-logic-components.git"
   },
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "Reusable React components and hooks for the Chop Logic project",
   "type": "module",
   "module": "dist/index.es.js",
@@ -83,7 +83,7 @@
     "lint:warnings": "biome check --diagnostic-level warn --max-diagnostics 100",
     "lint:fix": "biome check --write",
     "typecheck": "tsc --pretty --noEmit",
-    "test": "vitest",
+    "test": "vitest --watch",
     "test:ci": "vitest run --passWithNoTests",
     "test:integration": "npm run build:storybook && start-server-and-test 'http-server storybook-static -p 6006 -s' http://127.0.0.1:6006 test-storybook",
     "test:mutation": "stryker run",
@@ -117,34 +117,34 @@
   },
   "homepage": "https://choplogic.github.io/chop-logic-components",
   "devDependencies": {
-    "@biomejs/biome": "^2.4.13",
-    "@commitlint/cli": "^20.5.3",
-    "@commitlint/config-conventional": "^20.5.3",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/react-vite": "^10.3.6",
-    "@storybook/test-runner": "^0.24.3",
+    "@biomejs/biome": "^2.4.16",
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@storybook/addon-a11y": "^10.4.4",
+    "@storybook/addon-docs": "^10.4.4",
+    "@storybook/react-vite": "^10.4.4",
+    "@storybook/test-runner": "^0.24.4",
     "@stryker-mutator/core": "^9.6.1",
     "@stryker-mutator/vitest-runner": "^9.6.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.8",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "husky-init": "^8.0.0",
     "jsdom": "^29.1.1",
-    "prettier": "^3.8.3",
+    "prettier": "^3.8.4",
     "remark-gfm": "^4.0.1",
-    "start-server-and-test": "^3.0.2",
-    "storybook": "^10.3.6",
+    "start-server-and-test": "^3.0.10",
+    "storybook": "^10.4.4",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10",
-    "vite-plugin-dts": "^5.0.0",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.8"
   },
   "overrides": {
     "storybook": "$storybook"