achery-ui 0.18.0 → 0.19.0

package/dist/native/index.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
 var react = require('react');
+var reactNative = require('react-native');
 var tokens = require('achery-ui/tokens');
 var jsxRuntime = require('react/jsx-runtime');
-var reactNative = require('react-native');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -2789,8 +2789,16 @@ var require_yen = __commonJS({
     module.exports = "../yen-ZW6HM35W.svg";
   }
 });
+var MODE_STORAGE_KEY = "achery-theme-mode";
+var ACCENT_STORAGE_KEY = "achery-accent";
+var DIAL_STORAGE_KEY = "achery-dial";
+var MATERIAL_STORAGE_KEY = "achery-material";
 var ThemeContext = react.createContext({
   tokens: tokens.lightTokens,
+  mode: "light",
+  theme: "light",
+  setTheme: () => {
+  },
   dark: false,
   toggle: () => {
   },
@@ -2803,52 +2811,153 @@ var ThemeContext = react.createContext({
   material: "none",
   setMaterial: () => {
   },
-  surfaceOrigin: "native-only"
+  surfaceOrigin: "native-only",
+  hydrated: true
 });
+var isThemeMode = (v) => v === "light" || v === "dark" || v === "system";
+var isAccentColor = (v) => typeof v === "string" && Object.prototype.hasOwnProperty.call(tokens.accentColors, v);
+var isAccentDial = (v) => v === "underline" || v === "chrome" || v === "surface";
+var isMaterial = (v) => v === "none" || v === "leather" || v === "wood" || v === "copper";
 function NativeThemeProvider({
   children,
+  defaultMode,
   defaultDark = false,
   defaultAccent = "terracotta",
   defaultDial = "chrome",
   defaultMaterial = "none",
-  defaultSurfaceOrigin = "native-only"
+  defaultSurfaceOrigin = "native-only",
+  storage
 }) {
-  const [dark, setDark] = react.useState(defaultDark);
+  const initialMode = defaultMode ?? (defaultDark ? "dark" : "system");
+  const [mode, setModeState] = react.useState(initialMode);
   const [accent, setAccentState] = react.useState(defaultAccent);
   const [dial, setDialState] = react.useState(defaultDial);
   const [material, setMaterialState] = react.useState(defaultMaterial);
   const [surfaceOrigin] = react.useState(defaultSurfaceOrigin);
-  const toggle = react.useCallback(() => setDark((d) => !d), []);
-  const setAccent = react.useCallback((a) => setAccentState(a), []);
-  const setDial = react.useCallback((d) => setDialState(d), []);
-  const setMaterial = react.useCallback((m) => setMaterialState(m), []);
+  const [hydrated, setHydrated] = react.useState(!storage);
+  const systemScheme = reactNative.useColorScheme();
+  const resolvedTheme = mode === "system" ? systemScheme === "dark" ? "dark" : "light" : mode;
+  const dark = resolvedTheme === "dark";
+  const userSet = react.useRef({ mode: false, accent: false, dial: false, material: false });
+  const storageRef = react.useRef(storage);
+  react.useEffect(() => {
+    const store = storageRef.current;
+    if (!store) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const [storedMode, storedAccent, storedDial, storedMaterial] = await Promise.all([
+          store.getItem(MODE_STORAGE_KEY),
+          store.getItem(ACCENT_STORAGE_KEY),
+          store.getItem(DIAL_STORAGE_KEY),
+          store.getItem(MATERIAL_STORAGE_KEY)
+        ]);
+        if (cancelled) return;
+        if (isThemeMode(storedMode) && !userSet.current.mode) setModeState(storedMode);
+        if (isAccentColor(storedAccent) && !userSet.current.accent) setAccentState(storedAccent);
+        if (isAccentDial(storedDial) && !userSet.current.dial) setDialState(storedDial);
+        if (isMaterial(storedMaterial) && !userSet.current.material)
+          setMaterialState(storedMaterial);
+      } catch {
+      } finally {
+        if (!cancelled) setHydrated(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const persist = react.useCallback((key, value2) => {
+    const store = storageRef.current;
+    if (!store) return;
+    try {
+      const result = store.setItem(key, value2);
+      if (result && typeof result.catch === "function") {
+        void result.catch(() => {
+        });
+      }
+    } catch {
+    }
+  }, []);
+  const setTheme = react.useCallback(
+    (next) => {
+      userSet.current.mode = true;
+      setModeState(next);
+      persist(MODE_STORAGE_KEY, next);
+    },
+    [persist]
+  );
+  const toggle = react.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [resolvedTheme, setTheme]);
+  const setAccent = react.useCallback(
+    (a) => {
+      userSet.current.accent = true;
+      setAccentState(a);
+      persist(ACCENT_STORAGE_KEY, a);
+    },
+    [persist]
+  );
+  const setDial = react.useCallback(
+    (d) => {
+      userSet.current.dial = true;
+      setDialState(d);
+      persist(DIAL_STORAGE_KEY, d);
+    },
+    [persist]
+  );
+  const setMaterial = react.useCallback(
+    (m) => {
+      userSet.current.material = true;
+      setMaterialState(m);
+      persist(MATERIAL_STORAGE_KEY, m);
+    },
+    [persist]
+  );
   const tokens$1 = react.useMemo(() => {
     const base = dark ? tokens.darkTokens : tokens.lightTokens;
-    const a = tokens.accentColors[accent];
+    const a = tokens.accentColors[accent] ?? tokens.accentColors.terracotta;
     return {
       ...base,
       accent: dark ? a.light : a.main,
       accentFg: dark ? a.fgDark : a.fg
     };
   }, [dark, accent]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ThemeContext.Provider,
-    {
-      value: {
-        tokens: tokens$1,
-        dark,
-        toggle,
-        accent,
-        setAccent,
-        dial,
-        setDial,
-        material,
-        setMaterial,
-        surfaceOrigin
-      },
-      children
-    }
+  const value = react.useMemo(
+    () => ({
+      tokens: tokens$1,
+      mode,
+      theme: resolvedTheme,
+      setTheme,
+      dark,
+      toggle,
+      accent,
+      setAccent,
+      dial,
+      setDial,
+      material,
+      setMaterial,
+      surfaceOrigin,
+      hydrated
+    }),
+    [
+      tokens$1,
+      mode,
+      resolvedTheme,
+      setTheme,
+      dark,
+      toggle,
+      accent,
+      setAccent,
+      dial,
+      setDial,
+      material,
+      setMaterial,
+      surfaceOrigin,
+      hydrated
+    ]
   );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
   return react.useContext(ThemeContext);