@insforge/react 0.3.5 → 0.4.5

package/dist/components.d.cts

@@ -0,0 +1,258 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UserSchema } from '@insforge/sdk';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { InsforgeUser } from './types.cjs';
+export { ForgotPasswordForm, ForgotPasswordFormProps, ResetPasswordForm, ResetPasswordFormProps, SignInForm, SignInFormProps, SignUpForm, SignUpFormProps, VerifyEmailStatus, VerifyEmailStatusProps } from './forms.cjs';
+export { AuthBranding, AuthContainer, AuthContainerProps, AuthDivider, AuthDividerProps, AuthEmailVerificationStep, AuthErrorBanner, AuthErrorBannerProps, AuthFormField, AuthFormFieldProps, AuthHeader, AuthHeaderProps, AuthLink, AuthLinkProps, AuthOAuthButton, AuthOAuthButtonProps, AuthOAuthProviders, AuthOAuthProvidersProps, AuthPasswordField, AuthPasswordFieldProps, AuthPasswordStrengthIndicator, AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthSubmitButtonProps, AuthVerificationCodeInput, AuthVerificationCodeInputProps } from './atoms.cjs';
+import '@insforge/shared-schemas';
+
+interface SignInProps {
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    forgotPasswordText?: string;
+    forgotPasswordUrl?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    signUpText?: string;
+    signUpLinkText?: string;
+    signUpUrl?: string;
+    dividerText?: string;
+    onError?: (error: Error) => void;
+}
+/**
+ * Pre-built sign-in component with full authentication logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignIn
+ *   onSuccess={(user) => console.log('Signed in:', user)}
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ * ```
+ */
+declare function SignIn({ onError, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
+
+interface SignUpProps {
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    signInText?: string;
+    signInLinkText?: string;
+    signInUrl?: string;
+    dividerText?: string;
+    onError?: (error: Error) => void;
+}
+/**
+ * Pre-built sign-up component with full authentication logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignUp
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ *
+ * ```
+ */
+declare function SignUp({ onError, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+
+interface ForgotPasswordProps {
+    /** Text customization */
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    backToSignInText?: string;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+}
+/**
+ * Pre-built forgot password component with full business logic.
+ *
+ * Supports two password reset methods (auto-detected from backend config):
+ * - **Link method**: Two-step flow (email → check email message)
+ *   User receives an email with a reset link to complete the process in a new tab
+ * - **Code method**: Three-step flow (email → verify code → reset password)
+ *   User receives a verification code, enters it, then sets a new password
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ForgotPassword
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ * ```
+ */
+declare function ForgotPassword({ onError, ...uiProps }: ForgotPasswordProps): react_jsx_runtime.JSX.Element | null;
+
+interface ResetPasswordProps {
+    /** Text customization */
+    title?: string;
+    subtitle?: string;
+    newPasswordLabel?: string;
+    newPasswordPlaceholder?: string;
+    confirmPasswordLabel?: string;
+    confirmPasswordPlaceholder?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    /** Callback when an error occurs */
+    onError?: (error: Error) => void;
+}
+/**
+ * Pre-built reset password page component with full business logic.
+ *
+ * Automatically reads the reset token from URL query parameter (?token=xxx).
+ * Shows an error if token is missing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Used at /reset-password?token=xxxxx
+ * <ResetPassword />
+ * ```
+ */
+declare function ResetPassword({ onError, ...uiProps }: ResetPasswordProps): react_jsx_runtime.JSX.Element | null;
+
+interface VerifyEmailProps {
+    /** Verification token (from URL query params) */
+    token: string;
+    /** Text customization */
+    verifyingTitle?: string;
+    successTitle?: string;
+    successMessage?: string;
+    errorTitle?: string;
+    /** Callback when verification is successful */
+    onSuccess?: (data: {
+        accessToken: string;
+        user?: UserSchema;
+        redirectTo?: string;
+    }) => void;
+    /** Callback when verification fails */
+    onError?: (error: Error) => void;
+}
+/**
+ * Pre-built email verification component with full business logic.
+ *
+ * Automatically verifies the email when mounted using the provided token.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const token = new URLSearchParams(window.location.search).get('token');
+ *
+ * <VerifyEmail
+ *   token={token || ''}
+ *   onSuccess={(data) => {
+ *     console.log('Email verified!', data);
+ *     // Optionally navigate or close window
+ *   }}
+ *   onError={(error) => console.error('Verification failed:', error)}
+ * />
+ * ```
+ */
+declare function VerifyEmail({ token, onSuccess, onError, ...uiProps }: VerifyEmailProps): react_jsx_runtime.JSX.Element;
+
+interface UserButtonProps {
+    afterSignOutUrl?: string;
+    mode?: 'detailed' | 'simple';
+}
+/**
+ * User profile button with dropdown menu and sign-out functionality.
+ */
+declare function UserButton({ afterSignOutUrl, mode }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
+
+interface ProtectProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    redirectTo?: string;
+    condition?: (user: InsforgeUser) => boolean;
+    onRedirect?: (url: string) => void;
+}
+/**
+ * Protected route component that redirects unauthenticated users.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Protect redirectTo="/sign-in">
+ *   <Dashboard />
+ * </Protect>
+ *
+ * // With custom redirect handler (e.g., for Next.js router)
+ * <Protect
+ *   redirectTo="/sign-in"
+ *   onRedirect={(url) => router.push(url)}
+ * >
+ *   <AdminPanel />
+ * </Protect>
+ *
+ * // With custom condition (role-based access)
+ * <Protect
+ *   redirectTo="/unauthorized"
+ *   condition={(user) => user.role === 'admin'}
+ * >
+ *   <AdminContent />
+ * </Protect>
+ * ```
+ *
+ * @param {ReactNode} children - Content to protect
+ * @param {ReactNode} [fallback] - Fallback UI while loading
+ * @param {string} [redirectTo='/sign-in'] - Redirect URL
+ * @param {function} [condition] - Custom access condition
+ * @param {function} [onRedirect] - Custom redirect handler (default: window.location)
+ */
+declare function Protect({ children, fallback, redirectTo, condition, onRedirect, }: ProtectProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+
+interface ConditionalProps$1 {
+    children: ReactNode;
+}
+/**
+ * Conditional component that renders children only when user is signed in.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignedIn>
+ *   <Dashboard />
+ * </SignedIn>
+ * ```
+ *
+ * @param {ReactNode} children - React nodes to render when user is authenticated
+ * @returns {JSX.Element | null} Renders children when signed in, null otherwise
+ */
+declare function SignedIn({ children }: ConditionalProps$1): react_jsx_runtime.JSX.Element | null;
+
+interface ConditionalProps {
+    children: ReactNode;
+}
+/**
+ * Conditional component that renders children only when user is signed out.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignedOut>
+ *   <SignIn />
+ * </SignedOut>
+ * ```
+ *
+ * @param {ReactNode} children - React nodes to render when user is not authenticated
+ * @returns {JSX.Element | null} Renders children when signed out, null otherwise
+ */
+declare function SignedOut({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
+
+export { type ConditionalProps$1 as ConditionalProps, ForgotPassword, type ForgotPasswordProps, Protect, type ProtectProps, ResetPassword, type ResetPasswordProps, SignIn, type SignInProps, SignUp, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, VerifyEmail, type VerifyEmailProps };

package/dist/components.d.ts

@@ -1,11 +1,29 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SignInProps, SignUpProps, ForgotPasswordAppearance, ResetPasswordAppearance, VerifyEmailStatusProps, UserButtonProps, ProtectProps, ConditionalProps } from './types.js';
+import { UserSchema } from '@insforge/sdk';
 import * as react from 'react';
 import { ReactNode } from 'react';
-export { ForgotPasswordForm, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailStatus } from './forms.js';
-export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength } from './atoms.js';
+import { InsforgeUser } from './types.js';
+export { ForgotPasswordForm, ForgotPasswordFormProps, ResetPasswordForm, ResetPasswordFormProps, SignInForm, SignInFormProps, SignUpForm, SignUpFormProps, VerifyEmailStatus, VerifyEmailStatusProps } from './forms.js';
+export { AuthBranding, AuthContainer, AuthContainerProps, AuthDivider, AuthDividerProps, AuthEmailVerificationStep, AuthErrorBanner, AuthErrorBannerProps, AuthFormField, AuthFormFieldProps, AuthHeader, AuthHeaderProps, AuthLink, AuthLinkProps, AuthOAuthButton, AuthOAuthButtonProps, AuthOAuthProviders, AuthOAuthProvidersProps, AuthPasswordField, AuthPasswordFieldProps, AuthPasswordStrengthIndicator, AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthSubmitButtonProps, AuthVerificationCodeInput, AuthVerificationCodeInputProps } from './atoms.js';
 import '@insforge/shared-schemas';
 
+interface SignInProps {
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    forgotPasswordText?: string;
+    forgotPasswordUrl?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    signUpText?: string;
+    signUpLinkText?: string;
+    signUpUrl?: string;
+    dividerText?: string;
+    onError?: (error: Error) => void;
+}
 /**
  * Pre-built sign-in component with full authentication logic.
  *
@@ -13,14 +31,28 @@ import '@insforge/shared-schemas';
  * @example
  * ```tsx
  * <SignIn
- *   afterSignInUrl="/auth/callback"
  *   onSuccess={(user) => console.log('Signed in:', user)}
  *   onError={(error) => console.error('Error:', error)}
  * />
  * ```
  */
-declare function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
+declare function SignIn({ onError, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
 
+interface SignUpProps {
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    signInText?: string;
+    signInLinkText?: string;
+    signInUrl?: string;
+    dividerText?: string;
+    onError?: (error: Error) => void;
+}
 /**
  * Pre-built sign-up component with full authentication logic.
  *
@@ -28,18 +60,14 @@ declare function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }: Sign
  * @example
  * ```tsx
  * <SignUp
- *   afterSignUpUrl="/auth/callback"
- *   onSuccess={(user) => console.log('Signed up:', user)}
  *   onError={(error) => console.error('Error:', error)}
  * />
  *
  * ```
  */
-declare function SignUp({ afterSignUpUrl, onSuccess, onError, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+declare function SignUp({ onError, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
 
 interface ForgotPasswordProps {
-    /** Hierarchical appearance configuration for deep customization */
-    appearance?: ForgotPasswordAppearance;
     /** Text customization */
     title?: string;
     subtitle?: string;
@@ -48,11 +76,6 @@ interface ForgotPasswordProps {
     submitButtonText?: string;
     loadingButtonText?: string;
     backToSignInText?: string;
-    backToSignInUrl?: string;
-    successTitle?: string;
-    successMessage?: string;
-    /** Callback when password is successfully reset */
-    onSuccess?: () => void;
     /** Callback when an error occurs */
     onError?: (error: Error) => void;
 }
@@ -60,26 +83,22 @@ interface ForgotPasswordProps {
  * Pre-built forgot password component with full business logic.
  *
  * Supports two password reset methods (auto-detected from backend config):
- * - **Link method**: Sends email with reset link (handled by ResetPassword component)
+ * - **Link method**: Two-step flow (email → check email message)
+ *   User receives an email with a reset link to complete the process in a new tab
  * - **Code method**: Three-step flow (email → verify code → reset password)
+ *   User receives a verification code, enters it, then sets a new password
  *
  * @component
  * @example
  * ```tsx
  * <ForgotPassword
- *   backToSignInUrl="/sign-in"
- *   onSuccess={() => console.log('Password reset!')}
  *   onError={(error) => console.error('Error:', error)}
  * />
  * ```
  */
-declare function ForgotPassword({ backToSignInUrl, onSuccess, onError, ...uiProps }: ForgotPasswordProps): react_jsx_runtime.JSX.Element | null;
+declare function ForgotPassword({ onError, ...uiProps }: ForgotPasswordProps): react_jsx_runtime.JSX.Element | null;
 
 interface ResetPasswordProps {
-    /** Reset password token (from URL query params) */
-    token: string;
-    /** Hierarchical appearance configuration for deep customization */
-    appearance?: ResetPasswordAppearance;
     /** Text customization */
     title?: string;
     subtitle?: string;
@@ -89,36 +108,27 @@ interface ResetPasswordProps {
     confirmPasswordPlaceholder?: string;
     submitButtonText?: string;
     loadingButtonText?: string;
-    backToSignInText?: string;
-    backToSignInUrl?: string;
-    /** Callback when password reset is successful */
-    onSuccess?: () => void;
     /** Callback when an error occurs */
     onError?: (error: Error) => void;
 }
 /**
- * Pre-built reset password component with full business logic.
+ * Pre-built reset password page component with full business logic.
+ *
+ * Automatically reads the reset token from URL query parameter (?token=xxx).
+ * Shows an error if token is missing.
  *
  * @component
  * @example
  * ```tsx
- * const token = new URLSearchParams(window.location.search).get('token');
- *
- * <ResetPassword
- *   token={token || ''}
- *   backToSignInUrl="/sign-in"
- *   onSuccess={(redirectTo) => window.location.href = redirectTo || '/'}
- *   onError={(error) => console.error('Error:', error)}
- * />
+ * // Used at /reset-password?token=xxxxx
+ * <ResetPassword />
  * ```
  */
-declare function ResetPassword({ token, backToSignInUrl, onSuccess, onError, ...uiProps }: ResetPasswordProps): react_jsx_runtime.JSX.Element | null;
+declare function ResetPassword({ onError, ...uiProps }: ResetPasswordProps): react_jsx_runtime.JSX.Element | null;
 
 interface VerifyEmailProps {
     /** Verification token (from URL query params) */
     token: string;
-    /** Appearance configuration */
-    appearance?: VerifyEmailStatusProps["appearance"];
     /** Text customization */
     verifyingTitle?: string;
     successTitle?: string;
@@ -127,7 +137,7 @@ interface VerifyEmailProps {
     /** Callback when verification is successful */
     onSuccess?: (data: {
         accessToken: string;
-        user?: any;
+        user?: UserSchema;
         redirectTo?: string;
     }) => void;
     /** Callback when verification fails */
@@ -155,32 +165,22 @@ interface VerifyEmailProps {
  */
 declare function VerifyEmail({ token, onSuccess, onError, ...uiProps }: VerifyEmailProps): react_jsx_runtime.JSX.Element;
 
+interface UserButtonProps {
+    afterSignOutUrl?: string;
+    mode?: 'detailed' | 'simple';
+}
 /**
  * User profile button with dropdown menu and sign-out functionality.
- *
- * @component
- * @example
- * ```tsx
- * <UserButton afterSignOutUrl="/" />
- *
- * // Simple mode
- * <UserButton mode="simple" />
- *
- * // With custom styling
- * <UserButton
- *   appearance={{
- *     buttonClassName: "hover:bg-white/10",
- *     dropdownClassName: "bg-gray-900"
- *   }}
- * />
- * ```
- *
- * @param {string} [afterSignOutUrl='/'] - URL to redirect to after sign-out
- * @param {'detailed'|'simple'} [mode='detailed'] - Display mode
- * @param {object} [appearance] - Custom Tailwind classes
  */
-declare function UserButton({ afterSignOutUrl, mode, appearance, }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function UserButton({ afterSignOutUrl, mode }: UserButtonProps): react_jsx_runtime.JSX.Element | null;
 
+interface ProtectProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    redirectTo?: string;
+    condition?: (user: InsforgeUser) => boolean;
+    onRedirect?: (url: string) => void;
+}
 /**
  * Protected route component that redirects unauthenticated users.
  *
@@ -215,8 +215,11 @@ declare function UserButton({ afterSignOutUrl, mode, appearance, }: UserButtonPr
  * @param {function} [condition] - Custom access condition
  * @param {function} [onRedirect] - Custom redirect handler (default: window.location)
  */
-declare function Protect({ children, fallback, redirectTo, condition, onRedirect, }: ProtectProps): string | number | bigint | true | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
+declare function Protect({ children, fallback, redirectTo, condition, onRedirect, }: ProtectProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
 
+interface ConditionalProps$1 {
+    children: ReactNode;
+}
 /**
  * Conditional component that renders children only when user is signed in.
  *
@@ -231,8 +234,11 @@ declare function Protect({ children, fallback, redirectTo, condition, onRedirect
  * @param {ReactNode} children - React nodes to render when user is authenticated
  * @returns {JSX.Element | null} Renders children when signed in, null otherwise
  */
-declare function SignedIn({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
+declare function SignedIn({ children }: ConditionalProps$1): react_jsx_runtime.JSX.Element | null;
 
+interface ConditionalProps {
+    children: ReactNode;
+}
 /**
  * Conditional component that renders children only when user is signed out.
  *
@@ -249,62 +255,4 @@ declare function SignedIn({ children }: ConditionalProps): react_jsx_runtime.JSX
  */
 declare function SignedOut({ children }: ConditionalProps): react_jsx_runtime.JSX.Element | null;
 
-interface InsforgeCallbackProps {
-    /**
-     * Redirect destination after successful authentication
-     */
-    redirectTo?: string;
-    /**
-     * Callback fired on successful authentication
-     */
-    onSuccess?: () => void;
-    /**
-     * Callback fired on authentication error
-     */
-    onError?: (error: string) => void;
-    /**
-     * Custom loading component
-     */
-    loadingComponent?: ReactNode;
-    /**
-     * Custom redirect handler (default: window.location)
-     */
-    onRedirect?: (url: string) => void;
-}
-/**
- * InsforgeCallback - Handles OAuth authentication callbacks
- *
- * Place this component on your `/auth/callback` page.
- *
- * How it works:
- * 1. SDK automatically detects OAuth callback parameters and saves to localStorage
- * 2. Provider validates the session from localStorage
- * 3. This component waits for validation and handles redirect
- *
- * @example
- * ```tsx
- * // Minimal usage
- * export default function CallbackPage() {
- *   return <InsforgeCallback redirectTo="/dashboard" />;
- * }
- * ```
- *
- * @example
- * ```tsx
- * // With Next.js router
- * import { useRouter } from 'next/navigation';
- *
- * export default function CallbackPage() {
- *   const router = useRouter();
- *   return (
- *     <InsforgeCallback
- *       redirectTo="/dashboard"
- *       onRedirect={(url) => router.push(url)}
- *     />
- *   );
- * }
- * ```
- */
-declare function InsforgeCallback({ redirectTo, onSuccess, onError, loadingComponent, onRedirect, }: InsforgeCallbackProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element;
-
-export { ForgotPassword, InsforgeCallback, type InsforgeCallbackProps, Protect, ResetPassword, SignIn, SignUp, SignedIn, SignedOut, UserButton, VerifyEmail };
+export { type ConditionalProps$1 as ConditionalProps, ForgotPassword, type ForgotPasswordProps, Protect, type ProtectProps, ResetPassword, type ResetPasswordProps, SignIn, type SignInProps, SignUp, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, VerifyEmail, type VerifyEmailProps };