@sanvika/ui 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanvika/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "private": false,
   "description": "Sanvika Production — shared UI component library for 50+ projects (pure JS, CSS Modules, props-driven) + cloud-driven Navbar/Theme presets via ui.sanvikaproduction.com",
@@ -24,7 +24,8 @@
     ".": "./src/index.js",
     "./icons": "./src/components/icons/index.js",
     "./styles": "./src/styles/index.css",
-    "./server": "./src/server/index.js"
+    "./server": "./src/server/index.js",
+    "./react-native": "./src/react-native/index.js"
   },
   "files": [
     "dist",
@@ -32,7 +33,16 @@
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "react-native": "*",
+    "@react-native-async-storage/async-storage": ">=1.0.0",
+    "@sanvika/logger": ">=0.2.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": { "optional": true },
+    "react-native": { "optional": true },
+    "@react-native-async-storage/async-storage": { "optional": true },
+    "@sanvika/logger": { "optional": true }
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

package/src/react-native/ThemeProvider.jsx

@@ -0,0 +1,101 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Appearance } from 'react-native';
+import { createLogger } from '@sanvika/logger';
+import { FAPK_THEME_COLORS } from './themeColors.js';
+
+const logger = createLogger({ namespace: 'ThemeProvider' });
+const STORAGE_KEY = 'theme';
+
+const ThemeContext = createContext(null);
+
+export function ThemeProvider({ children, themeColors = FAPK_THEME_COLORS }) {
+  const [theme, setTheme] = useState('dark');
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const initializeTheme = async () => {
+      try {
+        const savedTheme = await AsyncStorage.getItem(STORAGE_KEY);
+        if (savedTheme === 'light' || savedTheme === 'dark') {
+          if (mounted) setTheme(savedTheme);
+        } else {
+          const systemTheme = Appearance.getColorScheme() || 'dark';
+          if (mounted) setTheme(systemTheme);
+        }
+      } catch (error) {
+        logger.error('Theme initialization error', { message: error?.message });
+        if (mounted) setTheme('dark');
+      } finally {
+        if (mounted) setIsReady(true);
+      }
+    };
+
+    initializeTheme();
+
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      AsyncStorage.getItem(STORAGE_KEY)
+        .then((savedTheme) => {
+          if (!savedTheme && colorScheme && mounted) {
+            setTheme(colorScheme);
+          }
+        })
+        .catch((error) => {
+          logger.error('Error checking saved theme', { message: error?.message });
+        });
+    });
+
+    return () => {
+      mounted = false;
+      subscription?.remove();
+    };
+  }, []);
+
+  const toggleTheme = async () => {
+    try {
+      const newTheme = theme === 'light' ? 'dark' : 'light';
+      setTheme(newTheme);
+      await AsyncStorage.setItem(STORAGE_KEY, newTheme);
+    } catch (error) {
+      logger.error('Error toggling theme', { message: error?.message });
+    }
+  };
+
+  const setThemeExplicitly = async (newTheme) => {
+    let resolved = newTheme;
+    if (resolved !== 'light' && resolved !== 'dark') {
+      logger.warn('Invalid theme, defaulting to dark', { newTheme });
+      resolved = 'dark';
+    }
+    try {
+      setTheme(resolved);
+      await AsyncStorage.setItem(STORAGE_KEY, resolved);
+    } catch (error) {
+      logger.error('Error setting theme explicitly', { message: error?.message });
+    }
+  };
+
+  const value = {
+    theme,
+    isDarkMode: theme === 'dark',
+    isThemeReady: isReady,
+    colors: themeColors[theme] || themeColors.dark,
+    toggleTheme,
+    setTheme: setThemeExplicitly,
+    themeColors,
+  };
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export { ThemeContext, FAPK_THEME_COLORS };

package/src/react-native/index.js

@@ -0,0 +1,2 @@
+// @sanvika/ui/react-native — ThemeProvider + FAPK palette (no DOM/CSS)
+export { ThemeProvider, useTheme, ThemeContext, FAPK_THEME_COLORS } from './ThemeProvider.jsx';

package/src/react-native/themeColors.js

@@ -0,0 +1,53 @@
+/** FAPK mobile palette — mirrors web CSS tokens (--bg-color, --primary-color, etc.). */
+export const FAPK_THEME_COLORS = {
+  light: {
+    background: '#fafafa',
+    surface: '#f5f5f5',
+    surfacePrimary: '#ffffff',
+    surfaceSecondary: '#fafafa',
+    text: '#000000',
+    textPrimary: '#000000',
+    textSecondary: '#121111',
+    textTertiary: '#666666',
+    textOnAccent: '#ffffff',
+    primary: '#0077cc',
+    accent: '#0077cc',
+    primaryLight: '#007bff',
+    primaryDark: '#004c99',
+    success: '#28a745',
+    warning: '#ffc107',
+    error: '#dc3545',
+    border: '#fa7d08',
+    borderLight: '#f0f0f0',
+    divider: '#cccccc',
+    shadow: 'rgba(0, 0, 0, 0.1)',
+    shadowDark: 'rgba(0, 0, 0, 0.2)',
+    overlay: 'rgba(0, 0, 0, 0.5)',
+    highlight: '#E3F2FD',
+  },
+  dark: {
+    background: '#111111',
+    surface: '#1a1a1a',
+    surfacePrimary: '#222222',
+    surfaceSecondary: '#111111',
+    text: '#ffffff',
+    textPrimary: '#ffffff',
+    textSecondary: '#cccccc',
+    textTertiary: '#999999',
+    textOnAccent: '#ffffff',
+    primary: '#1a75d2',
+    accent: '#1a75d2',
+    primaryLight: '#88c5ff',
+    primaryDark: '#b3d9ff',
+    success: '#25a03a',
+    warning: '#e0aa12',
+    error: '#b20c0c',
+    border: '#fbad05',
+    borderLight: '#444444',
+    divider: '#555555',
+    shadow: 'rgba(0, 0, 0, 0.3)',
+    shadowDark: 'rgba(0, 0, 0, 0.5)',
+    overlay: 'rgba(0, 0, 0, 0.7)',
+    highlight: '#1E3A5F',
+  },
+};

package/src/server/index.js

@@ -23,12 +23,12 @@ export class SanvikaUI {
   #secret;
 
   constructor({ url, clientId, serviceKey, secret } = {}) {
-    const finalUrl = url || _readEnv("UI_URL");
+    const finalUrl = url || _readEnv("UI_URL") || "https://ui.sanvikaproduction.com";
     const finalClientId = clientId || _readEnv("CLIENT_ID") || _readEnv("UI_CLIENT_ID");
     const finalServiceKey = serviceKey || _readEnv("SANVIKA_SERVICE_KEY") || "";
     const finalSecret = secret || _readEnv("UI_CLIENT_SECRET") || "";  // Tier 2 fallback (optional)
-    if (!finalUrl || !finalClientId) {
-      throw new Error("@sanvika/ui/server: UI_URL and CLIENT_ID are required");
+    if (!finalClientId) {
+      throw new Error("@sanvika/ui/server: CLIENT_ID is required");
     }
     this.#url = finalUrl.replace(/\/$/, "");
     this.#clientId = finalClientId;