gebeya-whatsapp-verify/dist/index.d.ts

Reusable WhatsApp phone verification components for React applications (Supabase Edge Function integration)

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactNode } from 'react';
import { ClassValue } from 'clsx';

interface WhatsAppUser {
    id: string;
    phone?: string;
    phone_confirmed_at?: string;
}
interface WhatsAppVerificationData {
    user: WhatsAppUser;
    phoneNumber: string;
    sessionId: string;
    verificationMethod: 'whatsapp';
    actionLink?: string;
}
interface WhatsAppConfig {
    senderName?: string;
}
interface WhatsAppVerifyButtonProps {
    onVerificationComplete?: (userData: WhatsAppVerificationData) => void;
    onVerificationStart?: () => void;
    buttonText?: string;
    variant?: 'default' | 'outline' | 'secondary' | 'ghost';
    size?: 'sm' | 'default' | 'lg' | 'xl';
    className?: string;
    color?: 'default' | 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'gray' | 'custom';
    customColors?: CustomColors;
}
interface WhatsAppVerificationModalProps {
    isOpen: boolean;
    onClose: () => void;
    onVerificationComplete?: (userData: WhatsAppVerificationData) => void;
    onVerificationStart?: () => void;
}
interface WhatsAppVerificationProviderProps {
    children: ReactNode;
    supabaseClient: any;
    whatsappConfig?: WhatsAppConfig;
    onSuccess?: (userData: WhatsAppVerificationData) => void;
    onError?: (error: string) => void;
    theme?: {
        primaryColor?: string;
        borderRadius?: string;
        fontSize?: string;
    };
    buttonConfig?: {
        defaultColor?: 'default' | 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'gray' | 'custom';
        defaultVariant?: 'default' | 'outline' | 'secondary' | 'ghost';
        defaultSize?: 'sm' | 'default' | 'lg' | 'xl';
        customColors?: CustomColors;
    };
}
interface AuthFlowProps {
    onComplete?: (userData: WhatsAppVerificationData) => void;
}
type AuthStep = 'phone' | 'otp';
interface CustomColors {
    background?: string;
    text?: string;
    hover?: string;
    border?: string;
}
interface ButtonConfig {
    defaultColor?: 'default' | 'blue' | 'green' | 'red' | 'purple' | 'orange' | 'gray' | 'custom';
    defaultVariant?: 'default' | 'outline' | 'secondary' | 'ghost';
    defaultSize?: 'sm' | 'default' | 'lg' | 'xl';
    customColors?: CustomColors;
}
interface CountryOption {
    code: string;
    name: string;
    flag: string;
}

declare const WhatsAppVerifyButton: ({ onVerificationComplete, onVerificationStart, buttonText, variant, size, className, color, customColors }: WhatsAppVerifyButtonProps) => react_jsx_runtime.JSX.Element;

declare const WhatsAppVerificationModal: ({ isOpen, onClose, onVerificationComplete, onVerificationStart }: WhatsAppVerificationModalProps) => react_jsx_runtime.JSX.Element;

interface WhatsAppVerificationContextType {
    supabaseClient: any;
    whatsappConfig?: WhatsAppConfig;
    user: WhatsAppUser | null;
    session: any;
    loading: boolean;
    onSuccess?: (userData: any) => void;
    onError?: (error: string) => void;
    theme?: {
        primaryColor?: string;
        borderRadius?: string;
        fontSize?: string;
    };
    buttonConfig?: {
        defaultColor?: string;
        defaultVariant?: 'default' | 'outline' | 'secondary' | 'ghost';
        defaultSize?: 'sm' | 'default' | 'lg' | 'xl';
        customColors?: any;
    };
}
declare const useWhatsAppVerification: () => WhatsAppVerificationContextType;
declare const WhatsAppVerificationProvider: ({ children, supabaseClient, whatsappConfig, onSuccess, onError, theme, buttonConfig }: WhatsAppVerificationProviderProps) => react_jsx_runtime.JSX.Element;

declare const AuthFlow: ({ onComplete }: AuthFlowProps) => react_jsx_runtime.JSX.Element;

interface PhoneInputProps {
    onSubmit: (phone: string) => void;
}
declare const PhoneInput: ({ onSubmit }: PhoneInputProps) => react_jsx_runtime.JSX.Element;

interface OTPInputProps {
    phoneNumber: string;
    sessionId: string;
    onVerify: (responseData?: any) => void;
    onBack: () => void;
}
declare const OTPInput: ({ phoneNumber, sessionId, onVerify, onBack }: OTPInputProps) => react_jsx_runtime.JSX.Element;

interface CountrySelectorProps {
    value: string;
    onChange: (value: string) => void;
    isDetectingLocation?: boolean;
}
declare const CountrySelector: ({ value, onChange, isDetectingLocation }: CountrySelectorProps) => react_jsx_runtime.JSX.Element;

declare const checkVerificationStatus: (phoneNumber: string, supabaseClient: any) => Promise<any>;
declare const validatePhone: (fullPhone: string) => boolean;
declare const formatTime: (seconds: number) => string;

declare function cn(...inputs: ClassValue[]): string;

declare const isMobileDevice: () => boolean;
declare const getDeviceType: () => "mobile" | "desktop";

export { AuthFlow, CountrySelector, OTPInput, PhoneInput, WhatsAppVerificationModal, WhatsAppVerificationProvider, WhatsAppVerifyButton, checkVerificationStatus, cn, formatTime, getDeviceType, isMobileDevice, useWhatsAppVerification, validatePhone };
export type { AuthFlowProps, AuthStep, ButtonConfig, CountryOption, CustomColors, WhatsAppConfig, WhatsAppUser, WhatsAppVerificationData, WhatsAppVerificationModalProps, WhatsAppVerificationProviderProps, WhatsAppVerifyButtonProps };