@insforge/react 0.1.7 → 0.2.1

package/dist/types.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode, FormEvent, InputHTMLAttributes, CSSProperties } from 'react';
-import { OAuthProvidersSchema, GetPublicAuthConfigResponse } from '@insforge/shared-schemas';
+import { OAuthProvidersSchema, PublicEmailAuthConfig } from '@insforge/shared-schemas';
 
 type OAuthProvider = OAuthProvidersSchema;
-type AuthConfig = GetPublicAuthConfigResponse;
+type AuthConfig = PublicEmailAuthConfig;
 /**
  * Insforge User type
  */
@@ -165,6 +165,78 @@ interface OAuthProviderConfig {
     svg: ReactNode;
     className: string;
 }
+/**
+ * Hierarchical appearance configuration for SignIn/SignUp forms
+ */
+interface SignInAppearance {
+    /** Container (outermost wrapper) className */
+    container?: string;
+    /** Card (inner box) className */
+    card?: string;
+    /** Header section appearance */
+    header?: {
+        /** Header container className */
+        container?: string;
+        /** Title text className */
+        title?: string;
+        /** Subtitle text className */
+        subtitle?: string;
+    };
+    /** Error banner className */
+    errorBanner?: string;
+    /** Form section appearance */
+    form?: {
+        /** Form container className */
+        container?: string;
+        /** Email field appearance */
+        emailField?: {
+            /** Email field container className */
+            container?: string;
+            /** Email label className */
+            label?: string;
+            /** Email input className */
+            input?: string;
+        };
+        /** Password field appearance */
+        passwordField?: {
+            /** Password field container className */
+            container?: string;
+            /** Password label className */
+            label?: string;
+            /** Password input className */
+            input?: string;
+            /** Forgot password link className */
+            forgotPasswordLink?: string;
+            /** Password strength indicator appearance */
+            strengthIndicator?: {
+                /** Strength indicator container className */
+                container?: string;
+                /** Strength requirement item className */
+                requirement?: string;
+            };
+        };
+    };
+    /** Submit button className */
+    button?: string;
+    /** Sign up/in link section appearance */
+    link?: {
+        /** Link section container className */
+        container?: string;
+        /** Link text className */
+        text?: string;
+        /** Anchor link className */
+        link?: string;
+    };
+    /** Divider className */
+    divider?: string;
+    /** OAuth providers section appearance */
+    oauth?: {
+        /** OAuth container className */
+        container?: string;
+        /** OAuth button className */
+        button?: string;
+    };
+}
 /**
  * Props for SignInForm component
  */
@@ -180,12 +252,8 @@ interface SignInFormProps {
     availableProviders?: OAuthProvider[];
     onOAuthClick?: (provider: OAuthProvider) => void;
     emailAuthConfig: AuthConfig;
-    appearance?: {
-        containerClassName?: string;
-        cardClassName?: string;
-        formClassName?: string;
-        buttonClassName?: string;
-    };
+    /** Hierarchical appearance configuration for deep customization */
+    appearance?: SignInAppearance;
     title?: string;
     subtitle?: string;
     emailLabel?: string;
@@ -201,6 +269,77 @@ interface SignInFormProps {
     signUpUrl?: string;
     dividerText?: string;
 }
+/**
+ * Hierarchical appearance configuration for SignUp forms
+ * Allows deep customization of all nested components
+ */
+interface SignUpAppearance {
+    /** Container (outermost wrapper) className */
+    container?: string;
+    /** Card (inner box) className */
+    card?: string;
+    /** Header section appearance */
+    header?: {
+        /** Header container className */
+        container?: string;
+        /** Title text className */
+        title?: string;
+        /** Subtitle text className */
+        subtitle?: string;
+    };
+    /** Error banner className */
+    errorBanner?: string;
+    /** Form section appearance */
+    form?: {
+        /** Form container className */
+        container?: string;
+        /** Email field appearance */
+        emailField?: {
+            /** Email field container className */
+            container?: string;
+            /** Email label className */
+            label?: string;
+            /** Email input className */
+            input?: string;
+        };
+        /** Password field appearance */
+        passwordField?: {
+            /** Password field container className */
+            container?: string;
+            /** Password label className */
+            label?: string;
+            /** Password input className */
+            input?: string;
+            /** Password strength indicator appearance */
+            strengthIndicator?: {
+                /** Strength indicator container className */
+                container?: string;
+                /** Strength requirement item className */
+                requirement?: string;
+            };
+        };
+    };
+    /** Submit button className */
+    button?: string;
+    /** Sign in link section appearance */
+    link?: {
+        /** Link section container className */
+        container?: string;
+        /** Link text className */
+        text?: string;
+        /** Anchor link className */
+        link?: string;
+    };
+    /** Divider className */
+    divider?: string;
+    /** OAuth providers section appearance */
+    oauth?: {
+        /** OAuth container className */
+        container?: string;
+        /** OAuth button className */
+        button?: string;
+    };
+}
 /**
  * Props for SignUpForm component
  */
@@ -216,12 +355,8 @@ interface SignUpFormProps {
     availableProviders?: OAuthProvider[];
     onOAuthClick?: (provider: OAuthProvider) => void;
     emailAuthConfig: AuthConfig;
-    appearance?: {
-        containerClassName?: string;
-        cardClassName?: string;
-        formClassName?: string;
-        buttonClassName?: string;
-    };
+    /** Hierarchical appearance configuration for deep customization */
+    appearance?: SignUpAppearance;
     title?: string;
     subtitle?: string;
     emailLabel?: string;
@@ -235,6 +370,51 @@ interface SignUpFormProps {
     signInUrl?: string;
     dividerText?: string;
 }
+/**
+ * Hierarchical appearance configuration for ForgotPassword forms
+ */
+interface ForgotPasswordAppearance {
+    /** Container (outermost wrapper) className */
+    container?: string;
+    /** Card (inner box) className */
+    card?: string;
+    /** Header section appearance */
+    header?: {
+        /** Header container className */
+        container?: string;
+        /** Title text className */
+        title?: string;
+        /** Subtitle text className */
+        subtitle?: string;
+    };
+    /** Error banner className */
+    errorBanner?: string;
+    /** Form section appearance */
+    form?: {
+        /** Form container className */
+        container?: string;
+        /** Email field appearance */
+        emailField?: {
+            /** Email field container className */
+            container?: string;
+            /** Email label className */
+            label?: string;
+            /** Email input className */
+            input?: string;
+        };
+    };
+    /** Submit button className */
+    button?: string;
+    /** Back to sign in link section appearance */
+    link?: {
+        /** Link section container className */
+        container?: string;
+        /** Link text className */
+        text?: string;
+        /** Anchor link className */
+        link?: string;
+    };
+}
 /**
  * Props for ForgotPasswordForm component
  */
@@ -245,12 +425,8 @@ interface ForgotPasswordFormProps {
     error?: string;
     loading?: boolean;
     success?: boolean;
-    appearance?: {
-        containerClassName?: string;
-        cardClassName?: string;
-        formClassName?: string;
-        buttonClassName?: string;
-    };
+    /** Hierarchical appearance configuration for deep customization */
+    appearance?: ForgotPasswordAppearance;
     title?: string;
     subtitle?: string;
     emailLabel?: string;
@@ -262,6 +438,60 @@ interface ForgotPasswordFormProps {
     successTitle?: string;
     successMessage?: string;
 }
+/**
+ * Hierarchical appearance configuration for ResetPassword forms
+ */
+interface ResetPasswordAppearance {
+    /** Container (outermost wrapper) className */
+    container?: string;
+    /** Card (inner box) className */
+    card?: string;
+    /** Header section appearance */
+    header?: {
+        /** Header container className */
+        container?: string;
+        /** Title text className */
+        title?: string;
+        /** Subtitle text className */
+        subtitle?: string;
+    };
+    /** Error banner className */
+    errorBanner?: string;
+    /** Form section appearance */
+    form?: {
+        /** Form container className */
+        container?: string;
+        /** New password field appearance */
+        newPasswordField?: {
+            /** Password field container className */
+            container?: string;
+            /** Password label className */
+            label?: string;
+            /** Password input className */
+            input?: string;
+            /** Password strength indicator appearance */
+            strengthIndicator?: {
+                /** Strength indicator container className */
+                container?: string;
+                /** Strength requirement item className */
+                requirement?: string;
+            };
+        };
+        /** Confirm password field appearance */
+        confirmPasswordField?: {
+            /** Password field container className */
+            container?: string;
+            /** Password label className */
+            label?: string;
+            /** Password input className */
+            input?: string;
+        };
+    };
+    /** Submit button className */
+    button?: string;
+    /** Back to sign in text/link className */
+    backToSignIn?: string;
+}
 /**
  * Props for ResetPasswordForm component
  */
@@ -274,12 +504,8 @@ interface ResetPasswordFormProps {
     error?: string;
     loading?: boolean;
     emailAuthConfig: AuthConfig;
-    appearance?: {
-        containerClassName?: string;
-        cardClassName?: string;
-        formClassName?: string;
-        buttonClassName?: string;
-    };
+    /** Hierarchical appearance configuration for deep customization */
+    appearance?: ResetPasswordAppearance;
     title?: string;
     subtitle?: string;
     newPasswordLabel?: string;
@@ -311,12 +537,8 @@ interface VerifyEmailStatusProps {
  */
 interface SignInProps {
     afterSignInUrl?: string;
-    appearance?: {
-        containerClassName?: string;
-        cardClassName?: string;
-        formClassName?: string;
-        buttonClassName?: string;
-    };
+    /** Hierarchical appearance configuration for deep customization */
+    appearance?: SignInAppearance;
     title?: string;
     subtitle?: string;
     emailLabel?: string;
@@ -344,12 +566,8 @@ interface SignInProps {
  */
 interface SignUpProps {
     afterSignUpUrl?: string;
-    appearance?: {
-        containerClassName?: string;
-        cardClassName?: string;
-        formClassName?: string;
-        buttonClassName?: string;
-    };
+    /** Hierarchical appearance configuration for deep customization */
+    appearance?: SignUpAppearance;
     title?: string;
     subtitle?: string;
     emailLabel?: string;
@@ -401,4 +619,4 @@ interface UserButtonProps {
     };
 }
 
-export type { AuthConfig, AuthContainerProps, AuthDividerProps, AuthErrorBannerProps, AuthFormFieldProps, AuthHeaderProps, AuthLinkProps, AuthOAuthButtonProps, AuthOAuthProvidersProps, AuthPasswordFieldProps, AuthPasswordStrengthIndicatorProps, AuthSubmitButtonProps, AuthVerificationCodeInputProps, BaseAppearance, ConditionalProps, ForgotPasswordFormProps, InsforgeUser, OAuthProvider, OAuthProviderConfig, ProtectProps, ResetPasswordFormProps, SignInFormProps, SignInProps, SignUpFormProps, SignUpProps, UserButtonProps, VerifyEmailStatusProps };
+export type { AuthConfig, AuthContainerProps, AuthDividerProps, AuthErrorBannerProps, AuthFormFieldProps, AuthHeaderProps, AuthLinkProps, AuthOAuthButtonProps, AuthOAuthProvidersProps, AuthPasswordFieldProps, AuthPasswordStrengthIndicatorProps, AuthSubmitButtonProps, AuthVerificationCodeInputProps, BaseAppearance, ConditionalProps, ForgotPasswordAppearance, ForgotPasswordFormProps, InsforgeUser, OAuthProvider, OAuthProviderConfig, ProtectProps, ResetPasswordAppearance, ResetPasswordFormProps, SignInAppearance, SignInFormProps, SignInProps, SignUpAppearance, SignUpFormProps, SignUpProps, UserButtonProps, VerifyEmailStatusProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insforge/react",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "description": "Framework-agnostic React authentication UI components for Insforge - reusable across all frameworks",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,6 +41,11 @@
       "import": "./dist/types.mjs",
       "require": "./dist/types.js"
     },
+    "./router": {
+      "types": "./dist/router.d.ts",
+      "import": "./dist/router.mjs",
+      "require": "./dist/router.js"
+    },
     "./styles.css": "./src/styles.css"
   },
   "files": [
@@ -68,7 +73,8 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0"
   },
   "dependencies": {
     "@insforge/sdk": "0.0.58-dev.6",