@kernaq/verify-react-native 1.0.2

package/dist/index.esm.js

@@ -0,0 +1,1198 @@
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { Platform, Alert, Linking, View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, Image, Animated, Modal, SafeAreaView, ScrollView } from 'react-native';
+import { PERMISSIONS, check, RESULTS, request } from 'react-native-permissions';
+import { useCameraDevice, useCameraPermission, Camera } from 'react-native-vision-camera';
+
+const DEFAULT_LOCALE = {
+    intro_title: 'Verify your identity',
+    intro_body: "This takes about 60 seconds. You'll need your ID document and a clear view of your face.",
+    intro_cta: 'Get started',
+    doc_title: 'Scan your document',
+    doc_instruction: 'Hold your ID flat inside the frame. Make sure it\'s well-lit and all four corners are visible.',
+    doc_capture_btn: 'Capture',
+    doc_retake_btn: 'Retake',
+    doc_next_btn: 'Looks good',
+    selfie_title: 'Take a selfie',
+    selfie_instruction: 'Look straight at the camera. Keep your face inside the oval.',
+    selfie_capture_btn: 'Take selfie',
+    selfie_retake_btn: 'Retake',
+    selfie_next_btn: 'Looks good',
+    liveness_title: 'Liveness check',
+    liveness_instruction: 'Press start, then slowly turn your head left and right.',
+    liveness_start_btn: 'Start recording',
+    liveness_recording: 'Recording…',
+    processing_title: 'Verifying your identity',
+    processing_subtitle: 'This usually takes a few seconds.',
+    result_pass_title: 'Verification passed',
+    result_pass_body: 'Your identity has been verified successfully.',
+    result_fail_title: 'Verification failed',
+    result_fail_body: 'We were unable to verify your identity. Please try again.',
+    result_review_title: 'Under review',
+    result_review_body: 'Your submission is being reviewed. This usually takes a few minutes.',
+    result_retry_btn: 'Try again',
+    error_camera_denied: 'Camera access denied. Please allow camera permissions in settings.',
+    error_quality: 'Image quality too low. Try better lighting or hold the camera steady.',
+    error_network: 'Network error. Please check your connection and try again.'
+};
+
+function resolveTheme(theme) {
+    const dark = theme?.mode === 'dark';
+    return {
+        accent: theme?.accentColor ?? '#111827',
+        bg: theme?.backgroundColor ?? (dark ? '#1a1a2e' : '#ffffff'),
+        text: theme?.textColor ?? (dark ? '#f9fafb' : '#111827'),
+        subtext: theme?.subtextColor ?? (dark ? '#9ca3af' : '#6b7280'),
+        border: theme?.borderColor ?? (dark ? '#374151' : '#e5e7eb'),
+        card: theme?.cardColor ?? (dark ? '#111827' : '#f9fafb'),
+        radius: theme?.borderRadius ?? 12
+    };
+}
+
+function usePermissions() {
+    const [status, setStatus] = useState('unknown');
+    const cameraPermission = Platform.OS === 'ios' ? PERMISSIONS.IOS.CAMERA : PERMISSIONS.ANDROID.CAMERA;
+    const micPermission = Platform.OS === 'ios' ? PERMISSIONS.IOS.MICROPHONE : PERMISSIONS.ANDROID.RECORD_AUDIO;
+    const requestPermissions = useCallback(async ()=>{
+        try {
+            const camResult = await check(cameraPermission);
+            if (camResult === RESULTS.GRANTED) {
+                // Also request mic for liveness video
+                await request(micPermission);
+                setStatus('granted');
+                return true;
+            }
+            if (camResult === RESULTS.BLOCKED) {
+                setStatus('blocked');
+                Alert.alert('Camera Permission Required', 'Camera access is blocked. Please enable it in your device settings.', [
+                    {
+                        text: 'Cancel',
+                        style: 'cancel'
+                    },
+                    {
+                        text: 'Open Settings',
+                        onPress: ()=>Linking.openSettings()
+                    }
+                ]);
+                return false;
+            }
+            // Request camera
+            const result = await request(cameraPermission);
+            if (result === RESULTS.GRANTED) {
+                await request(micPermission);
+                setStatus('granted');
+                return true;
+            }
+            setStatus('denied');
+            return false;
+        } catch  {
+            setStatus('denied');
+            return false;
+        }
+    }, [
+        cameraPermission,
+        micPermission
+    ]);
+    return {
+        status,
+        requestPermissions
+    };
+}
+
+function IntroStep({ theme, locale, onStart }) {
+    const s = styles$6(theme);
+    return /*#__PURE__*/ React.createElement(View, {
+        style: s.container
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: s.steps
+    }, [
+        {
+            icon: '🪪',
+            label: 'Document'
+        },
+        {
+            icon: '🤳',
+            label: 'Selfie'
+        },
+        {
+            icon: '👁️',
+            label: 'Liveness'
+        }
+    ].map((item)=>/*#__PURE__*/ React.createElement(View, {
+            key: item.label,
+            style: s.step
+        }, /*#__PURE__*/ React.createElement(View, {
+            style: s.stepIcon
+        }, /*#__PURE__*/ React.createElement(Text, {
+            style: s.stepEmoji
+        }, item.icon)), /*#__PURE__*/ React.createElement(Text, {
+            style: s.stepLabel
+        }, item.label)))), /*#__PURE__*/ React.createElement(Text, {
+        style: s.title
+    }, locale.intro_title), /*#__PURE__*/ React.createElement(Text, {
+        style: s.body
+    }, locale.intro_body), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btn,
+        onPress: onStart,
+        activeOpacity: 0.85
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnText
+    }, locale.intro_cta)));
+}
+const styles$6 = (t)=>StyleSheet.create({
+        container: {
+            padding: 24
+        },
+        steps: {
+            flexDirection: 'row',
+            justifyContent: 'center',
+            gap: 20,
+            marginBottom: 28
+        },
+        step: {
+            alignItems: 'center',
+            gap: 8
+        },
+        stepIcon: {
+            width: 56,
+            height: 56,
+            borderRadius: 14,
+            backgroundColor: t.card,
+            borderWidth: 1,
+            borderColor: t.border,
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        stepEmoji: {
+            fontSize: 24
+        },
+        stepLabel: {
+            fontSize: 12,
+            color: t.subtext
+        },
+        title: {
+            fontSize: 22,
+            fontWeight: '700',
+            color: t.text,
+            marginBottom: 10
+        },
+        body: {
+            fontSize: 14,
+            color: t.subtext,
+            lineHeight: 21,
+            marginBottom: 28
+        },
+        btn: {
+            backgroundColor: t.accent,
+            borderRadius: t.radius,
+            paddingVertical: 14,
+            alignItems: 'center'
+        },
+        btnText: {
+            color: '#fff',
+            fontSize: 15,
+            fontWeight: '600'
+        }
+    });
+
+function useCamera(facing = 'back') {
+    const cameraRef = useRef(null);
+    const device = useCameraDevice(facing);
+    const { hasPermission } = useCameraPermission();
+    const capturePhoto = useCallback(async ()=>{
+        if (!cameraRef.current) return null;
+        try {
+            const photo = await cameraRef.current.takePhoto({
+                flash: 'off',
+                enableShutterSound: false
+            });
+            return {
+                uri: `file://${photo.path}`,
+                width: photo.width,
+                height: photo.height
+            };
+        } catch  {
+            return null;
+        }
+    }, []);
+    const startRecording = useCallback((onFinished, onError)=>{
+        if (!cameraRef.current) return;
+        cameraRef.current.startRecording({
+            flash: 'off',
+            onRecordingFinished: (video)=>{
+                onFinished({
+                    uri: `file://${video.path}`,
+                    duration: video.duration
+                });
+            },
+            onRecordingError: onError
+        });
+    }, []);
+    const stopRecording = useCallback(async ()=>{
+        if (!cameraRef.current) return;
+        await cameraRef.current.stopRecording();
+    }, []);
+    return {
+        cameraRef,
+        device,
+        hasPermission,
+        capturePhoto,
+        startRecording,
+        stopRecording
+    };
+}
+
+function DocumentStep({ theme, locale, onCapture }) {
+    const { cameraRef, device, capturePhoto } = useCamera('back');
+    const [preview, setPreview] = React.useState(null);
+    const [capturing, setCapturing] = React.useState(false);
+    const s = styles$5(theme);
+    const handleCapture = async ()=>{
+        setCapturing(true);
+        const result = await capturePhoto();
+        setCapturing(false);
+        if (result) setPreview(result.uri);
+    };
+    const handleConfirm = ()=>{
+        if (preview) onCapture(preview);
+    };
+    if (!device) {
+        return /*#__PURE__*/ React.createElement(View, {
+            style: s.container
+        }, /*#__PURE__*/ React.createElement(ActivityIndicator, {
+            color: theme.accent
+        }));
+    }
+    return /*#__PURE__*/ React.createElement(View, {
+        style: s.container
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.title
+    }, locale.doc_title), /*#__PURE__*/ React.createElement(Text, {
+        style: s.subtitle
+    }, locale.doc_instruction), preview ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Image, {
+        source: {
+            uri: preview
+        },
+        style: s.preview,
+        resizeMode: "cover"
+    }), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btnPrimary,
+        onPress: handleConfirm,
+        activeOpacity: 0.85
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnText
+    }, locale.doc_next_btn)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btnSecondary,
+        onPress: ()=>setPreview(null),
+        activeOpacity: 0.75
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnSecondaryText
+    }, locale.doc_retake_btn))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+        style: s.viewport
+    }, /*#__PURE__*/ React.createElement(Camera, {
+        ref: cameraRef,
+        style: StyleSheet.absoluteFill,
+        device: device,
+        isActive: true,
+        photo: true
+    }), /*#__PURE__*/ React.createElement(View, {
+        style: s.frameGuide,
+        pointerEvents: "none"
+    })), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: [
+            s.btnPrimary,
+            capturing && s.btnDisabled
+        ],
+        onPress: handleCapture,
+        disabled: capturing,
+        activeOpacity: 0.85
+    }, capturing ? /*#__PURE__*/ React.createElement(ActivityIndicator, {
+        color: "#fff"
+    }) : /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnText
+    }, locale.doc_capture_btn))));
+}
+const styles$5 = (t)=>StyleSheet.create({
+        container: {
+            padding: 24
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: '700',
+            color: t.text,
+            marginBottom: 8
+        },
+        subtitle: {
+            fontSize: 14,
+            color: t.subtext,
+            lineHeight: 20,
+            marginBottom: 16
+        },
+        viewport: {
+            width: '100%',
+            aspectRatio: 4 / 3,
+            borderRadius: t.radius,
+            overflow: 'hidden',
+            backgroundColor: '#000',
+            marginBottom: 16,
+            position: 'relative'
+        },
+        frameGuide: {
+            position: 'absolute',
+            top: '8%',
+            left: '5%',
+            right: '5%',
+            bottom: '8%',
+            borderWidth: 2,
+            borderColor: 'rgba(255,255,255,0.7)',
+            borderRadius: 8
+        },
+        preview: {
+            width: '100%',
+            aspectRatio: 4 / 3,
+            borderRadius: t.radius,
+            marginBottom: 16,
+            borderWidth: 1,
+            borderColor: t.border
+        },
+        btnPrimary: {
+            backgroundColor: t.accent,
+            borderRadius: t.radius,
+            paddingVertical: 14,
+            alignItems: 'center',
+            marginBottom: 10
+        },
+        btnSecondary: {
+            backgroundColor: t.card,
+            borderRadius: t.radius,
+            paddingVertical: 14,
+            alignItems: 'center',
+            borderWidth: 1,
+            borderColor: t.border
+        },
+        btnDisabled: {
+            opacity: 0.6
+        },
+        btnText: {
+            color: '#fff',
+            fontSize: 15,
+            fontWeight: '600'
+        },
+        btnSecondaryText: {
+            color: t.text,
+            fontSize: 15,
+            fontWeight: '600'
+        }
+    });
+
+function SelfieStep({ theme, locale, onCapture, onBack }) {
+    const { cameraRef, device, capturePhoto } = useCamera('front');
+    const [preview, setPreview] = React.useState(null);
+    const [capturing, setCapturing] = React.useState(false);
+    const s = styles$4(theme);
+    const handleCapture = async ()=>{
+        setCapturing(true);
+        const result = await capturePhoto();
+        setCapturing(false);
+        if (result) setPreview(result.uri);
+    };
+    if (!device) return /*#__PURE__*/ React.createElement(ActivityIndicator, {
+        color: theme.accent,
+        style: {
+            margin: 40
+        }
+    });
+    return /*#__PURE__*/ React.createElement(View, {
+        style: s.container
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.title
+    }, locale.selfie_title), /*#__PURE__*/ React.createElement(Text, {
+        style: s.subtitle
+    }, locale.selfie_instruction), preview ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Image, {
+        source: {
+            uri: preview
+        },
+        style: s.preview,
+        resizeMode: "cover"
+    }), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btnPrimary,
+        onPress: ()=>onCapture(preview),
+        activeOpacity: 0.85
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnText
+    }, locale.selfie_next_btn)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btnSecondary,
+        onPress: ()=>setPreview(null),
+        activeOpacity: 0.75
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnSecondaryText
+    }, locale.selfie_retake_btn))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+        style: s.viewport
+    }, /*#__PURE__*/ React.createElement(Camera, {
+        ref: cameraRef,
+        style: StyleSheet.absoluteFill,
+        device: device,
+        isActive: true,
+        photo: true
+    }), /*#__PURE__*/ React.createElement(View, {
+        style: s.ovalGuide,
+        pointerEvents: "none"
+    })), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: [
+            s.btnPrimary,
+            capturing && s.btnDisabled
+        ],
+        onPress: handleCapture,
+        disabled: capturing,
+        activeOpacity: 0.85
+    }, capturing ? /*#__PURE__*/ React.createElement(ActivityIndicator, {
+        color: "#fff"
+    }) : /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnText
+    }, locale.selfie_capture_btn)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btnSecondary,
+        onPress: onBack,
+        activeOpacity: 0.75
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnSecondaryText
+    }, locale.doc_retake_btn))));
+}
+const styles$4 = (t)=>StyleSheet.create({
+        container: {
+            padding: 24
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: '700',
+            color: t.text,
+            marginBottom: 8
+        },
+        subtitle: {
+            fontSize: 14,
+            color: t.subtext,
+            lineHeight: 20,
+            marginBottom: 16
+        },
+        viewport: {
+            width: '100%',
+            aspectRatio: 3 / 4,
+            borderRadius: t.radius,
+            overflow: 'hidden',
+            backgroundColor: '#000',
+            marginBottom: 16,
+            position: 'relative',
+            alignSelf: 'center',
+            maxWidth: 280
+        },
+        ovalGuide: {
+            position: 'absolute',
+            top: '8%',
+            left: '12%',
+            right: '12%',
+            bottom: '8%',
+            borderWidth: 2,
+            borderColor: 'rgba(255,255,255,0.7)',
+            borderRadius: 999
+        },
+        preview: {
+            width: 240,
+            height: 320,
+            borderRadius: t.radius,
+            marginBottom: 16,
+            alignSelf: 'center',
+            borderWidth: 1,
+            borderColor: t.border
+        },
+        btnPrimary: {
+            backgroundColor: t.accent,
+            borderRadius: t.radius,
+            paddingVertical: 14,
+            alignItems: 'center',
+            marginBottom: 10
+        },
+        btnSecondary: {
+            backgroundColor: t.card,
+            borderRadius: t.radius,
+            paddingVertical: 14,
+            alignItems: 'center',
+            borderWidth: 1,
+            borderColor: t.border
+        },
+        btnDisabled: {
+            opacity: 0.6
+        },
+        btnText: {
+            color: '#fff',
+            fontSize: 15,
+            fontWeight: '600'
+        },
+        btnSecondaryText: {
+            color: t.text,
+            fontSize: 15,
+            fontWeight: '600'
+        }
+    });
+
+function LivenessStep({ theme, locale, duration, onCapture, onBack }) {
+    const { cameraRef, device, startRecording, stopRecording } = useCamera('front');
+    const [recording, setRecording] = useState(false);
+    const [countdown, setCountdown] = useState(Math.ceil(duration / 1000));
+    const timerRef = useRef(null);
+    const pulseAnim = useRef(new Animated.Value(1)).current;
+    const s = styles$3(theme);
+    // Pulse animation for recording indicator
+    useEffect(()=>{
+        if (recording) {
+            Animated.loop(Animated.sequence([
+                Animated.timing(pulseAnim, {
+                    toValue: 0.3,
+                    duration: 600,
+                    useNativeDriver: true
+                }),
+                Animated.timing(pulseAnim, {
+                    toValue: 1,
+                    duration: 600,
+                    useNativeDriver: true
+                })
+            ])).start();
+        } else {
+            pulseAnim.setValue(1);
+        }
+    }, [
+        recording,
+        pulseAnim
+    ]);
+    const handleStart = ()=>{
+        if (!cameraRef.current) return;
+        setRecording(true);
+        setCountdown(Math.ceil(duration / 1000));
+        startRecording((video)=>{
+            setRecording(false);
+            onCapture(video.uri);
+        }, ()=>setRecording(false));
+        // Countdown tick
+        let remaining = duration / 1000;
+        timerRef.current = setInterval(()=>{
+            remaining -= 0.1;
+            setCountdown(Math.max(0, Math.ceil(remaining)));
+            if (remaining <= 0) {
+                if (timerRef.current) clearInterval(timerRef.current);
+                stopRecording();
+            }
+        }, 100);
+    };
+    useEffect(()=>{
+        return ()=>{
+            if (timerRef.current) clearInterval(timerRef.current);
+        };
+    }, []);
+    if (!device) return /*#__PURE__*/ React.createElement(ActivityIndicator, {
+        color: theme.accent,
+        style: {
+            margin: 40
+        }
+    });
+    return /*#__PURE__*/ React.createElement(View, {
+        style: s.container
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.title
+    }, locale.liveness_title), /*#__PURE__*/ React.createElement(Text, {
+        style: s.subtitle
+    }, recording ? locale.liveness_recording : locale.liveness_instruction), /*#__PURE__*/ React.createElement(View, {
+        style: s.viewport
+    }, /*#__PURE__*/ React.createElement(Camera, {
+        ref: cameraRef,
+        style: StyleSheet.absoluteFill,
+        device: device,
+        isActive: true,
+        video: true,
+        audio: true
+    }), /*#__PURE__*/ React.createElement(View, {
+        style: s.ovalGuide,
+        pointerEvents: "none"
+    }), recording && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+        style: s.recBadge
+    }, /*#__PURE__*/ React.createElement(Animated.View, {
+        style: [
+            s.recDot,
+            {
+                opacity: pulseAnim
+            }
+        ]
+    }), /*#__PURE__*/ React.createElement(Text, {
+        style: s.recText
+    }, "REC")), /*#__PURE__*/ React.createElement(View, {
+        style: s.countdownBadge
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.countdownText
+    }, countdown)))), !recording && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btnPrimary,
+        onPress: handleStart,
+        activeOpacity: 0.85
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnText
+    }, locale.liveness_start_btn)), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btnSecondary,
+        onPress: onBack,
+        activeOpacity: 0.75
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnSecondaryText
+    }, locale.selfie_retake_btn))));
+}
+const styles$3 = (t)=>StyleSheet.create({
+        container: {
+            padding: 24
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: '700',
+            color: t.text,
+            marginBottom: 8
+        },
+        subtitle: {
+            fontSize: 14,
+            color: t.subtext,
+            lineHeight: 20,
+            marginBottom: 16
+        },
+        viewport: {
+            width: '100%',
+            aspectRatio: 3 / 4,
+            borderRadius: t.radius,
+            overflow: 'hidden',
+            backgroundColor: '#000',
+            marginBottom: 16,
+            alignSelf: 'center',
+            maxWidth: 280,
+            position: 'relative'
+        },
+        ovalGuide: {
+            position: 'absolute',
+            top: '8%',
+            left: '12%',
+            right: '12%',
+            bottom: '8%',
+            borderWidth: 2,
+            borderColor: 'rgba(255,255,255,0.7)',
+            borderRadius: 999
+        },
+        recBadge: {
+            position: 'absolute',
+            top: 10,
+            left: 10,
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: 'rgba(220,38,38,0.85)',
+            borderRadius: 999,
+            paddingHorizontal: 10,
+            paddingVertical: 4,
+            gap: 6
+        },
+        recDot: {
+            width: 8,
+            height: 8,
+            borderRadius: 4,
+            backgroundColor: '#fff'
+        },
+        recText: {
+            color: '#fff',
+            fontSize: 12,
+            fontWeight: '700'
+        },
+        countdownBadge: {
+            position: 'absolute',
+            bottom: 12,
+            alignSelf: 'center',
+            width: 44,
+            height: 44,
+            borderRadius: 22,
+            backgroundColor: 'rgba(0,0,0,0.5)',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        countdownText: {
+            color: '#fff',
+            fontSize: 18,
+            fontWeight: '700'
+        },
+        btnPrimary: {
+            backgroundColor: t.accent,
+            borderRadius: t.radius,
+            paddingVertical: 14,
+            alignItems: 'center',
+            marginBottom: 10
+        },
+        btnSecondary: {
+            backgroundColor: t.card,
+            borderRadius: t.radius,
+            paddingVertical: 14,
+            alignItems: 'center',
+            borderWidth: 1,
+            borderColor: t.border
+        },
+        btnText: {
+            color: '#fff',
+            fontSize: 15,
+            fontWeight: '600'
+        },
+        btnSecondaryText: {
+            color: t.text,
+            fontSize: 15,
+            fontWeight: '600'
+        }
+    });
+
+function ProcessingStep({ theme, locale }) {
+    const spinAnim = useRef(new Animated.Value(0)).current;
+    const s = styles$2(theme);
+    useEffect(()=>{
+        Animated.loop(Animated.timing(spinAnim, {
+            toValue: 1,
+            duration: 800,
+            useNativeDriver: true
+        })).start();
+    }, [
+        spinAnim
+    ]);
+    const spin = spinAnim.interpolate({
+        inputRange: [
+            0,
+            1
+        ],
+        outputRange: [
+            '0deg',
+            '360deg'
+        ]
+    });
+    return /*#__PURE__*/ React.createElement(View, {
+        style: s.container
+    }, /*#__PURE__*/ React.createElement(Animated.View, {
+        style: [
+            s.spinner,
+            {
+                transform: [
+                    {
+                        rotate: spin
+                    }
+                ]
+            }
+        ]
+    }), /*#__PURE__*/ React.createElement(Text, {
+        style: s.title
+    }, locale.processing_title), /*#__PURE__*/ React.createElement(Text, {
+        style: s.subtitle
+    }, locale.processing_subtitle));
+}
+const styles$2 = (t)=>StyleSheet.create({
+        container: {
+            padding: 48,
+            alignItems: 'center',
+            gap: 16
+        },
+        spinner: {
+            width: 52,
+            height: 52,
+            borderRadius: 26,
+            borderWidth: 4,
+            borderColor: t.border,
+            borderTopColor: t.accent,
+            marginBottom: 8
+        },
+        title: {
+            fontSize: 18,
+            fontWeight: '700',
+            color: t.text,
+            textAlign: 'center'
+        },
+        subtitle: {
+            fontSize: 14,
+            color: t.subtext,
+            textAlign: 'center'
+        }
+    });
+
+const ICONS = {
+    pass: '✅',
+    fail: '❌',
+    review: '⏳'
+};
+const ICON_BG = {
+    pass: '#d1fae5',
+    fail: '#fee2e2',
+    review: '#fef3c7'
+};
+function ResultStep({ theme, locale, result, error, onRetry }) {
+    const s = styles$1(theme);
+    if (!result) {
+        return /*#__PURE__*/ React.createElement(View, {
+            style: s.container
+        }, /*#__PURE__*/ React.createElement(View, {
+            style: [
+                s.iconWrap,
+                {
+                    backgroundColor: '#fee2e2'
+                }
+            ]
+        }, /*#__PURE__*/ React.createElement(Text, {
+            style: s.icon
+        }, "❌")), /*#__PURE__*/ React.createElement(Text, {
+            style: s.title
+        }, locale.result_fail_title), /*#__PURE__*/ React.createElement(Text, {
+            style: s.body
+        }, error ?? locale.result_fail_body), /*#__PURE__*/ React.createElement(TouchableOpacity, {
+            style: s.btn,
+            onPress: onRetry,
+            activeOpacity: 0.85
+        }, /*#__PURE__*/ React.createElement(Text, {
+            style: s.btnText
+        }, locale.result_retry_btn)));
+    }
+    const titles = {
+        pass: locale.result_pass_title,
+        fail: locale.result_fail_title,
+        review: locale.result_review_title
+    };
+    const bodies = {
+        pass: locale.result_pass_body,
+        fail: locale.result_fail_body,
+        review: locale.result_review_body
+    };
+    return /*#__PURE__*/ React.createElement(View, {
+        style: s.container
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: [
+            s.iconWrap,
+            {
+                backgroundColor: ICON_BG[result.verdict]
+            }
+        ]
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.icon
+    }, ICONS[result.verdict])), /*#__PURE__*/ React.createElement(Text, {
+        style: s.title
+    }, titles[result.verdict]), /*#__PURE__*/ React.createElement(Text, {
+        style: s.body
+    }, bodies[result.verdict]), result.verdict === 'fail' && /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        style: s.btn,
+        onPress: onRetry,
+        activeOpacity: 0.85
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.btnText
+    }, locale.result_retry_btn)));
+}
+const styles$1 = (t)=>StyleSheet.create({
+        container: {
+            padding: 40,
+            alignItems: 'center',
+            gap: 12
+        },
+        iconWrap: {
+            width: 76,
+            height: 76,
+            borderRadius: 38,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: 8
+        },
+        icon: {
+            fontSize: 34
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: '700',
+            color: t.text,
+            textAlign: 'center'
+        },
+        body: {
+            fontSize: 14,
+            color: t.subtext,
+            textAlign: 'center',
+            lineHeight: 21
+        },
+        btn: {
+            marginTop: 8,
+            backgroundColor: t.accent,
+            borderRadius: t.radius,
+            paddingVertical: 14,
+            paddingHorizontal: 32,
+            alignItems: 'center'
+        },
+        btnText: {
+            color: '#fff',
+            fontSize: 15,
+            fontWeight: '600'
+        }
+    });
+
+const STEP_INDEX = {
+    intro: -1,
+    document: 0,
+    selfie: 1,
+    liveness: 2,
+    processing: 3,
+    result: 3
+};
+function KernaqVerify({ visible, apiKey, backendUrl, country = 'KEN', reference, sandbox = false, livenessDuration = 3000, documentTypes = [
+    'national_id',
+    'passport'
+], theme: themeProp, locale: localeProp, onCancel, onComplete, onError }) {
+    const [step, setStep] = useState('intro');
+    const [capture, setCapture] = useState({});
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    const theme = useMemo(()=>resolveTheme(themeProp), [
+        themeProp
+    ]);
+    const locale = useMemo(()=>({
+            ...DEFAULT_LOCALE,
+            ...localeProp
+        }), [
+        localeProp
+    ]);
+    const { requestPermissions } = usePermissions();
+    const s = styles(theme);
+    const reset = useCallback(()=>{
+        setStep('intro');
+        setCapture({});
+        setResult(null);
+        setError(null);
+    }, []);
+    const goto = useCallback(async (next)=>{
+        if (next === 'document' || next === 'selfie' || next === 'liveness') {
+            const granted = await requestPermissions();
+            if (!granted) {
+                setError(locale.error_camera_denied);
+                return;
+            }
+        }
+        setStep(next);
+        if (next === 'processing') {
+            submit();
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        capture,
+        locale
+    ]);
+    const submit = useCallback(async ()=>{
+        const { documentUri, selfieUri, videoUri } = capture;
+        if (!documentUri || !selfieUri) {
+            setError('Missing captures — please restart.');
+            setStep('result');
+            return;
+        }
+        const base = (backendUrl ?? 'https://api.identity.kernaq.com/v1').replace(/\/$/, '');
+        const form = new FormData();
+        form.append('document', {
+            uri: documentUri,
+            name: 'document.jpg',
+            type: 'image/jpeg'
+        });
+        form.append('selfie', {
+            uri: selfieUri,
+            name: 'selfie.jpg',
+            type: 'image/jpeg'
+        });
+        if (videoUri) {
+            form.append('video', {
+                uri: videoUri,
+                name: 'liveness.mp4',
+                type: 'video/mp4'
+            });
+        }
+        form.append('document_type', documentTypes[0] ?? 'national_id');
+        form.append('country', country);
+        form.append('reference', reference ?? `kq_${Date.now()}`);
+        if (sandbox) form.append('sandbox', 'true');
+        const headers = {
+            'Content-Type': 'multipart/form-data'
+        };
+        if (apiKey) headers['X-API-Key'] = apiKey;
+        try {
+            const res = await fetch(`${base}/verify`, {
+                method: 'POST',
+                headers,
+                body: form
+            });
+            const body = await res.json();
+            if (!res.ok) throw new Error(body['message'] ?? `HTTP ${res.status}`);
+            const r = {
+                verificationId: body['verification_id'],
+                reference: body['reference'],
+                verdict: body['verdict'],
+                score: body['score'] ?? 0,
+                faceMatch: body['face_match'] ?? false,
+                isLive: body['is_live'] ?? false,
+                documentFields: body['document_fields']
+            };
+            setResult(r);
+            setStep('result');
+            onComplete?.(r);
+        } catch (err) {
+            const msg = err.message;
+            setError(`${locale.error_network} ${msg}`);
+            setStep('result');
+            onError?.({
+                code: 'network_error',
+                message: msg
+            });
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        capture
+    ]);
+    const handleCancel = ()=>{
+        reset();
+        onCancel?.();
+    };
+    const progressSteps = [
+        'document',
+        'selfie',
+        'liveness',
+        'processing'
+    ];
+    const currentIdx = STEP_INDEX[step];
+    return /*#__PURE__*/ React.createElement(Modal, {
+        visible: visible,
+        animationType: "slide",
+        presentationStyle: "pageSheet",
+        onRequestClose: handleCancel
+    }, /*#__PURE__*/ React.createElement(SafeAreaView, {
+        style: [
+            s.safeArea,
+            {
+                backgroundColor: theme.bg
+            }
+        ]
+    }, /*#__PURE__*/ React.createElement(View, {
+        style: s.header
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.logo
+    }, "Kernaq"), step !== 'processing' && /*#__PURE__*/ React.createElement(TouchableOpacity, {
+        onPress: handleCancel,
+        style: s.closeBtn,
+        hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8
+        }
+    }, /*#__PURE__*/ React.createElement(Text, {
+        style: s.closeText
+    }, "✕"))), currentIdx >= 0 && /*#__PURE__*/ React.createElement(View, {
+        style: s.progress
+    }, progressSteps.map((_, i)=>/*#__PURE__*/ React.createElement(View, {
+            key: i,
+            style: [
+                s.progressDot,
+                i < currentIdx && {
+                    backgroundColor: theme.accent,
+                    opacity: 0.4
+                },
+                i === currentIdx && {
+                    backgroundColor: theme.accent
+                }
+            ]
+        }))), /*#__PURE__*/ React.createElement(ScrollView, {
+        style: s.scroll,
+        contentContainerStyle: s.scrollContent,
+        keyboardShouldPersistTaps: "handled",
+        bounces: false
+    }, step === 'intro' && /*#__PURE__*/ React.createElement(IntroStep, {
+        theme: theme,
+        locale: locale,
+        onStart: ()=>goto('document')
+    }), step === 'document' && /*#__PURE__*/ React.createElement(DocumentStep, {
+        theme: theme,
+        locale: locale,
+        onCapture: (uri)=>{
+            setCapture((c)=>({
+                    ...c,
+                    documentUri: uri
+                }));
+            goto('selfie');
+        }
+    }), step === 'selfie' && /*#__PURE__*/ React.createElement(SelfieStep, {
+        theme: theme,
+        locale: locale,
+        onCapture: (uri)=>{
+            setCapture((c)=>({
+                    ...c,
+                    selfieUri: uri
+                }));
+            goto('liveness');
+        },
+        onBack: ()=>setStep('document')
+    }), step === 'liveness' && /*#__PURE__*/ React.createElement(LivenessStep, {
+        theme: theme,
+        locale: locale,
+        duration: livenessDuration,
+        onCapture: (uri)=>{
+            setCapture((c)=>({
+                    ...c,
+                    videoUri: uri
+                }));
+            goto('processing');
+        },
+        onBack: ()=>setStep('selfie')
+    }), step === 'processing' && /*#__PURE__*/ React.createElement(ProcessingStep, {
+        theme: theme,
+        locale: locale
+    }), step === 'result' && /*#__PURE__*/ React.createElement(ResultStep, {
+        theme: theme,
+        locale: locale,
+        result: result,
+        error: error,
+        onRetry: ()=>{
+            reset();
+            setStep('intro');
+        }
+    }))));
+}
+const styles = (t)=>StyleSheet.create({
+        safeArea: {
+            flex: 1
+        },
+        header: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 20,
+            paddingTop: Platform.OS === 'android' ? 16 : 8,
+            paddingBottom: 8
+        },
+        logo: {
+            fontSize: 14,
+            fontWeight: '700',
+            color: t.accent,
+            letterSpacing: 1.2,
+            textTransform: 'uppercase'
+        },
+        closeBtn: {
+            padding: 4
+        },
+        closeText: {
+            fontSize: 18,
+            color: t.subtext
+        },
+        progress: {
+            flexDirection: 'row',
+            gap: 6,
+            paddingHorizontal: 20,
+            paddingBottom: 8
+        },
+        progressDot: {
+            flex: 1,
+            height: 3,
+            borderRadius: 999,
+            backgroundColor: t.border
+        },
+        scroll: {
+            flex: 1
+        },
+        scrollContent: {
+            flexGrow: 1
+        }
+    });
+
+export { KernaqVerify };
+//# sourceMappingURL=index.esm.js.map