achery-ui 0.14.0 → 0.14.1

package/dist/index.cjs

@@ -47,6 +47,7 @@ var AppBarSearchProvider = ({ children }) => {
 };
 var useAppBarSearch = () => react.useContext(AppBarSearchContext);
 var STORAGE_KEY = "achery-theme-mode";
+var ACCENT_STORAGE_KEY = "achery-accent";
 var ThemeContext = react.createContext(null);
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
@@ -64,6 +65,14 @@ function readStoredMode(fallback) {
   }
   return fallback;
 }
+function readStoredAccent(fallback) {
+  try {
+    const stored = localStorage.getItem(ACCENT_STORAGE_KEY);
+    if (stored) return stored;
+  } catch {
+  }
+  return fallback;
+}
 function AcheryProvider({
   children,
   defaultTheme = "system",
@@ -75,24 +84,25 @@ function AcheryProvider({
   style
 }) {
   const [mode, setModeState] = react.useState(() => readStoredMode(defaultTheme));
-  const [accent, setAccentState] = react.useState(defaultAccent);
+  const [accent, setAccentState] = react.useState(() => readStoredAccent(defaultAccent));
   const [dial, setDialState] = react.useState(defaultDial);
   const [material, setMaterialState] = react.useState(defaultMaterial);
   const [surfaceOrigin] = react.useState(defaultSurfaceOrigin);
   const [resolvedTheme, setResolvedTheme] = react.useState(() => resolveTheme(readStoredMode(defaultTheme)));
+  const mounted = react.useRef(false);
   react.useEffect(() => {
-    setModeState(defaultTheme);
-    setResolvedTheme(resolveTheme(defaultTheme));
-  }, [defaultTheme]);
-  react.useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    if (defaultTheme === "light" || defaultTheme === "dark") {
+      setModeState(defaultTheme);
+      setResolvedTheme(resolveTheme(defaultTheme));
+    }
     setAccentState(defaultAccent);
-  }, [defaultAccent]);
-  react.useEffect(() => {
     setDialState(defaultDial);
-  }, [defaultDial]);
-  react.useEffect(() => {
     setMaterialState(defaultMaterial);
-  }, [defaultMaterial]);
+  }, [defaultTheme, defaultAccent, defaultDial, defaultMaterial]);
   const setTheme = react.useCallback((next) => {
     setModeState(next);
     setResolvedTheme(resolveTheme(next));
@@ -104,7 +114,13 @@ function AcheryProvider({
   const toggleTheme = react.useCallback(() => {
     setTheme(resolvedTheme === "light" ? "dark" : "light");
   }, [resolvedTheme, setTheme]);
-  const setAccent = react.useCallback((next) => setAccentState(next), []);
+  const setAccent = react.useCallback((next) => {
+    setAccentState(next);
+    try {
+      localStorage.setItem(ACCENT_STORAGE_KEY, next);
+    } catch {
+    }
+  }, []);
   const setDial = react.useCallback((next) => setDialState(next), []);
   const setMaterial = react.useCallback((next) => setMaterialState(next), []);
   react.useEffect(() => {