chop-logic-components 4.1.0 → 4.2.0

package/dist/components/molecules/select/Select.controller.d.ts

@@ -0,0 +1,14 @@
+import { SelectValue } from '../../../types';
+export declare function useSelectController({ name, defaultValue, onChange, options, }: {
+    name: string;
+    defaultValue?: string | number | readonly string[];
+    onChange?: (value?: SelectValue) => void;
+    options: SelectValue[];
+}): {
+    selected: SelectValue | undefined;
+    opened: boolean;
+    handleClear: () => void;
+    handleClose: () => void;
+    handleToggle: () => void;
+    handleSelect: (id: string) => void;
+};

package/dist/components/molecules/select/Select.d.ts

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

package/dist/components/molecules/select/Select.helpers.d.ts

@@ -0,0 +1,7 @@
+import { FormValues, SelectValue } from '../../../types';
+export declare function getSelectInitialValue({ name, options, initialValues, defaultValue, }: {
+    name: string;
+    options: SelectValue[];
+    initialValues?: FormValues;
+    defaultValue?: string | number | readonly string[];
+}): SelectValue | undefined;

package/dist/components/molecules/select/combobox/Combobox.d.ts

@@ -0,0 +1,15 @@
+import { SelectValue } from '../../../../types';
+import { FC } from 'react';
+type Props = {
+    opened: boolean;
+    disabled: boolean;
+    required: boolean;
+    onClick: () => void;
+    comboboxId: string;
+    dropdownId: string;
+    selected?: SelectValue;
+    placeholder?: string;
+    name: string;
+};
+export declare const SelectCombobox: FC<Props>;
+export {};

package/dist/components/molecules/select/dropdown/Dropdown.d.ts

@@ -0,0 +1,14 @@
+import { SelectValue } from '../../../../types';
+import { FC } from 'react';
+type Props = {
+    options: SelectValue[];
+    opened: boolean;
+    dropdownId: string;
+    comboboxId: string;
+    onClose: () => void;
+    selected?: SelectValue;
+    onSelect: (id: string) => void;
+    onClear: () => void;
+};
+export declare const SelectDropdown: FC<Props>;
+export {};

package/dist/components/molecules/select/option/Option.d.ts

@@ -0,0 +1,10 @@
+import { SelectValue } from '../../../../types';
+import { FC } from 'react';
+type Props = {
+    value: SelectValue;
+    selected: boolean;
+    onSelect: (id: string) => void;
+    onClear: () => void;
+};
+export declare const SelectOption: FC<Props>;
+export {};

package/dist/components/molecules/switch/Switch.controller.d.ts

@@ -0,0 +1,10 @@
+import { KeyboardEvent } from 'react';
+export declare function useSwitchController({ name, defaultChecked, onChange, }: {
+    name: string;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+}): {
+    checked: boolean;
+    handleChange: (checked: boolean) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/components/molecules/switch/Switch.d.ts

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

package/dist/components/molecules/switch/Switch.helpers.d.ts

@@ -0,0 +1,6 @@
+import { FormValues } from '../../../types';
+export declare function getSwitchInitialValue({ defaultChecked, initialValues, name, }: {
+    defaultChecked?: boolean;
+    initialValues?: FormValues;
+    name: string;
+}): boolean;

package/dist/components/molecules/text-input/TextInput.controller.d.ts

@@ -0,0 +1,17 @@
+import { ChopLogicRegExpWithFlags, TextInputValidator } from '../../../types';
+import { ChangeEvent, ChangeEventHandler } from 'react';
+export declare function useTextInputController({ name, defaultValue, onChange, onClear, required, validator, }: {
+    name: string;
+    required: boolean;
+    validator?: ChopLogicRegExpWithFlags | TextInputValidator;
+    defaultValue?: string | number | readonly string[];
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onClear?: () => void;
+}): {
+    value: string;
+    valid: boolean;
+    passwordShown: boolean;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleClear: () => void;
+    togglePassword: () => void;
+};

package/dist/components/molecules/text-input/TextInput.d.ts

@@ -0,0 +1,9 @@
+import { TextInputProps } from '../../../types';
+import { FC } from 'react';
+/**
+ * TextInput component factory
+ * Renders either a stateful or stateless component
+ * based on the `stateless` prop.
+ */
+declare const TextInput: FC<TextInputProps>;
+export default TextInput;

package/dist/components/molecules/text-input/TextInput.helpers.d.ts

@@ -0,0 +1,11 @@
+import { ChopLogicRegExpWithFlags, FormValues, TextInputValidator } from '../../../types';
+export declare function validateTextInputValue({ value, required, validator, }: {
+    value: string;
+    required: boolean;
+    validator?: ChopLogicRegExpWithFlags | TextInputValidator;
+}): boolean;
+export declare function getTextInputInitialValue({ name, initialValues, defaultValue, }: {
+    name: string;
+    initialValues?: FormValues;
+    defaultValue?: string | number | readonly string[];
+}): string;

package/dist/components/molecules/text-input/TextInputButtons.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+declare const TextInputButtons: FC<{
+    clearable: boolean;
+    isPasswordButtonVisible: boolean;
+    handleClear: () => void;
+    togglePassword: () => void;
+    passwordShown: boolean;
+    label: string;
+    disabled: boolean;
+}>;
+export default TextInputButtons;

package/dist/components/molecules/text-input/TextInputStateful.d.ts

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

package/dist/components/molecules/text-input/TextInputStateless.d.ts

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

package/dist/components/organisms/dialog/Dialog.d.ts

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

package/dist/components/organisms/form/Form.controller.d.ts

@@ -0,0 +1,14 @@
+import { FormInputParams, FormValues } from '../../../types';
+import { FormEvent, FormEventHandler } from 'react';
+export declare function useFormController({ initialValues, onReset, onSubmit, onClickSubmit, }: {
+    initialValues?: FormValues;
+    onReset?: FormEventHandler<HTMLFormElement>;
+    onSubmit?: FormEventHandler<HTMLFormElement>;
+    onClickSubmit?: (data: FormValues) => void;
+}): {
+    handleInputChange: (params: FormInputParams) => void;
+    handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
+    handleReset: (event: FormEvent<HTMLFormElement>) => void;
+    resetSignal: number;
+    valid: boolean;
+};

package/dist/components/organisms/form/Form.d.ts

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

package/dist/components/organisms/form/Form.helpers.d.ts

@@ -0,0 +1,4 @@
+import { FormInputParams, FormValidationState, FormValues } from '../../../types';
+export declare function getInitialValidationState(data?: FormValues): FormValidationState;
+export declare function updateValidationState(state: FormValidationState, params: FormInputParams): FormValidationState;
+export declare function isFormDataValid(state: FormValidationState): boolean;

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)}