matrix-design-system 1.0.0

package/dist/organism/image-carousel/page-indicators/page-indicator-button/page-indicator-button.mjs

@@ -0,0 +1,14 @@
+import { usePageIndicatorButtonStore } from "./use-page-indicator-button-store.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/organism/image-carousel/page-indicators/page-indicator-button/page-indicator-button.tsx
+const PageIndicatorButton = ({ index, isActive, onSelect }) => {
+	const { effects } = usePageIndicatorButtonStore(index, onSelect);
+	const { handleClick } = effects;
+	return /* @__PURE__ */ jsx("button", {
+		onClick: handleClick,
+		className: `size-3 rounded-full transition-all duration-300 ${isActive ? "bg-primary scale-125 shadow-lg" : "bg-primary-text/30 hover:bg-primary-text/50"}`,
+		"aria-label": `Go to image ${index + 1}`
+	});
+};
+//#endregion
+export { PageIndicatorButton };

package/dist/organism/image-carousel/page-indicators/page-indicator-button/use-page-indicator-button-store.mjs

@@ -0,0 +1,11 @@
+"use client";
+//#region src/organism/image-carousel/page-indicators/page-indicator-button/use-page-indicator-button-store.ts
+const usePageIndicatorButtonStore = (index, onSelect) => {
+	const handleClick = (e) => {
+		e.stopPropagation();
+		onSelect(index);
+	};
+	return { effects: { handleClick } };
+};
+//#endregion
+export { usePageIndicatorButtonStore };

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

@@ -0,0 +1,20 @@
+import { useGlassmorphism } from "../../../hooks/use-glassmorphism.mjs";
+import { PageIndicatorButton } from "./page-indicator-button/page-indicator-button.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/organism/image-carousel/page-indicators/page-indicators.tsx
+const PageIndicators = ({ images, currentIndex, onSelect, glassmorphism = false }) => {
+	const { glassmorphismClass } = useGlassmorphism();
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute bottom-4 left-1/2 -translate-x-1/2",
+		children: /* @__PURE__ */ jsx("div", {
+			className: `flex gap-2 ${glassmorphism ? `rounded-full p-3 ${glassmorphismClass}` : ""}`,
+			children: images.map((_, index) => /* @__PURE__ */ jsx(PageIndicatorButton, {
+				index,
+				isActive: index === currentIndex,
+				onSelect
+			}, index))
+		})
+	});
+};
+//#endregion
+export { PageIndicators };

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

@@ -0,0 +1,88 @@
+"use client";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+//#region src/organism/image-carousel/use-image-carousel-store.ts
+const useImageCarouselStore = (imagesLength) => {
+	const $ = c(19);
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	let t0;
+	if ($[0] !== imagesLength) {
+		t0 = () => {
+			setCurrentIndex((prev) => prev === 0 ? imagesLength - 1 : prev - 1);
+		};
+		$[0] = imagesLength;
+		$[1] = t0;
+	} else t0 = $[1];
+	const goToPrevious = t0;
+	let t1;
+	if ($[2] !== imagesLength) {
+		t1 = () => {
+			setCurrentIndex((prev_0) => prev_0 === imagesLength - 1 ? 0 : prev_0 + 1);
+		};
+		$[2] = imagesLength;
+		$[3] = t1;
+	} else t1 = $[3];
+	const goToNext = t1;
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => setIsFullscreen(true);
+		$[4] = t2;
+	} else t2 = $[4];
+	const openFullscreen = t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => setIsFullscreen(false);
+		$[5] = t3;
+	} else t3 = $[5];
+	const closeFullscreen = t3;
+	let t4;
+	if ($[6] !== goToNext || $[7] !== goToPrevious) {
+		t4 = (_, info) => {
+			if (info.offset.x > 50) goToPrevious();
+			else if (info.offset.x < -50) goToNext();
+		};
+		$[6] = goToNext;
+		$[7] = goToPrevious;
+		$[8] = t4;
+	} else t4 = $[8];
+	const handleDragEnd = t4;
+	let t5;
+	if ($[9] !== currentIndex || $[10] !== isFullscreen) {
+		t5 = {
+			currentIndex,
+			isFullscreen
+		};
+		$[9] = currentIndex;
+		$[10] = isFullscreen;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== goToNext || $[13] !== goToPrevious || $[14] !== handleDragEnd) {
+		t6 = {
+			goToPrevious,
+			goToNext,
+			openFullscreen,
+			closeFullscreen,
+			setCurrentIndex,
+			handleDragEnd
+		};
+		$[12] = goToNext;
+		$[13] = goToPrevious;
+		$[14] = handleDragEnd;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== t5 || $[17] !== t6) {
+		t7 = {
+			state: t5,
+			effects: t6
+		};
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	return t7;
+};
+//#endregion
+export { useImageCarouselStore };

package/dist/organism/lightbox/index.d.mts

@@ -0,0 +1,2 @@
+import { Lightbox } from "./lightbox.mjs";
+export { Lightbox };

package/dist/organism/lightbox/lightbox.d.mts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+//#region src/organism/lightbox/lightbox.d.ts
+declare const Lightbox: FC;
+//#endregion
+export { Lightbox };

package/dist/organism/lightbox/lightbox.mjs

@@ -0,0 +1,100 @@
+"use client";
+import { MotionDiv } from "../../atoms/animation/motion-div/motion-div.mjs";
+import { Button } from "../../atoms/buttons/button/button.mjs";
+import { Overlay } from "../../atoms/effects/overlay/overlay.mjs";
+import { useLightboxStore } from "./use-lightbox-store.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BiX } from "react-icons/bi";
+//#region src/organism/lightbox/lightbox.tsx
+const lightboxVariants = {
+	hidden: {
+		opacity: 0,
+		scale: .9
+	},
+	visible: {
+		opacity: 1,
+		scale: 1
+	},
+	exit: {
+		opacity: 0,
+		scale: .9,
+		transition: { duration: .2 }
+	}
+};
+const Lightbox = () => {
+	const $ = c(15);
+	const { state, effects } = useLightboxStore();
+	const { open, src, alt } = state;
+	const { setDialogEl, close, stopPropagation } = effects;
+	if (!open) return null;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(BiX, { className: "size-8 md:size-10" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== close) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			onClick: close,
+			className: "fixed top-4 right-4 z-50 p-2!",
+			"aria-label": "Close lightbox",
+			children: t0
+		});
+		$[1] = close;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = alt || "Enlarged image";
+	let t3;
+	if ($[3] !== alt || $[4] !== src) {
+		t3 = /* @__PURE__ */ jsx(MotionDiv, {
+			variants: lightboxVariants,
+			initial: "hidden",
+			animate: "visible",
+			exit: "exit",
+			className: "flex h-full w-full items-center justify-center",
+			children: /* @__PURE__ */ jsx("img", {
+				src,
+				alt,
+				className: "max-h-[90vh] max-w-[90vw] rounded-xl object-contain"
+			})
+		});
+		$[3] = alt;
+		$[4] = src;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== setDialogEl || $[7] !== stopPropagation || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			ref: setDialogEl,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": t2,
+			tabIndex: -1,
+			onClick: stopPropagation,
+			className: "fixed top-1/2 left-1/2 z-50 max-h-[90vh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 p-4",
+			children: t3
+		});
+		$[6] = setDialogEl;
+		$[7] = stopPropagation;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== close || $[12] !== t1 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Overlay, {
+			onClick: close,
+			delay: 0,
+			className: "z-[60]!",
+			children: [t1, t4]
+		});
+		$[11] = close;
+		$[12] = t1;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+};
+//#endregion
+export { Lightbox };

package/dist/organism/lightbox/use-lightbox-store.mjs

@@ -0,0 +1,120 @@
+"use client";
+import { lightboxOpenEvent } from "../../state/lightbox/lightbox-events.mjs";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+//#region src/organism/lightbox/use-lightbox-store.ts
+const useLightboxStore = () => {
+	const $ = c(20);
+	const [open, setOpen] = useState(false);
+	const [src, setSrc] = useState("");
+	const [alt, setAlt] = useState("");
+	const [triggerEl, setTriggerEl] = useState(null);
+	const [dialogEl, setDialogEl] = useState(null);
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			const handleOpenEvent = (event) => {
+				const { detail } = event;
+				setTriggerEl(document.activeElement instanceof HTMLElement ? document.activeElement : null);
+				setSrc(detail.src);
+				setAlt(detail.alt);
+				setOpen(true);
+			};
+			window.addEventListener(lightboxOpenEvent, handleOpenEvent);
+			return () => window.removeEventListener(lightboxOpenEvent, handleOpenEvent);
+		};
+		t1 = [];
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[2] !== dialogEl) {
+		t2 = () => {
+			dialogEl?.focus();
+		};
+		t3 = [dialogEl];
+		$[2] = dialogEl;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[5] !== triggerEl) {
+		t4 = () => {
+			setOpen(false);
+			triggerEl?.focus();
+		};
+		$[5] = triggerEl;
+		$[6] = t4;
+	} else t4 = $[6];
+	const close = t4;
+	const stopPropagation = _temp;
+	let t5;
+	let t6;
+	if ($[7] !== close || $[8] !== open) {
+		t5 = () => {
+			if (!open) return;
+			const handleEsc = (e_0) => {
+				if (e_0.key === "Escape") close();
+			};
+			window.addEventListener("keydown", handleEsc, true);
+			return () => window.removeEventListener("keydown", handleEsc, true);
+		};
+		t6 = [open, close];
+		$[7] = close;
+		$[8] = open;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t5 = $[9];
+		t6 = $[10];
+	}
+	useEffect(t5, t6);
+	let t7;
+	if ($[11] !== alt || $[12] !== open || $[13] !== src) {
+		t7 = {
+			open,
+			src,
+			alt
+		};
+		$[11] = alt;
+		$[12] = open;
+		$[13] = src;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== close) {
+		t8 = {
+			setDialogEl,
+			close,
+			stopPropagation
+		};
+		$[15] = close;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t7 || $[18] !== t8) {
+		t9 = {
+			state: t7,
+			effects: t8
+		};
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	return t9;
+};
+function _temp(e) {
+	return e.stopPropagation();
+}
+//#endregion
+export { useLightboxStore };

package/dist/organism/loading-bar/loading-bar.d.mts

@@ -0,0 +1,7 @@
+//#region src/organism/loading-bar/loading-bar.d.ts
+interface LoadingBarProps {
+  message?: string;
+}
+declare const LoadingBar: React.FC<LoadingBarProps>;
+//#endregion
+export { LoadingBar };

package/dist/organism/loading-bar/loading-bar.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { Cursor, TerminalLine } from "../../atoms/typography/terminal-blocks/terminal-blocks.mjs";
+import { useLoadingBarStore } from "./use-loading-bar-store.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organism/loading-bar/loading-bar.tsx
+const LoadingBar = (t0) => {
+	const $ = c(8);
+	const { message: t1 } = t0;
+	const message = t1 === void 0 ? "Processing..." : t1;
+	const { state } = useLoadingBarStore();
+	const { animatedBar } = state;
+	const t2 = `> ${message}`;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Cursor, {});
+		$[0] = t3;
+	} else t3 = $[0];
+	let t4;
+	if ($[1] !== t2) {
+		t4 = /* @__PURE__ */ jsxs(TerminalLine, { children: [
+			t2,
+			" ",
+			t3
+		] });
+		$[1] = t2;
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] !== animatedBar) {
+		t5 = /* @__PURE__ */ jsx(TerminalLine, { children: animatedBar });
+		$[3] = animatedBar;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== t4 || $[6] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-col items-center justify-center",
+			children: [t4, t5]
+		});
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+	} else t6 = $[7];
+	return t6;
+};
+//#endregion
+export { LoadingBar };

package/dist/organism/loading-bar/use-loading-bar-store.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+//#region src/organism/loading-bar/use-loading-bar-store.ts
+const getAnimatedBar = (position, length = 24) => {
+	const bar = Array(length).fill("░");
+	const blockSize = 3;
+	for (let i = 0; i < blockSize; i++) {
+		const index = (position + i) % length;
+		bar[index] = "█";
+	}
+	return `[${bar.join("")}]`;
+};
+const useLoadingBarStore = () => {
+	const $ = c(6);
+	const [position, setPosition] = useState(0);
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			const interval = setInterval(() => {
+				setPosition(_temp);
+			}, 100);
+			return () => clearInterval(interval);
+		};
+		t1 = [];
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[2] !== position) {
+		t2 = getAnimatedBar(position);
+		$[2] = position;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = { state: { animatedBar: t2 } };
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+function _temp(prev) {
+	return (prev + 1) % 24;
+}
+//#endregion
+export { useLoadingBarStore };

package/dist/organism/menu/index.d.mts

@@ -0,0 +1,3 @@
+import { MenuTrackingCallbacks } from "./use-menu-store.mjs";
+import { Menu, MenuNavHrefs, MenuProps } from "./menu.mjs";
+export { Menu, type MenuNavHrefs, type MenuProps, type MenuTrackingCallbacks };

package/dist/organism/menu/menu.d.mts

@@ -0,0 +1,33 @@
+import { LinkComponent } from "../../atoms/links/anchor-link/anchor-link.mjs";
+import "../../atoms/links/anchor-link/index.mjs";
+import { MenuTrackingCallbacks } from "./use-menu-store.mjs";
+import { FC } from "react";
+//#region src/organism/menu/menu.d.ts
+interface MenuNavHrefs {
+  blog: string;
+  blogAuthors: string;
+  blogAuthor: string;
+  blogTags: string;
+  blogArchive: string;
+  blogStats: string;
+  dsaRoadmap: string;
+  dsaExercises: string;
+  chat: string;
+  mcp: string;
+  easterEggHunt: string;
+  aboutMe: string;
+  art: string;
+  videogames: string;
+  contact: string;
+}
+interface MenuProps {
+  linkComponent?: LinkComponent;
+  /** The path currently being viewed, used to mark the active entry. Injected by the consumer's router. */
+  currentPath: string;
+  navHrefs: MenuNavHrefs;
+  onPaletteTrigger?: () => void;
+  tracking?: MenuTrackingCallbacks;
+}
+declare const Menu: FC<MenuProps>;
+//#endregion
+export { Menu, MenuNavHrefs, MenuProps };