@pixygon/auth 1.0.0 → 1.1.0

package/dist/{index-CIK2MKl9.d.ts → index-CuhQGwDH.d.ts}

@@ -3,7 +3,7 @@
  * Type definitions for the Pixygon authentication system
  */
 type UserRole = 'user' | 'creator' | 'admin' | 'superadmin';
-type SubscriptionTier = 'free' | 'basic' | 'pro' | 'family' | 'enterprise';
+type SubscriptionTier = 'free' | 'plus' | 'family' | 'basic' | 'pro' | 'enterprise';
 interface User {
     _id: string;
     userName: string;
@@ -107,14 +107,36 @@ interface ResendVerificationRequest {
 interface ResendVerificationResponse {
     message: string;
 }
+interface ChangePasswordRequest {
+    currentPassword: string;
+    newPassword: string;
+}
+interface ChangePasswordResponse {
+    status: string;
+}
+interface LogoutResponse {
+    status: string;
+}
 type AuthErrorCode = 'INVALID_CREDENTIALS' | 'USER_NOT_FOUND' | 'USER_EXISTS' | 'EMAIL_NOT_VERIFIED' | 'INVALID_VERIFICATION_CODE' | 'EXPIRED_VERIFICATION_CODE' | 'INVALID_RECOVERY_CODE' | 'EXPIRED_RECOVERY_CODE' | 'TOKEN_EXPIRED' | 'TOKEN_INVALID' | 'REFRESH_TOKEN_EXPIRED' | 'NETWORK_ERROR' | 'SERVER_ERROR' | 'UNKNOWN_ERROR';
 interface AuthError {
     code: AuthErrorCode;
     message: string;
     details?: Record<string, unknown>;
 }
+interface AuthTheme {
+    primaryColor?: string;
+    backgroundColor?: string;
+    surfaceColor?: string;
+    textColor?: string;
+    textSecondary?: string;
+    errorColor?: string;
+    successColor?: string;
+    borderRadius?: string;
+    fontFamily?: string;
+}
+declare const DEFAULT_THEME: Required<AuthTheme>;
 interface AuthConfig {
-    /** Base URL for the auth API (e.g., https://pixygon-server.onrender.com/v1) */
+    /** Base URL for the auth API (e.g., https://api.pixygon.com/v1) */
     baseUrl: string;
     /** App identifier for token storage keys */
     appId: string;
@@ -136,6 +158,8 @@ interface AuthConfig {
     storage?: AuthStorage;
     /** Enable debug logging (default: false) */
     debug?: boolean;
+    /** Theme customization for branded components */
+    theme?: AuthTheme;
 }
 interface AuthStorage {
     getItem: (key: string) => string | null | Promise<string | null>;
@@ -150,6 +174,7 @@ interface AuthContextValue extends AuthState {
     resendVerification: (data: ResendVerificationRequest) => Promise<ResendVerificationResponse>;
     forgotPassword: (data: ForgotPasswordRequest) => Promise<ForgotPasswordResponse>;
     recoverPassword: (data: RecoverPasswordRequest) => Promise<RecoverPasswordResponse>;
+    changePassword: (data: ChangePasswordRequest) => Promise<ChangePasswordResponse>;
     refreshTokens: () => Promise<void>;
     getAccessToken: () => string | null;
     isAuthenticated: boolean;
@@ -164,6 +189,7 @@ interface LoginFormProps {
     onNavigateForgotPassword?: () => void;
     showBranding?: boolean;
     className?: string;
+    theme?: AuthTheme;
 }
 interface RegisterFormProps {
     onSuccess?: (user: User) => void;
@@ -171,6 +197,7 @@ interface RegisterFormProps {
     onNavigateLogin?: () => void;
     showBranding?: boolean;
     className?: string;
+    theme?: AuthTheme;
 }
 interface VerifyFormProps {
     userName: string;
@@ -179,6 +206,7 @@ interface VerifyFormProps {
     onNavigateLogin?: () => void;
     showBranding?: boolean;
     className?: string;
+    theme?: AuthTheme;
 }
 interface ForgotPasswordFormProps {
     onSuccess?: () => void;
@@ -186,6 +214,7 @@ interface ForgotPasswordFormProps {
     onNavigateLogin?: () => void;
     showBranding?: boolean;
     className?: string;
+    theme?: AuthTheme;
 }
 interface PixygonAuthProps {
     mode: 'login' | 'register' | 'verify' | 'forgot-password' | 'recover-password';
@@ -198,4 +227,4 @@ interface PixygonAuthProps {
     className?: string;
 }
 
-export type { AuthContextValue as A, ForgotPasswordRequest as F, LoginRequest as L, PixygonAuthProps as P, RegisterRequest as R, SubscriptionTier as S, TokenPair as T, User as U, VerifyRequest as V, AuthConfig as a, AuthError as b, AuthStatus as c, UserRole as d, AuthStorage as e, LoginResponse as f, RegisterResponse as g, VerifyResponse as h, ResendVerificationRequest as i, ResendVerificationResponse as j, ForgotPasswordResponse as k, RecoverPasswordRequest as l, RecoverPasswordResponse as m, RefreshTokenRequest as n, RefreshTokenResponse as o, AuthErrorCode as p, AuthState as q, ForgotPasswordFormProps as r, LoginFormProps as s, RegisterFormProps as t, TokenPayload as u, VerifyFormProps as v };
+export { type AuthContextValue as A, type ChangePasswordRequest as C, DEFAULT_THEME as D, type ForgotPasswordRequest as F, type LoginRequest as L, type PixygonAuthProps as P, type RegisterRequest as R, type SubscriptionTier as S, type TokenPair as T, type User as U, type VerifyRequest as V, type AuthConfig as a, type AuthError as b, type AuthStatus as c, type UserRole as d, type AuthStorage as e, type LoginResponse as f, type RegisterResponse as g, type VerifyResponse as h, type ResendVerificationRequest as i, type ResendVerificationResponse as j, type ForgotPasswordResponse as k, type RecoverPasswordRequest as l, type RecoverPasswordResponse as m, type RefreshTokenRequest as n, type RefreshTokenResponse as o, type ChangePasswordResponse as p, type LogoutResponse as q, type AuthErrorCode as r, type AuthState as s, type AuthTheme as t, type ForgotPasswordFormProps as u, type LoginFormProps as v, type RegisterFormProps as w, type TokenPayload as x, type VerifyFormProps as y };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { A as AuthContextValue, a as AuthConfig, U as User, b as AuthError, c as AuthStatus, d as UserRole, e as AuthStorage, T as TokenPair, L as LoginRequest, f as LoginResponse, R as RegisterRequest, g as RegisterResponse, V as VerifyRequest, h as VerifyResponse, i as ResendVerificationRequest, j as ResendVerificationResponse, F as ForgotPasswordRequest, k as ForgotPasswordResponse, l as RecoverPasswordRequest, m as RecoverPasswordResponse, n as RefreshTokenRequest, o as RefreshTokenResponse } from './index-CIK2MKl9.mjs';
-export { p as AuthErrorCode, q as AuthState, r as ForgotPasswordFormProps, s as LoginFormProps, P as PixygonAuthProps, t as RegisterFormProps, S as SubscriptionTier, u as TokenPayload, v as VerifyFormProps } from './index-CIK2MKl9.mjs';
+import { A as AuthContextValue, a as AuthConfig, U as User, b as AuthError, c as AuthStatus, d as UserRole, e as AuthStorage, T as TokenPair, L as LoginRequest, f as LoginResponse, R as RegisterRequest, g as RegisterResponse, V as VerifyRequest, h as VerifyResponse, i as ResendVerificationRequest, j as ResendVerificationResponse, F as ForgotPasswordRequest, k as ForgotPasswordResponse, l as RecoverPasswordRequest, m as RecoverPasswordResponse, n as RefreshTokenRequest, o as RefreshTokenResponse, C as ChangePasswordRequest, p as ChangePasswordResponse, q as LogoutResponse } from './index-CuhQGwDH.mjs';
+export { r as AuthErrorCode, s as AuthState, t as AuthTheme, D as DEFAULT_THEME, u as ForgotPasswordFormProps, v as LoginFormProps, P as PixygonAuthProps, w as RegisterFormProps, S as SubscriptionTier, x as TokenPayload, y as VerifyFormProps } from './index-CuhQGwDH.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
@@ -67,6 +67,7 @@ interface UseAuthReturn {
     resendVerification: ReturnType<typeof useAuthContext>['resendVerification'];
     forgotPassword: ReturnType<typeof useAuthContext>['forgotPassword'];
     recoverPassword: ReturnType<typeof useAuthContext>['recoverPassword'];
+    changePassword: ReturnType<typeof useAuthContext>['changePassword'];
     hasRole: (role: UserRole | UserRole[]) => boolean;
 }
 /**
@@ -222,6 +223,8 @@ interface AuthApiClient {
     forgotPassword: (data: ForgotPasswordRequest) => Promise<ForgotPasswordResponse>;
     recoverPassword: (data: RecoverPasswordRequest) => Promise<RecoverPasswordResponse>;
     refreshToken: (data: RefreshTokenRequest) => Promise<RefreshTokenResponse>;
+    changePassword: (data: ChangePasswordRequest) => Promise<ChangePasswordResponse>;
+    logout: () => Promise<LogoutResponse>;
     getMe: () => Promise<User>;
     updateProfile: (data: Partial<User>) => Promise<User>;
     setAccessToken: (token: string | null) => void;
@@ -230,4 +233,4 @@ interface AuthApiClient {
 }
 declare function createAuthApiClient(config: AuthConfig, tokenStorage: TokenStorage): AuthApiClient;
 
-export { type AuthApiClient, AuthConfig, AuthContext, AuthContextValue, AuthError, AuthProvider, type AuthProviderProps, AuthStatus, AuthStorage, ForgotPasswordRequest, ForgotPasswordResponse, LoginRequest, LoginResponse, RecoverPasswordRequest, RecoverPasswordResponse, RefreshTokenRequest, RefreshTokenResponse, RegisterRequest, RegisterResponse, ResendVerificationRequest, ResendVerificationResponse, TokenPair, type TokenStorage, type UseAuthErrorReturn, type UseAuthReturn, type UseAuthStatusReturn, type UseProfileSyncReturn, type UseRequireAuthOptions, type UseRequireAuthReturn, type UseTokenReturn, type UseUserReturn, User, type UserProfile, UserRole, VerifyRequest, VerifyResponse, createAuthApiClient, createTokenStorage, useAuth, useAuthContext, useAuthError, useAuthStatus, useProfileSync, useRequireAuth, useToken, useUser };
+export { type AuthApiClient, AuthConfig, AuthContext, AuthContextValue, AuthError, AuthProvider, type AuthProviderProps, AuthStatus, AuthStorage, ChangePasswordRequest, ChangePasswordResponse, ForgotPasswordRequest, ForgotPasswordResponse, LoginRequest, LoginResponse, LogoutResponse, RecoverPasswordRequest, RecoverPasswordResponse, RefreshTokenRequest, RefreshTokenResponse, RegisterRequest, RegisterResponse, ResendVerificationRequest, ResendVerificationResponse, TokenPair, type TokenStorage, type UseAuthErrorReturn, type UseAuthReturn, type UseAuthStatusReturn, type UseProfileSyncReturn, type UseRequireAuthOptions, type UseRequireAuthReturn, type UseTokenReturn, type UseUserReturn, User, type UserProfile, UserRole, VerifyRequest, VerifyResponse, createAuthApiClient, createTokenStorage, useAuth, useAuthContext, useAuthError, useAuthStatus, useProfileSync, useRequireAuth, useToken, useUser };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { A as AuthContextValue, a as AuthConfig, U as User, b as AuthError, c as AuthStatus, d as UserRole, e as AuthStorage, T as TokenPair, L as LoginRequest, f as LoginResponse, R as RegisterRequest, g as RegisterResponse, V as VerifyRequest, h as VerifyResponse, i as ResendVerificationRequest, j as ResendVerificationResponse, F as ForgotPasswordRequest, k as ForgotPasswordResponse, l as RecoverPasswordRequest, m as RecoverPasswordResponse, n as RefreshTokenRequest, o as RefreshTokenResponse } from './index-CIK2MKl9.js';
-export { p as AuthErrorCode, q as AuthState, r as ForgotPasswordFormProps, s as LoginFormProps, P as PixygonAuthProps, t as RegisterFormProps, S as SubscriptionTier, u as TokenPayload, v as VerifyFormProps } from './index-CIK2MKl9.js';
+import { A as AuthContextValue, a as AuthConfig, U as User, b as AuthError, c as AuthStatus, d as UserRole, e as AuthStorage, T as TokenPair, L as LoginRequest, f as LoginResponse, R as RegisterRequest, g as RegisterResponse, V as VerifyRequest, h as VerifyResponse, i as ResendVerificationRequest, j as ResendVerificationResponse, F as ForgotPasswordRequest, k as ForgotPasswordResponse, l as RecoverPasswordRequest, m as RecoverPasswordResponse, n as RefreshTokenRequest, o as RefreshTokenResponse, C as ChangePasswordRequest, p as ChangePasswordResponse, q as LogoutResponse } from './index-CuhQGwDH.js';
+export { r as AuthErrorCode, s as AuthState, t as AuthTheme, D as DEFAULT_THEME, u as ForgotPasswordFormProps, v as LoginFormProps, P as PixygonAuthProps, w as RegisterFormProps, S as SubscriptionTier, x as TokenPayload, y as VerifyFormProps } from './index-CuhQGwDH.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
@@ -67,6 +67,7 @@ interface UseAuthReturn {
     resendVerification: ReturnType<typeof useAuthContext>['resendVerification'];
     forgotPassword: ReturnType<typeof useAuthContext>['forgotPassword'];
     recoverPassword: ReturnType<typeof useAuthContext>['recoverPassword'];
+    changePassword: ReturnType<typeof useAuthContext>['changePassword'];
     hasRole: (role: UserRole | UserRole[]) => boolean;
 }
 /**
@@ -222,6 +223,8 @@ interface AuthApiClient {
     forgotPassword: (data: ForgotPasswordRequest) => Promise<ForgotPasswordResponse>;
     recoverPassword: (data: RecoverPasswordRequest) => Promise<RecoverPasswordResponse>;
     refreshToken: (data: RefreshTokenRequest) => Promise<RefreshTokenResponse>;
+    changePassword: (data: ChangePasswordRequest) => Promise<ChangePasswordResponse>;
+    logout: () => Promise<LogoutResponse>;
     getMe: () => Promise<User>;
     updateProfile: (data: Partial<User>) => Promise<User>;
     setAccessToken: (token: string | null) => void;
@@ -230,4 +233,4 @@ interface AuthApiClient {
 }
 declare function createAuthApiClient(config: AuthConfig, tokenStorage: TokenStorage): AuthApiClient;
 
-export { type AuthApiClient, AuthConfig, AuthContext, AuthContextValue, AuthError, AuthProvider, type AuthProviderProps, AuthStatus, AuthStorage, ForgotPasswordRequest, ForgotPasswordResponse, LoginRequest, LoginResponse, RecoverPasswordRequest, RecoverPasswordResponse, RefreshTokenRequest, RefreshTokenResponse, RegisterRequest, RegisterResponse, ResendVerificationRequest, ResendVerificationResponse, TokenPair, type TokenStorage, type UseAuthErrorReturn, type UseAuthReturn, type UseAuthStatusReturn, type UseProfileSyncReturn, type UseRequireAuthOptions, type UseRequireAuthReturn, type UseTokenReturn, type UseUserReturn, User, type UserProfile, UserRole, VerifyRequest, VerifyResponse, createAuthApiClient, createTokenStorage, useAuth, useAuthContext, useAuthError, useAuthStatus, useProfileSync, useRequireAuth, useToken, useUser };
+export { type AuthApiClient, AuthConfig, AuthContext, AuthContextValue, AuthError, AuthProvider, type AuthProviderProps, AuthStatus, AuthStorage, ChangePasswordRequest, ChangePasswordResponse, ForgotPasswordRequest, ForgotPasswordResponse, LoginRequest, LoginResponse, LogoutResponse, RecoverPasswordRequest, RecoverPasswordResponse, RefreshTokenRequest, RefreshTokenResponse, RegisterRequest, RegisterResponse, ResendVerificationRequest, ResendVerificationResponse, TokenPair, type TokenStorage, type UseAuthErrorReturn, type UseAuthReturn, type UseAuthStatusReturn, type UseProfileSyncReturn, type UseRequireAuthOptions, type UseRequireAuthReturn, type UseTokenReturn, type UseUserReturn, User, type UserProfile, UserRole, VerifyRequest, VerifyResponse, createAuthApiClient, createTokenStorage, useAuth, useAuthContext, useAuthError, useAuthStatus, useProfileSync, useRequireAuth, useToken, useUser };

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   AuthContext: () => AuthContext,
   AuthProvider: () => AuthProvider,
+  DEFAULT_THEME: () => DEFAULT_THEME,
   createAuthApiClient: () => createAuthApiClient,
   createTokenStorage: () => createTokenStorage,
   useAuth: () => useAuth,
@@ -35,6 +36,19 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/types/index.ts
+var DEFAULT_THEME = {
+  primaryColor: "#6366f1",
+  backgroundColor: "#0f0f0f",
+  surfaceColor: "#262626",
+  textColor: "#ffffff",
+  textSecondary: "#a3a3a3",
+  errorColor: "#ef4444",
+  successColor: "#22c55e",
+  borderRadius: "1rem",
+  fontFamily: "inherit"
+};
+
 // src/providers/AuthProvider.tsx
 var import_react = require("react");
 
@@ -48,15 +62,25 @@ var getKeys = (appId) => ({
 var defaultStorage = {
   getItem: (key) => {
     if (typeof window === "undefined") return null;
-    return localStorage.getItem(key);
+    try {
+      return localStorage.getItem(key);
+    } catch {
+      return null;
+    }
   },
   setItem: (key, value) => {
     if (typeof window === "undefined") return;
-    localStorage.setItem(key, value);
+    try {
+      localStorage.setItem(key, value);
+    } catch {
+    }
   },
   removeItem: (key) => {
     if (typeof window === "undefined") return;
-    localStorage.removeItem(key);
+    try {
+      localStorage.removeItem(key);
+    } catch {
+    }
   }
 };
 function createTokenStorage(appId, storage = defaultStorage) {
@@ -316,6 +340,9 @@ function createAuthApiClient(config, tokenStorage) {
         method: "POST",
         body: JSON.stringify(data)
       });
+      if (!response.user || !response.token) {
+        throw createAuthError(401, response.message || "Login failed");
+      }
       currentAccessToken = response.token;
       await tokenStorage.setTokens(
         response.token,
@@ -324,7 +351,7 @@ function createAuthApiClient(config, tokenStorage) {
         response.user
       );
       config.onLogin?.(response.user);
-      log("Login successful:", response.user.userName);
+      log("Login successful:", response.user?.userName);
       return response;
     },
     async register(data) {
@@ -389,6 +416,26 @@ function createAuthApiClient(config, tokenStorage) {
       });
       return response;
     },
+    async changePassword(data) {
+      const response = await request("/auth/changePassword", {
+        method: "POST",
+        body: JSON.stringify(data)
+      });
+      log("Password changed successfully");
+      return response;
+    },
+    async logout() {
+      try {
+        const response = await request("/auth/logout", {
+          method: "POST"
+        });
+        log("Logout successful");
+        return response;
+      } catch (error) {
+        log("Logout request failed, continuing with local cleanup:", error);
+        return { status: "ok" };
+      }
+    },
     // ========================================================================
     // User Endpoints
     // ========================================================================
@@ -679,8 +726,15 @@ function AuthProvider({ config: userConfig, children }) {
     },
     [apiClient]
   );
+  const changePassword = (0, import_react.useCallback)(
+    async (data) => {
+      return apiClient.changePassword(data);
+    },
+    [apiClient]
+  );
   const logout = (0, import_react.useCallback)(async () => {
     log("Logging out...");
+    await apiClient.logout();
     await tokenStorage.clear();
     apiClient.setAccessToken(null);
     setState({
@@ -729,6 +783,7 @@ function AuthProvider({ config: userConfig, children }) {
       resendVerification,
       forgotPassword,
       recoverPassword,
+      changePassword,
       refreshTokens,
       // Utilities
       getAccessToken,
@@ -745,6 +800,7 @@ function AuthProvider({ config: userConfig, children }) {
       resendVerification,
       forgotPassword,
       recoverPassword,
+      changePassword,
       refreshTokens,
       getAccessToken,
       hasRole,
@@ -923,6 +979,7 @@ function useAuth() {
       resendVerification: context.resendVerification,
       forgotPassword: context.forgotPassword,
       recoverPassword: context.recoverPassword,
+      changePassword: context.changePassword,
       // Utilities
       hasRole: context.hasRole
     }),
@@ -1024,6 +1081,7 @@ function useAuthError() {
 0 && (module.exports = {
   AuthContext,
   AuthProvider,
+  DEFAULT_THEME,
   createAuthApiClient,
   createTokenStorage,
   useAuth,

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import {
   AuthContext,
   AuthProvider,
+  DEFAULT_THEME,
   createAuthApiClient,
   createTokenStorage,
   useAuth,
@@ -11,10 +12,11 @@ import {
   useRequireAuth,
   useToken,
   useUser
-} from "./chunk-E34M2RJD.mjs";
+} from "./chunk-ELVIBXBG.mjs";
 export {
   AuthContext,
   AuthProvider,
+  DEFAULT_THEME,
   createAuthApiClient,
   createTokenStorage,
   useAuth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixygon/auth",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Shared authentication package for all Pixygon applications",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/api/client.ts

@@ -21,6 +21,9 @@ import type {
   RefreshTokenResponse,
   ResendVerificationRequest,
   ResendVerificationResponse,
+  ChangePasswordRequest,
+  ChangePasswordResponse,
+  LogoutResponse,
   User,
 } from '../types';
 import type { TokenStorage } from '../utils/storage';
@@ -77,6 +80,8 @@ export interface AuthApiClient {
   forgotPassword: (data: ForgotPasswordRequest) => Promise<ForgotPasswordResponse>;
   recoverPassword: (data: RecoverPasswordRequest) => Promise<RecoverPasswordResponse>;
   refreshToken: (data: RefreshTokenRequest) => Promise<RefreshTokenResponse>;
+  changePassword: (data: ChangePasswordRequest) => Promise<ChangePasswordResponse>;
+  logout: () => Promise<LogoutResponse>;
 
   // User endpoints
   getMe: () => Promise<User>;
@@ -229,6 +234,11 @@ export function createAuthApiClient(config: AuthConfig, tokenStorage: TokenStora
         body: JSON.stringify(data),
       });
 
+      // Server may return 2xx with a message instead of user (e.g. invalid credentials)
+      if (!response.user || !response.token) {
+        throw createAuthError(401, (response as any).message || 'Login failed');
+      }
+
       currentAccessToken = response.token;
       await tokenStorage.setTokens(
         response.token,
@@ -238,7 +248,7 @@ export function createAuthApiClient(config: AuthConfig, tokenStorage: TokenStora
       );
 
       config.onLogin?.(response.user);
-      log('Login successful:', response.user.userName);
+      log('Login successful:', response.user?.userName);
 
       return response;
     },
@@ -320,6 +330,29 @@ export function createAuthApiClient(config: AuthConfig, tokenStorage: TokenStora
       return response;
     },
 
+    async changePassword(data: ChangePasswordRequest): Promise<ChangePasswordResponse> {
+      const response = await request<ChangePasswordResponse>('/auth/changePassword', {
+        method: 'POST',
+        body: JSON.stringify(data),
+      });
+
+      log('Password changed successfully');
+      return response;
+    },
+
+    async logout(): Promise<LogoutResponse> {
+      try {
+        const response = await request<LogoutResponse>('/auth/logout', {
+          method: 'POST',
+        });
+        log('Logout successful');
+        return response;
+      } catch (error) {
+        log('Logout request failed, continuing with local cleanup:', error);
+        return { status: 'ok' };
+      }
+    },
+
     // ========================================================================
     // User Endpoints
     // ========================================================================

package/src/components/ForgotPasswordForm.tsx

@@ -6,6 +6,7 @@
 import { useState, useCallback, type FormEvent } from 'react';
 import { useAuth } from '../hooks';
 import type { ForgotPasswordFormProps, AuthError } from '../types';
+import { DEFAULT_THEME } from '../types';
 
 export function ForgotPasswordForm({
   onSuccess,
@@ -13,7 +14,9 @@ export function ForgotPasswordForm({
   onNavigateLogin,
   showBranding = true,
   className = '',
+  theme,
 }: ForgotPasswordFormProps) {
+  const t = { ...DEFAULT_THEME, ...theme };
   const { forgotPassword, isLoading, error } = useAuth();
 
   const [email, setEmail] = useState('');
@@ -54,11 +57,11 @@ export function ForgotPasswordForm({
       <div className={`pixygon-auth-container ${className}`}>
         <style>{`
           .pixygon-auth-container {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #0f0f0f;
-            color: #ffffff;
+            font-family: ${t.fontFamily === 'inherit' ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
+            background: ${t.backgroundColor};
+            color: ${t.textColor};
             padding: 2rem;
-            border-radius: 1rem;
+            border-radius: ${t.borderRadius};
             max-width: 400px;
             width: 100%;
             margin: 0 auto;
@@ -84,13 +87,13 @@ export function ForgotPasswordForm({
 
           .pixygon-auth-subtitle {
             font-size: 0.875rem;
-            color: #a3a3a3;
+            color: ${t.textSecondary};
             margin: 0;
             line-height: 1.5;
           }
 
           .pixygon-auth-link {
-            color: #6366f1;
+            color: ${t.primaryColor};
             text-decoration: none;
             font-size: 0.875rem;
             cursor: pointer;
@@ -109,7 +112,7 @@ export function ForgotPasswordForm({
             text-align: center;
             margin-top: 1.5rem;
             font-size: 0.875rem;
-            color: #a3a3a3;
+            color: ${t.textSecondary};
           }
 
           .pixygon-auth-branding {
@@ -130,7 +133,7 @@ export function ForgotPasswordForm({
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <circle cx="50" cy="50" r="45" fill="#22c55e" />
+            <circle cx="50" cy="50" r="45" fill={t.successColor} />
             <path
               d="M30 50L45 65L70 35"
               stroke="white"
@@ -171,11 +174,11 @@ export function ForgotPasswordForm({
     <div className={`pixygon-auth-container ${className}`}>
       <style>{`
         .pixygon-auth-container {
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          background: #0f0f0f;
-          color: #ffffff;
+          font-family: ${t.fontFamily === 'inherit' ? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" : t.fontFamily};
+          background: ${t.backgroundColor};
+          color: ${t.textColor};
           padding: 2rem;
-          border-radius: 1rem;
+          border-radius: ${t.borderRadius};
           max-width: 400px;
           width: 100%;
           margin: 0 auto;
@@ -201,7 +204,7 @@ export function ForgotPasswordForm({
 
         .pixygon-auth-subtitle {
           font-size: 0.875rem;
-          color: #a3a3a3;
+          color: ${t.textSecondary};
           margin: 0;
         }
 
@@ -220,31 +223,31 @@ export function ForgotPasswordForm({
         .pixygon-auth-label {
           font-size: 0.875rem;
           font-weight: 500;
-          color: #a3a3a3;
+          color: ${t.textSecondary};
         }
 
         .pixygon-auth-input {
-          background: #262626;
+          background: ${t.surfaceColor};
           border: 1px solid #404040;
           border-radius: 0.5rem;
           padding: 0.75rem 1rem;
           font-size: 1rem;
-          color: #ffffff;
+          color: ${t.textColor};
           outline: none;
           transition: border-color 0.2s, box-shadow 0.2s;
         }
 
         .pixygon-auth-input:focus {
-          border-color: #6366f1;
+          border-color: ${t.primaryColor};
           box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
         }
 
         .pixygon-auth-input.error {
-          border-color: #ef4444;
+          border-color: ${t.errorColor};
         }
 
         .pixygon-auth-button {
-          background: #6366f1;
+          background: ${t.primaryColor};
           color: white;
           border: none;
           border-radius: 0.5rem;
@@ -271,7 +274,7 @@ export function ForgotPasswordForm({
 
         .pixygon-auth-error {
           background: rgba(239, 68, 68, 0.1);
-          border: 1px solid #ef4444;
+          border: 1px solid ${t.errorColor};
           border-radius: 0.5rem;
           padding: 0.75rem 1rem;
           color: #fca5a5;
@@ -279,7 +282,7 @@ export function ForgotPasswordForm({
         }
 
         .pixygon-auth-link {
-          color: #6366f1;
+          color: ${t.primaryColor};
           text-decoration: none;
           font-size: 0.875rem;
           cursor: pointer;
@@ -298,7 +301,7 @@ export function ForgotPasswordForm({
           text-align: center;
           margin-top: 1.5rem;
           font-size: 0.875rem;
-          color: #a3a3a3;
+          color: ${t.textSecondary};
         }
 
         .pixygon-auth-branding {
@@ -332,7 +335,7 @@ export function ForgotPasswordForm({
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <circle cx="50" cy="50" r="45" fill="#6366f1" />
+          <circle cx="50" cy="50" r="45" fill={t.primaryColor} />
           <path
             d="M30 45L45 30L70 55L55 70L30 45Z"
             fill="white"