achery-ui 0.17.1 → 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);
@@ -5868,6 +5977,125 @@ var StyleSheet3 = {
     bottom: 0
   }
 };
+var ADAPTIVE_PANEL_BREAKPOINT = 900;
+var AdaptivePanel = ({
+  open,
+  onClose,
+  title,
+  showClose = false,
+  children,
+  width = 340,
+  side = "right",
+  breakpoint = ADAPTIVE_PANEL_BREAKPOINT,
+  maxContentHeight,
+  avoidKeyboard = true,
+  style
+}) => {
+  const { tokens: tokens$1 } = useTheme();
+  const { width: windowWidth } = reactNative.useWindowDimensions();
+  const docked = windowWidth >= breakpoint;
+  if (!docked) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BottomSheet,
+      {
+        open,
+        onClose,
+        showClose,
+        avoidKeyboard,
+        ...title !== void 0 && { title },
+        ...maxContentHeight !== void 0 && { maxContentHeight },
+        ...style !== void 0 && { style },
+        children
+      }
+    );
+  }
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      style: [
+        {
+          width,
+          flexShrink: 0,
+          backgroundColor: tokens$1.surface,
+          // The rule sits on the edge facing the content it displaces.
+          borderLeftWidth: side === "right" ? 2 : 0,
+          borderRightWidth: side === "left" ? 2 : 0,
+          borderLeftColor: tokens$1.border,
+          borderRightColor: tokens$1.border
+        },
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.View,
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingHorizontal: tokens.spacing.sp6,
+              paddingVertical: tokens.spacing.sp4,
+              borderBottomWidth: 1,
+              borderBottomColor: tokens$1.borderMute,
+              minHeight: 44
+            },
+            children: [
+              title ? /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Text,
+                {
+                  style: {
+                    fontSize: 10,
+                    fontWeight: tokens.fontWeights.semibold.toString(),
+                    letterSpacing: 1.6,
+                    textTransform: "uppercase",
+                    color: tokens$1.fg3
+                  },
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.TouchableOpacity,
+                {
+                  onPress: onClose,
+                  hitSlop: { top: 12, bottom: 12, left: 12, right: 12 },
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Close",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.Text,
+                    {
+                      style: {
+                        fontSize: 11,
+                        fontWeight: tokens.fontWeights.semibold.toString(),
+                        letterSpacing: 0.5,
+                        color: tokens$1.fg3,
+                        textTransform: "uppercase"
+                      },
+                      children: "\u2715"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.ScrollView,
+          {
+            style: { flex: 1 },
+            showsVerticalScrollIndicator: false,
+            keyboardShouldPersistTaps: "handled",
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var useIsPanelDocked = (breakpoint = ADAPTIVE_PANEL_BREAKPOINT) => {
+  const { width } = reactNative.useWindowDimensions();
+  return width >= breakpoint;
+};
 var BAR_HEIGHT = 56;
 var MAX_VISIBLE = 4;
 var BottomTabBar = ({
@@ -6156,6 +6384,8 @@ var styles = reactNative.StyleSheet.create({
   suggestion: { borderWidth: 1, paddingHorizontal: 8, paddingVertical: 4 }
 });
 
+exports.ADAPTIVE_PANEL_BREAKPOINT = ADAPTIVE_PANEL_BREAKPOINT;
+exports.AdaptivePanel = AdaptivePanel;
 exports.Badge = Badge;
 exports.BottomSheet = BottomSheet;
 exports.BottomTabBar = BottomTabBar;
@@ -6188,6 +6418,7 @@ exports.Toggle = Toggle;
 exports.glyphCategory = glyphCategory;
 exports.glyphLabel = glyphLabel;
 exports.searchGlyphs = searchGlyphs;
+exports.useIsPanelDocked = useIsPanelDocked;
 exports.useTheme = useTheme;
 exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map