@classytic/fluid 0.3.3 → 0.3.4

package/dist/client/hooks.d.mts

@@ -76,14 +76,18 @@ declare function useCopyToClipboard(resetDelay?: number): UseCopyToClipboardRetu
 /**
  * useLocalStorage — Persist state in localStorage with type safety and optional expiry.
  *
- * @param key - The localStorage key
+ * Uses `useSyncExternalStore` (React 18+) so the component always reflects
+ * the current localStorage value — even when the key changes dynamically,
+ * the component re-mounts, or another tab writes to the same key.
+ *
+ * @param key - The localStorage key (can change dynamically)
  * @param initialValue - Default value if no stored value exists
  * @param ttl - Time to live in milliseconds (optional)
  *
  * @example
  * ```tsx
  * const [theme, setTheme] = useLocalStorage("theme", "light");
- * const [cache, setCache] = useLocalStorage("api-cache", {}, 60000); // 1 min TTL
+ * const [cache, setCache, clearCache] = useLocalStorage("api-cache", {}, 60000); // 1 min TTL
  * ```
  */
 declare function useLocalStorage<T>(key: string, initialValue: T, ttl?: number): [T, (value: T | ((prev: T) => T)) => void, () => void];

package/dist/client/hooks.mjs

@@ -6,7 +6,7 @@ import { t as useMediaQuery } from "../use-media-query-BnVNIKT4.mjs";
 import { t as useScrollDetection } from "../use-scroll-detection-CsgsQYvy.mjs";
 import { n as useDebouncedCallback, t as useDebounce } from "../use-debounce-xmZucz5e.mjs";
 import { t as useKeyboardShortcut } from "../use-keyboard-shortcut-Bl6YM5Q7.mjs";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 //#region src/hooks/use-base-search.ts
@@ -394,52 +394,66 @@ const storage = {
 /**
 * useLocalStorage — Persist state in localStorage with type safety and optional expiry.
 *
-* @param key - The localStorage key
+* Uses `useSyncExternalStore` (React 18+) so the component always reflects
+* the current localStorage value — even when the key changes dynamically,
+* the component re-mounts, or another tab writes to the same key.
+*
+* @param key - The localStorage key (can change dynamically)
 * @param initialValue - Default value if no stored value exists
 * @param ttl - Time to live in milliseconds (optional)
 *
 * @example
 * ```tsx
 * const [theme, setTheme] = useLocalStorage("theme", "light");
-* const [cache, setCache] = useLocalStorage("api-cache", {}, 60000); // 1 min TTL
+* const [cache, setCache, clearCache] = useLocalStorage("api-cache", {}, 60000); // 1 min TTL
 * ```
 */
 function useLocalStorage(key, initialValue, ttl) {
-	const [storedValue, setStoredValue] = useState(() => {
-		const item = storage.get(key, initialValue);
-		return item !== null ? item : initialValue;
-	});
-	const keyRef = useRef(key);
 	const ttlRef = useRef(ttl);
-	useEffect(() => {
-		keyRef.current = key;
-		ttlRef.current = ttl;
-	}, [key, ttl]);
-	const setValue = useCallback((value) => {
-		setStoredValue((prev) => {
-			const nextValue = value instanceof Function ? value(prev) : value;
-			storage.set(keyRef.current, nextValue, ttlRef.current);
-			return nextValue;
-		});
-	}, []);
-	const removeValue = useCallback(() => {
-		storage.remove(keyRef.current);
-		setStoredValue(initialValue);
-	}, [initialValue]);
-	useEffect(() => {
+	ttlRef.current = ttl;
+	const getSnapshot = useCallback(() => {
+		if (typeof window === "undefined") return JSON.stringify(initialValue);
+		return window.localStorage.getItem(key) ?? JSON.stringify(initialValue);
+	}, [key, initialValue]);
+	const getServerSnapshot = useCallback(() => JSON.stringify(initialValue), [initialValue]);
+	useSyncExternalStore(useCallback((onStoreChange) => {
 		const handleStorage = (e) => {
-			if (e.key === keyRef.current) {
-				const item = storage.get(keyRef.current, initialValue);
-				setStoredValue(item !== null ? item : initialValue);
-			}
+			if (e.key === key || e.key === null) onStoreChange();
 		};
 		window.addEventListener("storage", handleStorage);
-		return () => window.removeEventListener("storage", handleStorage);
-	}, [initialValue]);
+		const handleLocal = (e) => {
+			if (e.detail?.key === key) onStoreChange();
+		};
+		window.addEventListener("local-storage-change", handleLocal);
+		return () => {
+			window.removeEventListener("storage", handleStorage);
+			window.removeEventListener("local-storage-change", handleLocal);
+		};
+	}, [key]), getSnapshot, getServerSnapshot);
+	const value = (() => {
+		const parsed = storage.get(key, initialValue);
+		return parsed !== null ? parsed : initialValue;
+	})();
+	const notifyChange = useCallback(() => {
+		window.dispatchEvent(new CustomEvent("local-storage-change", { detail: { key } }));
+	}, [key]);
 	return [
-		storedValue,
-		setValue,
-		removeValue
+		value,
+		useCallback((updater) => {
+			const currentValue = storage.get(key, initialValue);
+			const current = currentValue !== null ? currentValue : initialValue;
+			const nextValue = updater instanceof Function ? updater(current) : updater;
+			storage.set(key, nextValue, ttlRef.current);
+			notifyChange();
+		}, [
+			key,
+			initialValue,
+			notifyChange
+		]),
+		useCallback(() => {
+			storage.remove(key);
+			notifyChange();
+		}, [key, notifyChange])
 	];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classytic/fluid",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "description": "Fluid UI - Custom components built on shadcn/ui and base ui by Classytic",
   "main": "./dist/index.mjs",