@frank-auth/react/dist/types/config/types.d.ts

Flexible and customizable React UI components for Frank Authentication

import { ComponentType, ReactNode } from 'react';
import { LinksPathConfig } from '../provider/types';
import { UserType } from '@frank-auth/client';
import { Locale, LocaleDirection, LocaleMessages } from '../locales';
import { BorderRadius, LayoutConfig, Shadows, Theme, ThemeMode, Typography } from '../types';
import { ThemeUtils } from '../utils';
/**
 * Theme mode options
 */
export type { ThemeMode, Theme };
/**
 * Theme mode options
 */
export { ThemeUtils };
/**
 * Component size variants
 */
export type ComponentSize = "sm" | "md" | "lg";
/**
 * Color scheme variants
 */
export type ColorVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
/**
 * Appearance modes for components
 */
export type AppearanceMode = "system" | "light" | "dark";
/**
 * Component appearance configuration
 */
export interface ComponentAppearance {
    input: {
        variant: "flat" | "bordered" | "underlined" | "faded";
        size: ComponentSize;
        radius: keyof BorderRadius;
        color: ColorVariant;
        labelPlacement: "inside" | "outside" | "outside-left";
    };
    button: {
        variant: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "ghost";
        size: ComponentSize;
        radius: keyof BorderRadius;
        color: ColorVariant;
        disableAnimation: boolean;
        disableRipple: boolean;
    };
    card: {
        variant: "shadow" | "bordered" | "flat";
        radius: keyof BorderRadius;
        shadow: keyof Shadows;
        isBlurred: boolean;
    };
    modal: {
        size: ComponentSize | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
        radius: keyof BorderRadius;
        shadow: keyof Shadows;
        backdrop: "transparent" | "opaque" | "blur";
        placement: "auto" | "top" | "center" | "bottom";
    };
    navbar: {
        variant: "sticky" | "floating" | "static";
        maxWidth: string;
        height: string;
        isBlurred: boolean;
    };
    table: {
        variant: "striped" | "bordered";
        size: ComponentSize;
        radius: keyof BorderRadius;
        shadow: keyof Shadows;
        isCompact: boolean;
    };
}
/**
 * Branding configuration from organization settings
 */
export interface BrandingConfig {
    logo: {
        url?: string;
        alt: string;
        width?: number;
        height?: number;
    };
    favicon: {
        url?: string;
        type?: string;
    };
    colors: {
        primary: string;
        secondary: string;
        accent?: string;
    };
    fonts: {
        primary: string;
        secondary?: string;
    };
    customCSS?: string;
}
/**
 * Application appearance configuration
 */
export interface AppearanceConfig {
    titleAlignment?: "left" | "center" | "right";
    mode: AppearanceMode;
    layout: LayoutConfig;
    components: ComponentAppearance;
    branding: BrandingConfig;
    customCSS?: string;
}
/**
 * Localization configuration
 */
export interface LocalizationConfig {
    defaultLocale: Locale;
    fallbackLocale: Locale;
    supportedLocales: Locale[];
    dateFormat: string;
    timeFormat: string;
    numberFormat: Intl.NumberFormatOptions;
    direction: LocaleDirection;
    messages: Partial<LocaleMessages>;
}
/**
 * Organization-specific settings from the backend
 */
export interface OrganizationSettings {
    allowPublicSignup: boolean;
    requireEmailVerification: boolean;
    requirePhoneVerification: boolean;
    allowedDomains?: string[];
    mfaRequired: boolean;
    allowedMfaMethods: string[];
    passwordPolicy: {
        minLength: number;
        requireUppercase: boolean;
        requireLowercase: boolean;
        requireNumbers: boolean;
        requireSymbols: boolean;
    };
    sessionSettings: {
        maxDuration: number;
        inactivityTimeout: number;
        multipleSessionsAllowed: boolean;
    };
    branding: {
        primaryColor: string;
        secondaryColor: string;
        logo?: string;
        favicon?: string;
        customCSS?: string;
    };
    customFields?: Array<{
        key: string;
        label: string;
        type: "text" | "email" | "number" | "select" | "checkbox";
        required: boolean;
        options?: string[];
    }>;
}
/**
 * Organization configuration for UI components
 */
export interface OrganizationConfig {
    id: string;
    name: string;
    slug: string;
    settings: OrganizationSettings;
    features: {
        sso: boolean;
        mfa: boolean;
        auditLogs: boolean;
        customBranding: boolean;
        apiAccess: boolean;
    };
    limits: {
        maxUsers: number;
        maxSessions: number;
        apiRequestLimit: number;
    };
}
/**
 * Component override configuration
 */
export interface ComponentOverrides {
    Layout?: ComponentType<any>;
    Header?: ComponentType<any>;
    Footer?: ComponentType<any>;
    Sidebar?: ComponentType<any>;
    SignInForm?: ComponentType<any>;
    SignUpForm?: ComponentType<any>;
    SignInModal?: ComponentType<any>;
    SignInCard?: ComponentType<any>;
    ForgotPasswordForm?: ComponentType<any>;
    ResetPasswordForm?: ComponentType<any>;
    MFAForm?: ComponentType<any>;
    MagicLink?: ComponentType<any>;
    SignInButton?: ComponentType<any>;
    UserProfile?: ComponentType<any>;
    UserSettings?: ComponentType<any>;
    UserAvatar?: ComponentType<any>;
    UserButton?: ComponentType<any>;
    PasskeySetup?: ComponentType<any>;
    MFASetup?: ComponentType<any>;
    OrganizationProfile?: ComponentType<any>;
    OrganizationSettings?: ComponentType<any>;
    MemberList?: ComponentType<any>;
    InviteMember?: ComponentType<any>;
    Button?: ComponentType<any>;
    Input?: ComponentType<any>;
    Card?: ComponentType<any>;
    Modal?: ComponentType<any>;
    LoadingSpinner?: ComponentType<any>;
    ErrorBoundary?: ComponentType<any>;
    FormWrapper?: ComponentType<any>;
    EmailField?: ComponentType<any>;
    PasswordField?: ComponentType<any>;
    FieldError?: ComponentType<any>;
}
/**
 * Available authentication features
 */
export interface AuthFeatures {
    signUp: boolean;
    signIn: boolean;
    passwordReset: boolean;
    mfa: boolean;
    passkeys: boolean;
    oauth: boolean;
    magicLink: boolean;
    sso: boolean;
    organizationManagement: boolean;
    userProfile: boolean;
    sessionManagement: boolean;
}
/**
 * Main Frank Auth configuration interface
 */
export interface FrankAuthUIConfig {
    publishableKey: string;
    secretKey?: string;
    apiUrl?: string;
    frontendUrl?: string;
    userType: UserType;
    projectId?: string;
    organization?: OrganizationConfig;
    theme: Partial<Theme>;
    appearance: Partial<AppearanceConfig>;
    localization: Partial<LocalizationConfig>;
    linksPath?: Partial<LinksPathConfig>;
    components?: ComponentOverrides;
    features: AuthFeatures;
    debug?: boolean;
    telemetry?: boolean;
    customHead?: ReactNode;
    customFooter?: ReactNode;
    onSignIn?: (user: any) => void;
    onSignOut?: () => void;
    onUserUpdate?: (user: any) => void;
    onOrganizationUpdate?: (organization: any) => void;
    onError?: (error: Error) => void;
}
/**
 * Configuration validation error
 */
export interface ConfigValidationError {
    path: string;
    message: string;
    value?: any;
}
/**
 * Configuration validation result
 */
export interface ConfigValidationResult {
    isValid: boolean;
    errors: ConfigValidationError[];
    warnings: ConfigValidationError[];
}
export type { Locale, LocaleDirection, UserType, Typography, };
//# sourceMappingURL=types.d.ts.map