@insforge/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1386 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, FormEvent, InputHTMLAttributes, CSSProperties } from 'react';
+import { OAuthProvidersSchema, GetPublicEmailAuthConfigResponse } from '@insforge/shared-schemas';
+export { checkPasswordStrength, cn, createPasswordSchema, emailSchema, passwordSchema, validateEmail, validatePassword } from './lib.js';
+import 'clsx';
+import 'zod';
+
+type OAuthProvider = OAuthProvidersSchema;
+type EmailAuthConfig = GetPublicEmailAuthConfigResponse;
+/**
+ * Insforge User type
+ */
+interface InsforgeUser {
+    id: string;
+    email: string;
+    name?: string;
+    avatarUrl?: string;
+}
+/**
+ * Base appearance props for styling components
+ */
+interface BaseAppearance {
+    containerClassName?: string;
+    [key: string]: string | undefined;
+}
+/**
+ * Props for AuthContainer component
+ */
+interface AuthContainerProps {
+    children: ReactNode;
+    appearance?: {
+        containerClassName?: string;
+        cardClassName?: string;
+    };
+}
+/**
+ * Props for AuthHeader component
+ */
+interface AuthHeaderProps {
+    title: string;
+    subtitle?: string;
+    appearance?: {
+        containerClassName?: string;
+        titleClassName?: string;
+        subtitleClassName?: string;
+    };
+}
+/**
+ * Props for AuthErrorBanner component
+ */
+interface AuthErrorBannerProps {
+    error: string;
+    className?: string;
+}
+/**
+ * Props for AuthFormField component
+ */
+interface AuthFormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    id: string;
+    appearance?: {
+        containerClassName?: string;
+        labelClassName?: string;
+        inputClassName?: string;
+    };
+}
+/**
+ * Props for AuthPasswordField component
+ */
+interface AuthPasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label: string;
+    id: string;
+    showStrengthIndicator?: boolean;
+    emailAuthConfig: EmailAuthConfig;
+    forgotPasswordLink?: {
+        href: string;
+        text?: string;
+    };
+    appearance?: {
+        containerClassName?: string;
+        labelClassName?: string;
+        inputClassName?: string;
+    };
+}
+/**
+ * Props for AuthPasswordStrengthIndicator component
+ */
+interface AuthPasswordStrengthIndicatorProps {
+    password: string;
+    config: EmailAuthConfig;
+    appearance?: {
+        containerClassName?: string;
+        requirementClassName?: string;
+    };
+}
+/**
+ * Props for AuthSubmitButton component
+ */
+interface AuthSubmitButtonProps {
+    children: ReactNode;
+    isLoading?: boolean;
+    confirmed?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Props for AuthLink component
+ */
+interface AuthLinkProps {
+    text: string;
+    linkText: string;
+    href: string;
+    appearance?: {
+        containerClassName?: string;
+        linkClassName?: string;
+    };
+}
+/**
+ * Props for AuthDivider component
+ */
+interface AuthDividerProps {
+    text?: string;
+    className?: string;
+}
+/**
+ * Props for AuthOAuthButton component
+ */
+interface AuthOAuthButtonProps {
+    provider: OAuthProvider;
+    onClick: (provider: OAuthProvider) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    displayMode?: 'full' | 'short' | 'icon';
+    style?: CSSProperties;
+    className?: string;
+}
+/**
+ * Props for AuthOAuthProviders component
+ */
+interface AuthOAuthProvidersProps {
+    providers: OAuthProvider[];
+    onClick: (provider: OAuthProvider) => void;
+    disabled?: boolean;
+    loading: OAuthProvider | null;
+    appearance?: {
+        containerClassName?: string;
+        buttonClassName?: string;
+    };
+}
+/**
+ * Props for AuthVerificationCodeInput component
+ */
+interface AuthVerificationCodeInputProps {
+    length?: number;
+    value: string;
+    email: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    appearance?: {
+        containerClassName?: string;
+        inputClassName?: string;
+    };
+}
+/**
+ * Configuration for an OAuth provider
+ */
+interface OAuthProviderConfig {
+    name: string;
+    svg: ReactNode;
+    className: string;
+}
+/**
+ * Props for SignInForm component
+ */
+interface SignInFormProps {
+    email: string;
+    password: string;
+    onEmailChange: (email: string) => void;
+    onPasswordChange: (password: string) => void;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    error?: string;
+    loading?: boolean;
+    oauthLoading?: OAuthProvider | null;
+    availableProviders?: OAuthProvider[];
+    onOAuthClick?: (provider: OAuthProvider) => void;
+    emailAuthConfig?: EmailAuthConfig;
+    appearance?: {
+        containerClassName?: string;
+        cardClassName?: string;
+        formClassName?: string;
+        buttonClassName?: string;
+    };
+    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;
+}
+/**
+ * Props for SignUpForm component
+ */
+interface SignUpFormProps {
+    email: string;
+    password: string;
+    onEmailChange: (email: string) => void;
+    onPasswordChange: (password: string) => void;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    error?: string;
+    loading?: boolean;
+    oauthLoading?: OAuthProvider | null;
+    availableProviders?: OAuthProvider[];
+    onOAuthClick?: (provider: OAuthProvider) => void;
+    emailAuthConfig?: EmailAuthConfig;
+    appearance?: {
+        containerClassName?: string;
+        cardClassName?: string;
+        formClassName?: string;
+        buttonClassName?: string;
+    };
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    signInText?: string;
+    signInLinkText?: string;
+    signInUrl?: string;
+    dividerText?: string;
+}
+/**
+ * Props for ForgotPasswordForm component
+ */
+interface ForgotPasswordFormProps {
+    email: string;
+    onEmailChange: (email: string) => void;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    error?: string;
+    loading?: boolean;
+    success?: boolean;
+    appearance?: {
+        containerClassName?: string;
+        cardClassName?: string;
+        formClassName?: string;
+        buttonClassName?: string;
+    };
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    backToSignInText?: string;
+    backToSignInUrl?: string;
+    successTitle?: string;
+    successMessage?: string;
+}
+/**
+ * Props for ResetPasswordForm component
+ */
+interface ResetPasswordFormProps {
+    newPassword: string;
+    confirmPassword: string;
+    onNewPasswordChange: (password: string) => void;
+    onConfirmPasswordChange: (password: string) => void;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    error?: string;
+    loading?: boolean;
+    emailAuthConfig?: EmailAuthConfig;
+    appearance?: {
+        containerClassName?: string;
+        cardClassName?: string;
+        formClassName?: string;
+        buttonClassName?: string;
+    };
+    title?: string;
+    subtitle?: string;
+    newPasswordLabel?: string;
+    newPasswordPlaceholder?: string;
+    confirmPasswordLabel?: string;
+    confirmPasswordPlaceholder?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    backToSignInText?: string;
+    backToSignInUrl?: string;
+}
+/**
+ * Props for VerifyEmailStatus component
+ */
+interface VerifyEmailStatusProps {
+    status: 'verifying' | 'success' | 'error';
+    error?: string;
+    appearance?: {
+        containerClassName?: string;
+        cardClassName?: string;
+    };
+    verifyingTitle?: string;
+    successTitle?: string;
+    successMessage?: string;
+    errorTitle?: string;
+}
+/**
+ * Props for the SignIn component
+ */
+interface SignInProps {
+    afterSignInUrl?: string;
+    appearance?: {
+        containerClassName?: string;
+        cardClassName?: string;
+        formClassName?: string;
+        buttonClassName?: string;
+    };
+    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;
+    onSuccess?: (user: {
+        id: string;
+        email: string;
+        name: string;
+    }, accessToken: string) => void;
+    onError?: (error: Error) => void;
+    onRedirect?: (url: string) => void;
+}
+/**
+ * Props for the SignUp component
+ */
+interface SignUpProps {
+    afterSignUpUrl?: string;
+    appearance?: {
+        containerClassName?: string;
+        cardClassName?: string;
+        formClassName?: string;
+        buttonClassName?: string;
+    };
+    title?: string;
+    subtitle?: string;
+    emailLabel?: string;
+    emailPlaceholder?: string;
+    passwordLabel?: string;
+    passwordPlaceholder?: string;
+    submitButtonText?: string;
+    loadingButtonText?: string;
+    signInText?: string;
+    signInLinkText?: string;
+    signInUrl?: string;
+    dividerText?: string;
+    onSuccess?: (user: {
+        id: string;
+        email: string;
+        name: string;
+    }, accessToken: string) => void;
+    onError?: (error: Error) => void;
+    onRedirect?: (url: string) => void;
+}
+/**
+ * Props for Protect component
+ */
+interface ProtectProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    redirectTo?: string;
+    condition?: (user: InsforgeUser) => boolean;
+    onRedirect?: (url: string) => void;
+}
+/**
+ * Props for conditional rendering components (SignedIn, SignedOut)
+ */
+interface ConditionalProps {
+    children: ReactNode;
+}
+/**
+ * Props for UserButton component
+ */
+interface UserButtonProps {
+    afterSignOutUrl?: string;
+    mode?: 'detailed' | 'simple';
+    appearance?: {
+        containerClassName?: string;
+        buttonClassName?: string;
+        nameClassName?: string;
+        emailClassName?: string;
+        dropdownClassName?: string;
+    };
+}
+
+/**
+ * Pre-built sign-in component with full authentication logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignIn afterSignInUrl="/dashboard" />
+ *
+ * // With custom callbacks
+ * <SignIn
+ *   onSuccess={(user) => console.log('Signed in:', user)}
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ * ```
+ */
+declare function SignIn({ afterSignInUrl, onSuccess, onError, onRedirect, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pre-built sign-up component with full authentication logic.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SignUp afterSignUpUrl="/onboarding" />
+ *
+ * // With custom callbacks
+ * <SignUp
+ *   onSuccess={(user) => console.log('Signed up:', user)}
+ *   onError={(error) => console.error('Error:', error)}
+ * />
+ * ```
+ */
+declare function SignUp({ afterSignUpUrl, onSuccess, onError, onRedirect, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 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;
+
+/**
+ * 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<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;
+
+/**
+ * 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): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * 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;
+
+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 and email/password authentication callbacks
+ *
+ * Place this component on your `/auth/callback` page.
+ *
+ * @example
+ * ```tsx
+ * // Minimal usage
+ * export default function CallbackPage() {
+ *   return <InsforgeCallback />;
+ * }
+ * ```
+ *
+ * @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;
+
+/**
+ * Pre-built sign-in form component (UI only, no business logic).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [email, setEmail] = useState('');
+ * const [password, setPassword] = useState('');
+ * const [error, setError] = useState('');
+ * const [loading, setLoading] = useState(false);
+ *
+ * const handleSubmit = async (e) => {
+ *   e.preventDefault();
+ *   setLoading(true);
+ *   try {
+ *     await authService.signIn(email, password);
+ *   } catch (err) {
+ *     setError(err.message);
+ *   } finally {
+ *     setLoading(false);
+ *   }
+ * };
+ *
+ * <SignInForm
+ *   email={email}
+ *   password={password}
+ *   onEmailChange={setEmail}
+ *   onPasswordChange={setPassword}
+ *   onSubmit={handleSubmit}
+ *   error={error}
+ *   loading={loading}
+ * />
+ * ```
+ */
+declare function SignInForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, availableProviders, onOAuthClick, emailAuthConfig, appearance, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, forgotPasswordText, forgotPasswordUrl, submitButtonText, loadingButtonText, signUpText, signUpLinkText, signUpUrl, dividerText, }: SignInFormProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pre-built sign-up form component (UI only, no business logic).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [email, setEmail] = useState('');
+ * const [password, setPassword] = useState('');
+ * const [error, setError] = useState('');
+ * const [loading, setLoading] = useState(false);
+ *
+ * const handleSubmit = async (e) => {
+ *   e.preventDefault();
+ *   setLoading(true);
+ *   try {
+ *     await authService.signUp(email, password);
+ *   } catch (err) {
+ *     setError(err.message);
+ *   } finally {
+ *     setLoading(false);
+ *   }
+ * };
+ *
+ * <SignUpForm
+ *   email={email}
+ *   password={password}
+ *   onEmailChange={setEmail}
+ *   onPasswordChange={setPassword}
+ *   onSubmit={handleSubmit}
+ *   error={error}
+ *   loading={loading}
+ * />
+ * ```
+ */
+declare function SignUpForm({ email, password, onEmailChange, onPasswordChange, onSubmit, error, loading, oauthLoading, availableProviders, onOAuthClick, emailAuthConfig, appearance, title, subtitle, emailLabel, emailPlaceholder, passwordLabel, passwordPlaceholder, submitButtonText, loadingButtonText, signInText, signInLinkText, signInUrl, dividerText, }: SignUpFormProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pre-built forgot password form component (UI only, no business logic).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [email, setEmail] = useState('');
+ * const [error, setError] = useState('');
+ * const [loading, setLoading] = useState(false);
+ * const [success, setSuccess] = useState(false);
+ *
+ * const handleSubmit = async (e) => {
+ *   e.preventDefault();
+ *   setLoading(true);
+ *   try {
+ *     await authService.sendResetPasswordCode({ email });
+ *     setSuccess(true);
+ *   } catch (err) {
+ *     setError(err.message);
+ *   } finally {
+ *     setLoading(false);
+ *   }
+ * };
+ *
+ * <ForgotPasswordForm
+ *   email={email}
+ *   onEmailChange={setEmail}
+ *   onSubmit={handleSubmit}
+ *   error={error}
+ *   loading={loading}
+ *   success={success}
+ * />
+ * ```
+ */
+declare function ForgotPasswordForm({ email, onEmailChange, onSubmit, error, loading, success, appearance, title, subtitle, emailLabel, emailPlaceholder, submitButtonText, loadingButtonText, backToSignInText, backToSignInUrl, successTitle, successMessage, }: ForgotPasswordFormProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pre-built reset password form component (UI only, no business logic).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [newPassword, setNewPassword] = useState('');
+ * const [confirmPassword, setConfirmPassword] = useState('');
+ * const [error, setError] = useState('');
+ * const [loading, setLoading] = useState(false);
+ *
+ * const handleSubmit = async (e) => {
+ *   e.preventDefault();
+ *   if (newPassword !== confirmPassword) {
+ *     setError('Passwords do not match');
+ *     return;
+ *   }
+ *   setLoading(true);
+ *   try {
+ *     await authService.resetPassword({ newPassword, token });
+ *   } catch (err) {
+ *     setError(err.message);
+ *   } finally {
+ *     setLoading(false);
+ *   }
+ * };
+ *
+ * <ResetPasswordForm
+ *   newPassword={newPassword}
+ *   confirmPassword={confirmPassword}
+ *   onNewPasswordChange={setNewPassword}
+ *   onConfirmPasswordChange={setConfirmPassword}
+ *   onSubmit={handleSubmit}
+ *   error={error}
+ *   loading={loading}
+ *   emailAuthConfig={config}
+ * />
+ * ```
+ */
+declare function ResetPasswordForm({ newPassword, confirmPassword, onNewPasswordChange, onConfirmPasswordChange, onSubmit, error, loading, emailAuthConfig, appearance, title, subtitle, newPasswordLabel, newPasswordPlaceholder, confirmPasswordLabel, confirmPasswordPlaceholder, submitButtonText, loadingButtonText, backToSignInText, backToSignInUrl, }: ResetPasswordFormProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Email verification status display component (UI only, no business logic).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [status, setStatus] = useState('verifying');
+ * const [error, setError] = useState('');
+ *
+ * useEffect(() => {
+ *   const verify = async () => {
+ *     try {
+ *       await authService.verifyEmail({ token });
+ *       setStatus('success');
+ *     } catch (err) {
+ *       setError(err.message);
+ *       setStatus('error');
+ *     }
+ *   };
+ *   verify();
+ * }, [token]);
+ *
+ * <VerifyEmailStatus
+ *   status={status}
+ *   error={error}
+ * />
+ * ```
+ */
+declare function VerifyEmailStatus({ status, error, appearance, verifyingTitle, successTitle, successMessage, errorTitle, }: VerifyEmailStatusProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Insforge branding component for authentication pages.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AuthBranding />
+ * ```
+ */
+declare function AuthBranding(): react_jsx_runtime.JSX.Element;
+
+/**
+ * Main container component for authentication forms.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AuthContainer>
+ *   <AuthHeader title="Sign In" />
+ *   <form>...</form>
+ * </AuthContainer>
+ *
+ * // With custom styling
+ * <AuthContainer
+ *   appearance={{
+ *     cardClassName: "bg-gray-50"
+ *   }}
+ * >
+ *   <AuthHeader title="Sign In" />
+ *   <form>...</form>
+ * </AuthContainer>
+ * ```
+ *
+ * @param {ReactNode} children - Form content
+ * @param {object} [appearance] - Tailwind CSS classes for styling
+ *   - `appearance.containerClassName`: Outer container element
+ *   - `appearance.cardClassName`: Inner card element (white background area)
+ */
+declare function AuthContainer({ children, appearance }: AuthContainerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Header component for authentication forms displaying title and optional subtitle.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AuthHeader
+ *   title="Welcome Back"
+ *   subtitle="Sign in to continue"
+ * />
+ *
+ * // With custom styling
+ * <AuthHeader
+ *   title="Welcome Back"
+ *   appearance={{
+ *     titleClassName: "text-purple-900 text-3xl",
+ *     subtitleClassName: "text-purple-700"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {string} title - Main heading text
+ * @param {string} [subtitle] - Optional subheading text
+ * @param {object} [appearance] - Tailwind CSS classes for styling
+ *   - `appearance.containerClassName`: Container element
+ *   - `appearance.titleClassName`: Title element
+ *   - `appearance.subtitleClassName`: Subtitle element
+ */
+declare function AuthHeader({ title, subtitle, appearance }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Error message banner for authentication forms.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AuthErrorBanner error={error} />
+ * ```
+ *
+ * @param {string} error - Error message to display
+ * @param {string} [className] - Banner element classes
+ */
+declare function AuthErrorBanner({ error, className }: AuthErrorBannerProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Standard form input field with label for authentication forms.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AuthFormField
+ *   id="email"
+ *   type="email"
+ *   label="Email Address"
+ * />
+ *
+ * // With custom styling
+ * <AuthFormField
+ *   id="email"
+ *   label="Email"
+ *   appearance={{
+ *     containerClassName: "flex flex-col justify-center items-stretch gap-1",
+ *     inputClassName: "border-blue-500 focus:ring-blue-500",
+ *     labelClassName: "text-blue-900 font-semibold"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {string} label - Label text
+ * @param {string} id - Input element ID
+ * @param {object} [appearance] - Tailwind CSS classes for styling
+ *   - `appearance.containerClassName`: Container element
+ *   - `appearance.labelClassName`: Label element
+ *   - `appearance.inputClassName`: Input element
+ */
+declare function AuthFormField({ label, id, appearance, ...props }: AuthFormFieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Password input field with visibility toggle and optional strength indicator.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // With forgot password link
+ * <AuthPasswordField
+ *   id="password"
+ *   label="Password"
+ *   forgotPasswordLink={{ href: '/forgot-password' }}
+ *   emailAuthConfig={config}
+ * />
+ *
+ * // With custom styling
+ * <AuthPasswordField
+ *   id="password"
+ *   label="Password"
+ *   emailAuthConfig={config}
+ *   appearance={{
+ *     inputClassName: "border-blue-500",
+ *     labelClassName: "text-blue-900"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {string} label - Label text
+ * @param {string} id - Input element ID
+ * @param {boolean} [showStrengthIndicator] - Show password strength requirements
+ * @param {object} [forgotPasswordLink] - Forgot password link config
+ * @param {object} [appearance] - Tailwind CSS classes for styling
+ *   - `appearance.containerClassName`: Container element
+ *   - `appearance.labelClassName`: Label element
+ *   - `appearance.inputClassName`: Input element
+ */
+declare function AuthPasswordField({ label, id, showStrengthIndicator, emailAuthConfig, forgotPasswordLink, value, appearance, onFocus, ...props }: AuthPasswordFieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Password strength indicator showing requirement checklist.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AuthPasswordStrengthIndicator
+ *   password={password}
+ *   config={emailAuthConfig}
+ * />
+ *
+ * // With custom styling
+ * <AuthPasswordStrengthIndicator
+ *   password={password}
+ *   config={emailAuthConfig}
+ *   appearance={{
+ *     requirementClassName: "text-lg"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {string} password - Current password value
+ * @param {object} config - Email auth configuration
+ * @param {object} [appearance] - Tailwind CSS classes for styling
+ *   - `appearance.containerClassName`: Container element
+ *   - `appearance.requirementClassName`: Requirement text elements
+ */
+declare function AuthPasswordStrengthIndicator({ password, config, appearance, }: AuthPasswordStrengthIndicatorProps): react_jsx_runtime.JSX.Element;
+/**
+ * Validates that a password meets all strength requirements based on email auth configuration.
+ *
+ * @param password - The password string to validate
+ * @param config - Email authentication configuration from backend
+ * @returns true if all requirements are met, false otherwise
+ */
+declare function validatePasswordStrength(password: string, config: EmailAuthConfig): boolean;
+
+/**
+ * Primary submit button for authentication forms with loading and confirmed states.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AuthSubmitButton isLoading={loading}>
+ *   Sign In
+ * </AuthSubmitButton>
+ *
+ * // With custom styling
+ * <AuthSubmitButton className="bg-purple-600 hover:bg-purple-700">
+ *   Sign In
+ * </AuthSubmitButton>
+ * ```
+ *
+ * @param {ReactNode} children - Button text
+ * @param {boolean} [isLoading] - Loading state (shows spinner)
+ * @param {boolean} [confirmed] - Confirmed state (shows checkmark)
+ * @param {boolean} [disabled] - Disabled state
+ * @param {string} [className] - Button element classes
+ */
+declare function AuthSubmitButton({ children, isLoading, confirmed, disabled, className, }: AuthSubmitButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Call-to-action link component for navigation between auth pages.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AuthLink
+ *   text="Don't have an account?"
+ *   linkText="Sign up"
+ *   href="/sign-up"
+ * />
+ *
+ * // With custom styling
+ * <AuthLink
+ *   text="Don't have an account?"
+ *   linkText="Sign up"
+ *   href="/sign-up"
+ *   appearance={{
+ *     linkClassName: "text-blue-500"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {string} text - Regular text before the link
+ * @param {string} linkText - Clickable link text
+ * @param {string} href - Link URL
+ * @param {object} [appearance] - Tailwind CSS classes for styling
+ *   - `appearance.containerClassName`: Container element
+ *   - `appearance.linkClassName`: Link element
+ */
+declare function AuthLink({ text, linkText, href, appearance }: AuthLinkProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Visual divider with optional centered text for auth forms.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AuthDivider text="or" />
+ * ```
+ *
+ * @param {string} [text='or'] - Centered text
+ * @param {string} [className] - Divider element classes
+ */
+declare function AuthDivider({ text, className }: AuthDividerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * OAuth provider button with adaptive display modes.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AuthOAuthButton
+ *   provider="google"
+ *   onClick={handleOAuth}
+ *   displayMode="full"
+ * />
+ * ```
+ *
+ * @param {OAuthProvider} provider - Provider identifier (e.g., 'google', 'github')
+ * @param {function} onClick - Click handler
+ * @param {boolean} [disabled] - Disabled state
+ * @param {boolean} [loading] - Loading state (shows spinner)
+ * @param {string} [displayMode='full'] - Display mode ('full' | 'short' | 'icon')
+ * @param {string} [className] - Button element classes
+ */
+declare function AuthOAuthButton({ provider, onClick, disabled, loading, displayMode, style, className }: AuthOAuthButtonProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Smart OAuth provider grid with adaptive layout.
+ *
+ * Automatically adjusts layout based on provider count:
+ * - 1 provider: Full-width
+ * - 2 or 4 providers: Two columns
+ * - 3+ providers: Three columns
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AuthOAuthProviders
+ *   providers={['google', 'github', 'discord']}
+ *   onClick={handleOAuth}
+ *   loading={currentProvider}
+ * />
+ *
+ * // With custom styling
+ * <AuthOAuthProviders
+ *   providers={['google', 'github']}
+ *   onClick={handleOAuth}
+ *   loading={currentProvider}
+ *   appearance={{
+ *     buttonClassName: "hover:bg-blue-50"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {OAuthProvider[]} providers - Provider identifiers array
+ * @param {function} onClick - Provider click handler
+ * @param {boolean} [disabled] - Disabled state for all buttons
+ * @param {OAuthProvider | null} loading - Currently loading provider
+ * @param {object} [appearance] - Tailwind CSS classes for styling
+ *   - `appearance.containerClassName`: Grid container element
+ *   - `appearance.buttonClassName`: OAuth button elements
+ */
+declare function AuthOAuthProviders({ providers, onClick, disabled, loading, appearance, }: AuthOAuthProvidersProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * 6-digit verification code input component with auto-focus and paste support.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState('');
+ *
+ * <AuthVerificationCodeInput
+ *   email="user@example.com"
+ *   value={code}
+ *   onChange={setCode}
+ * />
+ *
+ * // With custom styling
+ * <AuthVerificationCodeInput
+ *   email="user@example.com"
+ *   value={code}
+ *   onChange={setCode}
+ *   appearance={{
+ *     inputClassName: "border-blue-500"
+ *   }}
+ * />
+ * ```
+ *
+ * @param {string} email - Email address to display in instructions
+ * @param {string} value - Current code value
+ * @param {function} onChange - Code change handler
+ * @param {number} [length=6] - Number of digits
+ * @param {boolean} [disabled] - Disabled state
+ * @param {object} [appearance] - Tailwind CSS classes for styling
+ *   - `appearance.containerClassName`: Container element
+ *   - `appearance.inputClassName`: Input elements
+ */
+declare function AuthVerificationCodeInput({ length, value, email, onChange, disabled, appearance, }: AuthVerificationCodeInputProps): react_jsx_runtime.JSX.Element;
+
+interface InsforgeContextValue {
+    user: InsforgeUser | null;
+    isLoaded: boolean;
+    isSignedIn: boolean;
+    setUser: (user: InsforgeUser | null) => void;
+    signIn: (email: string, password: string) => Promise<{
+        user?: {
+            id: string;
+            email: string;
+            name: string;
+        };
+        accessToken: string | null;
+    } | {
+        error: string;
+    }>;
+    signUp: (email: string, password: string) => Promise<{
+        user?: {
+            id: string;
+            email: string;
+            name: string;
+        };
+        accessToken: string | null;
+    } | {
+        error: string;
+    }>;
+    signOut: () => Promise<void>;
+    updateUser: (data: Partial<InsforgeUser>) => Promise<void>;
+    reloadAuth: () => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    sendPasswordResetCode: (email: string) => Promise<{
+        success: boolean;
+        message: string;
+    } | null>;
+    resetPassword: (token: string, newPassword: string) => Promise<{
+        message: string;
+        redirectTo?: string;
+    } | null>;
+    verifyEmail: (token: string) => Promise<{
+        accessToken: string;
+        user?: any;
+    } | null>;
+    baseUrl: string;
+}
+interface InsforgeProviderProps {
+    children: ReactNode;
+    baseUrl: string;
+    onAuthChange?: (user: InsforgeUser | null) => void;
+    syncTokenToCookie?: (token: string) => Promise<boolean>;
+    clearCookie?: () => Promise<void>;
+}
+/**
+ * Unified Insforge Provider - manages authentication state and configuration
+ *
+ * Manages user authentication state and provides all necessary context to child components.
+ * Works with any React framework (Next.js, Vite, Remix, etc.).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (React/Vite)
+ * import { InsforgeProvider } from '@insforge/react';
+ *
+ * export default function App() {
+ *   return (
+ *     <InsforgeProvider baseUrl={process.env.VITE_INSFORGE_BASE_URL}>
+ *       {children}
+ *     </InsforgeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With cookie sync (Next.js optimization)
+ * <InsforgeProvider
+ *   baseUrl={baseUrl}
+ *   syncTokenToCookie={async (token) => {
+ *     await fetch('/api/auth', {
+ *       method: 'POST',
+ *       body: JSON.stringify({ token })
+ *     });
+ *     return true;
+ *   }}
+ *   clearCookie={async () => {
+ *     await fetch('/api/auth', { method: 'DELETE' });
+ *   }}
+ * >
+ *   {children}
+ * </InsforgeProvider>
+ * ```
+ */
+declare function InsforgeProvider({ children, baseUrl, onAuthChange, syncTokenToCookie, clearCookie, }: InsforgeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access Insforge context
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { user, isSignedIn, signOut } = useInsforge();
+ *
+ *   if (!isSignedIn) return <SignIn />;
+ *
+ *   return (
+ *     <div>
+ *       <p>Welcome {user.email}</p>
+ *       <button onClick={signOut}>Sign Out</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useInsforge(): InsforgeContextValue;
+
+/**
+ * Hook to access authentication methods
+ *
+ * @returns Object containing:
+ *   - `signIn`: Function to sign in with email and password
+ *   - `signUp`: Function to sign up with email and password
+ *   - `signOut`: Function to sign out the current user
+ *   - `isLoaded`: Boolean indicating if auth state has been loaded
+ *   - `isSignedIn`: Boolean indicating if user is currently signed in
+ *
+ * @example
+ * ```tsx
+ * function LoginForm() {
+ *   const { signIn, signUp, signOut, isLoaded, isSignedIn } = useAuth();
+ *
+ *   async function handleLogin(email: string, password: string) {
+ *     try {
+ *       await signIn(email, password);
+ *       // User is now signed in
+ *     } catch (error) {
+ *       console.error('Sign in failed:', error);
+ *     }
+ *   }
+ *
+ *   if (!isLoaded) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <form onSubmit={(e) => { e.preventDefault(); handleLogin(email, password); }}>
+ *       {/* form fields *\/}
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+declare function useAuth(): {
+    signIn: (email: string, password: string) => Promise<{
+        user?: {
+            id: string;
+            email: string;
+            name: string;
+        };
+        accessToken: string | null;
+    } | {
+        error: string;
+    }>;
+    signUp: (email: string, password: string) => Promise<{
+        user?: {
+            id: string;
+            email: string;
+            name: string;
+        };
+        accessToken: string | null;
+    } | {
+        error: string;
+    }>;
+    signOut: () => Promise<void>;
+    isLoaded: boolean;
+    isSignedIn: boolean;
+};
+
+/**
+ * Hook to access current user data
+ *
+ * @returns Object containing:
+ *   - `user`: Current user object (InsforgeUser | null)
+ *   - `isLoaded`: Boolean indicating if auth state has been loaded
+ *   - `updateUser`: Function to update user profile data
+ *   - `setUser`: Internal function to manually set user state
+ *
+ * @example
+ * ```tsx
+ * function UserProfile() {
+ *   const { user, isLoaded, updateUser } = useUser();
+ *
+ *   if (!isLoaded) return <div>Loading...</div>;
+ *   if (!user) return <div>Not signed in</div>;
+ *
+ *   async function handleUpdate(name: string) {
+ *     await updateUser({ name });
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Email: {user.email}</p>
+ *       {user.name && <p>Name: {user.name}</p>}
+ *       {user.avatarUrl && <img src={user.avatarUrl} alt="Avatar" />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useUser(): {
+    user: InsforgeUser | null;
+    isLoaded: boolean;
+    updateUser: (data: Partial<InsforgeUser>) => Promise<void>;
+    setUser: (user: InsforgeUser | null) => void;
+};
+
+/**
+ * Hook to get all public authentication configuration (OAuth + Email) from Insforge backend
+ *
+ * **IMPORTANT: This hook should ONLY be used in SignIn and SignUp components.**
+ *
+ * This hook lazily fetches all public authentication configuration from the backend
+ * only when the component mounts. Using it in other components will cause unnecessary
+ * API calls on every page load.
+ *
+ * @returns Object containing OAuth providers, email auth config, and loading state
+ *
+ * @example
+ * ```tsx
+ * // ✅ Correct usage - only in SignIn/SignUp components
+ * function SignUp() {
+ *   const { oauthProviders, emailConfig, isLoaded } = usePublicAuthConfig();
+ *
+ *   if (!isLoaded) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <div>
+ *       <p>OAuth providers: {oauthProviders.length}</p>
+ *       <p>Password min length: {emailConfig?.passwordMinLength}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @requires Must be used within InsforgeProvider
+ */
+declare function usePublicAuthConfig(): {
+    oauthProviders: OAuthProvidersSchema[];
+    emailConfig: GetPublicEmailAuthConfigResponse | null;
+    isLoaded: boolean;
+};
+
+/**
+ * Get OAuth provider configuration by provider name
+ */
+declare function getProviderConfig(provider: OAuthProvider): OAuthProviderConfig | null;
+/**
+ * Get all available OAuth provider configurations
+ */
+declare function getAllProviderConfigs(): Partial<Record<OAuthProvider, OAuthProviderConfig>>;
+
+export { AuthBranding, AuthContainer, type AuthContainerProps, AuthDivider, type AuthDividerProps, AuthErrorBanner, type AuthErrorBannerProps, AuthFormField, type AuthFormFieldProps, AuthHeader, type AuthHeaderProps, AuthLink, type AuthLinkProps, AuthOAuthButton, type AuthOAuthButtonProps, AuthOAuthProviders, type AuthOAuthProvidersProps, AuthPasswordField, type AuthPasswordFieldProps, AuthPasswordStrengthIndicator, type AuthPasswordStrengthIndicatorProps, AuthSubmitButton, type AuthSubmitButtonProps, AuthVerificationCodeInput, type AuthVerificationCodeInputProps, type BaseAppearance, type ConditionalProps, type EmailAuthConfig, ForgotPasswordForm, type ForgotPasswordFormProps, InsforgeCallback, type InsforgeCallbackProps, InsforgeProvider, type InsforgeProviderProps, type InsforgeUser, type OAuthProvider, type OAuthProviderConfig, Protect, type ProtectProps, ResetPasswordForm, type ResetPasswordFormProps, SignIn, SignInForm, type SignInFormProps, type SignInProps, SignUp, SignUpForm, type SignUpFormProps, type SignUpProps, SignedIn, SignedOut, UserButton, type UserButtonProps, VerifyEmailStatus, type VerifyEmailStatusProps, getAllProviderConfigs, getProviderConfig, useAuth, useInsforge, usePublicAuthConfig, useUser, validatePasswordStrength };