@connect-xyz/auth-react 0.13.0 → 0.16.0

package/README.md

@@ -35,6 +35,7 @@ function App() {
     <Auth
       jwt={jwt}
       env="production" // or "sandbox" for testing
+      theme="auto" // 'auto' (default), 'light', or 'dark'
     />
   );
 }
@@ -68,6 +69,7 @@ function App() {
     <Auth
       jwt={jwt}
       env="production"
+      theme="auto" // 'auto' (default), 'light', or 'dark'
       onError={handleError}
       onClose={handleClose}
       onDeposit={handleDeposit}
@@ -101,6 +103,7 @@ function App() {
       <Auth
         jwt={jwt}
         env={environment}
+        theme="auto" // 'auto' (default), 'light', or 'dark'
         onError={({ errorCode, reason }) => {
           console.log('Error:', errorCode, 'Reason:', reason);
         }}
@@ -129,6 +132,7 @@ export default App;
 | ----------- | --------------------------------- | -------- | -------------- | ---------------------------------------------- |
 | `jwt`       | `string`                          | Yes      | -              | JWT token for authentication with Connect Auth |
 | `env`       | `"production" \| "sandbox"`       | No       | `"production"` | Target environment                             |
+| `theme`     | `"auto" \| "light" \| "dark"`     | No       | `"auto"`       | Theme mode for the interface                   |
 | `onError`   | `({ errorCode, reason }) => void` | No       | -              | Callback for error events                      |
 | `onClose`   | `() => void`                      | No       | -              | Callback when the widget is closed             |
 | `onDeposit` | `({ data }) => void`              | No       | -              | Callback for deposit received                  |

package/dist/index.d.ts

@@ -18,6 +18,7 @@ declare type AppEvent<TType extends string = string, TData = Record<string, unkn
  * @param props - Component properties
  * @param jwt - JWT token for authentication (required)
  * @param env - Target environment ("sandbox" | "production", defaults to "production")
+ * @param theme - Theme mode ("auto" | "light" | "dark", defaults to "auto")
  * @param onError - Callback function for error handling
  * @param onClose - Callback function for close events
  * @param onDeposit - Callback function for deposit events
@@ -31,9 +32,13 @@ declare type AppEvent<TType extends string = string, TData = Record<string, unkn
  * // Using sandbox environment for testing
  * <Auth jwt="your-jwt-token" env="sandbox" />
  *
+ * // Force dark theme
+ * <Auth jwt="your-jwt-token" theme="dark" />
+ *
  * // With callback functions
  * <Auth
  *   jwt="your-jwt-token"
+ *   theme="auto"
  *   onError={({ errorCode, reason }) => console.error('Auth error:', errorCode, 'Reason:', reason)}
  *   onClose={() => console.log('Auth closed')}
  *   onDeposit={({ data }) => console.log('Deposit completed:', data.depositId, 'Status:', data.status.value)}
@@ -95,6 +100,29 @@ declare interface AuthWrapperProps extends AuthCallbacks {
      * ```
      */
     env?: Environment;
+    /**
+     * Theme mode for the Connect Auth interface.
+     *
+     * @default "auto"
+     *
+     * Available themes:
+     * - `"auto"` - Automatically detect system preference (light/dark mode)
+     * - `"light"` - Force light theme
+     * - `"dark"` - Force dark theme
+     *
+     * @example
+     * ```tsx
+     * // Auto-detect system preference (default)
+     * <Auth jwt={token} />
+     *
+     * // Force dark theme
+     * <Auth jwt={token} theme="dark" />
+     *
+     * // Force light theme
+     * <Auth jwt={token} theme="light" />
+     * ```
+     */
+    theme?: Theme;
 }
 
 /**
@@ -187,4 +215,13 @@ declare type ErrorPayload = {
     reason: string;
 };
 
+/**
+ * Theme mode for the Connect Auth interface.
+ *
+ * - `"auto"` - Automatically detect system preference (light/dark mode)
+ * - `"light"` - Force light theme
+ * - `"dark"` - Force dark theme
+ */
+declare type Theme = 'auto' | 'light' | 'dark';
+
 export { }

package/dist/index.js

@@ -1,35 +1,37 @@
-import l, { useRef as m, useEffect as p } from "react";
-const h = {
+import m, { useRef as h, useEffect as p } from "react";
+const x = {
   sandbox: "https://sdk.sandbox.connect.xyz/auth-web/index.js",
   production: "https://sdk.connect.xyz/auth-web/index.js"
-}, x = "connect-auth-script", a = "connect-auth", y = (n = "production") => h[n], R = ({
+}, y = "connect-auth-script", a = "connect-auth", I = (n = "production") => x[n], b = ({
   jwt: n,
   env: c = "production",
+  theme: f,
   onError: r,
   onClose: o,
   onDeposit: s,
   onEvent: i,
-  ...f
+  ...l
 }) => {
-  const d = m(null);
+  const d = h(null);
   return p(() => {
     const t = d.current;
     t && (r && (t.onError = r), o && (t.onClose = o), s && (t.onDeposit = s), i && (t.onEvent = i));
   }, [r, o, s, i]), p(() => {
-    const t = y(c), u = `${x}-${c}`;
+    const t = I(c), u = `${y}-${c}`;
     if (document.getElementById(u))
       return;
     const e = document.createElement("script");
     e.id = u, e.src = t, e.type = "module", e.async = !0, e.onerror = () => {
       console.error(`Failed to load the script for ${a} from ${c} environment.`);
     }, document.head.appendChild(e);
-  }, [c]), l.createElement(a, {
+  }, [c]), m.createElement(a, {
     ref: d,
     jwt: n,
     env: c,
-    ...f
+    theme: f,
+    ...l
   });
 };
 export {
-  R as Auth
+  b as Auth
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connect-xyz/auth-react",
-  "version": "0.13.0",
+  "version": "0.16.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",