@proveanything/smartlinks-auth-ui 0.1.6 → 0.1.7

package/dist/index.js

@@ -11449,10 +11449,37 @@ const DEFAULT_AUTH_CONFIG = {
     emailDisplayMode: 'button',
     googleOAuthFlow: 'oneTap'
 };
-const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, minimal = false, }) => {
+// Helper to dynamically load Google Identity Services if not already loaded
+const loadGoogleIdentityServices = () => {
+    return new Promise((resolve, reject) => {
+        // Check if already loaded
+        if (window.google?.accounts) {
+            resolve();
+            return;
+        }
+        // Check if script is already being loaded
+        const existingScript = document.querySelector('script[src="https://accounts.google.com/gsi/client"]');
+        if (existingScript) {
+            // Wait for existing script to load
+            existingScript.addEventListener('load', () => resolve());
+            existingScript.addEventListener('error', () => reject(new Error('Failed to load Google Identity Services')));
+            return;
+        }
+        // Dynamically inject the script
+        const script = document.createElement('script');
+        script.src = 'https://accounts.google.com/gsi/client';
+        script.async = true;
+        script.defer = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error('Failed to load Google Identity Services'));
+        document.head.appendChild(script);
+    });
+};
+const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'auto', className, customization, skipConfigFetch = false, minimal = false, }) => {
     const [mode, setMode] = React.useState(initialMode);
     const [loading, setLoading] = React.useState(false);
     const [error, setError] = React.useState();
+    const [resolvedTheme, setResolvedTheme] = React.useState('light');
     const [resetSuccess, setResetSuccess] = React.useState(false);
     const [authSuccess, setAuthSuccess] = React.useState(false);
     const [successMessage, setSuccessMessage] = React.useState();
@@ -11466,6 +11493,19 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const [showEmailForm, setShowEmailForm] = React.useState(false); // Track if email form should be shown when emailDisplayMode is 'button'
     const api = new AuthAPI(apiEndpoint, clientId, clientName);
     const auth = useAuth();
+    // Dark mode detection and theme management
+    React.useEffect(() => {
+        if (theme !== 'auto') {
+            setResolvedTheme(theme);
+            return;
+        }
+        // Auto-detect system theme preference
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const updateTheme = () => setResolvedTheme(mediaQuery.matches ? 'dark' : 'light');
+        updateTheme();
+        mediaQuery.addEventListener('change', updateTheme);
+        return () => mediaQuery.removeEventListener('change', updateTheme);
+    }, [theme]);
     // Reinitialize Smartlinks SDK when apiEndpoint changes (for test/dev scenarios)
     // IMPORTANT: Preserve bearer token during reinitialization
     React.useEffect(() => {
@@ -11834,9 +11874,11 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         setLoading(true);
         setError(undefined);
         try {
+            // Dynamically load Google Identity Services if not already loaded
+            await loadGoogleIdentityServices();
             const google = window.google;
-            if (!google) {
-                throw new Error('Google Identity Services not loaded. Please check your internet connection.');
+            if (!google?.accounts) {
+                throw new Error('Google Identity Services failed to initialize');
             }
             if (oauthFlow === 'popup') {
                 // Use OAuth2 popup flow (works in iframes but requires popup permission)
@@ -12006,9 +12048,9 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
     };
     if (configLoading) {
-        return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsxRuntime.jsx("div", { className: "auth-spinner" }) }) }));
+        return (jsxRuntime.jsx(AuthContainer, { theme: resolvedTheme, className: className, minimal: minimal || config?.branding?.minimal || false, children: jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: '2rem' }, children: jsxRuntime.jsx("div", { className: "auth-spinner" }) }) }));
     }
-    return (jsxRuntime.jsx(AuthContainer, { theme: theme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxRuntime.jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.jsx(AuthContainer, { theme: resolvedTheme, className: className, config: config, minimal: minimal || config?.branding?.minimal || false, children: authSuccess ? (jsxRuntime.jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [jsxRuntime.jsx("div", { style: {
                         color: 'var(--auth-primary-color, #4F46E5)',
                         fontSize: '3rem',
                         marginBottom: '1rem'