@classytic/fluid 0.3.3 → 0.3.6

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, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 //#region src/hooks/use-base-search.ts
@@ -391,53 +391,93 @@ const storage = {
 
 //#endregion
 //#region src/hooks/use-local-storage.ts
+function parseSnapshot(rawValue, initialValue) {
+	try {
+		const parsed = JSON.parse(rawValue);
+		if (parsed && typeof parsed === "object" && "__expiresAt" in parsed && typeof parsed.__expiresAt === "number") {
+			if (Date.now() > parsed.__expiresAt) return {
+				value: initialValue,
+				expired: true
+			};
+			return {
+				value: parsed.value ?? initialValue,
+				expired: false
+			};
+		}
+		return {
+			value: parsed ?? initialValue,
+			expired: false
+		};
+	} catch {
+		return {
+			value: initialValue,
+			expired: false
+		};
+	}
+}
 /**
 * 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 initialValueRef = useRef(initialValue);
+	const serializedInitialRef = useRef(() => JSON.stringify(initialValue));
+	const getSnapshot = useCallback(() => {
+		if (typeof window === "undefined") return serializedInitialRef.current();
+		return window.localStorage.getItem(key) ?? serializedInitialRef.current();
+	}, [key]);
+	const getServerSnapshot = useCallback(() => serializedInitialRef.current(), []);
+	const rawValue = 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 parsedSnapshot = useMemo(() => parseSnapshot(rawValue, initialValueRef.current), [rawValue]);
+	useEffect(() => {
+		if (!parsedSnapshot.expired || typeof window === "undefined") return;
+		storage.remove(key);
+		window.dispatchEvent(new CustomEvent("local-storage-change", { detail: { key } }));
+	}, [key, parsedSnapshot.expired]);
+	const notifyChange = useCallback(() => {
+		window.dispatchEvent(new CustomEvent("local-storage-change", { detail: { key } }));
+	}, [key]);
+	const setValue = useCallback((updater) => {
+		const init = initialValueRef.current;
+		const current = parseSnapshot(typeof window === "undefined" ? JSON.stringify(init) : window.localStorage.getItem(key) ?? JSON.stringify(init), init).value;
+		const nextValue = updater instanceof Function ? updater(current) : updater;
+		storage.set(key, nextValue, ttlRef.current);
+		notifyChange();
+	}, [key, notifyChange]);
+	const removeValue = useCallback(() => {
+		storage.remove(key);
+		notifyChange();
+	}, [key, notifyChange]);
 	return [
-		storedValue,
+		parsedSnapshot.value,
 		setValue,
 		removeValue
 	];

package/dist/dashboard.d.mts

@@ -49,6 +49,8 @@ interface NavItem extends NavPermissions {
   url: string;
   icon?: LucideIcon;
   isActive?: boolean;
+  /** When true, the collapsible sub-menu is expanded by default (even when not active). */
+  defaultOpen?: boolean;
   badge?: string | number;
   items?: NavSubItem[];
 }

package/dist/dashboard.mjs

@@ -379,7 +379,7 @@ function SidebarBrand({ title, icon, href = "/", className, tooltip }) {
 function SidebarNavItem({ item, onClick }) {
 	const hasSubItems = item.items && item.items.length > 0;
 	const Icon = item.icon;
-	const [open, setOpen] = useState(item.isActive ?? false);
+	const [open, setOpen] = useState(item.defaultOpen ?? item.isActive ?? false);
 	if (hasSubItems) return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Collapsible, {
 		open,
 		onOpenChange: setOpen,

package/dist/forms.mjs

@@ -372,6 +372,7 @@ function SelectInput({ control, items = [], groups = [], name, label, placeholde
 		const rawValue = field ? field.value?.toString() : localValue;
 		const handleChange = (newValue) => {
 			const actualValue = newValue === CLEAR_VALUE ? "" : newValue;
+			if ((field ? String(field.value ?? "") : localValue) === actualValue) return;
 			if (field) field.onChange(actualValue);
 			else setLocalValue(actualValue);
 			onValueChange?.(actualValue);
@@ -1475,18 +1476,32 @@ TagChoiceInput.displayName = "TagChoiceInput";
 */
 function ComboboxInput({ control, name, label, placeholder = "Select...", emptyText = "No items found.", description, helperText, required, disabled, items = [], className, labelClassName, inputClassName, onValueChange, renderOption, value: propValue, onChange: propOnChange }) {
 	const descriptionText = description || helperText;
-	const handleValueChange = useCallback((newItem, field) => {
+	const resolvedMapRef = useRef(/* @__PURE__ */ new Map());
+	const currentValueRef = useRef("");
+	useEffect(() => {
+		resolvedMapRef.current = new Map(items.map((item) => [item.value, item]));
+	}, [items]);
+	const onValueChangeRef = useRef(onValueChange);
+	onValueChangeRef.current = onValueChange;
+	const propOnChangeRef = useRef(propOnChange);
+	propOnChangeRef.current = propOnChange;
+	const fieldRef = useRef();
+	const handleValueChange = useCallback((newItem) => {
 		const safeValue = newItem?.value || "";
+		if (safeValue === currentValueRef.current) return;
+		const field = fieldRef.current;
 		if (field) field.onChange(safeValue);
-		else if (propOnChange) propOnChange(safeValue);
-		onValueChange?.(safeValue);
-	}, [propOnChange, onValueChange]);
+		else if (propOnChangeRef.current) propOnChangeRef.current(safeValue);
+		onValueChangeRef.current?.(safeValue);
+	}, []);
 	const renderCombobox = (currentValue, field, isDisabled, fieldState) => {
+		fieldRef.current = field;
+		currentValueRef.current = currentValue ?? "";
 		const ariaDescribedBy = [descriptionText ? `${name}-description` : void 0, fieldState?.invalid ? `${name}-error` : void 0].filter(Boolean).join(" ") || void 0;
 		return /* @__PURE__ */ jsxs(Combobox, {
 			items,
-			value: currentValue ? items.find((item) => item.value === currentValue) ?? null : null,
-			onValueChange: (item) => handleValueChange(item, field),
+			value: currentValue ? resolvedMapRef.current.get(currentValue) ?? items.find((item) => item.value === currentValue) ?? null : null,
+			onValueChange: handleValueChange,
 			disabled: isDisabled,
 			children: [/* @__PURE__ */ jsx(ComboboxInput$1, {
 				placeholder,

package/package.json

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