@fire-spark/react-ui 0.0.1

package/dist/use-active-category.js

@@ -0,0 +1,89 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+//#region src/use-active-category.ts
+/** Wait until scroll events stop before trusting the spy again. */
+const SCROLL_SETTLE_MS = 140;
+const useActiveCategory = (options) => {
+	const { categoryIds, root = null, offset = 0 } = options;
+	const [activeCategoryId, setActiveCategoryId] = useState(() => categoryIds[0] ?? "");
+	const lockedIdRef = useRef(null);
+	const settleTimerRef = useRef(null);
+	const spyTimerRef = useRef(null);
+	const categoryIdsKey = categoryIds.join("\0");
+	useEffect(() => {
+		if (categoryIds.length === 0) {
+			setActiveCategoryId("");
+			return;
+		}
+		if (!categoryIds.includes(activeCategoryId)) setActiveCategoryId(categoryIds[0] ?? "");
+	}, [
+		categoryIds,
+		categoryIdsKey,
+		activeCategoryId
+	]);
+	useEffect(() => {
+		const resolveCurrent = () => {
+			if (categoryIds.length === 0) return "";
+			const threshold = (root ? root.getBoundingClientRect().top : 0) + offset + 1;
+			let current = categoryIds[0] ?? "";
+			for (const id of categoryIds) {
+				const el = document.getElementById(id);
+				if (!el) continue;
+				if (el.getBoundingClientRect().top <= threshold) current = id;
+			}
+			return current;
+		};
+		const applySpy = () => {
+			if (lockedIdRef.current != null) return;
+			const current = resolveCurrent();
+			if (!current) return;
+			setActiveCategoryId((prev) => prev === current ? prev : current);
+		};
+		const armSettleUnlock = () => {
+			if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+			settleTimerRef.current = setTimeout(() => {
+				lockedIdRef.current = null;
+			}, SCROLL_SETTLE_MS);
+		};
+		const onScroll = () => {
+			if (lockedIdRef.current != null) {
+				armSettleUnlock();
+				return;
+			}
+			if (spyTimerRef.current) clearTimeout(spyTimerRef.current);
+			spyTimerRef.current = setTimeout(applySpy, SCROLL_SETTLE_MS);
+		};
+		const target = root ?? window;
+		target.addEventListener("scroll", onScroll, { passive: true });
+		applySpy();
+		return () => {
+			target.removeEventListener("scroll", onScroll);
+			if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+			if (spyTimerRef.current) clearTimeout(spyTimerRef.current);
+		};
+	}, [
+		root,
+		offset,
+		categoryIds,
+		categoryIdsKey
+	]);
+	const selectCategory = (categoryId) => {
+		lockedIdRef.current = categoryId;
+		setActiveCategoryId(categoryId);
+		if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+		document.getElementById(categoryId)?.scrollIntoView({
+			behavior: "smooth",
+			block: "start"
+		});
+		settleTimerRef.current = setTimeout(() => {
+			lockedIdRef.current = null;
+		}, 1e3);
+	};
+	return {
+		activeCategoryId,
+		setActiveCategoryId,
+		selectCategory
+	};
+};
+//#endregion
+export { useActiveCategory };

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@fire-spark/react-ui",
+  "version": "0.0.1",
+  "description": "Fire Spark React UI components",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./category": {
+      "types": "./src/category.tsx",
+      "development": "./src/category.tsx",
+      "import": "./dist/category.js",
+      "default": "./dist/category.js"
+    },
+    "./menu": {
+      "types": "./src/menu.tsx",
+      "development": "./src/menu.tsx",
+      "import": "./dist/menu.js",
+      "default": "./dist/menu.js"
+    },
+    "./category-nav": {
+      "types": "./src/category-nav.tsx",
+      "development": "./src/category-nav.tsx",
+      "import": "./dist/category-nav.js",
+      "default": "./dist/category-nav.js"
+    },
+    "./use-active-category": {
+      "types": "./src/use-active-category.ts",
+      "development": "./src/use-active-category.ts",
+      "import": "./dist/use-active-category.js",
+      "default": "./dist/use-active-category.js"
+    },
+    "./product-card": {
+      "types": "./src/product-card.tsx",
+      "development": "./src/product-card.tsx",
+      "import": "./dist/product-card.js",
+      "default": "./dist/product-card.js"
+    },
+    "./product-detail": {
+      "types": "./src/product-detail.tsx",
+      "development": "./src/product-detail.tsx",
+      "import": "./dist/product-detail.js",
+      "default": "./dist/product-detail.js"
+    },
+    "./cart": {
+      "types": "./src/cart.tsx",
+      "development": "./src/cart.tsx",
+      "import": "./dist/cart.js",
+      "default": "./dist/cart.js"
+    },
+    "./checkout": {
+      "types": "./src/checkout.tsx",
+      "development": "./src/checkout.tsx",
+      "import": "./dist/checkout.js",
+      "default": "./dist/checkout.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tsdown": "^0.22.14",
+    "typescript": "^7.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "tsdown": {
+    "entry": [
+      "src/index.ts",
+      "src/category.tsx",
+      "src/category-nav.tsx",
+      "src/use-active-category.ts",
+      "src/menu.tsx",
+      "src/product-card.tsx",
+      "src/product-detail.tsx",
+      "src/cart.tsx",
+      "src/checkout.tsx"
+    ],
+    "format": [
+      "esm"
+    ],
+    "platform": "neutral",
+    "dts": true,
+    "clean": true,
+    "deps": {
+      "neverBundle": [
+        "react",
+        "react-dom",
+        "/^react\\//"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "check-types": "tsc --noEmit",
+    "lint": "oxlint ./src --max-warnings=0",
+    "format": "oxfmt ./src",
+    "check-format": "oxfmt --check ./src"
+  }
+}