@classytic/fluid 0.4.0 → 0.4.2

package/dist/client/gallery.mjs

@@ -0,0 +1,545 @@
+"use client";
+
+import { t as cn } from "../utils-DQ5SCVoW.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, RotateCcw, X, ZoomIn, ZoomOut } from "lucide-react";
+import Image from "next/image";
+
+//#region src/components/gallery/gallery-context.tsx
+const GalleryContext = createContext(null);
+function useGallery() {
+	const context = useContext(GalleryContext);
+	if (!context) throw new Error("useGallery must be used within a GalleryProvider");
+	return context;
+}
+function useGalleryOptional() {
+	return useContext(GalleryContext);
+}
+function GalleryProvider({ children, images, defaultIndex = 0, classNames, title, onIndexChange }) {
+	const [selectedIndex, setSelectedIndexState] = useState(defaultIndex);
+	const [lightboxOpen, setLightboxOpen] = useState(false);
+	const setSelectedIndex = useCallback((index) => {
+		setSelectedIndexState(index);
+		onIndexChange?.(index);
+	}, [onIndexChange]);
+	const goToNext = useCallback(() => {
+		setSelectedIndex(selectedIndex === images.length - 1 ? 0 : selectedIndex + 1);
+	}, [
+		selectedIndex,
+		images.length,
+		setSelectedIndex
+	]);
+	const goToPrevious = useCallback(() => {
+		setSelectedIndex(selectedIndex === 0 ? images.length - 1 : selectedIndex - 1);
+	}, [
+		selectedIndex,
+		images.length,
+		setSelectedIndex
+	]);
+	const value = useMemo(() => ({
+		images,
+		selectedIndex,
+		setSelectedIndex,
+		lightboxOpen,
+		setLightboxOpen,
+		goToNext,
+		goToPrevious,
+		classNames,
+		title
+	}), [
+		images,
+		selectedIndex,
+		setSelectedIndex,
+		lightboxOpen,
+		goToNext,
+		goToPrevious,
+		classNames,
+		title
+	]);
+	return /* @__PURE__ */ jsx(GalleryContext.Provider, {
+		value,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-main.tsx
+function GalleryMain({ children, badges, showNav = true, aspectRatio = "aspect-[4/5]", className }) {
+	const { images, selectedIndex, setLightboxOpen, goToNext, goToPrevious, classNames, title } = useGallery();
+	const [imagesLoaded, setImagesLoaded] = useState(new Set([0]));
+	const [touchStart, setTouchStart] = useState(null);
+	const [touchEnd, setTouchEnd] = useState(null);
+	const sliderRef = useRef(null);
+	const minSwipeDistance = 50;
+	useEffect(() => {
+		images.forEach((img, index) => {
+			if (index === 0) return;
+			const preloadImg = new window.Image();
+			preloadImg.src = img.src;
+			preloadImg.onload = () => {
+				setImagesLoaded((prev) => new Set([...prev, index]));
+			};
+		});
+	}, [images]);
+	const onTouchStart = useCallback((e) => {
+		setTouchEnd(null);
+		setTouchStart(e.targetTouches[0].clientX);
+	}, []);
+	const onTouchMove = useCallback((e) => {
+		setTouchEnd(e.targetTouches[0].clientX);
+	}, []);
+	const onTouchEnd = useCallback(() => {
+		if (!touchStart || !touchEnd) return;
+		const distance = touchStart - touchEnd;
+		if (distance > minSwipeDistance) goToNext();
+		if (distance < -minSwipeDistance) goToPrevious();
+	}, [
+		touchStart,
+		touchEnd,
+		goToNext,
+		goToPrevious
+	]);
+	const handleImageLoad = useCallback((index) => {
+		setImagesLoaded((prev) => new Set([...prev, index]));
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: sliderRef,
+			className: cn(aspectRatio, "bg-muted overflow-hidden relative rounded-lg", classNames?.main),
+			onTouchStart,
+			onTouchMove,
+			onTouchEnd,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("absolute inset-0 flex transition-transform duration-300 ease-out", classNames?.slider),
+					style: { transform: `translateX(-${selectedIndex * 100}%)` },
+					children: images.map((img, index) => /* @__PURE__ */ jsxs("div", {
+						className: "w-full h-full shrink-0 relative cursor-zoom-in",
+						onClick: () => setLightboxOpen(true),
+						children: [/* @__PURE__ */ jsx(Image, {
+							src: img.src,
+							alt: img.alt || `${title || "Gallery"} - Image ${index + 1}`,
+							fill: true,
+							className: cn("object-cover transition-opacity duration-300", imagesLoaded.has(index) ? "opacity-100" : "opacity-0", classNames?.mainImage),
+							sizes: "(max-width: 768px) 100vw, 50vw",
+							priority: index === 0,
+							onLoad: () => handleImageLoad(index)
+						}), !imagesLoaded.has(index) && /* @__PURE__ */ jsx("div", {
+							className: "absolute inset-0 flex items-center justify-center bg-muted",
+							children: /* @__PURE__ */ jsx("div", { className: "w-8 h-8 border-2 border-muted-foreground/20 border-t-muted-foreground rounded-full animate-spin" })
+						})]
+					}, index))
+				}),
+				badges && badges.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: cn("absolute top-4 left-4 flex flex-col gap-2 z-10", classNames?.badges),
+					children: badges.map((badge, index) => /* @__PURE__ */ jsx("span", {
+						className: cn("px-3 py-1 text-xs font-medium uppercase tracking-wider", classNames?.badge, badge.className),
+						children: badge.label
+					}, index))
+				}),
+				showNav && images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						goToPrevious();
+					},
+					className: cn("hidden sm:flex absolute left-3 top-1/2 -translate-y-1/2 z-10", "w-10 h-10 items-center justify-center rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, classNames?.navPrev),
+					"aria-label": "Previous image",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						goToNext();
+					},
+					className: cn("hidden sm:flex absolute right-3 top-1/2 -translate-y-1/2 z-10", "w-10 h-10 items-center justify-center rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, classNames?.navNext),
+					"aria-label": "Next image",
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+				})] }),
+				children
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-thumbnails.tsx
+function GalleryThumbnails({ showOnMobile = true, orientation = "horizontal", sizeClassName = "w-16 h-20 sm:w-20 sm:h-24", className }) {
+	const { images, selectedIndex, setSelectedIndex, classNames, title } = useGallery();
+	if (images.length <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex gap-2 sm:gap-3 scrollbar-hide", orientation === "vertical" ? "flex-col overflow-y-auto pr-2" : "overflow-x-auto pb-2", !showOnMobile && "hidden sm:flex", classNames?.thumbnails, className),
+		children: images.map((img, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setSelectedIndex(index),
+			className: cn("bg-muted overflow-hidden border-2 transition-all duration-200 shrink-0 rounded-md relative", sizeClassName, selectedIndex === index ? cn("border-foreground", classNames?.thumbnailActive) : cn("border-transparent opacity-60 hover:opacity-100", classNames?.thumbnail)),
+			"aria-label": `View image ${index + 1}`,
+			children: /* @__PURE__ */ jsx(Image, {
+				src: img.thumbnail || img.src,
+				alt: img.alt || `${title || "Gallery"} thumbnail ${index + 1}`,
+				fill: true,
+				className: "object-cover",
+				sizes: "80px"
+			})
+		}, index))
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-dots.tsx
+function GalleryDots({ showOnDesktop = false, className }) {
+	const { images, selectedIndex, setSelectedIndex, classNames } = useGallery();
+	if (images.length <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex justify-center gap-2 mt-3", !showOnDesktop && "sm:hidden", classNames?.dots, className),
+		children: images.map((_, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setSelectedIndex(index),
+			className: cn("h-2 rounded-full transition-all duration-300", selectedIndex === index ? cn("bg-foreground w-6", classNames?.dotActive) : cn("bg-muted-foreground/30 hover:bg-muted-foreground/50 w-2", classNames?.dot)),
+			"aria-label": `Go to image ${index + 1}`
+		}, index))
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-lightbox.tsx
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 4;
+const ZOOM_STEP = .5;
+function GalleryLightbox({ className }) {
+	const { images, selectedIndex, setSelectedIndex, lightboxOpen, setLightboxOpen, goToNext, goToPrevious, classNames, title } = useGallery();
+	const [zoom, setZoom] = useState(1);
+	const [position, setPosition] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isDragging, setIsDragging] = useState(false);
+	const [dragStart, setDragStart] = useState({
+		x: 0,
+		y: 0
+	});
+	const [imageLoaded, setImageLoaded] = useState(false);
+	useEffect(() => {
+		setZoom(1);
+		setPosition({
+			x: 0,
+			y: 0
+		});
+		setImageLoaded(false);
+	}, [selectedIndex, lightboxOpen]);
+	useEffect(() => {
+		if (!lightboxOpen) return;
+		const handleKeyDown = (e) => {
+			switch (e.key) {
+				case "Escape":
+					setLightboxOpen(false);
+					break;
+				case "ArrowLeft":
+					goToPrevious();
+					break;
+				case "ArrowRight":
+					goToNext();
+					break;
+				case "+":
+				case "=":
+					setZoom((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM));
+					break;
+				case "-":
+					setZoom((prev) => {
+						const newZoom = Math.max(prev - ZOOM_STEP, MIN_ZOOM);
+						if (newZoom === 1) setPosition({
+							x: 0,
+							y: 0
+						});
+						return newZoom;
+					});
+					break;
+				case "0":
+					setZoom(1);
+					setPosition({
+						x: 0,
+						y: 0
+					});
+					break;
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [
+		lightboxOpen,
+		goToNext,
+		goToPrevious,
+		setLightboxOpen
+	]);
+	useEffect(() => {
+		if (lightboxOpen) document.body.style.overflow = "hidden";
+		else document.body.style.overflow = "";
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [lightboxOpen]);
+	const handleWheel = useCallback((e) => {
+		e.preventDefault();
+		const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+		setZoom((prev) => {
+			const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, prev + delta));
+			if (newZoom === 1) setPosition({
+				x: 0,
+				y: 0
+			});
+			return newZoom;
+		});
+	}, []);
+	const handleMouseDown = (e) => {
+		if (zoom > 1) {
+			setIsDragging(true);
+			setDragStart({
+				x: e.clientX - position.x,
+				y: e.clientY - position.y
+			});
+		}
+	};
+	const handleMouseMove = (e) => {
+		if (isDragging && zoom > 1) setPosition({
+			x: e.clientX - dragStart.x,
+			y: e.clientY - dragStart.y
+		});
+	};
+	const handleMouseUp = () => setIsDragging(false);
+	const handleTouchStart = (e) => {
+		if (zoom > 1 && e.touches.length === 1) {
+			setIsDragging(true);
+			setDragStart({
+				x: e.touches[0].clientX - position.x,
+				y: e.touches[0].clientY - position.y
+			});
+		}
+	};
+	const handleTouchMove = (e) => {
+		if (isDragging && zoom > 1 && e.touches.length === 1) setPosition({
+			x: e.touches[0].clientX - dragStart.x,
+			y: e.touches[0].clientY - dragStart.y
+		});
+	};
+	const handleDoubleClick = () => {
+		if (zoom > 1) {
+			setZoom(1);
+			setPosition({
+				x: 0,
+				y: 0
+			});
+		} else setZoom(2);
+	};
+	if (!lightboxOpen) return null;
+	const currentImage = images[selectedIndex];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("fixed inset-0 z-50 bg-black", classNames?.lightbox, className),
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": `${title || "Gallery"} - Image ${selectedIndex + 1} of ${images.length}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("absolute top-0 left-0 right-0 z-50", "flex items-center justify-between p-4", "bg-gradient-to-b from-black/60 to-transparent", classNames?.lightboxHeader),
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-white text-sm font-medium",
+						children: [
+							selectedIndex + 1,
+							" / ",
+							images.length
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setZoom((prev) => {
+									const newZoom = Math.max(prev - ZOOM_STEP, MIN_ZOOM);
+									if (newZoom === 1) setPosition({
+										x: 0,
+										y: 0
+									});
+									return newZoom;
+								}),
+								disabled: zoom <= MIN_ZOOM,
+								className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors disabled:opacity-30",
+								"aria-label": "Zoom out",
+								children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-5 w-5 text-white" })
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-white text-sm min-w-[3rem] text-center",
+								children: [Math.round(zoom * 100), "%"]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setZoom((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM)),
+								disabled: zoom >= MAX_ZOOM,
+								className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors disabled:opacity-30",
+								"aria-label": "Zoom in",
+								children: /* @__PURE__ */ jsx(ZoomIn, { className: "h-5 w-5 text-white" })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => {
+									setZoom(1);
+									setPosition({
+										x: 0,
+										y: 0
+									});
+								},
+								disabled: zoom === 1,
+								className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors disabled:opacity-30",
+								"aria-label": "Reset zoom",
+								children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-5 w-5 text-white" })
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setLightboxOpen(false),
+						className: "p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors",
+						"aria-label": "Close",
+						children: /* @__PURE__ */ jsx(X, { className: "h-6 w-6 text-white" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("absolute inset-0 flex items-center justify-center", zoom > 1 ? "cursor-grab" : "cursor-zoom-in", isDragging && "cursor-grabbing"),
+				onWheel: handleWheel,
+				onMouseDown: handleMouseDown,
+				onMouseMove: handleMouseMove,
+				onMouseUp: handleMouseUp,
+				onMouseLeave: handleMouseUp,
+				onTouchStart: handleTouchStart,
+				onTouchMove: handleTouchMove,
+				onTouchEnd: handleMouseUp,
+				onDoubleClick: handleDoubleClick,
+				children: [!imageLoaded && /* @__PURE__ */ jsx("div", {
+					className: "absolute inset-0 flex items-center justify-center",
+					children: /* @__PURE__ */ jsx("div", { className: "w-12 h-12 border-4 border-white/20 border-t-white rounded-full animate-spin" })
+				}), /* @__PURE__ */ jsx("div", {
+					className: "relative w-full h-full transition-transform duration-100",
+					style: { transform: `scale(${zoom}) translate(${position.x / zoom}px, ${position.y / zoom}px)` },
+					children: /* @__PURE__ */ jsx(Image, {
+						src: currentImage.src,
+						alt: currentImage.alt || `${title || "Gallery"} - Image ${selectedIndex + 1}`,
+						fill: true,
+						className: cn("object-contain transition-opacity duration-300", imageLoaded ? "opacity-100" : "opacity-0", classNames?.lightboxImage),
+						sizes: "100vw",
+						quality: 100,
+						priority: true,
+						unoptimized: true,
+						onLoad: () => setImageLoaded(true)
+					})
+				})]
+			}),
+			images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: goToPrevious,
+				className: "absolute left-4 top-1/2 -translate-y-1/2 z-50 p-3 rounded-full bg-white/10 hover:bg-white/20 transition-colors",
+				"aria-label": "Previous",
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-8 w-8 text-white" })
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: goToNext,
+				className: "absolute right-4 top-1/2 -translate-y-1/2 z-50 p-3 rounded-full bg-white/10 hover:bg-white/20 transition-colors",
+				"aria-label": "Next",
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-8 w-8 text-white" })
+			})] }),
+			images.length > 1 && /* @__PURE__ */ jsxs("div", {
+				className: cn("absolute bottom-0 left-0 right-0 z-50 p-4", "bg-gradient-to-t from-black/60 to-transparent", classNames?.lightboxFooter),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex justify-center gap-2 overflow-x-auto max-w-full pb-2",
+					children: images.map((img, index) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setSelectedIndex(index),
+						className: cn("w-16 h-16 md:w-20 md:h-20 overflow-hidden border-2 transition-all shrink-0 rounded-md relative", selectedIndex === index ? "border-white opacity-100" : "border-transparent opacity-50 hover:opacity-80"),
+						"aria-label": `View image ${index + 1}`,
+						children: /* @__PURE__ */ jsx(Image, {
+							src: img.thumbnail || img.src,
+							alt: img.alt || `Thumbnail ${index + 1}`,
+							fill: true,
+							className: "object-cover",
+							sizes: "80px"
+						})
+					}, index))
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-white/50 text-xs text-center mt-2 hidden md:block",
+					children: "Scroll to zoom · Double-click to toggle · Drag to pan · Arrow keys to navigate"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/gallery/gallery-nav.tsx
+function GalleryNav({ direction, className, children }) {
+	const { images, goToNext, goToPrevious, classNames } = useGallery();
+	if (images.length <= 1) return null;
+	const isPrev = direction === "prev";
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: isPrev ? goToPrevious : goToNext,
+		className: cn("flex items-center justify-center", "w-10 h-10 rounded-full", "bg-background/80 backdrop-blur-sm shadow-md hover:bg-background transition-colors", classNames?.nav, isPrev ? classNames?.navPrev : classNames?.navNext, className),
+		"aria-label": isPrev ? "Previous image" : "Next image",
+		children: children || (isPrev ? /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" }))
+	});
+}
+
+//#endregion
+//#region src/components/gallery/index.tsx
+function ImageGalleryRoot({ children, images, defaultIndex = 0, classNames, title, onIndexChange, className }) {
+	return /* @__PURE__ */ jsx(GalleryProvider, {
+		images,
+		defaultIndex,
+		classNames,
+		title,
+		onIndexChange,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("space-y-4", classNames?.root, className),
+			children
+		})
+	});
+}
+function ImageGallerySimple({ images, title, badges, defaultIndex = 0, showMobileThumbnails = true, aspectRatio = "aspect-[4/5]", showNav = true, classNames, onIndexChange, className }) {
+	if (!images || images.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn(aspectRatio, "bg-muted flex items-center justify-center rounded-lg", className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "No image available"
+		})
+	});
+	return /* @__PURE__ */ jsxs(ImageGalleryRoot, {
+		images,
+		defaultIndex,
+		classNames,
+		title,
+		onIndexChange,
+		className,
+		children: [
+			/* @__PURE__ */ jsx(GalleryMain, {
+				badges,
+				showNav,
+				aspectRatio
+			}),
+			!showMobileThumbnails && /* @__PURE__ */ jsx(GalleryDots, {}),
+			/* @__PURE__ */ jsx(GalleryThumbnails, { showOnMobile: showMobileThumbnails }),
+			/* @__PURE__ */ jsx(GalleryLightbox, {})
+		]
+	});
+}
+const ImageGallery = Object.assign(ImageGallerySimple, {
+	Root: ImageGalleryRoot,
+	Main: GalleryMain,
+	Thumbnails: GalleryThumbnails,
+	Dots: GalleryDots,
+	Nav: GalleryNav,
+	Lightbox: GalleryLightbox
+});
+
+//#endregion
+export { ImageGallery, useGallery, useGalleryOptional };