adminizer 4.2.0 → 4.3.0-build.101

package/ui/hooks/use-appearance.js

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useState } from 'react';
+const prefersDark = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+const setCookie = (name, value, days = 365) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const maxAge = days * 24 * 60 * 60;
+    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
+const applyTheme = (appearance) => {
+    const isDark = appearance === 'dark' || (appearance === 'system' && prefersDark());
+    document.documentElement.classList.toggle('dark', isDark);
+};
+const mediaQuery = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)');
+};
+const handleSystemThemeChange = () => {
+    const currentAppearance = localStorage.getItem('appearance');
+    applyTheme(currentAppearance || 'light');
+};
+export function initializeTheme() {
+    const savedAppearance = localStorage.getItem('appearance') || 'system';
+    applyTheme(savedAppearance);
+    // Add the event listener for system theme changes...
+    mediaQuery()?.addEventListener('change', handleSystemThemeChange);
+}
+export function useAppearance() {
+    const [appearance, setAppearance] = useState('system');
+    const [isThemeChanging, setIsThemeChanging] = useState(false);
+    const updateAppearance = useCallback((mode) => {
+        setIsThemeChanging(true);
+        setAppearance(mode);
+        localStorage.setItem('appearance', mode);
+        setCookie('appearance', mode);
+        applyTheme(mode);
+        // Trigger custom event for current tab
+        setTimeout(() => {
+            setIsThemeChanging(false);
+            window.dispatchEvent(new Event('appearanceChanged'));
+        }, 0);
+    }, []);
+    useEffect(() => {
+        const savedAppearance = localStorage.getItem('appearance');
+        updateAppearance(savedAppearance || 'system');
+        // Listen for localStorage changes (from other tabs)
+        const handleStorageChange = (e) => {
+            if (e.key === 'appearance') {
+                const newAppearance = e.newValue;
+                setAppearance(newAppearance);
+                applyTheme(newAppearance);
+            }
+        };
+        // Listen for custom event (from current tab)
+        const handleAppearanceChange = () => {
+            const savedAppearance = localStorage.getItem('appearance');
+            setAppearance(savedAppearance);
+            applyTheme(savedAppearance);
+        };
+        window.addEventListener('storage', handleStorageChange);
+        window.addEventListener('appearanceChanged', handleAppearanceChange);
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+            window.removeEventListener('appearanceChanged', handleAppearanceChange);
+            mediaQuery()?.removeEventListener('change', handleSystemThemeChange);
+        };
+    }, [updateAppearance]);
+    return { appearance, updateAppearance, isThemeChanging };
+}

package/ui/hooks/use-window-size.d.ts

@@ -0,0 +1,5 @@
+declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};
+export default useWindowSize;

package/ui/hooks/use-window-size.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState({
+        width: typeof window !== 'undefined' ? window.innerWidth : 1024,
+        height: typeof window !== 'undefined' ? window.innerHeight : 768,
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleResize = () => {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return windowSize;
+};
+export default useWindowSize;