@classytic/fluid 0.3.4 → 0.3.6

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, useSyncExternalStore } 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,6 +391,30 @@ 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.
 *
@@ -411,12 +435,14 @@ const storage = {
 function useLocalStorage(key, initialValue, ttl) {
 	const ttlRef = useRef(ttl);
 	ttlRef.current = ttl;
+	const initialValueRef = useRef(initialValue);
+	const serializedInitialRef = useRef(() => JSON.stringify(initialValue));
 	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) => {
+		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 === key || e.key === null) onStoreChange();
 		};
@@ -430,30 +456,30 @@ function useLocalStorage(key, initialValue, ttl) {
 			window.removeEventListener("local-storage-change", handleLocal);
 		};
 	}, [key]), getSnapshot, getServerSnapshot);
-	const value = (() => {
-		const parsed = storage.get(key, initialValue);
-		return parsed !== null ? parsed : initialValue;
-	})();
+	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 [
-		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])
+		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.4",
+  "version": "0.3.6",
   "type": "module",
   "description": "Fluid UI - Custom components built on shadcn/ui and base ui by Classytic",
   "main": "./dist/index.mjs",