@thangnqdev/ui 0.2.1 → 0.2.3

package/dist/core/index.cjs

@@ -7,17 +7,22 @@ var tailwindMerge = require('tailwind-merge');
 
 // src/core/ThemeProvider.tsx
 var ThemeContext = react.createContext(void 0);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function isTheme(value) {
+  return value === "dark" || value === "light" || value === "system";
+}
 function ThemeProvider({
   children,
-  defaultTheme = "dark",
+  defaultTheme = "light",
   storageKey = "ui-theme",
   attribute = "data-theme",
   enableSystem = true
 }) {
   const [theme, setThemeState] = react.useState(defaultTheme);
   const [resolvedTheme, setResolvedTheme] = react.useState(
-    defaultTheme === "light" ? "light" : "dark"
+    defaultTheme === "dark" ? "dark" : "light"
   );
+  const pendingStoredThemeRef = react.useRef(null);
   const computeResolved = react.useCallback(
     (t) => {
       if (t === "system" && enableSystem && typeof window !== "undefined" && window.matchMedia) {
@@ -27,56 +32,53 @@ function ThemeProvider({
     },
     [enableSystem]
   );
-  react.useEffect(() => {
+  const applyResolvedTheme = react.useCallback(
+    (nextResolvedTheme) => {
+      setResolvedTheme(nextResolvedTheme);
+      if (typeof document === "undefined") return;
+      const root = document.documentElement;
+      root.setAttribute(attribute, nextResolvedTheme);
+      root.classList.toggle("dark", nextResolvedTheme === "dark");
+      root.classList.toggle("light", nextResolvedTheme === "light");
+    },
+    [attribute]
+  );
+  useIsomorphicLayoutEffect(() => {
     if (typeof window === "undefined") return;
+    let initialTheme = defaultTheme;
     try {
       const stored = window.localStorage?.getItem(storageKey);
-      if (stored && stored !== theme) {
-        setThemeState(stored);
-      }
+      if (isTheme(stored)) initialTheme = stored;
     } catch {
     }
-  }, [storageKey, theme]);
-  react.useEffect(() => {
-    if (typeof document === "undefined") return;
-    const root = document.documentElement;
-    const currentResolved = computeResolved(theme);
-    setResolvedTheme(currentResolved);
-    root.setAttribute(attribute, currentResolved);
-    if (currentResolved === "dark") {
-      root.classList.add("dark");
-      root.classList.remove("light");
-    } else {
-      root.classList.add("light");
-      root.classList.remove("dark");
+    pendingStoredThemeRef.current = { storageKey, theme: initialTheme };
+    setThemeState((currentTheme) => currentTheme === initialTheme ? currentTheme : initialTheme);
+  }, [storageKey]);
+  useIsomorphicLayoutEffect(() => {
+    const pendingStoredTheme = pendingStoredThemeRef.current;
+    if (pendingStoredTheme?.storageKey === storageKey) {
+      if (pendingStoredTheme.theme !== theme) return;
+      pendingStoredThemeRef.current = null;
     }
+    const currentResolved = computeResolved(theme);
+    applyResolvedTheme(currentResolved);
     if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
       try {
         window.localStorage.setItem(storageKey, theme);
       } catch {
       }
     }
-  }, [theme, attribute, computeResolved, storageKey]);
+  }, [theme, computeResolved, applyResolvedTheme, storageKey]);
   react.useEffect(() => {
     if (theme !== "system" || !enableSystem || typeof window === "undefined" || !window.matchMedia) return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => {
       const newResolved = mediaQuery.matches ? "dark" : "light";
-      setResolvedTheme(newResolved);
-      if (typeof document !== "undefined") {
-        document.documentElement.setAttribute(attribute, newResolved);
-        if (newResolved === "dark") {
-          document.documentElement.classList.add("dark");
-          document.documentElement.classList.remove("light");
-        } else {
-          document.documentElement.classList.add("light");
-          document.documentElement.classList.remove("dark");
-        }
-      }
+      applyResolvedTheme(newResolved);
     };
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [theme, enableSystem, attribute]);
+  }, [theme, enableSystem, applyResolvedTheme]);
   const toggleTheme = () => {
     setThemeState((prev) => {
       if (prev === "dark") return "light";

package/dist/core/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/ThemeProvider.tsx","../../src/utils/cn.ts"],"names":["createContext","useState","useCallback","useEffect","useMemo","jsx","useContext","twMerge","clsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import React, { createContext, useContext, useEffect, useState, useMemo, useCallback } from 'react';\n\nexport type Theme = 'dark' | 'light' | 'system';\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode;\n  defaultTheme?: Theme;\n  storageKey?: string;\n  attribute?: string;\n  enableSystem?: boolean;\n}\n\ninterface ThemeContextType {\n  theme: Theme;\n  resolvedTheme: 'dark' | 'light';\n  setTheme: (theme: Theme) => void;\n  toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'dark',\n  storageKey = 'ui-theme',\n  attribute = 'data-theme',\n  enableSystem = true,\n}: ThemeProviderProps) {\n  // Always initialize identically on SSR and initial client pass to avoid hydration mismatches\n  const [theme, setThemeState] = useState<Theme>(defaultTheme);\n  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>(\n    defaultTheme === 'light' ? 'light' : 'dark'\n  );\n\n  const computeResolved = useCallback(\n    (t: Theme): 'dark' | 'light' => {\n      if (t === 'system' && enableSystem && typeof window !== 'undefined' && window.matchMedia) {\n        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n      }\n      return t === 'dark' ? 'dark' : 'light';\n    },\n    [enableSystem]\n  );\n\n  // Client-side initialization: read storage once mounted\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    try {\n      const stored = window.localStorage?.getItem(storageKey) as Theme | null;\n      if (stored && stored !== theme) {\n        setThemeState(stored);\n      }\n    } catch {\n      // Ignore storage access errors in restricted iframe/incognito environments\n    }\n  }, [storageKey, theme]);\n\n  // Sync theme changes to DOM and storage\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n\n    const root = document.documentElement;\n    const currentResolved = computeResolved(theme);\n    setResolvedTheme(currentResolved);\n\n    root.setAttribute(attribute, currentResolved);\n    if (currentResolved === 'dark') {\n      root.classList.add('dark');\n      root.classList.remove('light');\n    } else {\n      root.classList.add('light');\n      root.classList.remove('dark');\n    }\n\n    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {\n      try {\n        window.localStorage.setItem(storageKey, theme);\n      } catch {\n        // Ignore storage access errors\n      }\n    }\n  }, [theme, attribute, computeResolved, storageKey]);\n\n  // System media query listener\n  useEffect(() => {\n    if (theme !== 'system' || !enableSystem || typeof window === 'undefined' || !window.matchMedia) return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleChange = () => {\n      const newResolved = mediaQuery.matches ? 'dark' : 'light';\n      setResolvedTheme(newResolved);\n      if (typeof document !== 'undefined') {\n        document.documentElement.setAttribute(attribute, newResolved);\n        if (newResolved === 'dark') {\n          document.documentElement.classList.add('dark');\n          document.documentElement.classList.remove('light');\n        } else {\n          document.documentElement.classList.add('light');\n          document.documentElement.classList.remove('dark');\n        }\n      }\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [theme, enableSystem, attribute]);\n\n  const toggleTheme = () => {\n    setThemeState((prev) => {\n      if (prev === 'dark') return 'light';\n      return 'dark';\n    });\n  };\n\n  const value = useMemo(\n    () => ({\n      theme,\n      resolvedTheme,\n      setTheme: setThemeState,\n      toggleTheme,\n    }),\n    [theme, resolvedTheme]\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextType {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"]}
+{"version":3,"sources":["../../src/core/ThemeProvider.tsx","../../src/utils/cn.ts"],"names":["createContext","useEffect","useLayoutEffect","useState","useRef","useCallback","useMemo","jsx","useContext","twMerge","clsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\r\nexport type Theme = 'dark' | 'light' | 'system';\r\n\r\nexport interface ThemeProviderProps {\r\n  children: React.ReactNode;\r\n  defaultTheme?: Theme;\r\n  storageKey?: string;\r\n  attribute?: string;\r\n  enableSystem?: boolean;\r\n}\r\n\r\ninterface ThemeContextType {\r\n  theme: Theme;\r\n  resolvedTheme: 'dark' | 'light';\r\n  setTheme: (theme: Theme) => void;\r\n  toggleTheme: () => void;\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nfunction isTheme(value: string | null): value is Theme {\n  return value === 'dark' || value === 'light' || value === 'system';\n}\n\r\nexport function ThemeProvider({\r\n  children,\r\n  defaultTheme = 'light',\n  storageKey = 'ui-theme',\r\n  attribute = 'data-theme',\r\n  enableSystem = true,\r\n}: ThemeProviderProps) {\r\n  // Always initialize identically on SSR and initial client pass to avoid hydration mismatches\r\n  const [theme, setThemeState] = useState<Theme>(defaultTheme);\r\n  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>(\n    defaultTheme === 'dark' ? 'dark' : 'light'\n  );\n  const pendingStoredThemeRef = useRef<{ storageKey: string; theme: Theme } | null>(null);\n\r\n  const computeResolved = useCallback(\r\n    (t: Theme): 'dark' | 'light' => {\r\n      if (t === 'system' && enableSystem && typeof window !== 'undefined' && window.matchMedia) {\r\n        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\r\n      }\r\n      return t === 'dark' ? 'dark' : 'light';\r\n    },\r\n    [enableSystem]\r\n  );\r\n\r\n  const applyResolvedTheme = useCallback(\n    (nextResolvedTheme: 'dark' | 'light') => {\n      setResolvedTheme(nextResolvedTheme);\n\n      if (typeof document === 'undefined') return;\n\n      const root = document.documentElement;\n      root.setAttribute(attribute, nextResolvedTheme);\n      root.classList.toggle('dark', nextResolvedTheme === 'dark');\n      root.classList.toggle('light', nextResolvedTheme === 'light');\n    },\n    [attribute]\n  );\n\n  // Read the persisted value before paint. The pending ref prevents the DOM/storage\n  // sync below from writing defaultTheme over a different persisted theme first.\n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    let initialTheme = defaultTheme;\n    try {\n      const stored = window.localStorage?.getItem(storageKey);\n      if (isTheme(stored)) initialTheme = stored;\n    } catch {\n      // Ignore storage access errors in restricted iframe/incognito environments\n    }\n\n    pendingStoredThemeRef.current = { storageKey, theme: initialTheme };\n    setThemeState((currentTheme) => (currentTheme === initialTheme ? currentTheme : initialTheme));\n  }, [storageKey]);\n\n  // Apply user changes before paint. Storage initialization and user updates now\n  // have a single write direction, so a click cannot oscillate light <-> dark.\n  useIsomorphicLayoutEffect(() => {\n    const pendingStoredTheme = pendingStoredThemeRef.current;\n    if (pendingStoredTheme?.storageKey === storageKey) {\n      if (pendingStoredTheme.theme !== theme) return;\n      pendingStoredThemeRef.current = null;\n    }\n\n    const currentResolved = computeResolved(theme);\n    applyResolvedTheme(currentResolved);\n\n    if (typeof window !== 'undefined' && typeof window.localStorage !== 'undefined') {\n      try {\n        window.localStorage.setItem(storageKey, theme);\r\n      } catch {\r\n        // Ignore storage access errors\n      }\n    }\n  }, [theme, computeResolved, applyResolvedTheme, storageKey]);\n\r\n  // System media query listener\r\n  useEffect(() => {\r\n    if (theme !== 'system' || !enableSystem || typeof window === 'undefined' || !window.matchMedia) return;\r\n\r\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleChange = () => {\n      const newResolved = mediaQuery.matches ? 'dark' : 'light';\n      applyResolvedTheme(newResolved);\n    };\n\r\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [theme, enableSystem, applyResolvedTheme]);\n\r\n  const toggleTheme = () => {\r\n    setThemeState((prev) => {\r\n      if (prev === 'dark') return 'light';\r\n      return 'dark';\r\n    });\r\n  };\r\n\r\n  const value = useMemo(\r\n    () => ({\r\n      theme,\r\n      resolvedTheme,\r\n      setTheme: setThemeState,\r\n      toggleTheme,\r\n    }),\r\n    [theme, resolvedTheme]\r\n  );\r\n\r\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\r\n}\r\n\r\nexport function useTheme(): ThemeContextType {\r\n  const context = useContext(ThemeContext);\r\n  if (!context) {\r\n    throw new Error('useTheme must be used within a ThemeProvider');\r\n  }\r\n  return context;\r\n}\r\n","import { clsx, type ClassValue } from 'clsx';\r\nimport { twMerge } from 'tailwind-merge';\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n"]}

package/dist/core/index.js

@@ -1,4 +1,4 @@
-export { ThemeProvider, useTheme } from '../chunk-EXFR2BFJ.js';
-export { cn } from '../chunk-2YJBW4E2.js';
+export { ThemeProvider, useTheme } from '../chunk-2ANJFOIU.js';
+export { cn } from '../chunk-4S6L5V7X.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map