matrix-design-system 1.0.0

package/dist/organism/header/brand-header/brand-header.mjs

@@ -0,0 +1,132 @@
+"use client";
+import { useGlassmorphism } from "../../../hooks/use-glassmorphism.mjs";
+import { ImageGlow } from "../../../atoms/effects/image-glow/image-glow.mjs";
+import { Cursor } from "../../../atoms/typography/terminal-blocks/terminal-blocks.mjs";
+import { MatrixHeaderBackground } from "../../../molecules/effects/matrix-header-background/matrix-header-background.mjs";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/organism/header/brand-header/brand-header.tsx
+const Passthrough = (t0) => {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(Fragment, { children });
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+const BrandHeader = (t0) => {
+	const $ = c(23);
+	const { big, wrapper: t1, logo, imageComponent } = t0;
+	const Wrapper = t1 === void 0 ? Passthrough : t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { noScale: true };
+		$[0] = t2;
+	} else t2 = $[0];
+	const { glassmorphismClass } = useGlassmorphism(t2);
+	const height = big ? "h-auto" : "h-[170px] md:h-[200px]";
+	const margins = big ? "mt-14 mb-8" : "mt-12";
+	const t3 = `block ${height}`;
+	let t4;
+	if ($[1] !== big) {
+		t4 = /* @__PURE__ */ jsx(MatrixHeaderBackground, { big });
+		$[1] = big;
+		$[2] = t4;
+	} else t4 = $[2];
+	const t5 = `flex items-center ${margins}`;
+	const t6 = `${glassmorphismClass} w-full p-5 md:p-9 z-30`;
+	let t7;
+	if ($[3] !== imageComponent || $[4] !== logo) {
+		t7 = /* @__PURE__ */ jsx(ImageGlow, {
+			imageComponent,
+			src: logo,
+			alt: "blog logo",
+			width: 80,
+			height: 80,
+			placeholder: "blur",
+			className: "mr-3 h-[50px] w-[50px] object-cover sm:h-[80px] sm:w-[80px]"
+		});
+		$[3] = imageComponent;
+		$[4] = logo;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsxs("span", {
+			className: "text-shadow-md",
+			children: [">", " "]
+		});
+		$[6] = t8;
+	} else t8 = $[6];
+	let t9;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col justify-start",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-accent m-0 block font-mono text-2xl font-bold uppercase text-shadow-lg sm:text-4xl",
+				children: [
+					t8,
+					"CHICIO CODING",
+					/* @__PURE__ */ jsx(Cursor, {})
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-primary-text font-mono text-xs font-normal text-shadow-md sm:text-lg",
+				children: "Pixels. Code. Unplugged."
+			})]
+		});
+		$[7] = t9;
+	} else t9 = $[7];
+	let t10;
+	if ($[8] !== t7) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center",
+			children: [t7, t9]
+		});
+		$[8] = t7;
+		$[9] = t10;
+	} else t10 = $[9];
+	let t11;
+	if ($[10] !== t10 || $[11] !== t6) {
+		t11 = /* @__PURE__ */ jsx("div", {
+			className: t6,
+			children: t10
+		});
+		$[10] = t10;
+		$[11] = t6;
+		$[12] = t11;
+	} else t11 = $[12];
+	let t12;
+	if ($[13] !== t11 || $[14] !== t5) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			className: t5,
+			children: t11
+		});
+		$[13] = t11;
+		$[14] = t5;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
+	if ($[16] !== Wrapper || $[17] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Wrapper, { children: t12 });
+		$[16] = Wrapper;
+		$[17] = t12;
+		$[18] = t13;
+	} else t13 = $[18];
+	let t14;
+	if ($[19] !== t13 || $[20] !== t3 || $[21] !== t4) {
+		t14 = /* @__PURE__ */ jsxs("div", {
+			className: t3,
+			children: [t4, t13]
+		});
+		$[19] = t13;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t14;
+	} else t14 = $[22];
+	return t14;
+};
+//#endregion
+export { BrandHeader };

package/dist/organism/header/brand-header/index.d.mts

@@ -0,0 +1,2 @@
+import { BrandHeader, BrandHeaderProps } from "./brand-header.mjs";
+export { BrandHeader, type BrandHeaderProps };

package/dist/organism/image-carousel/fullscreen-modal/fullscreen-modal.mjs

@@ -0,0 +1,148 @@
+"use client";
+import { MotionDiv } from "../../../atoms/animation/motion-div/motion-div.mjs";
+import { Button } from "../../../atoms/buttons/button/button.mjs";
+import { PlainImage } from "../../../atoms/effects/plain-image/plain-image.mjs";
+import { NavigationButtons } from "../navigation-buttons/navigation-buttons.mjs";
+import { PageIndicators } from "../page-indicators/page-indicators.mjs";
+import { useFullscreenModalStore } from "./use-fullscreen-modal-store.mjs";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BiX } from "react-icons/bi";
+//#region src/organism/image-carousel/fullscreen-modal/fullscreen-modal.tsx
+const FullscreenModal = (t0) => {
+	const $ = c(34);
+	const { images, currentIndex: initialIndex, onClose, onNavigate, alt, imageComponent: t1 } = t0;
+	const Image = t1 === void 0 ? PlainImage : t1;
+	const { state, effects } = useFullscreenModalStore(images, initialIndex, onClose, onNavigate);
+	const { currentIndex } = state;
+	const { setModalEl, goToPrevious, goToNext, navigateTo, stopPropagation, handleKeyDown, handleDragEnd } = effects;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(BiX, { className: "size-8 md:size-10" });
+		$[0] = t2;
+	} else t2 = $[0];
+	let t3;
+	if ($[1] !== onClose) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			className: "absolute top-4 right-4 z-10 p-2!",
+			"aria-label": "Close fullscreen",
+			children: t2
+		});
+		$[1] = onClose;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			left: 0,
+			right: 0
+		};
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== Image || $[5] !== alt || $[6] !== currentIndex || $[7] !== images || $[8] !== initialIndex) {
+		let t6;
+		if ($[10] !== Image || $[11] !== alt || $[12] !== currentIndex || $[13] !== initialIndex) {
+			t6 = (src, index) => /* @__PURE__ */ jsx(MotionDiv, {
+				initial: false,
+				animate: {
+					opacity: index === currentIndex ? 1 : 0,
+					x: index === currentIndex ? 0 : index < currentIndex ? -300 : 300
+				},
+				transition: {
+					type: "spring",
+					stiffness: 300,
+					damping: 30
+				},
+				className: "absolute inset-0",
+				children: /* @__PURE__ */ jsx(Image, {
+					src,
+					alt: `${alt} - Image ${index + 1}`,
+					fill: true,
+					loading: index === initialIndex ? "eager" : "lazy",
+					className: "object-contain"
+				})
+			}, index);
+			$[10] = Image;
+			$[11] = alt;
+			$[12] = currentIndex;
+			$[13] = initialIndex;
+			$[14] = t6;
+		} else t6 = $[14];
+		t5 = images.map(t6);
+		$[4] = Image;
+		$[5] = alt;
+		$[6] = currentIndex;
+		$[7] = images;
+		$[8] = initialIndex;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[15] !== handleDragEnd || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(MotionDiv, {
+			drag: "x",
+			dragConstraints: t4,
+			dragElastic: .2,
+			onDragEnd: handleDragEnd,
+			className: "relative h-full w-full cursor-grab active:cursor-grabbing",
+			children: t5
+		});
+		$[15] = handleDragEnd;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== currentIndex || $[19] !== goToNext || $[20] !== goToPrevious || $[21] !== images || $[22] !== navigateTo) {
+		t7 = images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(NavigationButtons, {
+			onPrevious: goToPrevious,
+			onNext: goToNext,
+			stopPropagation: true
+		}), /* @__PURE__ */ jsx(PageIndicators, {
+			images,
+			currentIndex,
+			onSelect: navigateTo,
+			glassmorphism: true
+		})] });
+		$[18] = currentIndex;
+		$[19] = goToNext;
+		$[20] = goToPrevious;
+		$[21] = images;
+		$[22] = navigateTo;
+		$[23] = t7;
+	} else t7 = $[23];
+	let t8;
+	if ($[24] !== stopPropagation || $[25] !== t6 || $[26] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "glow-container relative flex h-10/12 sm:h-full w-full max-w-11/12 sm:max-w-10/12 items-center bg-general-background justify-center overflow-hidden",
+			onClick: stopPropagation,
+			children: [t6, t7]
+		});
+		$[24] = stopPropagation;
+		$[25] = t6;
+		$[26] = t7;
+		$[27] = t8;
+	} else t8 = $[27];
+	let t9;
+	if ($[28] !== handleKeyDown || $[29] !== onClose || $[30] !== setModalEl || $[31] !== t3 || $[32] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			ref: setModalEl,
+			className: "fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4",
+			onClick: onClose,
+			onKeyDown: handleKeyDown,
+			role: "dialog",
+			"aria-modal": "true",
+			tabIndex: 0,
+			children: [t3, t8]
+		});
+		$[28] = handleKeyDown;
+		$[29] = onClose;
+		$[30] = setModalEl;
+		$[31] = t3;
+		$[32] = t8;
+		$[33] = t9;
+	} else t9 = $[33];
+	return t9;
+};
+//#endregion
+export { FullscreenModal };

package/dist/organism/image-carousel/fullscreen-modal/use-fullscreen-modal-store.mjs

@@ -0,0 +1,129 @@
+"use client";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+//#region src/organism/image-carousel/fullscreen-modal/use-fullscreen-modal-store.ts
+const useFullscreenModalStore = (images, initialIndex, onClose, onNavigate) => {
+	const $ = c(32);
+	const [currentIndex, setCurrentIndex] = useState(initialIndex);
+	const [modalEl, setModalEl] = useState(null);
+	let t0;
+	let t1;
+	if ($[0] !== modalEl) {
+		t0 = () => {
+			modalEl?.focus();
+		};
+		t1 = [modalEl];
+		$[0] = modalEl;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[3] !== currentIndex || $[4] !== images || $[5] !== onNavigate) {
+		t2 = () => {
+			const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
+			setCurrentIndex(newIndex);
+			onNavigate?.(newIndex);
+		};
+		$[3] = currentIndex;
+		$[4] = images;
+		$[5] = onNavigate;
+		$[6] = t2;
+	} else t2 = $[6];
+	const goToPrevious = t2;
+	let t3;
+	if ($[7] !== currentIndex || $[8] !== images || $[9] !== onNavigate) {
+		t3 = () => {
+			const newIndex_0 = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
+			setCurrentIndex(newIndex_0);
+			onNavigate?.(newIndex_0);
+		};
+		$[7] = currentIndex;
+		$[8] = images;
+		$[9] = onNavigate;
+		$[10] = t3;
+	} else t3 = $[10];
+	const goToNext = t3;
+	let t4;
+	if ($[11] !== onNavigate) {
+		t4 = (index) => {
+			setCurrentIndex(index);
+			onNavigate?.(index);
+		};
+		$[11] = onNavigate;
+		$[12] = t4;
+	} else t4 = $[12];
+	const navigateTo = t4;
+	const stopPropagation = _temp;
+	let t5;
+	if ($[13] !== goToNext || $[14] !== goToPrevious || $[15] !== onClose) {
+		t5 = (e_0) => {
+			if (e_0.key === "Escape") onClose();
+			if (e_0.key === "ArrowLeft") goToPrevious();
+			if (e_0.key === "ArrowRight") goToNext();
+		};
+		$[13] = goToNext;
+		$[14] = goToPrevious;
+		$[15] = onClose;
+		$[16] = t5;
+	} else t5 = $[16];
+	const handleKeyDown = t5;
+	let t6;
+	if ($[17] !== goToNext || $[18] !== goToPrevious) {
+		t6 = (_, info) => {
+			if (info.offset.x > 50) goToPrevious();
+			else if (info.offset.x < -50) goToNext();
+		};
+		$[17] = goToNext;
+		$[18] = goToPrevious;
+		$[19] = t6;
+	} else t6 = $[19];
+	const handleDragEnd = t6;
+	let t7;
+	if ($[20] !== currentIndex || $[21] !== modalEl) {
+		t7 = {
+			currentIndex,
+			modalEl
+		};
+		$[20] = currentIndex;
+		$[21] = modalEl;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== goToNext || $[24] !== goToPrevious || $[25] !== handleDragEnd || $[26] !== handleKeyDown || $[27] !== navigateTo) {
+		t8 = {
+			setModalEl,
+			goToPrevious,
+			goToNext,
+			navigateTo,
+			stopPropagation,
+			handleKeyDown,
+			handleDragEnd
+		};
+		$[23] = goToNext;
+		$[24] = goToPrevious;
+		$[25] = handleDragEnd;
+		$[26] = handleKeyDown;
+		$[27] = navigateTo;
+		$[28] = t8;
+	} else t8 = $[28];
+	let t9;
+	if ($[29] !== t7 || $[30] !== t8) {
+		t9 = {
+			state: t7,
+			effects: t8
+		};
+		$[29] = t7;
+		$[30] = t8;
+		$[31] = t9;
+	} else t9 = $[31];
+	return t9;
+};
+function _temp(e) {
+	return e.stopPropagation();
+}
+//#endregion
+export { useFullscreenModalStore };

package/dist/organism/image-carousel/image-carousel.d.mts

@@ -0,0 +1,14 @@
+import { ImageComponent } from "../../atoms/effects/plain-image/plain-image.mjs";
+import "../../atoms/effects/plain-image/index.mjs";
+import { FC } from "react";
+//#region src/organism/image-carousel/image-carousel.d.ts
+interface ImageCarouselProps {
+  images: string[];
+  alt: string;
+  caption?: string;
+  className?: string;
+  imageComponent?: ImageComponent;
+}
+declare const ImageCarousel: FC<ImageCarouselProps>;
+//#endregion
+export { ImageCarousel, ImageCarouselProps };

package/dist/organism/image-carousel/image-carousel.mjs

@@ -0,0 +1,225 @@
+"use client";
+import { MotionDiv } from "../../atoms/animation/motion-div/motion-div.mjs";
+import { imageShimmerPlaceholder } from "../../atoms/effects/image-shimmer-placeholder/image-shimmer-placeholder.mjs";
+import { PlainImage } from "../../atoms/effects/plain-image/plain-image.mjs";
+import { ImageGlow } from "../../atoms/effects/image-glow/image-glow.mjs";
+import { NavigationButtons } from "./navigation-buttons/navigation-buttons.mjs";
+import { PageIndicators } from "./page-indicators/page-indicators.mjs";
+import { FullscreenModal } from "./fullscreen-modal/fullscreen-modal.mjs";
+import { useImageCarouselStore } from "./use-image-carousel-store.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organism/image-carousel/image-carousel.tsx
+const ImageCarousel = (t0) => {
+	const $ = c(59);
+	const { images, alt, caption, className, imageComponent: t1 } = t0;
+	const Image = t1 === void 0 ? PlainImage : t1;
+	const { state, effects } = useImageCarouselStore(images.length);
+	const { currentIndex, isFullscreen } = state;
+	const { goToPrevious, goToNext, openFullscreen, closeFullscreen, setCurrentIndex, handleDragEnd } = effects;
+	if (images.length === 1) {
+		const singleImage = images[0];
+		let t2;
+		if ($[0] !== Image || $[1] !== alt || $[2] !== openFullscreen || $[3] !== singleImage) {
+			t2 = /* @__PURE__ */ jsx(ImageGlow, {
+				imageComponent: Image,
+				src: singleImage,
+				alt,
+				width: 800,
+				height: 450,
+				className: "h-96 w-full cursor-pointer object-contain bg-general-background-light overflow-hidden",
+				onClick: openFullscreen
+			});
+			$[0] = Image;
+			$[1] = alt;
+			$[2] = openFullscreen;
+			$[3] = singleImage;
+			$[4] = t2;
+		} else t2 = $[4];
+		let t3;
+		if ($[5] !== caption) {
+			t3 = caption && /* @__PURE__ */ jsx("figcaption", { children: caption });
+			$[5] = caption;
+			$[6] = t3;
+		} else t3 = $[6];
+		let t4;
+		if ($[7] !== Image || $[8] !== alt || $[9] !== closeFullscreen || $[10] !== images || $[11] !== isFullscreen) {
+			t4 = isFullscreen && /* @__PURE__ */ jsx(FullscreenModal, {
+				images,
+				currentIndex: 0,
+				onClose: closeFullscreen,
+				alt,
+				imageComponent: Image
+			});
+			$[7] = Image;
+			$[8] = alt;
+			$[9] = closeFullscreen;
+			$[10] = images;
+			$[11] = isFullscreen;
+			$[12] = t4;
+		} else t4 = $[12];
+		let t5;
+		if ($[13] !== className || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				className,
+				children: [
+					t2,
+					t3,
+					t4
+				]
+			});
+			$[13] = className;
+			$[14] = t2;
+			$[15] = t3;
+			$[16] = t4;
+			$[17] = t5;
+		} else t5 = $[17];
+		return t5;
+	}
+	const t2 = `relative ${className}`;
+	let t3;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			left: 0,
+			right: 0
+		};
+		$[18] = t3;
+	} else t3 = $[18];
+	let t4;
+	if ($[19] !== Image || $[20] !== alt || $[21] !== currentIndex || $[22] !== images || $[23] !== openFullscreen) {
+		let t5;
+		if ($[25] !== Image || $[26] !== alt || $[27] !== currentIndex || $[28] !== openFullscreen) {
+			t5 = (src, index) => /* @__PURE__ */ jsx(MotionDiv, {
+				initial: false,
+				animate: {
+					opacity: index === currentIndex ? 1 : 0,
+					x: index === currentIndex ? 0 : index < currentIndex ? -300 : 300
+				},
+				transition: {
+					type: "spring",
+					stiffness: 300,
+					damping: 30
+				},
+				className: "absolute inset-0",
+				children: /* @__PURE__ */ jsx(Image, {
+					src,
+					alt: `${alt} - Image ${index + 1}`,
+					width: 800,
+					height: 450,
+					loading: index === 0 ? "eager" : "lazy",
+					className: "h-96 w-full cursor-pointer object-contain bg-general-background-light overflow-hidden",
+					onClick: openFullscreen,
+					placeholder: imageShimmerPlaceholder
+				})
+			}, index);
+			$[25] = Image;
+			$[26] = alt;
+			$[27] = currentIndex;
+			$[28] = openFullscreen;
+			$[29] = t5;
+		} else t5 = $[29];
+		t4 = images.map(t5);
+		$[19] = Image;
+		$[20] = alt;
+		$[21] = currentIndex;
+		$[22] = images;
+		$[23] = openFullscreen;
+		$[24] = t4;
+	} else t4 = $[24];
+	let t5;
+	if ($[30] !== handleDragEnd || $[31] !== t4) {
+		t5 = /* @__PURE__ */ jsx(MotionDiv, {
+			drag: "x",
+			dragConstraints: t3,
+			dragElastic: .2,
+			onDragEnd: handleDragEnd,
+			className: "relative h-96 cursor-grab active:cursor-grabbing",
+			children: t4
+		});
+		$[30] = handleDragEnd;
+		$[31] = t4;
+		$[32] = t5;
+	} else t5 = $[32];
+	let t6;
+	if ($[33] !== goToNext || $[34] !== goToPrevious) {
+		t6 = /* @__PURE__ */ jsx(NavigationButtons, {
+			onPrevious: goToPrevious,
+			onNext: goToNext
+		});
+		$[33] = goToNext;
+		$[34] = goToPrevious;
+		$[35] = t6;
+	} else t6 = $[35];
+	let t7;
+	if ($[36] !== currentIndex || $[37] !== images || $[38] !== setCurrentIndex) {
+		t7 = /* @__PURE__ */ jsx(PageIndicators, {
+			images,
+			currentIndex,
+			onSelect: setCurrentIndex,
+			glassmorphism: true
+		});
+		$[36] = currentIndex;
+		$[37] = images;
+		$[38] = setCurrentIndex;
+		$[39] = t7;
+	} else t7 = $[39];
+	let t8;
+	if ($[40] !== t5 || $[41] !== t6 || $[42] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "glow-container relative overflow-hidden",
+			children: [
+				t5,
+				t6,
+				t7
+			]
+		});
+		$[40] = t5;
+		$[41] = t6;
+		$[42] = t7;
+		$[43] = t8;
+	} else t8 = $[43];
+	let t9;
+	if ($[44] !== caption) {
+		t9 = caption && /* @__PURE__ */ jsx("figcaption", { children: caption });
+		$[44] = caption;
+		$[45] = t9;
+	} else t9 = $[45];
+	let t10;
+	if ($[46] !== Image || $[47] !== alt || $[48] !== closeFullscreen || $[49] !== currentIndex || $[50] !== images || $[51] !== isFullscreen || $[52] !== setCurrentIndex) {
+		t10 = isFullscreen && /* @__PURE__ */ jsx(FullscreenModal, {
+			images,
+			currentIndex,
+			onClose: closeFullscreen,
+			onNavigate: setCurrentIndex,
+			alt,
+			imageComponent: Image
+		});
+		$[46] = Image;
+		$[47] = alt;
+		$[48] = closeFullscreen;
+		$[49] = currentIndex;
+		$[50] = images;
+		$[51] = isFullscreen;
+		$[52] = setCurrentIndex;
+		$[53] = t10;
+	} else t10 = $[53];
+	let t11;
+	if ($[54] !== t10 || $[55] !== t2 || $[56] !== t8 || $[57] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			children: [
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[54] = t10;
+		$[55] = t2;
+		$[56] = t8;
+		$[57] = t9;
+		$[58] = t11;
+	} else t11 = $[58];
+	return t11;
+};
+//#endregion
+export { ImageCarousel };

package/dist/organism/image-carousel/index.d.mts

@@ -0,0 +1,2 @@
+import { ImageCarousel, ImageCarouselProps } from "./image-carousel.mjs";
+export { ImageCarousel, type ImageCarouselProps };

package/dist/organism/image-carousel/navigation-buttons/navigation-buttons.mjs

@@ -0,0 +1,22 @@
+import { Button } from "../../../atoms/buttons/button/button.mjs";
+import { useNavigationButtonsStore } from "./use-navigation-buttons-store.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BiChevronLeft, BiChevronRight } from "react-icons/bi";
+//#region src/organism/image-carousel/navigation-buttons/navigation-buttons.tsx
+const NavigationButtons = ({ onPrevious, onNext, stopPropagation = false }) => {
+	const { effects } = useNavigationButtonsStore(onPrevious, onNext, stopPropagation);
+	const { handlePrevious, handleNext } = effects;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		onClick: handlePrevious,
+		className: "absolute top-1/2 left-4 -translate-y-1/2 hidden md:flex",
+		"aria-label": "Previous image",
+		children: /* @__PURE__ */ jsx(BiChevronLeft, { className: "size-10 md:size-12" })
+	}), /* @__PURE__ */ jsx(Button, {
+		onClick: handleNext,
+		className: "absolute top-1/2 right-4 -translate-y-1/2 hidden md:flex",
+		"aria-label": "Next image",
+		children: /* @__PURE__ */ jsx(BiChevronRight, { className: "size-10 md:size-12" })
+	})] });
+};
+//#endregion
+export { NavigationButtons };

package/dist/organism/image-carousel/navigation-buttons/use-navigation-buttons-store.mjs

@@ -0,0 +1,18 @@
+"use client";
+//#region src/organism/image-carousel/navigation-buttons/use-navigation-buttons-store.ts
+const useNavigationButtonsStore = (onPrevious, onNext, stopPropagation) => {
+	const handlePrevious = (e) => {
+		if (stopPropagation) e.stopPropagation();
+		onPrevious();
+	};
+	const handleNext = (e) => {
+		if (stopPropagation) e.stopPropagation();
+		onNext();
+	};
+	return { effects: {
+		handlePrevious,
+		handleNext
+	} };
+};
+//#endregion
+export { useNavigationButtonsStore };