@vtex/faststore 0.0.1

package/dist/particles/gallery/gallery.js

@@ -0,0 +1,920 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { DialogBackdrop, DialogClose, DialogPopup, DialogPortal, DialogRoot, DialogTitle, DialogViewport } from "../dialog/dialog.js";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/gallery/gallery.tsx
+const GalleryContext = createContext(null);
+const GalleryItemContext = createContext(null);
+const FullscreenTitleRegistryContext = createContext(null);
+function useGallery() {
+	const ctx = useContext(GalleryContext);
+	if (!ctx) throw new Error("Gallery components must be used inside GalleryRoot.");
+	return ctx;
+}
+function useGalleryItem() {
+	const ctx = useContext(GalleryItemContext);
+	if (!ctx) throw new Error("GalleryThumbnail and GalleryOverflowCount must be used inside GalleryThumbnails.");
+	return ctx;
+}
+const GALLERY_DOC = "./gallery.md";
+const GalleryRootDefinition = defineComponent({
+	name: "GalleryRoot",
+	importPath: "@vtex/faststore/components",
+	component: GalleryRoot,
+	editor: {
+		label: "Gallery Root",
+		category: "content"
+	},
+	schema: {
+		defaultIndex: {
+			type: "number",
+			default: 0,
+			label: "Default Index"
+		},
+		selectOnHover: {
+			type: "boolean",
+			default: false,
+			label: "Select on Hover"
+		},
+		thumbnailOpensFullscreen: {
+			type: "boolean",
+			default: false,
+			label: "Thumbnail Opens Fullscreen"
+		}
+	},
+	guideline: "Root of the gallery. Manages selected media index, fullscreen state, and zoom state. Compose as: GalleryRoot > (GalleryMainMedia (or GalleryZoom > (GalleryMainMedia + GalleryZoomLens + GalleryZoomResult)) + GalleryThumbnails > [GalleryThumbnail + GalleryOverflowCount] + GalleryFullscreen > [GalleryFullscreenClose + GalleryPrevious + GalleryMainMedia + GalleryNext + GalleryThumbnails]). Set selectOnHover=true for hover-to-preview; thumbnailOpensFullscreen=true to open fullscreen on thumbnail click."
+});
+const GalleryMainMediaDefinition = defineComponent({
+	name: "GalleryMainMedia",
+	importPath: "@vtex/faststore/components",
+	component: GalleryMainMedia,
+	editor: {
+		label: "Gallery Main Media",
+		category: "content"
+	},
+	schema: {
+		objectFit: {
+			type: [
+				"contain",
+				"cover",
+				"fill",
+				"none"
+			],
+			default: "contain",
+			label: "Object Fit"
+		},
+		aspectRatio: {
+			type: "string",
+			default: "1 / 1",
+			label: "Aspect Ratio"
+		},
+		videoAutoPlay: {
+			type: "boolean",
+			default: false,
+			label: "Video Auto Play"
+		},
+		videoControls: {
+			type: "boolean",
+			default: true,
+			label: "Video Controls"
+		},
+		clickOpensFullscreen: {
+			type: "boolean",
+			default: false,
+			label: "Click Opens Fullscreen"
+		}
+	},
+	guideline: "Renders the currently selected media item from GalleryRoot context: <img> for images, <video> for videos. Supports swipe gestures (50px threshold) to navigate. Set clickOpensFullscreen=true to open the fullscreen overlay on click. Must be inside GalleryRoot or GalleryZoom.",
+	docPath: GALLERY_DOC
+});
+const GalleryThumbnailsDefinition = defineComponent({
+	name: "GalleryThumbnails",
+	importPath: "@vtex/faststore/components",
+	component: GalleryThumbnails,
+	editor: {
+		label: "Gallery Thumbnails",
+		category: "content"
+	},
+	schema: {
+		maxVisible: {
+			type: "number",
+			label: "Max Visible"
+		},
+		slider: {
+			type: "boolean",
+			default: false,
+			label: "Slider Mode"
+		},
+		animated: {
+			type: "boolean",
+			default: false,
+			label: "Animated"
+		},
+		direction: {
+			type: ["horizontal", "vertical"],
+			default: "horizontal",
+			label: "Direction"
+		},
+		hideWhenSingle: {
+			type: "boolean",
+			default: true,
+			label: "Hide when single image"
+		}
+	},
+	guideline: "Iterates media items and renders its children once per item. Returns null when there are 0 or 1 media items unless hideWhenSingle={false}. Set maxVisible to cap visible thumbnails. Without slider: last slot gets isOverflow=true for GalleryOverflowCount. With slider=true: window driven by GalleryThumbnailsPrevious/Next. Add animated=true for smooth scroll — also set direction to match the flex axis of the container.",
+	docPath: GALLERY_DOC
+});
+const GalleryThumbnailsPreviousDefinition = defineComponent({
+	name: "GalleryThumbnailsPrevious",
+	importPath: "@vtex/faststore/components",
+	component: GalleryThumbnailsPrevious,
+	editor: {
+		label: "Gallery Thumbnails Previous",
+		category: "content"
+	},
+	schema: { step: {
+		type: "number",
+		default: 1,
+		label: "Step"
+	} },
+	guideline: "Scrolls the thumbnail strip backward. Only active when GalleryThumbnails slider=true. Disabled at the first thumbnail. step=1 (default) moves one at a time; pass step equal to maxVisible to jump a full window. Place as sibling of GalleryThumbnails.",
+	docPath: GALLERY_DOC
+});
+const GalleryThumbnailsNextDefinition = defineComponent({
+	name: "GalleryThumbnailsNext",
+	importPath: "@vtex/faststore/components",
+	component: GalleryThumbnailsNext,
+	editor: {
+		label: "Gallery Thumbnails Next",
+		category: "content"
+	},
+	schema: { step: {
+		type: "number",
+		default: 1,
+		label: "Step"
+	} },
+	guideline: "Scrolls the thumbnail strip forward. Only active when GalleryThumbnails slider=true. Disabled at the last visible thumbnail. step=1 (default) moves one at a time; pass step equal to maxVisible to jump a full window. Place as sibling of GalleryThumbnails.",
+	docPath: GALLERY_DOC
+});
+const GalleryThumbnailDefinition = defineComponent({
+	name: "GalleryThumbnail",
+	importPath: "@vtex/faststore/components",
+	component: GalleryThumbnail,
+	editor: {
+		label: "Gallery Thumbnail",
+		category: "content"
+	},
+	schema: {
+		objectFit: {
+			type: [
+				"contain",
+				"cover",
+				"fill",
+				"none"
+			],
+			default: "contain",
+			label: "Object Fit"
+		},
+		aspectRatio: {
+			type: "string",
+			default: "1 / 1",
+			label: "Aspect Ratio"
+		}
+	},
+	guideline: "Thumbnail button for a single media item. Reads from GalleryItemContext — must be inside GalleryThumbnails. Adds data-fs-gallery-thumbnail-selected=\"true\" when active. For videos, renders previewImageUrl as the thumbnail src.",
+	docPath: GALLERY_DOC
+});
+const GalleryOverflowCountDefinition = defineComponent({
+	name: "GalleryOverflowCount",
+	importPath: "@vtex/faststore/components",
+	component: GalleryOverflowCount,
+	editor: {
+		label: "Gallery Overflow Count",
+		category: "content"
+	},
+	schema: {
+		template: {
+			type: "string",
+			default: "+{count}",
+			label: "Template"
+		},
+		ariaLabel: {
+			type: "string",
+			default: "View all {total} images",
+			label: "Aria Label"
+		}
+	},
+	guideline: "Overflow indicator. Only renders when isOverflow=true in GalleryItemContext — place alongside GalleryThumbnail inside GalleryThumbnails. Clicking opens fullscreen. Use template=\"+{count}\" to customize the visible label. The rendered button carries an aria-label (default \"View all {total} images\") so screen readers announce the full action, not just the count.",
+	docPath: GALLERY_DOC
+});
+const GalleryMediaDefinition = defineComponent({
+	name: "GalleryMedia",
+	importPath: "@vtex/faststore/components",
+	component: GalleryMedia,
+	editor: {
+		label: "Gallery Media",
+		category: "content"
+	},
+	schema: {
+		objectFit: {
+			type: [
+				"contain",
+				"cover",
+				"fill",
+				"none"
+			],
+			default: "contain",
+			label: "Object Fit"
+		},
+		aspectRatio: {
+			type: "string",
+			default: "1 / 1",
+			label: "Aspect Ratio"
+		},
+		videoAutoPlay: {
+			type: "boolean",
+			default: false,
+			label: "Video Auto Play"
+		},
+		videoControls: {
+			type: "boolean",
+			default: true,
+			label: "Video Controls"
+		},
+		clickOpensFullscreen: {
+			type: "boolean",
+			default: false,
+			label: "Click Opens Fullscreen"
+		}
+	},
+	guideline: "Full-size media display for items inside GalleryThumbnails. Unlike GalleryThumbnail, renders as a div (not a button) — use for grid layouts and vertical fullscreen stacks. Set clickOpensFullscreen=true to select the item and open fullscreen on click. Must be inside GalleryThumbnails.",
+	docPath: GALLERY_DOC
+});
+const GalleryZoomDefinition = defineComponent({
+	name: "GalleryZoom",
+	importPath: "@vtex/faststore/components",
+	component: GalleryZoom,
+	editor: {
+		label: "Gallery Zoom",
+		category: "content"
+	},
+	schema: {
+		magnification: {
+			type: "number",
+			default: 2,
+			label: "Magnification"
+		},
+		lensSize: {
+			type: "number",
+			default: 150,
+			label: "Lens Size (px)"
+		}
+	},
+	guideline: "Zoom container. Wrap GalleryMainMedia inside it to activate zoom on pointer enter (images only, not videos). Place GalleryZoomLens as a sibling of GalleryMainMedia inside GalleryZoom for the cursor indicator. Place GalleryZoomResult anywhere in GalleryRoot — as a sibling of GalleryZoom (side-panel) or absolute inside GalleryZoom (on-image overlay). Set magnification to control zoom level (default 2).",
+	docPath: GALLERY_DOC
+});
+const GalleryZoomLensDefinition = defineComponent({
+	name: "GalleryZoomLens",
+	importPath: "@vtex/faststore/components",
+	component: GalleryZoomLens,
+	editor: {
+		label: "Gallery Zoom Lens",
+		category: "content"
+	},
+	schema: {},
+	guideline: "Cursor focus indicator inside GalleryZoom. Only renders when zoom is active. Must be inside GalleryZoom. Style as absolute-positioned square — uses CSS custom properties --zoom-x, --zoom-y, --lens-size for positioning.",
+	docPath: GALLERY_DOC
+});
+const GalleryZoomResultDefinition = defineComponent({
+	name: "GalleryZoomResult",
+	importPath: "@vtex/faststore/components",
+	component: GalleryZoomResult,
+	editor: {
+		label: "Gallery Zoom Result",
+		category: "content"
+	},
+	schema: {},
+	guideline: "Magnified view driven by cursor position from GalleryZoom context. Only renders when zoom is active on an image. Place as sibling of GalleryZoom for side-panel zoom, or absolute inside GalleryZoom for on-image zoom.",
+	docPath: GALLERY_DOC
+});
+const GalleryFullscreenDefinition = defineComponent({
+	name: "GalleryFullscreen",
+	importPath: "@vtex/faststore/components",
+	component: GalleryFullscreen,
+	editor: {
+		label: "Gallery Fullscreen",
+		category: "content"
+	},
+	schema: {},
+	guideline: "Fullscreen overlay controlled by GalleryRoot state. Opens via GalleryOverflowCount, GalleryFullscreenTrigger, or thumbnailOpensFullscreen=true. Wraps a Dialog internally — place GalleryFullscreenClose, GalleryPrevious, GalleryMainMedia, GalleryNext, and optionally GalleryThumbnails as children. If no GalleryFullscreenTitle is composed, a default sr-only \"Gallery\" title is rendered automatically so the dialog always has an accessible name. Must be inside GalleryRoot.",
+	docPath: GALLERY_DOC
+});
+const GalleryFullscreenTitleDefinition = defineComponent({
+	name: "GalleryFullscreenTitle",
+	importPath: "@vtex/faststore/components",
+	component: GalleryFullscreenTitle,
+	editor: {
+		label: "Gallery Fullscreen Title",
+		category: "content"
+	},
+	schema: {},
+	guideline: "Accessible title for the fullscreen dialog. Required for screen readers. Use sr-only to hide it visually or omit the class to display it. Must be inside GalleryFullscreen.",
+	docPath: GALLERY_DOC
+});
+const GalleryFullscreenCloseDefinition = defineComponent({
+	name: "GalleryFullscreenClose",
+	importPath: "@vtex/faststore/components",
+	component: GalleryFullscreenClose,
+	editor: {
+		label: "Gallery Fullscreen Close",
+		category: "content"
+	},
+	schema: {},
+	guideline: "Closes the fullscreen overlay. Must be inside GalleryFullscreen. Place at the top-right corner. Accepts any children (Icon, text).",
+	docPath: GALLERY_DOC
+});
+const GalleryPreviousDefinition = defineComponent({
+	name: "GalleryPrevious",
+	importPath: "@vtex/faststore/components",
+	component: GalleryPrevious,
+	editor: {
+		label: "Gallery Previous",
+		category: "content"
+	},
+	schema: { wrap: {
+		type: "boolean",
+		default: true,
+		label: "Wrap Around"
+	} },
+	guideline: "Navigates to the previous media item; wraps to the last by default, or stops at the first with wrap={false}. Use inside GalleryFullscreen or inline for carousel controls. Accepts any children (Icon, text).",
+	docPath: GALLERY_DOC
+});
+const GalleryNextDefinition = defineComponent({
+	name: "GalleryNext",
+	importPath: "@vtex/faststore/components",
+	component: GalleryNext,
+	editor: {
+		label: "Gallery Next",
+		category: "content"
+	},
+	schema: { wrap: {
+		type: "boolean",
+		default: true,
+		label: "Wrap Around"
+	} },
+	guideline: "Navigates to the next media item; wraps to the first by default, or stops at the last with wrap={false}. Use inside GalleryFullscreen or inline for carousel controls. Accepts any children (Icon, text).",
+	docPath: GALLERY_DOC
+});
+const GalleryMediaCountDefinition = defineComponent({
+	name: "GalleryMediaCount",
+	importPath: "@vtex/faststore/components",
+	component: GalleryMediaCount,
+	editor: {
+		label: "Gallery Media Count",
+		category: "content"
+	},
+	schema: { template: {
+		type: "string",
+		default: "{current} / {total}",
+		label: "Template"
+	} },
+	guideline: "Displays the current media position and total count (e.g. \"2 / 10\"). Use {current} and {total} placeholders in template. Place anywhere inside GalleryRoot — typically in GalleryFullscreen or above GalleryMainMedia.",
+	docPath: GALLERY_DOC
+});
+function GalleryRoot({ media = [], defaultIndex = 0, selectOnHover = false, thumbnailOpensFullscreen = false, children, ...props }) {
+	const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
+	const [fullscreenOpen, setFullscreenOpen] = useState(false);
+	const [zoomActive, setZoomActive] = useState(false);
+	const [zoomPosition, setZoomPosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const [zoomConfig, setZoomConfig] = useState({
+		magnification: 2,
+		lensSize: 150
+	});
+	const [zoomContainerSize, setZoomContainerSize] = useState({
+		width: 0,
+		height: 0
+	});
+	const [thumbnailOffset, setThumbnailOffset] = useState(0);
+	const [thumbnailsWindowSize, setThumbnailsWindowSize] = useState(0);
+	const openFullscreen = useCallback(() => setFullscreenOpen(true), []);
+	const closeFullscreen = useCallback(() => setFullscreenOpen(false), []);
+	const ctx = useMemo(() => ({
+		media,
+		selectedIndex,
+		setSelectedIndex,
+		fullscreenOpen,
+		openFullscreen,
+		closeFullscreen,
+		selectOnHover,
+		thumbnailOpensFullscreen,
+		zoomActive,
+		setZoomActive,
+		zoomPosition,
+		setZoomPosition,
+		magnification: zoomConfig.magnification,
+		lensSize: zoomConfig.lensSize,
+		setZoomConfig,
+		zoomContainerSize,
+		setZoomContainerSize,
+		thumbnailOffset,
+		setThumbnailOffset,
+		thumbnailsWindowSize,
+		setThumbnailsWindowSize
+	}), [
+		media,
+		selectedIndex,
+		fullscreenOpen,
+		openFullscreen,
+		closeFullscreen,
+		selectOnHover,
+		thumbnailOpensFullscreen,
+		zoomActive,
+		zoomPosition,
+		zoomConfig,
+		zoomContainerSize,
+		thumbnailOffset,
+		thumbnailsWindowSize
+	]);
+	return /* @__PURE__ */ jsx(GalleryContext, {
+		value: ctx,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-fs-gallery": "",
+			children
+		})
+	});
+}
+const SWIPE_THRESHOLD = 50;
+function GalleryMainMedia({ objectFit = "contain", aspectRatio, videoAutoPlay = false, videoControls = true, clickOpensFullscreen = false, style, ...props }) {
+	const { media, selectedIndex, setSelectedIndex, openFullscreen } = useGallery();
+	const currentItem = media[selectedIndex] ?? media[0];
+	const pointerStartX = useRef(null);
+	function handlePointerDown(e) {
+		pointerStartX.current = e.clientX;
+	}
+	function handlePointerUp(e) {
+		if (pointerStartX.current === null) return;
+		const delta = e.clientX - pointerStartX.current;
+		pointerStartX.current = null;
+		if (Math.abs(delta) < SWIPE_THRESHOLD) {
+			if (clickOpensFullscreen) openFullscreen();
+			return;
+		}
+		if (media.length === 0) return;
+		if (delta < 0) setSelectedIndex(selectedIndex < media.length - 1 ? selectedIndex + 1 : 0);
+		else setSelectedIndex(selectedIndex > 0 ? selectedIndex - 1 : media.length - 1);
+	}
+	if (!currentItem) return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-fs-gallery-main-media": ""
+	});
+	if (currentItem.type === "video") return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-fs-gallery-main-media": "",
+		"data-fs-gallery-main-media-type": "video",
+		children: /* @__PURE__ */ jsx("video", {
+			src: currentItem.url,
+			controls: videoControls,
+			autoPlay: videoAutoPlay,
+			poster: currentItem.previewImageUrl,
+			style: {
+				objectFit,
+				aspectRatio,
+				...style
+			},
+			children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-fs-gallery-main-media": "",
+		"data-fs-gallery-main-media-type": "image",
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		style: {
+			touchAction: "pan-y",
+			...style
+		},
+		children: /* @__PURE__ */ jsx("img", {
+			src: currentItem.url,
+			alt: currentItem.altText,
+			style: {
+				display: "block",
+				width: "100%",
+				objectFit,
+				aspectRatio
+			},
+			draggable: false
+		})
+	});
+}
+function GalleryThumbnails({ hideWhenSingle = true, ...rest }) {
+	const { media } = useGallery();
+	if (hideWhenSingle && media.length <= 1) return null;
+	return /* @__PURE__ */ jsx(GalleryThumbnailsInner, { ...rest });
+}
+function GalleryThumbnailsInner({ maxVisible, slider = false, animated = false, direction = "horizontal", children, style, ...props }) {
+	const { media, thumbnailOffset, setThumbnailsWindowSize } = useGallery();
+	const trackRef = useRef(null);
+	const [containerSize, setContainerSize] = useState(null);
+	useEffect(() => {
+		if (slider && maxVisible != null) setThumbnailsWindowSize(maxVisible);
+	}, [
+		slider,
+		maxVisible,
+		setThumbnailsWindowSize
+	]);
+	useLayoutEffect(() => {
+		if (!animated || !slider || maxVisible == null || !trackRef.current) return;
+		const lastVisible = trackRef.current.children[maxVisible - 1];
+		if (!lastVisible) return;
+		const size = direction === "horizontal" ? lastVisible.offsetLeft + lastVisible.offsetWidth : lastVisible.offsetTop + lastVisible.offsetHeight;
+		setContainerSize(size);
+	}, [
+		animated,
+		slider,
+		maxVisible,
+		direction
+	]);
+	useEffect(() => {
+		if (!animated || !slider || !trackRef.current) return;
+		const target = trackRef.current.children[thumbnailOffset];
+		if (!target) return;
+		trackRef.current.scrollTo({
+			left: direction === "horizontal" ? target.offsetLeft : 0,
+			top: direction === "vertical" ? target.offsetTop : 0,
+			behavior: "smooth"
+		});
+	}, [
+		thumbnailOffset,
+		animated,
+		slider,
+		direction
+	]);
+	const visibleItems = (() => {
+		if (animated && slider) return media;
+		if (maxVisible == null) return media;
+		if (slider) return media.slice(thumbnailOffset, thumbnailOffset + maxVisible);
+		return media.slice(0, maxVisible);
+	})();
+	const containerStyle = animated && slider ? {
+		overflow: "hidden",
+		position: "relative",
+		...direction === "horizontal" && containerSize != null ? { width: containerSize } : {},
+		...direction === "vertical" && containerSize != null ? { height: containerSize } : {},
+		...style
+	} : { ...style };
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref: trackRef,
+		style: containerStyle,
+		"data-fs-gallery-thumbnails": "",
+		children: visibleItems.map((item, slotIndex) => {
+			const index = animated && slider ? slotIndex : slider ? thumbnailOffset + slotIndex : slotIndex;
+			const isOverflow = !slider && maxVisible != null && media.length > maxVisible && slotIndex === maxVisible - 1;
+			const overflowCount = isOverflow ? media.length - maxVisible + 1 : 0;
+			return /* @__PURE__ */ jsx(GalleryItemContext, {
+				value: {
+					item,
+					index,
+					isOverflow,
+					overflowCount
+				},
+				children
+			}, index);
+		})
+	});
+}
+function GalleryThumbnail({ objectFit = "contain", aspectRatio, style, ...props }) {
+	const { selectedIndex, setSelectedIndex, openFullscreen, selectOnHover, thumbnailOpensFullscreen } = useGallery();
+	const { item, index, isOverflow } = useGalleryItem();
+	const thumbSrc = item.type === "video" ? item.previewImageUrl ?? "" : item.url;
+	function handleClick() {
+		setSelectedIndex(index);
+		if (thumbnailOpensFullscreen || isOverflow) openFullscreen();
+	}
+	function handlePointerEnter() {
+		if (selectOnHover && !isOverflow) setSelectedIndex(index);
+	}
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: handleClick,
+		onPointerEnter: handlePointerEnter,
+		"data-fs-gallery-thumbnail": "",
+		"data-fs-gallery-thumbnail-selected": String(index === selectedIndex),
+		"data-fs-gallery-thumbnail-type": item.type,
+		...props,
+		children: /* @__PURE__ */ jsx("img", {
+			src: thumbSrc,
+			alt: item.altText,
+			style: {
+				display: "block",
+				width: "100%",
+				height: "100%",
+				objectFit,
+				aspectRatio,
+				...style
+			}
+		})
+	});
+}
+function GalleryOverflowCount({ template = "+{count}", ariaLabel = "View all {total} images", ...props }) {
+	const { media, openFullscreen } = useGallery();
+	const { isOverflow, overflowCount } = useGalleryItem();
+	if (!isOverflow) return null;
+	const label = template.replace("{count}", String(overflowCount));
+	const resolvedAriaLabel = ariaLabel.replace("{total}", String(media.length));
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: openFullscreen,
+		"aria-label": resolvedAriaLabel,
+		"data-fs-gallery-overflow-count": "",
+		...props,
+		children: label
+	});
+}
+function GalleryMedia({ objectFit = "contain", aspectRatio, videoAutoPlay = false, videoControls = true, clickOpensFullscreen = false, style, ...props }) {
+	const { setSelectedIndex, openFullscreen } = useGallery();
+	const { item, index } = useGalleryItem();
+	function handleClick() {
+		setSelectedIndex(index);
+		openFullscreen();
+	}
+	function handleKeyDown(e) {
+		if (e.key === "Enter" || e.key === " ") handleClick();
+	}
+	const interactiveProps = clickOpensFullscreen ? {
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		role: "button",
+		tabIndex: 0
+	} : {};
+	const wrapperStyle = {
+		...style,
+		...aspectRatio ? {
+			aspectRatio,
+			position: "relative"
+		} : {}
+	};
+	const mediaStyle = aspectRatio ? {
+		position: "absolute",
+		inset: 0,
+		width: "100%",
+		height: "100%",
+		objectFit
+	} : {
+		display: "block",
+		width: "100%",
+		height: "100%",
+		objectFit
+	};
+	if (item.type === "video") return /* @__PURE__ */ jsx("div", {
+		...props,
+		...interactiveProps,
+		style: wrapperStyle,
+		"data-fs-gallery-media-item": "",
+		"data-fs-gallery-media-item-type": "video",
+		children: /* @__PURE__ */ jsx("video", {
+			src: item.url,
+			controls: videoControls,
+			autoPlay: videoAutoPlay,
+			poster: item.previewImageUrl,
+			style: mediaStyle,
+			children: /* @__PURE__ */ jsx("track", { kind: "captions" })
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		...interactiveProps,
+		style: wrapperStyle,
+		"data-fs-gallery-media-item": "",
+		"data-fs-gallery-media-item-type": "image",
+		children: /* @__PURE__ */ jsx("img", {
+			src: item.url,
+			alt: item.altText,
+			style: mediaStyle,
+			draggable: false
+		})
+	});
+}
+function GalleryZoom({ magnification = 2, lensSize = 150, children, ...props }) {
+	const { media, selectedIndex, setZoomActive, setZoomPosition, setZoomConfig, setZoomContainerSize } = useGallery();
+	const containerRef = useRef(null);
+	const isImage = media[selectedIndex]?.type === "image";
+	function handlePointerMove(e) {
+		if (!containerRef.current || !isImage) return;
+		const rect = containerRef.current.getBoundingClientRect();
+		const x = (e.clientX - rect.left) / rect.width;
+		const y = (e.clientY - rect.top) / rect.height;
+		setZoomPosition({
+			x: Math.max(0, Math.min(1, x)),
+			y: Math.max(0, Math.min(1, y))
+		});
+	}
+	function handlePointerEnter() {
+		setZoomConfig({
+			magnification,
+			lensSize
+		});
+		if (containerRef.current) {
+			const rect = containerRef.current.getBoundingClientRect();
+			setZoomContainerSize({
+				width: rect.width,
+				height: rect.height
+			});
+		}
+		if (isImage) setZoomActive(true);
+	}
+	function handlePointerLeave() {
+		setZoomActive(false);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		...props,
+		onPointerMove: handlePointerMove,
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		"data-fs-gallery-zoom": "",
+		children
+	});
+}
+function GalleryZoomLens({ style, ...props }) {
+	const { zoomActive, zoomPosition, lensSize, zoomContainerSize } = useGallery();
+	if (!zoomActive) return null;
+	const { width, height } = zoomContainerSize;
+	const maxLeft = Math.max(0, width - lensSize);
+	const maxTop = Math.max(0, height - lensSize);
+	const left = width > 0 ? Math.min(Math.max(zoomPosition.x * width - lensSize / 2, 0), maxLeft) : 0;
+	const lensStyle = {
+		top: height > 0 ? Math.min(Math.max(zoomPosition.y * height - lensSize / 2, 0), maxTop) : 0,
+		left,
+		width: lensSize,
+		height: lensSize,
+		...style
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		style: lensStyle,
+		"data-fs-gallery-zoom-lens": ""
+	});
+}
+function GalleryZoomResult({ style, ...props }) {
+	const { media, selectedIndex, zoomActive, zoomPosition, magnification } = useGallery();
+	const currentItem = media[selectedIndex];
+	const resultStyle = zoomActive && !!currentItem && currentItem.type === "image" ? {
+		backgroundImage: `url(${currentItem.url})`,
+		backgroundSize: `${magnification * 100}%`,
+		backgroundPosition: `${zoomPosition.x * 100}% ${zoomPosition.y * 100}%`,
+		backgroundRepeat: "no-repeat",
+		...style
+	} : {
+		visibility: "hidden",
+		...style
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		style: resultStyle,
+		"data-fs-gallery-zoom-result": ""
+	});
+}
+function GalleryFullscreen({ children, ...props }) {
+	const { fullscreenOpen, closeFullscreen } = useGallery();
+	const [hasExplicitTitle, setHasExplicitTitle] = useState(false);
+	const register = useCallback(() => setHasExplicitTitle(true), []);
+	const registry = useMemo(() => ({ register }), [register]);
+	return /* @__PURE__ */ jsx(DialogRoot, {
+		open: fullscreenOpen,
+		onOpenChange: (open) => {
+			if (!open) closeFullscreen();
+		},
+		children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {
+			className: "fixed inset-0 bg-black/80",
+			"data-fs-gallery-fullscreen-backdrop": ""
+		}), /* @__PURE__ */ jsx(DialogViewport, {
+			className: "fixed inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(DialogPopup, {
+				...props,
+				"data-fs-gallery-fullscreen": "",
+				children: /* @__PURE__ */ jsxs(FullscreenTitleRegistryContext.Provider, {
+					value: registry,
+					children: [!hasExplicitTitle && /* @__PURE__ */ jsx(DialogTitle, {
+						className: "sr-only",
+						"data-fs-gallery-fullscreen-title": "",
+						children: "Gallery"
+					}), children]
+				})
+			})
+		})] })
+	});
+}
+function GalleryFullscreenTitle({ children = "Gallery", ...props }) {
+	const registry = useContext(FullscreenTitleRegistryContext);
+	useLayoutEffect(() => {
+		registry?.register();
+	}, [registry]);
+	return /* @__PURE__ */ jsx(DialogTitle, {
+		"data-fs-gallery-fullscreen-title": "",
+		...props,
+		children
+	});
+}
+function GalleryFullscreenClose({ children, ...props }) {
+	return /* @__PURE__ */ jsx(DialogClose, {
+		"data-fs-gallery-fullscreen-close": "",
+		...props,
+		children
+	});
+}
+function GalleryPrevious({ children, wrap = true, ...props }) {
+	const { media, selectedIndex, setSelectedIndex } = useGallery();
+	function handleClick() {
+		if (media.length === 0) return;
+		if (selectedIndex > 0) setSelectedIndex(selectedIndex - 1);
+		else if (wrap) setSelectedIndex(media.length - 1);
+	}
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: media.length === 0 || !wrap && selectedIndex === 0,
+		onClick: handleClick,
+		"data-fs-gallery-previous": "",
+		...props,
+		children
+	});
+}
+function GalleryNext({ children, wrap = true, ...props }) {
+	const { media, selectedIndex, setSelectedIndex } = useGallery();
+	function handleClick() {
+		if (media.length === 0) return;
+		if (selectedIndex < media.length - 1) setSelectedIndex(selectedIndex + 1);
+		else if (wrap) setSelectedIndex(0);
+	}
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: media.length === 0 || !wrap && selectedIndex === media.length - 1,
+		onClick: handleClick,
+		"data-fs-gallery-next": "",
+		...props,
+		children
+	});
+}
+function GalleryThumbnailsPrevious({ step = 1, children, ...props }) {
+	const { thumbnailOffset, setThumbnailOffset } = useGallery();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: thumbnailOffset === 0,
+		onClick: () => setThumbnailOffset(Math.max(0, thumbnailOffset - step)),
+		"data-fs-gallery-thumbnails-previous": "",
+		...props,
+		children
+	});
+}
+function GalleryThumbnailsNext({ step = 1, children, ...props }) {
+	const { media, thumbnailOffset, setThumbnailOffset, thumbnailsWindowSize } = useGallery();
+	const isDisabled = thumbnailsWindowSize > 0 && thumbnailOffset + thumbnailsWindowSize >= media.length;
+	const maxOffset = Math.max(0, media.length - thumbnailsWindowSize);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: isDisabled,
+		onClick: () => setThumbnailOffset(Math.min(maxOffset, thumbnailOffset + step)),
+		"data-fs-gallery-thumbnails-next": "",
+		...props,
+		children
+	});
+}
+function GalleryMediaCount({ template = "{current} / {total}", ...props }) {
+	const { selectedIndex, media } = useGallery();
+	const label = template.replace("{current}", String(selectedIndex + 1)).replace("{total}", String(media.length));
+	return /* @__PURE__ */ jsx("span", {
+		"data-fs-gallery-media-count": "",
+		...props,
+		children: label
+	});
+}
+const Gallery = {
+	Root: GalleryRoot,
+	MainMedia: GalleryMainMedia,
+	Media: GalleryMedia,
+	Thumbnails: GalleryThumbnails,
+	ThumbnailsPrevious: GalleryThumbnailsPrevious,
+	ThumbnailsNext: GalleryThumbnailsNext,
+	Thumbnail: GalleryThumbnail,
+	OverflowCount: GalleryOverflowCount,
+	Zoom: GalleryZoom,
+	ZoomLens: GalleryZoomLens,
+	ZoomResult: GalleryZoomResult,
+	Fullscreen: GalleryFullscreen,
+	FullscreenTitle: GalleryFullscreenTitle,
+	FullscreenClose: GalleryFullscreenClose,
+	Previous: GalleryPrevious,
+	Next: GalleryNext,
+	MediaCount: GalleryMediaCount
+};
+//#endregion
+export { Gallery, GalleryFullscreen, GalleryFullscreenClose, GalleryFullscreenCloseDefinition, GalleryFullscreenDefinition, GalleryFullscreenTitle, GalleryFullscreenTitleDefinition, GalleryItemContext, GalleryMainMedia, GalleryMainMediaDefinition, GalleryMedia, GalleryMediaCount, GalleryMediaCountDefinition, GalleryMediaDefinition, GalleryNext, GalleryNextDefinition, GalleryOverflowCount, GalleryOverflowCountDefinition, GalleryPrevious, GalleryPreviousDefinition, GalleryRoot, GalleryRootDefinition, GalleryThumbnail, GalleryThumbnailDefinition, GalleryThumbnails, GalleryThumbnailsDefinition, GalleryThumbnailsNext, GalleryThumbnailsNextDefinition, GalleryThumbnailsPrevious, GalleryThumbnailsPreviousDefinition, GalleryZoom, GalleryZoomDefinition, GalleryZoomLens, GalleryZoomLensDefinition, GalleryZoomResult, GalleryZoomResultDefinition, useGallery, useGalleryItem };
+
+//# sourceMappingURL=gallery.js.map