@hexar/biometric-identity-sdk-react-native 1.0.0

package/dist/components/ResultScreen.js

@@ -0,0 +1,182 @@
+"use strict";
+/**
+ * Result Screen Component
+ * Shows validation result (pass/fail)
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResultScreen = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ResultScreen = ({ result, theme, language = 'en', onClose, }) => {
+    const isSuccess = result.isValidFaceMatch && result.isDocumentAuthentic;
+    const successColor = theme?.successColor || '#10B981';
+    const errorColor = theme?.errorColor || '#EF4444';
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        react_1.default.createElement(react_native_1.ScrollView, { contentContainerStyle: styles.content },
+            react_1.default.createElement(react_native_1.View, { style: [
+                    styles.iconContainer,
+                    { backgroundColor: isSuccess ? successColor : errorColor },
+                ] },
+                react_1.default.createElement(react_native_1.Text, { style: styles.icon }, isSuccess ? '✓' : '✗')),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.title, { color: theme?.textColor || '#000000' }] }, isSuccess
+                ? (language === 'es' ? '¡Verificación Exitosa!' : 'Verification Successful!')
+                : (language === 'es' ? 'Verificación Fallida' : 'Verification Failed')),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.subtitle, { color: theme?.secondaryTextColor || '#6B7280' }] }, isSuccess
+                ? (language === 'es'
+                    ? 'Tu identidad ha sido verificada correctamente'
+                    : 'Your identity has been verified successfully')
+                : (language === 'es'
+                    ? 'No pudimos verificar tu identidad'
+                    : 'We were unable to verify your identity')),
+            react_1.default.createElement(react_native_1.View, { style: styles.scoresContainer },
+                react_1.default.createElement(ScoreCard, { label: language === 'es' ? 'Coincidencia Facial' : 'Face Match', score: result.matchScore, passed: result.isValidFaceMatch, theme: theme }),
+                react_1.default.createElement(ScoreCard, { label: language === 'es' ? 'Presencia Vital' : 'Liveness', score: result.livenessScore, passed: result.livenessScore >= 80, theme: theme })),
+            result.extractedDocumentData && (react_1.default.createElement(react_native_1.View, { style: styles.dataContainer },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.sectionTitle, { color: theme?.textColor || '#000000' }] }, language === 'es' ? 'Datos Extraídos' : 'Extracted Data'),
+                react_1.default.createElement(DataRow, { label: language === 'es' ? 'Nombre' : 'Name', value: `${result.extractedDocumentData.firstName} ${result.extractedDocumentData.lastName}`, theme: theme }),
+                react_1.default.createElement(DataRow, { label: language === 'es' ? 'Documento' : 'Document Number', value: result.extractedDocumentData.documentNumber, theme: theme }),
+                react_1.default.createElement(DataRow, { label: language === 'es' ? 'Fecha de Nacimiento' : 'Date of Birth', value: result.extractedDocumentData.dateOfBirth, theme: theme }),
+                react_1.default.createElement(DataRow, { label: language === 'es' ? 'Nacionalidad' : 'Nationality', value: result.extractedDocumentData.nationality, theme: theme }))),
+            result.warnings.length > 0 && (react_1.default.createElement(react_native_1.View, { style: styles.warningsContainer },
+                react_1.default.createElement(react_native_1.Text, { style: [styles.sectionTitle, { color: theme?.warningColor || '#F59E0B' }] }, language === 'es' ? 'Advertencias' : 'Warnings'),
+                result.warnings.map((warning, index) => (react_1.default.createElement(react_native_1.Text, { key: index, style: styles.warningText },
+                    "\u2022 ",
+                    warning.replace(/_/g, ' '))))))),
+        react_1.default.createElement(react_native_1.View, { style: styles.footer },
+            react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
+                    styles.button,
+                    { backgroundColor: theme?.primaryColor || '#6366F1' },
+                ], onPress: onClose },
+                react_1.default.createElement(react_native_1.Text, { style: styles.buttonText }, language === 'es' ? 'Continuar' : 'Continue')))));
+};
+exports.ResultScreen = ResultScreen;
+const ScoreCard = ({ label, score, passed, theme }) => (react_1.default.createElement(react_native_1.View, { style: scoreStyles.container },
+    react_1.default.createElement(react_native_1.Text, { style: scoreStyles.label }, label),
+    react_1.default.createElement(react_native_1.Text, { style: [
+            scoreStyles.score,
+            { color: passed ? (theme?.successColor || '#10B981') : (theme?.errorColor || '#EF4444') },
+        ] }, Math.round(score)),
+    react_1.default.createElement(react_native_1.Text, { style: scoreStyles.status }, passed ? '✓ Passed' : '✗ Failed')));
+const scoreStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F9FAFB',
+        padding: 16,
+        borderRadius: 12,
+        alignItems: 'center',
+        marginHorizontal: 8,
+    },
+    label: {
+        fontSize: 14,
+        color: '#6B7280',
+        marginBottom: 8,
+    },
+    score: {
+        fontSize: 32,
+        fontWeight: 'bold',
+        marginBottom: 4,
+    },
+    status: {
+        fontSize: 12,
+        color: '#9CA3AF',
+    },
+});
+const DataRow = ({ label, value, theme }) => (react_1.default.createElement(react_native_1.View, { style: dataRowStyles.container },
+    react_1.default.createElement(react_native_1.Text, { style: [dataRowStyles.label, { color: theme?.secondaryTextColor || '#6B7280' }] }, label),
+    react_1.default.createElement(react_native_1.Text, { style: [dataRowStyles.value, { color: theme?.textColor || '#000000' }] }, value)));
+const dataRowStyles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: '#E5E7EB',
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    value: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    content: {
+        padding: 24,
+        alignItems: 'center',
+    },
+    iconContainer: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 24,
+    },
+    icon: {
+        fontSize: 40,
+        color: '#FFFFFF',
+        fontWeight: 'bold',
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: 'bold',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: 16,
+        marginBottom: 32,
+        textAlign: 'center',
+    },
+    scoresContainer: {
+        flexDirection: 'row',
+        width: '100%',
+        marginBottom: 32,
+    },
+    dataContainer: {
+        width: '100%',
+        marginBottom: 24,
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 16,
+    },
+    warningsContainer: {
+        width: '100%',
+        backgroundColor: '#FEF3C7',
+        padding: 16,
+        borderRadius: 8,
+    },
+    warningText: {
+        fontSize: 14,
+        color: '#92400E',
+        marginVertical: 4,
+    },
+    footer: {
+        padding: 24,
+        borderTopWidth: 1,
+        borderTopColor: '#E5E7EB',
+    },
+    button: {
+        paddingVertical: 16,
+        paddingHorizontal: 32,
+        borderRadius: 8,
+        alignItems: 'center',
+    },
+    buttonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});
+exports.default = exports.ResultScreen;

package/dist/components/ValidationProgress.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Validation Progress Component
+ * Shows AI validation progress
+ */
+import React from 'react';
+import { ThemeConfig, SupportedLanguage } from '@hexar/biometric-identity-sdk-core';
+export interface ValidationProgressProps {
+    progress: number;
+    theme?: ThemeConfig;
+    language?: SupportedLanguage;
+}
+export declare const ValidationProgress: React.FC<ValidationProgressProps>;
+export default ValidationProgress;
+//# sourceMappingURL=ValidationProgress.d.ts.map

package/dist/components/ValidationProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationProgress.d.ts","sourceRoot":"","sources":["../../src/components/ValidationProgress.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmFhE,CAAC;AAqHF,eAAe,kBAAkB,CAAC"}

package/dist/components/ValidationProgress.js

@@ -0,0 +1,143 @@
+"use strict";
+/**
+ * Validation Progress Component
+ * Shows AI validation progress
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidationProgress = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const ValidationProgress = ({ progress, theme, language = 'en', }) => {
+    const getStatusText = () => {
+        if (progress < 80)
+            return language === 'es' ? 'Extrayendo datos del documento...' : 'Extracting document data...';
+        if (progress < 85)
+            return language === 'es' ? 'Validando presencia vital...' : 'Validating liveness...';
+        if (progress < 90)
+            return language === 'es' ? 'Detectando rostro en documento...' : 'Detecting face in document...';
+        if (progress < 95)
+            return language === 'es' ? 'Comparando rostros...' : 'Comparing faces...';
+        return language === 'es' ? 'Validando autenticidad del documento...' : 'Validating document authenticity...';
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        react_1.default.createElement(react_native_1.View, { style: styles.content },
+            react_1.default.createElement(react_native_1.ActivityIndicator, { size: "large", color: theme?.primaryColor || '#6366F1' }),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.title, { color: theme?.textColor || '#000000' }] }, language === 'es' ? 'Validando Identidad' : 'Validating Identity'),
+            react_1.default.createElement(react_native_1.Text, { style: [styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }] }, getStatusText()),
+            react_1.default.createElement(react_native_1.View, { style: styles.progressBarContainer },
+                react_1.default.createElement(react_native_1.View, { style: styles.progressBar },
+                    react_1.default.createElement(react_native_1.View, { style: [
+                            styles.progressFill,
+                            {
+                                width: `${progress}%`,
+                                backgroundColor: theme?.primaryColor || '#6366F1',
+                            },
+                        ] })),
+                react_1.default.createElement(react_native_1.Text, { style: [styles.progressText, { color: theme?.textColor || '#000000' }] },
+                    Math.round(progress),
+                    "%")),
+            react_1.default.createElement(react_native_1.View, { style: styles.stepsContainer },
+                react_1.default.createElement(ValidationStep, { icon: "\u2713", text: language === 'es' ? 'Extracción OCR' : 'OCR Extraction', completed: progress >= 80, theme: theme }),
+                react_1.default.createElement(ValidationStep, { icon: "\u2713", text: language === 'es' ? 'Detección de Presencia Vital' : 'Liveness Detection', completed: progress >= 85, theme: theme }),
+                react_1.default.createElement(ValidationStep, { icon: "\u2713", text: language === 'es' ? 'Coincidencia Facial' : 'Face Matching', completed: progress >= 95, theme: theme }),
+                react_1.default.createElement(ValidationStep, { icon: "\u2713", text: language === 'es' ? 'Validación de Documento' : 'Document Validation', completed: progress >= 100, theme: theme })),
+            react_1.default.createElement(react_native_1.Text, { style: styles.bottomText }, language === 'es'
+                ? 'Esto puede tomar unos segundos...'
+                : 'This may take a few seconds...'))));
+};
+exports.ValidationProgress = ValidationProgress;
+const ValidationStep = ({ icon, text, completed, theme, }) => (react_1.default.createElement(react_native_1.View, { style: stepStyles.container },
+    react_1.default.createElement(react_native_1.View, { style: [
+            stepStyles.iconContainer,
+            completed && {
+                backgroundColor: theme?.successColor || '#10B981',
+            },
+        ] }, completed && react_1.default.createElement(react_native_1.Text, { style: stepStyles.icon }, icon)),
+    react_1.default.createElement(react_native_1.Text, { style: [stepStyles.text, completed && stepStyles.textCompleted] }, text)));
+const stepStyles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginVertical: 8,
+    },
+    iconContainer: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: '#E5E7EB',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 12,
+    },
+    icon: {
+        color: '#FFFFFF',
+        fontSize: 14,
+        fontWeight: 'bold',
+    },
+    text: {
+        fontSize: 14,
+        color: '#9CA3AF',
+    },
+    textCompleted: {
+        color: '#111827',
+        fontWeight: '500',
+    },
+});
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    content: {
+        width: '85%',
+        alignItems: 'center',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginTop: 24,
+        marginBottom: 8,
+    },
+    statusText: {
+        fontSize: 16,
+        marginBottom: 32,
+        textAlign: 'center',
+    },
+    progressBarContainer: {
+        width: '100%',
+        marginBottom: 32,
+    },
+    progressBar: {
+        width: '100%',
+        height: 8,
+        backgroundColor: '#E5E7EB',
+        borderRadius: 4,
+        overflow: 'hidden',
+        marginBottom: 8,
+    },
+    progressFill: {
+        height: '100%',
+        borderRadius: 4,
+    },
+    progressText: {
+        fontSize: 14,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    stepsContainer: {
+        width: '100%',
+        marginTop: 24,
+        marginBottom: 32,
+    },
+    bottomText: {
+        fontSize: 14,
+        color: '#9CA3AF',
+        textAlign: 'center',
+    },
+});
+exports.default = exports.ValidationProgress;

package/dist/components/VideoRecorder.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Smart Video Recorder Component for Liveness Detection
+ * Features challenge-response flow with guided head movements
+ */
+import React from 'react';
+import { ThemeConfig, LivenessInstruction } from '@hexar/biometric-identity-sdk-core';
+export interface ChallengeAction {
+    action: string;
+    instruction: string;
+    duration_ms: number;
+    order: number;
+    icon?: string;
+}
+export interface VideoRecorderProps {
+    theme?: ThemeConfig;
+    /** Total recording duration in ms (default: 8000ms for smart mode) */
+    duration?: number;
+    /** Instructions for user to follow */
+    instructions?: LivenessInstruction[];
+    /** Pre-fetched challenges from backend */
+    challenges?: ChallengeAction[];
+    /** Session ID from backend challenge */
+    sessionId?: string;
+    /** Enable smart challenge mode (default: true) */
+    smartMode?: boolean;
+    /** Callback when recording completes */
+    onComplete: (videoData: VideoRecordingResult) => void;
+    /** Callback when user cancels */
+    onCancel: () => void;
+    /** Callback to fetch challenges from backend */
+    onFetchChallenges?: () => Promise<ChallengeAction[]>;
+}
+export interface VideoRecordingResult {
+    frames: string[];
+    duration: number;
+    instructionsFollowed: boolean;
+    qualityScore: number;
+    challengesCompleted: string[];
+    sessionId?: string;
+}
+export declare const VideoRecorder: React.FC<VideoRecorderProps>;
+export default VideoRecorder;
+//# sourceMappingURL=VideoRecorder.d.ts.map

package/dist/components/VideoRecorder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoRecorder.d.ts","sourceRoot":"","sources":["../../src/components/VideoRecorder.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AASxE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAGtF,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wCAAwC;IACxC,UAAU,EAAE,CAAC,SAAS,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtD,iCAAiC;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;CACtD;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgDD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsdtD,CAAC;AA+NF,eAAe,aAAa,CAAC"}