achery-ui 0.14.0 → 0.15.0

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(() => {
@@ -2438,6 +2454,7 @@ var searchSpacer = "AppBar_searchSpacer__uqki995";
 function AppBar({
   brandName: brandName2 = "Achery",
   brandSub: brandSub2,
+  brandLogo,
   showSearch = true,
   searchPlaceholder = "Search\u2026",
   searchKbd: searchKbd2,
@@ -2476,7 +2493,7 @@ function AppBar({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: brand, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "hex", size: 20, "aria-hidden": "true" }),
+      brandLogo ?? /* @__PURE__ */ jsxRuntime.jsx(Glyph, { name: "hex", size: 20, "aria-hidden": "true" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: brandName, children: brandName2 }),
       brandSub2 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: brandDivider }),